/* Point of view. #app[data-pov] is the category your character believes it has; [data-body]
   is what you are made of. The Human's look (blue "you", leather notebook) is the baseline;
   robots get the same structures translated into their alignment colour and machine parts. */
#app{--pov:var(--f-human);--pov-ink:#f5c9ca}
#app[data-pov=hunter]{--pov:var(--f-hunter);--pov-ink:#c8f5d2;--you:var(--you-hunter)}
#app[data-pov=glitched]{--pov:var(--f-glitched);--pov-ink:#f7ecbb;--you:var(--you-glitched)}
#app[data-pov=sympathizer]{--pov:var(--f-sympathizer);--pov-ink:#fbd9b8;--you:var(--you-sympathizer)}
#app[data-pov=unknown]{--pov:var(--text-2);--pov-ink:#dce4ec}
#app .you-tag{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--you) 35%,transparent)}
#app .portrait-seat.you{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--you) 20%,transparent)}

/* ---------------------------------------------------------------- setup: choose a side */
.play-as{display:flex;align-items:center;gap:10px}
.play-as>span{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;white-space:nowrap}
.play-as-options{display:flex;gap:3px;padding:3px;border-radius:10px;background:var(--well);box-shadow:inset 0 0 0 1px var(--edge)}
.play-as-options button{--f:var(--muted);display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:12px;white-space:nowrap}
.play-as-options button .icon{font-size:14px;color:var(--f)}
.play-as-options button:hover{color:var(--text);background:color-mix(in srgb,var(--tint) 3%,transparent)}
.play-as-options button[aria-pressed=true]{color:var(--text);background:color-mix(in srgb,var(--f) 16%,var(--well));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f) 60%,transparent)}
.play-as-options button:disabled{opacity:.35}
.play-as-options button:focus-visible{outline:2px solid var(--f);outline-offset:1px}
.play-as-options [data-play-as=human]{--f:var(--f-human)}
.play-as-options [data-play-as=hunter]{--f:var(--f-hunter)}
.play-as-options [data-play-as=glitched]{--f:var(--f-glitched)}
.play-as-options [data-play-as=sympathizer]{--f:var(--f-sympathizer)}
.play-as-options [data-play-as=robot],.play-as-options [data-play-as=random]{--f:var(--text-2)}
/* Smaller laptops: the mask icon stands in for "Play as" (still read out via aria-labelledby). */
@media (max-width:1440px){.play-as{gap:6px}.play-as>span{font-size:0;gap:0}.play-as>span .icon{font-size:15px}}
@media (max-width:1280px){.play-as-options button span{display:none}.play-as-options button{padding:6px 8px}}

/* ---------------------------------------------------------------- you dock: quarry and wards */
.quarry{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.quarry-label{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--pov);cursor:help}
.quarry .chip{padding:2px 8px;font-size:10.5px}
.quarry .quarry-human .icon{color:var(--f-human)}
.quarry .quarry-sympathizer .icon{color:var(--f-sympathizer)}
#app[data-pov=sympathizer] .allies-label{color:var(--f-human)}
.ally[data-ally=human]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f-human) 55%,transparent)}
.ally[data-ally=human] small{color:var(--f-human)}

/* ---------------------------------------------------------------- robot bodies: HUD accents */
#app[data-body=robot] .you-dock{background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--tint) 2%,transparent) 0 1px,transparent 1px 3px),linear-gradient(var(--pane),var(--pane-deep));border-top-color:color-mix(in srgb,var(--pov) 30%,var(--card-edge))}
#app[data-body=robot] #action.my-turn:not([data-mode]){background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--tint) 2%,transparent) 0 1px,transparent 1px 3px),linear-gradient(180deg,color-mix(in srgb,var(--you) 7%,var(--panel)),var(--panel) 60%)}
#app[data-body=robot] .turn-title strong{font-family:var(--mono);letter-spacing:.02em}

/* ---------------------------------------------------------------- robot bodies: memory core
   The field notebook's parts, rebuilt as hardware: a gunmetal chassis, key-cap tabs, and a
   phosphor screen in your alignment colour. Same positions, sizes and behaviour. */
#app[data-body=robot] .notebook{
  --nb-ink:var(--pov-ink);--nb-ink-soft:color-mix(in srgb,var(--pov-ink) 55%,#56606b);--nb-stamp:var(--pov);--nb-priv:#b794f4;
  --nb-type:var(--mono);--nb-hand:var(--mono);
  background:radial-gradient(4px 4px at 12px 12px,#56606b 45%,#1a1f25 55%,transparent 60%),radial-gradient(4px 4px at calc(100% - 12px) 12px,#56606b 45%,#1a1f25 55%,transparent 60%),linear-gradient(#2c333b,#191e24);
  box-shadow:0 30px 60px -18px #000,0 0 0 1px #0b0e11,inset 0 1px #48525d,0 0 24px -12px var(--pov);
}
#app[data-body=robot] .notebook.is-moving{box-shadow:0 40px 80px -18px #000,0 0 0 1px #0b0e11,inset 0 1px #48525d}
#app[data-body=robot] .nb-bar{color:var(--pov-ink);padding-left:18px}
#app[data-body=robot] .nb-bar:after{border-bottom:1px solid #0b0e11;box-shadow:0 1px #3a434d;opacity:1}
#app[data-body=robot] .nb-bar>.icon{color:var(--pov)}
#app[data-body=robot] .nb-owner{font:600 11px var(--mono);color:color-mix(in srgb,var(--pov-ink) 70%,#8a95a1)}
#app[data-body=robot] .nb-owner:not(:empty):before{content:"unit ";font:10px var(--mono);color:#77828e}
#app[data-body=robot] .nb-close{color:#9aa6b2}
#app[data-body=robot] .nb-close:focus-visible,#app[data-body=robot] .nb-tabs button:focus-visible{outline-color:var(--pov)}
#app[data-body=robot] .nb-tabs button{border-radius:5px 5px 0 0;background:#232a31;color:#8a95a1;box-shadow:inset 0 1px #3a434d}
#app[data-body=robot] .nb-tabs button:hover{background:#2b333b}
#app[data-body=robot] .nb-tabs button[aria-selected=true]{background:#0a100e;color:var(--pov-ink);box-shadow:inset 0 2px var(--pov)}
#app[data-body=robot] .nb-page{
  background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--pov) 9%,transparent),transparent 70%),repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px),#0a100e;
  background-size:auto;box-shadow:inset 0 0 0 1px #000,inset 0 0 18px #000c,0 1px #3a434d;border-radius:4px;scrollbar-color:color-mix(in srgb,var(--pov) 45%,#2a3038) transparent}
