:root{--game-font:"BSRK Serif","Songti TC","Noto Serif TC","PMingLiU",serif}
@font-face{font-family:"BSRK Serif";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/serif-400.woff") format("woff")}
@font-face{font-family:"BSRK Serif";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/serif-700.woff") format("woff")}
@font-face{font-family:"BSRK Serif";font-style:normal;font-weight:900;font-display:swap;src:url("assets/fonts/serif-900.woff") format("woff")}
:root{color-scheme:dark;--ink:#13131a;--gold:#edc58b;--muted:#a99f91;--line:#73604b;--cream:#f6e8d2}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101017;color:var(--cream);font-family:var(--game-font)}body{background:radial-gradient(ellipse at 50% 45%,#38302a 0,#1a1920 48%,#101017 80%)}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #ffe5a7;outline-offset:4px}button{min-height:46px;border:1px solid var(--line);background:#27232a;border-radius:3px}button:hover{filter:brightness(1.15)}button:active{transform:translateY(1px)}[hidden]{display:none!important}#shell{display:flex;align-items:center;justify-content:center;height:100%;gap:clamp(25px,5vw,95px)}#game{position:relative;width:min(100vw,calc(100dvh * .5625));height:100dvh;max-height:960px;max-width:540px;overflow:hidden;background:#211f29;box-shadow:0 0 0 1px #685242,0 20px 90px #0009;isolation:isolate}#world{width:100%;height:100%;display:block;touch-action:none;image-rendering:pixelated}#overlay{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:stretch;overflow:auto;overscroll-behavior:contain}#overlay:empty{pointer-events:none}.panel{flex-shrink:0;min-height:100%;display:flex;flex-direction:column;padding: max(28px,env(safe-area-inset-top)) 28px max(44px,calc(env(safe-area-inset-bottom) + 30px));background:linear-gradient(#17151bef,#17151bdb);justify-content:center}.title-panel{padding-top:max(22px,env(safe-area-inset-top));background:linear-gradient(180deg,#17151b 0%,#17151b 30%,#17151b00 47%,#17151bc9 68%,#17151b 86%);justify-content:flex-start;text-align:center;position:relative}.eyebrow{color:var(--gold);letter-spacing:.23em;font-size:10px;font-weight:700}.title-panel .eyebrow{margin-top:7px}.title-panel h1{font-family:var(--game-font);font-size:clamp(35px,10vw,48px);font-weight:900;line-height:1.22;letter-spacing:.08em;margin:20px -12px 12px;text-shadow:0 3px #473c30;color:#f9dfae}.title-panel h1 span{display:block;font-size:1.07em}.divider{display:flex;align-items:center;gap:12px;justify-content:center;color:#c69862;font-size:12px}.divider:before,.divider:after{content:"";height:1px;width:34px;background:#80603e}.title-art{position:absolute;top:29%;left:0;width:100%;height:auto;aspect-ratio:1.95;z-index:-1;background-image:linear-gradient(0deg,#17151b,transparent 40%,transparent 70%,#17151b),url('assets/world-reference.jpeg');background-size:100% 100%,220% auto;background-position:center,3% 0;background-repeat:no-repeat;image-rendering:pixelated;opacity:.9}.hero-emblem{height:125px;flex:1;min-height:60px;position:relative}.hero-emblem canvas{width:126px;height:154px;image-rendering:pixelated;position:absolute;bottom:0;left:50%;transform:translateX(-50%);filter:drop-shadow(0 5px 16px #f6b66844)}.title-bottom{position:relative}.record{font-size:11px;color:var(--muted);letter-spacing:.1em;margin:10px 0 17px}.record strong{color:var(--gold);font-size:18px;margin-left:10px;font-variant-numeric:tabular-nums}.primary{width:100%;background:linear-gradient(#f2cf95,#ce9d61);border:1px solid #ffe2b1;box-shadow:inset 0 0 0 3px #5b3e332e,0 4px 0 #5a4034;color:#302018;min-height:54px;font-weight:800;letter-spacing:.13em;font-size:17px}.primary .arrow{margin-left:20px}.intro{font-size:12px;line-height:1.9;color:#c3b7a7;margin:19px 0 13px}.youtube{display:inline-flex;gap:8px;align-items:center;justify-content:center;color:#d8c8b2;text-decoration:none;font-size:12px;min-height:40px}.youtube svg{width:23px;height:17px}.credits{font-size:10px;color:#8d8176;margin:7px 0}.panel h2{font-family:var(--game-font);font-size:29px;letter-spacing:.07em;margin:12px 0}.sub{font-size:12px;line-height:1.8;color:#b9ac9c;margin:0 0 23px}.panel .youtube{margin-top:14px}.panel .secondary{width:100%;margin-top:12px;font-size:13px}.pause-panel,.result-panel{text-align:center}.pause-symbol{font-family:var(--game-font);font-size:45px;color:var(--gold)}.result-score{font-size:58px;color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.25}.result-label{font-size:11px;letter-spacing:.18em;color:#a99f91}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#5b4b3c;border:1px solid #5b4b3c;margin:22px 0}.result-grid div{background:#232026;padding:13px 5px}.result-grid small{display:block;color:#a99f91;font-size:11px}.result-grid b{display:block;font-size:20px;margin-top:4px}.cards{display:grid;gap:12px}.skill-card{display:grid;grid-template-columns:48px 1fr 20px;align-items:center;text-align:left;padding:15px 13px;min-height:97px;background:linear-gradient(100deg,#37303a,#26232c);border-color:#79624e}.skill-icon{font-size:25px;color:var(--card-color,#edc58b)}.skill-card b{display:block;font-size:16px;letter-spacing:.02em}.skill-card small{font-size:11px;color:var(--gold);margin-left:7px;font-weight:500}.skill-card p{font-size:12px;line-height:1.65;color:#bdb4b0;margin:5px 0 0}.skill-card .chev{color:#b59362}.level-footer{font-size:11px;text-align:center;color:#988c7f;margin-top:20px}#hud{position:absolute;inset:0;pointer-events:none;z-index:2;padding:max(16px,env(safe-area-inset-top)) 18px 0;background:linear-gradient(#17151bf0,transparent 160px)}.hud-top{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start}.hud-top small{display:block;color:#a99f91;font-size:10px;letter-spacing:.08em;margin-bottom:3px}.clock{text-align:center}.clock b{font-size:29px;font-variant-numeric:tabular-nums;line-height:1.1;color:#f2e0bf}.score{text-align:right}.score b{font-size:23px;color:var(--gold);font-variant-numeric:tabular-nums}#hp{font-size:15px;letter-spacing:1px;color:#eb8c78;white-space:nowrap}#hp .empty{color:#4c3d41}.hud-meta{display:flex;align-items:center;gap:14px;color:#bdaf99;font-size:11px;margin-top:10px}#combo{color:#f3ca7d}#pause{margin-left:auto;pointer-events:auto;min-height:32px;width:34px;font-size:16px;background:#24212b}.xp-track,.energy-track{height:3px;background:#4a3d4266;margin-top:9px;overflow:hidden}.xp-track i,.energy-track i{display:block;height:100%;width:0;background:#b997e0}.energy-track{height:2px;margin-top:4px}.energy-track i{background:#ebba65}#phase{text-align:center;font-size:10px;letter-spacing:.12em;color:#b7a38c;margin-top:12px}#build{position:absolute;left:16px;bottom:45px;display:flex;gap:7px}#build span{background:#211f2be6;border:1px solid #786346;color:var(--gold);padding:4px;font-size:11px}#copyright{position:absolute;bottom:max(10px,env(safe-area-inset-bottom));left:0;width:100%;text-align:center;color:#ac9e8c;font-size:9px;z-index:6;pointer-events:none;text-shadow:0 1px 4px #000;background:#17151b60}#toast{pointer-events:none;position:absolute;z-index:3;top:25%;left:0;width:100%;text-align:center;color:#ffe0a1;font-size:16px;letter-spacing:.08em;text-shadow:0 2px 7px #000;transition:opacity .2s;opacity:0}.desktop-note,.desktop-side{width:180px;color:#b8a48e}.brand{color:#e1c8a7;font-size:26px;font-weight:800;letter-spacing:.2em}.brand span{display:block;font-size:8px;letter-spacing:.4em;margin-top:6px}.desktop-note p,.desktop-side p{font-family:var(--game-font);font-size:27px;line-height:1.8;letter-spacing:.1em;margin:50px 0 22px}.desktop-note small,.desktop-side small{font-size:10px;letter-spacing:.14em;color:#827669}.desktop-side{align-self:center}.desktop-side>span{font-size:8px;letter-spacing:.19em}.side-line{width:45px;height:1px;background:#8b6842;margin-top:22px}.desktop-side p{margin-top:25px;font-size:22px}@media(max-width:850px){.desktop-note,.desktop-side{display:none}}@media(max-width:550px){#game{width:100vw;max-width:none;max-height:none;box-shadow:none}}@media(max-height:720px){.title-panel h1{margin-top:10px;font-size:35px}.panel{padding-left:22px;padding-right:22px}.intro{margin:12px 0 6px;font-size:11px}.record{margin:8px 0 12px}.hero-emblem canvas{width:90px;height:110px}.title-panel .credits{margin:2px 0}.skill-card{min-height:81px;padding:12px}.result-score{font-size:44px}.result-grid{margin:14px 0}.title-panel .youtube{margin-top:0}}@media(max-height:480px){#overlay .panel{min-height:640px}#game{width:calc(100dvh * .5625)}}

@media(max-height:720px){.result-panel{justify-content:flex-start;padding-top:24px}.result-panel .sub{margin-bottom:14px}.result-grid div{padding:10px 5px}.result-panel h2{margin:9px 0}}

/* Red ball-top arcade stick; original lower-center touch footprint retained. */
#shield-stick{position:absolute;z-index:3;left:50%;bottom:max(10%,calc(env(safe-area-inset-bottom) + 38px));transform:translateX(-50%);width:116px;height:116px;border-radius:50%;border:2px solid #f4f0e8;background:radial-gradient(ellipse at 45% 30%,#fffefa 0%,#e7e5e1 52%,#b6b6bd 78%,#f6f1eb 79% 86%,#bc343b 87% 92%,#eee9e2 93%);box-shadow:0 5px 0 #8f8e94,0 9px 15px #0007,inset 0 0 0 4px #fff9;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;outline-offset:6px;--stick-x:0px;--stick-y:0px;--stick-angle:0rad;--stick-length:13px}
#shield-stick::before{content:'';position:absolute;width:43px;height:32px;border-radius:50%;left:calc(50% - 21.5px);top:calc(50% - 8px);background:radial-gradient(ellipse,#302a31 0 45%,#77747d 48% 61%,#bab7bb 64% 73%,#eeece9 76%);box-shadow:0 1px 1px #fff}
#shield-stick::after{content:'';position:absolute;inset:10px;border:1px solid #ffffff80;border-radius:50%;pointer-events:none}
#shield-stick.active{cursor:grabbing;box-shadow:0 5px 0 #8f8e94,0 9px 15px #0007,0 0 0 3px #db55582a}
#shield-stick:focus-visible{outline:2px solid #f0d6a3}
.stick-axis{position:absolute;pointer-events:none;left:50%;top:50%;transform:translate(-50%,-50%);background:#b5404640}
.axis-h{width:88px;height:1px}.axis-v{width:1px;height:88px}
#stick-stem{position:absolute;left:calc(50% - 5px);top:calc(50% + 7px);width:10px;height:var(--stick-length);background:linear-gradient(90deg,#77757c,#fffdf7 45%,#bdb9bf 70%,#6b6870);border:1px solid #89858c;border-radius:5px;transform-origin:50% 0;transform:rotate(var(--stick-angle));pointer-events:none}
#stick-thumb{position:absolute;z-index:1;left:calc(50% - 24px);top:calc(50% - 30px);width:48px;height:48px;border:1px solid #8f1823;border-radius:50%;background:radial-gradient(circle at 31% 24%,#ffd7d3 0%,#ff8f88 8%,#f54a4f 21%,#df2338 44%,#af122a 73%,#6b1125 100%);box-shadow:inset -4px -6px 8px #6e0c284d,inset 2px 2px 3px #ffcbc36e,3px 8px 8px #34152155;pointer-events:none;will-change:transform;transform:translate3d(var(--stick-x),var(--stick-y),0)}
#stick-thumb::before{content:'';position:absolute;left:10px;top:8px;width:13px;height:7px;border-radius:50%;background:#fff8;transform:rotate(-30deg)}
#shield-stick:not(.active) #stick-thumb,#shield-stick:not(.active) #stick-stem{transition:transform .12s ease-out,height .12s ease-out}

#recovery-hud{display:flex;gap:10px;align-items:center;margin-top:7px;color:#a8c9ae;font-size:10px;line-height:16px;font-variant-numeric:tabular-nums}
#recovery-label{white-space:nowrap}.recovery-track{height:3px;flex:1;min-width:25px;background:#42604a44;overflow:hidden}.recovery-track i{display:block;height:100%;width:0;background:#9ce5b4}

.heal-summary{font-size:11px;color:#a8c9ae;margin:0 0 6px}
#recovery-hud{font-size:11px}
@media(max-height:720px){.result-panel .record{margin:6px 0 12px}.result-panel .youtube{margin-top:6px;min-height:32px}.result-panel .credits{margin:4px 0 0}.result-panel .result-grid{margin:10px 0}.result-panel .primary{min-height:48px}.result-panel .secondary{min-height:40px;margin-top:8px}}
/* Pixel stone / iron arcade control, matching the arena palette. */
#shield-stick{border-radius:0;border:4px solid #aa8c78;background:#37303b;box-shadow:inset 0 0 0 4px #645361,0 5px 0 #17151c;clip-path:polygon(16% 0,84% 0,84% 6%,94% 6%,94% 16%,100% 16%,100% 84%,94% 84%,94% 94%,84% 94%,84% 100%,16% 100%,16% 94%,6% 94%,6% 84%,0 84%,0 16%,6% 16%,6% 6%,16% 6%)}
#shield-stick::before{background:#221e2b;border:4px solid #756070;border-radius:0;box-shadow:inset 3px 3px #181620}
#shield-stick.active{box-shadow:inset 0 0 0 4px #d1af83,0 5px 0 #17151c}
.stick-axis{background:#ad8b6945}.axis-h{height:2px}.axis-v{width:2px}
#stick-stem{border-radius:0;background:#aaa4ae;border:2px solid #555160;box-shadow:inset 2px 0 #ded0b8}
#stick-thumb{border-radius:0;background:#ac4851;border:0;box-shadow:inset 6px 6px #d87870,inset -6px -8px #692c41;clip-path:polygon(25% 0,75% 0,75% 8%,92% 8%,92% 25%,100% 25%,100% 75%,92% 75%,92% 92%,75% 92%,75% 100%,25% 100%,25% 92%,8% 92%,8% 75%,0 75%,0 25%,8% 25%,8% 8%,25% 8%)}
#stick-thumb::before{left:10px;top:8px;width:12px;height:6px;border-radius:0;background:#f1c3a2;transform:none}
#shield-stick:not(.active) #stick-thumb,#shield-stick:not(.active) #stick-stem{transition:transform .07s ease-out,height .07s ease-out}
.brand-mark{position:relative;width:132px;height:27px;overflow:hidden;margin:0 auto 14px;flex-shrink:0;mix-blend-mode:screen}
.brand-mark img{position:absolute;width:148px;max-width:none;height:auto;left:-10px;top:-24px;filter:grayscale(1) invert(1) contrast(8)}
.title-panel h1{margin-top:10px}.pause-panel h2{margin-bottom:28px}
.result-panel{justify-content:flex-start;padding-top:max(24px,env(safe-area-inset-top))}.result-panel h2{font-size:25px;margin:4px 0 14px}.result-panel .brand-mark{width:110px;height:22px;margin-bottom:10px}.result-panel .brand-mark img{width:123px;left:-8px;top:-20px}.result-grid{margin:14px 0}.result-grid div{padding:9px 5px}.result-build{text-align:left;margin:0 0 12px}.result-build h3{font-size:13px;color:var(--gold);margin:0 0 10px;letter-spacing:.1em}.build-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.build-item{display:flex;align-items:center;gap:6px;padding:9px 7px;background:#29232f;border:1px solid #594a50}.build-item>span{font-size:17px}.build-item b{font-size:11px;font-weight:600;white-space:nowrap}.build-item small{font-size:10px;color:var(--gold);margin-left:auto}.build-empty{font-size:12px;color:var(--muted);grid-column:1/-1;margin:0;padding:12px;background:#29232f}#build{flex-wrap:wrap;max-width:calc(100% - 32px)}
/* Reserve a footer lane so scrolling results never cover the buttons. */
#overlay:has(.result-panel),#overlay:has(.level-panel){bottom:max(32px,calc(env(safe-area-inset-bottom) + 24px))}
.result-panel .result-grid{margin:10px 0}.result-panel .build-item{padding:6px}.result-panel .result-score{font-size:48px}.result-panel .result-build{margin-bottom:6px}

/* The arena and thumb control occupy separate screen regions. */
#game{--control-height:calc(clamp(164px,22dvh,190px) + env(safe-area-inset-bottom))}
#game.combat-layout #world{height:calc(100% - var(--control-height))}
#game.combat-layout::after{content:'';position:absolute;z-index:1;left:0;right:0;bottom:0;height:var(--control-height);background:#211d28;border-top:3px solid #796150;box-shadow:inset 0 4px #322936;pointer-events:none}
#game.combat-layout #hud{bottom:var(--control-height)}
#game.combat-layout #build{bottom:12px}
#game.combat-layout #shield-stick{bottom:calc(env(safe-area-inset-bottom) + 30px)}
/* A single opaque cover scene keeps previous battles off the home screen. */
#game.title-mode #world{visibility:hidden}
.brand-mark,.result-panel .brand-mark{width:112px;height:auto;aspect-ratio:1288/232;mix-blend-mode:normal;overflow:visible;margin:0 auto 18px}
.brand-mark img,.result-panel .brand-mark img{display:block;position:static;width:100%;height:100%;max-width:100%;filter:none}
.title-panel{background:#17151b;isolation:isolate;padding: max(28px,env(safe-area-inset-top)) 28px max(44px,calc(env(safe-area-inset-bottom) + 30px));gap:0}
.cover-heading{flex-shrink:0;position:relative;z-index:1;text-align:center}
.title-panel h1{font-size:42px;line-height:1.18;letter-spacing:.1em;margin:0 0 12px;text-shadow:0 2px #594637}
.title-panel h1 span{font-size:.8em;letter-spacing:.25em;margin-top:4px}
.cover-scene{position:relative;flex:1;min-height:210px;margin:0 -28px;overflow:hidden}
.cover-scene .title-art{inset:0;top:0;height:100%;width:100%;aspect-ratio:auto;z-index:0;opacity:1;background-image:linear-gradient(180deg,#17151b 0%,#17151b00 24%,#17151b00 65%,#17151b 100%),url('assets/world-reference.jpeg');background-size:100% 100%,220% auto;background-position:center,3% 45%;background-repeat:no-repeat}
.cover-scene .hero-emblem{position:absolute;inset:0;height:auto;min-height:0;z-index:1}
.cover-scene .hero-emblem canvas{bottom:12%;width:126px;height:154px;filter:drop-shadow(0 6px 8px #120f17)}
.title-bottom{flex-shrink:0;background:#17151b;padding-top:4px}
.title-bottom .record{margin:0 0 16px;font-size:11px;letter-spacing:.12em}
.title-bottom .primary{min-height:56px}.title-bottom .youtube{margin-top:6px}
@media(max-height:720px){.title-panel{padding-top:max(20px,env(safe-area-inset-top));padding-left:22px;padding-right:22px}.title-panel h1{font-size:35px;margin-bottom:6px}.title-panel .brand-mark{width:96px;margin-bottom:14px}.cover-scene{margin:0 -22px;min-height:170px}.cover-scene .hero-emblem canvas{width:100px;height:122px;bottom:9%}.title-bottom .record{margin-bottom:12px}}
.cover-scene .title-art{background-position:center,3% 0}
.cover-scene .title-art{top:50%;bottom:auto;height:auto;aspect-ratio:1.95;transform:translateY(-50%);background-position:center,3% 0;background-image:linear-gradient(180deg,#17151b 0%,transparent 18%,transparent 70%,#17151b 100%),url('assets/world-reference.jpeg')}
.cover-scene .hero-emblem canvas{bottom:calc(50% - 90px)}
@media(max-height:720px){.cover-scene .hero-emblem canvas{bottom:calc(50% - 82px)}}
/* Dedicated top status panel, arena, and lower controls. */
#game{--status-height:calc(126px + env(safe-area-inset-top))}
#game.combat-layout #world{position:absolute;top:var(--status-height);height:calc(100% - var(--status-height) - var(--control-height))}
#game.combat-layout #hud{inset:0 0 auto;height:var(--status-height);padding:calc(10px + env(safe-area-inset-top)) 16px 8px;background:#211d28;border-bottom:3px solid #796150;box-shadow:inset 0 -4px #322936}
.hud-top{grid-template-columns:1fr 1fr;align-items:center}.clock{text-align:left}.clock b{font-size:27px}.score b{font-size:24px}.hud-top small{font-size:9px;margin-bottom:0}.hud-meta{margin-top:5px;min-height:25px;font-size:10px}#pause{min-height:25px;height:25px;width:30px;font-size:14px}.xp-track{margin-top:5px}.energy-track{margin-top:3px}#recovery-hud{margin-top:4px;font-size:10px;line-height:14px}
#game.combat-layout #build{bottom:calc(var(--control-height) + 10px);z-index:2;pointer-events:none}#game.title-mode #build{display:none}
#dock-status{position:absolute;inset:auto 0 calc(env(safe-area-inset-bottom) + 30px);height:116px;z-index:3;pointer-events:none;display:flex;justify-content:space-between;align-items:center;padding:0 10px}
.dock-health,.dock-potions{width:calc(50% - 66px);text-align:center}.dock-health>small,.dock-potions>small{display:block;color:#ac9b8d;font-size:11px;letter-spacing:.1em;margin-bottom:8px}
.dock-health #hp{font-size:16px;letter-spacing:0;white-space:normal;line-height:1.5;overflow-wrap:anywhere}
.potion-row{display:flex;justify-content:center;gap:2px}.potion{pointer-events:auto;touch-action:manipulation;flex:1;min-width:0;max-width:36px;height:48px;min-height:48px;padding:4px 3px;border:0;background:transparent;border-radius:0}.potion svg{width:100%;max-width:27px;height:38px;display:block;image-rendering:pixelated}.potion:disabled{cursor:default;filter:none;opacity:.8}.potion:active{transform:translateY(2px)}
@media(max-height:600px){#game{--status-height:calc(116px + env(safe-area-inset-top))}#game.combat-layout #hud{padding-top:calc(5px + env(safe-area-inset-top))}}
/* Health stays beside the clock; the large left control consumes stock. */
.hud-top{grid-template-columns:1fr 1.3fr 1fr;gap:6px}.hud-health{text-align:center}.hud-health #hp{font-size:17px;letter-spacing:1px;line-height:30px;white-space:nowrap}
#heal-button{pointer-events:auto;touch-action:manipulation;width:86px;max-width:100%;height:86px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin:auto;border:3px solid #ad8c78;border-radius:0;background:#593344;box-shadow:inset 0 0 0 3px #784857,0 4px #17151c;color:#f0d7bb}
#heal-button .heal-cross{font-size:22px;line-height:24px;color:#efbfa0}#heal-button b{font-size:14px;letter-spacing:.1em}#heal-button small{font-size:10px;color:#dbb1a7}#heal-button:disabled{background:#302833;box-shadow:inset 0 0 0 3px #443540,0 4px #17151c;opacity:.65;cursor:default;filter:none}#heal-button:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 0 0 3px #784857,0 1px #17151c}.potion{pointer-events:none}
@media(max-width:370px){.hud-health #hp{font-size:15px;letter-spacing:0}.hud-top{grid-template-columns:1fr 1.25fr 1fr}.clock b{font-size:25px}}

/* Dungeon skill panels: stepped stone frames, engraved pixel insignia. */
.level-panel{background:#1b1821f5;padding-left:22px;padding-right:22px}
.level-panel h2{color:#f1d7ad;text-shadow:2px 2px #58404b;margin-bottom:24px;text-align:center}
.cards{gap:14px}.skill-card{position:relative;border:2px solid #aa8c78;border-radius:0;background:#302934;box-shadow:inset 0 0 0 3px #51404e,inset 0 -7px #241e2a,0 4px #100f18;grid-template-columns:50px minmax(0,1fr) 10px;gap:10px;padding:17px 13px;min-height:108px}
.skill-card:before,.skill-card:after{content:'';position:absolute;width:4px;height:4px;background:#e4c5a0;box-shadow:1px 1px #6f5061;top:5px;left:5px}.skill-card:after{top:auto;left:auto;right:5px;bottom:5px}
.skill-card:hover,.skill-card:focus-visible{background:#3d303c;border-color:#f1cea0;filter:none}.skill-card:active{transform:translateY(3px);box-shadow:inset 0 0 0 3px #70525b,0 1px #100f18}
.pixel-skill{display:block;width:100%;height:100%;image-rendering:pixelated;flex-shrink:0}.skill-icon{display:block;width:46px;height:46px;flex-shrink:0}.skill-card b{font-size:15px;color:#f4dfbf}.skill-card small{display:block;margin:4px 0 0;color:var(--card-color);font-size:10px;letter-spacing:.08em}.skill-card p{color:#c8b9b2;font-size:12px;margin-top:7px}.skill-card .chev{font-size:20px;color:#d6ad7d}
.build-item{border:2px solid #79606a;box-shadow:inset 0 0 0 2px #372d3b;background:#29232f;gap:5px}.build-item .skill-icon{width:28px;height:28px}.build-item b{white-space:normal;line-height:1.4}.build-item small{white-space:nowrap}
#build{gap:5px}#build .build-badge{display:flex;align-items:center;gap:3px;background:#211c28;border:1px solid #947565;box-shadow:inset 0 0 0 1px #413343;padding:2px 4px 2px 2px}#build .pixel-skill{width:23px;height:23px}#build b{font-size:10px;color:#f2d4a6}
@media(max-width:370px){.level-panel{padding-left:16px;padding-right:16px}.skill-card{gap:7px;grid-template-columns:40px minmax(0,1fr) 8px;padding:13px 10px}.skill-card .skill-icon{width:38px;height:38px}.skill-card b{font-size:14px}.build-item .skill-icon{width:24px;height:24px}}

.title-bottom .youtube{margin-top:20px}

button,input,select,textarea{font-family:var(--game-font)}
.hud-top small,.hud-meta,.skill-card p,.build-item b{font-weight:700}
/* Focused title composition: brand, living dungeon, one primary action. */
#game.title-mode #overlay{bottom:0}
.title-panel{display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;width:100%;grid-template-rows:auto minmax(220px,1fr) auto;height:100%;min-height:100%;padding:max(24px,calc(env(safe-area-inset-top) + 12px)) 24px max(48px,calc(env(safe-area-inset-bottom) + 38px));background:#17151b;gap:0}
.cover-heading{padding:10px 0 0}.title-panel .brand-mark{width:100px;margin:0 auto 22px;opacity:.9}
.title-panel h1{font-size:clamp(36px,5.7dvh,54px);line-height:1.2;letter-spacing:.08em;margin:0;color:#f7ddb0;text-shadow:0 3px #594434}
.title-panel h1 span{font-size:.72em;letter-spacing:.3em;margin-top:8px;padding-left:.3em}
.cover-scene{min-height:220px;margin:0 -24px;isolation:isolate;flex:none}
.cover-scene .title-art{left:-20%;width:140%;top:50%;bottom:auto;height:auto;aspect-ratio:1.95;transform:translateY(-50%);background-size:100% 100%,220% auto;background-position:center,3% 0;background-image:linear-gradient(180deg,#17151b 0%,transparent 23%,transparent 63%,#17151b 100%),url('assets/world-reference.jpeg');opacity:1}
.cover-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#17151b55,transparent 23%,transparent 77%,#17151b55);pointer-events:none;z-index:0}
.cover-scene .hero-emblem canvas{width:166px;height:203px;bottom:calc(50% - 108px);filter:drop-shadow(0 5px 5px #100e16)}
.title-bottom{padding:0;background:transparent;z-index:2}
.title-bottom .record{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 18px;color:#bbac98;font-size:12px;letter-spacing:.12em}
.title-bottom .record:before,.title-bottom .record:after{content:'';height:1px;width:28px;background:#795f45}
.title-bottom .record strong{font-size:24px;letter-spacing:.035em;margin:0;color:#f0cb93}
.title-bottom .primary{display:flex;align-items:center;justify-content:center;position:relative;min-height:62px;font-size:20px;border:2px solid #f6d9a8;border-radius:1px;background:linear-gradient(#f0cd94,#c89559);box-shadow:inset 0 0 0 3px #b3865255,0 5px #654938;letter-spacing:.15em;touch-action:manipulation}
.title-bottom .primary .arrow{position:absolute;right:20px;font-size:25px;line-height:1;margin:0}
.title-bottom .primary:active{transform:translateY(3px);box-shadow:inset 0 0 0 3px #b3865255,0 2px #654938}
.title-bottom .youtube{margin-top:20px;font-size:11px;min-height:42px;opacity:.8}
#game.title-mode #copyright{font-size:9px;color:#988979;background:transparent}
@media(max-height:740px){.title-panel{padding-top:max(16px,calc(env(safe-area-inset-top) + 6px));grid-template-rows:auto minmax(180px,1fr) auto}.cover-heading{padding-top:0}.title-panel .brand-mark{width:86px;margin-bottom:14px}.title-panel h1{font-size:36px}.title-panel h1 span{margin-top:5px}.cover-scene{min-height:180px}.cover-scene .hero-emblem canvas{width:140px;height:171px;bottom:calc(50% - 95px)}.title-bottom .record{margin-bottom:12px}.title-bottom .primary{min-height:56px;font-size:18px}.title-bottom .youtube{margin-top:12px}}
@media(max-width:350px){.title-panel{padding-left:20px;padding-right:20px}.title-panel h1{font-size:33px}.cover-scene{margin:0 -20px}.title-bottom .record{gap:9px}.title-bottom .primary .arrow{right:14px}}
@media(max-height:540px){.title-panel{height:auto;min-height:580px}#overlay .title-panel{min-height:580px}.cover-scene{min-height:180px}}

/* Keep the game inside the visible mobile WebView; menus retain vertical scrolling. */
html,body{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none}
#shell{position:absolute;top:var(--viewport-top,0px);left:0;width:100%;height:var(--viewport-height,100dvh);overflow:hidden}
#game{height:100%;width:min(100vw,calc(var(--viewport-height,100dvh) * .5625));--control-height:calc(clamp(164px,calc(var(--vh,1dvh) * 22),190px) + env(safe-area-inset-bottom));user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;touch-action:manipulation}
#overlay{touch-action:pan-y;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
#shield-stick,#heal-button,#pause{touch-action:none;-webkit-touch-callout:none}
#game img{pointer-events:none;-webkit-user-drag:none}
@media(max-width:550px){#game{width:100%;max-height:none}}

/* Dungeon victory reward; only shown after surviving the full challenge. */
.victory-reward{flex-shrink:0;text-align:center;margin-bottom:7px}
.result-panel .victory-reward h2{font-size:clamp(19px,5.5vw,25px);color:#f4d598;letter-spacing:.06em;margin:0 0 6px;line-height:1.4}
.key-display{position:relative;width:144px;height:76px;margin:0 auto;background:radial-gradient(ellipse,#c18a3e24,transparent 68%)}
.dungeon-key{position:relative;z-index:1;width:120px;height:72px;image-rendering:pixelated;filter:drop-shadow(0 3px 0 #100d16);animation:key-float 2.6s ease-in-out infinite}
.key-shadow{position:absolute;left:41px;bottom:1px;width:62px;height:7px;border-radius:50%;background:#09080c88;animation:key-shadow 2.6s ease-in-out infinite}
@keyframes key-float{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-7px) rotate(-3deg)}}
@keyframes key-shadow{0%,100%{transform:scaleX(1);opacity:.6}50%{transform:scaleX(.78);opacity:.35}}
@media(prefers-reduced-motion:reduce){.dungeon-key,.key-shadow{animation:none}}