/* scorchio.eu, Channel 9 Meteorologicos.
   Styled after the Channel 9 studio weather board: apricot studio,
   cream/olive/orange TV bezel, retro blue sea, flat orange land.
   Font: Shrikhand (SIL OFL 1.1), self-hosted. */

@font-face {
  font-family: 'Shrikhand';
  src: url('../font/shrikhand.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --sea: #74b7d6;
  --land: #dea25e;
  --landhot: #e5762e;
  --cream: #fbeed3;
  --beige: #e8d0a9;
  --yellow: #ffd23f;
  --gold: #eebc4e;
  --orange: #ff9e2c;
  --ring: #d96f2a;
  --olive: #91876b;
  --hot: #ff7a3d;
  --red: #d94f30;
  --brown: #7a4a21;
  --darkbrown: #3d2410;
  --display: 'Shrikhand', 'Cooper Black', 'Arial Rounded MT Bold', serif;
  --label: 'Futura', 'Trebuchet MS', Verdana, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: #7c3e1a; }
html, body { height: 100%; }

body {
  background:
    linear-gradient(180deg, #7c3e1a 0%, #a25726 14%, #d18f4e 32%, #eec089 58%, #e2a75e 100%) fixed;
  color: var(--darkbrown);
  font-family: var(--label);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- gameshow trail flourish ---- */
.c9-trail {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .38;
  pointer-events: none;
}

/* ---- retro ident stripes ---- */
.stripes {
  height: 12px;
  flex: none;
  background: linear-gradient(
    to bottom,
    var(--brown) 0 20%,
    var(--red) 20% 40%,
    var(--hot) 40% 60%,
    var(--yellow) 60% 80%,
    var(--cream) 80% 100%
  );
}
.stripes.flip { transform: scaleY(-1); }

/* ---- header ---- */
.c9-head {
  flex: none;
  text-align: center;
  padding: clamp(6px, 1.2vh, 14px) 16px 0;
  position: relative;
}

.c9-super {
  font-size: clamp(10px, 1.4vw, 14px);
  letter-spacing: .45em;
  color: var(--cream);
  text-shadow: 0 1px 0 rgba(61, 36, 16, .5);
}
.c9-super .con {
  color: var(--yellow);
  letter-spacing: .3em;
}

.c9-title-wrap {
  position: relative;
  display: inline-block;
  padding: 6px 44px 0;
}

.sunburst {
  position: absolute;
  inset: -70% -30%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 158, 44, .25) 0deg 9deg,
    rgba(0, 0, 0, 0) 9deg 18deg
  );
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, transparent 78%);
  mask-image: radial-gradient(closest-side, #000 0%, transparent 78%);
  animation: c9spin 48s linear infinite;
  pointer-events: none;
}

.c9-title {
  position: relative;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 9.5vw, 5.6rem);
  line-height: 1.2;
  padding: .04em .14em .02em;
  transform: rotate(-2.5deg);
  background: linear-gradient(180deg, var(--yellow) 15%, var(--orange) 55%, var(--red) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 3px 0 var(--brown))
    drop-shadow(0 5px 0 var(--darkbrown))
    drop-shadow(0 0 26px rgba(255, 122, 61, .4));
}

.c9-strap {
  margin-top: clamp(2px, .8vh, 8px);
  font-size: clamp(11px, 1.7vw, 17px);
  letter-spacing: .28em;
  color: var(--beige);
}
.c9-strap b { color: var(--cream); }
.c9-strap .hot {
  font-family: var(--display);
  letter-spacing: .06em;
  color: var(--yellow);
  text-shadow: 0 2px 0 rgba(61, 36, 16, .55);
  margin-left: .5em;
}

/* ---- board: tabs + TV bezel frame ---- */
.c9-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: clamp(4px, 1.2vh, 12px) clamp(10px, 3vw, 30px) clamp(10px, 2vh, 20px);
}