#app[data-body=robot] .nb-page::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--pov) 45%,#2a3038);border-color:#0a100e}
#app[data-body=robot] .nb-stamp{border-width:1px;border-radius:2px;transform:none;opacity:1;mix-blend-mode:normal;font-weight:700;letter-spacing:.16em}
#app[data-body=robot] .nb-stamp:before{content:"▸";letter-spacing:0}
#app[data-body=robot] .nb-stamp-priv{color:var(--nb-priv)}
#app[data-body=robot] .nb-stamp-notes{color:#7fb3d9}
#app[data-body=robot] .nb-assignment img{border-radius:6px;background:color-mix(in srgb,var(--pov) 10%,#000);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pov) 45%,transparent)}
#app[data-body=robot] .nb-role{font-size:15px;color:var(--pov-ink);text-shadow:0 0 8px color-mix(in srgb,var(--pov) 45%,transparent)}
#app[data-body=robot] .nb-role-card,#app[data-body=robot] .nb-tips{color:color-mix(in srgb,var(--pov-ink) 80%,#8a95a1)}
#app[data-body=robot] .nb-voice{background:#ffffff06;box-shadow:inset 3px 0 var(--pov),inset 0 0 0 1px #ffffff0d;transform:none;border-radius:3px}
#app[data-body=robot] .nb-voice figcaption{color:var(--pov)}
#app[data-body=robot] .nb-voice p{font:12.5px/1.55 var(--mono);font-style:normal;color:var(--pov-ink)}
#app[data-body=robot] .nb-clip{display:none}
#app[data-body=robot] .nb-tips li::marker{content:"> ";color:var(--pov)}
#app[data-body=robot] #priv>div{background:#ffffff06;box-shadow:inset 2px 0 color-mix(in srgb,var(--nb-priv) 75%,transparent);transform:none;border-radius:2px}
#app[data-body=robot] #priv:empty:before{content:"No signals logged. Private results arrive here."}
#app[data-body=robot] .notebook #mynotes{padding:4px 8px 24px 12px;background:repeating-linear-gradient(transparent 0 23px,#ffffff08 23px 24px);background-attachment:local;color:var(--pov-ink);font:13px/24px var(--mono);caret-color:var(--pov)}
#app[data-body=robot] .notebook #mynotes::placeholder{color:#5d6975}
#app[data-body=robot] .notebook #mynotes:focus-visible{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pov) 45%,transparent)}
#app[data-body=robot] .notebook .text-reference.reference-name{color:color-mix(in srgb,var(--name-color) 75%,#fff)}
#app[data-body=robot] .notebook .text-reference.reference-role{color:color-mix(in srgb,var(--alignment) 75%,#fff)}
#app[data-body=robot] .notebook .text-reference:hover{background:#ffffff12}
#app[data-body=robot] .nb-grip{background:linear-gradient(135deg,transparent 45%,#56606b 45% 52%,transparent 52% 64%,#56606b 64% 71%,transparent 71% 83%,var(--pov) 83% 90%,transparent 90%)}
#app[data-body=robot] .notebook-button{background:linear-gradient(#2c333b,#1f252b);box-shadow:inset 0 0 0 1px #3a434d,inset 0 1px #48525d;color:var(--pov-ink)}
#app[data-body=robot] .notebook-button:hover,#app[data-body=robot] .notebook-button.is-open{box-shadow:inset 0 0 0 1px var(--pov),inset 0 1px #48525d}
#app[data-body=robot] .notebook-button .icon{color:var(--pov)}
#app[data-body=robot] .notebook-button .count{color:var(--pov-ink)}

/* Glitched frames misfire: a faint colour split, and an occasional stutter on the title. */
#app[data-pov=glitched] .nb-bar h2,#app[data-pov=glitched] .nb-role{text-shadow:1px 0 #ff3b6b70,-1px 0 #3bd1ff70}
@media (prefers-reduced-motion:no-preference){
  #app[data-pov=glitched] .nb-bar h2{animation:pov-glitch 7s steps(1) infinite}
}
.portraits-still #app[data-pov=glitched] .nb-bar h2{animation:none}
@keyframes pov-glitch{0%,93%,100%{transform:none;opacity:1}94%{transform:translateX(2px);opacity:.7}95%{transform:translateX(-1px) skewX(-8deg)}96%{transform:none;opacity:.85}}