/* Base: colour tokens, header, layout, sidebar controls, Mines grid, win popup, footer, stats, modals, login lock, notices, game nav */
:root{
  --bg:#1a2c38;
  --bg-dark:#0f212e;
  --panel:#213743;
  --tile:#2f4553;
  --tile-hover:#557086;
  --tile-shadow:#213743;
  --revealed:#071824;
  --text:#ffffff;
  --muted:#b1bad3;
  --green:#00e701;
  --green-hover:#1fff20;
  --blue:#1475e1;
  --blue-hover:#1a86ff;
  --red:#ed4163;
  --purple:#9000ff;
  --purple-shadow:#6a00bd;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,sans-serif;font-size:14px;
  -webkit-font-smoothing:antialiased;user-select:none;
}
button{font-family:inherit;cursor:pointer;border:none;color:inherit}
button:disabled{cursor:not-allowed}
input,select{font-family:inherit}

/* ---------- Header ---------- */
header{
  height:64px;background:var(--panel);display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;box-shadow:0 4px 8px rgba(0,0,0,.2);position:relative;z-index:5;gap:12px;
}
.logo{font-weight:800;font-size:22px;letter-spacing:-.5px;font-style:italic;display:flex;align-items:center;gap:8px}
.logo small{font-style:normal;font-weight:600;font-size:11px;color:var(--muted);background:var(--bg-dark);padding:3px 8px;border-radius:99px;letter-spacing:0}
.wallet{display:flex;align-items:stretch;border-radius:6px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.wallet .amt{background:var(--bg-dark);padding:0 14px;display:flex;align-items:center;gap:8px;font-weight:700;font-variant-numeric:tabular-nums;min-width:140px;justify-content:space-between}
.wallet button{background:var(--blue);padding:12px 16px;font-weight:600}
.wallet button:hover{background:var(--blue-hover)}
.session{color:var(--muted);font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.coin{width:16px;height:16px;flex:none}

/* ---------- Layout ---------- */
main{max-width:1200px;margin:32px auto;padding:0 16px}
.game{
  display:flex;border-radius:8px;overflow:hidden;background:var(--panel);
  box-shadow:0 4px 12px rgba(0,0,0,.25);min-height:600px;
}
.sidebar{width:340px;flex:none;padding:12px;display:flex;flex-direction:column;gap:12px;background:var(--panel)}
.stage{flex:1;background:var(--bg-dark);display:flex;align-items:center;justify-content:center;padding:24px;position:relative;min-width:0}

/* ---------- Sidebar controls ---------- */
.tabs{display:flex;background:var(--bg-dark);border-radius:99px;padding:5px;gap:4px}
.tabs button{flex:1;padding:10px;border-radius:99px;background:transparent;font-weight:600;transition:background .15s}
.tabs button.on{background:var(--tile)}
.tabs button:not(.on):hover{background:rgba(47,69,83,.5)}
.tabs button:disabled{opacity:.5}
.field{display:flex;flex-direction:column;gap:4px}
.label{display:flex;justify-content:space-between;color:var(--muted);font-weight:600;font-size:13px}
.label span:last-child{font-variant-numeric:tabular-nums}
.inputwrap{display:flex;background:var(--tile);border-radius:4px;padding:2px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.inp{
  flex:1;display:flex;align-items:center;background:var(--bg-dark);border:2px solid var(--tile);border-radius:4px;
  padding:0 8px;min-width:0;transition:border-color .15s;
}
.inp:hover{border-color:var(--tile-hover)}
.inp:focus-within{border-color:var(--tile-hover)}
.inp input,.inp select{
  flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);
  font-weight:600;font-size:14px;padding:9px 0;font-variant-numeric:tabular-nums;
}
.inp select{appearance:none;cursor:pointer}
.inp select option{background:var(--bg-dark)}
.inp .suffix{color:var(--muted);font-weight:600}
.inp.solo{border-radius:4px}
.inputwrap .btn-s{background:transparent;padding:0 14px;font-weight:600;border-radius:4px}
.inputwrap .btn-s:hover:not(:disabled){background:var(--tile-hover)}
.inputwrap .sep{width:2px;background:var(--bg-dark);margin:8px 0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chev{width:12px;height:12px;color:var(--muted);flex:none}
.disabled-look{opacity:.5;pointer-events:none}

.bigbtn{
  background:var(--green);color:#05080a;font-weight:700;font-size:15px;padding:16px;border-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,.2);transition:background .15s, transform .05s;
}
.bigbtn:hover:not(:disabled){background:var(--green-hover)}
.bigbtn:active:not(:disabled){transform:scale(.98)}
.bigbtn:disabled{opacity:.5}
.ghostbtn{background:var(--tile);font-weight:600;padding:12px;border-radius:4px;transition:background .15s}
.ghostbtn:hover:not(:disabled){background:var(--tile-hover)}
.ghostbtn:disabled{opacity:.5}
.seg{display:flex;background:var(--tile);border-radius:4px;padding:2px;gap:2px}
.seg button{background:transparent;padding:8px 10px;border-radius:3px;font-weight:600;font-size:13px}
.seg button.on{background:var(--bg-dark)}
.seg .inp{border-width:2px}
.hidden{display:none!important}
.hint{color:var(--muted);font-size:12px;line-height:1.5}

/* ---------- Grid ---------- */
.board-wrap{width:100%;max-width:600px;position:relative}
.board{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;width:100%}
.board.shake{animation:shake .45s}
@keyframes shake{
  10%,90%{transform:translate(-2px,1px)}
  20%,80%{transform:translate(4px,-2px)}
  30%,50%,70%{transform:translate(-6px,2px)}
  40%,60%{transform:translate(6px,-1px)}
}
.tile{
  aspect-ratio:1;background:var(--tile);border-radius:8px;box-shadow:0 5px 0 var(--tile-shadow);
  position:relative;display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.board.live .tile:not(.revealed):hover,
.board.pick .tile:not(.revealed):hover{background:var(--tile-hover);transform:translateY(-3px);box-shadow:0 8px 0 var(--tile-shadow)}
.board.live .tile:not(.revealed):active{transform:translateY(1px);box-shadow:0 3px 0 var(--tile-shadow)}
.board:not(.live):not(.pick) .tile{cursor:default}
.tile.pending{animation:pending .22s ease-in-out}
@keyframes pending{0%{transform:scale(1)}50%{transform:scale(.88);background:var(--tile-hover)}100%{transform:scale(1)}}
.tile.revealed{background:var(--revealed);box-shadow:none;transform:none;cursor:default}
.tile.selected{background:var(--purple);box-shadow:0 5px 0 var(--purple-shadow)}
.board.pick .tile.selected:hover{background:#a42bff;box-shadow:0 8px 0 var(--purple-shadow)}
.tile.selected.revealed{box-shadow:inset 0 0 0 3px var(--purple)}
.tile svg.icon{width:72%;height:72%;animation:pop .38s cubic-bezier(.34,1.7,.5,1)}
.tile.dim svg.icon{width:56%;height:56%;opacity:.4;animation:fadein .3s ease}
@keyframes pop{0%{transform:scale(.2);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes fadein{from{opacity:0}to{opacity:.4}}
.tile .boom{position:absolute;inset:-10%;pointer-events:none;animation:boom .6s ease-out forwards}
@keyframes boom{0%{transform:scale(.3);opacity:1}70%{opacity:.9}100%{transform:scale(1.35);opacity:0}}
.tile.gem-flash::after{
  content:"";position:absolute;inset:0;border-radius:8px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(0,231,1,.6);animation:ring .5s ease-out forwards;
}
@keyframes ring{to{box-shadow:0 0 0 14px rgba(0,231,1,0)}}

/* ---------- Win popup ---------- */
.popup{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;
  background:var(--bg);border:4px solid var(--green);border-radius:8px;padding:18px 28px;min-width:170px;
  text-align:center;box-shadow:0 0 30px rgba(0,0,0,.6);pointer-events:none;z-index:3;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}
.popup.show{transform:translate(-50%,-50%) scale(1);opacity:1}
.popup .mult{color:var(--green);font-size:30px;font-weight:800;font-variant-numeric:tabular-nums}
.popup hr{border:none;height:3px;background:var(--tile);margin:10px auto;width:40%;border-radius:2px}
.popup.partial{border-color:var(--muted)}
.popup.partial .mult,.popup.partial .won{color:var(--muted)}
.popup .won{color:var(--green);font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px;font-variant-numeric:tabular-nums}

/* ---------- Footer bar ---------- */
.footbar{display:flex;align-items:center;justify-content:space-between;background:var(--panel);border-top:2px solid var(--bg-dark);padding:8px 12px;border-radius:0 0 8px 8px;margin-top:-4px}
.footbar .icons{display:flex;gap:4px}
.iconbtn{background:transparent;padding:8px;border-radius:4px;color:var(--muted);display:flex;align-items:center;gap:6px;font-weight:600;font-size:13px}
.iconbtn:hover{color:var(--text);background:var(--tile)}
.iconbtn.on{color:var(--text)}
.iconbtn svg{width:18px;height:18px}
.brand{color:var(--muted);font-weight:700;font-size:13px}

/* ---------- Live stats ---------- */
.stats{
  position:fixed;right:24px;bottom:24px;width:320px;background:var(--panel);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);z-index:20;overflow:hidden;
}
.stats .head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:var(--bg);cursor:move;font-weight:700}
.stats .body{padding:12px;display:flex;flex-direction:column;gap:10px}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--bg-dark);padding:12px;border-radius:6px}
.statgrid div{display:flex;flex-direction:column;gap:2px}
.statgrid small{color:var(--muted);font-weight:600;font-size:12px}
.statgrid b{font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:5px}
.pos{color:var(--green)} .neg{color:var(--red)}
canvas#chart{width:100%;height:150px;background:var(--bg-dark);border-radius:6px;display:block}
.truth{background:var(--bg-dark);border-left:3px solid var(--blue);padding:10px;border-radius:4px;font-size:12px;color:var(--muted);line-height:1.5}
.truth b{color:var(--text)}

/* ---------- Modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal{background:var(--panel);border-radius:8px;padding:24px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:14px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.modal h3{font-size:18px}
.modal p{color:var(--muted);line-height:1.55}
.modal .row2 button{padding:12px}
/* Locked (signed out, or a new password pending): nothing but the login card on a plain grey page */
html.locked,html.locked body{background:#2b2f35}
html.locked body > *{display:none!important}
html.locked body > #joinModal:not(.hidden),html.locked body > #passModal:not(.hidden){display:flex!important;background:transparent}
.auth-logo{display:none;font-weight:800;font-size:24px;font-style:italic;letter-spacing:-.5px;text-align:center;margin-bottom:2px}
html.locked .auth-logo{display:block}
.auth-form{display:flex;flex-direction:column;gap:10px}
.auth-form .inp.solo{background:var(--bg-dark)}
.auth-form .hint:empty{display:none}

/* ---------- Notices ---------- */
.disclaimer{
  display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center;
  margin-top:12px;padding:12px 14px;border-radius:8px;background:var(--bg-dark);border-left:3px solid #f5a524;
  color:var(--muted);font-size:12px;line-height:1.5;
}
.disclaimer .links{display:flex;gap:8px;flex-wrap:wrap}
.disclaimer button{background:var(--tile);padding:7px 12px;border-radius:4px;font-weight:600;font-size:12px}
.disclaimer button:hover{background:var(--tile-hover)}
.gate-modal,.info-modal{max-width:560px;max-height:calc(100vh - 32px);overflow-y:auto}
.gate-modal{border-top:4px solid #f5a524}
.notice-list{display:flex;flex-direction:column;gap:8px;padding-left:18px;color:var(--muted);line-height:1.5}
.notice-list b{color:var(--text)}
.check{display:flex;gap:10px;align-items:center;font-weight:600;cursor:pointer;background:var(--bg-dark);padding:12px;border-radius:6px}
.check input{width:18px;height:18px;accent-color:var(--green);flex:none}
.modal-head{display:flex;justify-content:space-between;align-items:center}
.info-modal h4{font-size:14px;margin-top:4px}
.odds{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.odds th,.odds td{text-align:left;padding:8px;border-bottom:1px solid var(--tile)}
.odds th{color:var(--muted);font-weight:600;font-size:12px}
.help-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.help-list li{background:var(--bg-dark);padding:12px;border-radius:6px;display:flex;flex-direction:column;gap:4px}
.help-list span{color:var(--muted);line-height:1.5}
.info-modal a,.help-list a{color:#4fa3ff}
.bye{text-align:center;align-items:center}
.rank-sum{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rank-sum div{background:var(--bg-dark);border-radius:6px;padding:12px;display:flex;flex-direction:column;gap:4px}
.rank-sum .big{font-size:22px;font-weight:800}
.rank-sum span{color:var(--muted);font-size:12px;line-height:1.4}
.rank-scroll{overflow-x:auto}
.rank td:nth-child(n+3),.rank th:nth-child(n+3){text-align:right;white-space:nowrap}
.rank tr.house td{background:rgba(245,165,36,.08);font-weight:700}
.rank tr.me td{background:rgba(20,117,225,.15)}
.rank small{color:var(--muted)}
.pos{color:var(--green)} .neg{color:var(--red)}
@media (max-width:600px){ .rank-sum{grid-template-columns:1fr} }

.toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:var(--red);padding:10px 18px;border-radius:6px;font-weight:600;z-index:60;box-shadow:0 4px 12px rgba(0,0,0,.4);animation:fadein2 .2s}
@keyframes fadein2{from{opacity:0;transform:translate(-50%,-8px)}}

/* ---------- Game nav ---------- */
.hleft{display:flex;align-items:center;gap:16px;min-width:0}
.nav{display:flex;gap:4px;background:var(--bg-dark);padding:4px;border-radius:99px}
.nav button{background:transparent;padding:8px 16px;border-radius:99px;font-weight:600;color:var(--muted);transition:background .15s,color .15s}
.nav button.on{background:var(--tile);color:var(--text)}
.nav button:not(.on):hover:not(:disabled){color:var(--text)}
.nav button:disabled{opacity:.4}
.wallet .rs{display:none}
.rankbtn{display:flex;align-items:center;gap:6px;flex:none;background:var(--bg-dark);color:#f5a524;padding:8px 14px;border-radius:99px;font-weight:700;transition:background .15s}
.rankbtn:hover{background:var(--tile)}
.rankbtn svg{width:18px;height:18px}
@media (max-width:1100px){ .logo small{display:none} }
@media (max-width:900px){ .rankbtn{padding:8px 10px} .rankbtn span{display:none} .hleft{gap:10px} }