/* Streakies app shell. "Sticker Pop" look: cream ground, ink outlines, hard shadows, bright sticker colours. */
:root{
  --bg:#FFF6E5;
  --panel:#FFFFFF;
  --ink:#17130F;
  --line:#17130F;
  --fg:#17130F;
  --muted:#6B5D4F;
  --tomato:#FF5A36;
  --sky:#6EC8FF;
  --butter:#FFD84D;
  --mint:#7EE0B0;
  --peach:#FFB59A;
  --lilac:#C9B6FF;
  --accent:var(--tomato);
  --wa:#25d366;
  --bw:2.5px;
  --shadow:4px 4px 0 var(--ink);
  --display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{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(104px + env(safe-area-inset-bottom,0px))}
.logo{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.03em;line-height:1;color:var(--fg);margin:0}
.logo span{color:inherit}
h1{font-family:var(--display);font-weight:800;font-size:38px;line-height:1.02;letter-spacing:-.03em;margin:0;text-wrap:balance}
h2{font-family:var(--display);font-weight:800;font-size:30px;line-height:1.05;letter-spacing:-.03em;margin:0}
h3{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--fg);margin:0 0 12px}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:800;color:var(--fg);margin:0}
.sub{color:var(--muted);margin:0;font-size:16px}
.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(--sky);outline-offset:3px}
.primary{border:var(--bw) solid var(--ink);border-radius:16px;padding:12px 18px;background:var(--ink);color:var(--bg);font-weight:800;box-shadow:4px 4px 0 var(--accent);transition:transform .08s,box-shadow .08s}
.primary:active,.ghost:active,.wa:active,.gcard:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.primary.big{width:100%;padding:15px;font-family:var(--display);font-size:20px}
.ghost{display:inline-flex;justify-content:center;align-items:center;border:var(--bw) solid var(--ink);background:var(--panel);color:var(--fg);border-radius:16px;padding:11px 16px;font-weight:800;text-decoration:none;box-shadow:3px 3px 0 var(--ink)}
.wa{display:inline-flex;justify-content:center;align-items:center;border:var(--bw) solid var(--ink);border-radius:16px;padding:11px 16px;background:var(--wa);color:var(--ink);font-weight:800;text-decoration:none;box-shadow:3px 3px 0 var(--ink)}
.field{font:inherit;width:100%;background:var(--panel);color:var(--fg);border:var(--bw) solid var(--ink);border-radius:14px;padding:12px 14px}
.lbl{font-size:12px;font-weight:800;color:var(--fg);text-transform:uppercase;letter-spacing:.08em}

