@import "https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700&family=Bree+Serif&display=swap";:root{--panel:#081b2ab8;--panel-strong:#07141fe6;--border:#ffe4aa57;--accent:#ffd166;--ink:#fdf6df;--mist:#d7f3ff;--math:#ff9b71;--english:#64d8cb;color:var(--ink);font-family:"Baloo 2",Trebuchet MS,sans-serif}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{overscroll-behavior:none;color:var(--ink);background:radial-gradient(circle at 50% 0,#fff3c480,#0000 22%),linear-gradient(#d6f3ff 0%,#86cfee 46%,#0d5a87 100%);overflow:hidden}button,select{font:inherit}.game-shell{height:100dvh;position:relative;overflow:hidden}.game-shell:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle at 20% 12%,#fff7c499,#0000 18%),linear-gradient(#0000 0%,#03192638 100%);position:absolute;inset:0}.game-root{z-index:1;pointer-events:none;position:absolute;inset:0}.game-root canvas{width:100%;height:100%;display:block}.ui-layer{z-index:2;pointer-events:auto;grid-template-rows:auto auto 1fr auto;grid-template-columns:minmax(230px,320px) minmax(250px,320px);place-content:start space-between;gap:.9rem;height:100%;padding:1rem;display:grid;position:relative}.ui-layer *{pointer-events:auto}.voyage-brief{z-index:12;text-shadow:0 2px 10px #00000038;background:linear-gradient(#091f2f7a,#0716212e);border-radius:18px;gap:.28rem;max-width:min(320px,100vw - 9rem);padding:.7rem .9rem;display:grid;position:absolute;top:1rem;left:1rem}.voyage-brief-row{flex-wrap:wrap;align-items:center;gap:.55rem;display:flex}.voyage-brief-row--ship{flex-direction:column;align-items:start;gap:.08rem}.voyage-brief-label{letter-spacing:.08em;text-transform:uppercase;color:#ffe8b1eb;font-size:.74rem;font-weight:700}.voyage-brief strong{font-family:Bree Serif,Georgia,serif;font-size:1.24rem;line-height:1.05}.ship-tier-pips--voyage{gap:.28rem;margin-top:.08rem}.ship-tier-pips--voyage .ship-tier-pip{border-radius:4px;width:12px;height:12px}.voyage-brief-treasure .treasure-icons{gap:.34rem}.voyage-brief-treasure .treasure-icon{font-size:1.22rem}.heart-icons{align-items:center;gap:.26rem;display:inline-flex}.heart-icon{color:#fff1de3d;font-size:1.1rem;line-height:1}.heart-icon.is-filled{color:#ff7b78;text-shadow:0 0 10px #ff7b7859}.mobile-hud-toggle,.mobile-hud-scrim,.mobile-hud-header,.mobile-hud-close{display:block}.mobile-hud-panel{z-index:11;opacity:0;pointer-events:none;align-content:start;gap:.8rem;width:min(340px,100vw - 2rem);max-height:calc(100vh - 7.8rem);padding-right:.05rem;transition:opacity .16s,transform .16s;display:grid;position:absolute;top:1rem;left:1rem;overflow:auto;transform:translateY(-10px)}.game-shell.mobile-hud-open .mobile-hud-panel{opacity:1;pointer-events:auto;transform:translateY(0)}.mobile-hud-panel .brand-card,.mobile-hud-panel .stats-card,.mobile-hud-panel .ship-card,.mobile-hud-panel .status-card,.mobile-hud-panel .tip-card{grid-area:auto;justify-self:stretch;width:100%;max-width:none}.mobile-hud-toggle{z-index:12;background:linear-gradient(180deg, #fff0c82e, #ffaa0014), var(--panel-strong);color:var(--ink);border:1px solid #ffe4aa6b;border-radius:999px;padding:.62rem .95rem;font-weight:700;position:absolute;top:1rem;right:1rem;box-shadow:0 12px 24px #00000029}.game-shell.mobile-hud-open .mobile-hud-toggle{opacity:0;pointer-events:none}.mobile-hud-scrim{z-index:10;opacity:0;pointer-events:none;background:#04132257;border:0;transition:opacity .16s;position:absolute;inset:0}.game-shell.mobile-hud-open .mobile-hud-scrim{opacity:1;pointer-events:auto}.mobile-hud-header{justify-content:space-between;align-items:center;padding:0 .2rem;display:flex}.mobile-hud-close{color:var(--ink);background:#081b2ad1;border:1px solid #ffe4aa57;border-radius:999px;padding:.38rem .78rem;font-weight:700}.hud-card,.modal-card{background:linear-gradient(180deg, #ffffff0f, transparent), var(--panel);border:1px solid var(--border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:22px;box-shadow:0 20px 48px #00000038}.brand-card,.stats-card,.ship-card,.status-card,.tip-card{pointer-events:auto;max-width:320px}.brand-card{padding:.95rem 1.05rem}.brand-card h1,.modal-card h2,.ship-card h3{margin:.12rem 0 .45rem;font-family:Bree Serif,Georgia,serif;line-height:1.04}.brand-card h1{font-size:clamp(1.8rem,3vw,2.45rem)}.brand-copy,.status-card p,.tip-card p,.modal-copy,.ship-upgrade-text,.role-blurb{margin:0;line-height:1.25}.eyebrow{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin:0 0 .3rem;font-size:.82rem;font-weight:700}.stats-card,.ship-card,.status-card{justify-self:stretch;width:min(100%,320px)}.stats-card{z-index:6;padding:.9rem;position:relative}.picker{pointer-events:auto;z-index:7;gap:.45rem;font-weight:700;display:grid;position:relative}.toggle-row{pointer-events:auto;color:var(--ink);z-index:7;justify-content:space-between;align-items:center;gap:.75rem;margin-top:.7rem;font-weight:700;display:flex;position:relative}.toggle-button{min-width:58px;color:var(--ink);pointer-events:auto;cursor:pointer;z-index:8;background:#ffffff14;border:1px solid #ffdc8a59;border-radius:999px;padding:.45rem .8rem;font-weight:700;position:relative}.toggle-button.is-on{background:linear-gradient(#ffe4aa52,#ffae002e);border-color:#ffe4aa80}.picker select{width:100%;color:var(--ink);z-index:8;background:#ffffff14;border:1px solid #ffdc8a59;border-radius:14px;padding:.7rem .9rem;position:relative}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin-top:.8rem;display:grid}.stat-grid article,.role-meter{background:#ffffff12;border-radius:16px;padding:.75rem}.stat-label{color:var(--mist);font-size:.86rem;display:block}.stat-grid strong{margin-top:.2rem;font-size:1.25rem;display:block}.treasure-icons{flex-wrap:wrap;align-items:center;gap:.22rem;display:flex}.treasure-icon{color:#fff4d647;text-shadow:0 1px #0000001f;font-size:1rem;line-height:1}.treasure-icon.is-collected{color:#f2c14e}.ship-card{padding:.9rem}.ship-card-top{justify-content:space-between;align-items:start;gap:.7rem;display:flex}.ship-card h3{font-size:1.25rem}.ship-tier-pips{gap:.35rem;margin-top:.25rem;display:flex}.ship-tier-pip{background:#ffffff29;border:1px solid #ffffff38;border-radius:999px;width:10px;height:10px}.ship-tier-pip.is-active{background:linear-gradient(#ffe29a,#ffb454);border-color:#ffedb0cc;box-shadow:0 0 12px #ffc95859}.ship-upgrade-text{color:var(--mist);margin-top:.35rem}.role-meter-list{gap:.55rem;margin-top:.75rem;display:grid}.role-meter.is-next-upgrade{border:1px solid #ffde8457;box-shadow:inset 0 0 0 1px #ffebae14,0 10px 22px #0000001f}.role-meter-header,.role-title{justify-content:space-between;align-items:center;gap:.6rem;display:flex}.role-title{justify-content:start;font-weight:700}.role-count{color:var(--accent);white-space:nowrap;font-weight:700}.role-swatch,.role-shape{background:#ffffff1f;border:1px solid #fff3;display:inline-block}.role-swatch{width:14px;height:14px}.role-swatch--circle,.role-shape--circle{border-radius:999px}.role-swatch--diamond,.role-shape--diamond{transform:rotate(45deg)}.role-swatch--square,.role-shape--square{border-radius:4px}.role-shapes{gap:.35rem;margin-top:.45rem;display:flex}.role-shape{opacity:.4;width:12px;height:12px}.role-shape.is-active,.role-swatch{background:var(--role-accent);opacity:1;box-shadow:0 0 10px color-mix(in srgb, var(--role-accent) 45%, transparent);border-color:#0000}.role-blurb{color:var(--mist);margin-top:.4rem;font-size:.9rem}.status-card,.tip-card{padding:.8rem .95rem}.status-card{align-self:start}.tip-card{align-self:end}.tip-card p+p{margin-top:.45rem}.tip-compact{display:none}.touch-controls{left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + .9rem);z-index:9;pointer-events:auto;touch-action:none;-webkit-user-select:none;-webkit-touch-callout:none;grid-template-columns:minmax(88px,1fr) minmax(108px,1.2fr) minmax(88px,1fr);grid-template-areas:".forward.""left back right";gap:.7rem;width:min(360px,100vw - 2rem);display:grid;position:absolute;transform:translate(-50%)}.touch-controls button,.answer-button,.continue-button{background:linear-gradient(180deg, #fff0c82e, #ffaa0014), var(--panel-strong);color:var(--ink);cursor:pointer;border:1px solid #ffe4aa6b;border-radius:16px;box-shadow:0 12px 24px #00000029}.touch-controls button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;width:100%;min-width:0;min-height:62px;padding:.82rem .8rem;font-weight:700}.touch-button{flex-direction:column;justify-content:center;align-items:center;gap:.18rem;display:inline-flex}.touch-button-icon{font-size:1.2rem;line-height:1}.touch-button-label{line-height:1}.touch-button--left{grid-area:left;min-height:68px}.touch-button--forward{grid-area:forward;min-height:78px}.touch-button--right{grid-area:right;min-height:68px}.touch-button--back{grid-area:back;min-height:74px}.touch-controls button.is-pressed{transform:translateY(1px)scale(.98)}.modal-layer{z-index:30;pointer-events:auto;background:#04132242;place-items:center;padding:1.2rem;display:grid;position:absolute;inset:0}.game-shell.has-modal .touch-controls,.game-shell.has-modal .mobile-hud-toggle,.game-shell.has-modal .mobile-hud-panel,.game-shell.has-modal .mobile-hud-scrim{pointer-events:none}.modal-layer[hidden]{display:none}.modal-card{text-align:center;width:min(92vw,760px);padding:1.35rem;animation:.22s ease-out tide-in}.modal-card h2{font-size:clamp(1.9rem,3vw,2.5rem)}.battle-card{color:#4d2d1b;background:linear-gradient(#fff7e3f5,#f5e8cef2);border:1px solid #8c63393d;border-radius:24px;width:min(94vw,760px);max-height:min(86vh,820px);padding:1.15rem 1.2rem 1.2rem;animation:none;position:relative;overflow:auto;box-shadow:0 18px 40px #08101847}.battle-card:before{display:none}.battle-layout{gap:.7rem;height:auto;display:grid}.battle-header{flex-direction:column;justify-content:start;align-items:center;gap:.45rem;display:flex}.battle-title-block{text-align:center;max-width:100%;margin-inline:auto}.battle-title-block .eyebrow{display:none}.battle-title-block h2{margin:.15rem 0 0;font-size:clamp(1.42rem,2.4vw,2.2rem);line-height:1.04}.battle-stage{grid-template-rows:auto auto;gap:.75rem;animation:.18s battle-swap;display:grid}.battle-progress{color:#6a4330;font-size:.84rem}.battle-progress--duel{grid-auto-flow:column;justify-content:center;align-items:center;gap:.8rem;min-width:0;padding:0;display:grid}.progress-group{justify-content:center;align-items:center;display:flex}.progress-icons{gap:.28rem;display:flex}.battle-token{color:#7b5134;background:#a67d573d;border:1px solid #7d58383d;border-radius:999px;place-items:center;width:14px;height:14px;font-size:.58rem;font-weight:700;display:grid}.battle-token--check{color:#2f6f55}.battle-token--cross{color:#9a4434}.battle-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;display:grid;position:static}.round-chip{background:#fffbf2b8;border:1px solid #8b5c2f24;border-radius:12px;place-items:center;min-height:40px;padding:0;display:grid;position:relative}.round-chip.is-current{background:#fff8eaeb}.round-chip.is-player{color:#2f6f55}.round-chip.is-enemy{color:#983f31}.round-chip-mark{font-size:1.02rem;font-weight:700}.letter-rack{flex-wrap:wrap;justify-content:center;gap:.45rem;display:flex}.letter-tile{background:#fff7e37a;border:1px solid #6f48252e;border-radius:12px;min-width:34px;padding:.45rem .52rem;font-size:.92rem;font-weight:700}.battle-phase-label{letter-spacing:.01em;text-transform:none;color:#8f4b22;margin:0;font-size:.96rem;font-weight:800}.battle-copy-block{align-content:start;justify-self:center;justify-items:center;gap:.5rem;width:100%;max-width:520px;padding:0;display:grid}.battle-copy-block .modal-copy{color:#553120;max-width:100%;font-size:.95rem}.battle-auto-advance{color:#7b5237;margin:.15rem 0 0;font-weight:700}.answer-grid{grid-template-columns:repeat(2,minmax(0,1fr));justify-self:center;gap:.65rem;width:min(100%,470px);margin-top:.25rem;padding:0;display:grid}.answer-button,.continue-button{padding:.95rem 1rem}.answer-button{z-index:1;color:#fff8ea;font-size:1rem;position:relative}.answer-button--plank{color:#5b3522;width:100%;max-width:215px;min-height:44px;text-shadow:none;background:#fffaf038;border:1px solid #7a5a3d1f;border-radius:14px;justify-self:center;font-size:.88rem;box-shadow:0 6px 14px #482c170a}.question-panel{align-content:center;justify-items:center;gap:.72rem;width:100%;max-width:520px;min-height:0;padding:0;display:grid}.question-chip{color:#ffe7c9;letter-spacing:.03em;background:#673f27e6;border-radius:16px;min-width:128px;padding:.8rem 1.1rem;font-family:Bree Serif,Georgia,serif;font-size:clamp(1.4rem,3vw,2rem);line-height:1}.continue-button{min-width:180px;margin-top:1rem;font-weight:700}.victory-card,.intro-card,.defeat-card{max-width:620px}@keyframes tide-in{0%{opacity:0;transform:translateY(18px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes battle-swap{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (width<=900px){.ui-layer{grid-template-rows:auto auto auto auto 1fr auto;grid-template-columns:1fr}.brand-card,.stats-card,.ship-card,.status-card,.tip-card{grid-area:auto/1;justify-self:stretch;width:100%;max-width:none}}@media (width<=640px){.ui-layer{align-content:stretch;gap:.6rem;padding:.6rem}.voyage-brief{border-radius:16px;gap:.18rem;max-width:calc(100vw - 9.2rem);padding:.58rem .72rem;top:.65rem;left:.65rem}.voyage-brief-label{font-size:.64rem}.voyage-brief strong{font-size:.98rem}.ship-tier-pips--voyage .ship-tier-pip{width:10px;height:10px}.voyage-brief-treasure .treasure-icon,.heart-icon{font-size:.95rem}.mobile-hud-panel{width:auto;max-height:calc(100vh - 7.2rem);top:.6rem;left:.6rem;right:.6rem}.brand-card{padding:.75rem .85rem}.brand-card h1{font-size:1.35rem}.brand-copy{display:none}.stats-card,.ship-card,.status-card,.tip-card{border-radius:20px;padding:.72rem .8rem}.eyebrow{margin-bottom:.18rem;font-size:.72rem}.picker{gap:.28rem;font-size:.96rem}.picker select{padding:.62rem .78rem}.toggle-row{margin-top:.45rem;font-size:.95rem}.toggle-button{min-width:54px;padding:.38rem .72rem}.stat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:.55rem}.stat-grid article{min-height:72px;padding:.58rem}.stat-label{font-size:.76rem}.stat-grid strong{font-size:1.02rem}.ship-card-top{gap:.45rem}.ship-card h3{margin-bottom:.2rem;font-size:1.02rem}.ship-upgrade-text{font-size:.9rem}.role-meter-list{gap:.5rem}.role-meter{padding:.6rem}.role-meter-header{align-items:center}.role-title strong,.role-count{font-size:.94rem}.role-blurb{display:none}.status-card p:last-child{font-size:.94rem;line-height:1.18}.tip-card p:not(.tip-compact){display:none}.tip-compact{font-size:.92rem;line-height:1.2;display:block}.battle-header{gap:.45rem}.battle-title-block{max-width:100%}.modal-layer{align-items:center;padding:.7rem}.battle-card{aspect-ratio:auto;background:linear-gradient(#fff7e3f5,#f5e8cef2);border:1px solid #8c63393d;border-radius:24px;width:min(92vw,420px);min-height:0;max-height:min(78vh,720px);padding:.95rem .9rem 1rem;overflow:auto;box-shadow:0 18px 40px #08101847}.battle-layout{gap:.7rem;height:auto;display:grid}.battle-title-block h2{font-size:1.42rem;line-height:1.04}.battle-progress--duel{grid-auto-flow:column;justify-content:center;align-items:center;gap:.8rem;min-width:0}.progress-group{justify-content:center}.battle-strip{gap:.35rem;position:static;top:auto;left:auto;right:auto}.round-chip{background:#fffbf2b8;border-color:#8b5c2f24;border-radius:12px;min-height:40px}.battle-stage{grid-template-rows:auto auto;gap:.75rem;display:grid;position:static;inset:auto}.question-panel{gap:.55rem;min-height:0;padding:0}.battle-copy-block .modal-copy{max-width:100%;font-size:.95rem}.answer-grid{grid-template-columns:1fr;gap:.55rem;width:100%;margin-top:0;padding:0}.battle-copy-block{gap:.5rem;padding:0}.battle-phase-label{font-size:.86rem}.letter-rack{gap:.35rem}.letter-tile{width:2.45rem;min-width:0;padding:.5rem 0;font-size:.95rem}.question-chip{min-width:112px;padding:.72rem .95rem;font-size:1.65rem}.answer-button--plank{max-width:none;min-height:48px;box-shadow:none;background:#fffdf7db;border-color:#7c543429}.touch-controls{width:min(270px,100vw - 1.2rem);bottom:calc(env(safe-area-inset-bottom,0px) + .55rem);grid-template-columns:minmax(72px,1fr) minmax(98px,1.2fr) minmax(72px,1fr);gap:.42rem}.touch-controls button{border-radius:18px;min-height:58px;padding:.5rem}.touch-button--left,.touch-button--right{min-height:64px;padding:.58rem .5rem}.touch-button--forward{min-height:74px;padding:.72rem .5rem}.touch-button--back{min-height:68px;padding:.64rem .5rem}.touch-button-icon{font-size:1.35rem}.touch-button-label{font-size:.72rem}}