:root{--ink:#e8e4db;--muted:#8a8278;--line:#22252b;--panel:#14161a;--panel2:#1e2026;--accent:#c0392b;--gold:#c9a84c;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#0b0c0f;color:var(--ink);font-family:'Arial Narrow','Roboto Condensed',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none;}
@supports(padding:max(0px)){
  #app{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));
       padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom));}
}
#app{min-height:100%;display:flex;align-items:center;justify-content:center;padding:14px;
  background:
    linear-gradient(180deg,rgba(6,8,12,.55),rgba(6,8,12,.30) 38%,rgba(6,8,12,.80)),
    url('menu-bg.jpg') center/cover no-repeat fixed,
    radial-gradient(120% 75% at 50% 0%, #16223e 0%, #0a0e18 52%, #06070b 100%);}
.stage{width:100%;max-width:900px;}

/* ── SELECT ── */
#select{padding:8px 0 18px;text-align:center;}
.eyebrow{font:700 12px/1 monospace;letter-spacing:.34em;text-transform:uppercase;color:#9fb4d8;margin-bottom:8px;text-shadow:0 0 12px rgba(60,120,255,.45);}
.title{margin:.04em 0 .14em;line-height:.94;}
.title span{display:block;font-weight:900;letter-spacing:-.01em;text-transform:uppercase;line-height:.96;
  font-size:clamp(40px,15vw,98px);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:1px 1px 0 #15171c,2px 3px 0 rgba(0,0,0,.5),0 5px 10px rgba(0,0,0,.65);}
.word-broken{background-image:linear-gradient(100deg,#ffffff 0%,#dfe6f4 34%,#8294c2 60%,#22407e 100%);}
.word-britain{background-image:linear-gradient(100deg,#ff3b4d 0%,#cf142b 28%,#eef2ff 52%,#1f3f86 100%);}
.sub{color:#eef1f7;margin:8px 0 20px;font-size:clamp(15px,4.6vw,21px);font-weight:700;text-shadow:0 1px 5px #000;}
.warn{color:#ffb4a8;border:1px solid var(--accent);background:#2a1512;border-radius:10px;padding:10px 12px;margin:0 auto 16px;max-width:340px;font:600 12px/1.4 monospace;display:none;text-align:left;}
.warn b{color:#fff;}
.grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:flex-start;}
.card{position:relative;width:min(74vw,262px);border-radius:20px;padding:20px 16px 17px;cursor:pointer;
  background:linear-gradient(180deg,#0c1119,#06090f);
  transition:transform .15s ease,box-shadow .15s ease;
  box-shadow:0 0 22px rgba(40,140,255,.45),0 0 46px rgba(255,40,80,.22),inset 0 0 42px rgba(20,60,140,.20);}
.card::before{content:'';position:absolute;inset:-2px;border-radius:22px;z-index:-1;
  background:linear-gradient(135deg,#39d6ff 0%,#1f7bff 38%,#7a1730 60%,#ff2b4d 100%);}
.card::after{content:'';position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:radial-gradient(58% 40% at 50% 62%, rgba(60,130,255,.22), transparent 72%);}
.card:hover,.card:focus-visible{transform:translateY(-5px);outline:none;
  box-shadow:0 0 32px rgba(40,150,255,.75),0 0 62px rgba(255,40,80,.42),inset 0 0 48px rgba(20,60,140,.28);}
.thumb{position:relative;margin:0 auto 14px;display:flex;justify-content:center;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.7));}
.thumb canvas{display:block;}
.name{font-weight:900;letter-spacing:.06em;text-transform:uppercase;font-size:23px;color:#bfe4ff;
  text-shadow:0 0 14px rgba(50,160,255,.9),0 0 5px rgba(50,160,255,.7);margin-bottom:3px;}
.flagtag{font:700 12px/1 monospace;color:#9fb0cc;letter-spacing:.22em;}
.hint-text{text-align:center;color:#c8d1e1;font-size:13px;margin-top:16px;text-shadow:0 1px 4px #000;}
.rotate-tip{color:#cfe0ff;font:700 12px/1.45 monospace;letter-spacing:.03em;margin:0 auto 16px;max-width:340px;
  border:1px solid #2a4a7a;background:rgba(40,90,170,.16);border-radius:10px;padding:9px 12px;}
.moves{max-width:380px;margin:16px auto 4px;display:flex;flex-direction:column;gap:9px;text-align:left;}
.move{background:#0a0f18;border:1px solid #1d2b44;border-radius:12px;padding:10px 13px;font:600 12px/1.45 sans-serif;color:#c6d2e6;}
.move b{letter-spacing:.03em;}
.move b.hurler{color:#7dffce;}
.move b.firebin{color:#ff9b4a;}
.iconbtn{pointer-events:auto;background:#0008;border:1px solid #fff3;color:var(--ink);border-radius:9px;
  min-width:42px;padding:7px 10px;font:700 15px/1 sans-serif;cursor:pointer;letter-spacing:.04em;}
.iconbtn:active{background:#fff2;transform:scale(.96);}
.topbtns{display:flex;gap:8px;pointer-events:auto;}
#pausemenu{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#000b;z-index:16;}
.money{margin-top:5px;font:900 15px/1 monospace;letter-spacing:.04em;color:#ffe46b;text-shadow:0 1px 3px #000;}
#shop{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#000c;z-index:19;}
#shop.on{display:flex;}
.shopcard{width:min(86%,360px);background:#12100a;border:2px solid #ffd34d;border-radius:14px;padding:14px 14px 16px;box-shadow:0 10px 40px #000a;max-height:84%;overflow-y:auto;}
.shophead{display:flex;justify-content:space-between;align-items:baseline;font:900 17px/1 sans-serif;letter-spacing:.02em;color:#ffe46b;text-transform:uppercase;margin-bottom:12px;}
.shophead #shopmoney{font:900 16px monospace;color:#9fe0a0;}
.shoprow{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid #2a2418;}
.shoprow .sthumb{width:46px;height:34px;flex:0 0 auto;border-radius:5px;background:#0c0a06;display:block;}
.shoprow .sname{flex:1;font:700 14px sans-serif;color:#ece6d6;}
.shoprow .sprice{font:800 14px monospace;color:#ffd34d;min-width:54px;text-align:right;}
.sbtn{background:#1f7a2e;border:0;color:#fff;font:800 12px sans-serif;letter-spacing:.04em;padding:8px 14px;border-radius:8px;cursor:pointer;}
.sbtn:active{transform:scale(.95);}
.sbtn.owned{background:#3a3d44;color:#9aa0ab;}
#shopclose{display:block;width:100%;margin-top:14px;background:#7a1f25;border:0;color:#fff;font:800 14px sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:11px;border-radius:9px;cursor:pointer;}
#shopclose:active{transform:scale(.98);}
#travel{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#000c;z-index:19;}
#travel.on{display:flex;}
.travelcard{width:min(86%,360px);background:#0a0f14;border:2px solid #ffd34d;border-radius:14px;padding:14px 14px 16px;box-shadow:0 10px 40px #000a;max-height:80%;overflow-y:auto;}
.travelhead{font:900 17px/1 sans-serif;letter-spacing:.02em;color:#ffe46b;text-transform:uppercase;margin-bottom:12px;text-align:center;}
.trow{display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;margin:7px 0;padding:12px 14px;background:#13202e;border:1px solid #284055;border-radius:9px;cursor:pointer;}
.trow:active{transform:scale(.98);}
.trow .tname{font:800 15px sans-serif;color:#ece6d6;letter-spacing:.02em;}
.trow .ttag{font:800 11px monospace;color:#0a0f14;background:#5ec46a;border-radius:5px;padding:3px 8px;letter-spacing:.04em;}
.trow.soon{opacity:.7;}
.trow.soon .ttag{background:#5a6472;color:#dfe6ef;}
#travel-close{display:block;width:100%;margin-top:14px;background:#7a1f25;border:0;color:#fff;font:800 14px sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:11px;border-radius:9px;cursor:pointer;}
#travel-close:active{transform:scale(.98);}
#pausemenu.on{display:flex;}
.pausecard{font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-align:center;
  font-size:30px;text-shadow:0 2px 10px #000;}
.pausecard span{display:block;font:600 13px monospace;color:#cdd3df;margin-top:10px;letter-spacing:.06em;text-transform:none;}
#kbhint{display:block;width:max-content;max-width:90%;margin:18px auto 0;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:13px;padding:11px 18px;}

/* ── GAME ── */
.game{position:relative;display:none;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0c0d10;touch-action:none;}
canvas#cv{display:block;width:100%;height:auto;}
.topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;padding:8px 10px;background:linear-gradient(#000a,transparent);pointer-events:none;}
.who{font-weight:900;text-transform:uppercase;letter-spacing:.05em;font-size:13px;text-shadow:0 1px 2px #000;}
.who small{display:block;font:600 10px/1 monospace;color:#c0bdb5;letter-spacing:.18em;}
.hpwrap{margin-top:5px;width:120px;height:9px;border:1px solid #000;border-radius:5px;background:#3a0d0d;overflow:hidden;box-shadow:0 1px 3px #000;}
.hpbar{height:100%;width:100%;background:linear-gradient(90deg,#2ec40c,#9fe000);transition:width .12s;}
.banner{position:absolute;left:50%;top:34%;transform:translateX(-50%);background:#000a;border:1px solid var(--accent);color:#fff;padding:10px 16px;border-radius:10px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;opacity:0;transition:opacity .4s;pointer-events:none;white-space:nowrap;text-align:center;}
.controls{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#13151a;border-top:1px solid var(--line);gap:8px;}
.pad{display:flex;gap:12px;}
.btn{width:62px;height:62px;border-radius:50%;background:#0009;border:1.5px solid #ffffff30;color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:none;backdrop-filter:blur(2px);}
.btn:active{background:#ffffff33;transform:scale(.94);}
.btn.punch{width:70px;height:70px;font-size:13px;font-weight:900;letter-spacing:.04em;border-color:var(--accent);color:#ffd6cc;}
.btn.jump{width:70px;height:70px;font-size:13px;font-weight:900;letter-spacing:.04em;}
/* ── weapon select (matches STRIKE, sits to its left) ── */
.weaponsel{width:70px;height:70px;border-radius:50%;background:#0009;border:1.5px solid var(--gold);
  padding:0;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;
  user-select:none;-webkit-user-select:none;touch-action:none;backdrop-filter:blur(2px);
  box-shadow:0 0 12px rgba(201,168,76,.4);}
.weaponsel:active{transform:scale(.94);}
.weaponsel canvas{width:100%;height:100%;display:block;}
.weaponsel.empty{opacity:.4;box-shadow:none;}
.armour{margin-top:3px;font:900 11px/1 monospace;letter-spacing:.06em;color:#9fd2ff;text-shadow:0 1px 2px #000;}
/* ── helper summon (centre) ── */
.helperbar{display:flex;gap:6px;align-items:flex-end;}
.helperbtn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  width:74px;height:84px;border-radius:14px;background:#0a0c12;border:1.5px solid #6cf;color:#cfe9ff;
  padding:5px 3px 4px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;
  box-shadow:0 0 12px rgba(60,170,255,.45),inset 0 0 18px rgba(30,90,180,.25);}
.helperbtn:active{transform:scale(.95);}
.helperbtn canvas{display:block;border-radius:7px;}
.helperbtn .hname{font:800 9px/1 sans-serif;letter-spacing:.04em;text-transform:uppercase;margin-top:3px;text-align:center;white-space:nowrap;}
.helperbtn .cool{position:absolute;inset:0;border-radius:13px;background:#000a;display:none;align-items:center;justify-content:center;font:900 22px/1 monospace;color:#9fe0ff;}
.helperbtn.cooling .cool{display:flex;}
.helperbtn.ready{box-shadow:0 0 16px rgba(110,255,180,.7),inset 0 0 18px rgba(30,140,90,.3);border-color:#7dffb0;}

/* ── CUTSCENE ── */
#cutscene{position:absolute;inset:0;background:#000c;display:none;align-items:center;justify-content:center;flex-direction:column;z-index:20;}
#cutscene.active{display:flex;}
.bubble{background:#fff;color:#111;border-radius:14px;padding:10px 16px;max-width:72%;font:700 13px/1.4 sans-serif;position:relative;margin:4px 0;}
.bubble.left{align-self:flex-start;margin-left:6%;}
.bubble.right{align-self:flex-end;margin-right:6%;background:#2255cc;color:#fff;}
.bubble.left::before{content:'';position:absolute;left:-10px;top:12px;border:6px solid transparent;border-right-color:#fff;}
.bubble.right::after{content:'';position:absolute;right:-10px;top:12px;border:6px solid transparent;border-left-color:#2255cc;}
.bubble-label{font:700 10px/1 monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:8px 4px 2px;align-self:flex-start;}
.bubble-label.right-label{align-self:flex-end;margin-right:6%;}
#cutscene-skip{position:absolute;bottom:12px;right:14px;color:#fff8;font:600 11px monospace;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;}

/* ── FADE (level transition) ── */
#fade{position:absolute;inset:0;background:#06070b;opacity:0;pointer-events:none;z-index:15;transition:opacity .5s;display:flex;align-items:center;justify-content:center;}
#fade .ftxt{font:900 22px/1.3 sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-align:center;text-shadow:0 2px 10px #000;opacity:0;transition:opacity .4s;}

/* ── DUNDEE NEWS CARD (pub → Dundee flash) ── */
#dundeecard{position:absolute;inset:0;background:#06070b;display:none;align-items:center;justify-content:center;z-index:18;opacity:0;transition:opacity .35s;}
#dundeecard.on{display:flex;}
#dundeecard img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
#dundeecard .dtxt{display:none;font:900 26px/1.3 sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-align:center;text-shadow:0 2px 10px #000;padding:0 20px;}
#dundeecard.noimg img{display:none;}
#dundeecard.noimg .dtxt{display:block;}

/* ── LOADING ── */
#loading{position:fixed;inset:0;background:#0b0c0f;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:99;}
.load-bar-wrap{width:200px;height:4px;background:#222;border-radius:2px;margin-top:14px;}
.load-bar{height:4px;background:var(--accent);border-radius:2px;width:0%;transition:width .2s;}
.load-txt{font:700 12px monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}

/* Fill the screen edge-to-edge in landscape on ANY device (was gated to max-height:520px,
   which skipped larger phones/tablets whose landscape viewport is taller than that — leaving
   the app's own background peeking through below the canvas). Orientation is the real signal
   we care about: this game is landscape-only, so go fullscreen whenever it's sideways. */
@media(orientation:landscape){
  #app{padding:0;align-items:stretch;justify-content:center;}
  .stage{max-width:none;width:100%;}
  #kbhint{display:none;}
  .game{height:100vh;height:100dvh;border:0;border-radius:0;}
  canvas#cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;}
  /* controls float over the bottom of the canvas */
  .controls{position:absolute;left:0;right:0;bottom:0;border-top:0;
    background:linear-gradient(transparent,rgba(0,0,0,.55) 60%);
    padding:8px max(16px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    pointer-events:none;}
  .controls .btn,.controls .helperbtn,.controls .weaponsel{pointer-events:auto;}
  .topbar{padding-top:max(8px,env(safe-area-inset-top));}
  .btn{width:52px;height:52px;font-size:21px;}
  .btn.jump,.btn.punch{width:58px;height:58px;font-size:12px;}
  .weaponsel{width:58px;height:58px;}
  /* helper buttons → top-centre, small + semi-transparent, out of the player's way */
  .helperbar{position:fixed;top:max(6px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);
    gap:8px;z-index:7;opacity:.82;}
  .helperbtn{width:46px;height:54px;padding:3px 2px 2px;}
  .helperbtn .hname{font-size:7px;}
  .helperbtn canvas{width:34px;height:30px;}
}