/* Streakies app shell. Dusk-Cairo palette, single dark theme by choice. */
:root{
  --bg:#1e1520;
  --panel:#2b1e2d;
  --raised:#342536;
  --line:#3f2d40;
  --fg:#f7ebd9;
  --muted:#bba595;
  --sand:#e9b66b;
  --accent:#ff7d47;
  --good:#86d6bd;
  --wa:#25d366;
  --display:"Bungee","Arial Black",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg)}
body{font-family:var(--body);font-size:15px;line-height:1.5}
[hidden]{display:none!important}
.app{max-width:520px;margin:0 auto;min-height:100%;position:relative}
.screen{min-height:100%;padding-inline:16px;padding-block:calc(16px + env(safe-area-inset-top,0px)) calc(96px + env(safe-area-inset-bottom,0px))}
.logo{font-family:var(--display);font-size:20px;color:var(--sand);margin:0}
.logo span{color:var(--accent)}
h1{font-family:var(--display);font-weight:400;font-size:32px;line-height:1.1;margin:0;text-wrap:balance}
h2{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.1;margin:0}
h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:800;color:var(--muted);margin:0}
.sub{color:var(--muted);margin:0}
.fine{font-size:12px;color:var(--muted);margin:0}
button,.ghost,.wa{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,label:focus-within{outline:3px solid var(--sand);outline-offset:2px}
.primary{border:0;border-radius:14px;padding:12px 18px;background:var(--accent);color:#2a130a;font-weight:800}
.primary.big{width:100%;padding:16px;font-size:18px}
.ghost{display:inline-flex;justify-content:center;align-items:center;border:1px solid var(--line);background:transparent;color:var(--fg);border-radius:14px;padding:11px 16px;font-weight:700;text-decoration:none}
.wa{display:inline-flex;justify-content:center;align-items:center;border-radius:14px;padding:12px 16px;background:var(--wa);color:#08311a;font-weight:800;text-decoration:none}
.field{font:inherit;width:100%;background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.lbl{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* onboarding */
.onb{display:flex;flex-direction:column;gap:16px;padding-top:24px}
.facepick{display:flex;align-items:center;gap:14px;cursor:pointer;font-weight:800;position:relative}
.facepick input{position:absolute;opacity:0;width:1px;height:1px}
.facecircle{width:84px;height:84px;border-radius:50%;border:3px solid var(--accent);background:var(--panel);display:grid;place-items:center;font-size:30px;overflow:hidden;flex:none}
.facecircle img{width:100%;height:100%;object-fit:cover}

/* home */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.topr{display:flex;align-items:center;gap:10px}
.streak{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-weight:800}
.streak b{color:var(--accent);font-variant-numeric:tabular-nums}
.avatar{width:40px;height:40px;border-radius:50%;border:2px solid var(--accent);background:var(--panel);padding:0;overflow:hidden;display:grid;place-items:center;color:var(--fg)}
.avatar img{width:100%;height:100%;object-fit:cover}
.tabview{display:flex;flex-direction:column;gap:18px}
.today{background:linear-gradient(160deg,#4a2440,#2b1e2d 70%);border:1px solid var(--line);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:14px}
.todayrow{display:flex;gap:14px;align-items:center}
.bigemoji{font-size:54px;line-height:1;flex:none}
.todaytxt{min-width:0}
.todaytxt p{margin:4px 0 0;color:var(--muted)}
.todaymeta{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--sand);font-weight:700}
.block{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px}
.lb{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
.lb li{display:grid;grid-template-columns:22px 32px 1fr auto;gap:10px;align-items:center;padding:6px 8px;border-radius:10px}
.lb li.me{background:var(--raised)}
.lb .r{font-family:var(--display);color:var(--muted);font-size:13px}
.lb .s{font-weight:800;font-variant-numeric:tabular-nums}
.lb .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.av{width:32px;height:32px;border-radius:50%;background:var(--line);display:grid;place-items:center;overflow:hidden;font-size:14px;font-weight:800}
.av img{width:100%;height:100%;object-fit:cover}
.games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gcard{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:6px;text-align:left;color:var(--fg)}
.gcard .e{font-size:32px;line-height:1}
.gcard b{font-size:15px}
.gcard small{color:var(--muted);font-size:12px}
.gcard.soon{opacity:.5;cursor:default}
.tag{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:1px 8px;border:1px solid currentColor;color:var(--sand)}
.friends{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.friends li{display:flex;align-items:center;gap:12px}
.me{display:flex;flex-direction:column;gap:12px}

/* tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:4px;background:rgba(30,21,32,.95);border-top:1px solid var(--line);padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));backdrop-filter:blur(8px)}
.tabbar button{flex:1;max-width:160px;border:0;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;font-size:20px;padding:4px;border-radius:12px}
.tabbar button span{font-size:11px;font-weight:800}
.tabbar button[aria-current="page"]{color:var(--fg);background:var(--panel)}

/* player */
.player{position:fixed;inset:0;background:#000;display:flex;flex-direction:column;z-index:20}
.playerbar{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:calc(6px + env(safe-area-inset-top,0px)) 8px 6px;background:var(--bg);font-weight:800;text-align:center}
.x{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--fg);font-size:16px}
.player iframe{flex:1;border:0;width:100%;background:var(--bg)}

/* results */
.sheet{position:fixed;inset:0;background:rgba(10,6,12,.7);z-index:30;display:flex;align-items:flex-end;justify-content:center}
.sheetin{width:100%;max-width:520px;max-height:100%;overflow:auto;background:var(--panel);border-radius:24px 24px 0 0;border:1px solid var(--line);padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;animation:up .25s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheetin{animation:none}}
.resscore{display:flex;align-items:center;gap:12px}
.resscore b{font-family:var(--display);font-size:52px;line-height:1;font-variant-numeric:tabular-nums}
.badge{background:var(--sand);color:#2a130a;font-weight:800;border-radius:99px;padding:3px 10px;font-size:13px}
.resline{margin:0;color:var(--muted)}
#resCard{width:100%;max-width:300px;align-self:center;aspect-ratio:1080/1350;border-radius:14px;border:1px solid var(--line)}
.resbtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}