:root { --bg: #0d1410; --card: #16211b; --line: #24352b; --green: #19c37d; --gold: #f5c542; --red: #ff5a5f; --text: #f3f7f4; --muted: #8fa398 }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 500 16px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; user-select: none; overscroll-behavior: none }
#app { height: 100dvh; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; background: radial-gradient(120% 60% at 50% 0%, #1d3a2a 0%, var(--bg) 60%) }
main { flex: 1; overflow-y: auto; padding: 8px 16px 16px }
.top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 4px }
.me { display: flex; gap: 10px; align-items: center }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--card); display: grid; place-items: center; overflow: hidden; border: 2px solid var(--gold) }
.avatar img { width: 100%; height: 100% }
.streak { background: var(--card); padding: 6px 12px; border-radius: 99px; font-weight: 700 }
.muted { color: var(--muted) } .small { font-size: 13px } .center { text-align: center } .hidden { display: none !important }
.tab { display: none } .tab.active { display: block }
h1.logo { font-size: 44px; margin: 12px 0 0; letter-spacing: 2px; font-weight: 900; text-align: center } h1.logo span { color: var(--green) }
.tagline { text-align: center; color: var(--gold); margin: 2px 0 14px; font-weight: 700 }
h2 { margin: 10px 0 } h3 { margin: 18px 0 8px }
.label { font-size: 13px; color: var(--muted); margin: 10px 0 6px; text-transform: uppercase; letter-spacing: 1px }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chip { background: var(--card); border: 1px solid var(--line); color: var(--text); padding: 8px 12px; border-radius: 99px; font: inherit; font-size: 14px }
.chip.on { background: var(--green); border-color: var(--green); color: #04130b; font-weight: 700 }
.btn { display: block; width: 100%; min-height: 48px; margin-top: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 14px; font: inherit; font-weight: 700 }
.btn:active { transform: scale(.98) } .btn:disabled { opacity: .45 }
.btn.primary { background: var(--green); border: 0; color: #04130b } .btn.big { min-height: 58px; font-size: 19px; margin-top: 18px }
.btn.ghost { background: transparent }
.row { display: flex; gap: 10px } .row .btn { flex: 1 }
.code { font-size: 44px; font-weight: 900; letter-spacing: 8px; color: var(--gold); margin: 12px 0 }
#lobby { padding-top: 60px }
.vs { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 12px } .vs .right { text-align: right }
.score { font-size: 28px; font-weight: 900; color: var(--green) }
.ring { position: relative; width: 64px; height: 64px } .ring svg { width: 100%; height: 100%; transform: rotate(-90deg) }
.ring circle { fill: none; stroke-width: 4 } .ring .track { stroke: var(--line) } .ring .bar { stroke: var(--gold); stroke-dasharray: 119.4; transition: stroke-dashoffset .1s linear }
.ring span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 20px }
.q { font-size: 21px; min-height: 84px; margin: 12px 0 }
.opts { display: grid; gap: 10px }
.opt { min-height: 56px; text-align: left; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-weight: 600 }
.opt.right { background: var(--green); color: #04130b; border-color: var(--green) } .opt.wrong { background: var(--red); border-color: var(--red) }
.opt.gone { visibility: hidden }
.powers .btn { margin-top: 14px; min-height: 44px } .powers span { background: var(--bg); border-radius: 99px; padding: 1px 8px; margin-left: 4px }
.gbas { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); font-size: 40px; font-weight: 900; color: var(--gold); text-shadow: 0 4px 20px #000; animation: pop .9s ease-out forwards; pointer-events: none }
@keyframes pop { 0% { opacity: 0; transform: translateX(-50%) scale(.5) } 30% { opacity: 1; transform: translateX(-50%) scale(1.15) } 100% { opacity: 0; transform: translateX(-50%) scale(1) translateY(-30px) } }
#result { padding-top: 30px } .res-title { font-size: 40px; font-weight: 900; margin-bottom: 14px }
.res-scores { display: grid; gap: 8px; text-align: left }
.res-scores div { display: flex; justify-content: space-between; background: var(--card); padding: 12px 16px; border-radius: 12px }
.seg { display: flex; background: var(--card); border-radius: 12px; padding: 4px; gap: 4px }
.seg button { flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-weight: 700 }
.seg button.on { background: var(--green); color: #04130b }
.list { list-style: none; padding: 0; margin: 12px 0 }
.list li { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; background: var(--card); padding: 10px 12px; border-radius: 12px; margin-bottom: 6px }
.list li.mine { outline: 2px solid var(--gold) } .list .rk { font-weight: 900; color: var(--gold) } .list .prize { grid-column: 2 / 4; font-size: 12px; color: var(--muted) }
.inv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.inv div { background: var(--card); border-radius: 12px; padding: 10px; text-align: center } .inv b { display: block; font-size: 24px }
.shop { display: grid; gap: 8px }
.shop .item { display: flex; justify-content: space-between; align-items: center; background: var(--card); border-radius: 12px; padding: 10px 12px }
.shop .item .btn { width: auto; margin: 0; min-height: 40px; padding: 0 14px }
.tabs { display: flex; border-top: 1px solid var(--line); background: #0a100c; padding-bottom: env(safe-area-inset-bottom) }
.tabs button { flex: 1; min-height: 58px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center }
.tabs button span { font-size: 11px; margin-top: 2px } .tabs button.on { color: var(--green) }
.overlay { position: fixed; inset: 0; background: #000c; display: grid; place-items: center; font-size: 28px; font-weight: 900; z-index: 9 }
.toast { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); background: #000; padding: 10px 16px; border-radius: 99px; font-size: 14px; z-index: 10; max-width: 90% }

.top-r { display: flex; align-items: center; gap: 8px }
.mute { background: rgba(255,255,255,.08); border: 0; border-radius: 999px; width: 36px; height: 36px; font-size: 18px; color: inherit }

/* open challenge lobby */
.btn.gold { background: var(--gold); border: 0; color: #1a1300 }
.lobby-h { margin-top: 22px; display: flex; align-items: center; gap: 8px }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.2s infinite }
@keyframes blink { 50% { opacity: .2 } }
.board { display: grid; gap: 8px; padding-bottom: 16px }
.ch { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px }
.ch.mine { border-color: var(--gold) }
.ch .who { font-weight: 800 } .ch .meta { font-size: 13px; color: var(--muted) }
.ch .stake { color: var(--gold); font-weight: 900 }
.ch .btn { grid-row: 1 / 3; grid-column: 2; width: auto; margin: 0; min-height: 44px; padding: 0 16px }
.posted { color: var(--gold); font-weight: 700 }
.alert { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); width: min(440px, calc(100% - 24px)); background: #1f2e24; border: 2px solid var(--gold); border-radius: 16px; padding: 12px 14px; box-shadow: 0 10px 30px #000a; z-index: 50; animation: drop .25s ease-out }
.alert .btn { margin-top: 8px; min-height: 42px }
@keyframes drop { from { transform: translate(-50%, -30px); opacity: 0 } }

.field { width: 100%; box-sizing: border-box; min-height: 46px; margin-top: 10px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; user-select: text }
.field:focus { outline: 2px solid var(--green) }
#join-row .field { flex: 2 } #join-row .btn { flex: 1 }
.mine-card { margin-top: 14px; background: #2a2510; border: 2px solid var(--gold); border-radius: 14px; padding: 10px 12px }
.mine-card .row .btn { min-height: 40px; margin-top: 8px }
.cup-today { background: var(--card); border: 1px solid var(--gold); border-radius: 16px; padding: 12px 14px; margin: 12px 0 }
.cup-title { font-weight: 900; font-size: 20px; color: var(--gold) }
.cup-today .btn.big { margin-top: 8px }