:root {
  --ink: #fff8ec;
  --muted: #e4cfd6;
  --glass: rgba(22, 12, 36, 0.74);
  --glass2: rgba(34, 18, 52, 0.9);
  --line: rgba(255, 220, 180, 0.16);
  --yellow: #f5c300;
  --orange: #ff8a2a;
  --red: #e11d2e;
  --blue: #2f6fe0;
  --green: #18a058;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #1c1238; color: var(--ink); font: 600 15px/1.3 var(--font);
  overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
#app { position: fixed; inset: 0; overflow: hidden; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
.hidden { display: none !important; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; z-index: 5; }
.screen.show { display: flex; }

/* boot + logo */
#boot { background: radial-gradient(120% 80% at 50% 100%, #ff8a3a 0%, #a8306a 40%, #2a1846 74%, #1c1238 100%);
  align-items: center; justify-content: center; gap: 22px; z-index: 20; }
.boot-logo, .logo { display: flex; flex-direction: column; align-items: center; line-height: .82; transform: rotate(-4deg) skewX(-6deg); }
.boot-logo span, .logo span { font-weight: 800; letter-spacing: .32em; font-size: 12px; padding-left: .32em; color: #ffe9c9; margin-bottom: 6px; }
.boot-logo b, .logo b { font-weight: 900; font-style: italic; font-size: 78px; letter-spacing: -2px; color: var(--yellow);
  -webkit-text-stroke: 3px #161616; paint-order: stroke fill; text-shadow: 0 6px 0 #161616, 0 10px 24px rgba(0,0,0,.4); }
.boot-logo b.b2, .logo b.b2 { color: #fff; margin-left: 46px; }
.boot-bar { width: 180px; height: 6px; border-radius: 9px; background: rgba(255,255,255,.15); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 5%; background: linear-gradient(90deg, var(--yellow), var(--orange)); transition: width .2s; }
.boot-note { margin: 0; color: #ffe0c4; font-size: 13px; }

/* identity */
.who { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 10px; z-index: 12; display: flex; align-items: center; gap: 8px;
  background: var(--glass); border: 1px solid var(--line); padding: 4px 12px 4px 4px; border-radius: 99px; font-size: 13px; max-width: 72vw; }
#hiName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--yellow), var(--orange)) center/cover no-repeat;
  display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #161616; flex: none; box-shadow: 0 0 0 2px #161616; }
.pill { background: var(--yellow); color: #161616; font-size: 10px; font-weight: 900; padding: 2px 7px; border-radius: 99px; letter-spacing: .06em; }
body.in-fight .who { display: none; }

/* title */
#title { justify-content: space-between; padding: max(64px, calc(env(safe-area-inset-top) + 54px)) 18px max(22px, env(safe-area-inset-bottom)); }
.title-top { text-align: center; }
.tag { margin: 18px auto 0; color: #ffe6cf; font-size: 13px; max-width: 290px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.menu { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 420px; margin: 0 auto; }
.menu-row { display: flex; gap: 10px; }
.menu-row .btn { flex: 1; }
.btn { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 13px 16px; border-radius: 16px; min-height: 52px;
  font-weight: 900; font-size: 17px; background: var(--glass); border: 1px solid var(--line); text-align: center; }
.btn small { font-weight: 600; font-size: 12px; opacity: .85; margin-top: 2px; }
.btn.primary { background: linear-gradient(180deg, #ffd23f, #f5a800); color: #161616; border: 2px solid #161616; box-shadow: 0 4px 0 #161616; }
.btn.hot { background: linear-gradient(180deg, #ff6a3d, #e11d2e); border: 2px solid #161616; box-shadow: 0 4px 0 #161616; }
.btn.ghost { background: var(--glass2); }
.btn.icon { flex: 0 0 56px; width: 56px; font-size: 20px; }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #161616; }

/* sheets */
.sheet-screen { background: rgba(10, 4, 20, .55); justify-content: flex-end; z-index: 14; }
.sheet { background: var(--glass2); border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; padding: 18px 18px max(20px, env(safe-area-inset-bottom));
  max-height: 92%; overflow-y: auto; width: 100%; max-width: 560px; margin: 0 auto; }
.sheet.tall { min-height: 60%; }
.sheet h2 { margin: 0 0 8px; font-size: 22px; font-weight: 900; font-style: italic; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.x { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); font-size: 16px; }
.fine { color: var(--muted); font-size: 12.5px; font-weight: 500; margin: 6px 0 12px; }
.lbl { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 10px 0 6px; }
.chips { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.chip { flex: 1; min-width: 70px; padding: 10px 6px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid var(--line); font-weight: 800; }
.chip.on { background: var(--yellow); color: #161616; border-color: #161616; }
#lSetup .btn, #lWait .btn, #lDemo .btn { margin-bottom: 10px; }
.join-row { display: flex; gap: 8px; }
.join-row input { flex: 1; min-width: 0; font: 900 20px var(--font); letter-spacing: .3em; text-align: center; text-transform: uppercase; padding: 10px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(0,0,0,.3); color: var(--ink); }
.join-row .btn { flex: 0 0 96px; width: 96px; }
.code-box { font: 900 40px var(--font); letter-spacing: .3em; text-align: center; padding: 14px 0 14px .3em; background: rgba(0,0,0,.3); border-radius: 16px; color: var(--yellow); }
.wait-status { text-align: center; color: var(--muted); }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 4px solid rgba(255,255,255,.15); border-top-color: var(--yellow); margin: 6px auto 14px; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast-inline { color: #ffd9a8; font-size: 13px; min-height: 18px; margin: 8px 0; }
.lvl { margin-bottom: 0; }

/* HUD */
#hud { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
#hud button, #hud .gesture { pointer-events: auto; }
.hud-top { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 8px; right: 8px; display: flex; gap: 6px; align-items: flex-start; }
.fbox { position: relative; flex: 1; min-width: 0; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 5px 7px 6px; }
.fbox.opp { text-align: right; }
.fname { font-size: 12.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.fbox.me .fname { color: #ffb4b4; }
.fbox.opp .fname { color: #b9d0ff; }
.bar { height: 10px; border-radius: 6px; background: rgba(0,0,0,.45); overflow: hidden; position: relative; }
.bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; border-radius: 6px; transition: width .12s linear; }
.fbox.opp .bar i { left: auto; right: 0; }
.bar.hp i { background: linear-gradient(90deg, #ff4d4d, #ffd23f); }
.bar.hp.low i { background: #ff3030; animation: blink .5s infinite alternate; }
@keyframes blink { to { opacity: .55; } }
.bar.st { height: 5px; margin-top: 3px; }
.bar.st i { background: #4fd1ff; }
.bar.st.empty i { background: #8a8a8a; }
.kds { font-size: 10px; height: 12px; margin-top: 2px; letter-spacing: 1px; color: var(--yellow); }
.clock { flex: 0 0 58px; text-align: center; background: #161616; border: 2px solid var(--yellow); border-radius: 12px; padding: 3px 0 4px; }
.clock small { display: block; font-size: 10px; color: var(--yellow); font-weight: 800; }
.clock b { font-size: 20px; font-variant-numeric: tabular-nums; }
.hud-sub { position: absolute; top: calc(max(8px, env(safe-area-inset-top)) + 64px); left: 8px; right: 8px; display: flex; align-items: center; gap: 8px; font-size: 11px; }
.ping { background: var(--glass); border: 1px solid var(--line); border-radius: 99px; padding: 2px 8px; }
.ping.good { color: #7dff9b; } .ping.mid { color: #ffd23f; } .ping.bad { color: #ff6b6b; }
.stake { color: var(--muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pause-btn { width: 34px; height: 30px; border-radius: 10px; background: var(--glass); border: 1px solid var(--line); font-size: 12px; }
.banner { position: absolute; top: calc(max(8px, env(safe-area-inset-top)) + 96px); left: 50%; transform: translateX(-50%); background: #161616; color: var(--yellow);
  border: 2px solid var(--yellow); border-radius: 12px; padding: 6px 14px; font-weight: 900; font-size: 14px; white-space: nowrap; }
.callout { position: absolute; top: 31%; left: 0; right: 0; text-align: center; font-size: 56px; font-weight: 900; font-style: italic; color: var(--yellow);
  -webkit-text-stroke: 2.5px #161616; paint-order: stroke fill; text-shadow: 0 5px 0 #161616; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; pointer-events: none; padding: 0 10px; line-height: 1; }
.callout.show { opacity: 1; transform: scale(1) rotate(-3deg); }
.callout.small { font-size: 34px; }
.mc { position: absolute; top: calc(31% + 66px); left: 16px; right: 16px; text-align: center; font-size: 17px; font-weight: 800; color: #fff; text-shadow: 0 2px 4px #000;
  opacity: 0; transition: opacity .25s; }
.mc.show { opacity: 1; }
.mc::before { content: "MC: "; color: var(--yellow); }
.bubble { position: absolute; background: #fff; color: #161616; font-weight: 900; padding: 6px 10px; border-radius: 14px; font-size: 14px; border: 2px solid #161616; }
.bubble.opp { top: 24%; right: 18%; }
.bubble.me { bottom: 330px; left: 16%; }
.dmgpops { position: absolute; inset: 0; pointer-events: none; }
.pop { position: absolute; font-weight: 900; font-size: 22px; color: #fff; -webkit-text-stroke: 1.5px #161616; paint-order: stroke fill; animation: pop .8s ease-out forwards; }
@keyframes pop { from { transform: translateY(0) scale(1.2); opacity: 1; } to { transform: translateY(-40px) scale(.9); opacity: 0; } }

.gesture { position: absolute; left: 0; right: 0; top: calc(max(8px, env(safe-area-inset-top)) + 92px); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 150px); }
.ghint { position: absolute; bottom: 6px; left: 56px; right: 56px; text-align: center; font-size: 11px; color: rgba(255,255,255,.55); text-shadow: 0 1px 2px #000; transition: opacity .6s; }
.taunt { position: absolute; right: 10px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 160px); width: 44px; height: 44px; border-radius: 50%; background: var(--glass2); border: 1px solid var(--line); font-size: 20px; }
.controls { position: absolute; left: 8px; right: 8px; bottom: max(10px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.cb { height: 64px; border-radius: 16px; border: 2px solid #161616; box-shadow: 0 4px 0 #161616; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; color: #fff; background: rgba(40, 24, 60, .82); }
.cb small { font-size: 10px; font-weight: 700; opacity: .7; }
.cb.jab { background: linear-gradient(180deg, #fff0b8, #e8c24a); color: #161616; }
.cb.hook { background: linear-gradient(180deg, #ffb066, #ff7a1a); color: #161616; }
.cb.upper { background: linear-gradient(180deg, #ff6b6b, #d7263d); }
.cb.block { background: linear-gradient(180deg, #5e8dff, #2456d6); }
.cb.dodge { background: rgba(26, 138, 74, .9); font-size: 14px; }
.cb.down, .cb:active { transform: translateY(3px); box-shadow: 0 1px 0 #161616; filter: brightness(1.15); }
.cb.cool { opacity: .55; }
.cb.use { grid-column: 1 / -1; background: linear-gradient(180deg, #7dffb0, #18a058); color: #161616; font-size: 19px; animation: usePulse .7s infinite alternate; }
.cb.use.stone { background: linear-gradient(180deg, #e6f6ff, #8fb8cc); }
@keyframes usePulse { to { filter: brightness(1.18); } }
.grab { position: absolute; left: 50%; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 156px); transform: translateX(-50%); min-width: 156px; padding: 7px 16px 6px;
  border-radius: 99px; background: linear-gradient(180deg, #ffe066, #f5a800); color: #161616; border: 2px solid #161616; box-shadow: 0 4px 0 #161616;
  display: flex; flex-direction: column; align-items: center; animation: grabBob .45s infinite alternate; }
.grab.l { left: 32%; } .grab.r { left: 68%; }
.grab b { font-size: 17px; font-weight: 900; font-style: italic; } .grab small { font-size: 10px; font-weight: 700; opacity: .75; }
.grab:active { box-shadow: 0 1px 0 #161616; }
@keyframes grabBob { from { margin-bottom: 0; } to { margin-bottom: 5px; } }
.jtag { position: absolute; bottom: 3px; right: 7px; font-size: 9.5px; font-weight: 900; letter-spacing: .04em; padding: 0 6px; border-radius: 99px; line-height: 13px;
  background: linear-gradient(90deg, #a43dff, #2ecc71); color: #fff; animation: blink .4s infinite alternate; }
.fbox.opp .jtag { right: auto; left: 7px; }
.code-box.preview { color: rgba(255,255,255,.45); font-size: 30px; letter-spacing: .2em; }

/* results */
#results .sheet { text-align: center; }
#rTitle { font-size: 40px; color: var(--yellow); -webkit-text-stroke: 1.5px #161616; paint-order: stroke fill; }
#rTitle.lose { color: #b9d0ff; }
.r-method { font-weight: 900; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.r-sub { margin: 6px 0 10px; font-size: 14px; }
.r-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 5px 12px; text-align: left; background: rgba(0,0,0,.25); border-radius: 14px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 8px; }
.r-grid .h { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.r-grid .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.r-note { color: var(--muted); font-size: 12.5px; min-height: 16px; }

/* shop */
.shop-list { display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 14px; padding: 8px; }
.item .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; flex: none; }
.item .tx { flex: 1; min-width: 0; }
.item .tx b { display: block; font-size: 14.5px; }
.item .tx small { color: var(--muted); font-size: 12px; font-weight: 500; }
.buy { flex: none; min-width: 78px; padding: 9px 10px; border-radius: 12px; background: var(--yellow); color: #161616; font-weight: 900; border: 2px solid #161616; }
.buy.own { background: rgba(255,255,255,.1); color: #7dff9b; border-color: transparent; }

/* how */
.how p { font-size: 14px; font-weight: 500; margin: 0 0 10px; }
.how b { color: var(--yellow); }
.keys { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 6px 0 10px; }
.keys th, .keys td { text-align: left; padding: 5px 4px; border-bottom: 1px solid var(--line); font-weight: 600; }
.keys th { color: var(--muted); font-size: 11px; text-transform: uppercase; }

.toast { position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%) translateY(20px); background: #161616; border: 1px solid var(--yellow); color: #fff; padding: 9px 16px;
  border-radius: 14px; font-size: 13.5px; opacity: 0; transition: opacity .2s, transform .2s; z-index: 30; pointer-events: none; max-width: 88vw; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (min-width: 700px) and (min-height: 600px) {
  .controls { left: 50%; right: auto; width: 420px; transform: translateX(-50%); }
}