:root {
  --abyss: #061233;
  --deep: #0b2459;
  --sea: #123a7e;
  --panel-a: #10316f;
  --panel-b: #0a2152;
  --gold-hi: #ffe28f;
  --gold: #e8b53a;
  --gold-lo: #b57a1c;
  --pearl: #28d17c;
  --pearl-lo: #0f8f55;
  --foam: #e9f6ff;
  --mist: #9db8e3;
  --coral: #ff6b5a;
  --font-display: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --nav-h: 64px;
  --head-h: 54px;
  --chips-h: 40px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--abyss); color: var(--foam); font-family: var(--font-body); font-weight: 600; overscroll-behavior: none; }
body { display: flex; justify-content: center; background: radial-gradient(120% 80% at 50% 0%, #0d2a63 0%, #061233 70%); }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
img { -webkit-user-drag: none; user-select: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; border-radius: 10px; }

#app { position: relative; width: 100%; max-width: 520px; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--abyss); box-shadow: 0 0 60px rgba(0, 0, 0, .6); }

/* ---------- header: price ticker + player ---------- */
#top { flex: none; height: var(--head-h); display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; background: linear-gradient(#0b2459, #081a45); border-bottom: 2px solid var(--gold-lo); position: relative; z-index: 20; }
#ticker { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: stretch; border-radius: 12px; overflow: hidden; background: linear-gradient(#1348a8, #0d3a8c); border: 2px solid #3d73c9; box-shadow: inset 0 0 12px rgba(0, 0, 0, .35); }
#ticker .walker { flex: none; width: 46px; position: relative; z-index: 2; background: linear-gradient(90deg, #1348a8 70%, rgba(19, 72, 168, 0)); }
#ticker .lane { position: relative; flex: 1; overflow: hidden; display: flex; align-items: center; }
#ticker .lane::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: #fff; opacity: .9; }
#track { display: flex; gap: 26px; white-space: nowrap; padding-left: 12px; animation: scroll 24s linear infinite; will-change: transform; font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .2px; }
#track .sym { display: inline-flex; align-items: baseline; gap: 6px; }
#track .sym b { color: var(--gold-hi); font-weight: 600; }
#track .up { color: #6df2a6; } #track .down { color: #ff8e82; }
@keyframes scroll { to { transform: translateX(-50%); } }
.walker svg { width: 100%; height: 100%; overflow: visible; }
.walker .leg { transform-origin: 23px 27px; animation: step .7s ease-in-out infinite alternate; }
.walker .leg.b { animation-direction: alternate-reverse; }
.walker .arm { transform-origin: 23px 19px; animation: step .7s ease-in-out infinite alternate-reverse; }
.walker .arm.b { animation-direction: alternate; }
.walker .fig { animation: bob .35s ease-in-out infinite alternate; }
.walker .bub { animation: bub 1.8s ease-out infinite; }
.walker .bub.b2 { animation-delay: .6s; } .walker .bub.b3 { animation-delay: 1.2s; }
@keyframes bub { from { transform: translate(0, 0); opacity: .95; } to { transform: translate(2px, -11px); opacity: 0; } }
@keyframes step { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }

#me { flex: none; display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 9px 0 4px; border-radius: 14px; background: linear-gradient(var(--panel-a), var(--panel-b)); border: 2px solid var(--gold); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); max-width: 150px; }
#me .av { width: 34px; height: 34px; border-radius: 50%; background: #0a2d6e; border: 2px solid var(--gold-hi); object-fit: contain; padding: 2px; }
#me .who { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.05; }
#me .nm { font-family: var(--font-display); font-size: 13px; font-weight: 600; max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#me .lv { font-size: 11px; color: var(--gold-hi); font-weight: 800; }

/* ---------- chips ---------- */
#chips { flex: none; height: var(--chips-h); display: flex; gap: 8px; padding: 5px 8px; background: linear-gradient(#081a45, #061233); position: relative; z-index: 19; }
.chip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 6px 0 4px; border-radius: 99px; font-family: var(--font-display); font-weight: 600; font-size: 15px; border: 2px solid var(--gold); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 2px 6px rgba(0, 0, 0, .4); }
.chip.pearl { background: linear-gradient(#37c57f, #0f8f55); border-color: #7ae6b0; }
.chip.ll { background: linear-gradient(#f3c24b, #b57a1c); border-color: var(--gold-hi); color: #2a1a00; }
.chip img { width: 26px; height: 26px; flex: none; object-fit: contain; }
.chip .v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.chip.ll .v { text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.chip .plus { flex: none; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(#ffe9a6, #d99a25); border: 2px solid #8a5a10; color: #5a3600; display: grid; place-items: center; font-size: 17px; line-height: 1; font-weight: 800; }

/* ---------- views ---------- */
#views { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.view { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; display: none; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom)); }
.view.on { display: block; animation: viewIn .28s ease-out; }
@keyframes viewIn { from { opacity: 0; } to { opacity: 1; } }
.page-title { font-family: var(--font-display); font-weight: 700; font-size: 26px; text-align: center; margin: 14px 0 4px; color: var(--foam); text-shadow: 0 2px 0 #0a2d6e, 0 0 18px rgba(120, 190, 255, .55); }
.pad { padding: 0 14px; }

/* ---------- bottom bar ---------- */
#bar { position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); height: 56px; display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 18px; background: linear-gradient(#10316f, #081a45); border: 2px solid var(--gold); box-shadow: 0 6px 18px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .1); z-index: 30; }
#bar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--mist); font-family: var(--font-display); font-size: 12px; font-weight: 600; }
#bar button + button::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: rgba(255, 255, 255, .12); }
#bar svg { width: 26px; height: 26px; }
#bar button.on { color: var(--gold-hi); }
#bar button.on svg { filter: drop-shadow(0 0 6px rgba(255, 210, 90, .8)); transform: translateY(-1px); }

/* ---------- panels, buttons ---------- */
.panel { background: linear-gradient(var(--panel-a), var(--panel-b)); border: 2px solid var(--gold); border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 8px 18px rgba(0, 0, 0, .35); padding: 14px; }
.panel + .panel { margin-top: 12px; }
.panel h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--gold-hi); }
.muted { color: var(--mist); font-weight: 600; font-size: 13px; line-height: 1.4; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 15px; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #2a1a00; background: linear-gradient(#ffe28f, #e8b53a 55%, #c58a22); border: 2px solid #fff0b8; box-shadow: 0 4px 0 #8a5a10, 0 8px 14px rgba(0, 0, 0, .35); transition: transform .08s, box-shadow .08s; }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #8a5a10; }
.btn.go { color: #05361e; background: linear-gradient(#7af0b0, #28d17c 55%, #14a35f); border-color: #c8ffe0; box-shadow: 0 4px 0 #0a6a3b, 0 8px 14px rgba(0, 0, 0, .35); }
.btn.blue { color: #eaf4ff; background: linear-gradient(#4f8be8, #1f5fc7 60%, #174aa0); border-color: #9cc4ff; box-shadow: 0 4px 0 #0d2f6b, 0 8px 14px rgba(0, 0, 0, .35); }
.btn.ghost { color: var(--foam); background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .25); box-shadow: none; }
.btn:disabled { filter: grayscale(.8) brightness(.7); cursor: not-allowed; }
.btn.block { width: 100%; }
.row { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.right { margin-left: auto; text-align: right; }
.num { font-family: var(--font-display); font-weight: 700; }
input[type=text], input[type=number], input[type=search] { width: 100%; height: 46px; padding: 0 14px; border-radius: 13px; border: 2px solid #3d73c9; background: #071a45; color: var(--foam); font: inherit; font-weight: 700; font-size: 16px; }
input:focus-visible { outline-offset: 0; border-color: var(--gold-hi); }

/* ---------- tower scene ---------- */
#v-home { background: linear-gradient(#061233, #0b2459); }
.scene { position: relative; width: 100%; aspect-ratio: 848 / 1260; overflow: hidden; margin: 0 auto; background: #0a2d6e; user-select: none; touch-action: manipulation; }
.scene > * { position: absolute; }
.scene .bg { left: 0; top: 0; width: 100%; height: 100%; display: block; }
.scene canvas.fx { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.sun-hide { border-radius: 50%; background: radial-gradient(circle, #1e87d7 62%, rgba(30, 135, 215, 0) 72%); opacity: 0; transition: opacity 3s; pointer-events: none; }
.moon { border-radius: 50%; background: #f6f3d4; box-shadow: 0 0 24px 6px rgba(255, 250, 210, .55); opacity: 0; transition: opacity 3s; pointer-events: none; overflow: hidden; }
.moon::after { content: ''; position: absolute; width: 90%; height: 90%; left: 26%; top: -10%; border-radius: 50%; background: #1e87d7; }
.sky-tint { left: 0; top: 0; width: 100%; background: #243a85; mix-blend-mode: multiply; opacity: 0; transition: opacity 3s; pointer-events: none; }
.veil { left: 0; top: 0; width: 100%; background: linear-gradient(rgba(95, 105, 125, .75), rgba(120, 130, 150, .35)); opacity: 0; transition: opacity 3s; pointer-events: none; }
.flash { left: 0; top: 0; width: 100%; background: #fff; opacity: 0; pointer-events: none; }
.flash.on { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: .85; } 20% { opacity: .1; } 35% { opacity: .7; } 100% { opacity: 0; } }

.girl { transform: translate(-50%, -50%); width: calc(var(--u) * 92); height: calc(var(--u) * 82); border-radius: 12px; }
.girl .bd { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 55%, rgba(8, 20, 54, .96) 52%, rgba(8, 20, 54, 0) 74%); }
.girl img { position: absolute; left: 50%; top: 50%; height: 84%; width: auto; transform: translate(-50%, -50%); transform-origin: 50% 90%; animation: type 1.1s ease-in-out infinite alternate; pointer-events: none; }
.girl:nth-child(3n) img { animation-duration: 1.35s; } .girl:nth-child(4n) img { animation-duration: .95s; }
@keyframes type { from { transform: translate(-50%, -50%) rotate(-1.2deg); } to { transform: translate(-50%, -51.5%) rotate(1.2deg); } }
.girl.sleep img { animation: breathe 3.2s ease-in-out infinite alternate; filter: saturate(.55) brightness(.78); }
@keyframes breathe { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -49%) scale(1.035); } }
.girl .lvb { position: absolute; right: 2%; bottom: 3%; min-width: calc(var(--u) * 30); padding: 0 calc(var(--u) * 4); text-align: center; font-family: var(--font-display); font-weight: 700; font-size: max(8px, calc(var(--u) * 15)); line-height: 1.35; color: #2a1a00; background: linear-gradient(#ffe28f, #e8b53a); border-radius: 99px; border: 1px solid #fff0b8; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); pointer-events: none; }
.girl.sleep .lvb { filter: grayscale(.7); }
.girl .zzz { position: absolute; left: 62%; top: -2%; font-family: var(--font-display); font-weight: 700; color: #cfe6ff; font-size: max(10px, calc(var(--u) * 22)); text-shadow: 0 0 6px #5aa0ff; opacity: 0; pointer-events: none; }
.girl.sleep .zzz { animation: zzz 2.4s ease-in-out infinite; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 6px) scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -16px) scale(1.15); } }
.girl.pop { animation: pop .45s ease-out; }
@keyframes pop { 40% { transform: translate(-50%, -50%) scale(1.25); } }

.lowgirl { transform: translate(-50%, -50%); border-radius: 18px; width: calc(var(--u) * 150); height: calc(var(--u) * 78); }
.pill { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 1px 9px; border-radius: 99px; font-family: var(--font-display); font-weight: 700; font-size: max(10px, calc(var(--u) * 22)); color: #2a1a00; background: linear-gradient(#ffe28f, #e8b53a); border: 2px solid #fff0b8; box-shadow: 0 2px 6px rgba(0, 0, 0, .55); pointer-events: none; }
.pill.green { color: #05361e; background: linear-gradient(#7af0b0, #28d17c); border-color: #c8ffe0; }
.mermaid { transform-origin: 50% 50%; cursor: pointer; will-change: transform; }
.elev { pointer-events: none; will-change: transform; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }
.elev-hit { background: transparent; }
.elev-label { transform: translateX(-50%); }
.elev-label .pill { position: static; transform: none; display: block; }
.elev-label.full .pill { animation: throb 1s ease-in-out infinite alternate; background: linear-gradient(#7af0b0, #28d17c); border-color: #c8ffe0; color: #05361e; }
@keyframes throb { to { transform: scale(1.1); } }
.floaty { font-family: var(--font-display); font-weight: 700; color: #c8ffe0; text-shadow: 0 2px 0 #0a6a3b, 0 0 12px #28d17c; font-size: max(14px, calc(var(--u) * 34)); pointer-events: none; transform: translateX(-50%); animation: floaty 1.4s ease-out forwards; z-index: 40; }
@keyframes floaty { to { transform: translate(-50%, -70px); opacity: 0; } }
.bulb { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; pointer-events: none; animation: blink 1.4s ease-in-out infinite alternate; box-shadow: 0 0 10px currentColor; background: currentColor; }
@keyframes blink { 0% { opacity: 1; } 100% { opacity: .35; } }
.deco { pointer-events: none; font-size: calc(var(--u) * 54); line-height: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.sleep-note { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; pointer-events: none; }
.sleep-note span { display: inline-block; padding: 3px 12px; border-radius: 99px; background: rgba(6, 18, 51, .82); border: 1px solid rgba(255, 255, 255, .2); font-size: 12px; color: var(--mist); }

/* ---------- treasury ---------- */
.banner { position: relative; width: 100%; display: block; }
.banner img { width: 100%; display: block; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.bar { display: flex; align-items: center; gap: 10px; height: 64px; margin: 10px 0; padding: 0 12px 0 8px; border-radius: 99px; border: 3px solid var(--gold); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 5px 12px rgba(0, 0, 0, .45); font-family: var(--font-display); }
.bar.pearl { background: linear-gradient(#37c57f, #0f8f55); }
.bar.ll { background: linear-gradient(#f3c24b, #b57a1c); color: #2a1a00; }
.bar img { width: 46px; height: 46px; object-fit: contain; flex: none; }
.bar .big { font-size: 28px; font-weight: 700; line-height: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.bar.ll .big { text-shadow: 0 2px 0 rgba(255, 255, 255, .35); }
.bar .small { font-size: 12px; font-weight: 600; opacity: .9; margin-top: 2px; }
.bar .plus { margin-left: auto; width: 40px; height: 40px; flex: none; border-radius: 50%; background: radial-gradient(#ffe9a6, #d99a25); border: 3px solid #8a5a10; color: #5a3600; font-size: 28px; font-weight: 800; display: grid; place-items: center; line-height: 1; }
.walletbtn { width: 100%; height: 72px; margin-top: 4px; border-radius: 20px; border: 4px solid var(--gold); background: linear-gradient(#2c6ae0, #123f9c); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 6px 14px rgba(0, 0, 0, .5); font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: 1px; color: #eaf4ff; text-shadow: 0 3px 0 #0a2d6e; display: flex; align-items: center; justify-content: center; gap: 14px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.stat { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.stat .k { font-size: 12px; color: var(--mist); } .stat .n { font-family: var(--font-display); font-weight: 700; font-size: 20px; }

/* ---------- exchange (Mine) ---------- */
.hero { display: flex; align-items: center; gap: 14px; }
.hero img { width: 76px; height: 76px; flex: none; filter: drop-shadow(0 0 14px rgba(80, 150, 255, .7)); }
.hero .t { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.hero .p { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1; background: linear-gradient(90deg, #b9a6ff, #5aa0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero svg { margin-left: auto; width: 90px; height: 60px; flex: none; }
.timer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.timer div { text-align: center; padding: 8px 0 6px; border-radius: 12px; background: #071a45; border: 1px solid #3d73c9; }
.timer b { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.timer span { font-size: 11px; color: var(--mist); }
.rate { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid rgba(255, 255, 255, .1); }
.rate:first-of-type { border-top: 0; }
.coin { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; flex: none; color: #fff; }
.coin.usdt { background: #26a17b; } .coin.sui { background: #4da2ff; } .coin.ton { background: #0098ea; }
.rate .nm { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.1; }
.rate .sub { font-size: 12px; color: var(--mist); }
.rate .eq { margin-left: auto; text-align: right; font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.rate .eq b { color: #7fc0ff; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; border-radius: 15px; background: #071a45; border: 1px solid #3d73c9; }
.seg button { height: 44px; border-radius: 11px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--mist); }
.seg button.on { background: linear-gradient(#4f8be8, #1f5fc7); color: #fff; box-shadow: 0 2px 0 #0d2f6b; }
.chipsrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.amt { height: 38px; padding: 0 14px; border-radius: 99px; border: 2px solid #3d73c9; font-family: var(--font-display); font-weight: 600; font-size: 15px; background: #071a45; }
.amt.on { border-color: var(--gold-hi); background: #2a2a0a; color: var(--gold-hi); }
.warn { padding: 10px 12px; border-radius: 12px; background: rgba(255, 107, 90, .14); border: 1px solid rgba(255, 107, 90, .55); color: #ffd2cc; font-size: 13px; line-height: 1.4; }
.addr { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 13px; background: #071a45; border: 1px solid #3d73c9; margin-top: 8px; }
.addr .tx { flex: 1; min-width: 0; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; word-break: break-all; line-height: 1.3; }
.addr .lb { font-size: 11px; color: var(--mist); display: block; font-family: var(--font-body); margin-bottom: 1px; }
.copy { flex: none; height: 38px; padding: 0 12px; border-radius: 11px; background: linear-gradient(#4f8be8, #1f5fc7); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 14px; box-shadow: 0 2px 0 #0d2f6b; }
.copy.done { background: linear-gradient(#7af0b0, #28d17c); color: #05361e; }
.wait { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--mist); font-size: 13px; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .2); border-top-color: var(--gold-hi); animation: spin .9s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.hist { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 14px; }
.hist:first-of-type { border-top: 0; }

/* ---------- top / rules ---------- */
.lbrow { display: flex; align-items: center; gap: 10px; height: 58px; margin: 6px 0; padding: 0 10px; border-radius: 14px; background: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)), #0a2152; border: 1px solid rgba(255, 255, 255, .13); }
.lbrow.me { border: 2px solid var(--gold-hi); background: #1a3f86; }
.lbrow .rk { width: 38px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--mist); flex: none; }
.lbrow.r1 .rk { color: #ffd45a; } .lbrow.r2 .rk { color: #dfe7f3; } .lbrow.r3 .rk { color: #e39a5a; }
.lbrow .pf { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: #0a2d6e; border: 2px solid #3d73c9; }
.lbrow .pf.fish { object-fit: contain; padding: 3px; }
.lbrow .nm { font-family: var(--font-display); font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbrow .pts { font-size: 12px; color: var(--mist); }
.prize { margin-left: auto; flex: none; display: flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.prize svg { width: 30px; height: 30px; }
.mebar { position: sticky; bottom: 0; }
.rule { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 16px; background: linear-gradient(var(--panel-a), var(--panel-b)); border: 2px solid #c9a24a; margin-top: 10px; }
.rule .ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; font-size: 26px; }
.rule b { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--foam); display: block; margin-bottom: 2px; }
.rule p { margin: 0; font-size: 14px; line-height: 1.4; color: #cfe0ff; font-weight: 600; }

/* ---------- sheet / toast / boot ---------- */
#sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(2, 8, 28, .66); animation: fade .2s; }
#sheet .card { width: 100%; max-width: 520px; max-height: 88dvh; overflow-y: auto; padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: linear-gradient(#123a7e, #0a2152); border: 3px solid var(--gold); border-bottom: 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .5); animation: rise .28s cubic-bezier(.2, .9, .3, 1); }
#sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .3); margin: -6px auto 12px; }
#sheet h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 22px; }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
#toast { position: fixed; left: 50%; top: calc(var(--head-h) + var(--chips-h) + 14px); transform: translateX(-50%); z-index: 90; max-width: min(92vw, 480px); padding: 10px 16px; border-radius: 14px; font-weight: 700; font-size: 14px; text-align: center; background: #071a45; border: 2px solid var(--gold-hi); box-shadow: 0 8px 20px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
#toast.on { opacity: 1; transform: translate(-50%, 6px); }
#toast.bad { border-color: var(--coral); } #toast.good { border-color: var(--pearl); }
#boot { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 24px; background: radial-gradient(100% 70% at 50% 30%, #123a7e, #061233); transition: opacity .5s; }
#boot.off { opacity: 0; pointer-events: none; }
#boot img { width: 120px; height: 120px; animation: floatc 2.4s ease-in-out infinite alternate; filter: drop-shadow(0 0 22px rgba(90, 160, 255, .8)); }
#boot .tt { font-family: var(--font-display); font-weight: 700; font-size: 30px; }
#boot .ss { color: var(--mist); max-width: 300px; line-height: 1.45; }
@keyframes floatc { to { transform: translateY(-10px); } }
.fishgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.fishgrid button { aspect-ratio: 1; border-radius: 14px; background: #071a45; border: 2px solid #3d73c9; display: grid; place-items: center; }
.fishgrid button.on { border-color: var(--gold-hi); background: #2a2a0a; }
.fishgrid img { width: 80%; height: 80%; object-fit: contain; }
.sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.toggle { width: 54px; height: 30px; border-radius: 99px; background: #3a4a70; position: relative; transition: background .2s; flex: none; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle.on { background: var(--pearl-lo); } .toggle.on::after { transform: translateX(24px); }
.hr { height: 1px; background: rgba(255, 255, 255, .12); margin: 10px 0; }
.upinfo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 14px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  #track { animation: none; }
}

/* ---------- additions ---------- */
#wakebar { position: absolute; left: 0; right: 0; bottom: calc(var(--nav-h) + 14px + env(safe-area-inset-bottom)); display: flex; justify-content: center; pointer-events: none; z-index: 25; }
#wakebar > div { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-radius: 99px; background: rgba(6, 18, 51, .92); border: 2px solid var(--gold); font-size: 14px; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
#wakebar .btn { min-height: 36px; padding: 0 14px; font-size: 15px; }
.sym i, .sym em { font-style: normal; }
.sym .ar { font-size: 10px; }
.pad .panel:first-child { margin-top: 12px; }
#homeExtra { padding-top: 12px; padding-bottom: 8px; }
.backlink { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; margin: 10px 0 0 14px; border-radius: 99px; background: rgba(6, 18, 51, .75); border: 1px solid rgba(255, 255, 255, .25); font-family: var(--font-display); font-weight: 600; font-size: 14px; position: absolute; z-index: 5; }
.big-title { font-family: var(--font-display); font-weight: 700; font-size: 30px; text-align: center; margin: -26px 0 12px; position: relative; text-shadow: 0 3px 0 #0a2d6e, 0 0 20px rgba(120, 190, 255, .6); }
.lbrow.ghost { opacity: .5; }
.pre { font-variant-numeric: tabular-nums; }
.ok { color: #7af0b0; } .bad { color: #ff8e82; }
.tip { margin-top: 10px; font-size: 12px; color: var(--mist); line-height: 1.45; }
.linkish { color: #8fc2ff; text-decoration: underline; }
.scene .girls { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.girls .girl { position: absolute; pointer-events: auto; padding: 0; border: 0; background: none; cursor: pointer; }

/* ---------- spinning coin in the ticker (like a coin spun upright by hand) ---------- */
#ticker .walker { display: grid; place-items: center; perspective: 220px; }
.coin3d { position: relative; width: 34px; height: 34px; transform-style: preserve-3d; animation: coinspin 4.6s infinite; will-change: transform; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.coin3d .face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.coin3d .face.b { transform: rotateY(180deg); }
@keyframes coinspin {
  0% { transform: rotateY(0) rotateZ(0); animation-timing-function: cubic-bezier(.15, .6, .3, 1); }
  72% { transform: rotateY(1800deg) rotateZ(0); }
  100% { transform: rotateY(1800deg) rotateZ(0); }
}
@media (prefers-reduced-motion: reduce) { .coin3d { animation: none; } }

.title-glow { background: radial-gradient(ellipse at 50% 50%, rgba(255, 205, 100, .42), rgba(255, 170, 60, 0) 68%); mix-blend-mode: screen; opacity: 0; transition: opacity 3s; pointer-events: none; }