/* onboarding */
.onb{display:flex;flex-direction:column;gap:18px;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:88px;height:88px;border-radius:50%;border:var(--bw) solid var(--ink);box-shadow:0 0 0 5px var(--panel),0 0 0 7.5px var(--ink);margin:8px;background:var(--sky);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:18px}
.topr{display:flex;align-items:center;gap:10px}
.streak{display:inline-flex;align-items:center;gap:6px;background:var(--butter);border:var(--bw) solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:999px;padding:5px 12px;font-weight:800}
.streak b{font-variant-numeric:tabular-nums}
.avatar{width:42px;height:42px;border-radius:50%;border:var(--bw) solid var(--ink);background:var(--sky);padding:0;overflow:hidden;display:grid;place-items:center;color:var(--fg);font-weight:800}
.avatar img{width:100%;height:100%;object-fit:cover}
.tabview{display:flex;flex-direction:column;gap:22px}
.today{background:var(--bg);border:var(--bw) solid var(--ink);box-shadow:6px 6px 0 var(--ink);border-radius:26px;padding:0;display:flex;flex-direction:column;overflow:hidden}
.today .eyebrow{align-self:flex-start;margin:16px 0 0 16px;background:var(--bg);border:2px solid var(--ink);border-radius:10px;padding:5px 10px;transform:rotate(-3deg)}
.todayrow{display:flex;gap:14px;align-items:center;padding:14px 18px 18px;color:var(--ink)}
.bigemoji{font-size:44px;line-height:1;flex:none;width:76px;height:76px;border-radius:50%;background:var(--sky);border:var(--bw) solid var(--ink);display:grid;place-items:center;transform:rotate(6deg)}
.todaytxt{min-width:0}
.todaytxt h2{font-size:34px}
.todaytxt p{margin:6px 0 0;font-weight:500}
.todaymeta{display:flex;justify-content:space-between;gap:10px;font-size:14px;font-weight:700;background:var(--bg);border-top:var(--bw) solid var(--ink);padding:14px 18px 0}
.today .primary.big{width:auto;margin:12px 18px 18px;box-shadow:4px 4px 0 var(--butter)}
.todaytop{background:var(--tomato);display:flex;flex-direction:column}
.block{background:var(--panel);border:var(--bw) solid var(--ink);box-shadow:var(--shadow);border-radius:22px;padding:16px}
.lb{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;border:var(--bw) solid var(--ink);border-radius:16px;overflow:hidden}
.lb li{display:grid;grid-template-columns:22px 34px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-bottom:2px solid var(--ink)}
.lb li:last-child{border-bottom:0}
.lb li.me{background:var(--butter)}
.lb .r{font-family:var(--display);font-weight:800;font-size:16px}
.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:700}
.av{width:34px;height:34px;border-radius:50%;background:var(--mint);border:2px solid var(--ink);display:grid;place-items:center;overflow:hidden;font-size:14px;font-weight:800}
.lb li:nth-child(3n+2) .av{background:var(--sky)}
.lb li:nth-child(3n+3) .av{background:var(--peach)}
.av img{width:100%;height:100%;object-fit:cover}
.games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gcard{background:var(--sky);border:var(--bw) solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:6px;text-align:left;color:var(--ink);transition:transform .08s,box-shadow .08s}
.gcard:nth-child(4n+2){background:var(--mint)}
.gcard:nth-child(4n+3){background:var(--butter)}
.gcard:nth-child(4n+4){background:var(--lilac)}
.gcard .e{font-size:30px;line-height:1}
.gcard b{font-family:var(--display);font-weight:800;font-size:17px;line-height:1.1}
.gcard small{color:var(--ink);font-size:12px;opacity:.8}
.gcard.soon{background:var(--bg);border-style:dashed;box-shadow:none;cursor:default}
.tag{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:2px 8px;border:2px solid var(--ink);background:var(--panel);color:var(--ink)}
.friends{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px}
.friends li{display:flex;align-items:center;gap:12px;font-weight:700}
.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:6px;background:var(--panel);border-top:var(--bw) solid var(--ink);padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px))}
.tabbar button{flex:1;max-width:160px;border:var(--bw) solid transparent;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:14px}
.tabbar button svg{width:22px;height:22px}
.tabbar button span{font-size:12px;font-weight:800}
.tabbar button[aria-current="page"]{color:var(--ink);background:var(--butter);border-color:var(--ink)}

/* player */
.player{position:fixed;inset:0;background:var(--bg);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);border-bottom:var(--bw) solid var(--ink);font-family:var(--display);font-weight:800;font-size:18px;text-align:center}
.x{width:40px;height:40px;border-radius:50%;border:var(--bw) solid var(--ink);background:var(--panel);color:var(--fg);font-size:16px;font-weight:800}
.player iframe{flex:1;border:0;width:100%;background:var(--bg)}

/* results */
.sheet{position:fixed;inset:0;background:rgba(23,19,15,.55);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(--bg);border-radius:28px 28px 0 0;border:var(--bw) solid var(--ink);border-bottom:0;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}.primary,.gcard{transition:none}}
.resscore{display:flex;align-items:center;gap:12px}
.resscore b{font-family:var(--display);font-weight:800;font-size:60px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.badge{background:var(--butter);color:var(--ink);border:2px solid var(--ink);font-weight:800;border-radius:99px;padding:3px 10px;font-size:13px;transform:rotate(-4deg)}
.resline{margin:0;color:var(--muted);font-weight:500}
#resCard{width:100%;max-width:300px;align-self:center;aspect-ratio:1080/1350;border-radius:18px;border:var(--bw) solid var(--ink);box-shadow:var(--shadow)}
.resbtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px}
.savebox{display:flex;flex-direction:column;gap:10px;background:var(--butter);border:var(--bw) solid var(--ink);border-radius:18px;padding:14px;box-shadow:3px 3px 0 var(--ink)}

