/* Drakly's illustrated game skin. Source art remains in design-preview/cartoon-siege-pilot. */
@font-face { font-family:DraklyBold; src:url('/assets/cartoon-font-bold.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:DraklyBlack; src:url('/assets/cartoon-font-black.woff2') format('woff2'); font-display:swap; }
:root { --night:#071d43; --navy:#123b78; --navy-light:#1b6bb7; --gold:#8ce8ff; --gold-deep:#1469b3; --aqua:#aaf2ff; --muted:#c6e7f6; --surface:#104b90; --surface-2:#1b6ab3; --line:#8de2ff; --ice:#f9fcff; --teal:#9eefff; --ring:0 0 0 3px #b7f5ff,0 0 17px #8ce8ff88; --c-heading:#f8fdff; --c-gold:#baf5ff; --c-gold-2:#60c8e9; --c-gold-ink:#0d5797; --c-credits:#baf5ff; --c-warning:#aeeeff; font-family:DraklyBold,'Trebuchet MS',system-ui,sans-serif; color:#f8fbff; background:#071d43; }
body { color:#f8fbff; background:radial-gradient(ellipse at 50% -12%,#4d9bd8 0%,#1a568f 40%,#081e49 100%); }
body h1,body h2,body h3,body h4 { font-family:DraklyBlack,'Trebuchet MS',sans-serif !important; }
body:not(.game-mode) .shell { background:linear-gradient(180deg,#2776b8b3,#124782e8 42%,#0a2d63); border-inline:2px solid #9ceaff77; box-shadow:0 0 60px #00184177; }
body.game-mode { background:#438cce; }
body.game-mode::before { background:linear-gradient(180deg,#0e428025,#163f7688),url('/assets/cartoon-arena-empty.webp') center / cover no-repeat; }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,.tabs button:focus-visible,.btn:focus-visible { outline:3px solid #f9ffff; outline-offset:3px; }
.overline,.eyebrow,.tag { color:#b7f4ff; font-family:DraklyBold,'Trebuchet MS',sans-serif; text-shadow:0 2px 0 #104981; }
.screen-heading h1,.feature-card h2,.offer-summary h2,.assault-floor h3,.battle-view-head h2,.siege-picker h3,.reveal-screen h2,.roster-details h2,.card h2,.card h3 { font-family:DraklyBlack,'Trebuchet MS',sans-serif; color:#fff; letter-spacing:-.035em; text-shadow:0 3px 0 #125390,0 5px 8px #0b3367aa; }
.screen-heading p,.feature-card p,.offer-summary p { color:#e3f5ff; }
.resource-tile,body.game-mode .resource-tile { border:2px solid #82dfff; border-bottom:3px solid #16549f; border-radius:15px; background:linear-gradient(180deg,#398fd1,#115da9 64%,#07367d); box-shadow:inset 0 2px #c8f7ff88,0 4px 0 #0b3979,0 7px 12px #001e4f66; }
.resource-tile strong,body.game-mode .resource-tile strong { color:white; font-family:DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px #0c4b92; }
.resource-tile small,body.game-mode .resource-tile small { color:#e1f7ff; }
.menu-toggle,.ghost { border:2px solid #b1f0ff; border-radius:13px; color:#fff; background:linear-gradient(#68c6ec,#0e68b4); box-shadow:inset 0 2px #dbfaff88,0 4px 0 #0a438b; }
.utility-menu { border:3px solid #99e8ff; border-radius:17px; background:linear-gradient(150deg,#247cc0,#0b3b7c); box-shadow:0 16px 34px #001e53aa; }
.utility-menu > button { color:#fff; border-color:#6acbed; background:#195d9e; }
.tabs { border-top:4px solid #66c9ef; background:linear-gradient(#1f72bc,#0b498f 65%,#063370); box-shadow:inset 0 2px #d4f8ff77,0 -8px 25px #082d6a77; }
.tabs button { min-height:64px; color:#d0ecff; font-family:DraklyBold,'Trebuchet MS',sans-serif; text-shadow:0 2px #0d3873; }
.tabs button.active { color:#fff; border:2px solid #c9f9ff; border-radius:13px; background:linear-gradient(#85e6f6,#238ecb 60%,#0e5da9); box-shadow:inset 0 2px #fff9,0 3px 0 #073b7f; }
.tabs button.active .ui-icon { filter:drop-shadow(0 0 7px #bcf8ff); }
.btn,.pill,.floor-route button,.tower-rail button,.roster-chip,.egg-offer { font-family:DraklyBold,'Trebuchet MS',sans-serif; }
.btn { border:2px solid #bdeeff; border-bottom:3px solid #0a4c99; border-radius:17px; color:#fff; text-shadow:0 2px 0 #0d4e98; box-shadow:inset 0 2px #eaffff88,0 4px 0 #0b4a94,0 7px 11px #05295377; }
/* The cyan pill is drawn in CSS: the old raster had a checkerboard baked in, so it was cropped and stretched to hide it. */
.btn.primary,.btn.primary:not(.secondary):not(.subtle):not(.danger):not(.btn-cta-buy),.btn:not(.secondary):not(.subtle):not(.danger):not(.btn-cta-buy) { color:#fff; border:3px solid #1f6fe0; border-radius:999px; background:linear-gradient(180deg,#b9f4ff 0,#76defc 44%,#34c1f3 54%,#17a5e5 100%); box-shadow:inset 0 -3px #0f86d0,inset 0 2px #e6fdff,0 4px 0 #0b4fb4,0 8px 14px #0d3b6d66; text-shadow:0 1px 3px #0659a8cc,0 2px 6px #003a8299; font-family:DraklyBlack,'Trebuchet MS',sans-serif; }
.btn.secondary { color:#fff; border-color:#b5f4ff; background:linear-gradient(#80d9f5,#1688c6 55%,#0755a5); box-shadow:inset 0 2px #efffff88,0 4px 0 #0a4b97; }
.btn.subtle { color:#e9faff; border-color:#82cef5; background:linear-gradient(#2a81c5,#0b4e98); box-shadow:inset 0 1px #c5f4ff77,0 3px 0 #063a78; }
.btn.danger { color:#fff; border-color:#ffd4d1; background:linear-gradient(#ef807a,#b83657); box-shadow:0 3px 0 #682a54; }
.btn:disabled { opacity:.62; filter:grayscale(.5); box-shadow:none; }
.btn:active:not(:disabled) { transform:translateY(3px); box-shadow:0 2px 0 #063d8a; }
.card,.feature-card,.offer-summary,.assault-floor,.social-strip,.roster-card,.tutorial-card,.siege-picker,.slot-current { border:3px solid #87dff9; border-radius:20px; color:#fff; background:linear-gradient(145deg,#287fc2,#104d90 50%,#0a3979); box-shadow:inset 0 2px #e6fbff6b,0 5px 0 #094d9c,0 10px 17px #092d6277; }
.feature-card::before,.offer-summary::before,.assault-floor::before { border-color:#c8f3ff42; border-radius:15px; }
.feature-card,.offer-summary,.assault-floor { padding:20px 17px; }
.feature-card p,.offer-summary p,.card p { color:#e5f6ff; }
.pill,.rarity-pill,.trait-badge { border:2px solid #a4e9ff; border-radius:10px; color:#fff; background:linear-gradient(#50a9e1,#1466ad); box-shadow:0 2px 0 #0c488f; }
.notice { border:2px solid #a4f1ff; border-radius:14px; color:#fff; background:#1b78af; box-shadow:0 3px 0 #0e4e8c; }
.notice.error { border-color:#ffd0ce; background:#ac4264; }
.empty { border:2px dashed #a7e6f5; border-radius:15px; color:#e8f7ff; background:#0b4a85; }
input,select,textarea { border:2px solid #80d9fa; border-radius:12px; color:#fff; background:#0c478c; }
a { color:#b5f1ff; }
/* A painted arena with characters above the art, never baked into it. */
.siege-hero { min-height:420px; border:3px solid #b0edff; border-radius:23px; background:linear-gradient(180deg,#2179b31c,#0b3f8066),url('/assets/cartoon-arena-empty.webp') center 44% / cover; box-shadow:inset 0 2px #faffff88,0 7px 0 #0c5baa,0 14px 24px #05245188; }
.siege-hero::before { content:""; position:absolute; z-index:1; left:30%; right:30%; top:40%; height:55%; background:url('/assets/cartoon-tower-floor-2-v2.webp') center bottom / contain no-repeat; opacity:.72; filter:drop-shadow(0 5px 5px #0a377477); pointer-events:none; }
.siege-hero-shade { background:linear-gradient(180deg,#073b7775,transparent 35%,#092b5db8); }
.siege-hero-title h1 { color:white; font:normal 34px/1.02 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 3px #12549a,0 6px 10px #0c3676; }
.siege-hero-title p { color:white; font-family:DraklyBold,'Trebuchet MS',sans-serif; }
.siege-hero-party img { width:45%; height:47%; filter:drop-shadow(0 7px 5px #113d7188); }
.siege-hero-party .party-0 { left:-2%; }.siege-hero-party .party-1 { right:-2%; }
.siege-hero-bottom { border-top:3px solid #98e7ff; background:linear-gradient(#1c74b9,#0b4c9b); }
.siege-hero-bottom span { color:white; }
/* Tower v2: one generated tower cut in the middle of the stone bands between storeys
   (scripts/build_tower_scene.py), so roof, storeys and base stack edge to edge with no overlap. */
/* The location scrolls with the tower; it sits 110px low so its clearing meets the base above the action bar. */
body.game-mode .tower-scroll { background:url('/assets/cartoon-tower-location-v2.webp') center bottom -110px / cover no-repeat local,#4b9aef; }
/* The storeys fill ~73% of the layer width (the base is the widest part), so the stack is wider than the screen and the base runs off its edges. */
body.game-mode .tower-stack { width:var(--tower-w,min(112%,540px)); margin-inline:calc((100% - var(--tower-w,min(112%,540px))) / 2); padding:calc(150px + var(--overlay-room,0px)) 0 110px; filter:drop-shadow(0 10px 10px #0b447740); }
body.game-mode .tower-stack .tower-roof { left:0; width:100%; aspect-ratio:1024/345; margin:0; border:0; background:url('/assets/cartoon-tower-roof-v2.webp') center / 100% 100% no-repeat; mask:none; -webkit-mask:none; clip-path:none; }
body.game-mode .tower-stack .tower-foundation { left:0; width:100%; aspect-ratio:1024/276; margin:-1px 0 0; border:0; background:url('/assets/cartoon-tower-base-v2.webp') center / 100% 100% no-repeat; mask:none; -webkit-mask:none; }
body.game-mode .tower-stack .tower-floor,body.game-mode .tower-stack .tower-floor[data-floor] { aspect-ratio:1024/305; margin-top:-1px; overflow:visible; }
body.game-mode .tower-stack .tower-floor .tower-module-back,body.game-mode .tower-stack .tower-floor .tower-module-front { top:0; width:100%; height:100%; aspect-ratio:auto; background:url('/assets/cartoon-tower-floor-1-v2.webp') center / 100% 100% no-repeat; mask:none; -webkit-mask:none; }
body.game-mode .tower-stack .tower-floor[data-floor="2"] :is(.tower-module-back,.tower-module-front) { background-image:url('/assets/cartoon-tower-floor-2-v2.webp'); }
body.game-mode .tower-stack .tower-floor[data-floor="3"] :is(.tower-module-back,.tower-module-front) { background-image:url('/assets/cartoon-tower-floor-3-v2.webp'); }
/* The pillars and the pedestal lip are drawn again above the dragons so they stand inside the alcove. */
body.game-mode .tower-stack .tower-floor .tower-module-front.outer-left { clip-path:inset(0 77.6% 0 0); }
body.game-mode .tower-stack .tower-floor .tower-module-front.outer-right { clip-path:inset(0 0 0 77.6%); }
body.game-mode .tower-stack .tower-floor .tower-module-front.middle { clip-path:inset(0 46.6% 0 46.6%); }
body.game-mode .tower-stack .tower-floor .tower-module-front.ledge { clip-path:inset(86% 0 0 0); }
/* Each alcove's pedestal top is at 81% of the storey height; dragons and sigils stand on it. */
body.game-mode .tower-stack .tower-floor .tower-slot { top:6%; width:31%; height:77%; }
body.game-mode .tower-stack .tower-floor .tower-slot.left { left:19%; }
body.game-mode .tower-stack .tower-floor .tower-slot.right { right:19%; }
body.game-mode .tower-stack .tower-slot.empty { z-index:5; border:0; background:transparent; box-shadow:none; }
body.game-mode .tower-stack .tower-slot img,body.game-mode .tower-stack .tower-slot img[src$="-v2.webp"] { width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 4px 4px #06234a99); }
body.game-mode .tower-stack .tower-slot img.face-flip { scale:-1 1; }
body.game-mode .tower-spot-label { border:2px solid #b4eeff; border-radius:10px; color:white; background:#125ca6d9; }
body.game-mode .tower-heading { display:none; }
body.game-mode .tower-rail { top:max(32%,calc(var(--overlay-bottom,0px) + 8px)); }
body.game-mode .tower-rail button { width:40px; height:40px; border:2px solid #a2e9ff; border-radius:12px; color:white; background:linear-gradient(#4da8e1,#1263ad); box-shadow:0 3px 0 #083e7f; }
body.game-mode .tower-rail button.active { color:#fff; border-color:white; background:linear-gradient(#9aeffb,#298fce); }
body.game-mode .game-action-bar { border:3px solid #a9eeff; border-radius:17px; color:white; background:linear-gradient(#2d7dbd,#0a4187); box-shadow:inset 0 2px #e4fbff88,0 5px 0 #0b4f9f,0 8px 15px #002b6577; }
body.game-mode .action-header,body.game-mode .tower-defense-status,body.game-mode .floor-resource-note { color:#e6f7ff; }
body.game-mode .action-button { border-radius:13px; }
/* Collection, rewards and modal screens share the same illustrated language. */
.roster-card { grid-template-columns:112px minmax(0,1fr); }
.roster-portrait { border:2px solid #9de7ff; border-radius:15px; background:radial-gradient(circle at 50% 42%,#bbf2ff,#4b9bd0 72%,#0d5eaa); }
.roster-details .overline,.roster-details p,.roster-details small,.roster-details .roster-skill { color:#e8f7ff; }
.roster-details h2 { color:white; }
.roster-progress { background:#0b3f82; border-color:#8ce1f7; }
.roster-progress span { background:linear-gradient(90deg,#4bbfea,#b7f5ff); }
.hatchery,.expedition-card,.season-banner { background:linear-gradient(180deg,#144b8da8,#0b3e83ed 75%),url('/assets/cartoon-share-empty.webp') center / cover; }
.egg-offer { border:2px solid #aeefff; border-radius:15px; color:white; background:linear-gradient(#54a9d8,#155fa8); box-shadow:0 4px 0 #0b478c; }
.battle-modal { background:#0b3e7d url('/assets/cartoon-arena-empty.webp') center / cover; }
.battle-view-head,.battle-view-foot { background:linear-gradient(#2b7fc1,#0c4c9b); border-color:#8fe4ff; }
.battle-view-head h2 { color:white; }
.battle-modal > .close,.picker-close { border:2px solid #baf3ff; border-radius:12px; color:white; background:linear-gradient(#6bc9ec,#116ab3); }
.siege-picker { border:3px solid #a9f0ff; border-radius:22px 22px 0 0; background:linear-gradient(#3b94ca,#0c4a96 55%,#092f6d); }
.siege-picker h3,.siege-picker-options strong,.slot-current strong { color:white; font-family:DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px #164e8f; }
.siege-picker-options button,.slot-standards button,.trait-option { border:2px solid #9ce7ff; border-radius:15px; color:white; background:linear-gradient(#3c8ec7,#0e5da6); }
.reveal-screen { background:radial-gradient(circle at 50% 28%,#a7eeff88,transparent 65%),linear-gradient(#2c7aba,#073b80); }
.reveal-screen h2 { color:white; font-family:DraklyBlack,'Trebuchet MS',sans-serif; }
.reveal-meta,.reveal-skill { color:#ecf9ff; }
@media(max-width:380px) { .resource-tile small,body.game-mode .resource-tile small { font-size:8px; } .roster-card { grid-template-columns:98px minmax(0,1fr); } }
@media(prefers-reduced-motion:reduce) { .siege-hero-party img,body.game-mode .tower-slot img { animation:none!important; } }

/* The web has one more main destination; keep every label readable at 360px. */
/* docs/23: the Season and Token tabs appear after the first normal siege. */
.tabs[data-count="3"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
.tabs.has-token { grid-template-columns:repeat(5,minmax(0,1fr)); }
.tabs.has-token button { min-width:0; padding-inline:1px; font-size:10px; }
.tabs.has-token button .ui-icon { width:30px; height:30px; }
.icon-token { background-image:url('/assets/token-avatar-96.webp'); border-radius:50%; }
.utility-menu { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; width:min(305px,calc(100vw - 16px)); padding:7px; scrollbar-width:thin; scrollbar-color:#a7eaff #0c447f; }
.utility-menu .menu-heading,.utility-menu > #menu-note,.utility-menu .menu-settings { grid-column:1/-1; }
.utility-menu .menu-heading { margin:4px 6px 1px; color:#bdf4ff; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.utility-menu > button { grid-column:1/-1; min-height:38px; padding:4px 8px; border:1px solid #4daddb; border-radius:9px; }
.utility-menu .menu-settings { min-width:0; }
.utility-menu .menu-settings summary { min-height:39px; display:flex; align-items:center; padding:5px 10px; border:1px solid #80d5f3; border-radius:9px; color:#d6f7ff; background:#0c4b8e; font-size:11px; font-weight:900; cursor:pointer; }
.utility-menu .menu-settings summary:focus-visible { outline:3px solid white; outline-offset:2px; }
.utility-menu .menu-settings[open] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }
.utility-menu .menu-settings[open] summary { grid-column:1/-1; }
.utility-menu .menu-settings button { grid-column:1/-1; display:flex; align-items:center; gap:7px; width:100%; min-height:38px; padding:4px 8px; border:1px solid #4daddb; border-radius:9px; color:white; background:#195d9e; text-align:left; font:11px DraklyBold,'Trebuchet MS',sans-serif; }
.utility-menu .menu-settings button[hidden] { display:none; }
.utility-menu .menu-settings button strong { margin-left:auto; color:#d1f8ff; }
.utility-menu .menu-settings #language,.utility-menu .menu-settings #sound-toggle { grid-column:auto; gap:3px; padding:3px 4px; font-size:10px; }
.utility-menu .menu-settings #language .icon,.utility-menu .menu-settings #sound-toggle .icon { width:17px; height:17px; }
.utility-menu .menu-settings #language strong,.utility-menu .menu-settings #sound-toggle strong { font-size:9px; }
.utility-menu > #menu-note { margin:2px 6px 0; font-size:9px; }
.utility-menu > button:disabled { opacity:.52; cursor:not-allowed; }
.utility-menu > button:focus-visible { outline-offset:-2px; }

/* Shortcuts sit beside the tower without covering the floor controls. */
body.game-mode .tower-shortcuts { position:absolute; z-index:8; top:max(40%,calc(var(--overlay-bottom,0px) + 8px)); left:7px; display:grid; gap:8px; width:56px; }
.tower-shortcuts button { position:relative; display:grid; justify-items:center; align-content:center; gap:2px; width:56px; min-height:53px; padding:4px 1px; border:2px solid #a6eeff; border-radius:13px; color:#fff; background:linear-gradient(#52a9dc,#0d60ab); box-shadow:inset 0 2px #e9fbff8a,0 3px 0 #08417f,0 7px 12px #00275c88; font:10px/1.05 DraklyBold,'Trebuchet MS',sans-serif; text-shadow:0 1px #0a4b89; cursor:pointer; }
.tower-shortcuts button .ui-icon,.tower-shortcuts button .icon { width:25px; height:25px; }
.tower-shortcuts button:disabled { opacity:.65; cursor:not-allowed; }
.tower-shortcuts .badge-dot { position:absolute; top:3px; right:3px; }
.tower-shortcuts button:focus-visible { outline:3px solid white; outline-offset:2px; }
@media(max-width:380px) { body.game-mode .tower-shortcuts { left:4px; } .tower-shortcuts,.tower-shortcuts button { width:50px; } .tower-shortcuts button { min-height:48px; font-size:9px; } }

/* Token page: one illustrated story, phone first (Telegram webview 360-430 px). */
.token-page { gap:16px; padding-bottom:calc(18px + var(--safe-bottom,0px)); }
.token-page .btn.wide { align-items:center; gap:8px; min-height:50px; margin-top:10px; }
.token-page .btn .icon { width:18px; height:18px; }
.tk-card,.tk-hero,.tk-final { position:relative; border:3px solid #91e5ff; border-bottom-color:#175ba9; border-radius:22px; background:linear-gradient(160deg,#2a82c4,#0f4b93 62%,#0a3471); box-shadow:inset 0 2px #e2faff88,0 5px 0 #0b4c96,0 13px 22px #001e5388; }
.tk-card { padding:18px 16px 16px; }
.tk-card h2,.tk-hero h1,.tk-final h2 { margin:4px 0 8px; color:#fff; text-shadow:0 3px #105395,0 6px 12px #092f68aa; text-wrap:balance; }
.tk-card h2 { font-size:24px; line-height:1.08; }
.tk-card p,.tk-hero p,.tk-final p { margin:0; color:#e4f8ff; font-size:14px; line-height:1.45; }
.tk-card .overline,.tk-hero .overline { color:#bdf6ff; font-size:11px; letter-spacing:.08em; }
.tk-card .tk-note { margin-top:10px; color:#c5e9f8; font-size:12px; }
.tk-sub { margin:18px 0 0; color:#fff; font-size:17px; clear:both; }

.tk-hero { overflow:hidden; background:linear-gradient(180deg,#5ab3e6 0,#1a64ad 46%,#0b3a7a); }
.tk-hero-art { position:relative; aspect-ratio:860/573; }
.tk-hero-art img { display:block; width:100%; height:100%; object-fit:cover; }
.tk-hero-art::after { content:''; position:absolute; inset:auto 0 0; height:46%; background:linear-gradient(180deg,transparent,#1d68b0 92%); pointer-events:none; }
.tk-badge { position:absolute; z-index:1; top:12px; left:12px; display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border:2px solid #fff3c4; border-radius:99px; color:#3d2500; background:linear-gradient(#ffe892,#ffb83d); box-shadow:0 3px 0 #a3610f,0 6px 14px #00204d66; font:11px/1 DraklyBold,'Trebuchet MS',sans-serif; letter-spacing:.06em; }
.tk-badge i { width:8px; height:8px; border-radius:50%; color:#ff4d2e; background:currentColor; animation:tk-pulse 1.6s infinite; }
.tk-badge.is-live { color:#063a2a; border-color:#d9ffef; background:linear-gradient(#a8ffd9,#38d69b); box-shadow:0 3px 0 #127a55,0 6px 14px #00204d66; }
.tk-badge.is-live i { color:#0d8f5f; }
.tk-hero-body { position:relative; margin-top:-34px; padding:0 16px 18px; }
.tk-hero-id { display:flex; align-items:center; gap:9px; }
.tk-hero-id img { width:42px; height:42px; border:3px solid #cbfaff; border-radius:50%; box-shadow:0 0 0 4px #85eaff33,0 0 18px #a7eeff99; }
.tk-hero h1 { margin:10px 0 8px; font-size:clamp(29px,8.4vw,38px); line-height:1.02; }
.tk-hero p { font-size:15px; }
.tk-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:16px 0 12px; }
.tk-stats div { display:grid; align-content:start; gap:4px; min-width:0; padding:10px 8px; border:2px solid #9be8ff; border-radius:14px; background:linear-gradient(#2c8ccb,#0d4f96); box-shadow:inset 0 1px #e7fbff77,0 3px 0 #0a397a; }
.tk-stats strong { color:#ffe17a; font:22px/1 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px #8a4d06; white-space:nowrap; }
.tk-stats span { color:#e1f6ff; font-size:11px; line-height:1.25; }
.tk-hero .tk-fomo { display:flex; align-items:center; gap:9px; padding:10px 12px; border:2px dashed #ffd36e; border-radius:13px; color:#fff1c4; background:#5a3a0533; font:14px/1.3 DraklyBold,'Trebuchet MS',sans-serif; }
.tk-fomo::before { content:''; flex:none; width:10px; height:10px; border-radius:50%; color:#ffb53d; background:currentColor; animation:tk-pulse 1.6s infinite; }
.tk-hero .token-share { min-height:46px; }

.tk-steps { display:grid; gap:10px; margin:14px 0 0; padding:0; list-style:none; }
.tk-steps li { display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:start; padding:12px; border:2px solid #8fe1f8; border-radius:15px; background:linear-gradient(#2c85c4,#0d549c); box-shadow:inset 0 1px #e8fcff88,0 3px 0 #0b3f82; }
.tk-steps b { display:grid; place-items:center; width:40px; height:40px; border:2px solid #fff3c4; border-radius:50%; color:#3d2500; background:linear-gradient(#ffe892,#ffb83d); box-shadow:0 3px 0 #a3610f; font:19px DraklyBlack,'Trebuchet MS',sans-serif; }
.tk-steps h3 { margin:1px 0 3px; color:#fff; font-size:17px; }
.tk-steps p { font-size:13px; }

.tk-card.has-art { margin-top:22px; }
.tk-art { float:right; width:136px; height:136px; margin:-44px -10px 2px 6px; shape-outside:circle(46%); filter:drop-shadow(0 8px 10px #00265e88); animation:tk-bob 4.5s ease-in-out infinite; }
.tk-burn .tk-art { animation-duration:3.2s; }
.tk-card.has-art::after { content:''; display:table; clear:both; }
.token-page .token-choice-row { grid-template-columns:repeat(auto-fit,minmax(0,1fr)); margin:10px 0 0; clear:both; }
.tk-split-bar { display:flex; gap:3px; height:28px; margin:14px 0 10px; padding:3px; overflow:hidden; border:2px solid #c9f7ff; border-radius:99px; background:#062c63; box-shadow:0 3px 0 #0a3f83; }
.tk-split-bar i { flex:1 1 0; min-width:0; border-radius:99px; }
.tk-seg-burn { background:linear-gradient(90deg,#ff6a2b,#ffb347); }
.tk-seg-pool { background:linear-gradient(90deg,#64e3ff,#b8f6ff); }
.tk-seg-ref { background:linear-gradient(90deg,#a77bff,#d3b8ff); }
.tk-seg-team { background:linear-gradient(90deg,#3f7fd0,#6ea6ea); }
.tk-split-key { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.tk-split-key div { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:2px 7px; min-width:0; padding:9px 10px; border:2px solid #80ceea; border-radius:12px; background:#0c4a8e; }
.tk-split-key .is-zero { opacity:.45; }
.tk-dot { width:12px; height:12px; border-radius:50%; }
.tk-split-key strong { color:#fff; font:18px DraklyBlack,'Trebuchet MS',sans-serif; }
.tk-split-key span { grid-column:1/-1; min-width:0; color:#d8f3ff; font-size:12px; line-height:1.2; }

.tk-leagues { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:16px 0 6px; clear:both; }
.tk-leagues div { display:grid; justify-items:center; gap:2px; min-width:0; padding:10px 3px 9px; border:2px solid #99e6fb; border-radius:13px; text-align:center; }
.tk-leagues .tk-league-0 { border-color:#fff1b0; background:linear-gradient(#ffd767,#d27c13); box-shadow:0 0 16px #ffc84d88; }
.tk-leagues .tk-league-1 { border-color:#ffe9a6; background:linear-gradient(#e6b84a,#9d6413); }
.tk-leagues .tk-league-2 { border-color:#e8f4ff; background:linear-gradient(#a9c3dd,#55779f); }
.tk-leagues .tk-league-3 { border-color:#ffd2ad; background:linear-gradient(#c98a5b,#7c4626); }
.tk-leagues strong { color:#fff; font:20px/1.05 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px #00000055; }
.tk-leagues span { color:#fff; font:12px/1.15 DraklyBold,'Trebuchet MS',sans-serif; overflow-wrap:anywhere; }
.tk-leagues small { color:#fffbe9; font-size:11px; }
.tk-caption { display:block; color:#c5e9f8; font-size:11px; text-align:center; }
.tk-card .tk-fair { display:flex; align-items:center; gap:10px; margin-top:12px; padding:11px 12px; border:2px solid #a8f0d6; border-radius:13px; background:#0b5a6a88; color:#eafff7; font-size:13px; }
.tk-fair .icon { flex:none; width:26px; height:26px; color:#9ff5d6; }

.tk-levels { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:16px 0 4px; clear:both; }
.tk-levels div { display:grid; justify-items:center; gap:4px; min-width:0; padding:10px 2px; border:2px solid #99e6fb; border-radius:13px; background:linear-gradient(#3a98c9,#0a5196); box-shadow:0 0 calc(var(--lvl) * 6px) #9ff3ff; }
.tk-levels strong { color:#fff; font:19px/1 DraklyBlack,'Trebuchet MS',sans-serif; }
.tk-levels span { color:#c9f7ff; font-size:12px; }
.tk-levels div:last-child { border-color:#fff1b0; background:linear-gradient(#ffd767,#d27c13); }
.tk-levels div:last-child span { color:#fff8dc; }
.tk-more { margin-top:12px; border:2px solid #7fcdee; border-radius:13px; background:#08386f; }
.tk-more summary { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:46px; padding:0 13px; color:#e9faff; cursor:pointer; list-style:none; font:14px DraklyBold,'Trebuchet MS',sans-serif; }
.tk-more summary::-webkit-details-marker { display:none; }
.tk-more summary .icon { width:18px; height:18px; transition:transform .2s; }
.tk-more[open] summary .icon { transform:rotate(180deg); }
.tk-more > p,.tk-more > h3 { padding:0 13px; }
.tk-card .tk-more > p { margin-bottom:12px; font-size:13px; }
.tk-more > h3 { margin:4px 0; color:#fff; font-size:14px; }

.token-paths .token-path-panel { margin-top:10px; border:2px solid #8de3fa; border-radius:15px; background:linear-gradient(#267db7,#0c4b91); box-shadow:inset 0 1px #e7fbff55,0 3px 0 #0a397a; }
.token-paths .token-path-panel h3 { margin:0 0 8px; font:19px/1.15 DraklyBlack,'Trebuchet MS',sans-serif; }
.token-paths .token-path-panel ol { margin:0; padding-left:20px; font-size:13px; line-height:1.45; }
.token-paths .token-path-panel li+li { margin-top:6px; }
.tk-card .token-path-panel p { margin-top:12px; padding-top:10px; border-top:1px solid #9be8ff44; color:#ffe9b0; font-size:12px; }
.token-page .token-choice { min-height:46px; border:2px solid #78d5f3; border-radius:13px; color:#e7faff; background:linear-gradient(#246fae,#0d4a90); box-shadow:inset 0 1px #e7fbff66,0 3px 0 #0a397a; font:13px/1.15 DraklyBold,'Trebuchet MS',sans-serif; }
.token-page .token-choice[aria-pressed="true"] { border-color:#fff4b8; color:#143c68; background:linear-gradient(#fff5bf,#9ce5ef); box-shadow:inset 0 1px #fff,0 4px 0 #1763a2; }

.tk-market.tk-soon { background:linear-gradient(160deg,#1f5c96,#0b2f63); }
.tk-market small { display:block; margin-top:8px; color:#c5e9f8; font-size:12px; text-align:center; }
.tk-price { display:grid; gap:2px; margin:6px 0 12px; }
.tk-price strong { color:#fff; font:32px/1 DraklyBlack,'Trebuchet MS',sans-serif; font-variant-numeric:tabular-nums; }
.tk-price span { color:#c5e3f0; font-size:12px; }
.tk-contract { margin-top:14px; }
.tk-contract > small { margin:0 0 6px; text-align:left; }

.tk-fact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:12px; }
.tk-fact-grid div { display:grid; align-content:start; gap:4px; min-width:0; padding:11px 10px; border:2px solid #8ac5dc; border-radius:13px; background:#0d4a8a; }
.tk-fact-grid strong { color:#ffe17a; font:22px/1 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px #8a4d06; }
.tk-fact-grid span { color:#d6effa; font-size:12px; line-height:1.3; }

.tk-final { overflow:hidden; text-align:center; background:linear-gradient(180deg,#f3c98a,#2e7fc3 32%,#0b3a7a); }
.tk-final img { display:block; width:100%; height:auto; aspect-ratio:860/484; object-fit:cover; -webkit-mask:linear-gradient(#000 70%,transparent); mask:linear-gradient(#000 70%,transparent); }
.tk-final > div { position:relative; margin-top:-30px; padding:0 16px 18px; }
.tk-final h2 { font-size:30px; }
.tk-risk { display:flex; gap:9px; align-items:flex-start; margin:0; padding:2px 4px; color:#b9d9ea; font-size:12px; line-height:1.45; }
.tk-risk .icon { flex:none; width:16px; height:16px; margin-top:1px; color:#ffd36e; }

@keyframes tk-bob { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-6px) } }
@keyframes tk-pulse { 0% { box-shadow:0 0 0 0 currentColor } 70% { box-shadow:0 0 0 7px transparent } 100% { box-shadow:0 0 0 0 transparent } }
@media(max-width:380px) { .tk-card { padding:16px 13px 14px; } .tk-hero-body,.tk-final > div { padding-inline:13px; } .tk-card h2 { font-size:22px; } .tk-art { width:116px; height:116px; margin:-38px -8px 2px 4px; } .tk-stats strong,.tk-fact-grid strong { font-size:19px; } .tk-leagues strong { font-size:17px; } .tk-levels strong { font-size:16px; } .tk-split-key div { padding:8px; } .token-page .token-choice { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .tk-art,.tk-badge i,.tk-fomo::before { animation:none; } }

/* Onboarding keeps the current action and the keeper's note in clear view. */
#tutorial-spotlight { position:fixed; z-index:40; inset:0; pointer-events:none; }
#tutorial-spotlight[hidden],body.battle-open #tutorial-spotlight,body:has(#utility-menu:not([hidden])) #tutorial-spotlight,body:has(.siege-picker-backdrop) #tutorial-spotlight { display:none; }
#tutorial-shade { position:absolute; inset:0; width:100%; height:100%; }
#tutorial-ring { position:fixed; border:3px solid #f2ffff; border-radius:17px; box-shadow:0 0 0 5px #54ddff75,0 0 22px 6px #b4faffae,inset 0 0 14px #e8ffff99; animation:tutorial-glow 1.8s ease-in-out infinite; }
@keyframes tutorial-glow { 50% { box-shadow:0 0 0 9px #54ddff42,0 0 32px 12px #b4faffdf,inset 0 0 18px #e8ffffaa; } }
.tower-coach .tutorial-route { pointer-events:auto; margin:3px 0 2px; min-height:38px; padding:7px 18px; font-size:12px; }
.tutorial-inline .tutorial-route { margin:4px 0; }
.tutorial-card .tutorial-returning { display:flex; align-items:center; justify-content:center; width:100%; min-height:42px; margin:8px 0 2px; padding:7px 10px; white-space:normal; text-align:center; font-size:12px; line-height:1.2; }
.tower-coach .tutorial-returning { pointer-events:auto; }
.tutorial-card .overline { color:#d1f9ff; }
.tutorial-hatchery .screen-heading { padding:2px 3px 0; }
.tutorial-hatchery .screen-heading .overline,.tutorial-hatchery .screen-heading p { display:none; }
.tutorial-hatchery .screen-heading h1 { margin:0 0 6px; font-size:21px; }
.tutorial-hatchery .tutorial-inline { margin-bottom:9px; }
.tutorial-hatchery .tutorial-inline .tutorial-card { padding:12px 14px; }
.tutorial-hatchery .first-egg-controls { padding:10px; }
.tutorial-hatchery .first-egg-offer { min-height:82px; }
.tutorial-hatchery .first-egg-art { width:59px; height:63px; }
.guide-now,.guide-rules { margin:12px 0; padding:14px; border:2px solid #9de9ff; border-radius:18px; background:linear-gradient(#287fc2,#0a3f84); }
.guide-now .tutorial-card { margin:8px 0 14px; }
.guide-path { display:grid; gap:14px; margin:16px 0; }
.guide-step { display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; }
.guide-step h2 { margin-top:0; }
.guide-step .btn { min-height:38px; margin-top:5px; }
.guide-number { display:grid; place-items:center; align-self:start; width:42px; height:42px; border:2px solid #caf8ff; border-radius:13px; background:#1680bd; color:white; font:18px DraklyBlack,'Trebuchet MS',sans-serif; }
.guide-rules summary,.combat-detail summary { cursor:pointer; color:#cbf8ff; font-family:DraklyBold,'Trebuchet MS',sans-serif; }
.guide-rules p,.combat-detail p { margin:7px 0 0; color:#e5f6ff; font-size:12px; line-height:1.45; }
.combat-detail { margin-top:7px; }
.floor-forecast .combat-detail { text-align:left; }
.siege-screen:has(.account-gate) { display:flex; flex-direction:column; }
.siege-screen:has(.account-gate) > .account-gate { order:-1; }
.siege-screen:has(.account-gate) > .siege-coach { order:-2; }
@media (prefers-reduced-motion:reduce) { #tutorial-ring { animation:none; } }

/* The intro, hatchery and every remaining game panel use the same painted world. */
.tutorial-hatchery { min-height:calc(100dvh - 150px); border:3px solid #9de9ff; background:linear-gradient(180deg,#0a366b38 0%,#093b79b8 48%,#082e69f5 100%),url('/assets/cartoon-arena-empty.webp') center top / cover no-repeat; box-shadow:inset 0 2px #edffff99,0 7px 0 #0d5597; }
.tutorial-hatchery .screen-heading { padding-top:22px; }
.tutorial-card,.first-egg-controls,.first-siege-guide,.empty-defense { border:3px solid #97e8ff; border-radius:18px; background:linear-gradient(145deg,#327fc2,#0c4c96 72%,#092c67); box-shadow:inset 0 2px #f3ffff88,0 5px 0 #0a4f9e; }
.tutorial-card h2,.task-group h2,.checkin-title h2 { color:white; font-family:DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 3px #125390; }
.tutorial-card > .progress,.task-progress,.mission-progress { border:1px solid #80cfff; background:#083b79; }
.tutorial-card > .progress span,.task-progress span,.mission-progress span { background:linear-gradient(90deg,#32d4f5,#abf6ff); }
.first-egg-controls { padding:12px; }
.first-egg-offer { border:3px solid #b6f2ff; border-radius:16px; color:white; background:linear-gradient(#65bce5,#1770b9 65%,#0b4c9a); box-shadow:inset 0 2px #fff9,0 4px 0 #074b96; }
.first-egg-offer strong,.first-egg-ready strong { color:white; font-family:DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px #115390; }
.first-egg-offer b,.first-egg-ready b,.roster-actions .maxed { color:#d1f8ff; }
.first-egg-offer small,.first-egg-ready small { color:#e5f9ff; }
.first-egg-ready { color:white; }
.hatchery { background:linear-gradient(180deg,#165490ad,#0b3c80ed 190px,#092e68 280px),url('/assets/cartoon-share-empty.webp') center top / cover no-repeat; }
.hatchery .egg-offer { border:2px solid #a8eeff; color:white; background:linear-gradient(#65bce5,#1770b9 65%,#0b4c9a); box-shadow:inset 0 2px #fff8,0 4px 0 #074b96; }
.hatchery .egg-offer strong,.hatchery .egg-offer .token-price,.hatchery .shop-note { color:#e8f9ff; }
.incubating,.incubating.ripe,.egg-odds { border:2px solid #9ee9ff; border-radius:13px; background:#125699dc; color:white; }
body.game-mode .tower-slot-empty,body.game-mode .tower-slot:disabled .tower-slot-empty { position:absolute; left:50%; bottom:-9px; display:block; width:120px; height:64px; padding:0; transform:translateX(-50%); border:0; border-radius:0; color:transparent; background:url('/assets/cartoon-summon-sigil.svg') center / contain no-repeat; box-shadow:none; filter:drop-shadow(0 1px 4px #4ddaffaa); }
body.game-mode .tower-slot-empty::before { content:none; }
body.game-mode .tower-slot-empty b,body.game-mode .tower-slot:disabled .tower-slot-empty b,body.game-mode .tower-slot-empty small { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
body.game-mode .tower-slot.dormant .tower-slot-empty { opacity:.4; }
body.game-mode .tower-slot.empty.coach-target .tower-slot-empty { box-shadow:none; filter:drop-shadow(0 0 9px #e4ffff); }
body.game-mode .game-action-bar .coach-target { border-color:white; box-shadow:0 0 0 3px #b7f4ff,0 0 20px #8ce8ff; }
body.game-mode .tower-floor-label { color:white; text-shadow:0 2px #104983,0 3px 6px #063063; }
body.game-mode .tower-spot-label { border:2px solid #abefff; color:white; background:#1265b4; }
body.game-mode .game-action-bar .action-button:disabled { color:#cde9fa; border-color:#72acd1; background:#195489; }
.slot-current strong { color:white; font-family:DraklyBlack,'Trebuchet MS',sans-serif; }.slot-current small,.slot-current p,.slot-sheet h4 { color:#ddf6ff; }
.slot-current-plus { border-color:#b4efff; color:#efffff; background:#1c70b6; }
.siege-picker-options button.chosen,.trait-option.chosen,.stance-option.chosen { border-color:#e7fdff; background:linear-gradient(#70cbeb,#1a80c3); box-shadow:inset 0 2px #fff9,0 3px 0 #0d539b; }
.lineup-choice,.enemy-unit,.stance-option,.floor-forecast,.ticket-list li,.standings-list > div,.history-battle,.economy-stats > div,.guild-table li { border:2px solid #8bdbf6; border-radius:14px; color:white; background:linear-gradient(#2f83c0,#0d5096); box-shadow:inset 0 2px #e9ffff69,0 3px 0 #0a478e; }
.lineup-choice strong,.enemy-unit strong,.history-battle strong,.economy-stats strong { color:white; font-family:DraklyBlack,'Trebuchet MS',sans-serif; }
.lineup-choice small,.lineup-choice em,.enemy-unit small,.enemy-skill,.history-battle small { color:#e0f6ff; }
.floor-route { border:2px solid #9eeaff; background:#0e4b91ed; }
.floor-route button,.floor-route button.active { border:2px solid #a7ebff; border-radius:12px; color:white; background:linear-gradient(#58b9e5,#196db7); box-shadow:0 3px 0 #093e81; font-family:DraklyBlack,'Trebuchet MS',sans-serif; }
.floor-route button.active { border-color:white; background:linear-gradient(#8ce6f2,#2a9ed0); }
.floor-number,.floor-threat,.ranked-remaining,.standings-list b,.standings-list strong { color:#d0f8ff; font-family:DraklyBlack,'Trebuchet MS',sans-serif; }
.mission-progress-label b,.mission-count { color:#d3f9ff; }
.ranked-card,.season-banner,.economy-hero,.checkin-card,.task-card,.share-tower-card { border:3px solid #92e3ff; border-radius:18px; color:white; background:linear-gradient(145deg,#2e83c3,#0e4e96 66%,#0a3675); box-shadow:inset 0 2px #fff8,0 5px 0 #0a4c94,0 10px 18px #032f6577; }
.season-banner { background:linear-gradient(90deg,#0d4888e8,#0c4d91aa),url('/assets/cartoon-share-empty.webp') center / cover; }
.season-banner strong,.economy-hero strong,.checkin-title > strong { color:#e9fbff; font-family:DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 3px #10579c; }
.expedition-card { background:linear-gradient(180deg,#104985a8,#0b3e83ed),url('/assets/cartoon-arena-empty.webp') center / cover; }
.task-head span,.task-done,.checkin-card > p,.checkin-actions small { color:#e5f8ff; }
.task-progress { border-radius:12px; }.task-progress span { border-radius:12px; }
.checkin-step,.checkin-step.done,.checkin-step.milestone { border:2px solid #78cef3; border-radius:11px; background:linear-gradient(#3e8ec8,#155997); color:white; }
.checkin-step.done { background:linear-gradient(#67bedc,#248eae); }.checkin-step.active { border-color:white; box-shadow:0 0 0 2px #b5f4ff; }
.share-tower-detail { background:linear-gradient(#2f83c0,#0d5096); }.share-tower-detail strong { color:white; font-family:DraklyBlack,'Trebuchet MS',sans-serif; }
.share-tower-card .btn.primary:not(.secondary):not(.subtle):not(.danger) { color:white; border:3px solid #1f6fe0; border-radius:999px; background:linear-gradient(180deg,#b9f4ff 0,#76defc 44%,#34c1f3 54%,#17a5e5 100%); box-shadow:inset 0 -3px #0f86d0,inset 0 2px #e6fdff,0 4px 0 #0b4fb4,0 8px 14px #0d3b6d66; text-shadow:0 1px 3px #0659a8cc,0 2px 6px #003a8299; }
.combat-arena,.combat-arena.floor-2,.combat-arena.floor-3 { background:linear-gradient(180deg,#0c3b781c,#092f6477),url('/assets/cartoon-versus-bg.webp') center / cover; }
.combat-light { background:radial-gradient(circle at 50% 55%,#a5efff69,transparent 55%); }
.combat-versus { color:white; font-family:DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 3px #0c4f98,0 0 15px #a4edff; }
.combat-caption,.combat-team-status { border:2px solid #9be8ff; border-radius:13px; color:white; background:#0d4d92ed; }
.combat-log,.battle-view-foot { background:#0a3d7b; }
.versus-preview { position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:11px; min-height:246px; padding:10px; overflow:hidden; border:3px solid #a6edff; border-radius:20px; background:linear-gradient(180deg,#0b4b8580,#072c62ba),url('/assets/cartoon-versus-bg.webp') center / cover; box-shadow:inset 0 2px #fff9,0 5px 0 #0b4d92; }
.versus-team { display:grid; grid-template-rows:auto 1fr auto; justify-items:center; min-width:0; padding:9px 4px; border:2px solid #9de6ffb8; border-radius:14px; background:linear-gradient(#267fbd99,#0a4588d9); text-align:center; }
.versus-team > span { color:#d7f8ff; font:11px DraklyBlack,'Trebuchet MS',sans-serif; letter-spacing:.04em; }.versus-team > div { display:flex; align-items:end; justify-content:center; width:100%; min-height:148px; }.versus-team img { width:54%; max-height:150px; object-fit:contain; filter:drop-shadow(0 5px 3px #0b315c88); }.versus-team img+img { margin-left:-19%; }.versus-team strong { max-width:100%; overflow:hidden; color:white; font:11px DraklyBold,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.versus-mark { position:absolute; z-index:2; top:46%; left:50%; transform:translate(-50%,-50%) rotate(-6deg); padding:7px 10px; border:3px solid white; border-radius:13px; color:white; background:linear-gradient(#53d6ec,#1260b7); box-shadow:0 4px 0 #073f88,0 6px 12px #001b4d88; font:25px DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px #0a4a91; }
.reveal-screen,.reveal-screen.rarity-rare,.reveal-screen.rarity-special { gap:10px; min-height:100dvh; padding:50px 20px 26px; background:linear-gradient(180deg,#0c459165,#082e6be6 72%),url('/assets/cartoon-versus-bg.webp') center / cover; }
.reveal-kicker { padding:6px 14px; border:2px solid #a9eeff; border-radius:12px; color:white; background:#0e60ab; }
.reveal-identity .rarity-pill { position:static; display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; color:white; background:linear-gradient(#61b9e7,#176ab2); }
.reveal-screen.rarity-rare .reveal-identity .rarity-pill { background:linear-gradient(#8c7de6,#444db5); }
.reveal-screen.rarity-special .reveal-identity .rarity-pill { background:linear-gradient(#648edb,#254a9a); }
.reveal-stage { width:min(78vw,310px); height:min(78vw,310px); margin:0; filter:drop-shadow(0 12px 11px #022b6388); }
.reveal-halo { position:absolute; z-index:-1; inset:12%; border:3px solid #bff8ff; border-radius:50%; background:radial-gradient(circle,#d6faff99,#6ac9ef22 67%,transparent 70%); box-shadow:0 0 34px #9aefff,0 0 0 12px #8bdffa22; }
.reveal-dragon { z-index:2; }.reveal-identity { display:grid; justify-items:center; gap:4px; }.reveal-identity h2 { margin:0; font-size:clamp(31px,9vw,42px); }.reveal-identity p { margin:0; color:#e8f7ff; }
.reveal-stats { display:grid; grid-template-columns:1fr 1fr; gap:9px; width:min(100%,340px); }.reveal-stats > div { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:2px; padding:10px 13px; border:2px solid #a9eeff; border-radius:14px; color:white; background:linear-gradient(#3295d0,#135ca8); box-shadow:inset 0 2px #fff8,0 4px 0 #0a468b; }.reveal-stats small { grid-column:1/-1; justify-self:start; color:#d6f7ff; font:10px DraklyBlack,'Trebuchet MS',sans-serif; }.reveal-stats strong { font:29px DraklyBlack,'Trebuchet MS',sans-serif; }.reveal-stats span { font:12px DraklyBold,'Trebuchet MS',sans-serif; }
.reveal-ability { display:flex; align-items:center; gap:8px; width:min(100%,340px); padding:9px; border:2px solid #9deaff; border-radius:13px; color:white; background:#0c5095eb; text-align:left; }.reveal-ability .skill-art { width:38px; height:38px; }.reveal-ability span { display:grid; gap:2px; }.reveal-ability strong { font:15px DraklyBlack,'Trebuchet MS',sans-serif; }.reveal-ability small { color:#e8f7ff; font-size:11px; line-height:1.3; }
@media(max-width:380px) { .versus-preview { min-height:207px; }.versus-team > div { min-height:115px; }.versus-team img { max-height:118px; }.versus-team strong { font-size:9px; }.reveal-screen { padding-top:44px; }.reveal-stage { width:245px; height:245px; } }
/* Battle results use the same painted arena and carved blue panels as the siege screen. */
.result-screen,.result-screen.victory,.result-screen.defeat { gap:9px; min-height:100dvh; padding:64px 20px 28px; color:white; background:linear-gradient(180deg,#0b4a87a8,#062c68eb 82%),url('/assets/cartoon-versus-bg.webp') center / cover; }
.result-art { display:grid; place-items:center; width:96px; height:96px; margin:0 auto 3px; border:4px solid #bbf7ff; border-radius:25px; color:white; background:linear-gradient(145deg,#93eefd,#2d9dd6 50%,#0d5aa6); box-shadow:inset 0 3px #fff9,0 7px 0 #064281,0 12px 19px #012b63aa; transform:rotate(-7deg); }
.result-art .icon { width:58px; height:58px; transform:rotate(7deg); filter:drop-shadow(0 3px 0 #135b98); }
.result-screen.defeat .result-art { background:linear-gradient(145deg,#ffbcbd,#db648c 50%,#8c3978); border-color:#ffe6ef; box-shadow:inset 0 3px #fff8,0 7px 0 #622862,0 12px 19px #2d1a62aa; }
.result-screen > .overline { padding:5px 13px; border:2px solid #aeedff; border-radius:10px; background:#1268aaeb; }
.result-screen h2 { margin:4px 0 0; color:white; font:clamp(28px,7vw,38px)/1.05 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 3px 0 #0c559c,0 6px 11px #052e6d; }
.result-screen p { color:#e7f7ff; }.result-rewards { margin:12px 0; }
.result-rewards > div { border:2px solid #a9edff; border-radius:17px; color:white; background:linear-gradient(#318ccb,#12599d); box-shadow:inset 0 2px #e8fdff88,0 4px 0 #0b488b; }
.result-rewards strong { color:white; font:28px/1 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px #145599; }.result-rewards small { color:#e2f7ff; font-family:DraklyBold,'Trebuchet MS',sans-serif; }
.result-insight,.result-analysis,.result-plan,.result-screen .coach-card { border:2px solid #a4eaff; border-radius:16px; color:white; background:linear-gradient(#247bb9ee,#0c4b91ee); box-shadow:inset 0 2px #e4fbff66,0 4px 0 #0a4289; }
.result-insight h3 { color:white; font:22px/1.15 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px #0c4e91; }
.result-analysis summary { color:#d9faff; }
.result-analysis h3 { color:white; font:21px/1.15 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px #0c4e91; }.result-analysis strong,.result-health b { color:#c9f7ff; }
.result-health span { border:2px solid #83d9f4; border-radius:10px; color:white; background:#135d9e; }
.result-cta { background:linear-gradient(#092f6a00,#082d68 32%); }
body.game-mode .game-action-bar .action-button { border:2px solid #a7ecff; border-radius:13px; color:white; background:linear-gradient(#4ca8dc,#1164af); box-shadow:inset 0 2px #f0ffff8c,0 3px 0 #0b488b; font-family:DraklyBold,'Trebuchet MS',sans-serif; text-shadow:0 1px #0a4d8f; }
body.game-mode .game-action-bar .action-button.secondary { border-color:#a7ecff; background:linear-gradient(#4ca8dc,#1164af); }
body.game-mode .game-action-bar .action-button.subtle { border-color:#91dcf4; color:white; background:linear-gradient(#328dca,#145c9f); }
body.game-mode .game-action-bar #action-credit { color:white; }
body.game-mode .game-action-bar #action-quest { border-color:#c4f7ff; color:white; background:linear-gradient(#8de6f6,#2593ce 55%,#1061a8); box-shadow:inset 0 2px #fff9,0 4px 0 #0a478b; text-shadow:0 2px #0c5599; }
body.game-mode .game-action-bar .action-button .action-cost.credits { color:#e9faff; background:#0a4a8d; }
/* The Rewards page arrived in main after the pilot: carry the illustrated language through Day N. */
.day-card { border:3px solid #a6edff; border-radius:22px; color:white; background:linear-gradient(155deg,#287fc1ed,#0b4b90f2 72%),url('/assets/cartoon-share-empty.webp') center / cover; box-shadow:inset 0 2px #eaffff8c,0 6px 0 #0a4c91,0 12px 20px #03296066; }
.day-card__head h2 { color:white; font:26px/1.1 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 3px #145594; }
.day-card__chest { color:#d8f9ff; font-family:DraklyBold,'Trebuchet MS',sans-serif; }
.day-cell,.day-cell.is-next { border:2px solid #83d7f5; border-radius:10px; color:#eefbff; background:linear-gradient(#3489c5,#135696); box-shadow:inset 0 1px #e9ffff66,0 2px 0 #0a4485; }
.day-cell.is-today { border-color:white; color:white; background:linear-gradient(#8aebfa,#268ec8 70%,#1160a6); box-shadow:0 0 0 2px #7ddff4,0 4px 0 #0a4c90,0 0 18px #8be9ff88; }
.day-cell.is-today .day-cell__n,.day-cell.is-claimed .day-cell__n { color:white; }
.day-cell.is-chest,.day-cell.is-chest.is-claimed { border-color:#a4e9ff; color:white; background:linear-gradient(#5eabd8,#1d68a8); }
.day-cell.is-claimed { border-color:#77d4ed; color:#e4fbff; background:linear-gradient(#3289b0,#176288); }
.day-card__note,.day-card__done small,.day-ad__text small,.day-ad__wait { color:#d9f4ff; }
.day-card__done { border:2px solid #9be7fa; border-radius:14px; color:white; background:#125c9bd9; }.day-card__done strong,.day-card__done small b,.day-ad__text strong { color:white; }
.day-ad { border-top:2px solid #8cdef3; }
.task-group__head small,.goals-group h3 { color:#d8f5ff; }.task-group__head small b { color:white; }
.task-card.is-ready { border-color:white; box-shadow:inset 0 2px #ffffff99,0 5px 0 #0a4c94,0 0 0 2px #95e9ff; }
.task-card.is-claimed { border-color:#86d8ee; color:#e8faff; background:linear-gradient(#2879ad,#135181); }
.quest-row__reward,.quest-chest,.quest-row b { color:#c5f7ff; }
.quest-chest { border:2px dashed #8bdef6; border-radius:13px; background:#115794aa; }
.daily-unlock { border:2px solid #72cbea; border-radius:13px; color:#e2f7ff; background:#0f528f; }
.daily-link { border:3px solid #93e5fb; border-radius:17px; color:white; background:linear-gradient(#348dc8,#115393); box-shadow:inset 0 2px #fff7,0 4px 0 #0b4e94; }.daily-link__icon { color:#d4f8ff; }
@media(max-width:380px) { .day-card__head { align-items:flex-start; flex-direction:column; gap:6px; }.day-card__head h2 { font-size:25px; }.day-card__claim { padding-inline:8px; font-size:12px; }.day-strip { gap:4px; } }

/* Keep the tutorial action above the fixed navigation on short phones. */
.tutorial-hatchery .screen-heading { padding-top:0; }
.tutorial-hatchery .tutorial-card h2 { font-size:21px; line-height:1.04; }
.tutorial-hatchery .tutorial-card p { font-size:11px; line-height:1.35; }
.tutorial-hatchery .first-egg-offer { min-height:76px; }
.tutorial-hatchery .first-egg-offer .first-egg-art,.tutorial-hatchery .first-egg-ready .first-egg-art { width:54px; height:59px; }
.tutorial-hatchery .first-egg-offer strong,.tutorial-hatchery .first-egg-ready strong { font:17px/1.05 DraklyBlack,'Trebuchet MS',sans-serif; }
.tutorial-hatchery .first-egg-offer small,.tutorial-hatchery .first-egg-ready small { font-size:11px; line-height:1.2; }
.ready-egg-tap { width:100%; min-height:92px; padding:8px; border:3px solid #b8f5ff; border-radius:16px; color:white; background:linear-gradient(#66bce6,#166cb7); box-shadow:inset 0 2px #fff9,0 4px 0 #0b4c96; text-align:left; cursor:pointer; }
.ready-egg-tap:active { transform:translateY(2px); }

/* Egg reveal: tap first, then the dragon and its traits arrive in sequence. */
.reveal-screen:not(.is-open) .after-open,.reveal-screen.is-open .before-open { display:none; }
.reveal-screen .reveal-stage { transition:width .55s ease,height .55s ease; }
.reveal-screen.is-open .reveal-stage { width:min(44vw,185px); height:min(44vw,185px); }
.reveal-tap { position:absolute; z-index:3; inset:0; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:pointer; }
.reveal-tap:focus-visible { outline:3px solid #fff; outline-offset:3px; border-radius:50%; }
.reveal-screen .reveal-egg { animation:none; opacity:1; filter:drop-shadow(0 12px 13px #032b67aa); }
.reveal-tap-label { position:absolute; z-index:4; left:50%; bottom:-8px; width:max-content; padding:7px 15px; transform:translateX(-50%); border:2px solid #c6f7ff; border-radius:18px; color:#fff; background:#0a61ac; box-shadow:0 3px 0 #0a3b81; font:12px DraklyBlack,'Trebuchet MS',sans-serif; }
.reveal-screen .reveal-dragon { opacity:0; animation:none; }
.reveal-flash,.reveal-rarity-frame { position:absolute; z-index:4; inset:-8%; border-radius:50%; opacity:0; pointer-events:none; }
.reveal-flash { background:radial-gradient(circle,#fff 0%,#d7ffffdd 18%,#84e9ff88 40%,transparent 68%); }
.reveal-rarity-frame { border:5px solid #bff8ff; box-shadow:0 0 23px #a5f6ff,inset 0 0 23px #a5f6ff; }
.reveal-screen.rarity-rare .reveal-rarity-frame { border-color:#d8baff; box-shadow:0 0 28px #b997ff,inset 0 0 25px #b997ff; }
.reveal-screen.rarity-special .reveal-rarity-frame,.reveal-screen.rarity-seasonal .reveal-rarity-frame { border-color:#ffe9a4; box-shadow:0 0 34px #ffd96c,0 0 64px #fff2ae,inset 0 0 26px #ffe9a4; }
.reveal-screen.rarity-special .reveal-flash,.reveal-screen.rarity-seasonal .reveal-flash { background:radial-gradient(circle,#fff 0%,#fff1bbee 18%,#ffd36499 42%,transparent 70%); }
.reveal-screen.is-open .reveal-egg { animation:cartoon-egg-open .8s ease-in forwards; }
.reveal-screen.is-open .reveal-tap-label { display:none; }
.reveal-screen.is-open .reveal-tap { pointer-events:none; }
.reveal-screen.is-open .reveal-flash { animation:cartoon-flash 1s ease-out .34s both; }
.reveal-screen.is-open .reveal-rarity-frame { animation:cartoon-frame .8s ease-out .66s both; }
.reveal-screen.is-open .reveal-dragon { animation:cartoon-dragon .75s cubic-bezier(.18,.76,.3,1.15) .74s both; }
.reveal-rewards { display:none; justify-items:center; gap:7px; width:100%; }
.reveal-screen.is-open .reveal-rewards { display:grid; }
.reveal-screen.is-open .reveal-identity { animation:cartoon-reward .5s ease-out .85s both; }
.reveal-screen.is-open .reveal-stats > div:first-child { animation:cartoon-reward .5s ease-out 1.02s both; }
.reveal-screen.is-open .reveal-stats > div:last-child { animation:cartoon-reward .5s ease-out 1.16s both; }
.reveal-screen.is-open .reveal-ability { animation:cartoon-reward .5s ease-out 1.3s both; }
.reveal-screen.is-open .reveal-rewards > .btn { animation:cartoon-reward .5s ease-out 1.42s both; }
.reveal-screen.is-open { gap:7px; padding:34px 14px 20px; }
.reveal-screen.is-open .reveal-stats > div { padding:7px 10px; }
.reveal-screen.is-open .reveal-stats strong { font-size:23px; }
.reveal-screen.is-open .reveal-identity h2 { font-size:clamp(25px,8vw,34px); }
.reveal-screen.is-open .reveal-ability { padding:7px; }
.reveal-bonus-icon { display:grid; place-items:center; width:110px; height:110px; border:4px solid #d8faff; border-radius:50%; background:radial-gradient(circle,#72dff4,#0b5aab); box-shadow:0 0 32px #9af3ff; animation:cartoon-reward .65s ease-out both; }
.reveal-bonus-icon .ui-icon { width:68px; height:68px; }
.result-screen .result-rewards > div { animation:cartoon-reward .55s ease-out both; }
.result-screen .result-rewards > div:nth-child(2) { animation-delay:.18s; }
@keyframes cartoon-egg-open { 0%,28% { opacity:1; transform:scale(1) rotate(0); } 48% { transform:scale(1.07) rotate(-7deg); } 62% { transform:scale(1.12) rotate(7deg); } 100% { opacity:0; transform:scale(1.35); filter:brightness(2.5); } }
@keyframes cartoon-flash { 0% { opacity:0; transform:scale(.3); } 36% { opacity:1; } 100% { opacity:0; transform:scale(1.5); } }
@keyframes cartoon-frame { from { opacity:0; transform:scale(.6) rotate(-20deg); } to { opacity:1; transform:scale(1) rotate(0); } }
@keyframes cartoon-dragon { from { opacity:0; transform:translateY(24px) scale(.72); } to { opacity:1; transform:none; } }
@keyframes cartoon-reward { from { opacity:0; transform:translateY(15px) scale(.94); } to { opacity:1; transform:none; } }
@media(max-width:380px) { .reveal-screen.is-open .reveal-stage { width:155px; height:155px; }.reveal-screen.is-open .reveal-kicker { padding:4px 10px; }.reveal-screen.is-open .reveal-identity p { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .reveal-screen .reveal-stage { transition:none; }.reveal-screen.is-open .reveal-egg { display:none; }.reveal-screen.is-open .reveal-flash { display:none; }.reveal-screen.is-open .reveal-rarity-frame,.reveal-screen.is-open .reveal-dragon,.reveal-screen.is-open .reveal-identity,.reveal-screen.is-open .reveal-stats > div,.reveal-screen.is-open .reveal-ability,.reveal-screen.is-open .reveal-rewards > .btn,.result-screen .result-rewards > div { animation:none; opacity:1; } }
@media(max-height:650px) {
 .siege-screen:has(.account-gate) > .account-gate { padding:10px 13px; }
 .siege-screen .account-gate .gate-logo { width:49px; height:49px; margin-bottom:3px; }
 .siege-screen .account-gate h2 { margin:3px 0 5px; font-size:21px; }
 .siege-screen .account-gate p { margin-bottom:7px; font-size:11px; line-height:1.3; }
 .siege-screen .account-gate .field { margin-bottom:6px; }
 .siege-screen .account-gate input { min-height:38px; }
 .siege-screen .account-gate .btn { min-height:42px; }
}
.roster-detail { margin:5px 0 8px; }
.roster-detail summary { color:#c7f6ff; font:11px DraklyBold,'Trebuchet MS',sans-serif; cursor:pointer; }
.roster-detail p { margin:6px 0; color:#e2f7ff; font-size:11px; line-height:1.4; }
/* Empty and recovery states share the same illustrated character language. */
body .empty-state { gap:5px; padding:12px 10px 20px; }
body .empty-state__art,body .defense-log .empty-state__art { width:min(70vw,220px); height:160px; object-fit:contain; filter:drop-shadow(0 7px 9px #06285377); }
body .empty-state__title { max-width:310px; margin:0; color:#fff; font:18px/1.15 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px #125390; }
body .empty-state__text { max-width:310px; color:#e6f8ff; font:12px/1.4 DraklyBold,'Trebuchet MS',sans-serif; }
.token-public-nav a,.boot-screen strong { font-family:DraklyBlack,'Trebuchet MS',sans-serif; font-weight:400; letter-spacing:.01em; color:#fff; text-shadow:0 2px #0d4e98; }

/* ===== Hatchery v3: the nest, the egg shop and the three-crack reveal (app.js eggNest, hatchTap). ===== */
.egg-nest,.reveal-v3,.egg-offer,.bay-rarity,.odds-row { --rc:#8ce8ff; --rc2:#1a78c9; --rglow:#8ce8ff88; }
.rarity-rare,.reveal-v3.fx-rare { --rc:#c9a6ff; --rc2:#6a4bd0; --rglow:#b997ffaa; }
.rarity-special,.rarity-seasonal,.reveal-v3.fx-special { --rc:#ffd96c; --rc2:#c98a2a; --rglow:#ffd96caa; }

/* Nest: rays, a ripeness ring (--p 0..1), a glowing pedestal and the egg on it. */
.egg-nest { position:relative; display:grid; place-items:center; flex:none; width:148px; height:148px; padding:0; border:0; background:none; color:inherit; isolation:isolate; -webkit-tap-highlight-color:transparent; }
button.egg-nest { cursor:pointer; }
.nest-rays { position:absolute; inset:-14%; z-index:-3; border-radius:50%; background:repeating-conic-gradient(from 0deg,var(--rglow) 0 7deg,transparent 7deg 22deg); -webkit-mask:radial-gradient(circle,#000 18%,transparent 68%); mask:radial-gradient(circle,#000 18%,transparent 68%); opacity:.35; animation:nest-spin 16s linear infinite; }
.nest-ring { position:absolute; inset:3%; z-index:-2; border-radius:50%; background:conic-gradient(from -90deg,var(--rc) calc(var(--p) * 1turn),#06295a99 0); -webkit-mask:radial-gradient(circle,transparent 62%,#000 63.5%,#000 70%,transparent 71.5%); mask:radial-gradient(circle,transparent 62%,#000 63.5%,#000 70%,transparent 71.5%); filter:drop-shadow(0 0 6px var(--rc)); transition:background .6s; }
.nest-base { position:absolute; left:50%; bottom:9%; z-index:-1; width:72%; height:22%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse at 50% 40%,#fff9 0%,var(--rc) 25%,var(--rc2) 60%,transparent 72%); box-shadow:0 0 22px var(--rglow); opacity:.85; }
.nest-egg { position:relative; width:64%; height:64%; margin-top:-6%; transform-origin:50% 88%; animation:nest-wobble var(--wob,2.6s) ease-in-out infinite; }
.nest-egg .egg-art { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 6px #02225088); }
.nest-cracks,.reveal-cracks { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.crack { fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:60; opacity:0; filter:drop-shadow(0 0 1.6px var(--rc)) drop-shadow(0 0 3px var(--rc)); }
.egg-nest.is-cracking .crack.c1,.egg-nest.nest-ripe .crack.c1,.egg-nest.nest-ripe .crack.c2 { opacity:1; stroke-dashoffset:0; transition:stroke-dashoffset .6s ease-out; }
.nest-motes { position:absolute; inset:0; z-index:1; pointer-events:none; }
.nest-motes i { position:absolute; left:50%; bottom:28%; width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 6px 2px var(--rc); opacity:0; animation:nest-mote 2.8s ease-out infinite; }
.nest-motes i:nth-child(1) { --x:-46px; animation-delay:0s; }.nest-motes i:nth-child(2) { --x:38px; animation-delay:.5s; }.nest-motes i:nth-child(3) { --x:-18px; animation-delay:1s; width:4px; height:4px; }.nest-motes i:nth-child(4) { --x:52px; animation-delay:1.5s; }.nest-motes i:nth-child(5) { --x:-58px; animation-delay:2s; width:4px; height:4px; }.nest-motes i:nth-child(6) { --x:14px; animation-delay:2.4s; }.nest-motes i:nth-child(7) { --x:-30px; animation-delay:.8s; }.nest-motes i:nth-child(8) { --x:30px; animation-delay:1.8s; width:4px; height:4px; }
.nest-idle .nest-ring { --p:0; }
.nest-empty .nest-egg { opacity:.28; filter:grayscale(.6) brightness(.7); animation:none; }
.nest-empty .nest-rays { display:none; }
.nest-offer .nest-egg { animation:nest-float 2.6s ease-in-out infinite; }
.nest-offer .nest-ring { --p:1; opacity:.45; }
.nest-ripe .nest-rays { opacity:.8; animation-duration:7s; }
.nest-ripe .nest-ring { --p:1; animation:nest-pulse 1.2s ease-in-out infinite; }
.nest-ripe .nest-egg { animation:nest-ready 1.25s cubic-bezier(.3,.7,.4,1) infinite; }
.nest-ripe .nest-base { opacity:1; }
.egg-nest.fx-drop .nest-egg { animation:nest-drop .7s cubic-bezier(.3,1.4,.5,1) both; }
.egg-nest.fx-boost .nest-ring { animation:nest-boost .7s ease-out both; }
.egg-nest.fx-boost .nest-egg { animation:nest-ready .5s ease-out 2; }
@keyframes nest-spin { to { transform:rotate(1turn); } }
@keyframes nest-wobble { 0%,62%,100% { transform:rotate(0); } 70% { transform:rotate(-6deg); } 78% { transform:rotate(5deg); } 86% { transform:rotate(-3deg); } 93% { transform:rotate(1.5deg); } }
@keyframes nest-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes nest-ready { 0%,100% { transform:translateY(0) scale(1,1); } 18% { transform:translateY(0) scale(1.08,.9); } 42% { transform:translateY(-14px) scale(.95,1.06) rotate(-4deg); } 64% { transform:translateY(0) scale(1.06,.93) rotate(3deg); } 80% { transform:translateY(-3px) scale(1); } }
@keyframes nest-pulse { 0%,100% { filter:drop-shadow(0 0 5px var(--rc)); } 50% { filter:drop-shadow(0 0 14px var(--rc)) brightness(1.3); } }
@keyframes nest-mote { 0% { opacity:0; transform:translate(-50%,0) scale(.4); } 20% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% + var(--x)),-90px) scale(1); } }
@keyframes nest-drop { 0% { opacity:0; transform:translateY(-120px) scale(.7); } 55% { opacity:1; transform:translateY(0) scale(1.1,.86); } 75% { transform:translateY(-8px) scale(.96,1.05); } 100% { transform:none; } }
@keyframes nest-boost { 0% { filter:drop-shadow(0 0 0 #fff) brightness(1); } 35% { filter:drop-shadow(0 0 18px #fff) brightness(2.2); } 100% { filter:drop-shadow(0 0 6px var(--rc)); } }

/* Tutorial hatchery: one big nest card per step. */
.tutorial-hatchery .first-egg-controls { display:grid; gap:10px; padding:14px 12px; }
.tutorial-hatchery .first-egg-offer,.tutorial-hatchery .first-egg-ready { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; width:100%; min-height:0; padding:8px 14px 8px 4px; text-align:left; }
.tutorial-hatchery .first-egg-ready { border:0; background:none; box-shadow:none; }
.tutorial-hatchery button.first-egg-ready { border:3px solid #ffe9a4; border-radius:16px; background:linear-gradient(#5db6e2,#1770b9 65%,#0b4c9a); box-shadow:inset 0 2px #fff9,0 4px 0 #074b96,0 0 22px #ffd96c88; cursor:pointer; }
.tutorial-hatchery .first-egg-controls .egg-nest { width:118px; height:118px; }
.first-egg-copy { display:grid; gap:3px; min-width:0; }
.tutorial-hatchery .first-egg-copy strong { font:19px/1.05 DraklyBlack,'Trebuchet MS',sans-serif; }
.tutorial-hatchery .first-egg-copy small { font-size:12px; line-height:1.25; }
.tutorial-hatchery .first-egg-copy b { color:#fff; font:17px DraklyBlack,'Trebuchet MS',sans-serif; font-variant-numeric:tabular-nums; }
.first-egg-price { display:inline-flex; align-items:center; gap:4px; padding:7px 11px; border:2px solid #fff3c4; border-radius:13px; color:#3b2a13 !important; background:linear-gradient(#ffe9a0,#f0b84f); box-shadow:inset 0 2px #fff9,0 3px 0 #a3661f; font:16px DraklyBlack,'Trebuchet MS',sans-serif; }
.first-egg-price .ui-icon { width:20px; height:20px; }

/* Hatchery card: the bay with the nest, three egg cards, odds with silhouettes. */
.hatchery.hatchery-v3 { display:grid; grid-template-columns:1fr; gap:12px; }
.hatchery-v3 .hatchery-title p { margin-bottom:0; }
.incubator-bay { position:relative; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px; padding:8px 12px 8px 2px; border:2px solid #9ee9ff; border-radius:18px; color:#fff; background:radial-gradient(circle at 22% 50%,#3fa4e255,transparent 55%),linear-gradient(160deg,#16609fe6,#0b3c80f2); box-shadow:inset 0 2px #c8f7ff55,0 4px 0 #082f6a; overflow:hidden; }
.incubator-bay.is-ripe { border-color:#ffe9a4; box-shadow:inset 0 2px #fff6,0 4px 0 #082f6a,0 0 24px #ffd96c66; }
.incubator-bay.is-empty { border-style:dashed; border-color:#8fdcffaa; background:#0b3c80b0; }
.incubator-bay .egg-nest { width:136px; height:136px; }
.bay-copy { display:grid; justify-items:start; gap:4px; min-width:0; }
.bay-copy strong { font:20px/1.05 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px #0c4b92; }
.bay-copy > span:not(.bay-rarity),.bay-copy small { color:#d8f4ff; font-size:12px; line-height:1.3; }
.bay-copy .btn { margin-top:4px; min-height:42px; }
.bay-copy .bay-open { min-width:132px; animation:bay-cta 1.6s ease-in-out infinite; }
.bay-rarity { padding:3px 9px; border:2px solid var(--rc); border-radius:10px; color:#fff; background:linear-gradient(var(--rc2),#0b3c80); font:10px DraklyBlack,'Trebuchet MS',sans-serif; letter-spacing:.06em; text-transform:uppercase; box-shadow:0 0 10px var(--rglow); }
.bay-timer { display:inline-flex; align-items:center; gap:5px; }
.bay-timer .icon { width:17px; height:17px; color:#bff4ff; }
.bay-timer b { color:#fff; font:24px DraklyBlack,'Trebuchet MS',sans-serif; font-variant-numeric:tabular-nums; text-shadow:0 2px #0c4b92; }
@keyframes bay-cta { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); box-shadow:0 0 18px #ffe9a4; } }

.hatchery-v3 .egg-shop-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; }
.hatchery-v3 .egg-offer { position:relative; display:grid; justify-items:center; align-content:start; gap:3px; min-height:0; padding:6px 4px 9px; overflow:hidden; border:2px solid var(--rc); border-radius:16px; color:#fff; background:radial-gradient(circle at 50% 30%,var(--rglow),transparent 60%),linear-gradient(170deg,#2d86cc,#104e96 55%,#0a3772); box-shadow:inset 0 2px #ffffff66,0 4px 0 #072f68,0 0 0 1px #0007; transition:transform .12s; }
.hatchery-v3 .egg-offer.rarity-rare { background:radial-gradient(circle at 50% 30%,var(--rglow),transparent 60%),linear-gradient(170deg,#6a5fd6,#3a3a9e 55%,#22266b); }
.hatchery-v3 .egg-offer.rarity-special { background:radial-gradient(circle at 50% 30%,#ffd96c77,transparent 60%),linear-gradient(170deg,#2b5fae,#1a3b84 55%,#0f2558); }
.hatchery-v3 .egg-offer:not(:disabled):active { transform:translateY(2px) scale(.97); }
.egg-offer-stage { position:relative; display:grid; place-items:center; width:74px; height:74px; }
.egg-offer-glow { position:absolute; inset:6% 6% 0; border-radius:50%; background:radial-gradient(circle,var(--rglow),transparent 65%); animation:offer-glow 2.4s ease-in-out infinite; }
.hatchery-v3 .egg-offer .egg-offer-art { position:relative; width:64px; height:64px; margin:0; object-fit:contain; filter:drop-shadow(0 5px 4px #02225088); animation:nest-float 2.8s ease-in-out infinite; }
.hatchery-v3 .egg-offer.rarity-rare .egg-offer-art { animation-delay:-.9s; }.hatchery-v3 .egg-offer.rarity-special .egg-offer-art { animation-delay:-1.8s; }
.egg-offer-shine { position:absolute; inset:0; overflow:hidden; -webkit-mask:url('/assets/cartoon-egg-basic-512.webp') center / 64px 64px no-repeat; mask:url('/assets/cartoon-egg-basic-512.webp') center / 64px 64px no-repeat; animation:nest-float 2.8s ease-in-out infinite; }
.rarity-rare .egg-offer-shine { -webkit-mask-image:url('/assets/cartoon-egg-rare-512.webp'); mask-image:url('/assets/cartoon-egg-rare-512.webp'); animation-delay:-.9s; }
.rarity-special .egg-offer-shine { -webkit-mask-image:url('/assets/cartoon-egg-special-512.webp'); mask-image:url('/assets/cartoon-egg-special-512.webp'); animation-delay:-1.8s; }
.egg-offer-shine::after { content:""; position:absolute; top:-10%; bottom:-10%; left:-60%; width:40%; background:linear-gradient(100deg,transparent,#ffffffcc,transparent); transform:skewX(-18deg); animation:offer-shine 3.6s ease-in-out infinite; }
.rarity-rare .egg-offer-shine::after { animation-delay:1.2s; }.rarity-special .egg-offer-shine::after { animation-delay:2.4s; }
.hatchery-v3 .egg-offer strong { color:#fff; font:14px/1.05 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px #0a3a78; }
.egg-offer-time { display:inline-flex; align-items:center; gap:3px; color:#d6f3ff; font-size:11px; }
.egg-offer-time .icon { width:12px; height:12px; }
.egg-offer-price { display:inline-flex; align-items:center; gap:3px; margin-top:3px; padding:4px 10px; border:2px solid #fff3c4; border-radius:11px; color:#3b2a13; background:linear-gradient(#ffe9a0,#f0b84f); box-shadow:inset 0 1px #fffa,0 2px 0 #a3661f; font:14px DraklyBlack,'Trebuchet MS',sans-serif; }
.egg-offer-price .ui-icon { width:16px !important; height:16px !important; }
.hatchery-v3 .egg-offer .token-price { color:#bfe4f5; font-size:10px; }
.hatchery-v3 .egg-offer:disabled { opacity:1; filter:saturate(.45) brightness(.78); }
.hatchery-v3 .egg-offer:disabled .egg-offer-art,.hatchery-v3 .egg-offer:disabled .egg-offer-glow,.hatchery-v3 .egg-offer:disabled .egg-offer-shine { animation:none; }
.hatchery-v3 .egg-offer:disabled .egg-offer-shine { display:none; }
.egg-shop-busy { margin:-4px 2px 0; color:#cdeeff; font-size:11px; text-align:center; }
@keyframes offer-glow { 0%,100% { opacity:.6; transform:scale(.92); } 50% { opacity:1; transform:scale(1.06); } }
@keyframes offer-shine { 0%,55% { left:-60%; } 85%,100% { left:130%; } }

.hatchery-v3 .egg-odds { margin:0; padding:2px 10px 10px; }
.hatchery-v3 .egg-odds summary { justify-content:space-between; gap:8px; color:#fff; font:14px DraklyBlack,'Trebuchet MS',sans-serif; }
.hatchery-v3 .egg-odds summary span { padding:2px 8px; border-radius:9px; color:#d6f3ff; background:#0b3c80; font:11px DraklyBold,'Trebuchet MS',sans-serif; }
.odds-row + .odds-row { margin-top:10px; }
.odds-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.odds-head b { color:var(--rc); font:13px DraklyBlack,'Trebuchet MS',sans-serif; text-transform:uppercase; letter-spacing:.05em; text-shadow:0 2px #062a5a; }
.odds-head span { color:#e6f6ff; font-size:12px; font-variant-numeric:tabular-nums; }
.odds-dex { display:grid; grid-template-columns:repeat(auto-fill,minmax(54px,1fr)); gap:6px; }
.odds-cell { display:grid; justify-items:center; gap:3px; min-width:0; }
.odds-sil { position:relative; display:block; width:100%; aspect-ratio:1; overflow:hidden; border:2px solid var(--rc); border-radius:12px; background:radial-gradient(circle at 50% 38%,var(--rc2),#08295a 78%); }
.odds-sil img { width:100%; height:100%; object-fit:cover; filter:brightness(0) saturate(0); opacity:.55; }
.odds-sil i { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font:normal 20px DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 0 8px var(--rc),0 2px #062a5a; }
.odds-cell small { max-width:100%; overflow:hidden; color:#d6f0ff; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }

/* Reveal v3: the egg on a lit stage, three cracks, charge, burst, silhouette, then the card. */
.reveal-v3 { position:relative; overflow:hidden; isolation:isolate; align-content:center; }
.reveal-v3::before { content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(circle at 50% 40%,transparent 20%,#021a42cc 85%); pointer-events:none; }
.reveal-bg-rays { position:absolute; left:50%; top:40%; z-index:-1; width:170vmax; height:170vmax; margin:-85vmax 0 0 -85vmax; border-radius:50%; background:repeating-conic-gradient(from 0deg,var(--rglow) 0 5deg,transparent 5deg 18deg); -webkit-mask:radial-gradient(circle,#000 4%,transparent 42%); mask:radial-gradient(circle,#000 4%,transparent 42%); opacity:.28; animation:nest-spin 24s linear infinite; pointer-events:none; transition:opacity .5s; }
.reveal-v3.crack-2 .reveal-bg-rays { opacity:.45; }
.reveal-v3.is-charging .reveal-bg-rays { opacity:.7; animation-duration:4s; }
.reveal-v3.is-open .reveal-bg-rays { opacity:.9; animation-duration:14s; }
.reveal-v3 .reveal-kicker { border-color:var(--rc); background:linear-gradient(var(--rc2),#0b3c80); box-shadow:0 0 16px var(--rglow); letter-spacing:.08em; }
.reveal-v3 .reveal-kicker .before-open { text-transform:uppercase; }
.reveal-v3 .reveal-stage,.reveal-v3.is-open:not(.is-settled) .reveal-stage { width:min(82vw,330px); height:min(82vw,330px); }
.reveal-v3.is-settled .reveal-stage { width:min(48vw,200px); height:min(48vw,200px); }
.reveal-v3 .reveal-halo { border-color:var(--rc); background:radial-gradient(circle,#ffffff55,var(--rglow) 45%,transparent 70%); box-shadow:0 0 34px var(--rglow),0 0 0 12px #ffffff10; animation:halo-breathe 2.4s ease-in-out infinite; }
.reveal-v3.is-charging .reveal-halo { animation:halo-breathe .28s ease-in-out infinite; }
.reveal-v3 .reveal-motes { z-index:1; }
.reveal-v3 .reveal-motes i { bottom:40%; }
.reveal-egg-wrap { position:absolute; inset:14%; display:block; transform-origin:50% 90%; }
.reveal-v3 .reveal-egg { position:absolute; inset:0; animation:nest-float 2.6s ease-in-out infinite; }
.reveal-v3 .reveal-cracks .crack { stroke-width:1.3; }
.reveal-v3.crack-1 .crack.c1,.reveal-v3.crack-2 .crack.c2,.reveal-v3.crack-3 .crack.c3 { opacity:1; stroke-dashoffset:0; transition:stroke-dashoffset .35s ease-out; }
.reveal-v3.crack-2 .crack.c1,.reveal-v3.crack-3 .crack.c1,.reveal-v3.crack-3 .crack.c2 { opacity:1; stroke-dashoffset:0; }
.reveal-v3.crack-2 .reveal-egg { filter:drop-shadow(0 12px 13px #032b67aa) drop-shadow(0 0 10px var(--rc)); }
.reveal-egg-wrap.is-hit { animation:egg-hit .42s cubic-bezier(.3,.8,.4,1); }
.reveal-stage.is-shaken { animation:stage-shake .3s linear; }
.reveal-v3.is-charging .reveal-egg-wrap { animation:egg-charge .09s linear infinite; }
.reveal-v3.is-charging .reveal-egg { animation:none; filter:brightness(1.6) drop-shadow(0 0 22px var(--rc)); transition:filter .5s; }
.reveal-half { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; pointer-events:none; }
.reveal-half--top { clip-path:polygon(0 0,100% 0,100% 53%,88% 47%,77% 56%,65% 46%,53% 57%,41% 46%,29% 56%,17% 47%,0 54%); }
.reveal-half--bottom { clip-path:polygon(0 54%,17% 47%,29% 56%,41% 46%,53% 57%,65% 46%,77% 56%,88% 47%,100% 53%,100% 100%,0 100%); }
.reveal-v3.is-open .reveal-egg,.reveal-v3.is-open .reveal-cracks { animation:none; opacity:0; }
.reveal-v3.is-open .reveal-half--top { animation:half-top .8s cubic-bezier(.2,.7,.4,1) both; }
.reveal-v3.is-open .reveal-half--bottom { animation:half-bottom .8s cubic-bezier(.2,.7,.4,1) both; }
.reveal-v3 .reveal-tap-label { display:inline-flex; align-items:center; gap:8px; bottom:-14px; border-color:var(--rc); animation:tap-hint 1.4s ease-in-out infinite; }
.tap-pips { display:inline-flex; gap:4px; }
.tap-pips i { width:8px; height:8px; border:2px solid #fff; border-radius:50%; }
.reveal-v3.crack-1 .tap-pips i:nth-child(1),.reveal-v3.crack-2 .tap-pips i:nth-child(-n+2),.reveal-v3.crack-3 .tap-pips i { background:var(--rc); box-shadow:0 0 6px var(--rc); }
.reveal-v3.is-charging .reveal-tap-label { opacity:0; transition:opacity .2s; }
.reveal-v3 .reveal-flash { inset:-30%; z-index:5; }
.reveal-v3.is-open .reveal-flash { animation:cartoon-flash .9s ease-out both; }
.reveal-shock { position:absolute; inset:10%; z-index:4; border:6px solid #fff; border-radius:50%; opacity:0; pointer-events:none; box-shadow:0 0 18px var(--rc),inset 0 0 18px var(--rc); }
.reveal-v3.is-open .reveal-shock { animation:shockwave .7s ease-out .05s both; }
.reveal-v3 .reveal-burst { position:absolute; inset:-12%; z-index:3; width:124%; height:124%; object-fit:contain; opacity:0; animation:none; pointer-events:none; }
.reveal-v3.fx-special .reveal-burst { filter:sepia(.6) saturate(2.4) hue-rotate(-12deg) brightness(1.1); }
.reveal-v3.fx-rare .reveal-burst { filter:hue-rotate(45deg) saturate(1.4); }
.reveal-v3.is-open .reveal-burst { animation:burst-pop .9s ease-out .02s both; }
.reveal-v3.is-open .reveal-rarity-frame { animation:cartoon-frame .7s ease-out .5s both; }
.reveal-v3.is-open .reveal-dragon { animation:dragon-silhouette 1.15s cubic-bezier(.2,.8,.3,1.1) .12s both; }
.reveal-v3.is-open:not(.is-settled) .reveal-rewards { display:none; }
.reveal-v3.is-settled .reveal-rewards { display:grid; }
.reveal-v3.is-open:not(.is-settled) { padding-top:50px; }
.reveal-v3.is-open:not(.is-settled) .reveal-stage { animation:none; }
.reveal-v3.is-open .reveal-identity,.reveal-v3.is-open .reveal-stats > div,.reveal-v3.is-open .reveal-ability,.reveal-v3.is-open .reveal-rewards > .btn { animation:none; }
.reveal-v3.is-settled .reveal-identity { animation:cartoon-reward .45s ease-out .15s both; }
.reveal-v3.is-settled .reveal-stats > div:first-child { animation:cartoon-reward .45s ease-out .3s both; }
.reveal-v3.is-settled .reveal-stats > div:last-child { animation:cartoon-reward .45s ease-out .42s both; }
.reveal-v3.is-settled .reveal-ability { animation:cartoon-reward .45s ease-out .56s both; }
.reveal-v3.is-settled .reveal-rewards > .btn { animation:cartoon-reward .45s ease-out .7s both; }
.reveal-v3 .reveal-identity h2 { text-shadow:0 3px 0 #0c4b92,0 0 18px var(--rglow); }
.reveal-v3 .reveal-identity .rarity-pill { border:2px solid var(--rc); background:linear-gradient(var(--rc2),#0b3c80); box-shadow:0 0 12px var(--rglow); }
.reveal-v3 .reveal-stats > div { border-color:var(--rc); }
.reveal-new { position:absolute; right:2%; top:6%; z-index:6; padding:5px 10px; border:2px solid #fff; border-radius:12px; color:#3b2a13; background:linear-gradient(#fff3b0,#ffc54f); box-shadow:0 3px 0 #a3661f,0 0 14px #ffd96c; font:13px DraklyBlack,'Trebuchet MS',sans-serif; transform:rotate(12deg) scale(0); opacity:0; pointer-events:none; }
.reveal-v3.is-open .reveal-new { animation:new-stamp .5s cubic-bezier(.3,1.6,.5,1) .95s both; }
.reveal-v3.is-settled .reveal-new { right:-8%; top:0; font-size:11px; }
.reveal-particles { position:absolute; left:50%; top:50%; z-index:6; width:0; height:0; pointer-events:none; }
.reveal-particles i { position:absolute; left:0; top:0; display:block; }
.fx-spark { width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 6px 2px var(--c); }
.fx-shard { width:14px; height:18px; background:linear-gradient(140deg,#fff,var(--c) 45%,#1a5fae); clip-path:polygon(50% 0,100% 40%,70% 100%,10% 75%,0 25%); }
.fx-star { width:16px; height:16px; background:var(--c); clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); filter:drop-shadow(0 0 4px #fff); }
.egg-nest .reveal-particles { z-index:3; }
@keyframes halo-breathe { 0%,100% { transform:scale(.96); opacity:.85; } 50% { transform:scale(1.04); opacity:1; } }
@keyframes egg-hit { 0% { transform:scale(1); } 20% { transform:scale(1.1,.9) rotate(-7deg); } 45% { transform:scale(.95,1.06) rotate(6deg); } 70% { transform:rotate(-3deg); } 100% { transform:none; } }
@keyframes stage-shake { 0%,100% { translate:0 0; } 25% { translate:-4px 2px; } 50% { translate:4px -2px; } 75% { translate:-2px 1px; } }
@keyframes egg-charge { 0% { transform:translate(-2px,1px) rotate(-2deg); } 50% { transform:translate(2px,-1px) rotate(2deg); } 100% { transform:translate(-2px,0) rotate(-1deg); } }
@keyframes half-top { 0% { opacity:1; transform:none; } 100% { opacity:0; transform:translate(-34%,-70%) rotate(-38deg) scale(.9); } }
@keyframes half-bottom { 0% { opacity:1; transform:none; } 100% { opacity:0; transform:translate(22%,55%) rotate(22deg) scale(.9); } }
@keyframes shockwave { 0% { opacity:.95; transform:scale(.3); border-width:10px; } 100% { opacity:0; transform:scale(1.7); border-width:1px; } }
@keyframes burst-pop { 0% { opacity:0; transform:scale(.3) rotate(-20deg); } 25% { opacity:1; } 100% { opacity:0; transform:scale(1.35) rotate(25deg); } }
@keyframes dragon-silhouette { 0% { opacity:0; transform:translateY(30px) scale(.35); filter:brightness(0) drop-shadow(0 0 0 #fff); } 30% { opacity:1; transform:translateY(-8px) scale(1.1); filter:brightness(0) drop-shadow(0 0 14px #fff); } 55% { transform:scale(.98); filter:brightness(2.4) drop-shadow(0 0 22px #fff); } 100% { opacity:1; transform:none; filter:brightness(1) drop-shadow(0 10px 18px #021a42aa); } }
@keyframes new-stamp { 0% { opacity:0; transform:rotate(12deg) scale(2.4); } 100% { opacity:1; transform:rotate(12deg) scale(1); } }
@keyframes tap-hint { 0%,100% { transform:translateX(-50%) scale(1); } 50% { transform:translateX(-50%) scale(1.06); } }
@media(max-width:380px) {
 .incubator-bay .egg-nest { width:116px; height:116px; }
 .bay-copy strong { font-size:18px; }.bay-timer b { font-size:21px; }
 .egg-offer-stage { width:62px; height:62px; }.hatchery-v3 .egg-offer .egg-offer-art { width:54px; height:54px; }
 .egg-offer-shine { -webkit-mask-size:54px 54px; mask-size:54px 54px; }
 .hatchery-v3 .egg-offer strong { font-size:12.5px; }.egg-offer-price { padding:3px 7px; font-size:13px; }
 .tutorial-hatchery .first-egg-controls .egg-nest { width:100px; height:100px; }
 .reveal-v3 .reveal-stage,.reveal-v3.is-open:not(.is-settled) .reveal-stage { width:min(80vw,280px); height:min(80vw,280px); }
 .reveal-v3.is-settled .reveal-stage { width:150px; height:150px; }
}
@media(prefers-reduced-motion:reduce) {
 .nest-rays,.nest-egg,.nest-motes,.reveal-bg-rays,.reveal-motes,.egg-offer-glow,.egg-offer-shine,.hatchery-v3 .egg-offer .egg-offer-art,.bay-copy .bay-open,.reveal-v3 .reveal-halo,.reveal-v3 .reveal-egg,.reveal-v3 .reveal-tap-label { animation:none !important; }
 .reveal-v3.is-open .reveal-half,.reveal-v3.is-open .reveal-burst,.reveal-v3.is-open .reveal-shock,.reveal-v3.is-open .reveal-flash { display:none; }
 .reveal-v3.is-open .reveal-dragon,.reveal-v3.is-open .reveal-new,.reveal-v3.is-open .reveal-rarity-frame,.reveal-v3.is-settled .reveal-identity,.reveal-v3.is-settled .reveal-stats > div,.reveal-v3.is-settled .reveal-ability,.reveal-v3.is-settled .reveal-rewards > .btn { animation:none; opacity:1; transform:none; filter:none; }
 .reveal-v3.is-open .reveal-new { transform:rotate(12deg); }
}
/* Tutorial steps: the nest on top, the words under it, centred. */
.tutorial-hatchery .first-egg-offer,.tutorial-hatchery .first-egg-ready { grid-template-columns:1fr; justify-items:center; gap:4px; padding:6px 14px 14px; text-align:center; }
.tutorial-hatchery .first-egg-controls .egg-nest { width:150px; height:150px; }
.tutorial-hatchery .first-egg-copy { justify-items:center; }
.tutorial-hatchery .first-egg-price { margin-top:6px; }
@media(max-width:380px) { .tutorial-hatchery .first-egg-controls .egg-nest { width:126px; height:126px; } }
@media(max-height:700px) { .tutorial-hatchery .first-egg-controls .egg-nest { width:112px; height:112px; } }
/* ui-kit's ".egg-offer span" (gold text, flex) must not reach the v3 card parts. */
.hatchery-v3 .egg-offer .egg-offer-stage { display:grid; }
.hatchery-v3 .egg-offer .egg-offer-glow,.hatchery-v3 .egg-offer .egg-offer-shine { display:block; }
.hatchery-v3 .egg-offer .egg-offer-price { color:#3b2a13; font-size:14px; }
.hatchery-v3 .egg-offer .token-price { white-space:nowrap; }
@media(max-width:380px) { .hatchery-v3 .egg-offer .token-price { font-size:9px; letter-spacing:-.02em; } }
.tutorial-hatchery .first-egg-controls .nest-egg { width:72%; height:72%; }

/* Painted nest (cartoon-nest) and shell halves (cartoon-shell-*): the nest sits behind the egg and
   its front rim is drawn again over the egg's base; the halves are separate art, no clipping. */
.nest-art { position:absolute; left:2%; bottom:-6%; z-index:-1; width:96%; height:96%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 6px 6px #02225077); }
.nest-art.nest-front { z-index:2; clip-path:inset(70% 0 0 0); filter:none; }
.nest-egg { z-index:1; }
.nest-motes { z-index:3; }
.nest-base { bottom:4%; height:18%; opacity:.6; }
.nest-empty .nest-art { filter:drop-shadow(0 6px 6px #02225077) brightness(.85); }
.reveal-v3 .reveal-nest { left:12%; bottom:-3%; z-index:0; width:76%; height:76%; transition:opacity .3s; }
.reveal-v3 .reveal-egg-wrap { inset:12% 15% 18%; }
.reveal-v3.is-open .reveal-nest { animation:nest-out .9s ease-in .5s both; }
.reveal-v3.is-settled .reveal-nest { opacity:0; animation:none; }
.reveal-half--top,.reveal-half--bottom { clip-path:none; }
.reveal-v3.is-open .reveal-half--bottom { animation:half-cup 1s ease-in both; }
@keyframes half-cup { 0% { opacity:1; transform:none; } 18% { transform:translateY(3%) scale(1.04,.96); } 55% { opacity:1; transform:translateY(2%); } 100% { opacity:0; transform:translateY(16%) scale(.94); } }
@keyframes nest-out { to { opacity:0; transform:translateY(8%) scale(.96); } }
@media(prefers-reduced-motion:reduce) { .reveal-v3.is-open .reveal-nest { display:none; } }
.reveal-v3.is-charging .reveal-egg { filter:brightness(1.25) drop-shadow(0 0 16px var(--rc)) drop-shadow(0 0 30px var(--rc)); }
/* docs/23: the field guide's "what opens on the way" list. */
.unlock-list ul { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; }
.unlock-list li { display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:8px; padding:7px 10px; border-radius:12px; background:#0b3f7a66; color:#cfe6ff; }
.unlock-list li .icon { width:18px; height:18px; opacity:.7; }
.unlock-list li.is-open { color:#fff; background:#1f7cc466; }
.unlock-list li.is-open .icon { opacity:1; color:#8ff0b0; }
.unlock-list li small { font-size:12px; opacity:.85; text-align:right; }
/* Tower home: compact game controls around the existing tower art. */
body.game-mode .home-overlay { gap:4px; }
body.game-mode .today-card { max-width:100%; padding:5px 7px 7px; }
body.game-mode .today-card__head { min-height:22px; margin-bottom:2px; }
body.game-mode .today-card__main { min-height:38px; padding-inline:8px; font-size:11px; }
body.game-mode .today-card__list .path-card { width:100%; max-width:100%; margin:5px 0 0; }
body.game-mode .today-card__path { display:flex; align-items:center; gap:5px; width:100%; min-height:30px; margin-top:4px; padding:3px 7px; border:1px solid #e5bb55; border-radius:9px; color:#ffe7a6; background:#4a330ecc; text-align:left; font:10px/1.1 DraklyBold,'Trebuchet MS',sans-serif; }
body.game-mode .today-card__path span { flex:none; }
body.game-mode .today-card__path strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:normal; text-align:right; }
body.game-mode .today-card__path .icon { flex:none; width:13px; height:13px; }
body.game-mode .today-card__path:focus-visible { outline:3px solid white; outline-offset:2px; }
body.game-mode .home-overlay .treasury-chip { max-width:min(56vw,176px); min-width:0; min-height:42px; padding:4px 7px; }
body.game-mode .home-overlay .treasury-chip .ui-icon { flex:none; width:24px; height:24px; }
body.game-mode .home-overlay .treasury-chip span { min-width:0; }
body.game-mode .home-overlay .treasury-chip b { display:block; overflow:hidden; font:11px/1.1 DraklyBold,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
body.game-mode .tower-shortcuts { top:calc(var(--overlay-bottom,0px) + 8px); right:5px; left:5px; display:grid; grid-template-columns:52px 52px; justify-content:space-between; gap:5px; width:auto; pointer-events:none; }
body.game-mode .tower-shortcuts button { width:52px; min-height:47px; padding:2px; font-size:9px; pointer-events:auto; }
body.game-mode .tower-shortcuts button img { width:28px; height:28px; object-fit:contain; }
body.game-mode .tower-shortcuts .shortcut-tasks { grid-column:1; grid-row:1; }
body.game-mode .tower-shortcuts .shortcut-sku { grid-column:1; grid-row:2; }
body.game-mode .tower-shortcuts .shortcut-eggs { grid-column:1; grid-row:3; }
body.game-mode .tower-shortcuts .shortcut-league { grid-column:2; grid-row:1; }
body.game-mode .tower-shortcuts .shortcut-invite { grid-column:2; grid-row:2; }
/* The floor rail starts under the right column of shortcuts (two rows of 52px + gap), measured from
   the same top as the shortcuts, so a short Mini App screen never puts it over "League" / "Invite". */
body.game-mode .tower-rail { top:calc(max(38%,calc(var(--overlay-bottom,0px) + 8px)) + 118px); }
body.game-mode .tower-upgrade-sigil { position:absolute; z-index:12; top:52%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; gap:0; width:58px; min-height:56px; padding:3px; border:2px solid #aaf2ff; border-radius:14px; color:#fff; background:linear-gradient(#79d4ea,#1687c2 58%,#12549b); box-shadow:inset 0 2px #fff9,0 4px 0 #104780,0 8px 16px #052b6777; font:9px/1 DraklyBold,'Trebuchet MS',sans-serif; text-shadow:0 1px #07517d; cursor:pointer; }
body.game-mode .tower-upgrade-sigil .ui-icon { width:29px; height:29px; }
body.game-mode .tower-upgrade-sigil small { font:8px/1 DraklyBold,'Trebuchet MS',sans-serif; }
body.game-mode .tower-upgrade-sigil.is-max { border-color:#9bcae0; background:linear-gradient(#5e9dbf,#176395 58%,#174776); }
body.game-mode .tower-upgrade-sigil:focus-visible { outline:3px solid white; outline-offset:3px; }
body.game-mode .tower-upgrade-sigil:active { transform:translate(-50%,-46%); }
.upgrade-preview-sheet { max-width:430px; }
.upgrade-levels { display:flex; align-items:center; justify-content:center; gap:12px; margin:10px 0; }
.upgrade-levels span { display:grid; gap:2px; min-width:92px; padding:8px; border:2px solid #91e5ff; border-radius:12px; background:#145c99; text-align:center; font:11px DraklyBold,'Trebuchet MS',sans-serif; }
.upgrade-levels b { font-size:17px; }
.upgrade-levels .icon { width:21px; height:21px; }
.upgrade-effect { display:flex; align-items:center; gap:10px; margin:9px 0; padding:10px; border:2px solid #9ae7f8; border-radius:12px; background:#124c86; }
.upgrade-effect .ui-icon { flex:none; width:28px; height:28px; }
.upgrade-pay-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.upgrade-pay { min-width:0; min-height:57px; padding:6px; }
.upgrade-pay .ui-icon { flex:none; width:22px; height:22px; }
.upgrade-pay span { display:grid; gap:2px; text-align:left; }
.upgrade-pay strong { font-size:16px; }
.upgrade-pay:disabled { opacity:.5; cursor:not-allowed; }
@media(max-width:380px) {
 body.game-mode .tower-shortcuts { left:4px; right:4px; grid-template-columns:48px 48px; }
 body.game-mode .tower-shortcuts button { width:48px; min-height:46px; }
 body.game-mode .tower-upgrade-sigil { width:51px; min-height:51px; }
 body.game-mode .tower-upgrade-sigil .ui-icon { width:25px; height:25px; }
}
body.game-mode #content:has(.today-card) .tower-stack { width:var(--tower-w,min(96%,480px)); margin-inline:calc((100% - var(--tower-w,min(96%,480px))) / 2); }
.upgrade-floor-tools { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.upgrade-floor-tools button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:44px; padding:5px 10px; border:2px solid #80d5f3; border-radius:10px; color:white; background:#145c99; font:11px DraklyBold,'Trebuchet MS',sans-serif; }
.upgrade-floor-tools button .ui-icon { width:20px; height:20px; }
.upgrade-floor-tools button:disabled { opacity:.5; }
.upgrade-floor-tools button:focus-visible { outline:3px solid white; outline-offset:2px; }
body.game-mode .tower-shortcuts { top:max(38%,calc(var(--overlay-bottom,0px) + 8px)); }
body.game-mode .today-card__bar { display:flex; align-items:center; gap:4px; min-width:0; }
body.game-mode .today-card__bar > .overline { display:inline-flex; flex:none; align-items:center; gap:4px; color:#d5f7ff; font-size:10px; }
body.game-mode .today-card__bar > .overline .icon { width:14px; height:14px; }
body.game-mode .today-card__bar .today-card__dots { flex:none; gap:2px; }
body.game-mode .today-card__bar .today-card__dots i { width:6px; height:6px; }
body.game-mode .today-card__bar .today-card__main { flex:1; width:auto; min-width:0; max-width:none; min-height:44px; margin:0; padding:0 5px; gap:4px; }
body.game-mode .today-card__bar .today-card__main .today-card__icon { width:18px; height:18px; }
body.game-mode .today-card__bar .today-card__main > span:last-child { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
body.game-mode .today-card__bar .today-card__more { flex:none; min-height:44px; margin:0; padding:0 2px; font-size:10px; }
body.game-mode .today-card__bar .today-card__more::after { inset:-2px; }

/* Utility menu keeps navigation short; preferences live on their own screen. */
.utility-menu { grid-template-columns:minmax(0,1fr); gap:5px; width:min(300px,calc(100vw - 16px)); }
.utility-menu .menu-heading,.utility-menu > #menu-note { grid-column:1; }
.utility-menu > button { grid-column:1; min-height:44px; padding:7px 10px; font:12px/1.2 DraklyBold,'Trebuchet MS',sans-serif; }
.utility-menu > #menu-settings-entry { margin-top:4px; border-color:#a5eaff; background:#0c4b8e; }
.settings-screen { gap:12px; }
.settings-group { display:grid; gap:5px; padding:10px; border:2px solid #83d8f5; border-radius:17px; background:linear-gradient(150deg,#216eb5,#0c417f); box-shadow:inset 0 2px #fff4,0 5px 12px #06356566; }
.settings-group h2 { margin:1px 4px 4px; color:#d5f6ff; font:12px/1.2 DraklyBold,'Trebuchet MS',sans-serif; }
.settings-row { display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:7px 10px; border:1px solid #70c6ee; border-radius:10px; color:#fff; background:#145a9e; text-align:left; font:13px/1.15 DraklyBold,'Trebuchet MS',sans-serif; cursor:pointer; }
.settings-row > .icon,.settings-row > .ui-icon { flex:0 0 22px; width:22px; height:22px; color:#d9f8ff; }
.settings-row > span:nth-child(2) { flex:1; min-width:0; }
.settings-row strong { color:#d5f6ff; font:11px/1.1 DraklyBold,'Trebuchet MS',sans-serif; }
.settings-row .settings-chevron { flex:0 0 15px; width:15px; height:15px; }
.settings-row:focus-visible,.utility-menu > #menu-settings-entry:focus-visible { outline:3px solid #fff; outline-offset:2px; }

/* Keep the actual tower and dragons large on short phones. */
body.game-mode #content:has(.today-card) .tower-stack { width:var(--tower-w,min(112%,540px)); margin-inline:calc((100% - var(--tower-w,min(112%,540px))) / 2); }
body.game-mode .tower-stack .tower-floor .tower-slot { top:4%; height:80%; }
body.game-mode .tower-stack .tower-floor .tower-slot.left { left:15%; }
body.game-mode .tower-stack .tower-floor .tower-slot.right { right:15%; }
body.game-mode .tower-spot-label { bottom:2%; max-width:38%; min-height:22px; padding:2px 4px; font-size:10px; }
body.game-mode .tower-upgrade-sigil { width:44px; min-height:44px; padding:2px; border-radius:11px; font-size:8px; }
body.game-mode .tower-upgrade-sigil .ui-icon { width:20px; height:20px; }
body.game-mode .tower-upgrade-sigil small { display:none; }
body.game-mode .tower-shortcuts { grid-template-columns:44px 44px; }
body.game-mode .tower-shortcuts button { width:44px; min-height:44px; }
body.game-mode .tower-shortcuts button img { width:24px; height:24px; }
/* The tower starts with its roof below the HUD. Small actions use their art and outlined labels. */
body.game-mode #content:has(.today-card) .tower-stack { width:var(--tower-w,min(104%,500px)); margin-inline:calc((100% - var(--tower-w,min(104%,500px))) / 2); }
body.game-mode .home-overlay .treasury-chip { max-width:min(48vw,160px); min-height:44px; gap:4px; padding:0; border:0; background:none; box-shadow:none; }
body.game-mode .home-overlay .treasury-chip .ui-icon { width:34px; height:34px; color:#e8fbff; }
body.game-mode .home-overlay .treasury-chip small { display:block; font:9px/1 DraklyBold,'Trebuchet MS',sans-serif; letter-spacing:0; }
body.game-mode .home-overlay .treasury-chip b { font-size:11px; }
body.game-mode .tower-shortcuts { grid-template-columns:52px 52px; }
body.game-mode .tower-shortcuts button { width:52px; min-height:52px; padding:0; gap:0; border:0; color:#fff; background:none; box-shadow:none; font-size:10px; }
body.game-mode .tower-shortcuts button img,body.game-mode .tower-shortcuts button .ui-icon,body.game-mode .tower-shortcuts button .icon { width:36px; height:36px; object-fit:contain; }
body.game-mode .tower-rail button,body.game-mode .tower-rail button.active { width:44px; height:44px; border:2px solid #fff; border-radius:50%; color:#fff; background:#0c5ca566; box-shadow:0 0 0 1px #4ac6ff,0 2px 5px #083d78; font-size:18px; }
body.game-mode .tower-rail button:not(.active) { opacity:.9; }
body.game-mode .tower-rail button.active { font-size:21px; background:#1287d1b3; box-shadow:0 0 0 1px #4ac6ff,0 0 12px #b9f1ff,0 2px 5px #083d78; }
body.game-mode .tower-upgrade-sigil,body.game-mode .tower-upgrade-sigil.is-max { width:58px; min-height:60px; padding:0; gap:0; border:0; color:#fff; background:none; box-shadow:none; font-size:11px; }
body.game-mode .tower-upgrade-sigil .ui-icon { width:42px; height:42px; color:#e8fbff; }
/* A white edge around the art, with a thin blue rim, keeps controls readable over stone and sky. */
body.game-mode .home-overlay .treasury-chip .ui-icon,
body.game-mode .tower-shortcuts button :is(img,.ui-icon,.icon),
body.game-mode .tower-upgrade-sigil .ui-icon { filter:drop-shadow(1px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 0 2px #46bcff) drop-shadow(0 2px 2px #083d78); }
body.game-mode .tower-upgrade-sigil:not(.is-max) .ui-icon { filter:drop-shadow(1px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 0 2px #46bcff) drop-shadow(0 0 6px #ffc43b); }
body.game-mode .tower-upgrade-sigil:not(.is-max) > span { font-size:11px; text-shadow:0 1px 2px #053775,0 0 5px #fff; }
body.game-mode .tower-spot-label { border:0; color:#fff; background:none; box-shadow:none; }
body.game-mode .home-overlay .treasury-chip :is(small,b),body.game-mode .tower-shortcuts button > span,body.game-mode .tower-upgrade-sigil > span,body.game-mode .tower-rail button,body.game-mode .tower-spot-label { -webkit-text-stroke:.7px #07529a; paint-order:stroke fill; text-shadow:1px 1px #07529a,-1px 1px #07529a,1px -1px #07529a,-1px -1px #07529a,0 2px 3px #022b66; }
body.game-mode .tower-shortcuts button:focus-visible,body.game-mode .tower-rail button:focus-visible,body.game-mode .tower-upgrade-sigil:focus-visible,body.game-mode .home-overlay .treasury-chip:focus-visible { outline:3px solid #fff; outline-offset:2px; }
/* The season prize fund between the shortcut columns, over the roof: art, label, sum and the gate bar. */
body.game-mode .tower-pool { position:absolute; z-index:8; top:calc(var(--overlay-bottom,0px) + 8px); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:6px; width:min(212px,calc(100% - 132px)); min-height:50px; padding:4px 10px 5px 5px; border:2px solid #ffe08a; border-radius:14px; color:#fff; background:linear-gradient(#f3b73a,#c9771a 60%,#9a4f12); box-shadow:inset 0 2px #fff4c68f,0 3px 0 #6e3a0c,0 7px 14px #3a1d0688; text-align:left; cursor:pointer; }
body.game-mode .tower-pool img { flex:none; width:40px; height:40px; object-fit:contain; margin-block:-6px; filter:drop-shadow(0 2px 2px #5a2d0899); }
body.game-mode .tower-pool > span { display:grid; gap:2px; flex:1; min-width:0; }
body.game-mode .tower-pool small { overflow:hidden; color:#fff3c9; font:9px/1 DraklyBold,'Trebuchet MS',sans-serif; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; text-overflow:ellipsis; }
body.game-mode .tower-pool b { overflow:hidden; font:15px/1.05 DraklyBold,'Trebuchet MS',sans-serif; font-variant-numeric:tabular-nums; white-space:nowrap; text-overflow:ellipsis; }
body.game-mode .tower-pool :is(small,b) { text-shadow:1px 1px #7a3e0b,-1px 1px #7a3e0b,1px -1px #7a3e0b,-1px -1px #7a3e0b,0 2px 2px #4a2205; }
body.game-mode .tower-pool__bar { display:block; height:6px; margin-top:1px; overflow:hidden; border-radius:4px; background:#5a2c0bb3; box-shadow:inset 0 1px 2px #2d1404; }
body.game-mode .tower-pool__bar > i { display:block; height:100%; border-radius:4px; background:linear-gradient(#fff6c2,#ffd24a); box-shadow:0 0 6px #ffe7809e; }
body.game-mode .tower-pool:active { transform:translate(-50%,2px); }
body.game-mode .tower-pool:focus-visible { outline:3px solid #fff; outline-offset:2px; }
@media(max-width:380px) { body.game-mode .tower-pool { width:calc(100% - 118px); } body.game-mode .tower-pool b { font-size:13px; } }
/* The safe inset belongs to the whole battle window, including the floor-card chooser and reward views. */
#battle-content > :is(.battle-view,.reveal-screen,.result-screen) { min-height:calc(100dvh - var(--safe-top)); }
.tk-spend__list { display:grid; gap:8px; margin:12px 0 0; }
.tk-spend__list div { padding:9px 11px; border:2px solid #99e6fb; border-radius:13px; background:#0c4789; }
.tk-spend__list dt { margin:0 0 2px; color:#fff; font:15px/1.2 DraklyBlack,'Trebuchet MS',sans-serif; }
.tk-spend__list dd { margin:0; color:#c9f7ff; font-size:13px; line-height:1.4; }
/* Fire egg reveal: fire colours until the second crack, then the best pull's rarity glows through. */
.reveal-v3.reveal-fire:not(.is-tease) { --rc:#ffb257; --rc2:#c2410c; --rglow:#ff8a2aaa; }
.reveal-v3.reveal-fire.is-legend.is-tease { --rc:#ff9fc4; --rc2:#cf447e; --rglow:#ff9fc4bb; }
.reveal-v3.reveal-fire .reveal-halo,.reveal-v3.reveal-fire .reveal-kicker { transition:border-color .4s,box-shadow .4s,background .4s; }
.reveal-v3.reveal-fire.is-tease:not(.is-open):not(.is-charging) .reveal-egg { filter:drop-shadow(0 12px 13px #032b67aa) drop-shadow(0 0 14px var(--rc)) drop-shadow(0 0 28px var(--rglow)); }
.reveal-v3.reveal-fire.is-legend.is-charging .reveal-halo { animation-duration:.16s; }
.reveal-v3.reveal-fire.is-legend.is-open .reveal-burst { filter:hue-rotate(-40deg) saturate(1.6) brightness(1.15); }
.reveal-new.is-copy,.reveal-new.is-dust { color:#0b3c80; background:linear-gradient(#e4f6ff,#8fd3ff); }

/* Sheets: the ui-kit panel is the old teal; every bottom sheet wears the blue skin of the menu and the tabs. */
.sheet__panel { border:3px solid #99e8ff; border-bottom:0; color:#f8fbff; background:linear-gradient(170deg,#2a82c6,#11519a 46%,#0a3675); box-shadow:inset 0 3px #d4f8ff66,0 -14px 40px #001e53aa; }
.sheet__panel::before { background:#d4f8ff99; }
.sheet__title { color:#fff; font-family:DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 3px 0 #125390,0 5px 8px #0b3367aa; }
.sheet__close { border:2px solid #b1f0ff; border-radius:13px; color:#fff; background:linear-gradient(#68c6ec,#0e68b4); box-shadow:inset 0 2px #dbfaff88,0 3px 0 #0a438b; }
.sheet__backdrop { background:#021b4acc; }
.tma-shop { background:#021b4acc; }
.tma-shop-sheet { border:3px solid #99e8ff; border-bottom:0; color:#f8fbff; background:linear-gradient(170deg,#2a82c6,#11519a 46%,#0a3675); box-shadow:inset 0 3px #d4f8ff66,0 -14px 40px #001e53aa; }
.tma-shop-sheet h2 { color:#fff; font-family:DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 3px 0 #125390,0 5px 8px #0b3367aa; }
.tma-shop-sheet p { color:#e3f5ff; }
.tma-shop-close { border:2px solid #b1f0ff; border-radius:13px; color:#fff; background:linear-gradient(#68c6ec,#0e68b4); box-shadow:inset 0 2px #dbfaff88,0 3px 0 #0a438b; }

/* Red star button (spec 2026-10-26): the cartoon pill in crimson. */
.btn.primary.is-red-star:not(.secondary):not(.subtle):not(.danger):not(.btn-cta-buy) { border-color:#b3261b; background:linear-gradient(180deg,#ffc6b8 0,#ff8a6b 44%,#f0482f 54%,#c92a1d 100%); box-shadow:inset 0 -3px #9e1d13,inset 0 2px #ffe6df,0 4px 0 #7a120c,0 8px 14px #5a0d0866; text-shadow:0 1px 3px #8a1a10cc,0 2px 6px #4a080499; }