/* The AIpocalypse: the colleague's stylesheet, moved verbatim out of index.html.
   skilder.ai additions are at the end of the file, after the original rules. */
  :root{
    --ink:#e8dfc8; --ink-dim:#9c9481;
    --panel:#161a22; --panel-2:#1e2430; --edge:#2c3444;
    --amber:#1fa0f0;   /* kept as a name: the palette is blue now */ --toxic:#7fd94a; --blood:#c8352b; --steel:#5c718f;
    --sk-blue:#1fa0f0; --sk-blue-hi:#6ac4fa;
  --brain:#d9787a; --brain-hi:#f0999b; --brain-lite:#edb4b4; --brain-lo:#a85055;
    --shadow:0 0 0 2px #000, 0 6px 0 0 #000;
    color-scheme: dark;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0; background:radial-gradient(120% 90% at 50% -10%, #1b2130 0%, #0b0d12 60%, #06070a 100%);
    color:var(--ink); font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    display:flex; align-items:center; justify-content:center;
    padding:16px; padding-block:8px; overflow-x:hidden}
  /* the cabinet grows until the 16:9 screen would run out of window height */
  .cabinet{width:100%; max-width:min(1180px, calc((100dvh - 86px) * 16 / 9));
    display:flex; flex-direction:column; gap:6px}

  .topbar{display:flex; align-items:center; gap:6px; flex-wrap:nowrap; min-height:0}
  .brand{font-family:"Press Start 2P",monospace; font-size:9px; letter-spacing:1px; color:var(--sk-blue); text-shadow:2px 2px 0 #000}
  .spacer{flex:1 1 auto}
  .chip{font-family:"Press Start 2P",monospace; font-size:7px; letter-spacing:1px; background:var(--panel-2);
    color:var(--ink); border:2px solid var(--edge); padding:5px 7px; cursor:pointer; line-height:1}
  .chip:hover{border-color:var(--sk-blue); color:var(--sk-blue)}
  .chip[aria-pressed="true"]{background:var(--sk-blue); color:#04121c; border-color:var(--sk-blue)}
  .chip:focus-visible{outline:2px solid var(--sk-blue); outline-offset:2px}

  .screen{position:relative; width:100%; aspect-ratio:16/9; background:#05060a; border:2px solid var(--edge);
    box-shadow:0 0 26px rgba(47,180,239,.06) inset; overflow:hidden; max-width:100%}
  canvas{display:block; width:100%; height:100%; image-rendering:pixelated; image-rendering:crisp-edges}
  .scanlines{position:absolute; inset:0; pointer-events:none; opacity:.2;
    background:repeating-linear-gradient(to bottom, rgba(0,0,0,.5) 0 1px, transparent 1px 3px)}
  .vignette{position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.62) 100%)}

  .layer{position:absolute; inset:0; display:flex; flex-direction:column; padding:clamp(10px,2.2vw,20px);
    gap:10px; overflow:auto; background:linear-gradient(180deg, rgba(6,8,12,.92), rgba(6,8,12,.97))}
  .layer[hidden]{display:none!important}
  h1,h2,h3{font-family:"Press Start 2P",monospace; text-wrap:balance; margin:0; line-height:1.5}
  h1{font-size:clamp(14px,3.2vw,26px); color:var(--sk-blue); text-shadow:3px 3px 0 #000}
  h2{font-size:clamp(10px,2vw,15px); color:var(--sk-blue); text-shadow:2px 2px 0 #000}
  h3{font-size:clamp(8px,1.4vw,10px); color:var(--ink-dim); letter-spacing:1px}
  p{margin:0; font-size:clamp(11px,1.6vw,13px); line-height:1.65; max-width:62ch}
  .dim{color:var(--ink-dim)}
  /* Skilder blue is the call to action everywhere; amber stays for the HUD */
  .btn{font-family:"Press Start 2P",monospace; font-size:clamp(8px,1.5vw,11px); background:var(--sk-blue);
    color:#04121c; border:0; padding:12px 16px; cursor:pointer; box-shadow:var(--shadow); letter-spacing:1px}
  .btn:hover{background:var(--sk-blue-hi)}
  .btn.big{font-size:clamp(11px,2.6vw,17px); padding:18px 26px}
  .btn.ghost{background:transparent; color:var(--ink); box-shadow:0 0 0 2px var(--edge)}
  .btn.ghost:hover{color:var(--sk-blue); box-shadow:0 0 0 2px var(--sk-blue)}
  .btn:focus-visible{outline:2px solid var(--sk-blue); outline-offset:3px}
  .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

  /* "safe" matters: a centred flex column that overflows pushes its own top
     ABOVE scrollTop 0, where nothing can ever scroll to it. That is what cut
     the key art's title off the top of every shared link card. Safe centring
     falls back to start when the content does not fit, so the top is always
     reachable and the overflow is taken off the bottom instead. */
  #langLayer{align-items:center; justify-content:center; justify-content:safe center; gap:4px;
    background:radial-gradient(92% 72% at 50% 46%, rgba(5,6,10,.93) 0%, rgba(6,8,12,.86) 55%, rgba(6,8,12,.95) 100%)}
  #titleLayer{align-items:center; justify-content:center; justify-content:safe center; text-align:center;
    background:radial-gradient(92% 72% at 50% 46%, rgba(5,6,10,.9) 0%, rgba(6,8,12,.7) 55%, rgba(6,8,12,.92) 100%)}
  /* the wordmark and the episode read as one title line, wrapping on a phone */
  .titleArt{font-family:"Press Start 2P",monospace; line-height:1.35; display:flex;
    align-items:center; justify-content:center; flex-wrap:wrap; gap:clamp(12px,3.5vw,40px)}
  /* the key art, with the language choice sitting over its lower third */
  .hero{position:relative; width:100%; max-width:820px; margin:0 auto; line-height:0}
  .hero img{display:block; width:100%; height:auto}
  /* the art is bright down there; the choice has to stay readable over it */
  .hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:30%;
    background:linear-gradient(to bottom, rgba(6,8,12,0), rgba(6,8,12,.70) 52%, rgba(6,8,12,.93));
    pointer-events:none}
  @media (max-width:680px){ .hero::after{display:none} }
  /* a link-preview card is a short, wide window: shrink the key art so the
     whole welcome screen fits inside it, title and all */
  @media (max-height:700px){ .hero{max-width:660px} }
  @media (max-height:560px){ .hero{max-width:520px} }
  .heroPick{position:absolute; left:0; right:0; bottom:4%; line-height:1.5; z-index:1;
    display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 8px}
  @media (max-width:680px){ .heroPick{position:static; margin-top:10px} .hero{line-height:1.5} }
  /* the real wordmark, at its own pixel grid, never smoothed */
  .logoArt{display:block; margin:0; max-width:min(70vw,300px); height:auto;
    image-rendering:pixelated; image-rendering:crisp-edges}
  .t1{display:block; font-size:clamp(18px,5vw,44px); color:var(--toxic); text-shadow:4px 4px 0 #000, 0 0 18px rgba(127,217,74,.35)}
  .t2{display:block; font-size:clamp(11px,3vw,24px); color:var(--sk-blue); text-shadow:4px 4px 0 #000}
  .blink{animation:blink 1.1s steps(2,end) infinite}
  @keyframes blink{50%{opacity:0}}
  @media (prefers-reduced-motion:reduce){.blink{animation:none}}

  /* THE PAD BELONGS TO THE FINGER, NOT TO THE WINDOW WIDTH. Keyed on the
     pointer, a 768px tablet and a landscape phone get it docked to the screen
     edge like a phone does, instead of floating over the picture. */
  @media (pointer:coarse){
    /* The pad owns a fifth of the phone, lifted clear of the bottom edge so the
       thumbs are not reaching into the gesture bar. */
    :root{--padH:max(20dvh,104px); --padLift:14dvh}
    #touch.on{position:fixed; left:0; right:0; bottom:var(--padLift); height:var(--padH);
      align-items:center; justify-content:space-around; gap:10px; z-index:40;
      padding:0 calc(12px + env(safe-area-inset-left,0px)) 0 calc(12px + env(safe-area-inset-right,0px))}
    .tbtn{width:27%; height:min(14dvh,104px); max-height:none; aspect-ratio:auto;
      font-size:22px; border-width:3px}
    .tbtn.jump{width:36%}
    body[data-scene="act1"], body[data-scene="dialog"], body[data-scene="heal"]{
      align-items:flex-end; padding-bottom:calc(var(--padH) + var(--padLift) + 14px)}
  }
  /* A phone on its side has no 20dvh to spare: the pad gets shorter and sits
     almost on the edge, so the picture keeps the room it needs. */
  @media (pointer:coarse) and (max-height:520px){
    :root{--padH:max(26dvh,72px); --padLift:4dvh}
    .tbtn{height:min(24dvh,72px); width:22%}
    .tbtn.jump{width:30%}
  }

  #dialogLayer{justify-content:flex-end; background:none; padding:0}
  .dbox{margin:clamp(8px,2vw,16px); background:rgba(9,12,18,.95); border:3px solid var(--edge);
    box-shadow:0 0 0 3px #000; padding:clamp(10px,2vw,16px); display:flex; gap:clamp(8px,2vw,14px); align-items:flex-start}
  .portrait{width:clamp(84px,16vw,148px); aspect-ratio:1/1; height:auto; flex:0 0 auto;
    object-fit:contain; background:radial-gradient(70% 70% at 50% 40%, #182030, #0a0d13);
    border:2px solid var(--edge); display:block}
  .portrait.px, .volWrap img.px{image-rendering:pixelated}
  .dwho{font-family:"Press Start 2P",monospace; font-size:clamp(8px,1.5vw,10px); color:var(--sk-blue); margin-bottom:8px}
  .dtext{font-size:clamp(11px,1.7vw,14px); line-height:1.7; min-height:3.4em}
  .dnext{font-family:"Press Start 2P",monospace; font-size:8px; color:var(--ink-dim); margin-top:8px}

  #sweepLayer{gap:clamp(6px,1.2vw,10px)}
  .sweepHead{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  .volWrap{position:relative; width:clamp(46px,8vw,70px); aspect-ratio:1/1; flex:0 0 auto;
    background:radial-gradient(70% 70% at 50% 40%, #182030, #0a0d13); border:2px solid var(--edge)}
  .volWrap img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
  #volHappy{opacity:0; transition:opacity .45s ease}
  @media (prefers-reduced-motion:reduce){#volHappy{transition:none}}
  .timer{font-family:"Press Start 2P",monospace; font-size:clamp(12px,2.4vw,18px); color:var(--sk-blue);
    font-variant-numeric:tabular-nums; text-shadow:2px 2px 0 #000}
  .found{font-family:"Press Start 2P",monospace; font-size:clamp(8px,1.5vw,11px); color:var(--toxic)}
  .hours{font-family:"Press Start 2P",monospace; font-size:clamp(8px,1.5vw,11px); color:var(--sk-blue);
    font-variant-numeric:tabular-nums}
  .painNow em{position:absolute; top:11px; right:12px; font-style:normal; color:var(--toxic);
    font-family:"Press Start 2P",monospace; font-size:9px; white-space:nowrap}
  .painLog div b{font-family:"Press Start 2P",monospace; font-size:7px; color:var(--toxic);
    font-weight:400; margin-left:auto; padding-top:2px; white-space:nowrap}
  .sweepBody{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(8px,1.8vw,18px);
    align-items:start; flex:1 1 auto; min-height:0}
  @media (max-width:900px){.sweepBody{grid-template-columns:1fr}}
  .grid{display:grid; gap:2px; width:100%; max-width:420px; margin:0 auto; touch-action:manipulation}
  /* the panel below becomes a scroller as the log fills; without this a
     long press to flag turns into a pan and the browser cancels the gesture */
  .cell{aspect-ratio:1/1; border:0; padding:0; cursor:pointer; background:var(--panel-2);
    touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
    box-shadow:inset -2px -2px 0 rgba(0,0,0,.55), inset 2px 2px 0 rgba(255,255,255,.07);
    font-family:"Press Start 2P",monospace; font-size:clamp(6px,1.2vw,10px); color:var(--ink-dim);
    display:flex; align-items:center; justify-content:center}
  .cell.void{visibility:hidden; cursor:default; pointer-events:none}
  .cell.tissue{background:var(--brain)}
  .cell.tissue:hover{background:var(--brain-hi)}
  .cell.tissueLite{background:var(--brain-lite)}
  .cell.tissueLite:hover{background:#ffd2d2}
  .cell.tissueDark{background:var(--brain-lo)}
  .cell.tissueDark:hover{background:var(--brain)}
  .cell.open{background:#11151d; box-shadow:inset 0 0 0 1px #000; cursor:default; color:var(--steel)}
  .cell.open.n1{color:#7fb6ff}.cell.open.n2{color:var(--toxic)}.cell.open.n3{color:#5ee0ff}
  .cell.open.n4,.cell.open.n5,.cell.open.n6,.cell.open.n7,.cell.open.n8{color:var(--blood)}
  .cell.hit{background:var(--blood); color:#fff; box-shadow:inset 0 0 0 2px #000, 0 0 12px rgba(200,53,43,.6); cursor:default}
  .cell.flag{background:var(--sk-blue); color:#04121c; box-shadow:inset 0 0 0 2px #000}
  .cell.flag:hover{background:var(--sk-blue-hi)}
  .cell:focus-visible{outline:2px solid var(--sk-blue); outline-offset:1px; z-index:2}

  .painPanel{display:flex; flex-direction:column; gap:8px; min-height:0}
  .painNow{position:relative; background:#0b1016;
    box-shadow:inset 0 0 0 2px #000, inset 0 0 0 4px var(--panel-2);
    padding:12px 70px 12px 14px; min-height:5em; display:flex; flex-direction:column; justify-content:center}
  .painNow.empty{color:var(--ink-dim); font-size:11px; line-height:1.6}
  .painNow b{display:block; font-family:"Press Start 2P",monospace; font-size:8px; color:var(--blood);
    letter-spacing:1px; margin-bottom:8px}
  .painNow b::before{content:"! "; color:var(--sk-blue)}
  .painNow span{font-size:clamp(12px,1.6vw,14px); line-height:1.55; color:var(--ink)}
  .painNow.flash{animation:pulse .5s ease-out}
  @keyframes pulse{from{box-shadow:inset 0 0 0 2px #000, inset 0 0 0 4px var(--blood)}}
  .painLog{display:flex; flex-direction:column; gap:3px; overflow:auto; min-height:0; flex:1 1 auto}
  .painLog div{font-size:11px; line-height:1.45; color:var(--ink-dim); padding:4px 0;
    border-top:1px solid #1a2029; display:flex; gap:8px}
  .painLog div i{font-style:normal; color:var(--sk-blue); font-family:"Press Start 2P",monospace;
    font-size:7px; padding-top:2px; flex:0 0 auto}
  /* without min-width:0 the sentence refuses to shrink and shoves the "+H"
     badge off the right edge of a 360px phone */
  .painLog div span{flex:1 1 auto; min-width:0; overflow-wrap:anywhere}
  @media (prefers-reduced-motion:reduce){.painNow.flash{animation:none}}
  .hint{font-size:10px; color:var(--ink-dim); line-height:1.6}

  .hof{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(10px,2vw,20px); align-items:start}
  @media (max-width:640px){.hof{grid-template-columns:1fr}}
  .field{display:flex; flex-direction:column; gap:6px; margin-bottom:10px}
  .field label{font-family:"Press Start 2P",monospace; font-size:8px; color:var(--ink-dim); letter-spacing:1px}
  .field input{font-family:"IBM Plex Mono",monospace; font-size:13px; padding:10px; background:#0b0e14;
    color:var(--ink); border:2px solid var(--edge)}
  .field input:focus{outline:0; border-color:var(--sk-blue)}
  .consent{display:flex; gap:8px; align-items:flex-start; font-size:11px; color:var(--ink-dim); line-height:1.55}
  .consent input{margin-top:3px; accent-color:var(--sk-blue); width:16px; height:16px; flex:0 0 auto}
  table.board{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
  table.board th{font-family:"Press Start 2P",monospace; font-size:7px; color:var(--ink-dim); text-align:left;
    letter-spacing:1px; padding:0 6px 8px 0; border-bottom:2px solid var(--edge)}
  table.board td{font-size:12px; padding:7px 6px 7px 0; border-bottom:1px solid #1a2029}
  table.board td.rk{font-family:"Press Start 2P",monospace; font-size:9px; color:var(--sk-blue); width:2.6em}
  table.board td.tm{font-family:"Press Start 2P",monospace; font-size:9px; color:var(--toxic); white-space:nowrap}
  table.board td.co{font-size:11px; color:var(--ink-dim); max-width:11em;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .boardWrap{width:100%; overflow-x:auto}
  .startBoard{width:100%; max-width:440px; text-align:left; margin-top:4px}
  table.board tr.me td{background:rgba(255,176,58,.1)}
  .badge{font-family:"Press Start 2P",monospace; font-size:7px; letter-spacing:1px; padding:5px 7px;
    border:2px solid var(--edge); color:var(--ink-dim)}
  .scoreBig{font-family:"Press Start 2P",monospace; font-size:clamp(16px,4vw,30px); color:var(--toxic);
    text-shadow:3px 3px 0 #000; font-variant-numeric:tabular-nums}

  #endLayer{align-items:center; justify-content:center; text-align:center; gap:16px}
  .tbc{font-family:"Press Start 2P",monospace; font-size:clamp(13px,3.6vw,30px); color:var(--sk-blue);
    text-shadow:4px 4px 0 #000; line-height:1.5}

  #touch{position:absolute; inset:auto 0 0 0; display:none; justify-content:space-between;
    padding:10px calc(10px + env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px)); gap:10px}
  #touch.on{display:flex}
  .tbtn{width:19%; min-width:56px; aspect-ratio:1/1; max-height:74px; background:rgba(31,160,240,.7);
    border:2px solid rgba(4,18,28,.5); color:#000; font-family:"Press Start 2P",monospace;
    font-size:14px; touch-action:none; user-select:none; display:flex; align-items:center; justify-content:center}
  .tbtn:active{background:rgba(106,196,250,.85)}
  .tbtn.jump{width:28%; border-radius:50%}
  /* the arrows are drawn, not typed: U+25B6 and friends come out as colour
     emoji on iOS, and this game has no colour but its own */
  .tbtn::before{content:""; display:block; border-style:solid; border-color:transparent}
  .tbtn[data-k="left"]::before{border-width:.62em .8em .62em 0; border-right-color:#000; margin-right:.12em}
  .tbtn[data-k="right"]::before{border-width:.62em 0 .62em .8em; border-left-color:#000; margin-left:.12em}
  .tbtn[data-k="jump"]::before{border-width:0 .68em .86em .68em; border-bottom-color:#000; margin-bottom:.1em}
  .footnote{font-size:10px; color:var(--ink-dim); text-align:center; line-height:1.6}
  /* the share confirmation is the one line the player must not miss */
  #shareNote{margin:0; text-align:center}
  #shareNote.on{background:var(--sk-blue); color:#04121c;
    box-shadow:inset 0 0 0 2px #000, 0 5px 0 0 #000;
    padding:16px 18px; margin:16px auto 4px; max-width:620px;
    animation:sharePop .3s cubic-bezier(.2,1.5,.4,1)}
  #shareNote.on b{display:block; font-family:"Press Start 2P",monospace;
    font-size:clamp(13px,2.4vw,19px); line-height:1.5; letter-spacing:1px}
  #shareNote.on span{display:block; margin-top:9px; font-size:clamp(12px,1.5vw,14px);
    font-weight:600; line-height:1.5; opacity:.82}
  #shareNote.link{background:var(--sk-blue); color:#04121c}
  #shareNote.link b{font-size:clamp(11px,1.9vw,15px)}
  #shareNote.link span{font-family:"IBM Plex Mono",ui-monospace,monospace; word-break:break-all;
    opacity:1; font-size:clamp(12px,1.6vw,15px)}
  @keyframes sharePop{from{transform:scale(.88); opacity:0} to{transform:scale(1); opacity:1}}
  @media (prefers-reduced-motion:reduce){#shareNote.on{animation:none}}
  /* the standing credit line only shows when the game is not running */
  #credits{display:none; font-size:9px}
  body[data-scene="lang"] #credits, body[data-scene="title"] #credits,
  body[data-scene="hof"] #credits, body[data-scene="end"] #credits{display:block}

  /* On a phone the 16:9 letterbox is far too shallow for the text screens,
     so the cabinet grows taller and the canvas letterboxes inside it. */
  @media (max-width:680px){
    body{padding:6px; padding-block:6px}
    .cabinet{max-width:100%; gap:5px}
    .brand{font-size:8px}
    .screen{aspect-ratio:auto; height:min(84dvh,660px)}
    /* while the game is running the screen hugs the canvas instead of
       leaving black bands above and below it */
    body[data-scene="act1"] .screen, body[data-scene="dialog"] .screen,
    body[data-scene="heal"] .screen{height:auto; aspect-ratio:16/9}
    canvas{object-fit:contain; background:#05060a}
    .sweepBody{grid-template-columns:1fr; gap:10px}
    /* the brain is the one screen worth crowding the edges for */
    #sweepLayer{padding-left:4px; padding-right:4px}
    .grid{max-width:min(100%,420px); gap:2px}
    /* Every scene that draws on the canvas reserves the same room, so the
       picture does not jump between the opening dialogue and the game. */
    body[data-scene="act1"], body[data-scene="dialog"], body[data-scene="heal"]{
      align-items:flex-end; padding-bottom:calc(var(--padH) + var(--padLift) + 14px)}
  }

  /* ---- finger sizes, last so they win over the base rules above ----------
     Every control a thumb has to hit is at least 40px tall. A mouse keeps the
     compact chrome; this block never applies to it. */
  @media (pointer:coarse){
    .chip{font-size:9px; padding:14px 12px}
    .btn{padding:16px 18px}
    .btn.big{padding:20px 26px}
    .consent{align-items:center; padding:8px 0}
    .consent input{width:26px; height:26px; margin-top:0; flex:0 0 auto}
  }

/* ==== skilder.ai additions ================================================ */

/* R4: iOS zooms the page on focus when an input is under 16px */
@media (pointer:coarse), (max-width:680px){
  .field input{font-size:16px}
}
#hofPublic{margin:-4px 0 10px}