/* ============================================================
   BENCHMARK — The Surveyor's Path   |   style.css
   ============================================================ */

:root{
  --ink:#2a2118;
  --ink-soft:#5b4f3e;
  --parch:#f3e7c8;
  --parch-2:#e9d9b0;
  --parch-edge:#cdb888;
  --field:#1d2a22;
  --field-2:#15201a;
  --orange:#e8762a;
  --orange-d:#c75f1a;
  --teal:#2f6d5e;
  --teal-l:#3f8a78;
  --gold:#d8a64a;
  --rust:#b04a2f;
  --good:#3f8a4d;
  --bad:#c0432f;
  --ui:"Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --mono:"Consolas","SFMono-Regular",Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:var(--ui);
  background:var(--field-2);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
#app{height:100vh;width:100vw;position:relative;}

.hidden{display:none !important;}

/* ---------- screens ---------- */
.screen{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
#screen-title{
  background:
    linear-gradient(180deg, rgba(16,22,18,.30) 0%, rgba(16,22,18,.62) 52%, rgba(16,22,18,.92) 100%),
    url("assets/title.png") center 38%/cover no-repeat,
    linear-gradient(160deg,#1f2c24,#141d18);
}
#screen-customize{
  background:
    linear-gradient(180deg, rgba(16,22,18,.82), rgba(16,22,18,.93)),
    url("assets/title.png") center/cover no-repeat,
    linear-gradient(160deg,#1f2c24,#141d18);
}

/* ---------- title ---------- */
.title-wrap{text-align:center;max-width:620px;animation:rise .6s ease both;}
.stationmark{width:64px;height:64px;color:var(--orange);margin-bottom:6px;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));}
.title-badge{
  display:inline-block;font-size:11px;letter-spacing:.22em;font-weight:700;
  color:var(--gold);border:1px solid rgba(216,166,74,.5);
  padding:6px 14px;border-radius:999px;margin-bottom:18px;
}
.game-title{
  font-family:var(--serif);font-size:74px;line-height:.92;color:var(--parch);
  letter-spacing:.06em;text-shadow:0 4px 0 #0d130f,0 6px 14px rgba(0,0,0,.6);
}
.game-title .game-title-2{
  color:var(--orange);
  display:inline-block;
  text-shadow:0 4px 0 #3a1a08, 0 6px 14px rgba(0,0,0,.6);
}
.game-sub{
  font-family:var(--serif);font-style:italic;font-size:22px;color:var(--gold);
  margin-top:10px;
}
.title-tag{color:#cbd6c8;margin:22px auto 28px;line-height:1.6;font-size:15px;max-width:480px;}
.title-buttons{display:flex;gap:14px;justify-content:center;}
.title-foot{margin-top:30px;font-size:12px;color:#7d8c81;letter-spacing:.03em;}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--ui);font-size:15px;font-weight:600;
  color:var(--ink);background:var(--parch);
  border:1px solid var(--parch-edge);border-bottom-width:3px;
  padding:11px 22px;border-radius:9px;cursor:pointer;
  transition:transform .07s ease,box-shadow .15s ease,background .15s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.35);}
