/* Showhands — dark stage, vibrant blocks. One family of tokens for every view. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,400..800&family=Instrument+Sans:wght@400;500;600&display=swap');

:root{
  --ink:#12102A; --ink2:#1C1940; --ink3:#262254; --line:#38337A;
  --paper:#F2F0FF; --dim:#9C97C7;
  --amber:#FFC93C; --rose:#FF5D73; --mint:#3DDC97; --azure:#4EA8FF; --violet:#C77DFF; --orange:#FF8A3D;
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink); color:var(--paper); min-height:100vh;
  font-family:"Instrument Sans",system-ui,-apple-system,sans-serif; font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:"Archivo","Instrument Sans",system-ui,sans-serif;
  font-variation-settings:"wdth" 112,"wght" 800; font-weight:800;
  letter-spacing:-.02em; line-height:1.04; margin:0;
}
a{color:var(--amber)}
button{font:inherit;cursor:pointer}
input,textarea,select{font:inherit}
:focus-visible{outline:3px solid var(--azure);outline-offset:2px}

.wrap{max-width:860px;margin:0 auto;padding:28px 20px 72px}
.wrap.narrow{max-width:560px}
.wrap.wide{max-width:1200px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.muted{color:var(--dim)}
.small{font-size:13.5px}
.stack>*+*{margin-top:14px}
.hide{display:none !important}

.btn{
  background:var(--amber);color:#211B00;border:none;border-radius:var(--r);
  padding:14px 22px;font-weight:600;min-height:48px;
  transition:filter .15s ease,transform .15s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--paper);border:1.5px solid var(--line)}
.btn.ghost:hover{background:var(--ink3);filter:none}
.btn.quiet{background:var(--ink3);color:var(--paper)}
.btn.danger{background:transparent;color:var(--rose);border:1.5px solid var(--rose)}
.btn.tiny{min-height:38px;padding:8px 14px;font-size:14px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.field{
  width:100%;background:var(--ink2);border:1.5px solid var(--line);color:var(--paper);
  border-radius:var(--r);padding:13px 15px;min-height:48px;
}
.field::placeholder{color:#6F6A9E}
.field:focus{border-color:var(--azure);outline:none}
label.lbl{display:block;font-size:13.5px;color:var(--dim);margin-bottom:6px}

.card{background:var(--ink2);border:1px solid var(--line);border-radius:18px;padding:18px}
.tag{font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:99px;background:var(--ink3);color:var(--dim);white-space:nowrap}
.iconbtn{background:transparent;border:1px solid var(--line);color:var(--dim);width:40px;height:40px;border-radius:10px;display:grid;place-items:center}
.iconbtn:hover{color:var(--paper);background:var(--ink3)}
.divider{border-top:1px solid var(--line);margin:28px 0}

.mark{display:flex;align-items:center;gap:10px}
.mark .dots{display:flex;gap:4px;align-items:flex-end;height:22px}
.mark .dots i{width:9px;border-radius:3px;display:block}
.mark span{font-family:"Archivo";font-variation-settings:"wdth" 118,"wght" 800;font-size:19px}

/* results ------------------------------------------------------------- */
.bar{margin-bottom:14px}
.barlabel{display:flex;justify-content:space-between;gap:14px;margin-bottom:6px;font-size:clamp(15px,1.7vw,20px)}
.bartrack{height:clamp(26px,4.2vw,52px);background:var(--ink2);border-radius:10px;overflow:hidden}
.barfill{height:100%;width:0;border-radius:10px;transition:width .55s cubic-bezier(.22,.8,.3,1)}
.cloud{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;line-height:1.15}
.cloud span{font-family:"Archivo";font-variation-settings:"wdth" 108,"wght" 700;transition:font-size .4s ease}
.bignum{font-family:"Archivo";font-variation-settings:"wdth" 118,"wght" 800;font-size:clamp(46px,8vw,104px);line-height:1}
.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.note{background:var(--ink2);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:12px;padding:12px 14px;font-size:15px}
.empty{color:var(--dim);padding:22px 0}
.hidden-results{color:var(--dim);text-align:center;padding:40px 0}

/* live chrome --------------------------------------------------------- */
.live{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--dim)}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--mint);animation:pulse 2s infinite}
.pulse.off{background:var(--dim);animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.timer{
  font-family:"Archivo";font-variation-settings:"wdth" 112,"wght" 800;
  font-variant-numeric:tabular-nums;font-size:clamp(20px,2.6vw,32px);
}
.timer.warn{color:var(--amber)}
.timer.out{color:var(--rose)}
.timerbar{height:5px;background:var(--ink3);border-radius:99px;overflow:hidden;margin-top:8px}
.timerbar i{display:block;height:100%;background:var(--amber);border-radius:99px;transition:width 1s linear}

.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:22px;
  background:var(--paper);color:var(--ink);padding:12px 20px;border-radius:99px;
  font-weight:600;font-size:14.5px;box-shadow:0 8px 30px rgba(0,0,0,.45);z-index:60;
}
.banner{background:var(--ink3);border-radius:12px;padding:12px 15px;font-size:14.5px}
.banner.bad{background:#3A1730;border:1px solid var(--rose);color:#FFD9DE}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}