:root{font-family:'Noto Sans SC','Microsoft YaHei',sans-serif;color:#f7f0dd;background:#101520;font-synthesis:none;--gold:#efc966;--ink:#202835;--muted:#aeb4b8}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;color:inherit;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #f5d77c;outline-offset:4px}button:disabled{opacity:.45;cursor:not-allowed}[hidden]{display:none!important}#app{width:min(100vw,177.7778svh);aspect-ratio:16/9;position:relative;overflow:hidden;background:#283d42;box-shadow:0 0 90px #0006;container-type:inline-size}canvas{width:100%;height:100%;display:block;touch-action:none}.grain{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px #17231c44}.screen{position:absolute;inset:0}.home{background:linear-gradient(90deg,#152328f7 0%,#152328e8 35%,#15232855 67%,#15232811);padding:3.3% 5%}.home header{display:flex;justify-content:space-between;align-items:center}.brand{color:#f3d17c;font-size:2.2cqw;font-weight:900;text-decoration:none;letter-spacing:-.1em}.brand span{color:#e8eee2}.brand small{letter-spacing:.15em;font-size:.7cqw;margin-left:1.8cqw;vertical-align:middle}.build{font-size:.7cqw;letter-spacing:.16em;color:#d3ddce}.iconbtn{background:none;border:1px solid #ffffff33;border-radius:50%;width:2.8cqw;height:2.8cqw;margin-left:1.5cqw}.homecopy{position:absolute;top:23%;left:7%;width:46%}.eyebrow{font-size:.92cqw;letter-spacing:.2em;color:#d6ddbf;display:flex;gap:.7cqw;align-items:center}.eyebrow i{width:.5cqw;height:.5cqw;background:#e4bf66;border-radius:50%}h1{font-size:5.5cqw;letter-spacing:-.05em;line-height:1.1;margin:1.6cqw 0;color:#fff7df;text-shadow:0 5px 20px #0002}h1 span{display:block;font-size:1.1cqw;letter-spacing:.65em;font-weight:500;margin-top:1.2cqw;color:#e5ce8b}.intro{font-size:1.12cqw;line-height:1.9;color:#c3cec5;margin:2cqw 0}.heroMeta{display:flex;gap:1.3cqw;font-size:.73cqw;color:#aab9ae;margin-bottom:2cqw}.primary{background:var(--gold);color:#302b21;font-size:1.1cqw;min-width:21cqw;padding:1.15cqw 1.7cqw;border-radius:.5cqw;font-weight:800;box-shadow:0 4px 0 #93713a,0 10px 25px #0002;display:inline-flex;justify-content:space-between;align-items:center;gap:2cqw;transition:filter .15s,transform .15s}.primary:hover{filter:brightness(1.1);transform:translateY(-1px)}.primary span{font-size:1.5cqw}.subtle{display:block;background:none;padding:1.1cqw 0;color:#f0d38b;font-size:.9cqw}.homeLinks{display:flex;gap:1.2cqw;margin-top:1.9cqw}.homeLinks button{background:none;color:#b6c3b6;padding:0;font-size:.8cqw;border-bottom:1px solid #b6c3b633;padding-bottom:.5cqw}.heroTag{position:absolute;right:12%;bottom:17%;text-align:center;transform:rotate(-4deg);text-shadow:0 3px 10px #172b21}.heroTag span{font-size:.65cqw;letter-spacing:.3em;color:#efe2ab}.heroTag b{display:block;font-size:2.5cqw;letter-spacing:.2em}.heroTag small{font-size:.9cqw}.home footer{position:absolute;bottom:4%;left:5%;right:5%;display:flex;justify-content:space-between;color:#b4c0b19c;font-size:.7cqw}#hud{position:absolute;inset:0;pointer-events:none}#hud button{pointer-events:auto}.portrait{position:absolute;left:2.3%;top:3.8%;width:4.1cqw;height:4.1cqw;border-radius:50%;background:#e7d2a2;border:2px solid #f3d581;color:#30353a;display:grid;place-items:center;font-size:1.7cqw;font-weight:900;box-shadow:0 4px 16px #0003}.vitals{position:absolute;top:4%;left:7.3%;width:21%}.vitals>b{font-size:1.03cqw;text-shadow:0 2px 3px #000}.vitals small{font-size:.48cqw;margin-left:.5cqw;letter-spacing:.07em;color:#d6dcc9}.bar{height:.62cqw;background:#111b26ba;border:1px solid #fff4;border-radius:10px;overflow:hidden;margin-top:.55cqw}.bar i{height:100%;display:block;background:linear-gradient(90deg,#dd935c,#efcb7c);transition:width .2s}.bar.focus{height:.3cqw;margin-top:.25cqw}.bar.focus i{background:#8cbee7}.smallrow{font-size:.58cqw;display:flex;justify-content:space-between;margin-top:.3cqw;text-shadow:0 1px 4px #000}.chapter{position:absolute;top:3.5%;left:40%;width:20%;text-align:center;padding:.8cqw;background:linear-gradient(90deg,transparent,#172333d9,transparent);border-top:1px solid #d7cc8a33}.chapter span{display:block;font-size:.65cqw;letter-spacing:.15em;color:#e4cf8c}.chapter b{display:block;font-size:1.6cqw;margin:.25cqw}.chapter small{font-size:.7cqw;color:#d9decf}.topactions{position:absolute;right:2.5%;top:4%;display:flex;gap:.6cqw;align-items:start}.topactions>button{background:#1b293ad9;border:1px solid #fff3;border-radius:50%;width:3cqw;height:3cqw;font-size:1.15cqw}.topactions .energy{width:auto;height:auto;border-radius:.6cqw;padding:.5cqw 1.05cqw;color:var(--gold);font-size:1.1cqw}.energy small{display:block;font-size:.55cqw;color:#d7dfd0}.bottomleft{position:absolute;left:2.5%;bottom:3%;display:flex;align-items:end;gap:2cqw}.keyhint{font-size:.65cqw;line-height:1.9;color:#f8f3d8c4;text-shadow:0 2px 4px #000}#joystick{display:none;position:relative;width:9cqw;height:9cqw;border-radius:50%;border:1px solid #fff4;background:#ffffff13;pointer-events:auto;touch-action:none}#joystick i{position:absolute;width:40%;height:40%;left:30%;top:30%;border-radius:50%;background:#eee5bd88;border:1px solid #fff7;pointer-events:none}#joystick span{position:absolute;bottom:-1.4cqw;width:100%;text-align:center;font-size:.8cqw;color:#fffb}.battleActions{position:absolute;right:3%;bottom:4.5%;display:flex;gap:1.2cqw;align-items:end}.battleActions .skill,.battleActions .shoot{position:relative;border-radius:50%;width:7.3cqw;height:7.3cqw;background:radial-gradient(circle at 35% 25%,#3c5d73,#1c2c3c);border:2px solid #b9d5d7;box-shadow:0 4px 14px #0006;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.battleActions .shoot{background:radial-gradient(circle at 35% 25%,#f3d585,#8d6b35);border-color:#ffe7a4;width:8.3cqw;height:8.3cqw;color:#fff8de}.battleActions button b{font-size:.9cqw;z-index:1}.battleActions button small{font-size:.5cqw;margin-top:.3cqw;z-index:1}.skillIcon,.shoot>span{font-size:2.3cqw;line-height:1.15;z-index:1}.skill i{position:absolute;inset:0;background:#090e24b8;transform-origin:bottom;pointer-events:none}.auto{background:#1c2c3cd9;padding:.65cqw .9cqw;font-size:.65cqw;border-radius:.5cqw;margin-bottom:1cqw;border:1px solid #fff3}.auto b{font-size:.7cqw!important;color:var(--gold)}#notice{position:absolute;top:19%;left:25%;width:50%;text-align:center;font-size:.9cqw;text-shadow:0 2px 5px #000;background:linear-gradient(90deg,transparent,#182631bb,transparent);padding:.5cqw;opacity:0;transition:opacity .3s}#combo{position:absolute;left:3%;top:26%;color:#ffdc7f;font-size:2.5cqw;font-weight:900;transform:rotate(-8deg);text-shadow:0 3px 0 #66503b}#combo small{display:block;font-size:.65cqw}.overlay{position:absolute;inset:0;background:#10202caa;backdrop-filter:blur(8px);display:grid;place-items:center;padding:3%}.panel{background:#f3eddd;color:#30383c;border:1px solid #fff9;border-radius:1.2cqw;width:59%;max-height:100%;overflow:auto;padding:2.6cqw 3cqw;box-shadow:0 20px 80px #08121b66}.panel.wide{width:80%}.panel .eyebrow{color:#8f815a;font-size:.7cqw;margin-top:0}.panel h2{font-size:2cqw;line-height:1.25;margin:.7cqw 0 1cqw;letter-spacing:-.04em}.panel p{font-size:.9cqw;line-height:1.85;color:#6b716d;margin:.8cqw 0}.panel .primary{min-width:0;font-size:.95cqw;padding:.85cqw 1.3cqw;box-shadow:0 3px 0 #ae8a49}.panel button.secondary{padding:.85cqw 1.2cqw;border:1px solid #c7c7b6;background:#fff5;color:#647064;border-radius:.45cqw;font-size:.85cqw}.panel .row{display:flex;gap:.8cqw;flex-wrap:wrap;align-items:center;margin-top:1.3cqw}.panel .row .right{margin-left:auto}.statbox{padding:1cqw 1.2cqw;border:1px solid #c7b88b66;border-radius:.5cqw;display:flex;justify-content:space-between;align-items:center;background:#e8e0cb77;font-size:.85cqw;margin:.8cqw 0}.statbox strong{color:#aa7d30}.answers{display:grid;grid-template-columns:1fr 1fr;gap:.7cqw;margin-top:1.5cqw}.answers button{background:#fff9;border:1px solid #ccc9b8;border-radius:.6cqw;min-height:3.6cqw;color:#414b47;text-align:left;padding:.9cqw 1.1cqw;font-size:1.05cqw;transition:background .15s}.answers button:hover{background:#eae7d2}.answers button em{font-style:normal;font-size:.7cqw;margin-right:1cqw;color:#9c998a}.answers button.correct{background:#d4e7cf;border-color:#7eaa75}.answers button.wrong{background:#ecd5ca;border-color:#c59179}.question{text-align:center;margin:1.3cqw 0}.question .word{font-size:3.3cqw;line-height:1.2;font-weight:800;color:#2c4648;letter-spacing:-.025em}.question small{display:block;font-size:.8cqw;color:#879082;margin-top:.7cqw}.feedback{min-height:2.1cqw;font-size:.83cqw;line-height:1.6;color:#668366;margin-top:1cqw}.quiztip{font-size:.65cqw!important;color:#969a8c!important}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1cqw;margin-top:1.5cqw}.card{background:#fffa;border:1px solid #d6ceba;border-radius:.7cqw;text-align:left;padding:1.4cqw;color:#333e3c;min-height:12cqw;display:flex;flex-direction:column;transition:transform .15s,border-color .15s}.card:hover{transform:translateY(-4px);border-color:#b28c37}.card .glyph{font-size:2cqw;color:#ac8433;margin-bottom:1.4cqw}.card h3{font-size:1.1cqw;margin:0 0 .5cqw}.card p{font-size:.8cqw;margin:0}.card small{font-size:.7cqw;color:#aa8335;margin-top:auto;padding-top:1.4cqw}.talents{display:grid;gap:.7cqw}.talent{display:flex;align-items:center;gap:1cqw;padding:1cqw;border:1px solid #d6ceba;background:#fff6;border-radius:.6cqw}.talent .glyph{font-size:1.7cqw;min-width:2cqw;color:#b28a3a}.talent b{font-size:.95cqw}.talent p{font-size:.75cqw;margin:.2cqw 0}.talent button{margin-left:auto;flex-shrink:0}.guidegrid{display:grid;grid-template-columns:1fr 1fr;gap:1.2cqw}.guidegrid h3{font-size:1cqw;margin-bottom:.3cqw}.guidegrid p{font-size:.8cqw}.badge{display:inline-block;color:#957331;background:#e5d9b8;border-radius:100px;padding:.3cqw .8cqw;font-size:.7cqw}#toast{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);padding:.8cqw 1.5cqw;border-radius:100px;background:#142632ee;color:#fff2cd;font-size:.85cqw;z-index:20;opacity:0;pointer-events:none;transition:opacity .15s;text-align:center;max-width:90%}@media(pointer:coarse){#joystick{display:block}.keyhint{display:none}.battleActions .skill{width:9cqw;height:9cqw}.battleActions .shoot{width:10cqw;height:10cqw}.battleActions button b{font-size:1.2cqw}.battleActions button small{font-size:.65cqw}.skillIcon,.shoot>span{font-size:3cqw}}@media(max-aspect-ratio:1/1){.panel{width:84%}.panel.wide{width:94%}.panel h2{font-size:2.8cqw}.panel p,.panel button.secondary,.panel .primary{font-size:1.3cqw}.answers button{font-size:1.6cqw;min-height:5cqw}.question .word{font-size:4.3cqw}.feedback{font-size:1.1cqw}.card p{font-size:1cqw}.card h3{font-size:1.4cqw}.card small{font-size:1cqw}.talent b{font-size:1.4cqw}.talent p{font-size:1.1cqw}}

/* 0.2 controls and rage */
.battleActions .rage{width:7.9cqw;height:7.9cqw;background:radial-gradient(circle at 35% 25%,#a95a4b,#472f3c);border-color:#e6ad8a}.battleActions .rage b{font-size:.72cqw}.rage.ready{box-shadow:0 0 2cqw #f2995066,0 4px 14px #0006;animation:ragePulse 1s ease-in-out infinite alternate}.rage.active{background:radial-gradient(circle,#e65f43,#8b3043);border-color:#ffd7a0}.topactions #musicBtn{font-size:.63cqw}.homeLinks{flex-wrap:wrap}.homeLinks button{white-space:nowrap}.rageReadout{color:#f2b299!important}.credits a{color:#94723c}.credits{font-size:.8cqw;line-height:1.8}.battleActions .auto{margin-right:.3cqw}@keyframes ragePulse{to{box-shadow:0 0 2.4cqw #ffb46899,0 4px 14px #0006}}@media(pointer:coarse){.battleActions .rage{width:9cqw;height:9cqw}.battleActions .rage b{font-size:1cqw}}

/* 0.3 readability and vocabulary */
.heroTag{bottom:8%}.quizsource{font-size:.68cqw!important;color:#8a8f7f!important;margin:.4cqw 0!important}.question .word{overflow-wrap:anywhere}.answers button{line-height:1.55}.question small{line-height:1.7}.home .heroMeta{gap:1cqw}.panel .credits p{font-size:.82cqw}@media(max-aspect-ratio:1/1){.quizsource{font-size:1cqw!important}.question .word{font-size:3.8cqw}}

.bestiarygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8cqw}.bestiarycard{background:#fff8;border:1px solid #d6ceba;border-radius:.65cqw;padding:.55cqw .9cqw}.bestiarycard canvas{width:100%;height:8.1cqw;object-fit:contain}.bestiarycard h3{font-size:.95cqw;margin:.2cqw 0;color:#33473e}.bestiarycard p{font-size:.69cqw;line-height:1.55;margin:.3cqw 0}.bestiarycard:nth-child(1){background:#dfe8d377}.bestiarycard:nth-child(3){background:#e5dcf077}@media(max-aspect-ratio:1/1){.bestiarycard h3{font-size:1.3cqw}.bestiarycard p{font-size:1cqw}}

/* 0.4 roster, story chapters, and per-word progress */
.chapterCards{display:grid;grid-template-columns:1fr 1fr;gap:1cqw;margin:1.15cqw 0}.chapterCard{color:#37423c;background:#fff9;border:1px solid #d5c8aa;border-radius:.7cqw;padding:1.15cqw;text-align:left}.chapterCard small{color:#a18240;font-size:.72cqw}.chapterCard h3{font-size:1.3cqw;margin:.5cqw 0}.chapterCard p{font-size:.75cqw;line-height:1.65;margin:.5cqw 0}.chapterCard strong{display:block;color:#947139;font-size:.8cqw;margin-top:1.1cqw}.chapterCard canvas{width:100%;height:11cqw;object-fit:contain}.rosterActions{display:flex;gap:.5cqw;flex-wrap:wrap}.rosterCards .chapterCard:nth-child(2){background:#f1ddc477}.battleActions .swing{background:radial-gradient(circle at 35% 25%,#5a9086,#254751);border-color:#a7e5d9}#statusBadge[data-status=blue]{color:#92e9ff}#statusBadge[data-status=armor]{color:#ffd088}#statusBadge[data-status=hard]{color:#e5eecc}.studyGroup{border:1px solid #d6c9ad;border-radius:.45cqw;padding:.5cqw .8cqw;background:#f9f3e4;color:#655c45;font-size:.73cqw}.studyGroup summary{cursor:pointer}.studyGroup #studyEntries{display:grid;grid-template-columns:repeat(4,1fr);gap:.32cqw;padding-top:.6cqw}.studyGroup #studyEntries span{display:flex;justify-content:space-between;gap:.35cqw;padding:.25cqw .4cqw;border-radius:.3cqw;background:#e7e0cc99;overflow-wrap:anywhere}.studyGroup #studyEntries b{color:#a17938}.bestiarygrid{grid-template-columns:repeat(4,1fr)}.bestiarycard canvas{height:7.4cqw}@media(pointer:coarse){.battleActions .swing{width:8.4cqw;height:8.4cqw}}@media(max-aspect-ratio:1/1){.chapterCard h3{font-size:1.65cqw}.chapterCard p,.chapterCard strong,.studyGroup{font-size:1.1cqw}}

.rosterCards{grid-template-columns:repeat(3,minmax(0,1fr))}
.rosterCards .chapterCard:nth-child(3){background:#d9dfce85}
.rosterCards .rosterActions{flex-wrap:wrap}
#stageQuizCount{display:block;margin-top:.25cqw;color:#f0daa3}
#fieldStatus{position:absolute;top:17%;left:50%;transform:translateX(-50%);width:max-content;max-width:80%;padding:.55cqw 1.1cqw;border:1px solid #ffd0d88c;border-radius:.5cqw;background:#3e2b39eb;color:#ffdee4;font-size:.92cqw;text-align:center;pointer-events:none}
#nextQuestion:disabled{opacity:.65;cursor:wait}
@media (max-aspect-ratio:4/5){#fieldStatus{font-size:1.4cqw}}

/* Keep keycaps readable through cooldown and on narrow displays. */
.battleActions{gap:.85cqw}
.battleActions .skill,.battleActions .rage,.battleActions .swing,.battleActions .shoot{
  width:clamp(56px,8.6cqw,120px);height:clamp(56px,8.6cqw,120px);padding:2px 4px;
}
.battleActions .skill kbd,.battleActions .shoot kbd,.topactions .energy kbd{
  position:relative;z-index:1;min-width:1.55em;border:1px solid #ffebbd96;border-bottom-width:2px;
  border-radius:.26em;background:#15283bdc;color:#fff3cc;text-align:center;font:800 clamp(13px,1.45cqw,23px)/1.1 system-ui,sans-serif;
  padding:.08em .25em .12em;
}
.topactions .energy kbd{display:inline-block;font-size:clamp(10px,.88cqw,16px)}
.battleActions .skill b,.battleActions .shoot b{
  font-size:clamp(10px,1.07cqw,17px);line-height:1.1;max-width:100%;margin-top:.28em;
  text-align:center;text-wrap:balance;text-shadow:0 1px 3px #111a;
}
.battleActions .skill small,.battleActions .shoot small{
  font-size:clamp(8px,.78cqw,13px);line-height:1.08;max-width:94%;margin-top:.24em;text-align:center;
}
.keyhint{font-size:clamp(10px,.86cqw,15px);color:#fff6de}
#notice{font-size:clamp(11px,1.2cqw,20px);left:15%;width:70%;pointer-events:none}
#thorfinnQuote{
  position:absolute;z-index:2;top:17%;left:50%;width:max-content;max-width:92%;transform:translateX(-50%);
  padding:.5cqw 4cqw .9cqw;text-align:center;pointer-events:none;
  color:#fff2cb;background:linear-gradient(90deg,#18242c00,#18242cee 14%,#18242cee 86%,#18242c00);
  border-block:1px solid #e1c28d72;text-shadow:0 2px 5px #101520;
}
#thorfinnQuote span{display:block;font-size:clamp(11px,1.05cqw,16px);letter-spacing:.16em}
#thorfinnQuote strong{display:block;font-size:clamp(19px,3.1cqw,46px);line-height:1.24}
#notice:has(+ #thorfinnQuote:not([hidden])){visibility:hidden}
.quizActions{flex-wrap:wrap}
.quizActions #nextQuestion,.quizActions #confirmAnswer{
  flex:1 1 155px;min-height:48px;font-size:clamp(15px,1.25cqw,21px);
  padding:.65em 1.05em;justify-content:center;align-items:center;gap:.65em;
}
.quizActions #nextQuestion:not([hidden]),.quizActions #confirmAnswer:not([hidden]){display:inline-flex}
.quizActions .nextArrow{font-size:1.4em;line-height:.85}
.quizActions kbd{font:600 .8em system-ui,sans-serif;border:1px solid currentColor;border-radius:.3em;padding:.13em .32em}
.quizActions #exitQuiz{min-height:44px;font-size:clamp(12px,.9cqw,16px)}
.answers button[aria-pressed="true"]:not(:disabled){
  color:#302820;background:#fff0c5;border-color:#b27932;box-shadow:inset 0 0 0 1px #b27932;
}
@media (max-width:620px){
  .battleActions .auto{position:absolute;bottom:100%;right:0;margin:0 0 4px}
  .battleActions{right:2%;gap:3px}
  .battleActions .skill,.battleActions .rage,.battleActions .swing,.battleActions .shoot{width:max(51px,8.6cqw);height:max(51px,8.6cqw)}
  .battleActions .skill kbd,.battleActions .shoot kbd{font-size:13px}
}

.rosterCards{grid-template-columns:repeat(4,minmax(0,1fr))}
.rosterCards .chapterCard:nth-child(4){background:#eed1a681}
#battleEntry{
  position:absolute;z-index:3;inset:17% 0 auto;
  display:grid;justify-items:center;gap:.2cqw;padding:1.35cqw 2cqw 1.6cqw;
  pointer-events:none;text-align:center;color:#fff1ca;text-shadow:0 2px 12px #101923;
  background:linear-gradient(90deg,transparent,#182535dc 35%,#182535dc 65%,transparent);
  border-block:1px solid #f1db9a43;
}
#battleEntry strong{font:850 clamp(36px,8cqw,112px)/.95 system-ui,sans-serif;color:#ffdc84}
#entryMap{font-size:clamp(13px,1.55cqw,25px);font-weight:700}
#entryHero{font-size:clamp(10px,.95cqw,16px);letter-spacing:.15em;color:#e2d7b6}
#battleEntry:not([hidden])~#notice,#battleEntry:not([hidden])~#thorfinnQuote{visibility:hidden}
@media(max-width:650px){
  .rosterCards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.homeLinks #duelBtn{color:#ffdf9c;border-color:#e5bb6a70;background:#7d5b311f}
.storyChapters{grid-template-columns:repeat(3,minmax(0,1fr))}
.storyChapters .chapterCard:nth-child(3){background:#e3eef1}
.vitals .bar.focus{height:clamp(10px,1.05cqw,16px);background:#122933;border:1px solid #a8eff0a0}
.vitals .bar.focus i{background:linear-gradient(90deg,#2395b7,#a1fff5);box-shadow:0 0 10px #7bf5f8a0}
.vitals #focusText{font-size:clamp(11px,.97cqw,16px);font-weight:800;color:#bafff9;text-shadow:0 1px 4px #091720}
.vitals .smallrow{align-items:center;gap:.4em}
.vitals #hptext{font-size:clamp(9px,.76cqw,13px)}
.chapter span,.chapter small{font-size:clamp(10px,.78cqw,14px)}
.battleActions .skill small,.battleActions .shoot small{font-size:clamp(10px,.91cqw,14px)}
#notice{font-size:clamp(13px,1.36cqw,23px)}
#raigoBtn{position:absolute;right:3%;bottom:calc(4.5% + 9.1cqw + 12px);z-index:2;
  border:1px solid #c8f4ff;background:linear-gradient(120deg,#343e8e,#18374e);border-radius:10px;padding:7px 12px;
  color:#e6fbff;font-size:clamp(12px,1cqw,17px);min-height:35px}
#raigoBtn kbd{background:#101c32;border:1px solid #b4e6ff;border-radius:4px;padding:1px 5px}
#raigoBtn b{color:#ffde8c;margin-left:.45em}
#raigoBtn:disabled{opacity:.72}
@media(max-width:620px) and (orientation:portrait){
  #raigoBtn{bottom:calc(max(25px,env(safe-area-inset-bottom)) + 97px);right:10px;min-height:39px}
  #hud #raigoBtn{pointer-events:auto}
  .vitals .smallrow{flex-wrap:wrap}
  .battleActions .skill small,.battleActions .shoot small{font-size:9px}
}
@media (max-width:620px) and (orientation:portrait){
  .storyChapters{grid-template-columns:1fr}
}
#fireBtn,#dashBtn,#swingBtn,#rageBtn{touch-action:none}

@media (pointer:coarse){
  #joystick{display:block;width:clamp(74px,13cqw,126px);height:clamp(74px,13cqw,126px);
    background:radial-gradient(circle,#30455845,#172635b8);border:2px solid #f2d09e8c;box-shadow:inset 0 0 24px #081c2b8c,0 5px 14px #08141c76}
  #joystick i{background:#f0d59abe;border-color:#fff0c7;box-shadow:0 3px 7px #15222f80}
  #joystick span{bottom:-17px;font-size:10px;color:#f5e9d0}
  .bottomleft{bottom:max(24px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left))}
  .battleActions{right:max(14px,env(safe-area-inset-right));bottom:max(19px,env(safe-area-inset-bottom));gap:clamp(5px,1cqw,14px)}
  .battleActions .skill,.battleActions .rage,.battleActions .swing,.battleActions .shoot{
    width:clamp(54px,9.4cqw,92px);height:clamp(54px,9.4cqw,92px)
  }
  .battleActions .skill kbd,.battleActions .shoot kbd{font-size:clamp(13px,1.55cqw,20px)}
  .battleActions .skill b,.battleActions .shoot b{font-size:clamp(11px,1.25cqw,17px)}
  .battleActions .skill small,.battleActions .shoot small{font-size:clamp(8px,.86cqw,12px)}
  .topactions>button{min-width:36px;min-height:36px;font-size:12px}
  .topactions #musicBtn{font-size:9px}
}

@media (max-width:620px) and (orientation:portrait){
  body{display:block}
  #app{width:100%;height:100svh;aspect-ratio:auto;
    background:radial-gradient(ellipse at 48% 48%,#294758 0%,#162938 47%,#111c2b 84%)}
  #world{position:absolute;top:47%;left:0;width:100%;height:auto;aspect-ratio:16/9;
    transform:translateY(-50%);border-block:1px solid #c2b18255;
    box-shadow:0 15px 46px #091320b5}
  #hud{position:absolute;inset:0;pointer-events:none}
  #hud button,#hud #joystick{pointer-events:auto}
  .portrait{left:max(12px,env(safe-area-inset-left));top:max(16px,env(safe-area-inset-top));width:36px;height:36px;font-size:17px}
  .vitals{top:max(15px,env(safe-area-inset-top));left:55px;width:calc(100% - 220px);min-width:105px}
  .vitals>b{font-size:12px}
  .vitals small{font-size:9px}
  .vitals .smallrow{font-size:8px}
  .vitals .bar{height:5px}
  .topactions{top:max(12px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));gap:5px}
  .topactions>button{min-width:34px;min-height:38px;font-size:12px}
  .topactions .energy{font-size:11px;min-width:43px;padding:3px 5px}
  .topactions .energy small{font-size:8px}
  .chapter{top:68px;left:12%;width:76%;padding:5px 0}
  .chapter span{font-size:10px}
  .chapter b{font-size:16px}
  .chapter small{font-size:10px}
  #battleEntry{top:34%;padding:6px 8px 10px}
  #notice{top:25%;left:7%;width:86%;padding:6px 2px}
  #thorfinnQuote{top:29%;padding:5px 18px 8px}
  #fieldStatus{top:27%;font-size:10px}
  #combo{top:64%}
  #joystick{display:block;width:clamp(68px,22vw,100px);height:clamp(68px,22vw,100px);
    background:#24384bd9;border:2px solid #e8cb9f8a;box-shadow:0 4px 18px #07131d99}
  #joystick i{background:#e8cc91ad}
  #joystick span,.keyhint{display:none}
  .bottomleft{bottom:max(29px,calc(env(safe-area-inset-bottom) + 15px));left:12px;gap:0}
  .battleActions{bottom:max(25px,calc(env(safe-area-inset-bottom) + 12px));right:10px;gap:4px}
  .battleActions .skill,.battleActions .rage,.battleActions .swing,.battleActions .shoot{
    width:clamp(48px,13.45vw,64px);height:clamp(54px,14.9vw,68px);
    border-radius:15px;padding:3px 2px
  }
  .battleActions .skill kbd,.battleActions .shoot kbd{font-size:13px}
  .battleActions .skill b,.battleActions .shoot b{font-size:10px}
  .battleActions .skill small,.battleActions .shoot small{font-size:8px}
  .battleActions .auto{min-height:34px;font-size:10px;padding:4px 8px}
  .home{padding:max(13px,env(safe-area-inset-top)) 17px 10px;
    background:linear-gradient(180deg,#111e2de8 0%,#142630b5 35%,#1e30283b 54%,#101d2cf7 77%)}
  .home .brand{font-size:19px}.home .brand small,.home .build{font-size:8px}
  .home .iconbtn{width:37px;height:37px}
  .homecopy{left:5%;top:13%;width:90%}
  .homecopy .eyebrow,.heroMeta{font-size:10px}
  .homecopy h1{font-size:clamp(34px,10vw,53px)}
  .homecopy h1 span{font-size:10px}
  .homecopy .intro{font-size:13px;margin:11px 0}
  .homecopy .primary,.homecopy .subtle{font-size:13px;min-height:42px;padding:6px 12px}
  .homeLinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,340px);gap:5px;margin-top:12px}
  .homeLinks button{font-size:11px;min-height:39px;text-align:left;padding:5px 7px;background:#182c37db}
  .home .heroTag{right:12px;bottom:48px}.home .heroTag b{font-size:16px}
  .home .heroTag span,.home .heroTag small,.home footer{font-size:9px}
  #modal{padding:12px;place-items:center}
  #modal .panel,#modal .panel.wide{width:100%;max-height:min(88svh,780px);padding:16px;border-radius:12px;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
  #modal .panel h2{font-size:23px}
  #modal .panel .eyebrow,#modal .quizsource{font-size:10px!important}
  #modal .panel p,#modal .panel .statbox,#modal .studyGroup{font-size:12px}
  #modal .panel .answers{gap:7px}
  #modal .panel .answers button{min-height:50px;font-size:14px;padding:6px 8px;overflow-wrap:anywhere}
  #modal .panel .answers em{font-size:12px;margin-right:7px}
  #modal .panel .primary,#modal .panel .secondary{font-size:13px;min-height:42px;padding:6px 10px}
  #modal .quizActions #confirmAnswer,#modal .quizActions #nextQuestion{min-height:49px;font-size:15px}
  #modal .question .word{font-size:26px}
  #modal .question small,#modal .feedback{font-size:12px}
  #modal .chapterCard{padding:7px}
  #modal .chapterCard canvas{height:100px}
  #modal .chapterCard h3{font-size:15px}
  #modal .chapterCard p,#modal .chapterCard strong{font-size:11px}
}

@media (max-width:620px) and (orientation:portrait) and (max-height:690px){
  .homecopy{top:10%}
  .home .heroTag{display:none}
  .homeLinks button{min-height:35px}
}

.battleActions .skill.comboReady{box-shadow:0 0 0 2px #c6fbff,0 0 20px #78daff}
@media (min-width:850px) and (min-aspect-ratio:1/1){
  .rosterCards{grid-template-columns:repeat(5,minmax(0,1fr))}
}
#boundField{position:absolute;z-index:4;right:3%;bottom:calc(14% + 64px);display:flex;gap:5px}
#boundField[hidden]{display:none}
#boundField button{padding:6px 8px;color:#ffe4ee;background:#382740;border:1px solid #ed9fac;border-radius:7px;font-weight:700;touch-action:none}
#boundField button:disabled{opacity:.55}
@media(max-width:660px) and (orientation:portrait){#boundField{bottom:calc(9% + 55px);right:2%}#boundField button{font-size:11px}}
.wr-key-settings{width:min(580px,calc(100% - 24px));max-height:90svh;padding:20px;border:1px solid #9ba9a2;border-radius:14px;background:#182a35;color:#f4ebd4}
.wr-key-settings::backdrop{background:#08121bdc}
.wr-key-settings h2{margin:0 0 8px}
.wr-key-settings p{margin:8px 0 14px;font-size:14px;line-height:1.5}
.wr-key-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:7px}
.wr-key-settings button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;padding:7px 10px;border:1px solid #657e81;border-radius:6px;background:#263d48}
.wr-key-settings button[aria-pressed=true],.wr-key-settings [data-done]{background:#ecd08b;color:#252423}
.wr-key-settings kbd{white-space:nowrap}
.wr-key-settings footer{display:flex;justify-content:flex-end;gap:8px}
.wr-key-status{min-height:1.5em;color:#f2d894}

.accountForm {display:grid;gap:10px;margin:14px 0;}
.accountForm label {display:grid;gap:5px;}
.accountForm input {font:inherit;padding:10px 12px;border:1px solid #7e9195;border-radius:8px;background:#1b2935;color:#fff4db;min-width:0;}
#allTrialBtn,#updateBtn {border-color:#c9a761;}