.btn:active{transform:translateY(1px);border-bottom-width:1px;}
.btn-primary{
  background:linear-gradient(180deg,#f0913f,var(--orange));
  color:#fff;border-color:var(--orange-d);
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.btn-primary:hover{background:linear-gradient(180deg,#f59c4a,#e06f24);}
.btn-sm{font-size:13px;padding:7px 14px;border-bottom-width:2px;}
.btn-ghost{background:transparent;color:var(--parch);border-color:rgba(243,231,200,.35);}
.btn-ghost:hover{background:rgba(243,231,200,.08);}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none;}

/* ---------- panels ---------- */
.panel{
  background:linear-gradient(180deg,var(--parch),var(--parch-2));
  border:1px solid var(--parch-edge);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.4);
  padding:28px 32px;
}
.panel h2{font-family:var(--serif);font-size:28px;color:var(--ink);margin-bottom:4px;}
.muted{color:var(--ink-soft);font-size:13px;}

/* ---------- customize ---------- */
.customize-panel{width:min(680px,94vw);animation:rise .5s ease both;}
.customize-grid{display:flex;gap:26px;margin-top:20px;align-items:flex-start;}
.cust-preview{
  background:#2a3a30;border-radius:12px;padding:10px;
  border:1px solid #1c2a22;flex:0 0 auto;
}
.cust-preview canvas{display:block;border-radius:8px;}
.cust-controls{flex:1;display:flex;flex-direction:column;gap:16px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field>span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
.field input{
  font-family:var(--ui);font-size:15px;padding:9px 12px;border-radius:8px;
  border:1px solid var(--parch-edge);background:#fbf4e1;color:var(--ink);
}
.field input:focus{outline:2px solid var(--orange);}
.swatch-row{display:flex;gap:8px;flex-wrap:wrap;}
.swatch{
  width:42px;height:42px;border-radius:9px;cursor:pointer;
  border:2px solid rgba(0,0,0,.18);position:relative;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--ink);
  transition:transform .08s ease;
}
.swatch:hover{transform:translateY(-2px);}
.swatch.sel{border-color:var(--ink);box-shadow:0 0 0 3px var(--orange);}
.swatch.locked{cursor:not-allowed;opacity:.45;}
.swatch.locked::after{
  content:"\1F512";position:absolute;font-size:14px;
}
.customize-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;}

/* ---------- HUD ---------- */
#screen-game{flex-direction:column;gap:0;padding:0;background:var(--field-2);}
#hud{
  width:100%;max-width:none;margin:0 auto;
  display:flex;align-items:center;gap:14px;
  padding:10px 22px;flex-wrap:wrap;
}
.hud-left,.hud-right{display:flex;align-items:center;gap:12px;}
.hud-right{margin-left:auto;}
.hud-mid{display:flex;flex-direction:column;line-height:1.15;}
#hudTitle{font-family:var(--serif);font-size:19px;color:var(--parch);}
.hud-area{font-size:11px;color:var(--gold);letter-spacing:.04em;}
.hud-rankwrap{text-align:right;min-width:150px;}
.hud-rank{font-size:12px;font-weight:700;color:var(--parch);letter-spacing:.03em;}
.xpbar{
  width:150px;height:9px;background:#0d130f;border-radius:6px;
  margin:3px 0 2px;overflow:hidden;border:1px solid #000;
}
#xpfill{height:100%;width:0%;
  background:linear-gradient(90deg,var(--gold),var(--orange));
  transition:width .5s ease;}
.xptext{font-size:10px;color:#9fae9f;font-family:var(--mono);}

/* ---------- stage / canvas ---------- */
#stage{
  flex:1;width:100%;display:flex;align-items:center;justify-content:center;
  padding:4px 16px 18px;
  min-height:0;                 /* allow flex child to actually use the height */
}
#game{
  /* Fill as much of the available area as possible while preserving the
     game's intrinsic 8:5 aspect ratio (960x600).
     The canvas internal resolution is 960x600 (set in the <canvas> tag),
     so this CSS just stretches it. Modern browsers do reasonable bilinear
     scaling — slight softness on a 4K monitor, but big and readable. */
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  aspect-ratio:8/5;             /* preserves 960:600 */
  background:#243029;border-radius:14px;
  border:1px solid #0c120e;
  box-shadow:0 16px 44px rgba(0,0,0,.6);
  cursor:default;
  touch-action:none;            /* prevent page scroll on canvas touch */
  image-rendering:auto;
}
/* On wide screens, also cap at a sane absolute maximum so the canvas
   doesn't get absurdly large on ultrawides. */
@media (min-aspect-ratio: 8/5){
  #game{ height:calc(100vh - 90px); width:auto; }
}
@media (max-aspect-ratio: 8/5){
  #game{ width:100%; height:auto; }
}

/* ---------- overlay ---------- */
.overlay{
  position:absolute;inset:0;z-index:50;
  display:flex;align-items:flex-start;justify-content:center;
  background:rgba(10,14,11,.78);backdrop-filter:blur(2px);
  padding:16px;
  overflow-y:auto;              /* if content > viewport, scroll the overlay */
  -webkit-overflow-scrolling:touch;
}
#overlayBox{
  width:min(1000px,96vw);       /* wider on big screens for better use of space */
  margin:auto;                  /* center vertically when content fits */
  animation:pop .22s ease both;
}

