:root { color-scheme: light; --ink:#193f45; --cream:#fff5df; --gold:#e8b86b; --line:rgba(39,74,74,.18); }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; overflow:hidden; overscroll-behavior:none; background:#163f49; font-family:ui-rounded,'Avenir Next',system-ui,sans-serif; color:var(--cream); }
button { font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button:focus-visible,canvas:focus-visible { outline:3px solid #ffd28c; outline-offset:4px; }
button:disabled { opacity:.5; cursor:default; }
.hidden,[hidden] { display:none!important; }
.ending-paper { width:min(100%,620px); }
.ending-paper video { display:block; width:100%; max-height:48dvh; background:#241f31; border-radius:6px; }
#prize-status { margin:14px 0; }
#departure .top-copy { max-width:320px; text-shadow:0 2px 14px #102d3e; }
#departure .bottom-panel { max-width:220px; }
#departure .secondary { background:#173e4dcc; }
#boss-challenge { width:auto; margin:10px auto 0; background:#edbbd1; color:#3b2c40; }
#app { position:fixed; inset:0; height:100dvh; overflow:hidden; }
#world,#world canvas,.vignette { position:absolute; inset:0; width:100%; height:100%; }
#world { touch-action:none; background:radial-gradient(ellipse at 50% 36%,#82a7a0,#245567 60%,#112e39); }
.vignette { pointer-events:none; background:linear-gradient(180deg,rgba(9,39,46,.6),transparent 37%,transparent 48%,rgba(8,37,45,.65)); }
header { position:absolute; top:max(16px,env(safe-area-inset-top)); left:20px; right:20px; display:flex; align-items:center; justify-content:space-between; z-index:4; pointer-events:none; }
header button { pointer-events:auto; }
.wordmark { font-family:Georgia,serif; letter-spacing:.3em; font-size:13px; }
.icon { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #ffffff40; background:#183d4540; border-radius:50%; font-size:25px; }
.screen { position:absolute; inset:0; display:flex; flex-direction:column; padding:calc(78px + env(safe-area-inset-top)) 22px max(22px,env(safe-area-inset-bottom)); pointer-events:auto; overflow:auto; touch-action:pan-y; }
.screen button,.screen a,.screen video,.screen input,.door-list,.ship-list,.paper { pointer-events:auto; }
.eyebrow { text-transform:uppercase; letter-spacing:.17em; font-size:10px; line-height:1.8; font-weight:650; margin:0 0 10px; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:Georgia,'Times New Roman',serif; font-weight:400; }
h1 { font-size:clamp(76px,19vw,150px); line-height:1; letter-spacing:-.075em; margin:10px 0 16px; }
h2 { font-size:clamp(29px,7.8vw,47px); line-height:1.1; letter-spacing:-.035em; margin:0 0 13px; }
p { font-size:13px; line-height:1.65; }
.title-screen { align-items:center; text-align:center; padding-top:max(11vh,60px); padding-bottom:max(30px,env(safe-area-inset-bottom)); }
.title-screen #subtitle { max-width:245px; font-size:15px; }
.title-spacer { flex:1; }
.footnote { font-size:10px; letter-spacing:.04em; margin-top:17px; opacity:.75; }
.primary,.secondary { display:block; width:100%; min-height:50px; padding:14px 20px; border-radius:6px; font-size:13px; font-weight:600; border:1px solid transparent; }
.primary { background:var(--cream); color:var(--ink); }
.primary:hover { background:#ffe4ae; }
.secondary { background:transparent; border-color:currentColor; margin-top:9px; }
.title-screen .primary { max-width:300px; }
.text-button { background:none; border:0; padding:13px 3px; font-size:12px; }
.top-copy { max-width:390px; text-shadow:0 1px 20px #163d4570; }
.top-copy p:not(.eyebrow) { max-width:300px; opacity:.8; }
.bottom-panel { margin-top:auto; width:100%; max-width:440px; align-self:center; }
.dialogue { display:flex; gap:12px; align-items:center; margin:12px 0 16px; }
.dialogue canvas { width:49px; height:49px; border-radius:50%; background:#d3a86730; flex-shrink:0; }
.dialogue strong { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:#edcd94; }
.dialogue p { font-size:12px; margin:3px 0 0; line-height:1.5; }
#guide-talk { width:100%; text-align:left; border:1px solid #d5e5d8; border-radius:18px; padding:13px; background:#e6eddf; color:var(--ink); box-shadow:0 6px 24px #102f3b26; }
#guide-talk .phone-preview { display:grid; place-items:center; position:relative; flex:0 0 43px; height:65px; padding:8px 1px; border:3px solid #254c50; border-radius:11px; background:#bfd0be; }
.phone-preview::before { content:''; position:absolute; top:3px; width:15px; height:3px; border-radius:3px; background:#254c50; }
#guide-talk .phone-preview img { width:35px; height:45px; border-radius:5px; background:transparent; }
.phone-preview-copy { flex:1; min-width:0; }
.phone-preview-label { display:flex; justify-content:space-between; gap:5px; font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:#527269; }
.phone-preview-label > span { letter-spacing:0; text-transform:none; }
#guide-talk strong { display:block; margin-top:3px; color:var(--ink); font-size:14px; letter-spacing:0; text-transform:none; }
#guide-line { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; margin-top:2px; line-height:1.45; }
.phone-preview-open { display:block; margin-top:5px; font-size:10px; font-weight:650; color:#456b60; }
#ask-minrie { padding:10px 12px; min-height:44px; border:1px solid #edcd9480; border-radius:24px; background:#214d56; color:#fff1ce; font-size:11px; }
#room .top-copy #room-objective { padding:7px 10px; border-left:2px solid var(--gold); background:#163c48ce; color:#fff1ce; opacity:1; font-size:12px; }
#guide-panel { padding:0; width:min(calc(100% - 24px),398px); height:min(730px,calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); max-height:none; border:7px solid #1e3d43; border-radius:38px; background:#1e3d43; color:var(--ink); box-shadow:0 24px 80px #071e2877,0 0 0 1px #b5c7b987; overflow:hidden; }
#guide-panel::backdrop { background:#102f3bbd; backdrop-filter:blur(5px); }
.guide-phone { display:flex; flex-direction:column; height:100%; min-height:0; overflow:hidden; border-radius:30px; background:#f5efe3; }
.guide-phone button:focus-visible { outline:3px solid #375d53; outline-offset:-3px; }
.phone-status { display:flex; flex:0 0 29px; justify-content:space-between; align-items:center; padding:0 23px; font-size:8px; font-weight:750; letter-spacing:.14em; background:#e6eddf; }
.phone-speaker { width:68px; height:13px; border-radius:10px; background:#1e3d43; }
.phone-contact { display:flex; flex-shrink:0; align-items:center; gap:11px; padding:9px 14px 15px; border-bottom:1px solid #274a4a18; background:#e6eddf; }
.phone-contact > img { width:49px; height:49px; object-fit:contain; border-radius:50%; background:#cddac6; border:1px solid #78948b30; }
.phone-contact > div { flex:1; min-width:0; }
#guide-panel h2 { margin:0 0 3px; font-family:inherit; font-size:20px; font-weight:700; letter-spacing:-.03em; }
#guide-presence { margin:0; font-size:10px; color:#47685e; }
#guide-presence::before { content:''; display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:#658a63; }
#close-guide { flex-shrink:0; color:var(--ink); border-color:#78948b40; background:#f5efe35c; }
#guide-objective { flex-shrink:0; margin:0; padding:9px 15px; border-bottom:1px solid #274a4a12; background:#f0e8d8; font-size:10px; line-height:1.4; text-align:center; }
.chat-thread { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; padding:17px 14px; scrollbar-width:thin; }
.chat-thread:focus-visible { outline:2px solid #658a63; outline-offset:-3px; }
.chat-date { margin:0 0 17px; text-align:center; color:#6a7a6c; font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
#guide-messages { display:flex; flex-direction:column; gap:9px; }
.chat-bubble { max-width:88%; margin:0; padding:11px 13px; font-size:13px; line-height:1.55; overflow-wrap:anywhere; animation:chat-arrive .18s ease-out; }
.chat-bubble.incoming { align-self:flex-start; background:#fffaf0; border:1px solid #dfdfce; border-radius:16px 16px 16px 4px; }
.chat-bubble.outgoing { align-self:flex-end; background:#315b59; color:#fff8e9; border-radius:16px 16px 4px 16px; }
.chat-typing { display:flex; align-items:center; gap:4px; width:max-content; margin-top:9px; padding:10px 12px; border:1px solid #dfdfce; border-radius:14px 14px 14px 4px; background:#fffaf0; color:#587466; }
.chat-typing > span { margin-right:5px; font-size:10px; }
.chat-typing i { width:4px; height:4px; border-radius:50%; background:#658272; animation:chat-dot 1.1s infinite; }
.chat-typing i:nth-of-type(2) { animation-delay:.14s; }.chat-typing i:nth-of-type(3) { animation-delay:.28s; }
.chat-compose { flex-shrink:0; padding:11px 12px 6px; border-top:1px solid #274a4a18; background:#e6eddf; }
.chat-compose > p { margin:0 0 6px; color:#537166; font-size:10px; }
.chat-replies { display:flex; gap:6px; overflow-x:auto; padding-bottom:7px; scrollbar-width:thin; }
.chat-replies button { flex-shrink:0; min-height:44px; padding:8px 11px; border:1px solid #b8c9b4; border-radius:18px; background:#f7f6e9; color:#315b50; font-size:11px; white-space:nowrap; }
.chat-replies button:hover:not(:disabled) { background:#fffaf0; border-color:#6c937a; }
.chat-actions { display:flex; gap:7px; margin-top:2px; }
#guide-action { flex:1; min-height:46px; padding:10px 12px; border:0; border-radius:13px; background:#315b59; color:#fff8e9; font-size:12px; font-weight:650; }
#guide-map { display:flex; flex:0 0 49px; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:46px; border:1px solid #a7bdaa; border-radius:13px; background:transparent; color:#315b50; font-size:9px; }
.phone-home { flex:0 0 5px; width:88px; margin:8px auto; border-radius:4px; background:#315b5970; }
@keyframes chat-dot { 0%,65%,100% { opacity:.35; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }
@keyframes chat-arrive { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media (max-height:560px) { #guide-panel { border-width:5px; border-radius:25px; } .guide-phone { border-radius:20px; } .phone-status { flex-basis:19px; } .phone-contact { padding:5px 12px; } .phone-contact > img { width:36px; height:36px; } .chat-thread { padding:10px 12px; } .chat-date { margin-bottom:10px; } .chat-compose { padding-top:6px; } .chat-compose > p { display:none; } .phone-home { margin:5px auto; } }
.door-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.door-list button { display:flex; flex-direction:column; align-items:flex-start; min-height:100px; background:linear-gradient(#102f3b66,#102f3b66),var(--port-color,#17414a); color:#fff; border:1px solid #ffffff35; border-radius:5px; font-size:11px; padding:12px; text-align:left; }
.door-number { font-size:10px; opacity:.8; margin-bottom:8px; }
.door-name { font-family:Georgia,serif; font-size:20px; }
.door-region { margin-top:3px; }
.door-complete { margin-top:8px; font-size:10px; }
.door-list button.done { border-color:#f2d5a2; box-shadow:inset 0 0 0 1px #f2d5a2; }
.door-list button.selected { background:#e6bd7b; color:#163f49; }
.ship-list { display:flex; flex-wrap:wrap; gap:6px; max-height:120px; overflow:auto; touch-action:pan-y; }
.ship-list button { background:#f9ebcc0c; border:1px solid #ecdabf45; padding:9px 11px; border-radius:4px; font-size:10px; min-height:40px; }
#explore { width:100%; text-align:left; border-top:1px solid #ffffff20; margin-top:12px; }
#explore span { float:right; }
#home-door { margin-top:10px; background:var(--gold); }
.keepsakes { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.keepsakes button { border:1px solid #eddcba70; background:#163f49bf; border-radius:4px; padding:9px; font-size:11px; min-height:40px; }
.overlay { z-index:6; background:#102f3bd9; align-items:center; justify-content:center; padding:22px; pointer-events:auto; overflow:auto; touch-action:pan-y; }
.paper { background:#fbf0dc; color:var(--ink); padding:29px 24px; width:min(100%,420px); max-height:calc(100dvh - 50px); overflow:auto; border-radius:4px; box-shadow:0 24px 70px #0a202540; text-align:center; touch-action:pan-y; }
.paper h2 { font-size:33px; }
.paper img { max-width:100%; max-height:30dvh; object-fit:contain; margin:8px auto 0; }
.caption { font-size:10px; opacity:.6; margin:7px 0 17px; }
.memory-text { font-family:Georgia,serif; font-size:18px; line-height:1.65; white-space:pre-line; }
.paper .primary { background:var(--ink); color:var(--cream); margin-top:12px; }
.paper canvas { max-height:80px; width:auto; }
.paper video { width:100%; max-height:38vh; margin:12px 0; }
#victory-portrait { max-height:120px; }
.game-screen { z-index:5; background:#eee8d9; color:var(--ink); pointer-events:auto; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.game-head { min-height:65px; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:2px 12px; align-items:center; padding:10px 17px; }
.game-head #quit-game { grid-column:1; grid-row:1 / 3; }
.game-head #pause-game { grid-column:3; grid-row:1 / 3; }
.game-head #game-name { grid-column:2; grid-row:1; font-size:22px; }
.game-head #game-score { grid-column:2; grid-row:2; text-align:left; font-size:10px; }
.game-head p { margin:0; flex:1; font-family:Georgia,serif; font-size:21px; }
.game-head .icon { color:var(--ink); border-color:var(--line); background:none; }
#game-score { font-size:12px; min-width:55px; text-align:right; }
#game-canvas { display:block; width:100%; flex:1; min-height:0; touch-action:none; }
#game-hint { padding:12px 25px 5px; margin:0; min-height:55px; font-size:12px; text-align:center; }
.game-keys { display:flex; gap:8px; padding:5px 20px 16px; }
.game-keys button { flex:1; min-height:44px; background:#234b50; color:#fff5df; border:0; border-radius:4px; touch-action:none; }
.boss-fight .game-screen { background:#f5e4e7; color:#51344b; }
.boss-fight .game-head #game-name { font-size:20px; }
.boss-fight #game-hint { min-height:48px; padding:9px 20px 4px; }
.boss-fight .game-keys button { background:#785474; border-radius:14px; min-height:52px; }
.boss-fight #game-action { flex:1.6; background:#886f82; }
.boss-fight #game-action.ready { background:#aa4e79; box-shadow:0 0 0 2px #ebbc86; }
@media (min-width:700px) { .boss-fight .game-screen { width:min(820px,100%); } }
.chart-game .game-screen { background:#f4e8ce; }
.chart-game .game-keys button { border-radius:10px; min-height:48px; }
.chart-game #game-action { flex:1.7; }
.chart-game #game-action.ready { background:#316956; box-shadow:inset 0 0 0 2px #9fbe99; }
.chart-game #game-left:not(.ready), .chart-game #game-right:not(.ready) { opacity:.45; }
.surf-game .game-screen { background:#e0eee6; }
.surf-game .game-keys button { border-radius:10px; min-height:50px; }
.surf-game #game-action { flex:1.5; }
.surf-game #game-action.ready { background:#397c66; box-shadow:inset 0 0 0 2px #f0ce86; }
@media (min-width:700px) { .chart-game .game-screen { width:min(600px,100%); } }
#flames { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#wish-hint { text-align:center; }
#finale .top-copy { text-align:center; max-width:none; }
#cake-line { margin:auto; }
.final-message { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#112f3eea; padding:40px 28px; text-align:center; overflow:auto; pointer-events:auto; }
#message-lines p { font-family:Georgia,serif; font-size:clamp(21px,5.7vw,30px); line-height:1.5; }
#signature { color:#806037; margin:15px 0 26px; }
.final-message button { max-width:300px; }
#settings-panel { padding:0; border:0; width:min(calc(100% - 44px),420px); background:transparent; color:var(--ink); }
#settings-panel::backdrop { background:#102f3bdd; }
#settings-panel .paper { max-height:calc(100dvh - 80px); overflow:auto; }
#settings-panel #about { margin-top:9px; }
.game-head h2 { margin:0; font-size:25px; }
#hub .top-copy { margin-bottom:20px; }
#hub .bottom-panel { flex-shrink:0; }
#skip,#replay { min-height:44px; }
h1:focus,h2:focus { outline:none; }
#orientation { display:none; position:absolute; inset:0; background:#183f47; z-index:30; align-items:center; justify-content:center; flex-direction:column; }
#orientation span { font-size:50px; margin-bottom:20px; }
#orientation p { font:28px Georgia,serif; }
#debug { position:absolute; z-index:40; bottom:5px; left:5px; white-space:pre; font:10px monospace; background:#000b; padding:7px; pointer-events:none; }
#boot-status { position:absolute; bottom:12px; left:0; right:0; text-align:center; font-size:11px; z-index:10; }
@keyframes arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media (min-width:700px) { .screen { padding-left:max(30px,calc((100vw - 600px)/2)); padding-right:max(30px,calc((100vw - 600px)/2)); } .top-copy { align-self:center; width:440px; max-width:100%; text-align:center; } .top-copy p:not(.eyebrow) { margin-left:auto; margin-right:auto; } .game-screen { width:480px; left:50%; transform:translateX(-50%); padding:0; } }
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse) { #orientation { display:flex; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:0s!important; transition-duration:0s!important; } }
@media (max-height:720px) { .screen { padding-top:70px; } h2 { font-size:27px; } .dialogue { margin:6px 0 10px; } .title-screen { padding-top:50px; } .door-list button { min-height:42px; } }

/* Keep the central 3D scene available to pointer input. */
.screen:not(.overlay):not(.game-screen) { pointer-events:none; }
.screen .bottom-panel,.screen details,.screen .final-message { pointer-events:auto; }
#world { z-index:0; }
.vignette { z-index:1; }
.screen { z-index:2; }
.screen.overlay { z-index:6; }
.game-screen { z-index:7; }
.dialogue img { width:48px; height:48px; object-fit:contain; border-radius:50%; background:#f0c98a22; }
#hub .bottom-panel { padding:0; }
.door-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.door-list button { min-height:51px; padding:9px 5px; align-items:center; text-align:center; justify-content:center; }
.door-name { font:12px system-ui,sans-serif; }
.door-number,.door-region { display:none; }
.door-complete { font-size:9px; margin-top:4px; }
summary { cursor:pointer; min-height:44px; padding:13px 0; font-size:12px; border-top:1px solid #ffffff26; }
.ship-list { max-height:110px; padding-bottom:8px; }
.ship-list button { min-height:44px; }
.keepsakes { margin:0 0 10px; }
.character-portrait { display:block; width:65px; height:80px; object-fit:contain; margin:5px auto 10px!important; }
#victory-portrait { height:100px; width:100px; }
.game-head h2 { flex:1; font-size:22px; }
#game-score { max-width:145px; font-size:11px; }
#game-intro { position:absolute; top:50%; transform:translateY(-50%); left:24px; right:24px; padding:24px 20px; max-height:calc(100% - 140px); overflow:auto; text-align:center; background:#f6efdf; border:1px solid #b7ab95; border-radius:8px; }
/* The intro is Minrie's chat: her bubbles, then Chris's reply. */
#game-intro { display:flex; flex-direction:column; gap:8px; text-align:left; }
.chat-intro-head { display:flex; align-items:center; gap:10px; margin-bottom:2px; }
.chat-intro-head .character-portrait { width:46px; height:54px; margin:0!important; }
.chat-intro-head strong { display:block; font-size:14px; }
.chat-intro-head .eyebrow { margin:0; font-size:9px; }
#game-goal { font-size:15px; font-weight:650; margin:0; }
#game-instructions { font-weight:500; }
#game-tip { font-size:12.5px; color:#496462; }
#game-intro .chat-bubble { max-width:100%; }
#game-intro .primary { background:#244d52; color:#fff4df; align-self:flex-end; width:auto; min-width:150px; padding:12px 22px; margin-top:4px; border-radius:16px 16px 4px 16px; }
#game-canvas { background:#d4dfd8; }
body[data-state="minigame"] #world { visibility:hidden; }
#game-hint { flex-shrink:0; }
.game-keys { flex-shrink:0; }
.collectible-screen { justify-content:flex-end; align-items:center; padding-top:max(22px,env(safe-area-inset-top)); background:linear-gradient(transparent 20%,#0c29345c); }
#collectible-preview { flex:1; width:100%; min-height:0; margin-bottom:18px; }
.collectible-screen .paper { flex-shrink:0; max-height:45dvh; padding:20px; }
.collectible-screen .character-portrait { float:left; width:40px; height:50px; margin:0!important; }
#flames { z-index:0; }
#wish-controls,#cake-heading { position:relative; z-index:1; }
#wish-controls .primary { margin-top:9px; }
.candle-count { text-align:center; font-size:11px; margin:0; }
#final-message { z-index:3; padding:22px; }
#final-message .paper { max-height:calc(100dvh - 60px); }
#final-message p { animation:arrive 1.2s both; }
#final-message button { margin-left:auto; margin-right:auto; }
#signature { color:#806037; }
#room .bottom-panel { padding:14px; border-radius:8px; background:#163c48b8; }
#room-guide > summary { cursor:pointer; color:var(--gold); min-height:28px; font-size:12px; }
#room-guide[open] > summary { margin-bottom:12px; }
#title .eyebrow,#title #subtitle,#title h1 { text-shadow:0 2px 15px #153d4b; }
@media (max-height:720px) {
  .game-screen { padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
  #hub .top-copy { margin-bottom:0; }
  #hub .dialogue { margin-top:0; }
  #hub summary { min-height:36px; padding:9px 0; }
  #hub h2 { font-size:25px; }
  .collectible-screen .paper { max-height:48dvh; }
  #finale h2 { font-size:28px; }
  #cake-line { font-size:12px; }
  #wish-hint { margin-bottom:8px; font-size:12px; }
}

#asset-status { position:absolute; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px; background:#183f47f5; text-align:center; }
#asset-status p { max-width:300px; font:23px/1.5 Georgia,serif; }
#retry-assets { max-width:280px; }
body[data-state="room"] #world { background:var(--port-color,#316d7d); }
#ship-view { padding:8px 13px; border:1px solid #ffffff50; border-radius:20px; background:#183d4566; min-height:38px; font-size:11px; }
.orbit-hint { display:inline-block; margin-left:10px; opacity:.65; font-size:10px; }
body:not(.has-3d) #ship-view,body:not(.has-3d) .orbit-hint { display:none; }
@media (min-width:900px) {
  #hub { padding:100px 40px 28px; }
  #hub .top-copy { align-self:flex-start; width:350px; text-align:left; }
  #hub .top-copy p:not(.eyebrow) { margin-left:0; }
  #hub .bottom-panel { align-self:flex-start; max-width:340px; }
}
.deck-tabs { display:flex; gap:6px; margin-bottom:8px; }
.deck-tabs button { flex:1; min-height:44px; border:1px solid #d2e1dc50; border-radius:5px; background:#1a4552c9; font-size:11px; }
.deck-tabs button[aria-pressed="true"] { background:#e9e4cf; color:#1b414c; }
#door-status { font-size:11px; line-height:1.5; margin:7px 0 10px; min-height:17px; }
.locked { filter:saturate(.25); opacity:.65; }
#ship-doors { max-height:180px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
#ship-doors button { text-align:left; }
#room-exits { margin-top:10px; max-height:90px; }
#room-connections:empty,#room-exits:empty { display:none; }
#room-connections button { background:#e8d4a3; color:#24434b; }
#unlock-reward { font-weight:600; padding:12px; background:#d6e5d6; border-radius:4px; }
#unlock-reward:empty { display:none; }
.on-deck .orbit-hint { visibility:hidden; }
@media (min-width:900px) { .on-deck #hub .top-copy { width:270px; } }

#world-controls { position:absolute; z-index:4; left:max(20px,env(safe-area-inset-left)); right:max(20px,env(safe-area-inset-right)); bottom:max(14px,env(safe-area-inset-bottom)); display:flex; justify-content:space-between; align-items:flex-end; gap:24px; pointer-events:none; }
#move-pad { width:100px; height:100px; border:1px solid #f5e7c480; border-radius:50%; position:relative; display:grid; place-items:center; background:#153b48bb; pointer-events:auto; touch-action:none; user-select:none; -webkit-user-select:none; }
#move-pad:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
#move-pad > span:first-child { color:#e7d3ad90; text-align:center; font:18px/1.4 system-ui; }
#move-thumb { position:absolute; width:36px; height:36px; border-radius:50%; background:#f3ddb0; box-shadow:0 3px 10px #102d4560; transform:translate(var(--stick-x,0px),var(--stick-y,0px)); }
#touch-stick { position:fixed; z-index:4; width:108px; height:108px; margin:-54px; display:grid; place-items:center; border:1px solid #f5e7c480; border-radius:50%; background:#153b4870; pointer-events:none; }
#touch-stick > span { width:32px; height:32px; border-radius:50%; background:#f3ddb0c9; transform:translate(var(--stick-x,0px),var(--stick-y,0px)); }
.movement-help { display:block; margin:7px 0 0; font:9px/1.5 system-ui; color:#fff1d6c9; }
.interaction-controls { text-align:right; width:170px; }
#world-interact { pointer-events:auto; font-size:12px; min-height:48px; }
#world-interact:disabled { background:#234651; color:#c9d9d5; opacity:.9; }
#world-hint { font-size:11px; margin:0 0 7px; }
.boss-access { display:flex; align-items:center; justify-content:flex-start; gap:8px; flex-wrap:wrap; margin-top:4px; } /* follows the left-aligned hub header; centred only where the header itself is centred (700–899px) */
@media (min-width:700px) and (max-width:899px) { #hub .boss-access { justify-content:center; } }
#boss-progress { font-size:11px; }
/* Speech-bubble tail: this is Minrie talking, not a system notice. */
.boss-room #room .top-copy { text-align:center; align-self:center; width:auto; }
.boss-room #room-name { font-size:30px; margin:5px 0; }
.boss-room #room-description { display:none; }
.boss-room #room .top-copy #room-objective { font-size:11px; padding:4px 8px; margin:4px auto; border:0; background:#664963bb; }
#deck-location { position:absolute; left:0; right:0; bottom:112px; margin:0; padding:7px 10px; border-radius:5px; background:#173d48e6; color:#ead8b2; font:11px/1.4 system-ui; text-align:center; }
/* The scroll box ends above the walking controls and deck label, so content can never slide under them. */
#hub,#room { bottom:calc(158px + env(safe-area-inset-bottom)); padding-bottom:8px; }
#hub .bottom-panel,#room .bottom-panel { max-height:40dvh; overflow:auto; }
#voyage-menu > summary { color:var(--gold); }
#open-backpack { position:relative; flex-shrink:0; }
#backpack-count { position:absolute; right:-3px; bottom:-2px; min-width:19px; height:19px; padding:2px 4px; border-radius:50%; background:var(--gold); color:var(--ink); font:700 10px/15px ui-rounded,system-ui; }
#backpack-panel { width:min(calc(100% - 24px),700px); max-height:calc(100dvh - 32px); padding:0; overflow:auto; border:1px solid #c4b490; border-top:8px solid #4c8078; border-radius:14px; background:#f8efdd; color:var(--ink); box-shadow:0 24px 90px #082d3a70; touch-action:pan-y; overscroll-behavior:contain; }
#backpack-panel::backdrop { background:#102f3bcb; }
.backpack-paper { padding:20px; }
#close-backpack { position:sticky; top:12px; float:right; z-index:1; background:#f8efdd; border-color:#244e4930; color:var(--ink); }
#backpack-title { font-size:clamp(27px,6vw,36px); margin-bottom:8px; }
#backpack-progress { font-size:12px; color:#4d6c62; margin-bottom:18px; }
.backpack-tabs { display:flex; gap:6px; margin:10px 0 15px; }
.backpack-tabs button { flex:1; min-height:44px; padding:8px; border:1px solid #69857b55; border-radius:6px; background:transparent; color:var(--ink); font-size:12px; }
.backpack-tabs button[aria-pressed="true"] { background:#365f59; border-color:#365f59; color:#fff5df; }
#map-caption { font-size:12px; line-height:1.5; }
.backpack-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.backpack-grid button,.backpack-grid > div { min-width:0; padding:9px 5px 11px; border:1px solid #78948b66; border-radius:9px; background:#e5ecdf; color:var(--ink); text-align:center; }
.backpack-grid img { display:block; width:100%; height:78px; object-fit:contain; margin:0 auto 8px; mix-blend-mode:multiply; }
.backpack-grid strong { display:block; font-size:11px; line-height:1.3; }
.backpack-grid button:disabled { opacity:1; background:#f0e8d6; border-style:dashed; border-color:#b9b29f; }
.backpack-grid button:disabled img,.backpack-grid .uncollected img { filter:grayscale(1); opacity:.35; }
.backpack-grid button:not(:disabled):hover { background:#d5e5cf; border-color:#52776b; }
#backpack-items-page h3 { font-size:24px; margin:24px 0 12px; }
.souvenir-grid > div { border-style:dashed; background:#eee0bf; border-color:#bd9a6090; }
.souvenir-grid img { height:65px; }
.backpack-footer { border-top:1px solid #244e4925; padding-top:13px; margin:20px 0 0; font-size:10px; text-align:center; color:#57716b; }
#map-deck-description { font-size:11px; margin:0 0 10px; }
#ship-map { display:block; width:100%; max-height:390px; background:#e8eddf; border:1px solid #a5b5a18a; border-radius:8px; }
.map-hull { fill:#faf4e5; stroke:#78948b; stroke-width:1.5; }
.map-room { fill:#cbdccb; stroke:#708e7e; stroke-width:1; }
.map-door { fill:#faf4e5; }
.map-machinery { fill:#759790; opacity:.6; }
.map-stairs { fill:#dab977; stroke:#9d793d; stroke-width:1; }
.map-step { stroke:#947d52; stroke-width:.8; }
.map-place circle { fill:#365f59; stroke:#fff5df; stroke-width:1.5; }
.map-place text { fill:#fff5df; font:700 11px ui-rounded,system-ui; text-anchor:middle; }
.map-place.station circle { fill:#b98247; }
.map-small { fill:#456b64; font:8px ui-rounded,system-ui; text-anchor:middle; letter-spacing:1px; }
.map-helipad { fill:#668975; font:32px ui-rounded,system-ui; text-anchor:middle; }
#map-places { padding:0; margin:12px 0; list-style:none; }
#map-places li { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid #244e491a; font-size:11px; }
#map-places strong { font-weight:600; text-transform:capitalize; }
#map-places span { flex-shrink:0; color:#587369; }
.map-key { display:flex; align-items:center; justify-content:center; gap:7px; font-size:10px; }
.map-dot { width:10px; height:10px; border-radius:50%; background:#a74430; }
.map-stair-key { width:12px; height:10px; background:#dab977; margin-left:8px; }
.map-help { font-size:11px; color:#4c6860; line-height:1.6; margin-bottom:0; }
@media (min-width:600px) { .backpack-paper { padding:25px 28px; } .backpack-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .souvenir-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .map-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; } #map-places { margin:0; } }
#voyage-menu[open] { padding-bottom:5px; }
@media (min-width:700px) { #world-controls { left:max(30px,calc((100vw - 440px)/2)); right:max(30px,calc((100vw - 440px)/2)); } }
@media (max-height:720px) { #hub .dialogue { margin-bottom:6px; } #hub .bottom-panel,#room .bottom-panel { max-height:32dvh; } }

/* Landscape phones: keep the hub header to one line so the guide card stays in view. */
@media (max-height:520px) {
  #hub,#room { padding-top:64px; }
  #hub .top-copy p:not(.eyebrow),#hub .orbit-hint,#hub .boss-access { display:none; }
  #hub h2 { font-size:20px; margin:2px 0; }
  /* Header and guide card side by side, above the walking controls. */
  #hub { flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:0 16px; }
  #hub .top-copy { flex:1 1 200px; margin-bottom:0; align-self:flex-start; text-align:left; width:auto; }
  #hub .bottom-panel { margin-top:0; flex:0 0 300px; max-width:100%; align-self:flex-start; max-height:calc(100dvh - 232px); }
}

/* About popup: a postcard from the voyage. */
#about-panel { padding:0; border:0; width:min(calc(100% - 24px),760px); max-height:calc(100dvh - 32px); background:transparent; color:var(--ink); overflow:visible; }
#about-panel::backdrop { background:#0d2833e0; }
.postcard { position:relative; max-height:calc(100dvh - 32px); overflow:auto; border-radius:14px; background:#f8efdd; box-shadow:0 30px 90px #05171f80, inset 0 0 0 1px #d9c7a4; text-align:left; }
.postcard-close { position:absolute; top:10px; right:10px; z-index:3; width:38px; height:38px; border:0; border-radius:50%; background:#fff5df; color:var(--ink); font-size:22px; line-height:1; box-shadow:0 2px 10px #08202a44; }
.postcard-sea { display:block; position:relative; padding:30px 28px 44px; background:linear-gradient(160deg,#173d48 0%,#215668 55%,#3c7c88 100%); color:#fff5df; }
.postcard-sea .eyebrow { color:var(--gold); margin-bottom:6px; padding-right:60px; }
.postcard-sea h2 { font-size:clamp(40px,9vw,64px); margin:0 0 4px; }
.postcard-sea > p:last-of-type { margin:0; opacity:.85; font-size:14px; }
.postcard-sea .waves { position:absolute; left:0; right:0; bottom:-1px; width:100%; height:24px; fill:#f8efdd; }
.postcard-body { display:grid; gap:24px; padding:22px 28px 28px; }
@media (min-width:640px) { .postcard-body { grid-template-columns:1fr 1fr; gap:30px; } .postcard-crew { border-left:2px dashed #d9c7a4; padding-left:30px; } }
.postcard h3 { margin:0 0 8px; font-size:20px; letter-spacing:-.02em; }
.postcard p { margin:0 0 12px; font-size:13.5px; line-height:1.55; }
.postcard-small { color:#4a6266; font-size:12.5px!important; }
.postcard-role { color:#4c8078; font-size:12px!important; text-transform:uppercase; letter-spacing:.08em; font-weight:650; }
.ports { list-style:none; margin:0 0 14px; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.ports li { display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 7px; border-radius:20px; background:#fff8ea; border:1px solid #e6d7b4; font-size:12px; font-weight:600; }
.ports li::before { content:""; width:11px; height:11px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 2px #fff8ea90; }
.stamp { float:right; margin:-4px 0 6px 14px; padding:8px 8px 5px; border:2px dashed #b89a6a; border-radius:4px; background:#fff8ea; text-align:center; transform:rotate(4deg); box-shadow:0 4px 14px #3a2a1022; }
.stamp img { display:block; width:88px; height:88px; object-fit:cover; object-position:top; border-radius:3px; background:#e6eddf; }
.stamp span { display:block; margin-top:4px; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:#8a6b3f; font-weight:700; }
.chips { list-style:none; margin:0 0 12px; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.chips li { padding:5px 10px; border-radius:6px; background:#163c48; color:#fff1ce; font-size:11.5px; font-weight:600; }
.postcard-cta { display:grid; gap:8px; margin-top:6px; }
.postcard-cta a { display:flex; align-items:center; justify-content:center; text-decoration:none; text-align:center; min-height:46px; }
.postcard-cta .primary { background:var(--ink); color:var(--cream); }
.postcard-cta .secondary { margin-top:0; color:var(--ink); }

/* Phones: the Minrie notification collapses to one compact row. */
@media (max-width:600px) {
  #guide-talk { position:relative; padding:9px 12px 9px 10px; border-radius:14px; gap:10px; }
  #guide-talk .phone-preview { flex:0 0 38px; height:38px; padding:0; border:0; border-radius:50%; background:#cddac6; box-shadow:inset 0 0 0 1px #78948b40; }
  #guide-talk .phone-preview::before { display:none; }
  #guide-talk .phone-preview img { width:30px; height:36px; border-radius:0; margin-top:4px; }
  #guide-talk .phone-preview-label { display:none; }
  #guide-talk strong { margin:0; font-size:13px; line-height:1.3; padding-right:110px; }
  #guide-line { -webkit-line-clamp:1; margin-top:1px; font-size:12px; line-height:1.4; }
  #guide-talk .phone-preview-open { position:absolute; right:12px; top:10px; margin:0; font-size:10px; }
}

/* Phones: no fixed move pad (drag the scene or use the floating stick); the action button takes the row. */
@media (max-width:600px) {
  #world-controls > div:not(.interaction-controls) { display:none; }
  #world-controls .interaction-controls { width:100%; text-align:center; }
  #world-controls .interaction-controls .movement-help { display:none; }
  #world-controls .interaction-controls .primary { max-width:none; }
  #deck-location { bottom:calc(100% + 8px); }
}

/* Bingbong's golden plate: the usual cream card with a gold trim and a soft glow, not a gold wash. */
.golden .collectible-screen { background:radial-gradient(circle at 50% 35%,#f7dc8a40,transparent 55%),linear-gradient(transparent 20%,#0c29345c); }
.golden .collectible-screen .paper { border:2px solid #d9a521; animation:golden-shimmer 2.8s ease-in-out infinite; }
.golden .collectible-screen .eyebrow { color:#a8760a; }
@keyframes golden-shimmer { 0%,100% { box-shadow:0 0 0 4px #f1c24b22,0 24px 70px #0a202540; } 50% { box-shadow:0 0 0 8px #f1c24b30,0 24px 70px #f1c24b40; } }
@media (prefers-reduced-motion: reduce) { .golden .collectible-screen .paper { animation:none; } }

/* Desktop frames the deck 12% right of centre; keep the escort bubble over Minrie and off the phone card. */

.backpack-grid .mystery { display:block; height:78px; line-height:78px; margin:0 auto 8px; font-size:44px; font-weight:700; color:#b9b29f; }

/* Bingbong's card: how to unlock the bonus round. */
#bingbong-panel { padding:0; border:0; width:min(calc(100% - 44px),420px); background:transparent; color:var(--ink); }
#bingbong-panel::backdrop { background:#102f3bdd; }
#bingbong-panel .paper { max-height:calc(100dvh - 80px); overflow:auto; }
.bingbong-paper .character-portrait { width:82px; height:82px; object-fit:cover; object-position:top; border-radius:50%; background:#f3e2a8; margin:0 auto 10px!important; }
#bingbong-progress { margin:4px 0 8px; font-weight:600; font-size:13px; }
.bingbong-missing { list-style:none; margin:0 0 12px; padding:0; text-align:left; font-size:12px; }
.bingbong-missing li { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid #00000012; }
.bingbong-missing span { color:#4a6266; }
.bingbong-directions { font-size:13px; line-height:1.5; margin:0 0 6px; }

/* Skip lives under the objective now that the room panel is gone (everything else is in the 3D scene). */
#room .top-copy #skip { display:block; margin:6px auto 0; color:var(--gold); text-decoration:underline; }

/* Captain's sea log page in the backpack. */
/* Captain's sea log: progress header, silhouette cards, dashed cards for what is still out there. */
.sea-log-head { margin:0 0 12px; text-align:left; }
#sea-log-caption { font-weight:650; font-size:13px; margin:0 0 8px; color:var(--ink); }
.sea-log-progress { display:flex; gap:4px; }
.sea-log-progress i { flex:1; height:6px; border-radius:3px; background:#d9d2bf; }
.sea-log-progress i.on { background:#365f59; }
.sea-log { list-style:none; margin:0 0 14px; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; text-align:left; }
.sea-log li { display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto auto; column-gap:10px; row-gap:3px; align-items:start; padding:10px; border:1px solid #78948b66; border-radius:9px; background:#e5ecdf; font-size:11px; line-height:1.45; color:#4a6266; }
.sea-log .badge { grid-row:span 2; width:34px; height:34px; padding:6px; border-radius:50%; background:#365f59; color:#fff5df; }
.sea-log strong { font-size:12.5px; color:#244e49; }
.sea-log li.unseen { background:#f0e8d6; border-style:dashed; border-color:#b9b29f; color:#7a7462; }
.sea-log li.unseen .badge { background:#d9d2bf; color:#8a8270; }
.sea-log li.unseen strong { color:#7a6a4a; }
.sea-log-tip { margin:0; padding:10px 12px; border-radius:9px; background:#365f5914; font-size:11px; line-height:1.55; color:#3f5c56; }
.sea-log-tip strong { color:#244e49; }
@media (max-width:420px) { .sea-log { grid-template-columns:1fr; } }

/* Ending credits: a portrait still with a caption, one credit line, then the statistics card. */
.credits-screen { z-index:6; background:linear-gradient(180deg,#1b3a4a,#3a2740 55%,#16323c); align-items:center; justify-content:center; padding:22px; pointer-events:auto; overflow:auto; }
.credits-stage { margin:0; width:min(100%,360px); aspect-ratio:2/3; max-height:58dvh; border-radius:10px; overflow:hidden; background:linear-gradient(160deg,#2b4a5c,#5c3b5a); box-shadow:0 24px 70px #0a202566; display:flex; flex-direction:column; justify-content:flex-end; position:relative; }
.credits-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:credits-drift 5s ease-in-out both; }
.credits-stage figcaption:empty { display:none; }
.credits-stage figcaption { position:relative; padding:16px 18px 18px; font-size:16px; line-height:1.35; color:var(--cream); text-shadow:0 2px 12px #10303a; background:linear-gradient(0deg,#10303acc,#10303a00); }
.credits-lines:empty { display:none; }
.credits-lines { list-style:none; margin:14px 0 0; padding:0; min-height:20px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; opacity:.8; text-align:center; }
.credits-controls { display:flex; gap:12px; align-items:center; margin-top:12px; }
.credits-controls .secondary { width:auto; min-width:120px; margin-top:0; }
.stats-rows { display:grid; grid-template-columns:1fr auto; gap:9px 16px; margin:14px 0 4px; text-align:left; font-size:14px; }
.stats-rows dt { opacity:.75; } .stats-rows dd { margin:0; font-weight:700; }
@keyframes credits-drift { from { transform:scale(1); } to { transform:scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .credits-stage img { animation:none; } }
#trailer-panel { padding:0; border:0; width:min(calc(100% - 20px),1100px); max-width:none; background:transparent; color:var(--ink); }
#trailer-panel .paper { position:relative; width:100%; max-width:none; padding:18px 14px 16px; max-height:calc(100dvh - 24px); overflow:auto; }
.trailer-close { position:absolute; top:8px; right:8px; width:40px; height:40px; border:0; border-radius:50%; background:#193f45; color:#fff5df; font-size:24px; line-height:40px; padding:0; }
#trailer-panel h2 { font-size:24px; margin:4px 0 6px; }
#trailer-panel::backdrop { background:#102f3bdd; }
#trailer-panel video { aspect-ratio:16/9; width:100%; max-height:55dvh; margin:8px auto 10px; background:#0c1f26; border-radius:6px; }
#trailer-panel .secondary { margin-top:6px; }

/* Compact hub header: the ship is the point, the copy is a strip above it. */
#hub .top-copy { margin-bottom:8px; }
#hub .top-copy .eyebrow { font-size:9px; letter-spacing:.14em; margin:0 0 2px; opacity:.85; }
#hub .top-copy h2 { font-size:20px; line-height:1.15; margin:0 0 4px; }
#hub #ship-view,#hub #boss-door { display:inline-block; padding:7px 12px; border:1px solid #eddcba66; border-radius:16px; background:#163f49b8; font-size:11px; font-weight:600; line-height:1; }
#hub #boss-door[aria-disabled="true"] { opacity:.7; }
#hub .boss-access { margin-top:6px; gap:8px; }
#hub #boss-progress { font-size:11px; opacity:.85; }
#hub .orbit-hint { display:block; margin:6px 0 0; font-size:10px; }
@media (min-width:900px) { #hub .boss-access { justify-content:flex-start; } }

/* Voyage log inside the backpack: one bar per thing to collect. */
.voyage-log { margin:0 0 14px; padding:12px 12px 8px; border:1px solid #78948b66; border-radius:9px; background:#e5ecdf; text-align:left; }
.voyage-row { display:grid; grid-template-columns:78px 1fr 44px; align-items:center; gap:10px; font-size:11.5px; margin-bottom:7px; color:#3f5c56; }
.voyage-row i { display:block; height:8px; border-radius:4px; background:#cfd8cd; overflow:hidden; }
.voyage-row b { display:block; height:100%; width:0; border-radius:4px; background:#365f59; transition:width .4s ease; }
.voyage-row strong { text-align:right; color:#244e49; font-size:12px; }
.voyage-note { margin:4px 0 0; font-size:11px; color:#57716b; }
#hub .boss-access { margin-top:8px; }

/* Sea log card on the vessel view: meter, hint and a toast for each sighting. */
#hub .orbit-hint.sea-log-hud { display:block; margin:10px 0 0; padding:10px 12px; max-width:300px; border-radius:10px; background:#10303ab8; border:1px solid #ffffff1f; opacity:1; font-size:11px; text-align:left; backdrop-filter:blur(6px); }
.sea-log-hud-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.9; }
.sea-log-hud-head strong { font-size:14px; letter-spacing:0; color:var(--gold); }
.sea-log-meter { display:flex; gap:3px; margin:7px 0 6px; }
.sea-log-meter i { flex:1; height:5px; border-radius:3px; background:#ffffff33; }
.sea-log-meter i.on { background:var(--gold); }
.sea-log-hud-hint { margin:0; font-size:11px; line-height:1.45; opacity:.85; }
.sea-log-toast { margin:8px 0 0; padding:8px 10px; border-radius:7px; background:#fff5df; color:#193f45; font-size:11.5px; line-height:1.4; animation:toast-in .25s ease-out; }
@keyframes toast-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.on-deck #hub .sea-log-hud { display:none; }
@media (prefers-reduced-motion: reduce) { .sea-log-toast { animation:none; } }