:root{
  --paper:#FBF7EA; --ink:#1A1611; --line:#241d12;
  --lime:#C6F24E; --red:#F0463F; --blue:#3D6FE0;
  --green:#7ED957; --gold:#E9C15C; --pink:#EC5AA0; --violet:#8B5CF6; --teal:#2BC0B2;
  --shadow:4px 4px 0 var(--ink); --shadow-sm:3px 3px 0 var(--ink);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--paper); color:var(--ink); overflow:hidden;
  font-family:"Fredoka", ui-rounded, system-ui, sans-serif; font-weight:500; -webkit-font-smoothing:antialiased}

/* ---------- landing (semi-transparent overlay; game shows behind) ---------- */
#landing{position:fixed; inset:0; display:grid; place-items:center; background:rgba(251,247,234,.68); backdrop-filter:blur(3px); z-index:50; transition:opacity .5s, visibility .5s}
#landing.hide{opacity:0; visibility:hidden; pointer-events:none}
#landing .card{width:min(360px,86vw); text-align:center; display:grid; gap:14px; justify-items:center; background:var(--paper); border:2.5px solid var(--line); border-radius:24px; padding:28px 26px; box-shadow:var(--shadow)}
#landing .logo{width:56px;height:56px}
#landing h1{font-size:46px; font-weight:700; letter-spacing:.02em; margin:2px 0 0}
#landing p{font-size:14.5px; margin:0; opacity:.85}
#landing .signin{width:100%; border:3px solid var(--line); background:var(--ink); color:var(--paper);
  border-radius:16px; padding:15px 18px; font-family:inherit; font-size:15px; font-weight:600; cursor:pointer;
  display:inline-flex; gap:10px; align-items:center; justify-content:center; box-shadow:var(--shadow); transition:transform .07s}
#landing .signin:hover{transform:translate(-1px,-1px)} #landing .signin:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink)}
#landing .hint{font-size:11.5px; color:#8a8069}

/* ---------- app (always rendered; login overlays it) ---------- */
.app{display:flex; flex-direction:column; height:100vh}
.topbar{display:flex; align-items:center; gap:16px; padding:10px 18px; border-bottom:2px solid var(--line); background:var(--paper); z-index:10}
.brand{display:flex; align-items:center; gap:9px; font-size:24px; font-weight:700}
.brand .lg{width:30px;height:30px}
.spacer{flex:1}
.metric{display:flex; flex-direction:column; line-height:1; padding-right:4px}
.metric .k{font-size:11px; color:#8a8069; font-weight:500}
.metric .v{font-size:18px; font-weight:700}
.chip{border:2px solid var(--line); background:var(--paper); border-radius:12px; padding:8px 14px; font-weight:600; font-size:14px; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .06s}
.chip:hover{transform:translate(-1px,-1px)} .chip:active{transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink)}
.chip.icon{width:40px;height:40px;padding:0;display:grid;place-items:center;font-weight:700}

