@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Unbounded:wght@700;800&display=swap');

:root{font-family:'Chakra Petch',system-ui,sans-serif;color:#eee8d9;background:#100e1c;font-synthesis:none}
.item-status{min-height:29px;padding:6px 13px;border-top:1px solid #65463c;background:#19131f;color:#a99aaa;font-size:11px;text-align:center;line-height:16px}.item-status.has-effect{color:#ffe0a0}.loot-guide{display:grid;gap:7px;margin-top:20px;max-width:285px}.loot-guide>div{display:flex;align-items:center;gap:10px;color:#e7d6ca;font-size:12px}.loot-guide b{display:grid;place-items:center;width:24px;height:24px;border:1px solid currentColor;border-radius:5px;background:#ffffff0b;font-size:15px;flex:none}.loot-guide small{display:block;color:#897d87;font-size:10px}.loot-potion{color:#ff777b}.loot-stone{color:#9a8dff}.loot-wing{color:#74dfff}.loot-shield{color:#ffe3a0}.loot-nova{color:#ffac70}.side-right .chapter-art{height:175px}.side-right .tip-card{margin-top:18px}
.dragon-symbols{position:absolute;width:0;height:0;overflow:hidden}.select-label{font:700 10px 'Chakra Petch',sans-serif;color:#e8c095;letter-spacing:1px;margin:-12px 0 10px}.dragon-select{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-width:382px;margin:0 auto 23px}.dragon-option{appearance:none;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 3px 10px;border:1px solid #806c70;background:#211923d9;border-radius:7px;color:#e48152;cursor:pointer;font-family:'Chakra Petch',sans-serif;transition:transform .15s,border-color .15s,background .15s}.dragon-option:nth-child(2){color:#85d9f5}.dragon-option:nth-child(3){color:#c5a4f7}.dragon-option svg{width:35px;height:35px;filter:drop-shadow(0 0 8px currentColor)}.dragon-option strong{font-size:13px;color:#f9e9d4}.dragon-option small{font-size:9px;color:#b7a9ad;white-space:nowrap}.dragon-option:hover,.dragon-option:focus-visible{transform:translateY(-3px);border-color:currentColor;outline:none}.dragon-option.selected{border-color:currentColor;background:#5c3b3aab;box-shadow:inset 0 0 0 1px currentColor,0 0 18px #f5965140}.dragon-option:nth-child(2).selected{background:#2c4a59a8;box-shadow:inset 0 0 0 1px currentColor,0 0 18px #83d8ff44}.dragon-option:nth-child(3).selected{background:#483458a8;box-shadow:inset 0 0 0 1px currentColor,0 0 18px #c5a4f744}.dragon-option:active{transform:translateY(0)}@media(max-width:760px){.crest{margin-bottom:13px}.overlay-inner h2{margin:10px 0 8px}.overlay-inner p{margin-bottom:20px}.dragon-select{margin-bottom:17px}.dragon-option{padding:6px 2px}.dragon-option svg{width:29px;height:29px}.dragon-option strong{font-size:11px}.dragon-option small{font-size:8px}.overlay-hint{margin-top:17px}}@media(max-width:350px){.dragon-option small{font-size:7px}}
.stat-center .stat-label{white-space:nowrap}.stat-center .stat-label span{color:#e7b77c;margin-left:4px}.side-right[data-realm="hell"] .moon,.side-right[data-realm="dragon"] .moon{background:#ed714b;box-shadow:0 0 0 15px #e05c3a33,0 0 65px 35px #df4b3f77}.side-right[data-realm="heaven"] .moon{background:#fff4c9;box-shadow:0 0 0 15px #e9f6ff55,0 0 65px 35px #d3efff88}.side-right[data-realm="snow"] .moon{background:#c7efff;box-shadow:0 0 0 15px #d8f6ff33,0 0 65px 35px #b2dfff88}.side-right[data-realm="wizard"] .moon{background:#c894ee;box-shadow:0 0 0 15px #c894ee33,0 0 65px 35px #a063d588}.side-right[data-realm="heaven"] .chapter-art{background:linear-gradient(#6a8da855,#cbe2e666)}.side-right[data-realm="snow"] .chapter-art{background:linear-gradient(#4b748e55,#c1e2eb66)}.side-right[data-realm="wizard"] .chapter-art{background:linear-gradient(#4a2b6a55,#8a55ac66)}@media(max-width:760px){.stat-center .stat-label span{display:block;font-size:7px;letter-spacing:0;margin:1px 0 0}}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 18%,#29223b 0%,#15111f 45%,#0d0b16 100%);overflow-x:hidden}.shell{max-width:1440px;margin:auto;padding:0 32px 32px}.topbar{height:80px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff18}.brand{font-family:Unbounded,system-ui,sans-serif;font-size:19px;font-weight:800;letter-spacing:-1px;display:flex;align-items:center;gap:11px}.brand-mark{font-size:28px;color:#f5a74c;text-shadow:0 0 20px #f4893888}.brand-accent{color:#f7a34f}.topbar-right{display:flex;align-items:center;gap:24px}.eyebrow,.side-kicker,.card-label,.chapter-label,.tip-card span,.footer-mark,.bottom-label,.stat-label,.overlay-eyebrow,.overlay-hint{font-family:Unbounded,system-ui,sans-serif;font-size:9px;letter-spacing:2px;color:#b7a9a6}.icon-button,.pause-button{border:1px solid #8e765d55;background:#241c2b;color:#ebc795;cursor:pointer;border-radius:8px}.icon-button{width:36px;height:36px;font-size:22px}.icon-button.muted{opacity:.45}.layout{display:grid;grid-template-columns:minmax(220px,1fr) minmax(360px,480px) minmax(220px,1fr);gap:36px;align-items:center;padding-top:28px}.side{align-self:stretch;position:relative;display:flex;flex-direction:column;justify-content:center}.side-left{padding:20px 0 70px}.side-kicker{color:#d99655;margin-bottom:21px}.side h1,.side h3{font-size:clamp(32px,3.1vw,50px);line-height:1.25;margin:0 0 21px;font-weight:700;letter-spacing:-2px}.side h1 em,.side h3 em{font-style:normal;color:#f5a756;text-shadow:0 0 35px #d65e3355}.intro,.side-right>p{font-size:14px;line-height:1.9;color:#aa9fa6;max-width:300px;margin:0}.ornament{color:#b98c61;letter-spacing:8px;margin:31px 0}.ornament span{color:#725b65}.controls-card{padding:22px;border:1px solid #8f725344;background:linear-gradient(145deg,#30253391,#1b1624bb);border-radius:14px;max-width:320px;box-shadow:0 12px 40px #07050d44}.card-label{color:#e6ba80;margin-bottom:19px}.control-row{display:flex;align-items:center;gap:7px;margin:12px 0;color:#bcb2b6;font-size:12px}.control-row>span:first-child{width:70px}.control-row .or{font-size:10px;color:#786c73}kbd{border:1px solid #7f6c63;background:#221c28;border-radius:4px;padding:5px 6px;color:#f6dec0;font-size:10px;white-space:nowrap}.touch-note{font-size:11px;color:#8c818d;line-height:1.5;border-top:1px solid #ffffff16;padding-top:15px;margin-top:15px}.game-frame{border:1px solid #9d704c;background:#19131c;box-shadow:0 0 0 5px #17101d,0 0 0 6px #57433a,0 22px 70px #050409b8,0 0 65px #e66b2622;min-width:0}.game-top,.game-bottom{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 19px;background:linear-gradient(#302332,#211824);border-bottom:1px solid #715641}.game-bottom{height:58px;border-bottom:0;border-top:1px solid #715641}.stat{display:flex;flex-direction:column;gap:4px;min-width:110px}.stat-center{text-align:center;min-width:auto}.stat-right{text-align:right}.stat-label,.bottom-label{color:#9f857c;font-size:8px}.stat strong{font:700 20px/1 'Chakra Petch',monospace;color:#fff0cd;letter-spacing:1px}.stat-center strong{color:#f5a456}.canvas-wrap{position:relative;width:100%;aspect-ratio:2/3;background:#28202b;overflow:hidden;touch-action:none}canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.screen-overlay{position:absolute;inset:0;background:linear-gradient(180deg,#100c19b8,#140c18ab 44%,#100b18d8);display:grid;place-items:center;text-align:center;transition:opacity .25s}.screen-overlay.hidden{opacity:0;pointer-events:none}.overlay-inner{width:100%;padding:20px}.crest{font-size:31px;color:#a78661;letter-spacing:14px;margin-bottom:23px;text-shadow:0 3px 12px #000}.crest span{color:#ffb452}.overlay-eyebrow{color:#e8bd7f;font-size:9px}.overlay-inner h2{font:800 clamp(31px,7.5vw,44px)/1.15 Unbounded,system-ui,sans-serif;letter-spacing:-3px;color:#fff0d1;text-shadow:0 4px 0 #583822,0 8px 23px #000;margin:17px 0 12px}.overlay-inner h2 span{color:#ff9c43}.overlay-inner p{font-size:15px;color:#e6d4c6;margin:0 0 31px}.start-button{border:1px solid #ffcc75;background:linear-gradient(#efaa5d,#ce7636);padding:15px 24px;color:#261726;font:700 14px 'Chakra Petch',sans-serif;border-radius:6px;cursor:pointer;box-shadow:0 5px 0 #753b2e,0 8px 28px #f37f4666;transition:transform .15s,box-shadow .15s}.start-button:hover{transform:translateY(-2px);box-shadow:0 7px 0 #753b2e,0 10px 32px #f37f4688}.start-button span{margin-left:15px}.overlay-hint{margin-top:22px;color:#c4a895}.pause-badge{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);background:#180f23dd;border:1px solid #d79a59;padding:20px 30px;white-space:nowrap;text-align:center;font-weight:700;color:#ffd396;font-size:20px}.pause-badge small{display:block;color:#b9a5a2;font-size:11px;margin-top:7px}.life-display{display:flex;flex-direction:column;gap:4px}.life-display strong{color:#ff746d;font-size:18px;letter-spacing:4px;line-height:1}.power-display{display:flex;flex-direction:column;gap:6px;align-items:center}.power-track{width:120px;height:9px;border:1px solid #9b6b46;background:#1b121d;transform:skew(-14deg);overflow:hidden}.power-track>div{height:100%;width:25%;background:linear-gradient(90deg,#d75937,#ffc56b);box-shadow:0 0 12px #f69442}.pause-button{width:31px;height:31px;font-size:17px}.side-right{padding:32px 0 20px;justify-content:flex-start}.chapter-label{color:#e6ae69;white-space:nowrap}.chapter-label span{padding:0 5px;color:#7c6664}.chapter-art{height:210px;position:relative;overflow:hidden;margin:18px 0 15px;background:linear-gradient(180deg,transparent 10%,#35253d66 100%);border-bottom:1px solid #785c4c55}.moon{position:absolute;width:92px;height:92px;border-radius:50%;background:#daae78;box-shadow:0 0 0 15px #d08d4933,0 0 60px 35px #d7784855;top:21px;left:50%;transform:translateX(-50%)}.castle-silhouette{position:absolute;bottom:0;left:10%;width:80%;height:90px;background:#17121c;clip-path:polygon(0 35%,9% 35%,9% 0,17% 0,17% 37%,28% 37%,28% 14%,35% 14%,35% 36%,43% 36%,43% 0,50% 0,50% 36%,59% 36%,59% 13%,66% 13%,66% 35%,78% 35%,78% 0,86% 0,86% 34%,100% 34%,100% 100%,0 100%)}.castle-silhouette:after{content:'';position:absolute;width:25px;height:40px;background:#b26b4b;left:50%;bottom:0;transform:translateX(-50%);border-radius:15px 15px 0 0;box-shadow:0 0 14px #ef8a51}.side-right h3{font-size:32px;margin-bottom:14px}.tip-card{border-left:2px solid #dc935d;padding:12px 17px;margin-top:27px;background:#ffffff08;max-width:290px}.tip-card span{color:#ddaa76}.tip-card p{font-size:12px;color:#a99ca5;line-height:1.6;margin:9px 0 0}.footer-mark{margin-top:auto;padding-top:30px;color:#665b69;font-size:8px}@media(max-width:1100px){.layout{grid-template-columns:minmax(180px,1fr) minmax(360px,480px);gap:28px}.side-right{display:none}}@media(max-width:760px){.shell{padding:0 10px 18px}.topbar{height:56px;padding:0 6px}.brand{font-size:15px}.brand-mark{font-size:22px}.eyebrow{display:none}.layout{display:block;padding-top:12px}.side-left{display:none}.game-frame{max-width:480px;margin:auto}.game-top{height:49px}.game-bottom{height:48px}.stat strong{font-size:17px}.canvas-wrap{max-height:calc(100svh - 175px);aspect-ratio:2/3}.canvas-wrap canvas{height:100%;object-fit:fill}.stat{min-width:70px}.power-track{width:95px}.overlay-inner h2{font-size:35px}}@media(max-width:380px){.overlay-inner h2{font-size:30px}.stat strong{font-size:15px}}

/* Keep the complete arcade cabinet within the available viewport height. */
@media (min-width:761px){
  .shell{--game-width:clamp(190px,calc(66.6667dvh - 160px),480px);padding-bottom:12px}
  .topbar{height:64px}
  .layout{grid-template-columns:minmax(0,1fr) var(--game-width) minmax(0,1fr);gap:clamp(16px,2vw,32px);padding-top:12px}
  .game-frame{width:var(--game-width);justify-self:center}
  .side{align-self:center}
}
@media (min-width:761px) and (max-width:1100px){
  .layout{grid-template-columns:minmax(0,1fr) var(--game-width)}
}
@media (min-width:761px) and (max-height:960px){
  .side-right{padding:0}
  .side-right .chapter-art{height:105px;margin:10px 0}
  .side-right h3{font-size:27px;line-height:1.15;margin-bottom:8px}
  .side-right>p{font-size:12px;line-height:1.5}
  .side-right .loot-guide{margin-top:12px;gap:4px}
  .side-right .loot-guide>div{font-size:11px}
  .side-right .loot-guide b{width:20px;height:20px;font-size:13px}
  .side-right .tip-card{display:none}
  .side-right .footer-mark{margin-top:12px;padding-top:0}
}
@media (max-width:760px){
  .game-frame{width:min(480px,calc(100vw - 20px),calc(66.6667dvh - 142px));max-width:100%;margin:auto}
  .canvas-wrap{max-height:none;height:auto;aspect-ratio:2/3}
  .canvas-wrap canvas{width:100%;height:100%}
}
@media (min-width:761px) and (max-height:700px){
  .shell{--game-width:clamp(190px,calc(66.6667dvh - 140px),480px);padding-bottom:10px}
  .topbar{height:56px}
  .layout{grid-template-columns:var(--game-width);justify-content:center;padding-top:10px}
  .side-left,.side-right{display:none}
  .game-top{height:49px}
  .game-bottom{height:48px}
}
.game-frame{container-type:inline-size}
@container (max-width:320px){
  .game-top,.game-bottom{padding-left:8px;padding-right:8px}
  .stat{min-width:0}
  .stat strong{font-size:13px;letter-spacing:0}
  .stat-label,.bottom-label{font-size:6px;letter-spacing:1px}
  .stat-center .stat-label span{display:none}
  .life-display strong{font-size:13px;letter-spacing:1px;white-space:nowrap}
  .power-track{width:65px}
  .overlay-inner{padding:8px}
  .crest{font-size:18px;letter-spacing:6px;margin-bottom:5px}
  .overlay-eyebrow{font-size:7px;letter-spacing:1px}
  .overlay-inner h2{font-size:clamp(22px,10cqw,30px);letter-spacing:-2px;margin:5px 0}
  .overlay-inner p{font-size:10px;line-height:1.3;margin:0 0 8px;overflow-wrap:anywhere}
  .select-label{font-size:9px;margin:0 0 5px}
  .dragon-select{gap:3px;margin-bottom:8px}
  .dragon-option{padding:3px 1px;gap:1px}
  .dragon-option svg{width:22px;height:22px}
  .dragon-option strong{font-size:10px}
  .dragon-option small{font-size:7px;white-space:normal;line-height:1.1}
  .start-button{padding:8px 10px;font-size:11px}
  .start-button span{margin-left:5px}
  .overlay-hint{font-size:7px;margin-top:8px}
  .item-status{font-size:9px;padding-left:4px;padding-right:4px}
}
.stat-center{gap:1px}.round-label{font:700 8px/1 'Chakra Petch',sans-serif;color:#e9ad73;white-space:nowrap}
.screen-overlay{grid-template-columns:minmax(0,1fr)}
.overlay-inner{min-width:0;max-width:100%;overflow:hidden}
.overlay-inner h2{font-size:clamp(20px,10cqw,44px);letter-spacing:-.06em;white-space:nowrap}
.dragon-select{width:100%;max-width:100%;min-width:0}
.dragon-option{min-width:0;overflow:hidden}
.dragon-option small{white-space:normal;line-height:1.15;overflow-wrap:anywhere}
.game-top{padding-left:clamp(8px,3cqw,19px);padding-right:clamp(8px,3cqw,19px)}
.stat{min-width:0;flex:1}
.stat-center{flex:0 0 auto;min-width:50px}
.stat strong{font-size:clamp(13px,5cqw,20px)}