:root{
  --bg:#0a0a12;
  --grid:#141428;
  --win:#c0c0c0;
  --win-dark:#808080;
  --win-darker:#404040;
  --win-light:#ffffff;
  --ink:#0d0d16;
  --neon:#00f0ff;
  --neon2:#ff2bd6;
  --lime:#7fff4d;
  --amber:#ffb300;
  --red:#ff3b5c;
  --panel:#10121f;
  --panel2:#171a2b;
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-r:env(safe-area-inset-right, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-l:env(safe-area-inset-left, 0px);
}
*, *::before, *::after{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  touch-action:none;
}
::selection{background:transparent;color:inherit;}
#probe{
  position:fixed;
  left:-9999px;
  top:0;
  width:2px;
  height:2px;
  opacity:0;
  pointer-events:none;
}
html, body{
  margin:0; padding:0;
  width:100%; height:100%;
  height:100dvh;
  height:-webkit-fill-available;
  overflow:hidden;
  position:fixed;
  inset:0;
  overscroll-behavior:none;
  background:#000;
  color:#e6f7ff;
  font-family:"MS Gothic","Osaka-Mono","DejaVu Sans Mono",monospace;
}
body{
  background:
    radial-gradient(circle at 50% 0%, rgba(27,32,80,.88) 0%, #0a0a12 62%),
    url("images/bg_plus.png"),
    var(--bg);
  background-size:auto, 56px 56px, auto;
}
body::before{
  content:"";
  position:fixed;inset:0;
  background:linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,.18) 50%);
  background-size:100% 3px;
  pointer-events:none;z-index:9999;opacity:.32;
}
body.nocrt::before{display:none;}