.main{flex:1; display:flex; min-height:0}
.worldwrap{flex:1; position:relative; overflow:hidden}
#world{position:absolute; inset:0; width:100%; height:100%; display:block}
.picker{position:absolute; left:14px; bottom:14px; z-index:5; display:flex; gap:7px; padding:8px;
  background:#fffdf6cc; backdrop-filter:blur(6px); border:2px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm)}
.picker .pc{width:42px;height:42px;border:2px solid var(--line); border-radius:11px; background:#fff; cursor:pointer; overflow:hidden; display:grid; place-items:center; transition:transform .08s}
.picker .pc img{width:150%; height:150%; object-fit:contain; margin-top:20%}
.picker .pc:hover{transform:translateY(-3px)}
.picker .pc.sel{outline:3px solid var(--lime); outline-offset:1px; background:#f4ffdc}

.side{width:380px; flex:none; border-left:2px solid var(--line); padding:16px; overflow:auto; display:flex; flex-direction:column; gap:14px; background:var(--paper)}
.card{border:2.5px solid var(--line); border-radius:20px; background:#FFFDF6; padding:15px; box-shadow:var(--shadow)}
.card .hd{display:flex; justify-content:space-between; align-items:center; margin-bottom:4px}
.card .hd h3{margin:0; font-size:17px; font-weight:700}
.card .timer{font-weight:700; font-size:14px; color:#8a8069}
.card p.sub{margin:4px 0 12px; font-size:13.5px; color:#5b5340; line-height:1.35}
.card .foot{font-size:12px; color:#8a8069; margin-top:10px}
.vote-row{display:flex; gap:12px}
.vote{flex:1; border:3px solid var(--line); border-radius:16px; color:#fff; font-weight:700; font-size:20px; padding:16px 0; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .06s}
.vote:hover{transform:translate(-1px,-1px)} .vote:active{transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink)}
.vote.red{background:var(--red)} .vote.blue{background:var(--blue)}
.vote.picked{outline:4px solid var(--ink); outline-offset:2px}
.badge{display:flex; align-items:center; gap:12px; border:2.5px solid var(--line); border-radius:16px; padding:12px 14px; box-shadow:var(--shadow-sm); font-weight:600}
.badge .tag{font-weight:700; font-size:16px; border:2px solid var(--line); border-radius:9px; padding:2px 9px; background:#ffffff77}
.badge.wl{background:var(--green)} .badge.og{background:var(--gold)}
.move-dots{display:flex; gap:8px; align-items:center; margin:6px 0 12px}
.dot{width:14px;height:14px;border-radius:50%; border:2px solid var(--line); background:var(--lime)}
.dot.used{background:#d8cfb6}
.move-dots span{font-size:13px; color:#5b5340; margin-left:4px}
.roll{width:100%; border:3px solid var(--line); border-radius:18px; background:var(--lime); color:var(--ink);
  font-family:inherit; font-weight:700; font-size:26px; padding:16px 0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:12px; box-shadow:var(--shadow); transition:transform .07s}
.roll:hover{transform:translate(-1px,-1px)} .roll:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink)}
.roll:disabled{background:#e3dcc6; cursor:not-allowed; color:#8a8069}
.die{width:34px;height:34px;display:block}
.task{display:flex; align-items:center; gap:11px; padding:10px 0; border-top:2px dashed #e4dcc6}
.task:first-of-type{border-top:none; padding-top:4px}
.task .t-ic{width:34px;height:34px;border-radius:11px;border:2.5px solid var(--line);display:grid;place-items:center;flex:none}
.task .t-nm{flex:1; font-size:14px; font-weight:600; line-height:1.15}
.task .t-rw{border:2.5px solid var(--line); border-radius:11px; color:#fff; font-weight:700; font-size:14px; padding:5px 10px; cursor:pointer; box-shadow:2px 2px 0 var(--ink)}
.task .t-rw:active{transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink)}
.task.done .t-rw{background:#9aa0a6 !important; cursor:default; box-shadow:none}
.pill-title{display:inline-block; background:var(--lime); border:2.5px solid var(--line); border-radius:12px; padding:5px 14px; font-weight:700; font-size:16px; box-shadow:var(--shadow-sm); margin-bottom:10px}
.toast{position:fixed; left:50%; top:70px; transform:translate(-50%,-14px); opacity:0; background:var(--ink); color:#fff; border:2px solid var(--ink);
  padding:10px 18px; border-radius:14px; font-weight:600; z-index:60; transition:all .25s; pointer-events:none}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* ---------- modals ---------- */
#modal-root{position:fixed; inset:0; z-index:70; display:none}
#modal-root.on{display:block}
#modal-root .overlay{position:absolute; inset:0; background:rgba(28,24,13,.45); backdrop-filter:blur(2px); display:grid; place-items:center; padding:20px}
.sheet{background:var(--paper); border:3px solid var(--line); border-radius:26px; box-shadow:6px 6px 0 var(--ink); width:min(430px,94vw); max-height:88vh; overflow:auto; padding:22px 22px 24px; position:relative; animation:pop .2s ease}
@keyframes pop{from{transform:translateY(8px) scale(.98); opacity:0}to{transform:none; opacity:1}}
.sheet .close{position:absolute; top:16px; right:16px; width:36px;height:36px; border:2.5px solid var(--line); background:var(--ink); color:#fff; border-radius:12px; font-weight:700; cursor:pointer; box-shadow:2px 2px 0 var(--ink)}
.m-title{margin:2px 0 16px; font-size:26px; font-weight:700}
/* profile */
.p-head{display:flex; align-items:center; gap:14px; margin-bottom:16px}
.p-av{width:64px;height:64px;border-radius:50%; border:3px solid var(--line); object-fit:cover; background:#fff}
.p-name{font-size:22px; font-weight:700; line-height:1.1}
.p-handle{color:#8a8069; font-weight:500}
.p-stats{display:flex; gap:12px; margin-bottom:4px}
.p-stats3{display:flex; gap:10px; margin-bottom:4px}
.pstat{flex:1; border:2.5px solid var(--line); border-radius:16px; padding:10px 12px; background:#fffdf6}
.pstat .k{display:block; font-size:11px; color:#8a8069; font-weight:500}
.pstat .v{font-size:20px; font-weight:700}
.p-lbl{font-weight:700; margin:14px 0 6px; font-size:15px}
.p-invite{display:flex; gap:10px}
.p-invite input{flex:1; min-width:0; border:2.5px solid var(--line); border-radius:14px; padding:12px 14px; font-family:inherit; font-size:13px; background:#fffdf6; color:var(--ink)}
.p-invite button{border:2.5px solid var(--line); border-radius:14px; padding:0 16px; background:var(--ink); color:#fff; font-family:inherit; font-weight:700; cursor:pointer; box-shadow:2px 2px 0 var(--ink); white-space:nowrap}
.p-note{font-size:12px; color:#8a8069; margin:8px 0 0}
.signout{width:100%; margin-top:18px; border:3px solid var(--line); border-radius:18px; background:var(--paper); color:var(--ink); font-family:inherit; font-weight:700; font-size:18px; padding:14px 0; cursor:pointer; box-shadow:var(--shadow)}
.signout:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink)}
/* leaderboard */
.lb-list{display:flex; flex-direction:column}
.lb-row{display:flex; align-items:center; gap:12px; padding:9px 8px; border-radius:12px}
.lb-row:nth-child(odd){background:#fbf3df}
.lb-rank{width:22px; text-align:center; font-weight:700; color:#8a8069}
.lb-av{width:34px;height:34px;border-radius:50%; border:2px solid var(--line); object-fit:cover; background:#fff}
.lb-nm{flex:1; min-width:0; font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lb-cs{font-weight:700}
/* result */
.res{text-align:center; display:grid; gap:8px; justify-items:center}
.res-ic img{width:84px;height:84px; object-fit:contain}
.res-ic{font-size:64px}
.res h2{margin:6px 0 0; font-size:22px}
.res-sub{margin:0 0 8px; color:#8a8069; font-weight:600}
.res .roll{width:100%}
@media (max-width:900px){ .side{width:320px} }