/* POSE PARTY theme — tokens, reset, page shell, header. */

:root{
  --bg:#F4F7FD;
  --card:#FFFFFF;
  --panel:#F8FAFF;
  --tint:#E9EFFB;
  --ink:#123477;          /* screenshot navy */
  --ink-soft:#49649B;
  --line:#173B78;         /* strong card borders */
  --line-soft:#B9CAED;    /* subtle panel borders */
  --blue:#3264CC;
  --blue-deep:#2858BD;
  --orange:#F45A3C;
  --orange-soft:#FA6B4E;
  --yellow:#FFD04A;
  --yellow-deep:#F7B91F;
  --green:#73C9A7;
  --purple:#725CD3;
  --red:#EB4932;
  --live:#F65338;
  --sh:0 4px 0 rgba(18,52,119,.13);
  --sh-big:0 6px 0 rgba(18,52,119,.16);
  /* radius scale — every corner in the app snaps to one of these */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:26px; --r-pill:999px;
  --f-display:'Baloo 2',system-ui,sans-serif;
  --f-lobby:'Fredoka One','Baloo 2',system-ui,sans-serif;
  --f-sign:'Beiruti','Baloo 2',system-ui,sans-serif;
  --f-body:'Baloo 2',system-ui,sans-serif;
  /* was Courier New: tracked-out display type reads as a label without
     dropping a system monospace into the middle of the paper art */
  --f-label:'Baloo 2',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(circle at 78% 12%,rgba(255,255,255,.98),transparent 31%),
    radial-gradient(circle at 18% 86%,rgba(255,255,255,.78),transparent 35%),
    var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:700;
  min-height:100vh;
}
.wrap{max-width:1680px;margin:0 auto;padding:18px 32px 26px;min-height:100vh;display:flex;flex-direction:column}
svg{display:block}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
input,select{font-family:var(--f-body)}
.hidden{display:none!important}

/* ---------- header ---------- */
header{display:flex;align-items:center;gap:22px;margin-bottom:16px;min-height:92px}

/* logo: two offset chips, pure CSS */
.logo{display:flex;gap:6px;cursor:pointer;user-select:none;flex:none}
.logo span{
  font-family:var(--f-display);font-weight:800;font-size:41px;line-height:1;
  padding:9px 18px 11px;border-radius:var(--r-md);color:#fff;border:3px solid var(--ink);
  letter-spacing:1px;
}
.logo .l1{background:var(--blue);transform:rotate(-2deg);box-shadow:-4px 5px 0 var(--yellow),0 4px 0 rgba(21,42,110,.25)}
.logo .l2{background:var(--orange);transform:rotate(1.5deg) translateY(3px);box-shadow:0 4px 0 rgba(21,42,110,.25)}

.tagline{display:flex;align-items:center;gap:12px;font-family:var(--f-label);font-weight:700;letter-spacing:1px;font-size:18px;color:var(--blue-deep);white-space:nowrap}
.tagline .dim{color:#8A97C8}
.tagline .bot{width:52px;height:52px;flex:none}

/* round-progress dots (1v1 match) */
.dots{display:flex;gap:16px;justify-content:flex-start;margin:2px 0 10px 12px}
.dots i{width:13px;height:13px;border-radius:50%;background:#C9D4F2}
.dots i.on{background:var(--orange)}
.dots i.done{background:var(--blue)}

/* header right: stat pills */
.pills{display:flex;gap:12px;margin-left:auto}
.statpill{min-width:136px;border:2.5px solid var(--ink);border-radius:var(--r-md);padding:10px 18px 11px;text-align:center;box-shadow:var(--sh);color:#fff}
.statpill .lab{font-size:12.5px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;opacity:.95}
.statpill .val{font-family:var(--f-display);font-weight:800;font-size:29px;line-height:1.05;letter-spacing:1px;display:flex;align-items:center;justify-content:center;gap:7px}
.statpill.score{background:var(--blue)}
.statpill.timer{background:var(--yellow);color:var(--ink)}
.statpill.round{background:var(--green);color:#0B4A2F}
.statpill.streak{background:var(--orange)}
.statpill .ico{width:22px;height:22px}

/* header right: icon buttons (home / party / etc.) */
.hicons{display:flex;gap:12px;margin-left:auto}
.iconbtn{width:78px;height:78px;background:var(--card);border:2.5px solid var(--blue);border-radius:var(--r-lg);box-shadow:var(--sh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--blue-deep)}
.iconbtn:hover{filter:brightness(1.04);transform:translateY(-1px)}
.iconbtn svg{width:27px;height:27px}
.iconbtn small{font-size:10px;font-weight:900;letter-spacing:.5px}

@media(max-width:1450px){
  .wrap{padding:14px 22px 20px}
  header{min-height:74px;margin-bottom:13px}
  .logo span{font-size:34px;padding:8px 16px 10px}
  .tagline{font-size:16px}
  .tagline .bot{width:44px;height:44px}
  .iconbtn{width:66px;height:66px;border-radius:var(--r-md)}
}

@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }