/* =============================================================================
   HEXAROLL — UI STYLES (Royal Match / Toon Blast "tactile toybox" UI kit)
   ============================================================================= */
:root {
  --purple-1: #8b5cf6; --purple-2: #6d28d9; --purple-3: #4c1d95; --purple-4: #2e1065;
  --gold-1: #fff3b0; --gold-2: #ffd34d; --gold-3: #f5a623; --gold-4: #b06a00;
  --green-1: #8ef05a; --green-2: #4cc72b; --green-3: #2f9a17; --green-4: #1d6b0c;
  --blue-1: #7dd3fc; --blue-2: #38a5f5; --blue-3: #1d6fd6; --blue-4: #0f3f8c;
  --red-1: #ff8a8a; --red-2: #f2484b; --red-3: #c61f2b; --red-4: #7f1018;
  --ink: #2a1250;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --font-head: 'Lilita One', 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-body: 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --col: min(100vw, 560px);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #1a0b3a; color: #fff; font-family: var(--font-body); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; overscroll-behavior: none; }
button { font-family: inherit; color: inherit; border: none; background: none; cursor: pointer; }
img { -webkit-user-drag: none; }
.ico { width: 1.3em; height: 1.3em; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
b, strong { font-weight: 700; }

/* ---------------------------------------------------------------- BACKGROUND */
#bgLayer { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
#bgImg, #bgImgNext { position: absolute; inset: -20px; background: #5fc4ff center / cover no-repeat; transition: opacity .7s ease, filter .5s ease, transform 1.2s ease; }
#bgImgNext { opacity: 0; }
body.on-map #bgImg, body.on-map #bgImgNext { filter: blur(14px) saturate(1.1) brightness(.85); transform: scale(1.06); }
#bgVignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(20,6,50,.35) 100%); pointer-events: none; transition: background .8s ease; }
.bg-atmos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; opacity: .78; }
body.on-map .bg-atmos { display: none; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; touch-action: none; }
body.on-map #gl { visibility: hidden; }

/* ---------------------------------------------------------------- BUTTONS */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 52px; padding: 0 26px; border-radius: 18px;
  font-family: var(--font-head); font-size: 20px; letter-spacing: .02em; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.28);
  border: 3px solid rgba(255,255,255,.55); box-shadow: inset 0 -6px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.35), 0 5px 0 var(--btn-edge, #1d6b0c), 0 9px 18px rgba(0,0,0,.28);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s; white-space: nowrap; }
.btn:active { transform: translateY(4px); box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.35), 0 1px 0 var(--btn-edge), 0 3px 8px rgba(0,0,0,.25); }
.btn[disabled] { filter: grayscale(.8) brightness(.8); pointer-events: none; }
.btn-green { background: linear-gradient(180deg, var(--green-1), var(--green-2) 55%, var(--green-3)); --btn-edge: var(--green-4); }
.btn-gold { background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 50%, var(--gold-3)); --btn-edge: var(--gold-4); color: #6b3a00; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.btn-blue { background: linear-gradient(180deg, var(--blue-1), var(--blue-2) 55%, var(--blue-3)); --btn-edge: var(--blue-4); }
.btn-purple { background: linear-gradient(180deg, #c4a5ff, var(--purple-1) 55%, var(--purple-2)); --btn-edge: var(--purple-4); }
.btn-red { background: linear-gradient(180deg, var(--red-1), var(--red-2) 55%, var(--red-3)); --btn-edge: var(--red-4); }
.btn-gray { background: linear-gradient(180deg, #e2e8f0, #a8b3c5 55%, #7c879b); --btn-edge: #4b5466; }
.btn-lg { min-height: 60px; font-size: 23px; padding: 0 30px; }
.btn-xl { min-height: 74px; font-size: 30px; padding: 0 44px; border-radius: 24px; }
.btn-sm { min-height: 40px; font-size: 16px; padding: 0 14px; border-radius: 14px; border-width: 2px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.35), 0 4px 0 var(--btn-edge), 0 6px 10px rgba(0,0,0,.25); }
.btn .sub { font-family: var(--font-body); font-size: .62em; font-weight: 700; opacity: .95; }
.btn-stack { flex-direction: column; gap: 0; line-height: 1.05; padding-top: 4px; padding-bottom: 4px; }
.btn-link { font-weight: 700; font-size: 15px; color: rgba(255,255,255,.75); text-decoration: underline; padding: 10px; }
.round-btn { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #a78bfa, var(--purple-2)); border: 3px solid var(--gold-2);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), inset 0 3px 0 rgba(255,255,255,.3), 0 4px 0 var(--purple-4), 0 6px 14px rgba(0,0,0,.3); }
.round-btn svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.round-btn:active { transform: translateY(3px); }

.pill { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 6px; border-radius: 999px; background: linear-gradient(180deg, rgba(46,16,101,.88), rgba(30,8,70,.9));
  border: 2.5px solid rgba(255,214,90,.9); box-shadow: 0 4px 0 rgba(20,4,48,.55), inset 0 2px 0 rgba(255,255,255,.12); font-family: var(--font-head); font-size: 20px; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.pill .ico { width: 34px; height: 34px; margin-left: -10px; }
.pill .plus { font-style: normal; display: grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; margin-right: -8px; border-radius: 8px; background: linear-gradient(180deg, var(--green-1), var(--green-3)); font-size: 18px; line-height: 1; box-shadow: 0 2px 0 var(--green-4); }
.bump { animation: bump .25s ease; }
@keyframes bump { 50% { transform: scale(1.18); } }

/* ---------------------------------------------------------------- HUD (in-game) */
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; display: none; }
body.in-game #hud { display: block; }
#hud > * { pointer-events: auto; }
.hud-top { position: absolute; top: calc(10px + var(--safe-t)); left: 10px; right: 10px; display: flex; align-items: flex-start; gap: 10px; }
.level-card { flex: 0 1 380px; margin: 0 auto; padding: 6px 14px 10px; border-radius: 20px; background: linear-gradient(180deg, rgba(124,58,237,.95), rgba(76,29,149,.96)); border: 3px solid var(--gold-2);
  box-shadow: 0 5px 0 var(--purple-4), 0 10px 22px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.25); text-align: center; }
.lc-world { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--gold-1); opacity: .9; text-transform: uppercase; }
.lc-title { font-family: var(--font-head); font-size: 24px; line-height: 1.05; display: flex; align-items: center; justify-content: center; gap: 8px; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.diff { font-family: var(--font-body); font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 999px; letter-spacing: .08em; display: none; }
.diff.hard { display: inline-block; background: linear-gradient(180deg, #ff6b6b, #c81e2a); box-shadow: 0 2px 0 #6b0d14; }
.diff.superhard { display: inline-block; background: linear-gradient(180deg, #e879f9, #7e22ce); box-shadow: 0 2px 0 #3b0764; }
.lc-bar { position: relative; height: 18px; margin-top: 6px; border-radius: 999px; background: rgba(20,4,48,.7); border: 2px solid rgba(255,255,255,.25); overflow: hidden; }
.lc-fill { position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: 999px; background: linear-gradient(180deg, #b9f871, #4cc72b); box-shadow: inset 0 3px 0 rgba(255,255,255,.4); transition: width .25s ease; }
.lc-steps { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.gem-row { display: flex; gap: 4px; padding: 4px 8px; border-radius: 999px; background: rgba(30,8,70,.65); }
.gem-row:empty { display: none; }
.gem-pip { width: 18px; height: 22px; clip-path: polygon(50% 0, 100% 30%, 80% 100%, 20% 100%, 0 30%); background: rgba(255,255,255,.25); transition: transform .2s; }
.gem-pip.got { transform: scale(1.15); }
.streak-chip { position: absolute; top: calc(108px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 6px; padding: 4px 14px 4px 6px; border-radius: 999px;
  background: linear-gradient(90deg, #ff9a1f, #ff4d4d); border: 2px solid #ffe08a; font-family: var(--font-head); font-size: 15px; text-shadow: 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 4px 12px rgba(255,90,30,.45); white-space: nowrap; }
.streak-chip.show { display: inline-flex; }
.streak-chip img { width: 26px; height: 26px; }
.tut-toast { position: absolute; left: 50%; bottom: calc(130px + var(--safe-b)); transform: translateX(-50%) translateY(20px); width: min(92vw, 520px); padding: 12px 18px; border-radius: 18px; text-align: center;
  background: rgba(255,255,255,.96); color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.35; box-shadow: 0 8px 24px rgba(0,0,0,.25); border: 3px solid var(--gold-2); opacity: 0; pointer-events: none; transition: all .35s ease; }
.tut-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.tut-toast b { color: var(--purple-2); }
.onboard-hand { position: fixed; inset: 0; pointer-events: none; z-index: 6; display: none; }
.onboard-hand .oh-ring { position: absolute; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; border: 3px solid #8ef05a; box-shadow: 0 0 18px rgba(142,240,90,.9), inset 0 0 12px rgba(142,240,90,.55); animation: ohPulse 1.15s ease-in-out infinite; }
.onboard-hand .oh-ico { position: absolute; font-size: 38px; line-height: 1; margin: -6px 0 0 -14px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.55)); transform-origin: 35% 15%; }
@keyframes ohPulse { 0%, 100% { transform: scale(.86); opacity: .95; } 50% { transform: scale(1.22); opacity: .55; } }

.dock { position: absolute; left: 50%; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%); display: flex; gap: 12px; padding: 10px 14px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(124,58,237,.92), rgba(60,20,130,.95)); border: 3px solid var(--gold-2); box-shadow: 0 6px 0 var(--purple-4), 0 12px 26px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.25); }
.dock-btn { position: relative; width: 74px; height: 74px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: linear-gradient(180deg, #fffdf4, #f3e3b6); border: 3px solid #fff; box-shadow: inset 0 -5px 0 rgba(176,106,0,.25), 0 4px 0 #a06a10, 0 6px 12px rgba(0,0,0,.25); color: #6b3a00; transition: transform .08s; }
.dock-btn:active { transform: translateY(3px) scale(.97); }
.dock-btn img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.dock-btn svg { width: 34px; height: 34px; fill: none; stroke: #7c4a03; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.dock-btn .lbl { font-family: var(--font-head); font-size: 13px; line-height: 1; }
.dock-btn .cnt { position: absolute; top: -9px; right: -9px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-family: var(--font-head); font-size: 15px;
  background: linear-gradient(180deg, #ff6b6b, #d61f2b); border: 2.5px solid #fff; color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.dock-btn .cnt.free { background: linear-gradient(180deg, #8ef05a, #2f9a17); }
.dock-btn .cnt.plus { background: linear-gradient(180deg, #8ef05a, #2f9a17); font-size: 20px; }
.dock-btn.small { width: 62px; }

/* ---------------------------------------------------------------- MAP SCREEN */
#mapScreen { position: fixed; inset: 0; z-index: 4; display: none; }
body.on-map #mapScreen { display: block; }
#mapScroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#mapScroll::-webkit-scrollbar { display: none; }
#mapInner { position: relative; width: var(--col); margin: 0 auto; box-shadow: 0 0 60px rgba(0,0,0,.45); overflow: hidden; }
.map-page { position: absolute; left: 0; width: 100%; background-size: 100% 100%; background-color: #2e1065; pointer-events: none; }
.map-page.flip { transform: scaleX(-1); }
.map-page.locked { filter: grayscale(.55) brightness(.85); }
.map-svg { position: absolute; left: 0; top: 0; width: 100%; z-index: 3; pointer-events: none; overflow: hidden; }
.world-gate { position: absolute; left: -6%; width: 112%; height: 230px; margin-top: -115px; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.world-gate.frontier-cap { left: 0; width: 100%; margin-top: 0; }
.world-gate::before { content: ''; position: absolute; inset: 0; background:
  radial-gradient(ellipse 38% 42% at 8% 52%, rgba(255,255,255,0.92) 0%, rgba(242,247,255,0.68) 46%, rgba(242,247,255,0) 78%),
  radial-gradient(ellipse 34% 38% at 24% 46%, rgba(255,255,255,0.85) 0%, rgba(240,246,255,0.52) 48%, rgba(240,246,255,0) 78%),
  radial-gradient(ellipse 34% 38% at 76% 54%, rgba(255,255,255,0.85) 0%, rgba(240,246,255,0.52) 48%, rgba(240,246,255,0) 78%),
  radial-gradient(ellipse 38% 42% at 92% 48%, rgba(255,255,255,0.92) 0%, rgba(242,247,255,0.68) 46%, rgba(242,247,255,0) 78%),
  linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(245,248,255,0.22) 28%, rgba(250,252,255,0.52) 50%, rgba(245,248,255,0.22) 72%, rgba(255,255,255,0) 100%);
  filter: drop-shadow(0 8px 16px rgba(24,12,56,.22)); pointer-events: none; }
.world-gate::after { content: ''; position: absolute; inset: 18px 0; background:
  radial-gradient(ellipse 26% 32% at 14% 56%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 72%),
  radial-gradient(ellipse 26% 32% at 86% 46%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 72%);
  pointer-events: none; }
.gate-ribbon { position: relative; z-index: 2; padding: 7px 24px 9px; border-radius: 999px; text-align: center; background: linear-gradient(180deg, var(--wc, #7c3aed), color-mix(in srgb, var(--wc, #7c3aed) 68%, #090318));
  border: 2.5px solid var(--gold-2); box-shadow: 0 0 0 3px rgba(255,255,255,.32), 0 4px 0 rgba(0,0,0,.35), 0 10px 22px rgba(0,0,0,.32); pointer-events: auto; cursor: pointer; transition: transform .14s; }
.gate-ribbon:hover { transform: scale(1.04); }
.gate-ribbon .gw { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--gold-1); }
.gate-ribbon .gn { font-family: var(--font-head); font-size: 20px; line-height: 1.1; text-shadow: 0 2px 0 rgba(0,0,0,.35); white-space: nowrap; }
.gate-ribbon .gs { font-size: 11.5px; font-weight: 600; opacity: .92; }
.gate-ribbon.locked::after { content: '🔒'; position: absolute; top: -12px; right: -10px; font-size: 20px; }

.node { position: absolute; z-index: 4; width: 66px; height: 66px; margin: -33px 0 0 -33px; display: grid; place-items: center; cursor: pointer; transition: transform .12s; }
.node:active { transform: scale(.92); }
.node .hex { position: absolute; inset: 0; clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); background: linear-gradient(180deg, #fff3b0, #ffc93c 55%, #e08e00); }
.node .hex::after { content: ''; position: absolute; inset: 5px; clip-path: inherit; background: linear-gradient(180deg, #ffe680, #ffb300); }
.node .num { position: relative; z-index: 1; font-family: var(--font-head); font-size: 24px; color: #fff; text-shadow: 0 2px 0 #9a5400, 0 0 6px rgba(154,84,0,.6); }
.node .stars { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); display: flex; gap: 1px; font-size: 15px; z-index: 3; }
.node .stars i { font-style: normal; color: #51406b; text-shadow: 0 1px 0 rgba(0,0,0,.5); -webkit-text-stroke: 1px rgba(0,0,0,.35); }
.node .stars i.on { color: #ffd34d; }
.node.locked .hex { background: linear-gradient(180deg, #c9d3e6, #8e9bb7); }
.node.locked .hex::after { background: linear-gradient(180deg, #b6c2da, #8090ad); }
.node.locked .num { text-shadow: 0 2px 0 #4b5672; color: #eef2ff; }
.node.locked.hard .hex, .node.locked.superhard .hex { filter: grayscale(.6) brightness(.9); }
.node.hard .hex { background: linear-gradient(180deg, #ffb3b3, #e5363f 55%, #8f0f19); }
.node.hard .hex::after { background: linear-gradient(180deg, #ff7a7a, #d61f2b); }
.node.hard .num { text-shadow: 0 2px 0 #6b0d14; }
.node.superhard .hex { background: linear-gradient(180deg, #f5c2ff, #a21caf 55%, #4a044e); }
.node.superhard .hex::after { background: linear-gradient(180deg, #e879f9, #86198f); }
.node.superhard .num { text-shadow: 0 2px 0 #3b0764; }
.node .tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; background: #1f0a3d; border: 1.5px solid rgba(255,255,255,.6); }
.node.current { width: 82px; height: 82px; margin: -41px 0 0 -41px; animation: nodePulse 1.4s ease-in-out infinite; }
.node.current .num { font-size: 30px; }
@keyframes nodePulse { 50% { transform: scale(1.08); filter: drop-shadow(0 0 14px rgba(255,236,120,.95)); } }
.node .chest { position: absolute; right: -40px; top: -8px; width: 44px; height: 44px; z-index: 3; filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); }
.node.left-chest .chest { right: auto; left: -40px; }
.node .chest.big { width: 60px; height: 60px; right: -54px; top: -16px; }
.node.left-chest .chest.big { left: -54px; }
.node.done .chest { filter: grayscale(.4) brightness(.9) drop-shadow(0 3px 3px rgba(0,0,0,.35)); opacity: .8; }
.avatar { position: absolute; z-index: 6; width: 58px; height: 58px; margin: -112px 0 0 -29px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,.35); background-size: 200% 100%;
  transition: left .7s cubic-bezier(.5,0,.2,1), top .7s cubic-bezier(.5,0,.2,1); animation: avBob 1.6s ease-in-out infinite; pointer-events: none; }
.avatar::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), rgba(255,255,255,0) 38%), radial-gradient(circle at 60% 70%, rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 100%); }
.avatar::after { content: ''; position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); border: 9px solid transparent; border-top-color: #fff; }
@keyframes avBob { 50% { transform: translateY(-6px); } }

.topbar { position: absolute; top: calc(10px + var(--safe-t)); left: 50%; transform: translateX(-50%); width: min(100vw, 560px); padding: 0 12px; display: flex; align-items: center; gap: 10px; z-index: 6; }
.topbar .coin-pill { margin-left: auto; cursor: pointer; }
.lives-pill { cursor: pointer; }
.lives-pill span { font-family: var(--font-body); font-weight: 700; font-size: 13px; opacity: .9; margin-left: 2px; }
.lives-pill.infinite b { color: #ffd34d; }
.side { position: absolute; top: calc(104px + var(--safe-t)); z-index: 6; display: flex; flex-direction: column; gap: 10px; }
.side-left { left: max(8px, calc(50vw - 280px + 8px)); }
.side-right { right: max(8px, calc(50vw - 280px + 8px)); align-items: flex-end; }
.side-btn { position: relative; width: 64px; height: 70px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 2px;
  background: linear-gradient(180deg, rgba(139,92,246,.95), rgba(76,29,149,.95)); border: 2.5px solid var(--gold-2); box-shadow: 0 4px 0 var(--purple-4), 0 6px 12px rgba(0,0,0,.3); }
.side-btn img { width: 46px; height: 46px; object-fit: contain; margin-top: -6px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.side-btn span { font-family: var(--font-head); font-size: 12.5px; line-height: 1; text-shadow: 0 1px 0 rgba(0,0,0,.4); margin-top: 1px; }
.side-btn .dot { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%; background: #ff3b3b; border: 2.5px solid #fff; display: none; animation: dotPulse 1s infinite; }
.side-btn.notify .dot { display: block; }
.side-btn.offer { background: linear-gradient(180deg, #ff9a3d, #e8452c); animation: offerWiggle 3s infinite; }
@keyframes dotPulse { 50% { transform: scale(1.25); } }
@keyframes offerWiggle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-8deg); } 94% { transform: rotate(8deg); } 97% { transform: rotate(-4deg); } }
.mini-bar { width: 46px; height: 6px; border-radius: 3px; background: rgba(0,0,0,.4); margin-top: 3px; overflow: hidden; }
.mini-bar div { height: 100%; width: 0; background: linear-gradient(90deg, #ffe680, #ffb300); }
.streak-badge { display: none; flex-direction: column; align-items: center; width: 64px; padding: 4px 0; border-radius: 18px; background: linear-gradient(180deg, #ff9a1f, #e5383b); border: 2.5px solid #ffe08a; box-shadow: 0 4px 0 #7a1010; }
.streak-badge.show { display: flex; }
.streak-badge img { width: 40px; height: 40px; margin-top: -4px; }
.streak-badge b { font-family: var(--font-head); font-size: 18px; line-height: 1; }
.streak-badge small { font-size: 9px; font-weight: 700; letter-spacing: .05em; }
.play-wrap { position: absolute; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); z-index: 6; }
body.has-banner .play-wrap { bottom: calc(150px + var(--safe-b)); }
#btnPlay { flex-direction: column; gap: 0; line-height: 1; min-width: 230px; animation: playBreath 2s ease-in-out infinite; }
#btnPlay .play-sub { font-family: var(--font-body); font-weight: 700; font-size: 16px; opacity: .95; margin-top: 2px; }
@keyframes playBreath { 50% { transform: scale(1.04); } }
.bottom-nav { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100vw, 560px); z-index: 6; display: flex; justify-content: space-around; padding: 8px 6px calc(8px + var(--safe-b));
  background: linear-gradient(180deg, rgba(91,33,182,.97), rgba(46,16,101,.99)); border-top: 3px solid var(--gold-2); border-radius: 22px 22px 0 0; box-shadow: 0 -6px 20px rgba(0,0,0,.3); }
body.has-banner .bottom-nav { bottom: 54px; }
.nav-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 19%; padding: 4px 0; border-radius: 14px; font-family: var(--font-head); font-size: 13px; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.nav-btn img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.nav-btn.active { background: linear-gradient(180deg, rgba(255,211,77,.35), rgba(255,211,77,.08)); }
.nav-orb, .orb { display: block; width: 38px; height: 38px; border-radius: 50%; background-size: 200% 100%; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.nav-orb::after, .orb::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), rgba(255,255,255,0) 38%), radial-gradient(circle at 55% 65%, rgba(0,0,0,0) 48%, rgba(0,0,0,.4) 100%); }
#bannerAd { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100vw, 560px); height: 54px; z-index: 7; display: none; align-items: center; justify-content: center; gap: 10px;
  background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 10px, #e2e8f0 10px, #e2e8f0 20px); color: #475569; font-size: 13px; font-weight: 700; border-top: 1px solid #cbd5e1; padding-bottom: var(--safe-b); }
#bannerAd.show { display: flex; }
.ad-tag { display: inline-block; padding: 1px 6px; border-radius: 4px; background: #facc15; color: #422006; font-size: 11px; font-weight: 800; letter-spacing: .05em; }

/* ---------------------------------------------------------------- MODALS */
#modalRoot { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(16px + var(--safe-t)) 14px calc(16px + var(--safe-b)); background: rgba(16,4,40,.62); backdrop-filter: blur(3px); pointer-events: auto; animation: fadeIn .2s ease; overflow-y: auto; }
.modal.closing { animation: fadeOut .18s ease forwards; }
@keyframes fadeIn { from { opacity: 0; } } @keyframes fadeOut { to { opacity: 0; } }
.panel { position: relative; width: min(94vw, 440px); max-height: calc(100% - 10px); margin: auto; padding: 46px 20px 22px; border-radius: 30px; text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.18), transparent 60%), linear-gradient(180deg, #8b5cf6, #5b21b6 70%, #4c1d95);
  border: 4px solid var(--gold-2); box-shadow: 0 0 0 4px rgba(76,29,149,.9), 0 8px 0 4px rgba(46,16,101,.9), 0 24px 50px rgba(0,0,0,.5), inset 0 3px 0 rgba(255,255,255,.3);
  animation: panelIn .38s cubic-bezier(.2,1.4,.4,1); display: flex; flex-direction: column; }
.panel.wide { width: min(96vw, 620px); }
.panel.tall { height: min(88vh, 860px); }
@keyframes panelIn { from { transform: scale(.6) translateY(40px); opacity: 0; } }
.panel-scroll { overflow-y: auto; touch-action: pan-y; flex: 1; margin: 0 -8px; padding: 4px 8px 6px; scrollbar-width: thin; }
.ribbon { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); min-width: 72%; padding: 10px 34px 14px; font-family: var(--font-head); font-size: 26px; line-height: 1.05; white-space: nowrap;
  color: #fff; text-shadow: 0 3px 0 rgba(120,60,0,.6); background: linear-gradient(180deg, #ffe680, #ffb300 60%, #e08e00); border-radius: 14px; border: 3px solid #fff3b0;
  box-shadow: 0 6px 0 #a35f00, 0 10px 20px rgba(0,0,0,.3); }
.ribbon::before, .ribbon::after { content: ''; position: absolute; top: 14px; width: 28px; height: 100%; background: #d98a00; z-index: -1; border-radius: 4px; }
.ribbon::before { left: -18px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.ribbon::after { right: -18px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.ribbon.red { background: linear-gradient(180deg, #ff8a8a, #e5363f 60%, #a3121c); border-color: #ffd0d0; box-shadow: 0 6px 0 #6b0d14, 0 10px 20px rgba(0,0,0,.3); text-shadow: 0 3px 0 rgba(90,0,10,.6); }
.ribbon.red::before, .ribbon.red::after { background: #9b1520; }
.ribbon.green { background: linear-gradient(180deg, #b9f871, #4cc72b 60%, #2f9a17); border-color: #e3ffc9; box-shadow: 0 6px 0 #1d6b0c, 0 10px 20px rgba(0,0,0,.3); text-shadow: 0 3px 0 rgba(10,60,0,.6); }
.ribbon.green::before, .ribbon.green::after { background: #2a7d14; }
.ribbon small { display: block; font-family: var(--font-body); font-size: 13px; font-weight: 700; text-shadow: none; opacity: .95; }
.close-x { position: absolute; top: -14px; right: -14px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; z-index: 3;
  background: linear-gradient(180deg, #ff8a8a, #d61f2b); border: 3px solid #fff; box-shadow: 0 4px 0 #7f1018, 0 6px 12px rgba(0,0,0,.35); font-family: var(--font-head); font-size: 24px; line-height: 1; }
.close-x:active { transform: translateY(3px); }
.panel h3 { font-family: var(--font-head); font-size: 22px; margin: 6px 0; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.panel p { font-size: 15.5px; line-height: 1.4; color: rgba(255,255,255,.92); }
.panel p b { color: var(--gold-1); }
.panel > .sub { font-size: 12.5px; font-weight: 700; opacity: .9; }
.btn-cyan { background: linear-gradient(180deg, #a5f3fc, #06b6d4 55%, #0e7490); --btn-edge: #164e63; }
.btn-col { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.btn-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.btn-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { display: flex; flex-direction: column; align-items: center; padding: 8px; border-radius: 14px; background: rgba(30,8,70,.55); border: 1.5px solid rgba(255,255,255,.14); }
.stat small { font-size: 10px; opacity: .8; font-weight: 700; }
.inset { border-radius: 20px; background: rgba(30,8,70,.55); border: 2px solid rgba(255,255,255,.14); box-shadow: inset 0 3px 10px rgba(0,0,0,.25); padding: 12px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 4px; margin: 3px; border-radius: 999px; background: rgba(255,255,255,.14); font-family: var(--font-head); font-size: 17px; }
.chip .ico { width: 28px; height: 28px; }

/* Level start */
.ls-preview { width: 100%; height: 170px; display: block; }
.ls-meta { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 4px; }
.ls-meta span { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.14); }
.streak-box { display: flex; align-items: center; gap: 10px; text-align: left; margin-top: 10px; padding: 10px 12px; border-radius: 16px; background: linear-gradient(90deg, rgba(255,140,30,.35), rgba(255,60,60,.25)); border: 2px solid rgba(255,214,90,.6); }
.streak-box img { width: 46px; height: 46px; }
.streak-box .st-title { font-family: var(--font-head); font-size: 18px; }
.streak-box .st-sub { font-size: 13px; font-weight: 600; opacity: .95; }
.streak-steps { display: flex; gap: 4px; margin-top: 4px; }
.streak-steps i { width: 18px; height: 8px; border-radius: 4px; background: rgba(0,0,0,.35); }
.streak-steps i.on { background: linear-gradient(90deg, #ffe680, #ff9a1f); }
.streak-box.locked { filter: grayscale(.7); opacity: .8; }

/* Victory */
.v-stars { display: flex; justify-content: center; align-items: flex-end; gap: 4px; margin: -8px 0 6px; height: 96px; }
.v-star { width: 74px; height: 74px; opacity: .25; filter: grayscale(1) brightness(.6); transform: scale(.6); transition: all .35s cubic-bezier(.2,1.8,.4,1); }
.v-star.mid { width: 96px; height: 96px; }
.v-star.on { opacity: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); transform: scale(1); }
.reward-big { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-head); font-size: 44px; text-shadow: 0 3px 0 rgba(0,0,0,.3); }
.reward-big img { width: 62px; height: 62px; }
.mult-tag { display: inline-block; margin-top: 2px; padding: 3px 10px; border-radius: 999px; background: linear-gradient(90deg, #ff9a1f, #ff4d4d); font-weight: 700; font-size: 13px; }
.v-extra { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.roulette { position: relative; height: 46px; margin: 12px 0 4px; display: grid; grid-template-columns: 1fr 1.2fr 1.5fr 1.2fr 1fr; border-radius: 14px; overflow: hidden; border: 3px solid #fff3b0; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.roulette div { display: grid; place-items: center; font-family: var(--font-head); font-size: 20px; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.roulette div:nth-child(1), .roulette div:nth-child(5) { background: #3b82f6; }
.roulette div:nth-child(2), .roulette div:nth-child(4) { background: #22c55e; }
.roulette div:nth-child(3) { background: linear-gradient(180deg, #ffe680, #ff9a1f); color: #7a3a00; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.needle { position: absolute; top: -6px; bottom: -6px; width: 6px; margin-left: -3px; background: #fff; border-radius: 3px; box-shadow: 0 0 0 2px #2a1250, 0 0 10px #fff; left: 50%; }

/* Vault crates */
.crates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 4px; }
.crate { position: relative; aspect-ratio: 1/1.1; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(30,8,70,.5); border: 3px solid rgba(255,214,90,.5); cursor: pointer; transition: transform .15s; }
.crate img { width: 86%; filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); animation: crateIdle 1.6s ease-in-out infinite; }
.crate:nth-child(2) img { animation-delay: .2s; } .crate:nth-child(3) img { animation-delay: .4s; }
@keyframes crateIdle { 50% { transform: translateY(-5px) rotate(-2deg); } }
.crate.opened img { animation: crateOpen .5s ease forwards; }
@keyframes crateOpen { 40% { transform: scale(1.25) rotate(6deg); } 100% { transform: scale(.55) translateY(-30px); opacity: .25; } }
.crate .loot { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: var(--font-head); font-size: 18px; animation: lootIn .4s .25s cubic-bezier(.2,1.6,.4,1) both; }
.crate.opened .loot { display: flex; }
.crate .loot img { width: 52px; height: 52px; animation: none; }
@keyframes lootIn { from { transform: scale(0); } }
.crate.locked::after { content: '🎬'; position: absolute; bottom: 6px; right: 8px; font-size: 18px; }

/* Fail / paywall (Royal-Match style peek-through bottom sheet) */
.modal.peek-fail { background: linear-gradient(180deg, rgba(16,4,40,0.0) 0%, rgba(16,4,40,0.08) 42%, rgba(16,4,40,0.82) 56%); backdrop-filter: none; align-items: flex-end; padding-bottom: calc(10px + var(--safe-b)); }
.modal.peek-fail .panel { margin: auto auto 0; padding: 38px 18px 16px; animation: sheetUp .34s cubic-bezier(.2,1.3,.4,1); }
.peek-banner { position: fixed; top: calc(104px + var(--safe-t)); left: 0; right: 0; width: max-content; max-width: 92vw; margin: 0 auto; padding: 6px 16px; border-radius: 999px; background: linear-gradient(90deg, #ef4444, #b91c1c); border: 2.5px solid #fde047; font-family: var(--font-head); font-size: 15px; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.45); white-space: nowrap; animation: nodePulse 1.1s infinite; pointer-events: none; }
.jeopardy { margin: 8px 0 0; padding: 9px 12px; border-radius: 16px; background: linear-gradient(90deg, rgba(255,80,40,.35), rgba(255,40,80,.3)); border: 2px dashed rgba(255,214,90,.8); font-weight: 700; font-size: 14.5px; text-align: left; }
.jeopardy div { display: flex; align-items: center; gap: 8px; }
.jeopardy img { width: 30px; height: 30px; flex: none; }
.give-up { margin-top: 6px; font-size: 14px; color: rgba(255,255,255,.65); text-decoration: underline; font-weight: 600; padding: 6px; }
.escalate { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: #22c55e; font-size: 12px; font-weight: 700; }

/* Live 3D Skin Showcase Stage */
.skin-stage { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 12px; border-radius: 20px; background: radial-gradient(circle at 28% 50%, rgba(255,230,128,.25), rgba(25,6,60,.75) 70%); border: 2.5px solid rgba(255,214,90,.6); text-align: left; }
.skin-stage canvas { width: 96px; height: 96px; flex: none; border-radius: 16px; }
.skin-stage-meta, .skin-stage .ss-body { flex: 1; min-width: 0; }
.skin-stage .ss-rarity { font-family: var(--font-head); font-size: 12px; letter-spacing: .06em; }
.skin-stage .ss-name, .skin-stage .ss-title { font-family: var(--font-head); font-size: 21px; line-height: 1.1; color: #fff; margin: 2px 0; }
.skin-stage .ss-sub { font-size: 12.5px; font-weight: 600; color: #fde68a; margin-top: 2px; }

/* World Storyline & Visual Atlas Cards */
.atlas-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; margin-bottom: 12px; border-radius: 20px; background: rgba(24,6,56,.78); border: 2.5px solid rgba(255,214,90,.55); text-align: left; }
.ac-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ac-badge { padding: 3px 9px; border-radius: 999px; font-family: var(--font-head); font-size: 11.5px; color: #1a0938; }
.ac-title { font-family: var(--font-head); font-size: 19px; color: #fff; }
.ac-body { display: flex; flex-direction: column; gap: 7px; }
.ac-chap { font-size: 12.5px; font-weight: 800; color: #fde047; }
.ac-story { font-size: 13px; line-height: 1.38; color: rgba(255,255,255,.92); }
.atlas-thumbs { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; margin: 4px 0; }
.atlas-thumbs img { width: 100%; height: 108px; object-fit: cover; border-radius: 12px; border: 2px solid rgba(255,255,255,.35); display: block; }
.ac-foot { display: flex; gap: 8px; margin-top: 2px; }
.ac-foot .btn { flex: 1; }
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }

/* Shop */
.tabs { display: flex; gap: 6px; margin: 0 -4px 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 4px 6px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 1 0 auto; padding: 8px 12px; border-radius: 14px; font-family: var(--font-head); font-size: 15px; background: rgba(30,8,70,.55); border: 2px solid rgba(255,255,255,.18); white-space: nowrap; }
.tab.active { background: linear-gradient(180deg, #ffe680, #ffb300); color: #6b3a00; border-color: #fff3b0; text-shadow: none; box-shadow: 0 3px 0 #a35f00; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px; border-radius: 20px; background: linear-gradient(180deg, #fffaf0, #f4e4bd); color: var(--ink); border: 3px solid #fff; box-shadow: 0 5px 0 #b08a3a, 0 8px 14px rgba(0,0,0,.25); }
.card .art { width: 78%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
.card .name { font-family: var(--font-head); font-size: 15px; line-height: 1.1; color: #5b21b6; }
.card .amount { font-family: var(--font-head); font-size: 22px; color: #b45309; display: flex; align-items: center; gap: 4px; }
.card .amount .ico { width: 24px; height: 24px; }
.card .desc { font-size: 12px; font-weight: 600; color: #6b5a8a; line-height: 1.25; min-height: 30px; }
.card .btn { margin-top: 4px; width: 100%; }
.card .badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: linear-gradient(180deg, #ff6b6b, #c81e2a); color: #fff; font-weight: 700; font-size: 11px; letter-spacing: .05em; white-space: nowrap; border: 2px solid #fff; box-shadow: 0 2px 0 #6b0d14; }
.card .value { position: absolute; top: 8px; right: 8px; padding: 2px 6px; border-radius: 8px; background: #22c55e; color: #fff; font-weight: 700; font-size: 11px; }
.card.equipped { border-color: #4cc72b; box-shadow: 0 5px 0 #1d6b0c, 0 0 0 3px #8ef05a, 0 8px 14px rgba(0,0,0,.25); }
.card .orb { width: 70px; height: 70px; margin: 4px 0; }
.card .rarity { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.card.lockd .orb { filter: grayscale(.2) brightness(.95); }
.offer-hero { position: relative; display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px; align-items: stretch; margin-bottom: 14px; }
.offer-hero .card.hero { background: linear-gradient(180deg, #fff6c8, #ffd34d); border-color: #fff; box-shadow: 0 5px 0 #b06a00, 0 0 24px rgba(255,211,77,.7); transform: scale(1.02); }
.offer-hero .card.decoy { background: linear-gradient(180deg, #f8fbff, #dbe8fb); box-shadow: 0 5px 0 #6b84ad; }
.offer-hero .card .chips { display: flex; flex-wrap: wrap; justify-content: center; }
.offer-hero .card .chip { background: rgba(91,33,182,.12); color: var(--ink); font-size: 14px; }
.offer-hero .card .chip .ico { width: 22px; height: 22px; }
.wide-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; margin-bottom: 12px; border-radius: 20px; background: linear-gradient(180deg, #fffaf0, #f4e4bd); color: var(--ink); border: 3px solid #fff; box-shadow: 0 5px 0 #b08a3a, 0 8px 14px rgba(0,0,0,.25); }
.wide-card.special { background: linear-gradient(135deg, #ffe7a0, #ffb84d); }
.wide-card.whale { background: linear-gradient(135deg, #fde68a, #f472b6 120%); }
.wide-card img.art { width: 86px; height: 86px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
.wide-card .wc-body { flex: 1; min-width: 0; }
.wide-card .wc-title { font-family: var(--font-head); font-size: 18px; color: #5b21b6; line-height: 1.1; }
.wide-card .wc-sub { font-size: 12.5px; font-weight: 600; color: #6b5a8a; margin: 2px 0 4px; }
.wide-card .chips .chip { background: rgba(91,33,182,.12); color: var(--ink); font-size: 14px; padding: 2px 8px 2px 2px; margin: 2px; }
.wide-card .chips .chip .ico { width: 22px; height: 22px; }
.wide-card .btn { flex: none; min-width: 96px; }
.free-coins { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.section-title { font-family: var(--font-head); font-size: 17px; text-align: left; margin: 6px 2px 8px; color: var(--gold-1); text-shadow: 0 2px 0 rgba(0,0,0,.3); }

/* Daily */
.daily-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.day { position: relative; border-radius: 16px; padding: 6px 4px 8px; background: rgba(30,8,70,.55); border: 2px solid rgba(255,255,255,.18); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.day .dn { font-size: 11px; font-weight: 700; opacity: .85; }
.day img { width: 46px; height: 46px; }
.day .dl { font-family: var(--font-head); font-size: 13px; line-height: 1.05; }
.day.big { grid-column: span 2; background: linear-gradient(180deg, rgba(255,211,77,.35), rgba(255,140,0,.25)); }
.day.big img { width: 64px; height: 64px; }
.day.done { opacity: .5; }
.day.done::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 42px; color: #8ef05a; text-shadow: 0 2px 0 #1d6b0c; }
.day.today { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(255,211,77,.5), 0 0 18px rgba(255,211,77,.6); animation: nodePulse 1.4s infinite; }

/* Piggy */
.piggy-art { width: 210px; max-width: 64%; margin: -4px auto 0; filter: drop-shadow(0 10px 12px rgba(0,0,0,.35)); animation: crateIdle 2s ease-in-out infinite; }
.piggy-bar { position: relative; height: 28px; border-radius: 999px; background: rgba(20,4,48,.7); border: 3px solid rgba(255,255,255,.3); overflow: hidden; margin: 10px 0 4px; }
.piggy-bar > div { height: 100%; background: linear-gradient(180deg, #ffe680, #ffb300); box-shadow: inset 0 4px 0 rgba(255,255,255,.4); }
.piggy-bar span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-head); font-size: 16px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.piggy-bar i { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; }
.full-stamp { display: inline-block; padding: 4px 14px; border-radius: 999px; background: linear-gradient(180deg, #ff6b6b, #c81e2a); font-family: var(--font-head); font-size: 16px; transform: rotate(-6deg); box-shadow: 0 3px 0 #6b0d14; }

/* Chain */
.chain { display: flex; flex-direction: column-reverse; gap: 10px; }
.chain-node { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; text-align: left; background: rgba(30,8,70,.55); border: 2px solid rgba(255,255,255,.18); }
.chain-node.current { background: linear-gradient(90deg, rgba(255,211,77,.35), rgba(255,140,0,.2)); border-color: var(--gold-2); }
.chain-node.done { opacity: .45; }
.chain-node.locked { filter: grayscale(.5); opacity: .8; }
.chain-node .cn-type { width: 56px; flex: none; font-family: var(--font-head); font-size: 13px; text-align: center; padding: 6px 0; border-radius: 12px; }
.cn-type.free { background: #22c55e; } .cn-type.paid { background: #3b82f6; } .cn-type.rv { background: #a855f7; }
.chain-node .chips { flex: 1; }
.chain-node .btn { flex: none; }
.timer-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,.35); font-weight: 700; font-size: 13px; margin-bottom: 8px; }

/* Settings */
.set-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 6px; border-bottom: 1px solid rgba(255,255,255,.12); font-family: var(--font-head); font-size: 18px; }
.toggle { position: relative; width: 62px; height: 34px; border-radius: 999px; background: #4b5563; border: 2px solid rgba(255,255,255,.4); transition: background .2s; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.3); transition: left .2s; }
.toggle.on { background: #4cc72b; }
.toggle.on::after { left: 31px; }
.version { margin-top: 12px; font-size: 12px; opacity: .6; }

/* World complete */
.wc-skin { width: 130px; height: 130px; margin: 6px auto; border-radius: 50%; position: relative; background-size: 200% 100%; animation: spinOrb 6s linear infinite; box-shadow: 0 0 0 6px rgba(255,255,255,.5), 0 0 40px rgba(255,236,120,.8); }
.wc-skin::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), rgba(255,255,255,0) 38%), radial-gradient(circle at 55% 65%, rgba(0,0,0,0) 48%, rgba(0,0,0,.4) 100%); }
@keyframes spinOrb { to { background-position: -200% 0; } }
.rays { position: absolute; left: 50%; top: 40%; width: 560px; height: 560px; margin: -280px 0 0 -280px; background: repeating-conic-gradient(rgba(255,236,120,.18) 0 10deg, transparent 10deg 20deg); border-radius: 50%; animation: spin 14s linear infinite; pointer-events: none; z-index: -1;
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- IAP SHEET / AD OVERLAY */
.sheet { position: fixed; inset: 0; z-index: 40; display: none; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.55); }
.sheet.show { display: flex; animation: fadeIn .2s; }
.sheet-card { width: min(100vw, 460px); padding: 20px 20px calc(18px + var(--safe-b)); border-radius: 24px 24px 0 0; background: #f8fafc; color: #0f172a; text-align: center; display: flex; flex-direction: column; gap: 10px; animation: sheetUp .3s cubic-bezier(.2,1.2,.4,1); }
@keyframes sheetUp { from { transform: translateY(100%); } }
.sheet-store { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #64748b; }
.sheet-name { font-family: var(--font-head); font-size: 24px; color: #4c1d95; }
.sheet-contents { display: flex; flex-wrap: wrap; justify-content: center; font-weight: 600; }
.sheet-contents .chip { background: #ede9fe; color: #4c1d95; }
.sheet-price { font-family: var(--font-head); font-size: 34px; color: #16a34a; }
.sheet-card .btn-link { color: #64748b; }
.sheet-note { font-size: 11.5px; color: #64748b; line-height: 1.35; }
.sheet-note code { background: #e2e8f0; padding: 1px 4px; border-radius: 4px; font-size: 10.5px; }

.ad-overlay { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; background: #05010f; }
.ad-overlay.show { display: flex; }
.ad-card { width: min(94vw, 520px); display: flex; flex-direction: column; gap: 12px; }
.ad-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; letter-spacing: .1em; color: #cbd5e1; }
.ad-count { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #fff; font-family: var(--font-head); font-size: 18px; }
.ad-screen { position: relative; aspect-ratio: 9/14; max-height: 70vh; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #312e81, #7c3aed 50%, #db2777); display: flex; align-items: center; justify-content: center; }
.ad-overlay.interstitial .ad-screen { aspect-ratio: 16/12; }
.ad-fake { text-align: center; padding: 20px; }
.ad-fake img { width: 140px; animation: crateIdle 1.4s infinite; }
.ad-fake-title { font-family: var(--font-head); font-size: 34px; margin-top: 6px; }
.ad-fake-sub { font-size: 13px; opacity: .85; margin-top: 4px; }
.ad-place { margin-top: 10px; font-family: ui-monospace, monospace; font-size: 12px; opacity: .7; }
.ad-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(255,255,255,.2); }
.ad-progress div { height: 100%; width: 0; background: #facc15; }
.ad-actions { display: flex; align-items: center; justify-content: space-between; }

/* ---------------------------------------------------------------- MISC */
#popups { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
.popup { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-head); font-size: 24px; color: #fff; white-space: nowrap; text-shadow: 0 3px 0 rgba(60,20,120,.8), 0 0 10px rgba(0,0,0,.35); animation: popUp 1s ease-out forwards; }
.popup.big { font-size: 34px; color: #ffe680; text-shadow: 0 3px 0 #9a5400, 0 0 16px rgba(255,180,0,.6); }
.popup.green { color: #b9f871; text-shadow: 0 3px 0 #1d6b0c; }
.popup.red { color: #ffd0d0; text-shadow: 0 3px 0 #7f1018; font-size: 20px; }
@keyframes popUp { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.12); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
#toast { position: fixed; left: 50%; top: calc(76px + var(--safe-t)); transform: translateX(-50%) translateY(-20px); z-index: 60; padding: 10px 18px; border-radius: 14px; background: rgba(20,6,50,.92); border: 2px solid var(--gold-2); font-weight: 700; font-size: 15px; opacity: 0; pointer-events: none; transition: all .3s; max-width: 90vw; text-align: center; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#flyLayer { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.fly-icon { position: absolute; left: 0; top: 0; width: 36px; height: 36px; will-change: transform; filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); }
#confetti { position: fixed; inset: 0; z-index: 65; pointer-events: none; width: 100%; height: 100%; }
#splash { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: radial-gradient(ellipse at 50% 40%, #8b5cf6, #4c1d95 60%, #1e0b4b); transition: opacity .5s; }
#splash.hide { opacity: 0; pointer-events: none; }
.splash-logo { font-family: var(--font-head); font-size: clamp(54px, 14vw, 96px); line-height: 1; letter-spacing: .02em; filter: drop-shadow(0 6px 0 rgba(0,0,0,.3)); animation: panelIn .6s cubic-bezier(.2,1.4,.4,1); }
.splash-logo .hx { color: #ffd34d; -webkit-text-stroke: 3px #9a5400; }
.splash-logo .rl { color: #fff; -webkit-text-stroke: 3px #5b21b6; }
.splash-sub { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.splash-bar { width: min(60vw, 280px); height: 14px; border-radius: 999px; background: rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.4); overflow: hidden; margin-top: 10px; }
#splashFill { height: 100%; width: 5%; background: linear-gradient(90deg, #b9f871, #4cc72b); transition: width .25s; }

/* ---------------------------------------------------------------- SAGA MINIMAP RADAR (DEV MODE) */
.map-minimap {
  position: absolute;
  left: max(6px, calc(50vw - 280px + 6px));
  bottom: calc(96px + var(--safe-b));
  z-index: 6;
  display: none;
  flex-direction: column;
  gap: 3px;
  padding: 5px 4px;
  border-radius: 14px;
  background: rgba(24, 9, 58, 0.88);
  border: 2px solid rgba(255, 211, 77, 0.75);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}
body.dev-mode .map-minimap { display: flex; }
body.has-banner .map-minimap { bottom: calc(150px + var(--safe-b)); }
.mm-head {
  font-family: var(--font-head);
  font-size: 9px;
  color: var(--gold-2);
  text-align: center;
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: 1px;
}
.mm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}
.mm-item {
  position: relative;
  width: 28px;
  height: 18px;
  border-radius: 5px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
}
.mm-item:hover { transform: scale(1.08); }
.mm-item span {
  font-family: var(--font-head);
  font-size: 9px;
  color: #fff;
  text-shadow: 0 1px 3px #000, 0 0 4px #000;
  z-index: 1;
}
.mm-item.locked { filter: grayscale(0.75) brightness(0.65); }
.mm-item.active {
  border-color: #5ceeff;
  box-shadow: 0 0 8px rgba(92, 238, 255, 0.85);
  transform: scale(1.06);
}
.mm-item.here {
  border-color: var(--gold-2);
  box-shadow: 0 0 10px rgba(255, 211, 77, 0.95);
}
.mm-item.here::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #38e54d;
  border: 1px solid #fff;
}
.mm-toggle, .mm-jump {
  width: 100%;
  padding: 3px 4px;
  border-radius: 6px;
  font-family: var(--font-head);
  font-size: 8.5px;
  color: #fff;
  background: linear-gradient(180deg, #7c3aed, #4c1d95);
  border: 1.5px solid rgba(255, 211, 77, 0.75);
  cursor: pointer;
  text-align: center;
  line-height: 1.1;
}
.mm-jump {
  background: linear-gradient(180deg, #f59e0b, #b45309);
  margin-bottom: 1px;
}

/* ---------------------------------------------------------------- VIRTUALIZED EPISODE SAGA LAYERS */
.episode-chunk { position: absolute; left: 0; width: 100%; pointer-events: none; overflow: visible; }
.episode-chunk .node, .episode-chunk .inn-node, .episode-chunk .sidequest-node, .episode-chunk .gate-ribbon { pointer-events: auto; }
.map-parchment {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 38px rgba(34, 18, 6, 0.35);
}
.map-era-chip {
  position: absolute;
  top: calc(64px + var(--safe-t));
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(min(100vw, 560px) - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 14px 4px;
  border-radius: 999px;
  background: rgba(24, 10, 48, 0.88);
  border: 1.5px solid rgba(255, 214, 90, 0.65);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  font-family: var(--font-head);
  cursor: pointer;
  line-height: 1.1;
  white-space: nowrap;
}
.map-era-chip .mec-book { font-size: 9px; color: #fde047; letter-spacing: 0.08em; }
.map-era-chip .mec-title { font-size: 11.5px; color: #fff; }
.map-era-chip .mec-title small { font-family: var(--font-body); font-size: 10.5px; color: #6ee7ff; }
.map-weather {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.map-weather .wp {
  position: absolute;
  top: 15%;
  width: var(--sz, 8px);
  height: var(--sz, 8px);
  border-radius: 50%;
  background: rgba(255, 245, 190, 0.65);
  box-shadow: 0 0 8px rgba(255, 230, 130, 0.8);
  animation: wpDrift 6s ease-in-out infinite;
}
@keyframes wpDrift {
  0%, 100% { transform: translate(0, 0) scale(0.9); opacity: 0.35; }
  50% { transform: translate(14px, -22px) scale(1.25); opacity: 0.9; }
}
.inn-node {
  position: absolute;
  transform: translateY(-50%);
  z-index: 3;
  width: 156px;
  padding: 5px 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(62, 32, 14, 0.94), rgba(34, 16, 8, 0.96));
  border: 2px solid #ffd166;
  box-shadow: 0 4px 0 #1c0b04, 0 6px 14px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.14s;
}
.inn-node:hover { transform: translateY(-50%) scale(1.04); }
.inn-node .inn-fire { font-size: 18px; flex: none; }
.inn-node .inn-txt { display: flex; flex-direction: column; min-width: 0; }
.inn-node .inn-txt b { font-family: var(--font-head); font-size: 11px; color: #fff; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inn-node .inn-txt small { font-size: 9.5px; font-weight: 700; color: #fde68a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidequest-node {
  position: absolute;
  transform: translateY(-50%);
  z-index: 3;
  width: 152px;
  padding: 5px 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, #78350f, #451a03);
  border: 2px solid #fbbf24;
  box-shadow: 0 3px 0 #290f02, 0 5px 10px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: left;
  color: #fef3c7;
  cursor: pointer;
  transition: transform 0.12s;
}
.sidequest-node:hover { transform: translateY(-50%) scale(1.05); }
.sidequest-node .sq-ico { font-size: 16px; flex: none; }
.sidequest-node .sq-txt { display: flex; flex-direction: column; min-width: 0; }
.sidequest-node .sq-txt b { font-family: var(--font-head); font-size: 10.5px; color: #fff; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidequest-node .sq-txt small { font-size: 9px; font-weight: 700; color: #fde68a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- RESPONSIVE */
@media (max-width: 420px) {
  .lc-title { font-size: 20px; }
  .pill { height: 36px; font-size: 17px; }
  .pill .ico { width: 30px; height: 30px; }
  .dock { gap: 8px; padding: 8px 10px; }
  .dock-btn { width: 66px; height: 66px; }
  .dock-btn img { width: 38px; height: 38px; }
  .dock-btn.small { width: 54px; }
  .side-btn { width: 56px; height: 62px; }
  .side-btn img { width: 40px; height: 40px; }
  .map-minimap { padding: 4px 3px; gap: 2px; }
  .mm-item { width: 32px; height: 17px; }
  .panel { padding: 42px 14px 18px; }
  .ribbon { font-size: 22px; padding: 9px 26px 12px; }
  .grid3 { grid-template-columns: repeat(2, 1fr); }
  .btn-xl { min-height: 66px; font-size: 26px; }
}
@media (min-width: 900px) and (min-height: 650px) {
  .hud-top { left: 24px; right: 24px; top: 18px; }
  .dock { bottom: 22px; }
  .dock-btn { width: 84px; height: 84px; } .dock-btn img { width: 50px; height: 50px; }
  .level-card { flex-basis: 440px; }
  .lc-title { font-size: 28px; }
  #mapInner { box-shadow: 0 0 0 6px rgba(255,214,90,.6), 0 0 80px rgba(0,0,0,.6); }
}
@media (max-height: 640px) {
  .dock-btn { width: 60px; height: 60px; } .dock-btn img { width: 34px; height: 34px; }
  .level-card { padding: 4px 12px 8px; } .lc-title { font-size: 19px; }
  .streak-chip { top: calc(92px + var(--safe-t)); }
}
@media (max-height: 540px) {
  .hud-top { top: calc(6px + var(--safe-t)); left: 8px; right: 8px; gap: 6px; }
  .round-btn { width: 40px; height: 40px; } .round-btn svg { width: 20px; height: 20px; }
  .pill { height: 32px; font-size: 16px; padding: 0 10px 0 4px; } .pill .ico { width: 26px; height: 26px; margin-left: -6px; }
  .level-card { flex-basis: 290px; padding: 3px 10px 6px; border-radius: 14px; }
  .lc-world { font-size: 9.5px; } .lc-title { font-size: 16px; } .lc-bar { height: 14px; margin-top: 3px; } .lc-steps { font-size: 10.5px; }
  .streak-chip { top: calc(68px + var(--safe-t)); font-size: 12px; padding: 2px 10px 2px 4px; } .streak-chip img { width: 20px; height: 20px; }
  .dock { bottom: calc(6px + var(--safe-b)); gap: 8px; padding: 6px 10px; border-radius: 18px; }
  .dock-btn { width: 50px; height: 50px; border-radius: 14px; } .dock-btn.small { width: 44px; }
  .dock-btn img { width: 28px; height: 28px; } .dock-btn svg { width: 22px; height: 22px; margin-bottom: 2px; }
  .dock-btn .lbl { font-size: 10.5px; } .dock-btn .cnt { min-width: 22px; height: 22px; font-size: 12px; top: -6px; right: -6px; }
  .tut-toast { bottom: calc(74px + var(--safe-b)); padding: 7px 14px; font-size: 13px; border-radius: 14px; }
  .side { top: calc(56px + var(--safe-t)); gap: 6px; }
  .side-btn { width: 52px; height: 56px; border-radius: 14px; } .side-btn img { width: 34px; height: 34px; } .side-btn span { font-size: 10.5px; }
  .play-wrap { bottom: calc(66px + var(--safe-b)); }
  .btn-xl { min-height: 54px; font-size: 22px; padding: 0 30px; border-radius: 18px; }
  #btnPlay .play-sub { font-size: 13px; }
  .bottom-nav { padding: 4px 6px calc(4px + var(--safe-b)); } .nav-btn { font-size: 11px; padding: 2px 0; } .nav-btn img, .nav-orb { width: 28px; height: 28px; }
  .panel { padding: 34px 16px 14px; border-radius: 22px; }
  .ribbon { font-size: 20px; padding: 7px 24px 10px; top: -20px; }
  .ls-preview { height: 110px; }
  .v-stars { height: 68px; margin: -6px 0 4px; } .v-star { width: 52px; height: 52px; } .v-star.mid { width: 68px; height: 68px; }
  .reward-big { font-size: 32px; } .reward-big img { width: 44px; height: 44px; }
  .btn-lg { min-height: 46px; font-size: 18px; padding: 0 20px; }
  .btn-col { gap: 8px; margin-top: 10px; }
}