/* The "syndrome" look: the island mainframe. Flat slate-teal panels with no glow,
   black ink, red alert bands and wide capitals. Every rule sits under
   [data-theme="syndrome"], so the default look in style.css stays as it is. */
@font-face { font-family:"Michroma"; src:url(fonts/Michroma-Regular.woff2) format("woff2"); font-display:swap; }

:root[data-theme="syndrome"] {
  color-scheme: light;
  --teal-hi:#6a999b; --teal-lo:#2c4a4a; --band-hi:#8ba29f; --band-lo:#6b7e7c;
  --ink:#131414; --paper:#d3d8d7; --slate:#364f50; --steel:#5e706e; --red:#ae0f0d; --red-hi:#e04a3c;
  --font:"Michroma", "Eurostile", "Microgramma", sans-serif;
  /* the shared names, for code that reads them */
  --bg:#0c0f0f; --text:var(--ink); --dim:var(--slate); --line:var(--slate); --glow:transparent;
  --ok:var(--paper); --bad:var(--red); --warn:var(--paper);

  & body { background:var(--bg); color:var(--ink); font:14px/1.6 var(--font); text-shadow:none; }
  & a { color:var(--ink); }
  & :focus-visible { outline:3px solid var(--red); outline-offset:3px; }

  /* The screen: a flat teal glow in a black bezel, no scanlines and no digits */
  & .screen { border-radius:8px; border:12px solid #050606; gap:20px;
    background:radial-gradient(circle at 50% 45%, var(--teal-hi) 0%, var(--teal-lo) 100%);
    box-shadow:0 0 0 2px #2a2f2f, 0 20px 60px rgba(0,0,0,.6); }
  & .screen::after, & .digits { display:none; }
  @media (max-width:600px) { & .screen { border-width:6px; border-radius:4px; } }

  /* Header: the name in heavy capitals, the place in spaced small capitals, a double slate rail below */
  & .bar { border:none; box-shadow:none; background:none; padding:6px 0 4px; margin-top:4px; gap:18px; }
  & .bar::before { display:none; }
  & .bar .title, & .bar .where, & .bar .pct { mix-blend-mode:normal; }
  & .bar .title { font-size:clamp(1.4rem, 4vw, 2.2rem); font-weight:bold; letter-spacing:.06em; text-transform:uppercase; }
  & .bar .where { color:var(--ink); font-size:.75rem; letter-spacing:.3em; text-transform:uppercase; }
  & .bar .pct { font-weight:bold; color:var(--slate); letter-spacing:.08em; text-transform:uppercase; font-size:.85rem; }
  & .bar .logo { margin:-8px 0; }
  & .rule { height:11px; margin-top:-14px; border:none; opacity:1;
    background:linear-gradient(var(--slate) 0 6px, transparent 6px 8px, var(--slate) 8px 10px); }
  & .hex { color:var(--ink); font-size:.7rem; letter-spacing:.35em; }
  @media (max-width:440px) {
    & .bar { gap:10px; }
    & .bar .title { font-size:1.25rem; }
    & .bar .pct { font-size:.62rem; letter-spacing:0; }
  }

  /* Logo: the emblem in its own colours, a white S on black */
  & .mark .disc { fill:#0b0c0c; stroke:none; filter:none; }
  & .mark .ring { fill:none; stroke:#f2f4f4; stroke-width:3; opacity:1; }
  & .mark .s { fill:#f2f4f4; filter:none; }

  /* The terminal globe, drawn flat: slate lines and a red band */
  & .globe path { stroke:var(--slate); stroke-width:3.4; filter:none; }
  & .globe .band rect { fill:var(--red); }
  & .globe text { fill:var(--paper); font:bold 18px var(--font); letter-spacing:2px; text-transform:uppercase; }
  & .look[aria-checked="true"] .globe path { stroke:var(--paper); }

  /* Buttons: flat slate keys with spaced capitals; hover turns them red */
  & button, & .button { color:var(--paper); background:var(--slate); border:none; box-shadow:none; text-shadow:none; border-radius:0;
    padding:12px 16px; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; transition:background .1s, color .1s; }
  & button:hover:not(:disabled), & .button:hover { background:var(--red); color:var(--paper); box-shadow:none; }
  & button.correct { background:var(--paper); color:var(--ink); box-shadow:none; }
  & button.wrong { background:var(--red); color:var(--paper); }
  & button.link { background:none; color:var(--ink); padding:6px 0; letter-spacing:.12em; text-decoration:underline; text-underline-offset:4px; }
  & button.link:hover { background:none; color:var(--red); }
  & .next { letter-spacing:.3em; }

  /* The question: a light band under a slate file strip. It does not float. */
  & .float { animation:none; }
  & .qbox { position:relative; border:none; box-shadow:none; padding:0 clamp(16px, 4vw, 34px) 26px;
    background:linear-gradient(var(--band-hi), var(--band-lo)); }
  & .qbox.ghost { position:fixed; }
  & .qbox .meta { margin:0 calc(-1 * clamp(16px, 4vw, 34px)) 18px; padding:8px clamp(16px, 4vw, 34px);
    background:var(--slate); color:var(--paper); font-size:.68rem; letter-spacing:.3em; }
  & .qbox .quote { font-size:clamp(.98rem, 2.3vw, 1.4rem); line-height:1.7; text-transform:uppercase; letter-spacing:.03em; }
  & .ch.on { animation:mf-type .22s both; }
  & .qbox.shake { border-color:transparent; }
  /* A wrong answer stamps the box with a red band */
  & .qbox.shake::after { content:"Denied"; position:absolute; left:0; right:0; top:50%; translate:0 -50%; z-index:3; padding:6px 0;
    background:var(--red); color:var(--paper); text-align:center; text-transform:uppercase; font-weight:bold;
    font-size:clamp(1.5rem, 6vw, 3rem); letter-spacing:.3em; animation:mf-stamp 1s both; }

  /* Practice options: bands, as in the menu */
  & .options { gap:6px; }
  & .options button { background:linear-gradient(rgba(139,162,159,.88), rgba(107,126,124,.88)); color:var(--ink); font-size:.85rem; padding:14px 18px; }
  & .options button:hover:not(:disabled) { background:var(--steel); color:var(--paper); }
  & .options button.correct { background:var(--paper); color:var(--ink); }
  & .options button.wrong { background:var(--red); color:var(--paper); }

  /* The daily guess field: big spaced capitals on a slate rail, with a red caret */
  & .guess { align-items:stretch; }
  & .gate-box { flex:none; margin:auto; background:linear-gradient(var(--band-hi), var(--band-lo)); border-left:12px solid var(--red); padding:22px; }
  & .gate-box h1 { font-weight:bold; letter-spacing:.08em; }
  & .gate-box .gate-status { color:var(--red); font-weight:bold; letter-spacing:.2em; text-transform:uppercase; }
  & .guess label { font-weight:bold; font-size:1.4rem; }
  & .guess input { font-size:clamp(1rem, 3vw, 1.35rem); font-weight:bold; letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
    caret-color:var(--red); border:none; border-bottom:5px solid var(--slate); background:rgba(139,162,159,.35); text-shadow:none; }
  & .guess input::placeholder { color:var(--steel); }
  & .guess input:focus { box-shadow:none; border-bottom-color:var(--red); }
  & .status-line { color:var(--ink); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; }
  & .hints { gap:4px; color:var(--paper); text-shadow:none; }
  & .hints li { background:var(--slate); padding:6px 12px; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; }
  & .guesses li { border:none; background:var(--red); color:var(--paper); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; }
  & .guesses li.correct { background:var(--paper); color:var(--ink); }

  /* Result panels: a light band with a slate edge; the verdict is a label block */
  & .panel { border:none; border-left:12px solid var(--slate); background:linear-gradient(var(--band-hi), var(--band-lo)); }
  & .panel .quote { color:var(--slate); text-transform:uppercase; font-size:.8rem; letter-spacing:.06em; }
  & .panel .verdict { display:inline-block; max-width:100%; overflow-wrap:anywhere; padding:6px 14px; background:var(--slate); color:var(--paper);
    font-weight:bold; font-size:clamp(.8rem, 2.6vw, 1rem); letter-spacing:.12em; text-transform:uppercase; }
  & .panel .verdict.ok { background:var(--slate); color:var(--paper); }
  & .panel .verdict.bad { background:var(--red); color:var(--paper); }
  & .panel .note { color:var(--ink); font-size:.85rem; }
  & .share-frame { border:4px solid var(--slate); box-shadow:none; background:var(--slate); }

  /* The bins: slate counters with a meter; the lids are slate slabs */
  & .bins::before { height:auto; border-top:6px solid var(--slate); border-bottom:none; opacity:1; box-shadow:none; }
  & .bin { --lid:10px; }
  & .tray { border:none; background:var(--slate); }
  & .temper { text-shadow:none; font-size:.7rem; }
  & .bin .label { border:none; background:var(--slate); color:var(--paper); letter-spacing:.1em; }
  & .bin .label svg { filter:none; }
  & .bin.ok .label svg { color:var(--paper); }
  & .bin.bad .label svg { color:var(--red-hi); }
  & .bin .meter { border:none; background:var(--teal-lo); color:var(--paper); }
  & .bin.ok .fill { background:var(--band-lo); }
  & .bin.bad .fill { background:var(--red); }
  & .bin .pct { line-height:22px; font-size:.7rem; }
  & .lid { border:none; background:var(--slate); }
  & .bin.got .label { animation:mf-got .6s ease-out; }

  /* Home: the mode list. A band per mode with an icon tile; two thin lines frame the icons. */
  & .files.enter { animation:none; }
  & .mf-menu { position:relative; width:min(640px, 100%); background:linear-gradient(var(--band-hi), var(--band-lo)); padding:14px 0; }
  & .mf-lines { position:absolute; top:-26px; bottom:-26px; left:14px; width:76px; pointer-events:none; z-index:2;
    border-left:1px solid var(--paper); border-right:1px solid var(--paper); }
  & .mf-list { display:grid; gap:6px; }
  & .mf-item { display:grid; grid-template-columns:104px 1fr; align-items:center; padding:12px 0; color:var(--ink); text-decoration:none; transition:background .1s; }
  & .mf-item:focus-visible { outline:none; }
  & .mf-item.active { background:var(--steel); color:var(--paper); }
  & .files.enter .mf-item { animation:mf-in .22s calc(var(--i) * 150ms) both; }
  & .mf-item.chosen { animation:mf-chosen .9s steps(1) both; }
  & .mf-icon { display:grid; place-items:center; }
  & .mf-icon svg { width:44px; height:44px; fill:currentColor; }
  & .mf-icon .line { fill:none; stroke:currentColor; stroke-width:2; }
  & .mf-icon .thick { stroke-width:3.5; }
  & .mf-label { font-size:clamp(1rem, 4vw, 1.8rem); letter-spacing:clamp(.1em, 1.4vw, .32em); text-transform:uppercase; }
  & .look { color:var(--ink); background:linear-gradient(var(--band-hi), var(--band-lo)); padding:20px 12px 16px; }
  & .look:hover:not(:disabled) { background:var(--steel); color:var(--paper); }
  & .look-name { font-size:clamp(.85rem, 3vw, 1.2rem); letter-spacing:.2em; }
  & .game-box .look-name { font-size:clamp(1.1rem, 5vw, 1.8rem); }
  & .game-hint { color:inherit; letter-spacing:.04em; }
  & .games.enter { animation:none; }
  & .bar .to-games { font-size:1.6rem; text-decoration:none; }
  & .look[aria-checked="true"] { background:var(--slate); color:var(--paper); box-shadow:inset 0 -6px 0 var(--red); }
  & .look[aria-checked="true"] .look-name::before { content:none; } /* the red edge marks it */

  /* Choosing a band: it flashes red, then the screen clears */
  & .screen.leaving .home { animation:dimout .35s .55s both; }
  & .tray-head { border:none; background:var(--teal-lo); }

  /* Pages draw in as horizontal folds, not from the centre outwards */
  & .screen.boot .bar, & .screen.boot .rule, & .screen.boot .bins { animation-name:mf-boot; }

  /* Scenes behind the game: the Operation Kronos screens. Charcoal silhouettes,
     light grey lines and white light, as in the film. */
  & .mf-scene { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow:hidden; }
  & .mf-scene .sil { fill:#363b3b; }
  & .mf-scene .ring { fill:none; stroke:#c9cccc; stroke-width:5; }
  & .mf-scene .droid .ring { stroke-width:6; }
  & .mf-scene .ring.thin { stroke-width:2; opacity:.7; }
  & .mf-scene .band { fill:#c9cccc; }
  & .mf-scene .leg { fill:none; stroke:#363b3b; stroke-width:20; stroke-linecap:round; }
  & .mf-scene .eye { fill:#5fb8b8; }
  & .mf-scene .win { fill:none; stroke:#a6a8a8; stroke-width:1.6; }
  & .mf-scene .label { fill:var(--paper); font:bold 15px var(--font); letter-spacing:4px; animation:mf-label 6s infinite; }
  & .mf-scene .l2 { animation-delay:.2s; } & .mf-scene .l3 { animation-delay:.4s; } & .mf-scene .l4 { animation-delay:.6s; }

  /* Phase 1: the gantry bar shoots into the porthole, which strobes */
  & .mf-scene .gantry { fill:#c9cccc; transform-box:fill-box; transform-origin:left center; animation:mf-gantry 6s infinite; }
  & .mf-scene .porthole { animation:mf-porthole 6s infinite; }
  & .mf-scene .strobe { fill:#fff; animation:mf-strobe .2s steps(1) infinite; }

  /* Phase 2: the arc draws itself over the planet */
  & .mf-scene .planet { fill:url(#mf-planet); }
  & .mf-scene .rim { fill:none; stroke:#a6a8a8; stroke-width:3; }
  & .mf-scene .arc { fill:none; stroke:rgba(201,204,204,.8); stroke-width:78; stroke-dasharray:1056; animation:mf-arc 5s infinite; }
  & .mf-scene.delivery .label { animation-duration:5s; }

  /* Phase 3: the cone of light, the flash and the hole in the tower */
  & .mf-scene .beam { fill:#fff; transform-box:fill-box; transform-origin:left center; animation:mf-beam 5s infinite; }
  & .mf-scene .flash { opacity:0; transform-box:fill-box; transform-origin:center; animation:mf-burst 5s infinite; }
  & .mf-scene .bite { animation:mf-bite 5s infinite; }
  & .mf-scene .tower.right { animation:mf-quake 5s infinite; }

  /* Idle: the final design blueprint; it flashes in, a scan line runs down, the numbers flicker */
  & .mf-scene .title-big { fill:var(--ink); font:bold 62px var(--font); }
  & .mf-scene .title-sub { fill:var(--ink); font:bold 21px var(--font); letter-spacing:22px; }
  & .mf-scene .version { fill:var(--slate); font:bold 60px var(--font); }
  & .mf-scene .version-no { font-size:92px; letter-spacing:-8px; }
  & .mf-scene .hexes path { fill:none; stroke:var(--slate); stroke-width:9; stroke-linejoin:round; }
  & .mf-scene .numbers text { fill:var(--slate); font:9px var(--font); letter-spacing:1px; animation:mf-digits 2.4s steps(1) infinite; }
  & .mf-scene .blueprint { animation:mf-flashin 8s infinite; }
  & .mf-scene .bp-tube { fill:none; stroke:#2f4646; stroke-width:36; }
  & .mf-scene .bp-core { fill:none; stroke:#6f8f8e; stroke-width:26; }
  & .mf-scene .bp-rib { fill:none; stroke:#2f4646; stroke-width:20; stroke-dasharray:3 8; }
  & .mf-scene .bp-plate { fill:#2f4646; }
  & .mf-scene .bp-body { fill:#7d9a99; stroke:#2f4646; stroke-width:6; }
  & .mf-scene .bp-dots { fill:none; stroke:#2f4646; stroke-width:10; stroke-dasharray:0 17; stroke-linecap:round; }
  & .mf-scene .bp-line { fill:none; stroke:#2f4646; stroke-width:3; }
  & .mf-scene .bp-line.thick { stroke-width:9; }
  & .mf-scene .bp-red { fill:rgba(110,40,40,.45); }
  & .mf-scene .scan { fill:rgba(255,255,255,.35); animation:mf-scan 8s linear infinite; }

  /* The film's corner panels, on wide screens only (on phones the bins need the room) */
  & .mf-chrome { position:absolute; left:22px; right:22px; bottom:34px; z-index:0; display:flex; justify-content:space-between; align-items:flex-end; pointer-events:none; }
  & .mf-phase { display:grid; gap:4px; width:150px; }
  & .mf-phase-no { justify-self:start; background:var(--slate); color:var(--paper); font-weight:bold; font-size:1.25rem; line-height:1; padding:6px 10px; text-transform:uppercase; }
  & .mf-phase-box { border:2px solid var(--slate); padding:3px 8px; color:var(--slate); font-weight:bold; font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; }
  & .mf-kronos { display:grid; justify-items:end; width:150px; text-transform:uppercase; line-height:1; }
  & .mf-kronos b { font-size:1.05rem; color:var(--ink); }
  & .mf-kronos b.red { font-size:1.45rem; color:var(--red); margin-bottom:4px; }
  & .mf-phases { width:100%; display:flex; gap:10px; justify-content:space-between; background:var(--slate); color:var(--paper); font-size:.62rem; letter-spacing:.2em; padding:4px 8px; }
  & .mf-phases i { font-style:normal; padding:0 4px; }
  & .mf-phases i.on { background:var(--red); }
  @media (max-width:1000px) { & .mf-chrome { display:none; } }
  @media (prefers-reduced-motion: reduce) { & .mf-scene * { animation:none !important; } }

  /* Dev mode */
  & .card { border:none; border-left:12px solid var(--slate); background:linear-gradient(var(--band-hi), var(--band-lo)); }
  & .dev-panel textarea { border:none; border-bottom:4px solid var(--slate); background:var(--paper); color:var(--ink); }
}

/* The login intro */
.mf-intro { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background:radial-gradient(circle at 50% 45%, var(--teal-hi) 0%, var(--teal-lo) 100%); color:var(--ink); cursor:pointer; transform-origin:center; }
.mf-intro.leaving { animation:mf-fold .38s cubic-bezier(.6,0,.4,1) forwards; }
.mf-kicker, .mf-status { margin:0; font-size:.75rem; letter-spacing:.45em; text-transform:uppercase; color:var(--ink); }
.mf-status { min-height:1.6em; font-weight:bold; }
.mf-band { width:100%; display:flex; justify-content:center; align-items:baseline; padding:20px 0; background:linear-gradient(var(--band-hi), var(--band-lo)); }
.mf-pass, .mf-cursor { font-weight:bold; font-size:clamp(2.2rem, 9vw, 4.4rem); line-height:1; letter-spacing:clamp(.25em, 4vw, .7em); }
.mf-cursor { animation:mf-blink 1s step-start infinite; }
.mf-band.checking { animation:mf-flash .32s steps(1) infinite; }
.mf-band.granted { background:var(--slate); color:var(--paper); }
.mf-intro .skip { position:fixed; right:20px; bottom:20px; }

@keyframes mf-type { 0% { opacity:0; } 1% { opacity:1; background:var(--red); color:var(--paper); } 100% { opacity:1; } }
@keyframes mf-stamp { 0% { opacity:0; transform:scaleY(0); } 12% { opacity:1; transform:scaleY(1); } 70% { opacity:1; } 100% { opacity:0; } }
@keyframes mf-in { from { opacity:0; color:#fff; } }
@keyframes mf-chosen { 0%, 40%, 80% { background:var(--red); color:var(--paper); } 20%, 60% { background:var(--paper); color:var(--ink); } }
@keyframes mf-got { 30% { background:var(--red); } }
@keyframes mf-boot { from { opacity:0; clip-path:inset(50% 0 50% 0); } to { clip-path:inset(0); } }
@keyframes mf-fold { to { transform:scaleY(0); opacity:.4; } }
@keyframes mf-blink { 50% { opacity:0; } }
@keyframes mf-flash { 50% { background:var(--steel); } }
@keyframes mf-label { 0% { opacity:0; fill:#fff; } 4% { opacity:1; } 10% { fill:var(--paper); } 88% { opacity:1; } 100% { opacity:0; } }
@keyframes mf-gantry { 0% { transform:scaleX(0); opacity:1; } 12% { transform:scaleX(1); } 88% { opacity:1; transform:scaleX(1); } 100% { opacity:0; transform:scaleX(1); } }
@keyframes mf-porthole { 0%, 13% { opacity:0; } 14%, 88% { opacity:1; } 100% { opacity:0; } }
@keyframes mf-strobe { 50% { opacity:0; } }
@keyframes mf-arc { 0% { stroke-dashoffset:1056; opacity:1; } 10% { stroke-dashoffset:0; } 90% { opacity:1; stroke-dashoffset:0; } 100% { opacity:0; stroke-dashoffset:0; } }
@keyframes mf-beam {
  0% { transform:scaleX(0); opacity:1; } 8% { transform:scaleX(1); opacity:1; }
  10%, 14%, 18% { opacity:.2; } 12%, 16%, 20% { opacity:1; }
  80% { opacity:.9; transform:scaleX(1); } 92%, 100% { opacity:0; transform:scaleX(1); }
}
@keyframes mf-burst { 0%, 9% { transform:scale(0); opacity:1; } 20% { transform:scale(2); opacity:0; } 100% { transform:scale(2); opacity:0; } }
@keyframes mf-bite { 0%, 10% { opacity:0; } 11%, 92% { opacity:1; } 100% { opacity:0; } }
@keyframes mf-quake { 0%, 10%, 18%, 100% { transform:none; } 12% { transform:translateX(5px); } 14% { transform:translateX(-4px); } 16% { transform:translateX(2px); } }
@keyframes mf-flashin { 0% { opacity:0; filter:brightness(3); } 6% { opacity:1; } 12% { filter:brightness(1); } 100% { opacity:1; } }
@keyframes mf-scan { from { transform:translateY(0); opacity:0; } 10% { opacity:1; } 90% { opacity:1; } to { transform:translateY(360px); opacity:0; } }
@keyframes mf-digits { 50% { opacity:.35; } }