:root { --pink:#ff5d8f; --blue:#3aa0ff; --green:#2fd27a; --orange:#ff9f1c; --ink:#2b2250; --safe-t: env(safe-area-inset-top,0px); --safe-b: env(safe-area-inset-bottom,0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; height:100%; overflow:hidden; background:#58bfff; font-family: "Nunito","Baloo 2","Varela Round","Trebuchet MS","PingFang SC","Hiragino Sans","Apple SD Gothic Neo","Microsoft YaHei",system-ui,sans-serif; color:var(--ink); user-select:none; -webkit-user-select:none; touch-action:none; }
canvas#c { position:fixed; inset:0; width:100%; height:100%; display:block; }
.hidden { display:none !important; }
.screen { position:fixed; inset:0; display:none; flex-direction:column; align-items:center; padding: calc(12px + var(--safe-t)) 14px calc(14px + var(--safe-b)); overflow-y:auto; z-index:10; }
.screen.show { display:flex; }
.screen.modal { background: rgba(30,20,70,0.45); justify-content:center; backdrop-filter: blur(3px); z-index:30; }
.top-row { width:100%; max-width:720px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.top-row h2 { margin:0; font-size:22px; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.25); }
.row { display:flex; align-items:center; } .gap { gap:8px; } .center { justify-content:center; }
.pill { background:rgba(255,255,255,.88); border-radius:999px; padding:6px 12px; font-weight:800; font-size:15px; box-shadow:0 3px 0 rgba(0,0,0,.12); white-space:nowrap; }
.icon-btn { width:42px; height:42px; border-radius:50%; border:none; background:rgba(255,255,255,.9); font-size:20px; box-shadow:0 3px 0 rgba(0,0,0,.15); cursor:pointer; }
select { font:inherit; font-weight:800; border:none; border-radius:999px; padding:8px 12px; background:rgba(255,255,255,.9); box-shadow:0 3px 0 rgba(0,0,0,.15); color:var(--ink); }
.logo { margin:0; font-size: clamp(44px, 13vw, 84px); line-height:.95; font-weight:900; letter-spacing:1px; text-align:center; color:#fff;
  text-shadow: 0 4px 0 #ff5d8f, 0 8px 0 #7b2ff7, 0 12px 18px rgba(60,20,120,.35); transform: rotate(-3deg); }
.logo span { display:inline-block; animation: bob 2.4s ease-in-out infinite; }
.logo.small { font-size:40px; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
.menu-center { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; width:100%; max-width:440px; padding-top: 4vh; }
.gamesub { color:#fff; font-weight:900; font-size:20px; letter-spacing:1px; text-shadow:0 2px 0 rgba(0,0,0,.22); margin:6px 0 0; text-align:center; }
.hub-link { display:grid; place-items:center; text-decoration:none; }
.tagline { color:#fff; font-weight:800; font-size:17px; text-shadow:0 2px 0 rgba(0,0,0,.2); margin:14px 0 0; text-align:center; }
.menu-buttons { margin-top:auto; width:100%; display:grid; grid-template-columns: 1fr 1fr; gap:12px; padding-bottom: 6px; }
.btn { font:inherit; font-weight:900; border:none; border-radius:18px; padding:12px 16px; font-size:17px; color:#fff; background:#8a8aa8; cursor:pointer;
  box-shadow: 0 5px 0 rgba(0,0,0,.22), inset 0 -3px 0 rgba(0,0,0,.12), inset 0 3px 0 rgba(255,255,255,.35); text-shadow:0 1px 0 rgba(0,0,0,.2); transition: transform .08s; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.22); }
.btn.big { display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 8px; font-size:17px; border-radius:22px; }
.btn.big span { font-size:30px; }
.btn.pink { background: linear-gradient(#ff7aa6,#ff4d85); } .btn.blue { background: linear-gradient(#5cb6ff,#2d8cff); }
.btn.green { background: linear-gradient(#45e08f,#1fbf68); } .btn.orange { background: linear-gradient(#ffb547,#ff8c1a); }
.btn.small { padding:8px 14px; font-size:15px; border-radius:14px; background: rgba(255,255,255,.9); color:var(--ink); text-shadow:none; }
.btn.wide { width:100%; margin-top:10px; }
.btn[disabled] { opacity:.5; }
.kidsafe { color:#fff; font-weight:800; font-size:13px; opacity:.95; margin:10px 0 0; text-shadow:0 1px 0 rgba(0,0,0,.25); }
.cards { width:100%; max-width:720px; display:flex; flex-direction:column; gap:14px; margin-top:14px; }
.card { border-radius:24px; padding:16px; color:#fff; box-shadow: 0 6px 0 rgba(0,0,0,.2); position:relative; overflow:hidden; }
.card h3 { margin:0; font-size:24px; text-shadow:0 2px 0 rgba(0,0,0,.2); } .card .em { position:absolute; right:12px; top:4px; font-size:62px; opacity:.9; }
.card .meta { font-weight:800; margin:6px 0 10px; opacity:.95; }
.card .bar { height:10px; background:rgba(255,255,255,.35); border-radius:9px; overflow:hidden; margin-bottom:12px; } .card .bar i { display:block; height:100%; background:#fff; border-radius:9px; }
.card .row .btn { flex:1; } .card .row { gap:10px; }
.card.candy { background: linear-gradient(135deg,#ff8fc2,#ff5d8f 60%,#ffb86b); } .card.lava { background: linear-gradient(135deg,#ff9b3d,#e8452c 60%,#7b2c5c); } .card.sky { background: linear-gradient(135deg,#6fd0ff,#3a8cff 60%,#9d7bff); }
.card .btn.white { background:#fff; color:var(--ink); text-shadow:none; }
.check { color:#fff; font-weight:800; margin-top:14px; display:flex; gap:8px; align-items:center; text-shadow:0 1px 0 rgba(0,0,0,.25); }
.check input { width:22px; height:22px; }
.avatar-panel { margin-top:auto; width:100%; max-width:520px; background:rgba(255,255,255,.92); border-radius:24px; padding:12px 14px 14px; box-shadow:0 6px 0 rgba(0,0,0,.15); }
.opt h3 { margin:2px 0 4px; font-size:14px; }
.avatar-panel .swatches { gap:6px; } .avatar-panel .btn.wide { margin-top:8px; padding:10px; }
.swatches { display:flex; flex-wrap:wrap; gap:8px; }
.sw { width:36px; height:36px; border-radius:12px; border:3px solid #fff; box-shadow:0 0 0 2px rgba(0,0,0,.12); cursor:pointer; font-size:20px; display:flex; align-items:center; justify-content:center; background:#f1eefc; }
.sw.sel { box-shadow: 0 0 0 3px var(--ink); transform: scale(1.08); }
.note { font-size:14px; font-weight:700; opacity:.8; margin:8px 0 0; text-align:center; }
.panel { width:100%; max-width:420px; background:rgba(255,255,255,.94); border-radius:26px; padding:18px; box-shadow:0 8px 0 rgba(0,0,0,.15); margin-top:14px; text-align:center; }
.panel h2 { margin:0 0 6px; }
.join-row { display:flex; gap:8px; margin-top:14px; } .join-row input { flex:1; min-width:0; font:inherit; font-size:24px; font-weight:900; letter-spacing:4px; text-align:center; text-transform:uppercase; border:3px solid #ddd6ff; border-radius:16px; padding:8px; }
.status { font-weight:800; color:#e8452c; min-height:1.2em; }
.room-code { font-size:20px; font-weight:800; } .room-code b { font-size:32px; letter-spacing:5px; color:#7b2ff7; }
.plist { list-style:none; padding:0; margin:6px 0; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.plist li { background:#f1eefc; border-radius:12px; padding:8px; font-weight:800; font-size:14px; display:flex; gap:6px; align-items:center; }
.plist li i { width:14px; height:14px; border-radius:4px; display:inline-block; flex:none; }
.world-pick { display:flex; gap:8px; justify-content:center; margin-top:8px; } .world-pick .sw { width:auto; padding:0 10px; font-size:14px; font-weight:800; height:40px; }
#hud { position:fixed; inset:0; pointer-events:none; z-index:5; }
.hud-top { position:absolute; top: calc(10px + var(--safe-t)); left:10px; right:10px; display:flex; justify-content:space-between; align-items:center; gap:6px; }
.hud-top .icon-btn { pointer-events:auto; }
.timer { font-variant-numeric: tabular-nums; font-size:18px; min-width:92px; text-align:center; }
.hud-sub { position:absolute; top: calc(60px + var(--safe-t)); left:0; right:0; text-align:center; color:#fff; font-weight:900; text-shadow:0 2px 0 rgba(0,0,0,.3); font-size:15px; }
.tip { position:absolute; bottom: calc(150px + var(--safe-b)); left:0; right:0; text-align:center; color:#fff; font-weight:800; font-size:14px; text-shadow:0 2px 0 rgba(0,0,0,.35); transition: opacity .6s; padding:0 20px; }
#joy { position:fixed; width:112px; height:112px; margin:-56px 0 0 -56px; border-radius:50%; background:rgba(255,255,255,.25); border:3px solid rgba(255,255,255,.7); display:none; z-index:6; pointer-events:none; left:90px; top:calc(100% - 130px); }
body.touch.playing #joy { display:block; opacity:.55; } body.touch.playing #joy.on { opacity:1; }
#knob { position:absolute; left:50%; top:50%; width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.95); box-shadow:0 3px 8px rgba(0,0,0,.25); transform:translate(-50%,-50%); }
#jumpBtn { position:fixed; right:22px; bottom: calc(34px + var(--safe-b)); width:96px; height:96px; border-radius:50%; border:none; font:inherit; font-weight:900; font-size:18px; color:#fff; z-index:6;
  background: radial-gradient(circle at 35% 30%, #7dffb4, #1fbf68); box-shadow: 0 6px 0 rgba(0,0,0,.25), inset 0 -4px 0 rgba(0,0,0,.15); display:none; touch-action:none; text-shadow:0 1px 0 rgba(0,0,0,.25); }
#jumpBtn.down { transform: translateY(4px) scale(.96); box-shadow:0 2px 0 rgba(0,0,0,.25); }
body.touch.playing #jumpBtn { display:block; }
#toast { position:fixed; left:50%; top:28%; transform:translate(-50%,-50%) scale(.6); font-size:34px; font-weight:900; color:#fff; opacity:0; pointer-events:none; z-index:8; white-space:nowrap;
  text-shadow: 0 3px 0 #1fbf68, 0 6px 0 rgba(0,0,0,.2); transition: opacity .25s, transform .35s cubic-bezier(.2,1.6,.4,1); }
#toast.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
#countdown { position:fixed; left:50%; top:40%; transform:translate(-50%,-50%); font-size:110px; font-weight:900; color:#fff; z-index:9; pointer-events:none; text-shadow:0 6px 0 #ff5d8f, 0 12px 0 rgba(0,0,0,.2); }
.celebrate .trophy { font-size:64px; animation: bob 1.2s infinite; }
.badge { display:inline-block; background: linear-gradient(#ffe066,#ffb700); color:#6b3b00; font-weight:900; padding:6px 14px; border-radius:999px; margin:4px 0; box-shadow:0 3px 0 rgba(0,0,0,.15); }
.stats { display:grid; grid-template-columns: repeat(3,1fr); gap:8px; margin:10px 0; }
.stats div { background:#f1eefc; border-radius:14px; padding:8px 4px; font-weight:800; font-size:13px; } .stats b { display:block; font-size:19px; color:#7b2ff7; }
.results { text-align:left; font-weight:800; margin:6px 0; padding-left:26px; } .results:empty { display:none; }
.spinner { width:44px; height:44px; border-radius:50%; border:6px solid rgba(255,255,255,.4); border-top-color:#fff; animation: spin 0.8s linear infinite; margin-top:26px; }
@keyframes spin { to { transform: rotate(360deg) } }
#loading { justify-content:center; background: linear-gradient(#58bfff,#ffd6f0); }
@media (min-width: 700px) { .menu-buttons { grid-template-columns: repeat(4,1fr); } .cards { flex-direction:row; } .card { flex:1; } }