/* style.css -- Probe & Quarterly. Ukiyo-e woodblock UI. */
:root{
  --paper:#efe6d3; --paper-2:#e6d9bd; --ink:#1c1814; --ink-soft:#4a3f30;
  --vermillion:#c8412c; --vermillion-d:#9a2f1f; --indigo:#27406b; --indigo-d:#1a2e4e;
  --gold:#c8a44a; --gold-d:#9a7a30; --matcha:#6f8f3a; --sakura:#e79bb0;
  --shade:rgba(28,24,20,.16);
  --f-body:"Shippori Mincho B1","Noto Serif JP","Hiragino Mincho ProN",serif;
  --f-display:"Yuji Syuku","Shippori Mincho B1",serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#15110c;}
body{font-family:var(--f-body);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
#app{position:fixed;inset:0;overflow:hidden;}
#stage{position:absolute;inset:0;display:block;touch-action:none;cursor:pointer;}

/* ---------- fullscreen + icon buttons ---------- */
#sg-fs-btn,#mute-btn,.icon-btn{
  position:fixed;top:8px;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;border:0;border-radius:6px;
  background:rgba(28,24,20,.5);color:#f4ecda;cursor:pointer;z-index:60;
  transition:background .15s,transform .1s;
}
#sg-fs-btn{right:8px}
#mute-btn{right:40px}
#menu-btn{right:72px}
#sg-fs-btn:hover,#mute-btn:hover,.icon-btn:hover{background:rgba(28,24,20,.78)}
.icon-btn:active{transform:scale(.92)}
#mute-btn.muted .wave{display:none}
#mute-btn.muted::after{content:"";position:absolute;width:14px;height:2px;background:currentColor;transform:rotate(-45deg);}

/* ---------- top HUD ---------- */
#hud{
  position:absolute;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  padding:6px 96px 10px 10px;pointer-events:none;
  font-family:var(--f-body);
}
.hud-group{display:flex;align-items:center;gap:6px}
.hud-group.resources{flex-wrap:wrap;max-width:46%}
.res{
  display:flex;align-items:center;gap:5px;padding:3px 8px 3px 4px;
  background:linear-gradient(180deg,rgba(247,238,214,.96),rgba(231,217,184,.96));
  border:1.6px solid var(--ink);border-radius:8px;
  box-shadow:0 2px 0 rgba(28,24,20,.18);font-weight:700;font-size:14px;min-width:46px;
}
.res .badge{
  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:var(--ink);color:var(--gold);font-size:12px;line-height:1;
  border:1px solid var(--ink);
}
.res[data-r="coin"] .badge{background:var(--gold);color:var(--ink)}
.res[data-r="wood"] .badge{background:#b98a4e;color:#fff}
.res[data-r="stone"] .badge{background:#8d8478;color:#fff}
.res[data-r="food"] .badge{background:var(--matcha);color:#fff}
.res .val{font-variant-numeric:tabular-nums}
.res .val.tick{animation:tick .25s ease}
@keyframes tick{0%{transform:translateY(-3px);color:var(--vermillion)}100%{transform:none;color:var(--ink)}}

.mood{
  display:flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;
  background:linear-gradient(180deg,rgba(247,238,214,.96),rgba(231,217,184,.96));
  border:1.6px solid var(--ink);border-radius:18px;box-shadow:0 2px 0 rgba(28,24,20,.18);
}
.mood-face{
  width:26px;height:26px;border-radius:50%;background:var(--indigo);border:1.6px solid var(--ink);
  position:relative;flex:0 0 auto;
}
.mood-face::before,.mood-face::after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:#fbfbf6;top:9px;}
.mood-face::before{left:6px}.mood-face::after{right:6px}
.mood-face .mou{position:absolute;left:50%;bottom:7px;width:10px;height:5px;transform:translateX(-50%);}
.mood-face.low{background:#6a7588}
.mood-face.high{background:#5e8aa6}
.mood .meter{width:74px;height:8px;border-radius:5px;background:rgba(28,24,20,.22);border:1px solid var(--ink);overflow:hidden}
.meter-fill{height:100%;width:50%;background:linear-gradient(90deg,#9a2f1f,var(--gold),var(--matcha));transition:width .4s ease}
.mood-val{font-weight:700;font-variant-numeric:tabular-nums;min-width:20px;text-align:right}

.hud-group.meta{flex-direction:column;align-items:flex-end;gap:4px}
.clock{font-size:13px;font-weight:700;background:rgba(247,238,214,.9);border:1.6px solid var(--ink);border-radius:8px;padding:2px 9px;box-shadow:0 2px 0 rgba(28,24,20,.18)}
.clock .kanji{color:var(--vermillion);font-family:var(--f-display);font-size:16px;margin-right:3px}
.rank{display:flex;align-items:center;gap:6px;background:rgba(247,238,214,.9);border:1.6px solid var(--ink);border-radius:8px;padding:2px 8px;box-shadow:0 2px 0 rgba(28,24,20,.18)}
.rank-kanji{font-family:var(--f-display);color:var(--vermillion);font-size:18px;line-height:1}
.rank-name{font-weight:700;font-size:12px}
.rank-bar{width:70px;height:7px;border-radius:4px;background:rgba(28,24,20,.22);border:1px solid var(--ink);overflow:hidden}
.rank-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--vermillion));transition:width .5s ease}

/* ---------- bottom build bar ---------- */
#buildbar{
  position:absolute;left:0;right:0;bottom:0;z-index:45;
  display:flex;align-items:flex-end;justify-content:center;gap:10px;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  pointer-events:none;
}
#buildbar>*{pointer-events:auto}
.tools{
  display:flex;gap:6px;padding:6px;border-radius:12px;overflow-x:auto;max-width:64vw;
  background:linear-gradient(180deg,rgba(40,32,22,.92),rgba(28,22,14,.94));
  border:1.6px solid #0c0906;box-shadow:0 -2px 0 rgba(0,0,0,.3),inset 0 1px 0 rgba(255,240,210,.08);
}
.tool{
  flex:0 0 auto;width:58px;height:58px;border-radius:9px;position:relative;cursor:pointer;
  background:linear-gradient(180deg,#efe6d3,#dcc9a4);border:1.6px solid var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-family:var(--f-body);color:var(--ink);transition:transform .1s,box-shadow .15s;
}
.tool .t-kanji{font-family:var(--f-display);font-size:22px;line-height:1;color:var(--vermillion)}
.tool .t-name{font-size:8.5px;font-weight:700;text-align:center;line-height:1;padding:0 1px}
.tool .t-cost{position:absolute;top:-6px;right:-4px;background:var(--ink);color:var(--gold);font-size:9px;font-weight:700;border-radius:8px;padding:0 4px;border:1px solid var(--gold-d)}
.tool .hot{position:absolute;top:1px;left:3px;font-size:8px;color:var(--ink-soft);font-weight:700}
.tool:hover{transform:translateY(-3px);box-shadow:0 4px 0 rgba(0,0,0,.3)}
.tool.selected{outline:3px solid var(--gold);outline-offset:1px;transform:translateY(-3px)}
.tool.disabled{filter:grayscale(.6);opacity:.55}
.tool.demolish{background:linear-gradient(180deg,#e0c3a8,#b98a4e)}
.tool.demolish .t-kanji{color:var(--ink)}
.ctrls{display:flex;align-items:center;gap:6px}
.ctrl{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-width:50px;height:58px;padding:4px;border-radius:10px;cursor:pointer;
  background:linear-gradient(180deg,#efe6d3,#dcc9a4);border:1.6px solid var(--ink);color:var(--ink);
}
.ctrl .lbl{font-size:9px;font-weight:700}
.ctrl:hover{transform:translateY(-2px)}
#offer-btn{background:linear-gradient(180deg,#f3d3da,#d99eaf);color:var(--vermillion-d)}
.speed{display:flex;gap:3px;background:rgba(40,32,22,.92);border:1.6px solid #0c0906;border-radius:10px;padding:3px}
.speed button{
  width:34px;height:38px;border-radius:7px;border:1.2px solid var(--ink);cursor:pointer;
  background:linear-gradient(180deg,#efe6d3,#dcc9a4);font-family:var(--f-body);font-weight:700;font-size:13px;color:var(--ink);
}
.speed button.active{background:linear-gradient(180deg,var(--vermillion),var(--vermillion-d));color:#fbfbf6}

/* ---------- tooltip / toast ---------- */
#tooltip{
  position:absolute;z-index:55;pointer-events:none;max-width:200px;
  background:rgba(247,238,214,.97);border:1.6px solid var(--ink);border-radius:8px;
  padding:6px 9px;font-size:12px;line-height:1.35;box-shadow:0 3px 0 rgba(28,24,20,.18);
  transform:translate(-50%,-115%);
}
#tooltip strong{color:var(--vermillion-d)}
#tooltip .tip-cost{color:var(--ink-soft);font-weight:700;margin-top:2px;display:block}
#tooltip .tip-bad{color:var(--vermillion-d);font-weight:700}
#toast{
  position:absolute;left:50%;top:64px;transform:translateX(-50%);z-index:58;
  background:rgba(28,24,20,.92);color:#f4ecda;border:1.6px solid var(--gold);
  border-radius:10px;padding:6px 14px;font-weight:700;font-size:13px;
  box-shadow:0 3px 0 rgba(0,0,0,.3);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.hidden{display:none!important}

/* hide chrome on the title / attract screen */
body.mode-title #hud,body.mode-title #buildbar{display:none}
body.mode-title #mute-btn,body.mode-title #menu-btn{display:none}

/* ---------- overlays ---------- */
#overlay{
  position:absolute;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,rgba(28,24,20,.55),rgba(15,11,7,.82));
  padding:18px;backdrop-filter:blur(1px);
}
.scroll{
  width:min(640px,96vw);max-height:92vh;overflow:auto;position:relative;
  background:linear-gradient(180deg,var(--paper),var(--paper-2));
  border:1.6px solid var(--ink);border-radius:6px;
  box-shadow:0 10px 0 rgba(0,0,0,.28),0 0 0 8px rgba(28,24,20,.1);
  padding:26px 26px 22px;
}
.scroll::before,.scroll::after{
  content:"";position:absolute;left:0;right:0;height:14px;background:var(--ink);
  border-radius:3px;
}
.scroll::before{top:6px;box-shadow:0 0 0 2px var(--gold) inset}
.scroll::after{bottom:6px;box-shadow:0 0 0 2px var(--gold) inset}
.scroll-inner{margin:10px 0;}
.title-main{
  font-family:var(--f-display);text-align:center;color:var(--ink);font-size:clamp(34px,7vw,58px);
  line-height:1;letter-spacing:.02em;margin:6px 0 2px;
}
.title-main .amp{color:var(--vermillion);font-size:.8em;vertical-align:.06em}
.title-sub{text-align:center;color:var(--ink-soft);font-style:italic;margin:0 0 14px;font-size:14px}
.title-kanji{font-family:var(--f-display);text-align:center;color:var(--vermillion);font-size:20px;letter-spacing:.5em;margin-bottom:2px}

.menu-actions{display:flex;flex-direction:column;gap:9px;align-items:center;margin:12px 0}
.btn{
  font-family:var(--f-body);font-weight:700;font-size:15px;color:var(--ink);
  background:linear-gradient(180deg,#efe6d3,#dcc9a4);border:1.8px solid var(--ink);border-radius:10px;
  padding:10px 22px;cursor:pointer;min-width:220px;text-align:center;transition:transform .1s,box-shadow .15s,background .15s;
  box-shadow:0 3px 0 rgba(28,24,20,.22);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(28,24,20,.22)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(28,24,20,.22)}
.btn.primary{background:linear-gradient(180deg,var(--vermillion),var(--vermillion-d));color:#fbfbf6;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.btn.ghost{background:transparent;box-shadow:none;border-color:var(--ink-soft);color:var(--ink-soft)}
.btn.ghost:hover{color:var(--ink)}

.panel-title{font-family:var(--f-display);font-size:30px;color:var(--vermillion-d);text-align:center;margin:0 0 4px}
.panel-sub{text-align:center;color:var(--ink-soft);margin:0 0 14px;font-size:13px}

.howto{font-size:14px;line-height:1.6}
.howto h3{font-family:var(--f-display);color:var(--vermillion-d);margin:14px 0 4px;font-size:18px}
.howto ul{margin:4px 0;padding-left:20px}
.howto li{margin:3px 0}
.howto .k{display:inline-block;min-width:18px;text-align:center;background:var(--ink);color:var(--gold);border-radius:4px;padding:0 4px;font-weight:700;font-size:12px}
.beast-note{background:rgba(28,24,20,.06);border-left:4px solid var(--vermillion);padding:8px 12px;border-radius:0 8px 8px 0;margin:10px 0;font-size:13.5px}

.report{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;font-size:14px;margin:8px 0}
.report .r{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(28,24,20,.3);padding:3px 0}
.report .r b{font-variant-numeric:tabular-nums}
.report .r.up b{color:var(--matcha)}
.report .r.down b{color:var(--vermillion-d)}
.report .stamp{
  grid-column:1/-1;display:flex;justify-content:center;margin:6px 0;
}
.stamp-seal{
  font-family:var(--f-display);color:#fbfbf6;background:var(--vermillion);border:2px solid var(--vermillion-d);
  padding:8px 14px;border-radius:6px;font-size:16px;transform:rotate(-6deg);box-shadow:0 2px 0 rgba(0,0,0,.2);
  animation:stamp .4s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes stamp{0%{transform:rotate(-6deg) scale(2.4);opacity:0}60%{opacity:1}100%{transform:rotate(-6deg) scale(1);opacity:1}}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;font-size:14px}
.stats .s{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(28,24,20,.3);padding:4px 0}
.stats .s b{color:var(--vermillion-d);font-variant-numeric:tabular-nums}

.settings{display:flex;flex-direction:column;gap:12px;font-size:14px;max-width:420px;margin:0 auto}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.set-row label{font-weight:700}
.set-row input[type=range]{flex:1;accent-color:var(--vermillion)}
.set-row .val{font-variant-numeric:tabular-nums;color:var(--ink-soft);min-width:34px;text-align:right}

.overlay-foot{display:flex;justify-content:center;gap:8px;margin-top:16px;flex-wrap:wrap}

/* title screen flourish */
.title-decor{display:flex;justify-content:center;gap:14px;margin:6px 0 10px;font-family:var(--f-display);color:var(--ink-soft);font-size:13px}
.title-decor span{padding:2px 8px;border:1px solid var(--ink-soft);border-radius:20px}
@keyframes float-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.scroll-inner.anim>*{animation:float-in .4s ease both}
.scroll-inner.anim>*:nth-child(2){animation-delay:.04s}
.scroll-inner.anim>*:nth-child(3){animation-delay:.08s}
.scroll-inner.anim>*:nth-child(4){animation-delay:.12s}

/* ---------- responsive ---------- */
@media (max-width:640px){
  #hud{padding:4px 86px 6px 4px}
  .hud-group.resources{max-width:54%}
  .res{font-size:12px;padding:2px 6px 2px 3px;min-width:40px}
  .res .badge{width:17px;height:17px;font-size:10px}
  .mood .meter{width:54px}
  .clock{font-size:11px;padding:2px 7px}
  .rank-name{display:none}.rank-bar{width:54px}
  .tool{width:50px;height:50px}
  .tool .t-kanji{font-size:19px}
  .ctrl{min-width:42px;height:50px}
  .speed button{width:30px;height:42px}
  .report,.stats{grid-template-columns:1fr}
}
@media (max-height:440px){
  #hud{padding-top:3px}
  .scroll{max-height:96vh}
}