:root{
  /* Loowit Play brand palette */
  --ink:#1A1F23; --slate:#3F5D73; --charcoal:#5E646B; --gold:#D6A94A;
  --light-slate:#E7EBEF; --off-white:#F3F1EC; --stone:#A89F94;
  --bg:#14181d; --panel:#1f262d; --panel2:#28323b; --line:#39434d;
  --text:#E7EBEF; --muted:#A89F94; --accent:#D6A94A; --accent2:#7FA8C9;
  --green:#74C69D; --red:#e07a6b;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(1200px 600px at 70% -10%,#1e2a33 0,var(--bg) 58%);
  background-color:var(--bg);color:var(--text);}
h1,h2,h3,h4{font-family:'Merriweather',Georgia,serif}
h2{margin:.2rem 0 .6rem} h3{margin:1.1rem 0 .3rem;color:var(--gold)}
.muted{color:var(--muted)} .hidden{display:none!important}
a{color:var(--accent);cursor:pointer}

header{display:flex;align-items:center;gap:1.2rem;padding:.7rem 1.2rem;
  background:rgba(20,24,42,.9);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{font-size:1.3rem;font-weight:800} .brand span{color:var(--accent)}
nav{display:flex;gap:.3rem;margin-left:.5rem}
.tab{background:none;border:none;color:var(--muted);padding:.45rem .8rem;border-radius:8px;
  cursor:pointer;font-size:.95rem}
.tab.active{background:var(--panel2);color:var(--text)}
#account{margin-left:auto;display:flex;align-items:center;gap:.6rem}
#who{color:var(--accent2);font-weight:600}

main{max-width:1080px;margin:1.3rem auto;padding:0 1rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.3rem;
  box-shadow:0 10px 30px rgba(0,0,0,.25)}
button{font-family:inherit}
.primary{background:linear-gradient(180deg,var(--accent),#3aa8e0);color:#06243a;border:none;
  font-weight:700;padding:.6rem 1rem;border-radius:10px;cursor:pointer}
.primary:disabled{opacity:.4;cursor:not-allowed}
.primary.big{font-size:1.05rem;padding:.7rem 1.4rem;width:100%;margin-top:.6rem}
.accent{background:var(--panel2);color:var(--accent);border:1px solid var(--line);
  padding:.6rem 1rem;border-radius:10px;cursor:pointer;font-weight:600}
.ghost{background:none;border:1px solid var(--line);color:var(--text);padding:.4rem .8rem;
  border-radius:8px;cursor:pointer}

/* setup */
.opp-pick{display:flex;gap:.8rem;margin:.9rem 0;flex-wrap:wrap}
.opp-card{flex:1;min-width:220px;display:flex;gap:.6rem;align-items:flex-start;background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;padding:.8rem;cursor:pointer}
.opp-card input{margin-top:.2rem;width:18px;height:18px;accent-color:var(--accent)}
.opp-card small{display:block;color:var(--muted);margin-top:.2rem}

/* board */
.board-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1.2rem}
@media(max-width:840px){.board-grid{grid-template-columns:1fr}}
.status-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.pill{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:.35rem .9rem;font-size:.9rem}
.pill b{color:var(--accent);font-size:1.05rem} .pill.total b{color:var(--gold)}

/* dice */
.dice{display:flex;gap:.7rem;justify-content:center;margin:1rem 0}
.die{width:62px;height:62px;background:#f4f6ff;border-radius:14px;position:relative;cursor:pointer;
  box-shadow:0 4px 0 #b9c0e0, inset 0 0 0 2px #fff;transition:transform .12s,box-shadow .12s;
  display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:9px}
.die .pip{width:11px;height:11px;background:#222a4a;border-radius:50%;align-self:center;justify-self:center}
.die.held{background:#cfe9ff;box-shadow:0 0 0 3px var(--accent),0 4px 0 #5b8fb0;transform:translateY(2px)}
.die.empty{background:#2a3050}
.die .hold-tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:.62rem;
  background:var(--accent);color:#06243a;padding:1px 7px;border-radius:8px;font-weight:700}
/* pip layout via data-face (pips are .pip.p1 .. .p9 in a 3x3 grid) */
.die .pip{visibility:hidden}
.die[data-face="1"] .p5{visibility:visible}
.die[data-face="2"] .p1,.die[data-face="2"] .p9{visibility:visible}
.die[data-face="3"] .p1,.die[data-face="3"] .p5,.die[data-face="3"] .p9{visibility:visible}
.die[data-face="4"] .p1,.die[data-face="4"] .p3,.die[data-face="4"] .p7,.die[data-face="4"] .p9{visibility:visible}
.die[data-face="5"] .p1,.die[data-face="5"] .p3,.die[data-face="5"] .p5,.die[data-face="5"] .p7,.die[data-face="5"] .p9{visibility:visible}
.die[data-face="6"] .p1,.die[data-face="6"] .p3,.die[data-face="6"] .p4,.die[data-face="6"] .p6,.die[data-face="6"] .p7,.die[data-face="6"] .p9{visibility:visible}

.actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;justify-content:center;margin:.4rem 0 1rem}
.hint-tip{flex-basis:100%;text-align:center;font-size:.82rem}

/* hint panel */
.hint-panel{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;margin-bottom:1rem}
.hint-row{display:flex;align-items:center;gap:.7rem;padding:.45rem 0;border-bottom:1px dashed var(--line)}
.hint-row:last-child{border-bottom:none}
.hint-badge{font-weight:700;padding:.2rem .6rem;border-radius:8px;font-size:.8rem;min-width:96px;text-align:center}
.badge-max{background:rgba(106,208,255,.18);color:var(--accent)}
.badge-win{background:rgba(182,156,255,.18);color:var(--accent2)}
.hint-text{flex:1} .hint-conf{color:var(--muted);font-size:.8rem}
.hint-disagree{margin-top:.5rem;color:var(--gold);font-size:.85rem}

/* opponents */
.opponents{display:flex;gap:.8rem;flex-wrap:wrap}
.opp{flex:1;min-width:160px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem}
.opp .name{font-weight:700} .opp.max .name{color:var(--accent)} .opp.win .name{color:var(--accent2)}
.opp .sc{font-size:1.7rem;font-weight:800;margin-top:.2rem}
.opp .lbl{color:var(--muted);font-size:.78rem}

/* scorecard */
.scorecard{padding:.4rem .2rem}
.sc-head,.sc-foot{display:flex;justify-content:space-between;padding:.5rem .9rem;color:var(--muted);font-size:.82rem}
.sc-foot{border-top:1px solid var(--line);margin-top:.3rem;color:var(--text);font-weight:800;font-size:1.05rem}
.sc-foot span:last-child{color:var(--gold)}
.sc-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem .9rem;border-radius:8px;margin:1px .3rem}
.sc-row .v{min-width:54px;text-align:right;font-variant-numeric:tabular-nums}
.sc-row.avail{cursor:pointer} .sc-row.avail:hover{background:var(--panel2)}
.sc-row.filled{color:var(--muted)} .sc-row.filled .v{color:var(--text);font-weight:700}
.sc-row .potential{color:var(--green);font-weight:700}
.sc-row.rec{box-shadow:inset 0 0 0 2px var(--accent2);background:rgba(182,156,255,.08)}
.sc-bonus{display:flex;justify-content:space-between;padding:.35rem 1rem;font-size:.82rem;color:var(--muted);
  background:var(--panel2);margin:.3rem;border-radius:8px}
.sc-bonus b{color:var(--gold)}

/* overlay/modal */
.overlay{position:fixed;inset:0;background:rgba(6,8,18,.72);display:flex;align-items:center;
  justify-content:center;z-index:20;padding:1rem}
.auth-card,.result-card{max-width:420px;width:100%}
.auth-card input{width:100%;padding:.7rem;margin:.4rem 0;background:var(--bg);border:1px solid var(--line);
  border-radius:8px;color:var(--text);font-size:1rem}
.error{color:var(--red);font-size:.88rem;margin:.3rem 0}

/* result */
.result-card{text-align:center}
.res-line{display:flex;justify-content:space-between;padding:.5rem .2rem;border-bottom:1px solid var(--line)}
.res-badge{font-weight:800;padding:.1rem .6rem;border-radius:8px}
.res-win{background:rgba(84,217,140,.2);color:var(--green)} .res-loss{background:rgba(255,107,129,.2);color:var(--red)}
.res-tie{background:rgba(255,209,102,.2);color:var(--gold)}
.big-result{font-size:2rem;font-weight:800;margin:.4rem 0}

/* prose / explainer */
.prose{line-height:1.6;max-width:760px} .prose p{color:#cfd6f5}
.agent-explainer{display:flex;gap:1rem;flex-wrap:wrap;margin:.6rem 0}
.ae{flex:1;min-width:240px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:.9rem}
.ae h4{margin:.1rem 0 .3rem} .ae.max h4{color:var(--accent)} .ae.win h4{color:var(--accent2)}

/* history */
.stats{display:flex;gap:.8rem;flex-wrap:wrap;margin:.6rem 0 1rem}
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:.6rem 1rem;text-align:center}
.stat b{display:block;font-size:1.5rem;color:var(--accent)}
.hist-row{display:flex;justify-content:space-between;align-items:center;padding:.55rem .3rem;border-bottom:1px solid var(--line)}
.hist-row .s{font-weight:800;color:var(--gold);font-size:1.1rem}
.tag{font-size:.72rem;padding:.1rem .5rem;border-radius:6px;margin-left:.3rem}

/* ============ consolidated play layout (v2) ============ */
.mode-pick{display:flex;gap:.7rem;align-items:stretch;flex-wrap:wrap;margin:.2rem 0 .4rem}
.mode-label{align-self:center;color:var(--muted);font-size:.9rem}
.mode-card{flex:1;min-width:200px;display:flex;gap:.55rem;align-items:flex-start;background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem;cursor:pointer}
.mode-card input{margin-top:.2rem;accent-color:var(--accent)}
.mode-card small{display:block;color:var(--muted);margin-top:.15rem}

.play-top{display:flex;gap:1rem;align-items:stretch;margin-bottom:1rem}
@media(max-width:860px){.play-top{flex-direction:column}}
.dicebox{flex:1.2;display:flex;flex-direction:column}
.log{flex:.85;min-width:240px;display:flex;flex-direction:column;padding:.6rem .7rem}
.log-head{font-weight:700;color:var(--muted);font-size:.85rem;margin-bottom:.3rem}
.log-list{overflow-y:auto;max-height:300px;display:flex;flex-direction:column;gap:.18rem}
.log-row{display:flex;gap:.45rem;align-items:baseline;font-size:.86rem;padding:.18rem .25rem;border-radius:6px}
.log-row .lt{color:var(--muted);font-size:.72rem;min-width:24px}
.log-row.you{background:rgba(106,208,255,.08)} .log-row.you span:last-child{color:var(--accent)}
.log-row.agent.winner span:last-child{color:var(--accent2)}
.log-row.agent.max_score span:last-child{color:#9fe3ff}
.log-row.sys{color:var(--muted);font-style:italic}

.dice-tray{background:var(--panel2);border:1px dashed var(--line);border-radius:14px;padding:.7rem;
  margin:.2rem 0;cursor:pointer;transition:border-color .15s,background .15s}
.dice-tray:hover{border-color:var(--accent);background:#26305a}
.roll-hint{text-align:center;color:var(--muted);font-size:.78rem;margin-top:.5rem}

#btn-advance{border-color:var(--accent2);color:var(--accent2)}

/* combined scorecard table */
.scorecards{padding:.3rem}
.sc-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.sc-table th,.sc-table td{padding:.42rem .6rem;text-align:right;border-bottom:1px solid var(--line)}
.sc-table th.cat,.sc-table td.cat{text-align:left;color:var(--text)}
.sc-table thead th{position:sticky;top:0;background:var(--panel);color:var(--muted);font-size:.82rem;font-weight:600}
.sc-table th.you,.sc-table td.you{color:var(--accent)}
.sc-table th.p-winner{color:var(--accent2)} .sc-table th.p-max_score{color:#9fe3ff}
.sc-table td.cat{color:var(--muted);font-size:.9rem}
.hcell.avail{cursor:pointer;border-radius:6px}
.hcell.avail:hover{background:var(--panel2);box-shadow:inset 0 0 0 2px var(--accent)}
.hcell .potential{color:var(--green);font-weight:700}
.hcell.filled{color:var(--text);font-weight:700}
.hcell.rec{box-shadow:inset 0 0 0 2px var(--accent2);background:rgba(182,156,255,.10)}
.acell{color:var(--text)} .acell.pend{color:#41496f}
.bonus-row td{color:var(--gold);font-size:.82rem;background:rgba(255,209,102,.05)}
.total-row td{font-weight:800;font-size:1.05rem;border-top:2px solid var(--line);border-bottom:none}
.total-row td.you{color:var(--gold)} .total-row .pace{color:var(--muted);font-weight:400}

/* ===================== Loowit Play brand overrides ===================== */
/* cream header band with the horizontal logo (a real brand application) */
header{background:var(--off-white);border-bottom:1px solid #ddd9cd}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:34px;display:block}
header nav .tab{color:var(--charcoal)}
header nav .tab.active{background:var(--slate);color:#fff}
header nav .tab:hover{color:var(--ink)}
#who{color:var(--slate)}
header .ghost{border-color:#cfcabb;color:var(--slate)}
header .ghost:hover{background:#e9e6db}

/* tagline strip under header */
.tagline-bar{background:var(--slate);color:var(--off-white);text-align:center;
  font-size:.8rem;padding:.45rem 1rem;letter-spacing:.2px}
.mark-dots{color:var(--gold);letter-spacing:2px;font-size:.55rem;vertical-align:middle;margin-right:.45rem}

/* gold primary button (probability gold) */
.primary{background:linear-gradient(180deg,#E2BC62,#C9962F);color:#2a200a;box-shadow:0 2px 0 #9c7522}
.primary:hover{filter:brightness(1.04)}
.accent{color:var(--gold)}
a{color:var(--gold)}
.pill b{color:var(--gold)} .pill.total b{color:var(--gold)}

/* brand wordmark accents */
.brand-essence{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.8rem}
.brand-essence span{background:var(--panel2);border:1px solid var(--line);color:var(--gold);
  padding:.22rem .7rem;border-radius:20px;font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase}

footer{display:flex;align-items:center;justify-content:center;gap:.55rem;color:var(--muted);
  padding:1.6rem;border-top:1px solid var(--line);margin-top:2.5rem;
  font-family:'Merriweather',Georgia,serif;font-size:.92rem}
.foot-mark{height:30px;opacity:.85} footer em{color:var(--gold)}

/* agent colour identity: Max-Score = slate blue, Winner = probability gold */
.badge-max{background:rgba(127,168,201,.16);color:var(--accent2)}
.badge-win{background:rgba(214,169,74,.18);color:var(--gold)}
.hint-disagree{color:var(--gold)}
.sc-table th.p-max_score{color:var(--accent2)} .sc-table th.p-winner{color:var(--gold)}
.hcell.rec{box-shadow:inset 0 0 0 2px var(--gold);background:rgba(214,169,74,.10)}
.log-row.agent.winner span:last-child{color:var(--gold)}
.log-row.agent.max_score span:last-child{color:var(--accent2)}
.log-row.you span:last-child{color:var(--light-slate)}
.log-row.you{background:rgba(127,168,201,.08)}

/* dice keep the gold "probability dot" motif via held state */
.die.held{background:#f6e6c2;box-shadow:0 0 0 3px var(--gold),0 4px 0 #b98f33;transform:translateY(2px)}
.die .hold-tag{background:var(--gold);color:#2a200a}
.dice-tray:hover{border-color:var(--gold);background:#2b343d}

/* result badges in brand tones */
.res-win{background:rgba(116,198,157,.2);color:var(--green)}
.res-tie{background:rgba(214,169,74,.2);color:var(--gold)}
.big-result{font-family:'Merriweather',serif}

/* ===================== simulation lab ===================== */
.sim-controls{display:flex;gap:.9rem;align-items:flex-end;flex-wrap:wrap;margin:1rem 0}
.sim-field{display:flex;flex-direction:column;gap:.3rem}
.sim-field.grow{flex:1;min-width:200px}
.sim-field label{color:var(--muted);font-size:.82rem}
.sim-field label b{color:var(--gold)}
.sim-field select{background:var(--bg);border:1px solid var(--line);color:var(--text);
  border-radius:8px;padding:.5rem .6rem;font-size:.95rem;min-width:180px}
.sim-field input[type=range]{accent-color:var(--gold);width:100%}
.sim-status{margin:.4rem 0}
.sim-results{margin-top:1rem}

.hh{background:var(--panel2);padding:1rem;margin-bottom:1rem}
.hh-title{font-weight:700;color:var(--muted);font-size:.85rem;margin-bottom:.6rem}
.hh-bar{display:flex;height:34px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.hh-seg{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;color:#1a1f23;min-width:0}
.hh-seg.tie{background:var(--charcoal);color:var(--off-white)}
.hh-legend{display:flex;justify-content:space-between;gap:.6rem;margin-top:.5rem;font-size:.85rem;flex-wrap:wrap}
.hh-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:.35rem;vertical-align:middle}
.hh-margin{margin-top:.5rem;font-size:.85rem}

.sim-cards{display:flex;gap:1rem;flex-wrap:wrap}
.sim-card{flex:1;min-width:240px;background:var(--panel2)}
.sim-name{font-family:'Merriweather',serif;font-weight:700;font-size:1.05rem}
.sim-mean{font-size:2.4rem;font-weight:800;line-height:1;margin:.3rem 0}
.sim-mean span{font-size:.9rem;color:var(--muted);font-weight:500;margin-left:.3rem}
.sim-stats{display:flex;gap:.7rem;flex-wrap:wrap;color:var(--muted);font-size:.82rem;margin-bottom:.6rem}
.sim-stats b{color:var(--text)}
.hist{margin-top:.4rem}
.hist-bars{display:flex;align-items:flex-end;gap:3px;height:62px}
.hbar{flex:1;border-radius:3px 3px 0 0;min-height:1px}
.hist-axis{display:flex;justify-content:space-between;color:var(--muted);font-size:.72rem;margin-top:.25rem}

/* ===================== Optimal (DP) agent ===================== */
.badge-opt{background:rgba(116,198,157,.18);color:var(--green)}
.opt-star{color:var(--green);font-weight:700;font-size:.78rem}
.match-yes{color:var(--green);font-size:.78rem}
.match-no{color:var(--gold);font-size:.78rem}
.sc-table th.p-optimal{color:var(--green)}
.opp.opt .name, .ae.opt h4{color:var(--green)}
.log-row.agent.optimal span:last-child{color:var(--green)}

/* sim lab v2: benchmark + dice + setup note */
.setup-note{font-size:.85rem;margin:.5rem 0 .2rem}
.sim-meta{font-size:.85rem;margin-bottom:.6rem}
.vs-opt{font-size:.72rem;color:var(--muted);font-weight:500;margin-left:.4rem}
.hist-bars{position:relative}
.opt-marker{position:absolute;top:-2px;bottom:0;width:2px;background:var(--green);opacity:.8}
.opt-marker::after{content:"★";position:absolute;top:-14px;left:-5px;color:var(--green);font-size:.7rem}

/* result screen polish */
.result-crown{font-size:2.6rem;line-height:1;margin:.2rem 0}
.result-sub{font-size:.85rem;margin:.2rem 0}
.opt-bar{position:relative;height:22px;background:var(--panel2);border:1px solid var(--line);
  border-radius:11px;margin:.7rem 0 .3rem;overflow:hidden}
.opt-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--slate),var(--green));border-radius:11px}
.opt-bar-label{position:relative;z-index:1;display:block;text-align:center;font-size:.78rem;line-height:22px;font-weight:700}
.res-lines{margin-top:.8rem}

/* dice roll animation */
@keyframes tumble{0%{transform:rotate(0) scale(1)}30%{transform:rotate(-12deg) scale(1.06)}
  60%{transform:rotate(10deg) scale(1.04)}100%{transform:rotate(0) scale(1)}}
.die.rolling{animation:tumble .28s ease}

/* mobile */
@media(max-width:560px){
  header{flex-wrap:wrap;gap:.5rem;padding:.5rem .7rem} .brand img{height:26px}
  nav{order:3;width:100%;justify-content:center} .tagline-bar{font-size:.7rem}
  .die{width:50px;height:50px} .sim-controls{gap:.5rem}
  .sc-table th,.sc-table td{padding:.35rem .35rem;font-size:.85rem}
}

/* ===================== box & whisker + sim v3 ===================== */
.bw-chart{margin:.4rem 0}
.bw-row{display:flex;align-items:center;gap:.5rem;margin:.35rem 0}
.bw-name{width:150px;flex:none;font-weight:600;font-size:.9rem;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-track{position:relative;flex:1;height:26px}
.bw-val{width:42px;flex:none;text-align:left;font-variant-numeric:tabular-nums;font-weight:700}
.bw-whisker{position:absolute;top:50%;height:2px;background:var(--muted);transform:translateY(-50%)}
.bw-cap{position:absolute;top:50%;width:2px;height:12px;background:var(--muted);transform:translate(-50%,-50%)}
.bw-box{position:absolute;top:50%;height:16px;border-radius:4px;transform:translateY(-50%);opacity:.85;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.bw-median{position:absolute;top:50%;width:3px;height:18px;background:#101319;transform:translate(-50%,-50%)}
.bw-mean{position:absolute;top:50%;transform:translate(-50%,-50%);color:#101319;font-size:.6rem;line-height:1}
.bw-opt{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--green);opacity:.65}
.bw-axis-row{margin-top:.2rem}
.bw-axis{height:16px} .bw-axis .ax-lo{position:absolute;left:0;color:var(--muted);font-size:.72rem}
.bw-axis .ax-hi{position:absolute;right:0;color:var(--muted);font-size:.72rem}
.bw-opt-label{position:absolute;transform:translateX(-50%);color:var(--green);font-size:.72rem;white-space:nowrap}

.place-row{display:flex;align-items:center;gap:1rem;padding:.35rem .2rem;border-bottom:1px solid var(--line)}
.place-row:last-child{border-bottom:none} .place-row .bw-name{width:160px;text-align:left}
.place-row b{color:var(--text)}

.cat-stats{margin-top:1rem}
.cat-table td.bw-cell{text-align:right} .cat-table .bw-cell b{color:var(--text)}
.cat-table .bw-cell .mm{display:block;color:var(--muted);font-size:.7rem}
.cat-table tr.sec-div td{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:1px;
  background:var(--panel2);padding:.25rem .6rem}
.cat-table th.p-max_score{color:var(--accent2)} .cat-table th.p-winner{color:var(--gold)} .cat-table th.p-optimal{color:var(--green)}

/* ===================== roll CTA + possible vs locked scores ===================== */
.roll-dice-cta{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;height:62px;
  font-size:1.15rem;font-weight:800;color:#2a200a;cursor:pointer;border:none;border-radius:12px;
  background:linear-gradient(180deg,#E2BC62,#C9962F);box-shadow:0 3px 0 #9c7522;font-family:inherit;
  animation:cta-pulse 1.6s ease-in-out infinite}
.roll-dice-cta:hover{filter:brightness(1.05)}
@keyframes cta-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}

/* possible (un-committed) score: green dashed "preview" chip — clearly tentative + clickable */
.hcell.avail{cursor:pointer}
.hcell.avail .potential{display:inline-block;min-width:30px;padding:.08rem .45rem;border:1px dashed var(--green);
  border-radius:7px;color:var(--green);font-weight:700;background:rgba(116,198,157,.10);font-variant-numeric:tabular-nums}
.hcell.avail:hover .potential{background:var(--green);color:#10130d;border-style:solid}

/* locked-in score: solid, on a recessed slab, with a tiny lock — clearly committed */
.hcell.locked{background:rgba(255,255,255,.035)}
.hcell.locked .locked-val{display:inline-block;min-width:30px;font-weight:800;color:var(--gold);
  font-variant-numeric:tabular-nums}
.hcell.locked .locked-val::after{content:"🔒";font-size:.6rem;margin-left:.25rem;opacity:.45;filter:grayscale(1)}

/* simulation progress bar */
.sim-prog{position:relative;height:26px;background:var(--panel2);border:1px solid var(--line);
  border-radius:13px;overflow:hidden;margin:.4rem 0}
.sim-prog-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--slate),var(--gold));
  border-radius:13px;transition:width .25s ease}
.sim-prog-label{position:relative;z-index:1;display:block;text-align:center;line-height:26px;
  font-size:.82rem;font-weight:700;color:var(--text)}

/* sim category summary rows */
.cat-table .sum-row td{font-weight:700;background:rgba(255,255,255,.025);border-top:1px solid var(--line)}
.cat-table .sum-row td.cat{color:var(--text)}
.cat-table .bonus-row td{color:var(--gold);font-size:.85rem} .cat-table .bonus-row td.cat{color:var(--muted)}
.cat-table .grand-row td{font-size:1.05rem;border-top:2px solid var(--line)}
.cat-table .grand{color:var(--gold)}
.accent:disabled{opacity:.4;cursor:not-allowed}

/* ===================== play styles (radar + risk) ===================== */
.styles-grid{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.6rem}
.styles-grid>.card{flex:1;min-width:320px}
.radar-card{display:flex;align-items:center;justify-content:center}
.radar{width:100%;max-width:380px;height:auto}
.rad-grid{fill:none;stroke:var(--line);stroke-width:1}
.rad-label{fill:var(--muted);font-size:11px;font-family:'Inter',sans-serif}
.rad-poly{fill-opacity:.18;stroke-width:2;stroke-linejoin:round}
.rad-leg-row{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin:.3rem 0 .2rem}
.rad-leg{font-size:.85rem;font-weight:600} .rad-leg i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:.35rem;vertical-align:middle}
.risk-table td{text-align:right} .risk-table td.cat{text-align:left;color:var(--text)}
.risk-table .rk-hint{display:block;color:var(--muted);font-size:.68rem;font-weight:400}
.risk-table th.p-max_score{color:var(--accent2)} .risk-table th.p-winner{color:var(--gold)} .risk-table th.p-optimal{color:var(--green)}
.risk-table td.gb{color:var(--gold)} .risk-table td.ga{color:var(--muted)}
.styles-note{text-align:center;margin-top:.8rem;font-size:.9rem}

/* game recap */
.recap{margin-top:1rem;text-align:left;border-top:1px solid var(--line);padding-top:.7rem}
.recap-title{font-weight:700;color:var(--muted);font-size:.85rem;margin-bottom:.5rem}
.recap-row{display:flex;gap:.6rem;align-items:flex-start;padding:.4rem 0;border-bottom:1px dashed var(--line)}
.recap-row:last-child{border-bottom:none}
.recap-icon{font-size:1.3rem;line-height:1.2} .recap-txt b{color:var(--gold);font-size:.9rem}
.recap-txt .muted{font-size:.85rem;margin-top:.1rem}
.result-card{max-width:520px;text-align:center}

/* ===================== tools / skills pills ===================== */
.tools-card{margin-top:1rem}
.tool-group{margin:.9rem 0}
.tool-group h4{margin:.2rem 0 .5rem;color:var(--accent2);font-family:'Inter',sans-serif;
  font-size:.8rem;text-transform:uppercase;letter-spacing:1.5px}
.pills{display:flex;flex-wrap:wrap;gap:.45rem}
.skill{display:inline-block;padding:.32rem .7rem;border-radius:20px;font-size:.82rem;font-weight:600;
  background:var(--panel2);border:1px solid var(--line);color:var(--text);
  transition:border-color .15s,color .15s,transform .1s}
.skill:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px)}

/* curriculum nuance list */
.prose ul.nuance{margin:.4rem 0 .8rem;padding-left:1.1rem;line-height:1.55}
.prose ul.nuance li{margin:.4rem 0;color:#cfd6f5}
.prose ul.nuance b{color:var(--text)}

/* game-over panel (in the dice tray after the game ends) */
.game-over-panel{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:.5rem 0}
.go-title{font-weight:700;color:var(--muted)}
.go-actions{display:flex;gap:.6rem}
.result-btns{display:flex;gap:.6rem;margin-top:.8rem}
.result-btns .accent,.result-btns .primary{flex:1}