/* Last Crown: HighAbove theme for the game page. Royal night, lit by gold. */
@font-face{font-family:"Bebas Neue";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bebas-neue-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2")}
:root{
  --bg:#070a12;--card:#0d121e;--muted:#161c28;--border:#232a36;--edge:#3a4558;
  --ink:#fffaf0;--body:#c6bfa8;--dim:#8d93a0;--gold:#f59f0a;--gold-hi:#ffb62e;--ink-on-gold:#060b12;--royal:#1f4fc4;--red:#e0716a;--green:#7fd39b;
  --display:"Bebas Neue","Arial Narrow",Impact,sans-serif;
  --text:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--text);overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}
body{touch-action:none;user-select:none;-webkit-user-select:none}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.02em;margin:0}
p{margin:0}
a{color:var(--ink);text-decoration-color:var(--gold);text-underline-offset:4px}
a:hover{color:var(--gold-hi)}
:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--ink-on-gold);padding:8px 14px;z-index:99;font-weight:800;border-radius:999px}
.skip:focus{left:8px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;background:#0a0f1e;touch-action:none}

/* type and controls */
.eyebrow,.lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.3em;color:var(--gold)}
.eyebrow{margin:0 0 10px}
.lede{color:var(--body);font-size:16px;line-height:1.6;margin:10px 0 0;max-width:46ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 24px;border-radius:999px;border:1px solid var(--gold);background:var(--gold);color:var(--ink-on-gold);
  font:800 14px/1 var(--text);text-transform:uppercase;letter-spacing:.12em;text-decoration:none;cursor:pointer;transition:filter .2s,border-color .2s}