.wrap{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  height:100dvh;
  height:-webkit-fill-available;
  padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  display:flex;
  justify-content:center;
}
.win{
  width:100%;
  max-width:640px;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:var(--win);
  border:2px solid;
  border-color:var(--win-light) var(--win-darker) var(--win-darker) var(--win-light);
  box-shadow:0 0 0 1px #000, 0 0 40px rgba(0,240,255,.18);
  padding:2px;
}
.titlebar{
  flex:none;
  background:linear-gradient(90deg,#12005e,#5a00b8 45%,#00707d);
  color:#fff;
  display:flex;align-items:center;gap:6px;
  padding:3px 4px;
  font-weight:bold;font-size:13px;
  letter-spacing:.5px;
}
.titlebar .tname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.titlebar .day{
  background:#000;color:var(--neon);
  border:1px solid var(--neon);
  padding:0 6px;font-size:11px;
}
.tbtn{
  background:var(--win);color:#000;
  border:2px solid;
  border-color:var(--win-light) var(--win-darker) var(--win-darker) var(--win-light);
  min-width:44px;min-height:32px;
  font-size:12px;font-family:inherit;
  cursor:pointer;padding:0;line-height:1;
  touch-action:manipulation;
  transition:transform .08s ease,opacity .08s ease;
}
.tbtn:active,.tbtn.is-pressed{border-color:var(--win-darker) var(--win-light) var(--win-light) var(--win-darker);transform:scale(0.92);}
.screen{
  flex:1;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:2px solid;
  border-color:var(--win-darker) var(--win-light) var(--win-light) var(--win-darker);
  margin-top:2px;
  padding:10px 12px 10px;
  background-color:var(--panel);
  background-image:url("images/bg_grid.png");
  background-size:28px 28px;
  box-shadow:inset 0 0 48px rgba(0,0,0,.45);
  transition:background-color .4s ease, box-shadow .4s ease;
}
.screen.tod-boot{
  background-color:#0c0e18;
  box-shadow:inset 0 0 56px rgba(0,240,255,.12);
}
.screen.tod-dawn{
  background-color:#16121c;
  box-shadow:inset 0 -40px 80px rgba(255,179,0,.14), inset 0 0 48px rgba(0,0,0,.4);
}
.screen.tod-morning{
  background-color:#101824;
  box-shadow:inset 0 -36px 70px rgba(0,240,255,.12), inset 0 0 48px rgba(0,0,0,.35);
}
.screen.tod-day{
  background-color:#10121f;
  box-shadow:inset 0 0 48px rgba(0,0,0,.4);
}
.screen.tod-dusk{
  background-color:#1a101c;
  box-shadow:inset 0 -40px 80px rgba(255,43,214,.14), inset 0 0 48px rgba(0,0,0,.4);
}
.screen.tod-night{
  background-color:#0a0c16;
  box-shadow:inset 0 0 70px rgba(0,40,90,.55);
}

/* layout shells: info up, actions down */
.view{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.view-body{
  flex:1;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.view-actions{
  flex:none;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.view-play.is-beat .view-body{justify-content:center;}
.view-play.is-beat .msgbox{flex:none;}
.view-play .view-body{justify-content:flex-end;}
.view-play .msgbox{flex:none;width:100%;}
.view-play .msgbox.is-result{flex:none;justify-content:flex-start;}
.view-play .msgbox.is-result .delta{margin-top:14px;}
.view-title .logo{margin:auto 0;}

/* HUD */
.hud{flex:none;}
.clockrow{
  display:flex;align-items:flex-end;gap:10px;
  margin:0;
  flex:none;
}
.clock{
  font-size:34px;font-weight:bold;color:var(--neon);
  text-shadow:0 0 14px rgba(0,240,255,.75);
  letter-spacing:2px;line-height:.95;flex:none;
  font-variant-numeric:tabular-nums;
}
.placephase{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px;padding-bottom:3px;}
.place{font-size:13px;color:#fff;font-weight:bold;letter-spacing:.5px;}
.phase{font-size:12px;color:var(--neon2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.turnno{font-size:11px;color:#8fa3d4;margin-left:auto;flex:none;padding-bottom:4px;}
.weekstrip{
  display:flex;gap:4px;margin:4px 0 0;font-size:10px;letter-spacing:.5px;
}
.weekstrip span{
  flex:1;text-align:center;color:#5f6f9c;border-bottom:2px solid #2c3a63;padding-bottom:2px;
}
.weekstrip span.done{color:#9fb2e0;border-color:#6a7aa8;}
.weekstrip span.now{color:var(--neon);border-color:var(--neon);font-weight:bold;}
.daymeter{
  height:3px;background:#05070f;border:1px solid #2c3a63;margin:6px 0 8px;overflow:hidden;
}
.daymeter span{display:block;height:100%;background:linear-gradient(90deg,#00f0ff,#ff2bd6);box-shadow:0 0 8px rgba(0,240,255,.6);}
.statrow{
  display:grid;
  grid-template-columns:1fr 48px;
  gap:5px 10px;
  align-items:center;
}
.bar{display:flex;align-items:center;gap:6px;font-size:11px;min-width:0;}
.bar .lb{width:22px;color:#9fb2e0;letter-spacing:0;flex:none;font-size:10px;}
.track{
  flex:1;height:10px;background:#05070f;
  border:1px solid #2c3a63;
  position:relative;overflow:hidden;
}
.fill{display:block;height:100%;width:0%;transition:width .35s ease;}
.fill.hp{background:linear-gradient(90deg,#ff2bd6,#ff7a3d);}
.fill.mp{background:linear-gradient(90deg,#00f0ff,#3d6bff);}
.fill.tm{background:linear-gradient(90deg,#7fff4d,#ffb300);}
.track .seg{display:block;position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(0,0,0,.45) 1px,transparent 1px);background-size:8px 100%;}
.bar .val{width:24px;text-align:right;font-weight:bold;color:#e6f7ff;flex:none;font-size:11px;}
.kpi{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  line-height:1.1;gap:1px;
}
.kpi span:first-child{color:#8fa3d4;font-size:8px;letter-spacing:.6px;}
.kpi b{color:var(--lime);font-size:16px;}
.kpi.sat b{color:var(--amber);}
.states{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0 0;min-height:0;}
.states:empty{display:none;}
.tag{font-size:9px;padding:1px 6px;border:1px solid;letter-spacing:1px;animation:blink 1.1s steps(2) infinite;}
.tag.ow{color:var(--red);border-color:var(--red);background:rgba(255,59,92,.12);}
.tag.rc{color:var(--lime);border-color:var(--lime);background:rgba(127,255,77,.12);}
.tag.zn{color:var(--neon);border-color:var(--neon);background:rgba(0,240,255,.12);}
.tag.tr{color:var(--amber);border-color:var(--amber);background:rgba(255,179,0,.12);animation:none;}
@keyframes blink{50%{opacity:.35;}}

/* message */
.msgbox{
  flex:1;min-height:0;margin:0;
  background:rgba(5,7,15,.72);
  border:1px solid rgba(0,240,255,.28);
  box-shadow:inset 0 0 24px rgba(0,240,255,.06);
  padding:12px 12px 10px;overflow:hidden;
  display:flex;flex-direction:column;
}
.msgbox.is-event{
  border-color:rgba(255,43,214,.45);
  box-shadow:inset 0 0 28px rgba(255,43,214,.08);
}
.msgbox.is-result .evtext{
  -webkit-line-clamp:unset;
  display:block;
  font-size:16px;
  line-height:1.75;
}
.evtitle{color:var(--neon2);font-size:14px;font-weight:bold;margin-bottom:8px;text-shadow:0 0 8px rgba(255,43,214,.6);}
.evtitle.normal{color:var(--neon);text-shadow:0 0 8px rgba(0,240,255,.5);}
.evtext{
  font-size:15px;line-height:1.7;color:#e8f4ff;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:5;
}
.delta{
  margin-top:14px;padding-top:10px;
  font-size:12px;line-height:1.45;color:#8fa3d4;
  border-top:1px solid rgba(44,58,99,.8);
  overflow:hidden;
}
.delta .note{margin-top:6px;font-size:12px;line-height:1.45;}
.up{color:var(--lime);}
.down{color:var(--red);}
.flat{color:#8fa3d4;}
.chips{display:flex;flex-wrap:wrap;gap:4px;}
.chip{
  font-size:10px;letter-spacing:.2px;
  padding:2px 6px;border:1px solid #3a3a5c;background:#ececf4;color:#222;
  line-height:1.2;
}
.chip.time{border-color:#404040;background:#111;color:var(--neon);}
.chip.up{border-color:#3d6a2a;color:#1a4a12;background:#d8f5c8;}
.chip.down{border-color:#7a2030;color:#6a1020;background:#ffd0d8;}
.chip.flat{color:#3a3a5c;}
.msgbox .chip{
  background:rgba(8,12,24,.85);color:#cfe4ff;border-color:#2c3a63;
}
.msgbox .chip.time{color:var(--neon);border-color:var(--neon);}
.msgbox .chip.up{color:var(--lime);border-color:rgba(127,255,77,.45);background:rgba(127,255,77,.1);}
.msgbox .chip.down{color:#ff8aa0;border-color:rgba(255,59,92,.45);background:rgba(255,59,92,.1);}

/* choices / buttons — thumb zone */
.choices{display:grid;gap:8px;margin:0;}
.choice{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:var(--win);color:#111;
  border:2px solid;border-color:var(--win-light) var(--win-darker) var(--win-darker) var(--win-light);
  padding:8px 10px;font-family:inherit;font-size:13px;cursor:pointer;line-height:1.25;
  min-height:56px;touch-action:manipulation;
  transition:transform .08s ease,opacity .08s ease;
  box-shadow:inset 4px 0 0 #808080;
}
.choice:active,.choice.is-pressed{border-color:var(--win-darker) var(--win-light) var(--win-light) var(--win-darker);transform:scale(0.92);opacity:.88;}
.choice:disabled{opacity:.55;cursor:default;}
.choice .num{
  background:#000;color:var(--neon);border:1px solid var(--neon);
  font-size:12px;padding:3px 7px;flex:none;
}
.choice .body{flex:1;min-width:0;}
.choice .cname{font-weight:bold;display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.choice .cost{display:flex;margin-top:4px;}
.choice.rest{box-shadow:inset 4px 0 0 var(--lime);}
.choice.work{box-shadow:inset 4px 0 0 var(--neon2);}
.choice.rest .num{color:var(--lime);border-color:var(--lime);}
.choice.work .num{color:var(--neon2);border-color:var(--neon2);}

.nextrow{margin:0;display:flex;justify-content:center;}
.bigbtn{
  width:100%;
  background:var(--win);color:#111;font-family:inherit;font-size:15px;font-weight:bold;
  border:2px solid;border-color:var(--win-light) var(--win-darker) var(--win-darker) var(--win-light);
  padding:12px 16px;cursor:pointer;letter-spacing:1px;
  min-height:56px;touch-action:manipulation;
  transition:transform .08s ease,opacity .08s ease;
}
.bigbtn:active,.bigbtn.is-pressed{border-color:var(--win-darker) var(--win-light) var(--win-light) var(--win-darker);transform:scale(0.92);opacity:.88;}
.bigbtn.sub{font-size:12px;min-height:44px;padding:8px 16px;font-weight:normal;}

/* title */
.bootline{
  font-size:11px;color:#5f6f9c;letter-spacing:1px;flex:none;
}
.bootline .caret{
  display:inline-block;width:8px;height:12px;background:var(--neon);margin-left:4px;vertical-align:-1px;
  animation:blink 1.1s steps(2) infinite;
}
.logo{text-align:center;padding:18px 0 4px;flex:none;}
.logo h1{
  margin:0;font-size:clamp(30px, 9vw, 42px);letter-spacing:2px;color:#fff;
  text-shadow:2px 2px 0 var(--neon2),-2px -2px 0 var(--neon),0 0 22px rgba(0,240,255,.5);
}
.logo p{margin:8px 0 0;font-size:13px;color:var(--neon);letter-spacing:.5px;line-height:1.55;}
.lead{
  margin:auto 0 0;font-size:14px;line-height:1.7;color:#e8f4ff;
  background:rgba(23,26,43,.7);border-left:3px solid var(--neon2);padding:12px 12px;
  overflow:hidden;
}
.lead b{color:var(--amber);}
.rec{
  margin:0;background:rgba(5,7,15,.75);border:1px solid #2c3a63;padding:8px 10px;font-size:12px;line-height:1.55;color:#9fb2e0;
  flex:none;
}
.rec b{color:var(--amber);}
.center{text-align:center;}
.hint{margin:0;font-size:10px;color:#5f6f9c;text-align:center;line-height:1.4;flex:none;}

/* result */
.rank{
  display:flex;align-items:center;justify-content:center;gap:10px;
  text-align:left;margin:0;flex:none;
}
.rank .rk{font-size:52px;font-weight:bold;line-height:1;text-shadow:0 0 26px currentColor;}
.rank .rt{font-size:13px;margin-top:2px;letter-spacing:1px;}
.rk.S{color:#ffe14d;} .rk.A{color:var(--lime);} .rk.B{color:var(--neon);}
.rk.C{color:var(--amber);} .rk.D{color:var(--red);}
.scorelist{display:grid;gap:4px;margin:0;flex:none;}
.srow{display:flex;align-items:center;gap:6px;font-size:11px;}
.srow .sl{width:56px;color:#9fb2e0;flex:none;}
.srow .sv{width:32px;text-align:right;font-weight:bold;flex:none;}
.total{
  margin:0;text-align:center;background:#05070f;border:2px solid var(--neon);padding:6px 8px;flex:none;
}
.total .tl{font-size:10px;color:#8fa3d4;letter-spacing:2px;}
.total .tv{font-size:32px;font-weight:bold;color:var(--neon);line-height:1.05;text-shadow:0 0 16px rgba(0,240,255,.7);}
.total .note{color:#7fff4d;font-size:10px;}
.total .new{color:#ffe14d;font-size:11px;margin-top:2px;}
.comment{
  margin:0;font-size:13px;line-height:1.55;color:#e8f4ff;
  background:rgba(23,26,43,.7);border-left:3px solid var(--amber);padding:10px 12px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  flex:1;min-height:0;
}

.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;
  padding:calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l));
  z-index:500;
}
.modal[hidden]{display:none;}
.modal .win{max-width:420px;width:100%;height:auto;max-height:100%;}
.modal .screen{
  flex:none;
  font-size:12px;line-height:1.55;color:#cfe4ff;
  overflow:hidden;
}
.modal h3{margin:0 0 6px;color:var(--neon);font-size:13px;}
.help-grid{display:grid;gap:6px;}
.help-row{background:var(--panel2);border:1px solid #2c3a63;padding:6px 8px;}
.help-row b{display:block;margin-bottom:2px;}

img{max-width:100%;height:auto;}
img.cic,img.evimg,img.rankimg{display:block;-webkit-user-drag:none;}
.cic{
  width:28px;height:28px;flex:none;
  image-rendering:pixelated;image-rendering:crisp-edges;
}
.evhead{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px;flex:none;}
.evhead .evtitle{flex:1;margin-bottom:0;}
.evimg{
  width:40px;height:40px;flex:none;
  image-rendering:pixelated;image-rendering:crisp-edges;
}
.rankimg{
  width:56px;height:56px;flex:none;
  border:2px solid;border-color:#404040 #fff #fff #404040;
  image-rendering:auto;
}
.rank .rkcol{min-width:0;}

@media(max-height:640px){
  .screen{padding:8px;}
  .view,.view-body,.view-actions{gap:6px;}
  .logo{padding:8px 0 0;}
  .logo h1{font-size:26px;}
  .lead{font-size:12px;padding:8px;}
  .clock{font-size:26px;}
  .place{font-size:12px;}
  .evtext{font-size:13px;line-height:1.5;-webkit-line-clamp:4;}
  .msgbox.is-result .evtext{font-size:14px;-webkit-line-clamp:5;}
  .rank .rk{font-size:42px;}
  .rankimg{width:48px;height:48px;}
  .total .tv{font-size:26px;}
  .choice{min-height:52px;padding:6px 8px;}
  .choice .cname{font-size:14px;}
  .evimg{width:32px;height:32px;}
  .cic{width:24px;height:24px;}
}
@media(max-width:360px){
  .titlebar .tname{max-width:42%;}
  .clock{font-size:28px;}
}

/* Stick Figure Animations (Phase 1) */
.stick-animation{
  text-align:center;
  font-family:inherit;
  margin:0 0 8px;
  min-height:60px;
  color:var(--neon);
  font-size:16px;
  line-height:1.4;
  overflow:hidden;
  flex:none;
}
.stick-animation[hidden]{display:none;}
.stick{
  margin:0;
  white-space:pre;
  display:inline-block;
  color:var(--neon);
  text-shadow:0 0 8px rgba(0,240,255,.45);
  animation-duration:.8s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:1;
  animation-fill-mode:both;
}
.anim-typing{animation-name:typing-hands;}
@keyframes typing-hands{
  0%{opacity:1;}
  20%{opacity:1;transform:scaleX(.95);}
  50%{opacity:1;transform:scaleX(1.05);}
  80%{opacity:1;transform:scaleX(.95);}
  100%{opacity:1;}
}
.anim-typing-heavy{animation-name:typing-heavy;}
@keyframes typing-heavy{
  0%{opacity:1;transform:translateY(0);}
  15%{transform:translateY(-3px);}
  30%{transform:translateY(0);}
  45%{transform:translateY(-3px);}
  60%{transform:translateY(0);}
  75%{transform:translateY(-3px);}
  100%{transform:translateY(0);}
}
.anim-thinking{animation-name:thinking-pulse;}
@keyframes thinking-pulse{
  0%{opacity:.7;}
  50%{opacity:1;}
  100%{opacity:.7;}
}
.anim-checking{animation-name:checking-marks;}
@keyframes checking-marks{
  0%{opacity:0;transform:scale(.8);}
  25%{opacity:1;transform:scale(1);}
  50%{opacity:1;transform:scale(1);}
  75%{opacity:.5;transform:scale(.9);}
  100%{opacity:0;}
}
.anim-talking{animation-name:talking-wave;}
@keyframes talking-wave{
  0%{transform:scale(1);}
  50%{transform:scale(1.1);}
  100%{transform:scale(1);}
}
@media (prefers-reduced-motion: reduce){
  .stick{animation:none !important;}
}