.c9-board {
  flex: 1;
  max-width: 1050px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.c9-tabs {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px 10px;
}

.c9-select { position: relative; z-index: 6; }

.c9-select-btn {
  font-family: var(--display);
  font-size: clamp(13px, 1.7vw, 17px);
  line-height: 1.25;
  letter-spacing: .05em;
  color: var(--brown);
  background: linear-gradient(180deg, #efe0c2, #ddc49a);
  border: 2px solid rgba(122, 74, 33, .45);
  border-radius: 999px;
  padding: 6px 20px 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5em;
  box-shadow:
    inset 0 2px 3px rgba(255, 250, 235, .7),
    inset 0 -3px 4px rgba(122, 74, 33, .28),
    0 1px 2px rgba(61, 36, 16, .25);
  transition: filter .15s ease;
}
.c9-select-btn:hover { filter: brightness(1.05); }
.c9-select-btn .car {
  font-size: .8em;
  color: var(--ring);
  transition: transform .2s ease;
}
.c9-select.open .c9-select-btn .car { transform: rotate(180deg); }

.c9-select-list {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 230px;
  max-height: min(52vh, 380px);
  overflow: auto;
  margin: 0;
  padding: 7px;
  list-style: none;
  background: linear-gradient(180deg, #fdf3dc, #efdcb8);
  border: 2px solid rgba(122, 74, 33, .5);
  border-radius: 16px;
  box-shadow:
    0 14px 34px rgba(61, 36, 16, .4),
    inset 0 1px 2px rgba(255, 250, 235, .8);
  scrollbar-width: thin;
  scrollbar-color: var(--brown) transparent;
}
.c9-select.open .c9-select-list { display: block; }
.c9-select-list::-webkit-scrollbar { width: 8px; }
.c9-select-list::-webkit-scrollbar-thumb {
  background: rgba(122, 74, 33, .55);
  border-radius: 99px;
}
.c9-select-list li {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--brown);
  padding: 7px 13px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.c9-select-list li:hover,
.c9-select-list li:focus {
  background: rgba(255, 158, 44, .28);
  outline: none;
}
.c9-select-list li.sel {
  background: linear-gradient(180deg, var(--hot), var(--ring));
  color: var(--cream);
  text-shadow: 0 1px 0 rgba(61, 36, 16, .4);
}

.c9-mail-btn {
  margin-left: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(122, 74, 33, .45);
  background: linear-gradient(180deg, #efe0c2, #ddc49a);
  color: var(--brown);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 2px 3px rgba(255, 250, 235, .7),
    inset 0 -3px 4px rgba(122, 74, 33, .28),
    0 1px 2px rgba(61, 36, 16, .25);
  transition: filter .15s ease;
}
.c9-mail-btn:hover { filter: brightness(1.06); }
.c9-info-btn { margin-left: 14px; }
.c9-info-btn .q {
  font-family: var(--display);
  font-size: 17px;
  line-height: 1;
  color: var(--brown);
}
.c9-mail-btn.c9-info-btn + .c9-mail-btn { margin-left: 8px; }
.c9-about-text {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--darkbrown);
}
.c9-about-text p + p { margin-top: 9px; }
.c9-about-text strong { color: var(--brown); }
.c9-mail-btn svg { width: 17px; height: 13px; display: block; }

.c9-tabs-brand {
  margin-left: auto;
  padding-right: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  transform: rotate(-3deg);
}
.c9-tabs-brand .ch {
  font-size: clamp(7px, .8vw, 9px);
  font-weight: bold;
  letter-spacing: .48em;
  text-indent: .48em;
  color: var(--brown);
}
.c9-tabs-brand .n9 { margin-top: 1px; line-height: 0; }
.c9-tabs-brand .n9 svg {
  width: clamp(23px, 2.6vw, 31px);
  height: auto;
  display: block;
  filter:
    drop-shadow(0 2px 0 rgba(18, 51, 61, .45))
    drop-shadow(0 3px 6px rgba(20, 8, 0, .3));
}

.c9-tab {
  font-family: var(--display);
  font-size: clamp(13px, 1.7vw, 17px);
  line-height: 1.25;
  letter-spacing: .05em;
  color: var(--brown);
  background: linear-gradient(180deg, #efe0c2, #ddc49a);
  border: 2px solid rgba(122, 74, 33, .45);
  border-radius: 999px;
  padding: 6px 20px 7px;
  cursor: pointer;
  box-shadow:
    inset 0 2px 3px rgba(255, 250, 235, .7),
    inset 0 -3px 4px rgba(122, 74, 33, .28),
    0 1px 2px rgba(61, 36, 16, .25);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.c9-tab::before,
.c9-select-btn::before {
  content: '';
  display: inline-block;
  width: .48em;
  height: .48em;
  border-radius: 50%;
  margin-right: .55em;
  vertical-align: .08em;
  background: #8a5a30;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .4);
}
.c9-tab:hover { filter: brightness(1.05); }
.c9-tab.active {
  color: var(--cream);
  background: linear-gradient(180deg, var(--hot), var(--ring) 85%);
  border-color: rgba(122, 45, 10, .7);
  text-shadow: 0 2px 0 rgba(61, 36, 16, .45);
  box-shadow:
    inset 0 2px 3px rgba(255, 220, 160, .55),
    inset 0 -3px 4px rgba(90, 35, 5, .45),
    0 0 14px rgba(255, 158, 44, .55);
}
.c9-tab.active::before,
.c9-select.open .c9-select-btn::before {
  background: var(--yellow);
  box-shadow: 0 0 10px rgba(255, 210, 63, .95), inset 0 -1px 1px rgba(0, 0, 0, .25);
}

.c9-frame {
  flex: 1;
  min-height: 0;
  background: #f4e9d2;
  border: 5px solid var(--olive);
  border-radius: 32px;
  box-shadow:
    0 0 0 6px var(--ring),
    0 12px 30px rgba(61, 36, 16, .35);
  padding: 8px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.c9-screen {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  position: relative;
  border-radius: 21px;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 30%, #3c2410 0%, #241305 80%);
  perspective: 1200px;
}

/* the screen dims while the panel is mid-air */
.c9-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 21px;
  pointer-events: none;
  z-index: 2;
}
.c9-screen.c9-flipping::after { animation: c9dim 1.05s both; }
@keyframes c9dim {
  0%   { box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); }
  50%  { box-shadow: inset 0 0 90px rgba(20, 8, 0, .55); }
  100% { box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); }
}

/* the flipping panel is a REAL closed box: two live faces + four edges.
   perspective lives on .c9-persp, NOT on the overflow-hidden screen
   (overflow + perspective on one element flattens 3D in Safari) */
.c9-persp {
  flex: 1;
  min-width: 0;
  display: flex;
  perspective: 1200px;
}

.c9-card {
  flex: 1;
  min-width: 0;
  position: relative;
  transform-style: preserve-3d;
}

.c9-face {
  position: absolute;
  inset: 0;
  display: flex;
  border-radius: 21px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.c9-face-front { transform: translateZ(22px); }
.c9-face-back {
  transform: rotateY(180deg) translateZ(22px);
  background: radial-gradient(120% 100% at 50% 30%, #3c2410 0%, #241305 80%);
}

.c9-edge { position: absolute; }
.c9-edge.el, .c9-edge.er {
  top: 6px;
  bottom: 6px;
  width: 44px;
  transform: rotateY(90deg);
  background: linear-gradient(90deg, #8a5a30 0%, #5a3517 55%, #3a220e 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 235, 200, .15);
}
.c9-edge.el { left: 0; margin-left: -22px; }
.c9-edge.er { right: 0; margin-right: -22px; }
.c9-edge.et, .c9-edge.eb {
  left: 6px;
  right: 6px;
  height: 44px;
  transform: rotateX(90deg);
}
.c9-edge.et { top: 0; margin-top: -22px; background: linear-gradient(180deg, #a8703c, #7c4b1f); }
.c9-edge.eb { bottom: 0; margin-bottom: -22px; background: #35200d; }

#c9-map {
  flex: 1;
  min-width: 0;
  border-radius: 21px;
  background: var(--sea);
  overflow: hidden;
  display: flex;
  position: relative;
}

/* one continuous half-turn: a genuine object showing its other side.
   velocity lingers near the perpendicular so the body of the box reads */
.c9-screen.c9-flipping .c9-card {
  animation: c9flip 1.05s both;
  will-change: transform;
}
@keyframes c9flip {
  0% {
    transform: rotateY(0deg) scale(1);
    animation-timing-function: cubic-bezier(.55, .05, .67, .19);
  }
  32% {
    transform: rotateY(64deg) scale(1.05);
    animation-timing-function: cubic-bezier(.25, .6, .45, 1);
  }
  50% {
    transform: rotateY(90deg) scale(1.07);
    animation-timing-function: cubic-bezier(.55, 0, .75, .4);
  }
  68% {
    transform: rotateY(116deg) scale(1.05);
    animation-timing-function: cubic-bezier(.22, .6, .35, 1);
  }
  100% { transform: rotateY(180deg) scale(1); }
}

/* glare sweeping across the face as it turns */
.c9-screen.c9-flipping #c9-map::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 245, 215, .38) 50%,
    transparent 62%);
  transform: translateX(-130%);
  animation: c9glare 1.05s both linear;
}
@keyframes c9glare {
  0% { transform: translateX(-130%); }
  100% { transform: translateX(130%); }
}

#c9-map svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* the board title, painted on the map itself */
.c9-plate {
  position: absolute;
  top: clamp(10px, 2.4vh, 22px);
  left: clamp(16px, 3vw, 30px);
  font-family: var(--display);
  font-size: clamp(15px, 2.6vw, 27px);
  color: var(--red);
  letter-spacing: .04em;
  text-shadow: 0 2px 0 rgba(251, 238, 211, .65);
  z-index: 2;
  pointer-events: none;
}

/* base: every country is very pale land; EU countries get their
   orange fills from the per-country rules emitted by index.php,
   the active country gets inline-styled by weather.js. Overlay marks
   win over this via #c9-overlay-scoped rules below. */
#c9-map svg * {
  fill: #dccdb2;
  stroke: #eee0c4;
  stroke-width: .22;
  stroke-linejoin: round;
}
#c9-map svg .d,
#c9-map svg #large_masses_of_water { display: none !important; }

@keyframes c9pulse {
  from { fill: #e5762e; }
  to   { fill: #d95f1f; }
}

/* ---- weather marks (built by weather.js) ---- */
#c9-map #c9-overlay .c9-ray {
  fill: var(--orange);
  stroke: var(--darkbrown);
  stroke-linejoin: round;
}
#c9-map #c9-overlay .c9-rays {
  animation: c9spin 26s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
#c9-map #c9-overlay .c9-face { fill: var(--yellow); stroke: var(--darkbrown); }
#c9-map #c9-overlay text { stroke: none; }
#c9-map #c9-overlay .c9-num {
  fill: #7a3d12;
  font-family: var(--display);
}
#c9-map #c9-overlay .c9-cat {
  fill: #a03c1e;
  font-family: var(--display);
  letter-spacing: .04em;
  paint-order: stroke fill;
  stroke: var(--cream);
  stroke-width: .3em;
}
#c9-map #c9-overlay .c9-cloud circle,
#c9-map #c9-overlay .c9-cloud rect {
  fill: #efe6d6;
  stroke: #b9a888;
}
#c9-map #c9-overlay .c9-flake { fill: var(--cream); stroke: none; }
#c9-map #c9-overlay .c9-tag {
  animation: c9rock 2.4s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}
#c9-map #c9-overlay .c9-tag rect { fill: var(--red); stroke: var(--cream); }
#c9-map #c9-overlay .c9-tag rect.sh { fill: rgba(61, 36, 16, .35); stroke: none; }
#c9-map #c9-overlay .c9-tag text { fill: var(--cream); font-family: var(--display); letter-spacing: .02em; }
#c9-map #c9-overlay .c9-seal polygon { fill: var(--yellow); stroke: #a03c1e; }
#c9-map #c9-overlay .c9-seal text { fill: #a03c1e; font-family: var(--display); }
#c9-map #c9-overlay .c9-tag-brr rect { fill: #4f7d99; }
#c9-map #c9-overlay .c9-wordmark text {
  font-family: var(--display);
  letter-spacing: .01em;
}
#c9-map #c9-overlay .c9-wordmark .sh1 { fill: var(--brown); }
#c9-map #c9-overlay .c9-wordmark .sh2 { fill: rgba(61, 36, 16, .75); }
#c9-map #c9-overlay .c9-wordmark {
  animation: c9rock 2.8s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}