/* dialogue */
.dialogue{
  background:linear-gradient(180deg,var(--parch),var(--parch-2));
  border:1px solid var(--parch-edge);border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  padding:24px 26px;
}
.dlg-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.dlg-portrait{
  width:54px;height:54px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 38% 34%,#5a7d6a,#2f4a3b);
  border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:24px;color:var(--parch);
}
.dlg-portrait.has-img{background:#2f4a3b;overflow:hidden;}
.dlg-portrait img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
.dlg-name{font-family:var(--serif);font-size:20px;color:var(--ink);}
.dlg-role{font-size:11px;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;}
.dlg-text{
  font-family:var(--serif);font-size:18px;line-height:1.62;color:var(--ink);
  min-height:96px;
}
.dlg-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;}
.dlg-dots{display:flex;gap:6px;}
.dlg-dot{width:8px;height:8px;border-radius:50%;background:var(--parch-edge);}
.dlg-dot.on{background:var(--orange);}

/* challenge */
.challenge{
  background:linear-gradient(180deg,var(--parch),var(--parch-2));
  border:1px solid var(--parch-edge);border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);overflow:hidden;
}
.ch-top{
  background:linear-gradient(180deg,#33473a,#26352c);
  color:var(--parch);padding:14px 22px;
  display:flex;justify-content:space-between;align-items:center;
}
.ch-tag{font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--gold);}
.ch-topic{font-family:var(--serif);font-size:19px;}
.ch-diff{display:flex;gap:4px;}
.ch-pip{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2);}
.ch-pip.on{background:var(--orange);}
.ch-body{padding:20px 22px 22px;}
.ch-q{font-size:17px;line-height:1.55;color:var(--ink);margin-bottom:16px;font-weight:600;}
.choices{display:flex;flex-direction:column;gap:9px;}
.choice{
  display:flex;gap:12px;align-items:flex-start;text-align:left;
  background:#fbf4e1;border:1px solid var(--parch-edge);border-bottom-width:3px;
  border-radius:10px;padding:12px 14px;cursor:pointer;font-size:15px;color:var(--ink);
  font-family:var(--ui);transition:transform .06s ease,background .12s ease;
}
.choice:hover:not(:disabled){transform:translateX(3px);background:#fff;}
.choice:disabled{cursor:default;}
.choice .key{
  flex:0 0 auto;width:24px;height:24px;border-radius:6px;
  background:var(--teal);color:#fff;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.choice.correct{background:#dff0d8;border-color:var(--good);}
.choice.correct .key{background:var(--good);}
.choice.wrong{background:#f6dcd5;border-color:var(--bad);}
.choice.wrong .key{background:var(--bad);}
.choice.dim{opacity:.55;}
.explain{
  margin-top:16px;border-radius:10px;padding:14px 16px;
  border-left:5px solid var(--teal);background:#eef3e6;
  font-size:14px;line-height:1.6;color:var(--ink);
  animation:rise .25s ease both;
}
.explain.miss{border-left-color:var(--bad);background:#f6e7e2;}
.explain h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:5px;}
.ch-foot{display:flex;justify-content:space-between;align-items:center;
  margin-top:16px;}
.xp-pop{font-family:var(--mono);font-weight:700;color:var(--teal);font-size:14px;}

/* reward / complete card */
.reward{
  background:linear-gradient(180deg,var(--parch),var(--parch-2));
  border:1px solid var(--parch-edge);border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);padding:26px 28px;text-align:center;
}
.reward h2{font-family:var(--serif);font-size:30px;}
.reward .seal{
  width:84px;height:84px;margin:6px auto 10px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#f0a14e,var(--orange-d));
  border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-size:40px;box-shadow:0 6px 16px rgba(0,0,0,.4);
}
.reward .outro{font-family:var(--serif);font-style:italic;font-size:16px;
  line-height:1.6;color:var(--ink-soft);margin:6px auto 18px;max-width:460px;}
.reward-items{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.reward-item{
  display:flex;gap:14px;align-items:center;text-align:left;
  background:#fbf4e1;border:1px solid var(--parch-edge);
  border-radius:10px;padding:12px 14px;
}
.reward-item .ri-icon{
  flex:0 0 auto;width:46px;height:46px;border-radius:9px;
  background:var(--teal);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:24px;
}
.ri-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.ri-name{font-size:15px;font-weight:700;color:var(--ink);}
.ri-note{font-size:12px;color:var(--ink-soft);font-style:italic;}

/* notebook */
.notebook{
  background:linear-gradient(180deg,var(--parch),var(--parch-2));
  border:1px solid var(--parch-edge);border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);overflow:hidden;
}
.nb-top{display:flex;justify-content:space-between;align-items:center;
  padding:16px 22px 0;}
.nb-top h2{font-family:var(--serif);font-size:24px;}
.nb-tabs{display:flex;gap:4px;padding:12px 22px 0;flex-wrap:wrap;}
.nb-tab{
  font-size:13px;font-weight:600;padding:8px 14px;cursor:pointer;
  background:transparent;border:none;border-bottom:3px solid transparent;
  color:var(--ink-soft);font-family:var(--ui);
}
.nb-tab.on{color:var(--ink);border-bottom-color:var(--orange);}
.nb-body{padding:16px 22px 22px;min-height:240px;max-height:60vh;overflow-y:auto;}
.nb-note{
  background:#fbf4e1;border:1px solid var(--parch-edge);
  border-left:5px solid var(--gold);border-radius:8px;
  padding:12px 14px;margin-bottom:10px;
}
.nb-note h4{font-family:var(--serif);font-size:15px;margin-bottom:4px;}
.nb-note p{font-family:var(--serif);font-style:italic;font-size:14px;
  line-height:1.55;color:var(--ink-soft);}
.nb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.nb-card{
  background:#fbf4e1;border:1px solid var(--parch-edge);border-radius:10px;
  padding:14px 12px;text-align:center;
}
.nb-card.locked{opacity:.45;filter:grayscale(.6);}
.nb-card .nb-ic{font-size:30px;}
.nb-card .nb-nm{font-size:13px;font-weight:700;margin-top:6px;}
.nb-card .nb-ds{font-size:11px;color:var(--ink-soft);margin-top:3px;font-style:italic;}
.nb-progress{display:flex;flex-direction:column;gap:12px;}
.nb-stat{display:flex;justify-content:space-between;font-size:14px;
  border-bottom:1px dashed var(--parch-edge);padding-bottom:7px;}
.nb-stat b{font-family:var(--mono);}
.nb-empty{color:var(--ink-soft);font-style:italic;text-align:center;padding:30px 0;}
.nb-foot{padding:14px 22px;border-top:1px solid var(--parch-edge);
  display:flex;justify-content:flex-end;gap:10px;}

/* victory */
.victory{
  background:linear-gradient(180deg,#23332a,#16201a);
  border:1px solid #0c120e;border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.7);padding:32px;text-align:center;color:var(--parch);
}
.victory h2{font-family:var(--serif);font-size:34px;color:var(--gold);}
.victory .vtext{font-family:var(--serif);font-size:16px;line-height:1.7;
  color:#cdd8cc;margin:14px auto;max-width:480px;}
.victory .vlicense{
  border:2px solid var(--gold);border-radius:12px;padding:18px;margin:18px auto;
  max-width:420px;background:rgba(216,166,74,.08);
}
.victory .vlicense .vl-t{font-size:11px;letter-spacing:.2em;color:var(--gold);}
.victory .vlicense .vl-n{font-family:var(--serif);font-size:24px;margin-top:4px;}

/* misc bits */
.center{text-align:center;}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.tiny{font-size:12px;color:var(--ink-soft);}
.exam-prog{font-family:var(--mono);font-size:13px;color:var(--ink-soft);}

/* toast */
.toast{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);
  z-index:80;background:#26352c;color:var(--parch);
  border:1px solid var(--gold);border-radius:10px;
  padding:11px 20px;font-size:14px;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  animation:rise .3s ease both;
}

#fadeveil{position:absolute;inset:0;background:#0c120e;opacity:0;
  pointer-events:none;transition:opacity .22s ease;z-index:200;}
#btnMute{min-width:42px;}

@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes pop{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:scale(1);}}

/* responsive */
@media (max-width:720px){
  .game-title{font-size:60px;}
  .customize-grid{flex-direction:column;align-items:center;}
  .hud-rankwrap{min-width:120px;}
  .xpbar{width:110px;}
  #hudTitle{font-size:16px;}
}