:root {
  /* Windows Terminal "Campbell" scheme + Windows 11 dark chrome */
  --wt-bg: #0c0c0c;
  --wt-fg: #cccccc;
  --wt-chrome: #202020;
  --wt-tab-hover: #2d2d2d;
  --wt-border: #3a3a3a;
  --c-red: #e74856;
  --c-green: #16c60c;
  --c-green-d: #13a10e;
  --c-yellow: #f9f1a5;
  --c-blue: #3b78ff;
  --c-cyan: #61d6d6;
  --c-gray: #767676;

  /* side panel (plain for now) */
  --side: #171717;
  --side2: #1f1f1f;
  --line: #2c2c2c;
  --text: #e4e4e4;
  --muted: #8f8f8f;
  --amber: #ffb547;
  --green: #5ee27a;
  --red: #ff6b6b;
  --blue: #6cb6ff;
  --pink: #ff8fb8;
  --violet: #c58cff;
  --teal: #4fd1c5;

  --mono: 'Cascadia Mono', 'IBM Plex Sans Thai', Consolas, ui-monospace, monospace;
  --ui: 'Segoe UI Variable', 'Segoe UI', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --sans: 'IBM Plex Sans Thai', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: #101010; color: var(--text); font-family: var(--sans); overflow: hidden; }
button { font: inherit; cursor: pointer; color: inherit; }
/* dark, thin scrollbars everywhere (the browser default is a white bar) */
* { scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #505050; }
::-webkit-scrollbar-button { display: none; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }

main { height: 100%; display: grid; grid-template-columns: 380px 1fr; }

/* ================= side panel ================= */
.ic { height: 1.25em; width: auto; vertical-align: -0.25em; }

/* character stage: whoever is talking */
.cast { position: relative; height: 240px; flex: none; border-bottom: 1px solid var(--line); background: linear-gradient(#1d1d1d, #141414); overflow: hidden; }
.cast canvas { display: block; width: 100%; height: 100%; }
.cast canvas, .cast img, .cast-name { transition: opacity .25s ease; }
.cast.swap canvas, .cast.swap img, .cast.swap .cast-name { opacity: 0; }
.cast img { position: absolute; left: 50%; bottom: 14px; height: 78%; transform: translateX(-50%); transform-origin: 50% 100%; }
.cast.talking img { animation: talk .22s ease-in-out infinite alternate; }
@keyframes talk { to { transform: translateX(-50%) translateY(-5px) scaleY(1.03); } }
.cast-name { position: absolute; left: 12px; bottom: 10px; font-size: 13px; font-weight: 600; background: rgba(0, 0, 0, .55); padding: 2px 10px; border-radius: 4px; }
.cast-name.who-lam { color: var(--amber); }
.cast-name.who-kru { color: var(--pink); }
.cast-name.who-root { color: var(--green); }
.cast-name.who-virus { color: var(--violet); }
.cast-name.who-lung { color: var(--teal); }
.cast.loading::after { content: 'กำลังโหลดตัวละคร…'; position: absolute; right: 12px; bottom: 12px; font-size: 12px; color: var(--muted); }
.credit { margin-top: 8px; font-size: 11px; color: var(--muted); }

aside { background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.brand { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.brand b { font-size: 16px; margin-right: auto; }
#total { color: var(--amber); }
.ai { color: var(--muted); }
.ai.on { color: var(--green); }
.ai.off { color: var(--red); }
.soundbtn { background: none; border: 0; border-radius: 4px; width: 28px; height: 26px; display: grid; place-items: center; color: #d0d0d0; }
.soundbtn:hover { background: #2d2d2d; color: #fff; }
.soundbtn.off { color: #767676; }
.soundbtn svg { display: block; }

.level { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.lvtop { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
#lvstars { color: var(--amber); letter-spacing: 2px; }
h1 { font-size: 20px; margin: 2px 0 0; line-height: 1.3; }
#lvphase { font-size: 13px; }
.mission { margin-top: 10px; padding: 8px 10px; background: var(--side2); border-left: 3px solid var(--amber); font-size: 15px; line-height: 1.55; }
.steps { list-style: none; margin: 6px 0 0; padding: 0; font-size: 14px; }
.steps:empty { display: none; }
.steps li { color: var(--muted); }
.steps li::before { content: '☐ '; }
.steps li.ok { color: var(--green); }
.steps li.ok::before { content: '☑ '; }
.steps li.opt { color: #6f6f6f; }
.steps li.opt::before { content: '○ '; }
.steps small { font-size: 11.5px; }
.actions { display: flex; gap: 8px; margin-top: 10px; }
.actions button, .mapbtn, .mp-head button, .pkopen { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.mapbtn { justify-content: flex-start; }
.mp-head b { display: inline-flex; align-items: center; gap: 8px; }
svg.ic { flex: none; }
.gui svg.ic { vertical-align: -2px; margin-right: 4px; }
.f.pktip > svg.ic { vertical-align: -3px; }
.wt-icon svg.ic { display: block; color: #9fc6e6; }
.actions button { flex: 1; white-space: nowrap; padding: 6px 8px; border: 1px solid #3a3a3a; background: #262626; border-radius: 4px; font-size: 13.5px; }
.actions button:hover:not(:disabled) { background: #303030; }
.actions button:disabled { opacity: .45; cursor: default; }
#hintnote { display: none; }

/* message feed: everything the game tells you lives here, so `clear` in the terminal never loses it */
.feed { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.55; }
.f { overflow-wrap: anywhere; }
.f.say .who { font-size: 12.5px; font-weight: 600; }
.who-lam .who { color: var(--amber); }
.who-kru .who { color: var(--pink); }
.who-root .who { color: var(--green); }
.who-virus .who { color: var(--violet); }
.who-lung .who { color: var(--teal); }
.qbtns { display: flex; gap: 8px; margin-top: 6px; }
.qbtns button { padding: 4px 16px; border-radius: 4px; border: 1px solid #3a3a3a; background: #262626; font-size: 13.5px; }
.qbtns button[data-a="y"] { border-color: #2c5a3a; }
.qbtns button:hover:not(:disabled) { background: #303030; }
.qbtns button:disabled { opacity: .45; cursor: default; }
.qbtns button.chosen { opacity: 1; background: #2c3a2f; border-color: var(--green); }
.gone { margin: 4px 0 0; padding-left: 20px; font-family: var(--mono); font-size: 13px; color: var(--red); }
.f.sys { color: var(--muted); font-size: 13.5px; }
.f.sys.phase { color: var(--violet); font-weight: 600; }
.f.sys.fail { color: var(--red); }
.f.sys.win { color: var(--green); }
.f.sys.mission { color: var(--amber); }
.f.thinking { color: var(--amber); font-size: 13.5px; }
.thinking .dots::after { content: ''; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

.f.trans { background: var(--side2); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; font-size: 13.5px; }
.tag { font-size: 12px; font-weight: 600; color: var(--amber); display: block; margin-bottom: 2px; }
.f code, .cmdt { font-family: var(--mono); font-size: 13px; background: #0c0c0c; color: var(--wt-fg); padding: 1px 6px; border-radius: 3px; }
mark { background: #4a3a14; color: var(--c-yellow); padding: 0 2px; }
.parts { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; }
.explain { margin-top: 4px; color: var(--muted); font-size: 13px; }
.cmdt.big { font-size: 15px; padding: 3px 10px; display: inline-block; margin: 2px 0; }
.lesson { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.lesson code { color: var(--c-yellow); }
.card-map { margin-top: 4px; font-family: var(--mono); font-size: 13px; }
.card-map b { color: var(--green); }

.dec { border-left: 3px solid var(--red); background: var(--side2); padding: 6px 10px; font-size: 13.5px; }
.dec + .dec { margin-top: 6px; }
.dec .grid { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; }
.dec .k { font-size: 12px; }
.k.who { color: var(--pink); }
.k.what { color: var(--blue); }
.k.why { color: var(--amber); }
.dec .tip { margin-top: 3px; color: var(--green); }
.book { background: none; border: 1px dashed #555; color: #d7a5a5; border-radius: 4px; padding: 3px 10px; font-size: 13px; }

.passbox { border: 1px solid #2c5a3a; background: #122016; border-radius: 4px; padding: 10px 12px; }
.passbox .pt { color: var(--green); font-weight: 700; font-size: 16px; }
.passbox .stars { color: var(--amber); font-size: 22px; letter-spacing: 4px; }
.passbox .why { color: var(--muted); font-size: 13px; }
.passbox .btns { display: flex; gap: 8px; margin-top: 8px; }
.passbox button { border-radius: 4px; padding: 6px 12px; border: 1px solid #3a3a3a; background: #262626; }
.passbox button.next { background: var(--green); color: #0b1a0f; border-color: var(--green); font-weight: 600; }
.cardchip { font-family: var(--mono); font-size: 12px; color: var(--green); border: 1px solid #2c5a3a; border-radius: 3px; padding: 1px 6px; }

.mapbtn { flex: none; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; padding: 9px 16px; font-size: 13px; }
.mapbtn:hover { color: var(--text); background: #1c1c1c; }
aside { position: relative; }
.mappanel { position: absolute; inset: 0; z-index: 20; background: var(--side); display: flex; flex-direction: column; font-size: 13px; }
.mappanel[hidden] { display: none; }
.mp-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--side2); }
.mp-head b { font-size: 14px; }
.mp-head button { border: 1px solid #3a3a3a; background: #262626; border-radius: 4px; padding: 4px 12px; }
.mp-head button:hover { background: #303030; }
.mp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 20px; }
.mapgroup { margin-bottom: 8px; }
.mg { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.mrow { display: flex; flex-wrap: wrap; gap: 4px; }
.lvbtn { width: 46px; height: 38px; border-radius: 4px; border: 1px solid #333; background: var(--side2); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; padding: 0; line-height: 1.1; }
.lvbtn small { color: var(--amber); font-size: 9px; min-height: 10px; }
.lvbtn.cur { border-color: var(--amber); }
.lvbtn.boss { border-style: dashed; }
.lvbtn:disabled { opacity: .3; cursor: default; }
#cards { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.linkbtn { background: none; border: none; color: var(--muted); font-size: 12px; padding: 0; text-decoration: underline; }

/* ================= Windows Terminal window ================= */
.stage { min-width: 0; min-height: 0; display: flex; padding: 16px; }
.wt { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--wt-bg); border: 1px solid var(--wt-border); border-radius: 8px; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, .5); font-family: var(--ui); }
.wt-bar { display: flex; align-items: flex-end; height: 40px; background: var(--wt-chrome); color: #fff; font-size: 12px; user-select: none; flex: none; }
.wt-tab { display: flex; align-items: center; gap: 10px; height: 32px; min-width: 200px; max-width: 320px; margin-left: 8px; padding: 0 8px 0 12px; background: transparent; border-radius: 8px 8px 0 0; cursor: default; }
.wt-tab.on { background: var(--wt-bg); }
.wt-tab:not(.on):hover { background: var(--wt-tab-hover); }
.wt-tab[hidden] { display: none; }
#pikiplus { cursor: pointer; }
.wt-icon { font-size: 14px; line-height: 1; }
.wt-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-x { width: 22px; height: 22px; display: grid; place-items: center; font-size: 10px; border-radius: 4px; color: #d0d0d0; }
.wt-x:hover { background: var(--wt-tab-hover); }
.wt-btn { align-self: center; width: 32px; height: 28px; margin-top: 4px; display: grid; place-items: center; font-size: 16px; border-radius: 4px; color: #d0d0d0; }
.wt-btn:hover { background: var(--wt-tab-hover); }
.wt-drop { width: 26px; margin-left: -4px; }
.wt-drag { flex: 1; }
.wt-ctl { align-self: flex-start; width: 46px; height: 32px; display: grid; place-items: center; font-size: 12px; color: #e0e0e0; }
.wt-ctl:hover { background: #2d2d2d; }
.wt-ctl.close:hover { background: #c42b1c; color: #fff; }

.termwrap { position: relative; flex: 1; min-height: 0; display: flex; }
#term { flex: 1; overflow-y: auto; padding: 6px 10px 16px; font-family: var(--mono); font-size: 15px; line-height: 1.3; color: var(--wt-fg); cursor: text; scrollbar-width: thin; scrollbar-color: #4a4a4a transparent; }
#term ::selection { background: #ffffff; color: #0c0c0c; }
.ln { white-space: pre-wrap; word-break: break-word; min-height: 1.3em; }
.pu { color: var(--c-green); font-weight: 700; }
.pcwd { color: var(--c-blue); font-weight: 700; }
.pcwd .pu + span { color: var(--wt-fg); font-weight: 400; }
.plabel { color: var(--wt-fg); }
.inrow .plabel { margin-right: .6ch; }
.a-blue { color: var(--c-blue); font-weight: 700; }
.a-red { color: var(--c-red); font-weight: 700; }
.a-green { color: var(--c-green); }
.a-exe { color: var(--c-green); font-weight: 700; }
.a-gray { color: var(--c-gray); }
.ln.cmt { color: var(--c-gray); }          /* "# น้องล่ามแปล: ..." -- shell-comment style */
.ln.cmt b { color: var(--c-yellow); font-weight: 400; }
.ln.code { color: var(--c-gray); }

.inrow { display: flex; align-items: baseline; }
#cmd { flex: 1; background: transparent; border: none; outline: none; color: var(--wt-fg); font: inherit; caret-color: #ffffff; padding: 0; min-width: 0; }
#cmd.busy { opacity: .4; }
#cmd::placeholder { color: #4a4a4a; }

.overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 8px; font-size: 22px; text-align: center; padding: 20px; font-family: var(--sans); }
.overlay.show { display: flex; }
.overlay.power { background: #000; color: var(--muted); }
.overlay.wiped { background: #1c0606; color: var(--red); }
.overlay.captions { background: #000; color: #ddd; font-size: 24px; gap: 18px; z-index: 30; }
.overlay.captions .cap { animation: capin 1.2s ease both; max-width: 760px; line-height: 1.5; }
.overlay.captions .gameover { font: 700 44px var(--mono); color: var(--c-red); letter-spacing: .08em; }
.overlay.captions code { font: 18px var(--mono); color: var(--c-red); }
.overlay.captions .capbtn { margin-top: 18px; background: none; border: 1px solid #555; color: #ddd; border-radius: 4px; padding: 6px 22px; font-size: 15px; animation: capin 1s ease both; }
.overlay.captions .capbtn:hover { border-color: #aaa; }
@keyframes capin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.overlay .small { font-size: 14px; color: var(--muted); line-height: 1.6; }

@media (max-width: 900px) {
  body { overflow: auto; }
  main { height: auto; grid-template-columns: 1fr; }
  aside { border-right: none; border-bottom: 1px solid var(--line); }
  .feed { max-height: 40vh; }
  .cast { height: 200px; }
  .stage { padding: 0; height: 75vh; }
  .wt { border-radius: 0; border-left: none; border-right: none; }
  .wt-tab { min-width: 0; flex: 1; }
  .wt-btn, .wt-ctl { display: none; }
  #term { font-size: 13.5px; }
}

/* ================= story cutscenes ================= */
.scenes { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.scenebtn { font-size: 12px; padding: 3px 10px; border-radius: 4px; border: 1px solid #3a3a3a; background: #262626; }
.scenebtn:hover { background: #303030; }
.cast.asleep::after { content: 'z z Z'; position: absolute; right: 22%; top: 18%; color: #9fb4ff; font: 600 15px var(--mono); animation: zz 2.4s ease-in-out infinite; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 6px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translate(10px, -14px); } }

.cs { position: fixed; inset: 0; z-index: 50; background: #05070c; font-family: var(--sans); cursor: pointer; animation: csin .5s ease; }
.cs.out { opacity: 0; transition: opacity .5s ease; }
@keyframes csin { from { opacity: 0; } }
.cs canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cs-bg { position: absolute; inset: 0; transition: background 1s ease; }
.cs-bg.bg-future { background: radial-gradient(ellipse at 50% 40%, #173a5e 0%, #0a1629 55%, #04070d 100%); }
.cs-bg.bg-future::after, .cs-bg.bg-alert::after { content: ''; position: absolute; left: -50%; right: -50%; bottom: 0; height: 42%;
  background-image: linear-gradient(rgba(97, 214, 214, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(97, 214, 214, .25) 1px, transparent 1px);
  background-size: 60px 40px; transform: perspective(300px) rotateX(60deg); transform-origin: bottom; mask-image: linear-gradient(transparent, #000 70%); }
.cs-bg.bg-alert { background: radial-gradient(ellipse at 50% 40%, #4a1020 0%, #1f0610 60%, #070205 100%); }
.cs-bg.bg-alert::after { background-image: linear-gradient(rgba(255, 80, 110, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 80, 110, .25) 1px, transparent 1px); }
.cs-bg.bg-dark { background: radial-gradient(ellipse at 50% 45%, #1a1f33 0%, #07090f 70%); }
.cs-bg.bg-dawn { background: radial-gradient(ellipse at 50% 30%, #ffd9a0 0%, #f39a7b 35%, #6b4d8a 75%, #2a2140 100%); }

.cs-fx { position: absolute; inset: 0; pointer-events: none; }
.cs-fx.fx-glitch { animation: glitch .7s steps(2) 1; }
@keyframes glitch {
  0% { background: rgba(255, 0, 80, .25); clip-path: inset(10% 0 70% 0); transform: translateX(-12px); }
  25% { background: rgba(0, 255, 220, .2); clip-path: inset(55% 0 20% 0); transform: translateX(14px); }
  50% { background: rgba(255, 0, 80, .3); clip-path: inset(30% 0 45% 0); transform: translateX(-8px); }
  75% { background: rgba(0, 255, 220, .15); clip-path: inset(75% 0 5% 0); transform: translateX(10px); }
  100% { background: transparent; clip-path: none; transform: none; }
}
.cs-fx.fx-pulse { animation: pulse .9s ease-out 1; }
@keyframes pulse { 0% { box-shadow: inset 0 0 0 0 rgba(97, 214, 214, 0); } 40% { box-shadow: inset 0 0 160px 40px rgba(97, 214, 214, .45); } 100% { box-shadow: inset 0 0 0 0 rgba(97, 214, 214, 0); } }
.cs-fx.fx-fail { animation: fail .8s ease-out 1; }
@keyframes fail { 0%, 30% { background: rgba(231, 72, 86, .35); } 100% { background: transparent; } }
.cs-fx.fx-white { animation: white 1.4s ease-out 1; }
@keyframes white { 0% { background: rgba(255, 255, 255, 0); } 25% { background: rgba(255, 255, 255, .95); } 100% { background: rgba(255, 255, 255, 0); } }

.cs-caption { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font-size: clamp(22px, 4vw, 44px); font-weight: 700; color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; padding: 0 24px; pointer-events: none; }
.cs-caption.show { opacity: 1; transform: none; }
.cs-sub { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); width: min(820px, calc(100% - 32px)); background: rgba(8, 10, 16, .82);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; padding: 12px 18px 14px; color: #f0f0f0; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.55; }
.cs-sub b { display: block; font-size: 13px; margin-bottom: 2px; }
.cs-sub.who-lam b { color: var(--amber); }
.cs-sub.who-kru b { color: var(--pink); }
.cs-sub.who-root b { color: var(--green); }
.cs-sub.who-virus b { color: var(--violet); }
.cs-sub.who-lung b { color: var(--teal); }
.cs-skip { position: absolute; top: 16px; right: 16px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .2); color: #ddd; border-radius: 4px; padding: 6px 14px; font-size: 13px; }
.cs-skip:hover { background: rgba(0, 0, 0, .7); }
.cs-hint { position: absolute; left: 16px; bottom: 12px; font-size: 12px; color: rgba(255, 255, 255, .4); }


/* ================= sign-in ================= */
.signin { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: #0d0d0d; padding: 16px; overflow: auto; }
.signin[hidden], .signin form[hidden] { display: none; }
.si-box { width: 100%; max-width: 460px; background: var(--side2); border: 1px solid var(--line); border-radius: 10px; padding: 22px; display: flex; flex-direction: column; gap: 14px; margin: auto; }
.si-title { font-size: 24px; font-weight: 700; }
.si-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.si-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px; color: var(--muted); font-size: 15px; }
.si-tabs button.on { color: var(--text); border-color: var(--c-cyan); }
.signin form { display: flex; flex-direction: column; gap: 12px; }
.signin label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.signin label small { font-size: 11.5px; }
.signin input:not([type=checkbox]) { width: 100%; min-width: 0; font: inherit; font-size: 15px; color: var(--text); background: #121212; border: 1px solid var(--wt-border); border-radius: 6px; padding: 8px 10px; }
.signin input:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
.si-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.signin .lbl small { color: #6f6f6f; margin-left: 6px; }
.consent { background: #141414; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font-size: 13px; }
.consent p { margin: 6px 0 10px; line-height: 1.6; color: var(--muted); }
.signin label.chk { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-size: 14px; cursor: pointer; }
.chk input { width: 18px; height: 18px; accent-color: var(--green); }
.signin .err { color: var(--red); font-size: 13px; min-height: 1em; }
.signin .go { background: var(--c-green-d); border: 0; border-radius: 6px; padding: 10px; font-weight: 700; font-size: 15px; color: #fff; }
.signin .go:disabled { background: #2a2a2a; color: var(--muted); cursor: not-allowed; }
.signin .guest { align-self: center; }
@media (max-width: 420px) { .si-row2 { grid-template-columns: 1fr; } }
.player { display: flex; align-items: center; gap: 8px; padding: 4px 14px 6px; font-size: 12px; color: var(--muted); }
.player b { color: var(--text); font-weight: 600; }
.player button { margin-left: auto; }

/* ================= checkpoint quiz (in the terminal) ================= */
.ln.qz-h { color: var(--c-cyan); font-weight: 700; }
.ln.qz-q { color: var(--c-yellow); }
.ln.qz-ok { color: var(--c-green); }
.ln.qz-no { color: var(--c-red); }
.lvbtn.cp { border-style: dashed; color: var(--c-cyan); }
.gui { margin-top: 6px; color: #8fb3d1; font-size: 12.5px; line-height: 1.5; }
.gui[hidden] { display: none; }
.gui a { color: var(--blue); }
.f.pktip { background: #14202b; border-left: 3px solid var(--blue); padding: 6px 10px; border-radius: 4px; color: #cfe3f5; line-height: 1.6; }
.f.pktip code { font-family: var(--mono); background: #0c0c0c; padding: 0 4px; border-radius: 3px; }
.f.pktip .pkopen { margin-left: 4px; background: #1f3a55; border: 1px solid #36597d; color: #fff; border-radius: 4px; padding: 1px 10px; font-size: 12.5px; }
.who-serv .who { color: var(--c-cyan); }
.cast-name.who-serv { color: var(--c-cyan); }

/* ================= Piki: a Wikipedia parody, opened as a tab in the terminal window ================= */
.pikiwrap { position: absolute; inset: 0; z-index: 4; background: #fff; color: #202122; overflow: hidden; font-family: var(--sans); }
.pikiwrap[hidden] { display: none; }
.pk { height: 100%; display: flex; flex-direction: column; }
.pk-top { display: flex; align-items: center; gap: 16px; padding: 10px 18px; border-bottom: 1px solid #a2a9b1; background: #f8f9fa; }
.pk-logo b { font: 700 24px Georgia, 'Times New Roman', serif; letter-spacing: .02em; }
.pk-logo small { display: block; font-size: 11.5px; color: #54595d; }
.pk-search { margin-left: auto; width: min(320px, 50%); font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid #a2a9b1; border-radius: 2px; color: #202122; background: #fff; }
.pk-body { flex: 1; min-height: 0; display: flex; }
.pk-nav { width: 190px; flex: none; overflow: auto; padding: 12px 10px 20px 16px; font-size: 13.5px; border-right: 1px solid #eaecf0; background: #f8f9fa; }
.pk-navh { color: #54595d; font-size: 12px; margin-bottom: 6px; }
.pk-nav a, .pk-locked { display: block; padding: 3px 4px; }
.pk-nav a.on { font-weight: 700; color: #202122; }
.pk-locked { color: #a2a9b1; cursor: default; }
.pk a { color: #3366cc; text-decoration: none; }
.pk a:hover { text-decoration: underline; }
.pk-page { flex: 1; min-width: 0; overflow: auto; padding: 18px 28px 50px; font-size: 15px; line-height: 1.65; }
.pk-page h1 { font: 400 28px Georgia, 'Times New Roman', 'Noto Serif Thai', serif; margin: 0; padding-bottom: 4px; border-bottom: 1px solid #a2a9b1; }
.pk-page h2 { font: 400 21px Georgia, 'Times New Roman', 'Noto Serif Thai', serif; margin: 26px 0 8px; padding-bottom: 3px; border-bottom: 1px solid #a2a9b1; clear: none; }
.pk-from { font-size: 12.5px; color: #54595d; margin: 4px 0 12px; }
.pk-info { float: right; clear: right; width: 260px; margin: 0 0 12px 18px; border: 1px solid #a2a9b1; background: #f8f9fa; border-collapse: collapse; font-size: 13px; line-height: 1.5; }
.pk-info th { background: #cee0f2; padding: 6px; font-size: 15px; }
.pk-info td { padding: 5px 8px; border-top: 1px solid #eaecf0; vertical-align: top; }
.pk-info td:first-child { font-weight: 600; width: 38%; }
.pk-lead { margin-top: 0; }
.pk-toc { display: inline-flex; flex-direction: column; gap: 2px; border: 1px solid #a2a9b1; background: #f8f9fa; padding: 8px 14px; font-size: 13.5px; margin: 4px 0 6px; }
.pk-toc b { text-align: center; margin-bottom: 2px; }
.pk code { font-family: var(--mono); font-size: 13px; background: #f8f9fa; border: 1px solid #eaecf0; border-radius: 2px; padding: 1px 4px; color: #000; }
.pk-table { border-collapse: collapse; margin: 8px 0 12px; font-size: 14px; max-width: 100%; }
.pk-table th, .pk-table td { border: 1px solid #a2a9b1; padding: 5px 10px; text-align: left; vertical-align: top; }
.pk-table th { background: #eaecf0; }
.pk-ex { margin: 10px 0 14px; border-left: 3px solid #a2a9b1; padding-left: 12px; }
.pk-cmd { font-family: var(--mono); font-size: 14px; background: #0c0c0c; color: #ccc; padding: 6px 10px; border-radius: 3px 3px 0 0; }
.pk-cmd span { color: #16c60c; }
.pk-err { color: #f08c8c; }
.pk-out { margin: 0; font-family: var(--mono); font-size: 13px; background: #1b1b1b; color: #ddd; padding: 6px 10px; white-space: pre-wrap; word-break: break-word; border-radius: 0 0 3px 3px; }
.pk-cmd + .pk-note, .pk-out + .pk-note { margin-top: 4px; }
.pk-note { font-size: 14px; color: #202122; }
.pk-warn { margin: 10px 0; padding: 8px 12px; background: #fef6e7; border: 1px solid #fc3; font-size: 14px; }
.pk-lockmsg { color: #54595d; }
@media (max-width: 900px) { .pk-nav { display: none; } .pk-info { float: none; width: 100%; margin: 0 0 12px; } }

/* Wordless reactions: a sticker stamped beside the character (stage.js react()) */
.react-tag { position: absolute; right: 14px; top: 34px; z-index: 3; pointer-events: none; opacity: 0;
  font-family: var(--sans); font-weight: 800; font-size: 22px; line-height: 1; padding: 7px 12px 8px;
  color: #141414; background: var(--amber); border: 3px solid #141414; border-radius: 8px;
  box-shadow: 4px 4px 0 #141414; transform: rotate(-8deg); white-space: nowrap; }
.react-tag.show { animation: tag-stamp 2s cubic-bezier(.2, 1.6, .4, 1) both; }
.react-tag.r-wrong    { background: var(--amber); }
.react-tag.r-tooBad   { background: var(--blue); }
.react-tag.r-overstep { background: var(--red); color: #fff; font-size: 26px; transform: rotate(6deg); }
.react-tag.r-tooGood  { background: var(--green); }
.react-tag.r-offTask  { background: var(--violet); top: 22px; right: 22px; transform: rotate(10deg); }
.react-tag.r-overstep.show, .react-tag.r-tooBad.show { animation: tag-stamp 2.2s cubic-bezier(.2, 1.6, .4, 1) both, tag-shake .09s linear .25s 5; }
@keyframes tag-stamp {
  0%   { opacity: 0; scale: 2.6; }
  12%  { opacity: 1; scale: 1; }
  80%  { opacity: 1; scale: 1; translate: 0 0; }
  100% { opacity: 0; scale: .9; translate: 0 -10px; }
}
@keyframes tag-shake { 0%, 100% { translate: 0 0; } 25% { translate: -4px 1px; } 75% { translate: 4px -1px; } }
.cast.jolt { animation: cast-jolt .35s ease-out; }
@keyframes cast-jolt { 0% { box-shadow: inset 0 0 0 3px var(--red); } 20% { translate: -5px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 100% { translate: 0 0; box-shadow: inset 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .react-tag.show { animation-duration: 2s; animation-name: tag-fade; } .cast.jolt { animation: none; } }
@keyframes tag-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }