/* game.css - everything outside the canvas.
   the call panel and the reveal card are DOM, not canvas, so they can look
   like proper screens and get restyled without touching game code. */

:root{
  --ink:      #06080c;
  --panel:    #12151d;
  --panel-2:  #1a1f2a;
  --edge:     #2b3240;
  --text:     #eef1f6;
  --dim:      #8d96a6;
  --accent:   #f5c542;
  --good:     #7fd39a;
  --bad:      #e8705a;
  --ui:    "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --title: Cinzel, "Times New Roman", Georgia, serif;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--ink)}
body{
  color:var(--text);font-family:var(--ui);
  display:flex;align-items:center;justify-content:center;
  -webkit-font-smoothing:antialiased;
}

/* the frame fills the window; the canvas takes the largest 1280x600 box
   that fits, so it fills the screen and never stretches. all the level
   coords stay in that grid - only the element on screen changes size. */
.stage{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}
.frame{
  position:relative;width:100vw;height:100vh;
  display:flex;align-items:center;justify-content:center;background:var(--ink);
}
canvas{
  display:block;
  width:min(100vw, calc(100vh * 1280 / 600));
  height:min(100vh, calc(100vw * 600 / 1280));
  /* the backdrops are paintings - 'pixelated' turned their soft edges into
     stair-steps, so this stays on auto */
  image-rendering:auto;
}

/* ---------- the call panel ---------- */

#panel{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(6,8,12,.82);backdrop-filter:blur(6px);
  animation:fadein .18s ease-out;
}
#panel[hidden]{display:none}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes riseup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.panelbox{
  width:min(560px, 86vw);padding:28px 30px 24px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--edge);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  animation:riseup .2s ease-out;
}
#panel h2{
  margin:0 0 4px;font-family:var(--title);font-weight:700;
  font-size:clamp(20px,2.6vw,26px);letter-spacing:.5px;
}
.sub{margin:0 0 18px;font-size:13px;color:var(--dim)}
.sub b{color:var(--accent);font-variant-numeric:tabular-nums}

#rows{list-style:none;margin:0;padding:0}
.row{
  display:flex;align-items:center;gap:12px;
  padding:11px 13px;margin-bottom:6px;
  background:#161a23;border:1px solid transparent;border-radius:10px;
  font-size:14px;font-weight:500;cursor:pointer;
  transition:background .14s,border-color .14s,transform .08s;
}
.row:hover{background:#1e2431;border-color:var(--edge)}
.row:active{transform:scale(.995)}
.row.picked{background:#232b3a;border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}

/* fundamentals this arena can't roll. shown so you can see the whole rule
   book, greyed so you can't waste a call on one. */
.row.off{opacity:.34;cursor:default;background:#101319}
.row.off:hover{background:#101319;border-color:transparent}
.off-tag{font-size:10px;letter-spacing:.4px;color:var(--dim);white-space:nowrap}
.key{
  width:22px;height:22px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--edge);border-radius:6px;background:#0f131a;
  font-size:11px;font-weight:600;color:var(--dim);
}
.chip{width:12px;height:12px;flex:0 0 auto;border-radius:4px}
.name{flex:1 1 auto}
.foot{margin:16px 0 0;font-size:12px;color:var(--dim)}
kbd{
  display:inline-block;padding:1px 6px;border:1px solid var(--edge);border-radius:5px;
  background:#0f131a;font:inherit;font-size:11px;color:var(--text);
}

/* ---------- the reveal ---------- */

#reveal{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(6,8,12,.9);backdrop-filter:blur(6px);
  animation:fadein .2s ease-out;
}
#reveal[hidden]{display:none}
.card{
  width:min(430px,88vw);border:2px solid;border-radius:18px;padding:28px 30px 24px;
  text-align:center;background:linear-gradient(180deg,var(--panel-2),var(--panel));
  box-shadow:0 24px 60px rgba(0,0,0,.6);max-height:94%;overflow:auto;
  animation:riseup .22s ease-out;
}
.verdict{font-size:11px;letter-spacing:2.6px;font-weight:700;margin-bottom:12px}
.verdict.yes{color:var(--good)}
.verdict.no{color:var(--bad)}
.rulename{
  display:inline-block;padding:9px 20px;border-radius:10px;
  font-family:var(--title);font-size:clamp(16px,2.2vw,21px);font-weight:700;
  color:#fff;margin-bottom:16px;
}
.score{font-size:clamp(42px,6vw,64px);font-weight:700;line-height:1;color:var(--accent);
  font-variant-numeric:tabular-nums}
.slabel{font-size:11px;color:var(--dim);letter-spacing:1.6px;margin-bottom:14px}
.msg{max-width:340px;margin:0 auto 12px;font-size:13px;line-height:1.5}
.hint{margin:0;font-size:12px;color:var(--dim)}
.wrongline{font-size:14px;color:var(--dim);margin-bottom:12px}
.wrongline b{color:var(--bad)}
.truthlabel{font-size:11px;letter-spacing:1.8px;color:var(--dim);margin-bottom:8px}

/* the score's working, so a total doesn't read as arbitrary */
.sums{max-width:290px;margin:0 auto 14px;font-size:12px;color:var(--dim)}
.sums div{display:flex;justify-content:space-between;padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.06)}
.sums b{color:var(--text);font-variant-numeric:tabular-nums}

.stats{display:flex;gap:24px;justify-content:center;margin:14px 0 12px;
  padding-top:14px;border-top:1px solid var(--edge);font-size:11px;color:var(--dim)}
.stats b{display:block;font-size:clamp(16px,2vw,20px);color:var(--text);font-weight:600;
  font-variant-numeric:tabular-nums}
/* the two ways out of the score card. a judge clicks; they don't read
   "press enter" first. */
.acts{display:flex;gap:10px;margin:16px 0 12px}
.btn{
  flex:1 1 0;padding:11px 12px;border-radius:10px;border:1px solid var(--edge);
  font:600 14px var(--ui);cursor:pointer;
  transition:background .14s,border-color .14s,transform .08s;
}
.btn:active{transform:scale(.985)}
.btn.ghost{background:#161a23;color:var(--text)}
.btn.ghost:hover{background:#1e2431}
.btn.go{background:#2FCAD0;border-color:#2FCAD0;color:#08202a}
.btn.go:hover{background:#43dbe1}

.runtotal{margin-top:6px;font-size:12px;color:var(--dim);letter-spacing:.3px}
.runtotal b{color:var(--accent);font-size:15px;font-variant-numeric:tabular-nums}

@media (max-width:640px){
  .panelbox{padding:20px 18px}
  .row{font-size:13px;padding:9px 11px}
}