:root { --bg:#101e28; --text:#edf6f3; --muted:#adc9c3; --accent:#a5e0c1; }
body,#host { background:#101e28; }
.overlay { background:rgba(7,20,29,.8); backdrop-filter:blur(12px); padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom)); overflow:auto; touch-action:pan-y; z-index:100; }
.modal { background:#142e3a; border:1px solid #45606a; border-radius:24px; padding:32px; max-height:100%; overflow:auto; box-shadow:0 30px 90px #0005; touch-action:pan-y; }
.modal h2 { font-size:28px; letter-spacing:-1px; line-height:1.15; font-weight:750; }
.modal p { font-size:15px; line-height:1.7; color:#bdd1d5; }
.btn { min-height:46px; border-radius:10px; font-weight:650; padding:12px 20px; }
.btn.primary { background:#a5e0c1; color:#142e29; border-color:#a5e0c1; }
.card { background:#0f2530; border-color:#34515c; padding:18px; }
.small { color:#c1d6d7; line-height:1.65; }
.game-kicker { color:#a5e0c1; letter-spacing:3px; font-size:11px; text-transform:uppercase; margin:0 0 16px; }
#ovStart .modal { max-width:860px; background:radial-gradient(ellipse at 100% 0,#365c60,transparent 65%),#142e3a; }
#ovStart h2 { font-family:Georgia,serif; font-weight:400; font-size:clamp(42px,7vw,76px); max-width:10ch; margin-bottom:22px; }
.start-meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.start-meta span { border:1px solid #56746e; padding:6px 12px; border-radius:99px; font-size:11px; color:#c9ded7; }
.comicGrid { gap:14px; }
.comicPanel { background:#203e49; border:1px solid #45616a; border-radius:16px; box-shadow:none; transform:none; }
.comicArt { background:#18303c; font-size:40px; min-height:90px; }
.comicBubble { background:transparent; color:#eff8f5; border:0; box-shadow:none; font-size:17px; line-height:1.4; }
.comicBubble::after { display:none; }
.comicCaption { color:#bfd1d4; font-size:13px; line-height:1.6; }
.topBtns { z-index:60; gap:6px; }
.topBtn { box-shadow:none; background:#122c3ae8; border-color:#47616c; min-width:40px; font-size:18px; }
.hud { top:64px; right:12px; gap:6px; }
.pill { background:#122c3ad9; border-color:#47616c; box-shadow:none; font-size:12px; padding:7px 10px; }
.hint { display:none; }
.mission { position:absolute; top:12px; left:16px; max-width:calc(100% - 340px); z-index:20; pointer-events:none; font-size:12px; color:#e4f2eb; }
.mission strong { display:block; font-size:15px; margin-bottom:3px; }
.mission span { display:block; opacity:.8; }
.mission progress { display:block; margin-top:6px; width:150px; height:4px; accent-color:#a5e0c1; }
.map { min-height:450px; overflow:visible; background:#112732; }
.node { width:44px; height:44px; border-radius:50%; font-size:13px; color:white; }
.touchUI .bigBtn { cursor:pointer; }
body[data-playing="false"] :is(.touchUI,.hud,.mission) { visibility:hidden; }
button { font-family:inherit; }
button:focus-visible,a:focus-visible { outline:3px solid #a5e0c1; outline-offset:3px; }
.toast { bottom:190px; max-width:90%; text-align:center; border-radius:12px; }
@media(max-width:700px) {
  .overlay { padding:12px; }
  .modal { padding:22px 18px; border-radius:18px; }
  .modal h2 { font-size:25px; }
  #ovStart h2 { font-size:46px; }
  .modal p { font-size:13px; }
  .comicGrid { grid-template-columns:1fr; }
  .comicPanel { display:grid; grid-template-columns:50px 1fr; padding:12px; gap:8px; }
  .comicArt { grid-row:span 2; min-height:0; background:none; font-size:28px; padding:0; }
  .comicBubble { padding:0; font-size:15px; }
  .comicCaption { padding:0; font-size:12px; }
  .row.end { justify-content:stretch; }
  .row.end .btn { flex:1; }
  .topBtns { left:10px; right:10px; top:max(8px,env(safe-area-inset-top)); justify-content:flex-end; }
  .topBtn { width:40px; height:40px; border-radius:10px; }
  .topBtns a { margin-right:auto; }
  .hud { top:100px; left:10px; right:10px; max-width:none; gap:5px; }
  .pill { font-size:11px; padding:5px 7px; gap:5px; }
  .bar { width:55px; }
  .hud .pill:nth-child(3) { min-width:0; }
  .hud .pill:nth-child(4) { display:none; }
  .mission { top:56px; left:12px; max-width:calc(100% - 24px); }
  .mission strong { font-size:13px; }
  .mission span { display:none; }
  .mission progress { width:180px; }
  .stick { width:112px; height:112px; left:max(18px,env(safe-area-inset-left)); bottom:max(24px,env(safe-area-inset-bottom)); background:#142e3abf; }
  .stick .knob { width:44px; height:44px; background:#a5e0c166; }
  .btnPad { width:172px; height:126px; bottom:max(20px,env(safe-area-inset-bottom)); right:max(14px,env(safe-area-inset-right)); grid-template-columns:repeat(3,52px); grid-template-rows:repeat(2,56px); grid-template-areas:'. jump .' 'quack . sword'; gap:4px; transform:none!important; }
  .bigBtn { width:54px; height:54px; background:#244b5b; font-size:18px; box-shadow:none; }
  .bigBtn span { font-size:8px; }
  #btnMapTouch,#btnShopTouch { display:none; }
  .map { min-height:570px; }
  .mapWrap { grid-template-columns:1fr; }
}
@media(max-height:500px) and (orientation:landscape) {
  .mission { top:8px; max-width:calc(100% - 310px); }
  .mission span { display:none; }
  .hud { top:50px; }
  .stick { width:96px; height:96px; bottom:10px; }
  .btnPad { width:172px; height:112px; bottom:10px; right:max(14px,env(safe-area-inset-right)); transform:none; grid-template-columns:repeat(3,52px); grid-template-rows:repeat(2,52px); grid-template-areas:'. jump .' 'quack . sword'; gap:4px; }
  .bigBtn { width:50px; height:50px; box-shadow:none; }
  .bigBtn b { font-size:19px; }
  .bigBtn span { font-size:8px; }
  #btnMapTouch,#btnShopTouch { display:none; }
  .modal { max-height:calc(100dvh - 24px); }
  .comicGrid { grid-template-columns:repeat(3,1fr); }
  .comicPanel { display:block; }
  .comicArt { display:none; }
}
@media(prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }
/* Portal-style game menus. */
.modal,.card,.btn,.topBtn,.pill,.hint,.mission,.comicPanel,.comicBubble,.start-meta span,.bigBtn,.toast { border-radius:4px!important; box-shadow:none; font-family:Arial,Helvetica,sans-serif; }
.modal,#ovStart .modal { background:#24282e; border-color:#4d5866; }
.card,.comicPanel { background:#303740; border-color:#4d5866; }
.btn.primary { background:#087cff; border-color:#087cff; color:#fff; }
#ovStart h2 { font-family:Arial,Helvetica,sans-serif; font-size:clamp(30px,5vw,48px); font-weight:700; }
/* Keep game menus consistent with squared site controls. */
.modal,.card,.btn,.topBtn,.pill,.hint,.mission,.comicPanel,.comicBubble,.start-meta span,.bigBtn,.toast { border-radius:0!important; }
/* Floating joystick receives input over the whole left side. */
html,body,#host,canvas,.touchUI,.touchUI *,.hud,.topBtns,.topBtns * { -webkit-user-select:none!important; user-select:none!important; -webkit-touch-callout:none!important; -webkit-tap-highlight-color:transparent; }
html,body,#host { overscroll-behavior:none; touch-action:none; }
#moveZone { position:absolute; inset:0 auto 0 0; width:50%; pointer-events:auto; touch-action:none; }
#stick,#stick .knob { pointer-events:none; }
.bigBtn:active { background:#357cb0!important; transform:scale(.96); }
#toast { max-width:min(560px,calc(100vw - 32px)); white-space:normal; line-height:1.5; pointer-events:none; }
.game-copyright { position:fixed; left:20%; right:20%; bottom:max(3px,env(safe-area-inset-bottom)); text-align:center; color:#c7d6e1; font:10px/1.4 Arial,sans-serif; pointer-events:none; z-index:55; }