.btn:hover{filter:brightness(1.1);color:var(--ink-on-gold)}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--ink)}
.btn.ghost:hover{border-color:var(--gold);color:var(--ink);filter:none}
.btn[disabled]{opacity:.5;cursor:default;filter:none}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.menu{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.menu.col{flex-direction:column;align-items:stretch}
.menu.col .btn{width:100%}
.field{width:100%;min-height:46px;padding:0 16px;border-radius:999px;border:1px solid var(--border);background:var(--bg);color:var(--ink);font:600 16px var(--text);user-select:text;-webkit-user-select:text;flex:1 1 170px}
.field:focus{border-color:var(--gold);outline:none}
.tbtn{min-height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--body);font:600 12px var(--text);cursor:pointer}
.tbtn:hover{border-color:var(--gold);color:var(--ink)}
.tbtn[aria-pressed="false"]{opacity:.7}
.seg{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.seg .lbl{margin-right:6px;letter-spacing:.2em}
.seg button{min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:var(--bg);color:var(--body);font:600 12px var(--text);cursor:pointer}
.seg button:hover{border-color:var(--edge)}
.seg button[aria-pressed="true"]{border-color:var(--gold);color:var(--ink);background:var(--muted)}
kbd{display:inline-block;min-width:22px;padding:1px 6px;margin:0 2px;border-radius:6px;background:var(--muted);border:1px solid var(--border);font:700 12px var(--text);color:var(--ink);text-align:center}

/* screens and cards */
.screen{position:fixed;inset:0;display:none;place-items:center;padding:max(16px,var(--safe-t)) max(16px,var(--safe-r)) max(16px,var(--safe-b)) max(16px,var(--safe-l));z-index:20;overflow:auto;touch-action:pan-y;background:radial-gradient(ellipse at 50% 40%,#070a1233 0%,#070a12cc 75%)}
.screen.show{display:grid}
.card{background:#0d121ef2;border:1px solid var(--border);border-radius:16px;box-shadow:0 30px 80px #000d;padding:28px 30px;width:min(480px,100%)}
.card.wide{width:min(940px,100%)}
.card h1{font-size:clamp(56px,9vw,84px);line-height:.92;color:var(--ink)}
.card h2{font-size:clamp(34px,5vw,44px);line-height:1}
.title h1{margin-bottom:2px}
.titlefoot{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.credit{margin-top:14px;font-size:12px;color:var(--dim);letter-spacing:.04em}
.credit a{color:var(--body)}
.hintline{margin-top:12px;color:var(--dim);font-size:13px;min-height:1.4em}

/* boot */
#boot{background:var(--bg);z-index:60}
.boot{display:grid;justify-items:center;gap:6px;text-align:center}
.boot .eyebrow{margin:8px 0 0}
.bootmsg{color:var(--body);margin-bottom:12px}
.loadbar{width:min(300px,70vw);height:8px;background:var(--bg);border:1px solid var(--border);border-radius:999px;overflow:hidden}
.loadbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#b97708,#f59f0a);transition:width .25s}

/* title: the key art behind the menu card */
#title{background:linear-gradient(270deg,#070a12e6 0%,#070a1290 42%,#070a1218 100%),linear-gradient(0deg,#070a12e0 0%,#070a1200 40%),url(../img/title.webp) 50% 0/cover no-repeat #070a12}
@media (min-width:1000px){#title{justify-items:end;padding-right:max(24px,7vw)}}
@media (max-width:999px){#title{background:linear-gradient(0deg,#070a12f2 0%,#070a12b8 55%,#070a1255 100%),url(../img/title.webp) 38% 0/cover no-repeat #070a12;align-items:end}}

/* hero select */
.herogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:18px}
.hero{display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid var(--border);border-radius:16px;background:var(--bg);color:var(--ink);cursor:pointer;overflow:hidden;font:inherit;transition:border-color .2s,transform .26s cubic-bezier(.22,1,.36,1)}
.hero:hover{border-color:var(--edge);transform:translateY(-3px)}
.hero[aria-pressed="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.hero .pic{display:block;position:relative;aspect-ratio:1/1;background:var(--muted);overflow:hidden;flex:none}
.hero .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.hero .hb{padding:10px 12px 12px}
.hero b{display:block;font:400 22px/1 var(--display);letter-spacing:.03em}
.hero small{display:block;color:var(--gold);font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin-top:4px}
.hero p{color:var(--body);font-size:12.5px;line-height:1.45;margin-top:6px}
#heroes .card{max-height:calc(100dvh - 32px);overflow:auto}

/* how to / leaderboard */
.how{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.how li{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:start;color:var(--body);font-size:14.5px}
.how b{font:400 22px/1.1 var(--display);color:var(--ink);letter-spacing:.03em}
.lb{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px;max-height:min(52vh,420px);overflow:auto}
.lb li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);font-size:14px}
.lb li.empty{display:block;color:var(--body)}
.lb .rk{font:400 20px/1 var(--display);color:var(--gold)}
.lb .nm b{font-weight:700}.lb .nm span{display:block;color:var(--dim);font-size:12px}
.lb .sc{font:400 22px/1 var(--display);letter-spacing:.03em}

/* level up */
#levelup{background:radial-gradient(ellipse at 50% 50%,#070a1255 0%,#070a12dd 80%)}
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:18px}
.pick{display:flex;flex-direction:column;gap:6px;text-align:left;padding:18px 18px 20px;border:1px solid var(--border);border-radius:16px;background:var(--bg);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .2s,transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s}
.pick:hover,.pick:focus-visible{border-color:var(--gold);transform:translateY(-5px);box-shadow:0 16px 32px #0008}
.pick .ic{width:34px;height:34px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pick .tg{font-size:10.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.pick .tg.new{color:var(--gold)}
.pick b{font:400 28px/1 var(--display);letter-spacing:.02em}
.pick p{color:var(--body);font-size:14px;line-height:1.5}
.pick .k{margin-top:auto;padding-top:8px;color:var(--dim);font-size:12px}
.pips{display:flex;gap:4px;margin-top:2px}.pips i{width:16px;height:5px;border-radius:3px;background:var(--border)}.pips i.on{background:var(--gold)}

/* run over */
.endstats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:18px 0 0}
.endstats div{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 14px}
.endstats dt{font-size:10.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.endstats dd{margin:2px 0 0;font:400 28px/1.1 var(--display);letter-spacing:.02em}
.saverow{margin-top:18px}
.saverow .row{margin-top:6px;flex-wrap:nowrap}

/* HUD: hidden until the run starts */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none}
#hud[hidden]{display:none}
#hud button{pointer-events:auto}
.panel{position:absolute;pointer-events:auto;background:#070a12d9;border:1px solid var(--border);border-radius:14px;padding:10px 12px 12px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#pStatus{left:max(10px,var(--safe-l));top:max(10px,var(--safe-t));width:min(250px,56vw)}
#pRun{left:50%;top:max(10px,var(--safe-t));transform:translateX(-50%);padding:8px 14px;text-align:center}
#pLoad{left:max(10px,var(--safe-l));top:calc(max(10px,var(--safe-t)) + 98px);max-width:min(250px,56vw)}
.panel .tab{display:flex;align-items:center;gap:6px;background:none;border:0;color:var(--gold);font:800 10px var(--text);letter-spacing:.24em;text-transform:uppercase;padding:0 0 8px;cursor:pointer;width:100%;justify-content:space-between}
.panel .tab svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.panel.min{padding:6px 10px}
.panel.min .tab{padding:0;gap:10px}
.panel.min .tab svg{transform:rotate(180deg)}
.panel.min .pbody{display:none}
#pRun .tab{padding:6px 0 0;order:2;justify-content:center}
#pRun.min .tab{padding:0}
#pRun .pbody{display:flex;gap:14px;align-items:baseline;justify-content:center}
#pRun b{font:400 34px/1 var(--display);letter-spacing:.05em}
#pRun span{color:var(--body);font-size:12px;font-weight:600}
.bar{position:relative;height:16px;background:var(--bg);border:1px solid var(--border);border-radius:999px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;width:100%;transform-origin:left;transition:transform .12s linear}
.bar.hp i{background:linear-gradient(90deg,#c0463e,#e0716a)}
.bar.xp i{background:linear-gradient(90deg,#b97708,#f59f0a)}
.bar.boss{height:12px;margin:4px auto 0;width:min(420px,80vw)}.bar.boss i{background:linear-gradient(90deg,#7a2a8c,#c466e0)}
.bar span{position:absolute;inset:0;display:grid;place-items:center;font:800 10px var(--text);letter-spacing:.1em;text-shadow:0 1px 2px #000}
.icons{display:flex;flex-wrap:wrap;gap:6px}
.icons.small{margin-top:6px}
.sl{position:relative;width:40px;height:40px;border-radius:10px;border:1px solid var(--edge);background:var(--card);display:grid;place-items:center}
.icons.small .sl{width:32px;height:32px;border-radius:8px;border-color:var(--border)}
.sl svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icons.small .sl svg{width:17px;height:17px;stroke:var(--ink)}
.sl em{position:absolute;right:-4px;bottom:-5px;min-width:16px;height:16px;border-radius:8px;background:var(--gold);color:var(--ink-on-gold);font:800 10px/16px var(--text);text-align:center;font-style:normal}
.bossbar{position:absolute;left:50%;top:calc(max(10px,var(--safe-t)) + 88px);transform:translateX(-50%);text-align:center;font:400 22px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;text-shadow:0 2px 6px #000}
.bossbar[hidden]{display:none}
.toast{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);display:grid;gap:6px;justify-items:center;pointer-events:none}
.toast div{background:#070a12d9;border:1px solid var(--border);border-radius:999px;padding:8px 18px;font:800 12px var(--text);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);animation:rise .4s ease-out}
.hudbtns{position:absolute;right:max(10px,var(--safe-r));top:max(10px,var(--safe-t));display:flex;gap:8px}
.rbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:#070a12d9;display:grid;place-items:center;cursor:pointer;padding:0}
.rbtn:hover{border-color:var(--gold)}
.rbtn svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2.4;stroke-linecap:round}
.fps{position:absolute;right:max(10px,var(--safe-r));bottom:max(8px,var(--safe-b));background:#070a12d9;border:1px solid var(--border);border-radius:999px;padding:2px 10px;font:600 11px var(--text);color:var(--body)}

/* touch stick */
#joy{position:fixed;z-index:12;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:1px solid #fffaf040;background:#070a1255;pointer-events:none}
#joy[hidden]{display:none}
#joy i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#f59f0acc;border:1px solid #ffb62e}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.screen.show .card{animation:rise .5s ease-out}

@media (max-width:640px){
  #pStatus{width:min(176px,46vw)}
  #pRun{left:auto;right:calc(max(10px,var(--safe-r)) + 54px);transform:none;padding:6px 12px}
  #pRun b{font-size:28px}
  .bossbar{top:calc(max(10px,var(--safe-t)) + 76px);font-size:18px}
  .toast div{font-size:11px;padding:7px 14px;letter-spacing:.14em}
  .card{padding:22px 20px}
  .how li{grid-template-columns:1fr;gap:2px}
  .endstats dd{font-size:24px}
  .titlefoot{justify-content:flex-start}
  .hero p{display:none}
  .herogrid{grid-template-columns:repeat(3,1fr);gap:8px}
  .hero b{font-size:18px}
  .hero small{font-size:9px;letter-spacing:.14em}
  #pLoad{top:calc(max(10px,var(--safe-t)) + 90px)}
  .toast{bottom:30%}
}
@media (max-height:520px) and (orientation:landscape){
  .card{padding:16px 22px}.card h1{font-size:54px}.lede{font-size:14px}.menu{margin-top:14px}.titlefoot{margin-top:12px;padding-top:12px}.credit{margin-top:8px}
  .picks{grid-template-columns:repeat(3,1fr)}.pick{padding:12px}.pick p{font-size:12.5px}.pick b{font-size:22px}
  #heroes .card{padding:14px 18px}.herogrid{grid-template-columns:repeat(5,1fr);margin-top:8px}.hero .pic{aspect-ratio:4/3}.hero p{display:none}
  .endstats{grid-template-columns:repeat(4,1fr)}.how{display:grid;grid-template-columns:1fr 1fr}
}
@media (hover:none){.pick .k,.hintline.keys{display:none}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}