/* ---------- v0.3 design pass: brand, covers, onboarding ---------- */
.brand{display:flex;align-items:center;gap:10px}
.brand img{display:block;border-radius:12px;box-shadow:2px 2px 0 var(--ink)}
.onb{gap:16px;padding-top:8px}
.onb h1{font-size:40px;margin-top:2px}
.onbcovers{position:relative;height:178px;margin:6px 0 4px}
.onbcovers img{position:absolute;width:62%;aspect-ratio:320/200;border:var(--bw) solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink);background:#8FD3FF}
.onbcovers img:nth-child(1){left:0;top:22px;transform:rotate(-6deg);z-index:1}
.onbcovers img:nth-child(2){right:0;top:0;transform:rotate(5deg);z-index:2}
.onbcovers img:nth-child(3){left:22%;top:58px;transform:rotate(-1deg);z-index:3}
.facepick{background:var(--panel);border:var(--bw) solid var(--ink);border-radius:20px;padding:6px 14px 6px 4px;box-shadow:3px 3px 0 var(--ink)}
.facetext{display:flex;flex-direction:column;line-height:1.25}
.facetext b{font-family:var(--display);font-size:18px}
.facetext small{color:var(--muted);font-weight:500;font-size:13px}
.todaytop{position:relative}
.todaytop .cover{display:block;width:100%;aspect-ratio:320/200;object-fit:cover;border-bottom:var(--bw) solid var(--ink);background:#8FD3FF}
.todaytop .cover:not([hidden])~.eyebrow{position:absolute;top:0;left:0}
.todaytop .cover:not([hidden])~.todayrow{padding-top:14px}
.gcard{padding:0;overflow:hidden;gap:4px}
.gcard .gcover{display:block;width:100%;aspect-ratio:320/200;object-fit:cover;border-bottom:var(--bw) solid var(--ink)}
.gcard .e{padding:12px 12px 0}
.gcard b,.gcard small,.gcard .tag{margin-inline:12px}
.gcard small{margin-bottom:12px;display:block}
.gcard .tag{margin-bottom:12px;margin-top:-6px}
.gcard.soon .gcover{filter:saturate(.35);opacity:.8}

/* ---------- v0.4: username, selfie of the day, streak calendar ---------- */
.userfield{display:flex;align-items:center;background:var(--panel);border:var(--bw) solid var(--ink);border-radius:14px;padding-left:14px;font-weight:800;font-size:17px}
.userfield input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-weight:700;padding:12px 14px 12px 4px;color:var(--fg);outline:none}
.userfield:focus-within{outline:3px solid var(--sky);outline-offset:3px}
.err{color:#B3261E;font-weight:700;min-height:1em}
.selfie{display:flex;flex-direction:column;gap:8px}
.selfiepick{position:relative;display:flex;align-items:center;gap:12px;background:var(--butter);border:var(--bw) solid var(--ink);border-radius:22px;box-shadow:var(--shadow);padding:8px 12px 8px 6px;cursor:pointer}
.selfiepick input{position:absolute;opacity:0;width:1px;height:1px}
.selfiepick:focus-within{outline:3px solid var(--sky);outline-offset:3px}
.selfiepick .facecircle{width:64px;height:64px;margin:6px;box-shadow:0 0 0 4px var(--panel),0 0 0 6.5px var(--ink);font-size:24px}
.selfiepick .facetext{flex:1;min-width:0}
.selfiego{font-family:var(--display);font-weight:800;background:var(--ink);color:var(--bg);border-radius:14px;padding:10px 16px;box-shadow:3px 3px 0 var(--accent)}
.selfie.done .selfiepick{background:var(--panel)}
.selfie.done .selfiego{background:var(--panel);color:var(--ink);border:2px solid var(--ink);box-shadow:none;padding:8px 12px;font-size:14px}
.drop{margin:0 4px;font-size:13px;font-weight:700;color:var(--muted)}
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.calhead h3{margin:0}
.streak.small{padding:3px 10px;font-size:13px;box-shadow:2px 2px 0 var(--ink)}
.calweek,.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.calweek span{text-align:center;font-size:11px;font-weight:800;color:var(--muted)}
.cal{margin-top:6px}
.cal .d{position:relative;aspect-ratio:1;border-radius:50%;border:2px dashed #CDBFAE;background:transparent;padding:0;display:grid;place-items:center;font-size:11px;font-weight:800;color:#A8998A;overflow:visible}
.cal .d img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.cal .d.on{border:2.5px solid var(--ink);background:var(--peach);color:var(--ink);box-shadow:0 0 0 2.5px var(--accent)}
.cal .d.on::after{content:"";position:absolute;right:-5px;bottom:-4px;width:14px;height:16px;background:var(--accent);border:2px solid var(--ink);border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;transform:rotate(8deg)}
.cal .d.today{outline:3px solid var(--sky);outline-offset:2px}
.cal .d.future{visibility:hidden}
.cal .d.pic:not(.on){border-style:solid;border-color:#CDBFAE;opacity:.8}
#calNote{margin-top:14px}

/* ---------- v0.5: crown, free play, XP ---------- */
.lvl{display:inline-flex;align-items:center;background:var(--lilac);border:var(--bw) solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:999px;padding:5px 11px;font-weight:800;font-size:14px}
.lostcrown{margin:0;background:var(--ink);color:var(--bg);border-radius:16px;padding:12px 16px;font-weight:800;box-shadow:4px 4px 0 var(--accent)}
.crown{display:flex;align-items:center;gap:12px;padding:12px 18px 0}
.crown .crownav{width:46px;height:46px;font-size:18px;background:var(--butter);box-shadow:0 0 0 3px var(--butter),0 0 0 5.5px var(--ink)}
.crowntxt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.crowntxt b{font-family:var(--display);font-size:18px}
.crowntxt span{font-size:14px;color:var(--muted);font-weight:500}
.champ{margin:-6px 0 12px;font-size:14px;font-weight:700;color:var(--muted)}
.freesub{margin:-6px 0 12px;font-size:14px}
.gcard .pb{display:block;margin:-4px 12px 12px;font-size:12px;font-weight:800;color:var(--ink)}
.tag.hot{background:var(--accent);color:var(--ink)}
.xphead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.xphead h3{margin:0}
.xptext{font-weight:800;font-size:14px}
.xpbar{height:18px;border:var(--bw) solid var(--ink);border-radius:999px;background:var(--bg);overflow:hidden;margin-bottom:10px}
.xpbar span{display:block;height:100%;background:var(--lilac);border-right:var(--bw) solid var(--ink);transition:width .4s}
.xpline{margin:0;font-weight:800}
.xpline.up{color:var(--ink);background:var(--butter);border:2px solid var(--ink);border-radius:12px;padding:6px 10px;align-self:flex-start}

/* ---------- v0.6: consent + account deletion ---------- */
.agree{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;font-size:14px;line-height:1.45;margin-top:4px}
.agree input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--tomato)}
.agree a,.legal a{color:var(--fg);font-weight:700}
.danger{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.dangerbtn{color:#B3261E;align-self:flex-start}
.delconfirm{border:var(--bw) solid var(--ink);border-radius:16px;padding:14px;background:#FFE3DC;display:flex;flex-direction:column;gap:10px}
.delconfirm .sub{margin:0}
.delrow{display:flex;gap:10px;flex-wrap:wrap}
.dangerfill{background:#B3261E;color:#fff}
.legal{margin-top:4px}