#c9-map #c9-overlay .c9-wmburst {
  animation: c9spin 40s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
#c9-map #c9-overlay .c9-wmburst polygon { fill: url(#c9burst); stroke: none; }
#c9-map #c9-overlay .c9-tag-brr .icicle { fill: #dff0f7; stroke: none; }

@keyframes c9rock {
  from { transform: rotate(-2.5deg); }
  to   { transform: rotate(2.5deg); }
}

@keyframes c9spin { to { transform: rotate(360deg); } }

/* weather marks plop onto the board with a little bounce */
#c9-map #c9-overlay .c9-popin.go {
  animation: c9plop .5s cubic-bezier(.3, 1.65, .45, 1) both;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes c9plop {
  0%   { transform: scale(0); opacity: 0; }
  62%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
#c9-map #c9-overlay .c9-cat.c9-fadein {
  animation: c9fadein .4s ease-out both;
}
@keyframes c9fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- ticker ---- */
.c9-ticker {
  flex: none;
  overflow: hidden;
  white-space: nowrap;
  contain: layout paint;
  isolation: isolate;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, var(--brown), var(--darkbrown));
  border-top: 3px solid var(--yellow);
  padding: 8px 0 10px;
}
.tick {
  display: inline-block;
  white-space: nowrap;
  font-size: clamp(12px, 1.7vw, 17px);
  letter-spacing: .18em;
  color: var(--beige);
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.tick .w   { color: var(--beige); margin: 0 .45em 0 1.4em; }
.tick .s   { font-family: var(--display); letter-spacing: .04em; color: var(--yellow); }
.tick .t   { color: var(--cream); margin-left: .5em; letter-spacing: .06em; }
.tick .dot { color: var(--hot); margin-left: 1.4em; }


/* ---- message the adminibus ---- */
.c9-modal[hidden] { display: none !important; }
.c9-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.c9-modal-back {
  position: absolute;
  inset: 0;
  background: rgba(46, 24, 8, .55);
  backdrop-filter: blur(2px);
}
.c9-dialog {
  position: relative;
  width: min(94vw, 470px);
  background: #f4e9d2;
  border: 5px solid var(--olive);
  border-radius: 26px;
  box-shadow:
    0 0 0 6px var(--ring),
    0 18px 50px rgba(20, 8, 0, .5);
  animation: c9pop .35s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes c9pop {
  from { transform: scale(.8) rotate(-2deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.c9-modal-x {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--cream);
  background: linear-gradient(180deg, var(--hot), var(--ring));
  color: var(--cream);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(20, 8, 0, .4);
}
.c9-dialog-body { padding: 22px 24px 20px; }
.c9-mail-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(17px, 2.4vw, 22px);
  color: var(--red);
  text-align: center;
  line-height: 1.25;
  text-shadow: 0 1px 0 rgba(255, 250, 235, .7);
}
.c9-mail-sub {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: .28em;
  text-align: center;
  color: var(--brown);
}
#c9-mail-form { margin-top: 14px; }
#c9-mail-text {
  width: 100%;
  resize: vertical;
  min-height: 110px;
  font-family: var(--label);
  font-size: 14px;
  color: var(--darkbrown);
  background: var(--cream);
  border: 2px solid rgba(122, 74, 33, .5);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: inset 0 2px 5px rgba(122, 74, 33, .18);
  outline: none;
}
#c9-mail-text:focus { border-color: var(--ring); }
.c9-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.c9-mail-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.c9-mail-count { font-size: 12px; letter-spacing: .12em; color: var(--brown); }
.c9-poota {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: .05em;
  color: var(--cream);
  background: linear-gradient(180deg, var(--hot), var(--ring) 85%);
  border: 2px solid rgba(122, 45, 10, .7);
  border-radius: 999px;
  padding: 8px 30px 9px;
  cursor: pointer;
  text-shadow: 0 2px 0 rgba(61, 36, 16, .45);
  box-shadow:
    inset 0 2px 3px rgba(255, 220, 160, .55),
    inset 0 -3px 4px rgba(90, 35, 5, .45),
    0 2px 6px rgba(20, 8, 0, .3);
  transition: filter .15s ease;
}
.c9-poota:hover { filter: brightness(1.07); }
.c9-poota:disabled { filter: grayscale(.4) brightness(.9); cursor: wait; }
.c9-mail-err {
  margin-top: 10px;
  font-family: var(--display);
  font-size: 14px;
  color: var(--red);
  text-align: center;
}
.c9-mail-thanks { text-align: center; padding: 18px 0 8px; }
.c9-thanks-sun {
  font-size: 44px;
  color: var(--orange);
  animation: c9spin 14s linear infinite;
  display: inline-block;
  text-shadow: 0 0 18px rgba(255, 158, 44, .6);
}
.c9-mail-thanks p {
  margin-top: 8px;
  font-family: var(--display);
  font-size: clamp(18px, 2.6vw, 24px);
  color: var(--red);
  text-shadow: 0 1px 0 rgba(255, 250, 235, .7);
}

.c9-noscript {
  text-align: center;
  padding: 8px 18px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--cream);
}

/* ---- CRT ---- */
.crt {
  position: fixed;
  inset: 0 0 44px 0; /* stops above the ticker: scanlines over moving text shimmer */
  pointer-events: none;
  z-index: 9;
  background:
    repeating-linear-gradient(0deg, rgba(30, 14, 4, .07) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%, transparent 62%, rgba(45, 22, 8, .28) 100%);
}

/* ---- mobile ---- */
@media (max-width: 640px) {
  .c9-super { padding: 0 12px; line-height: 1.5; }
  .c9-stage { padding: 4px 10px 12px; }
  .c9-tabs { padding: 0 4px 7px; gap: 5px; }
  .c9-tab { padding: 5px 12px 6px; font-size: 13px; line-height: 1.25; }
  .c9-select-btn { padding: 5px 12px 6px; font-size: 13px; line-height: 1.25; gap: .35em; }
  .c9-select-list { left: auto; right: 0; min-width: 200px; }
  .c9-tabs-brand { display: none; }
  .c9-mail-btn { width: 29px; height: 29px; margin-left: auto; }
  .c9-frame {
    border-width: 3px;
    border-radius: 24px;
    box-shadow: 0 0 0 4px var(--ring), 0 10px 24px rgba(61, 36, 16, .35);
    padding: 6px;
  }
  .c9-screen, .c9-screen::after, .c9-face, #c9-map { border-radius: 16px; }
  .c9-title-wrap { padding: 4px 20px 0; }
}