:root{color-scheme:dark;--gold:#dfbd78;--ink:#11100f;--pink:#ff77be}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080909;color:#f1e8d5;font-family:Georgia,serif}button{-webkit-tap-highlight-color:transparent;cursor:pointer;font:inherit;color:inherit;touch-action:manipulation}button,canvas,footer{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button:focus-visible{outline:2px solid var(--pink);outline-offset:3px}[hidden]{display:none!important}#app{height:100dvh;max-width:650px;margin:auto;background:var(--ink);box-shadow:0 0 80px #000}.screen{height:100%;position:relative}#title{display:flex;flex-direction:column;justify-content:space-between;text-align:center;padding:calc(env(safe-area-inset-top) + 30px) 25px calc(env(safe-area-inset-bottom) + 20px);background:linear-gradient(#06090cd9 0%,transparent 40%,#0c0b0ae8 76%),url('assets/title.png') center 43%/cover}.eyebrow{font:9px/1.5 system-ui;letter-spacing:2.3px;color:var(--gold)}h1{font-size:clamp(35px,8.4vw,54px);font-weight:400;line-height:1.04;letter-spacing:3px;margin:15px 0;color:#f4ddb1;text-shadow:0 2px 12px #000}h1 small{font-size:12px;display:block;letter-spacing:4px;margin-bottom:10px}.rule{height:1px;width:80px;background:var(--gold);margin:20px auto}.menu{background:linear-gradient(transparent,#100f0c85);max-width:420px;margin:0 auto;width:100%}.menu h2{font-size:19px;font-weight:400;margin:0 0 9px}.menu p{font:12px/1.6 system-ui;color:#cec5b5;margin:8px 0}.menu .instructions{font-size:10px;color:#a99e90}.primary{display:block;width:100%;min-height:48px;background:linear-gradient(110deg,#e4c88f,#aa8242);border:1px solid #efd49d;color:#22190d;font:600 11px system-ui;letter-spacing:2px;margin:9px 0;border-radius:3px}#continue{background:#181713d9;color:var(--gold);border-color:#81704c}.install{display:block;font:9px system-ui;color:#a99e90;margin-top:12px}#loading:empty{display:none}#game{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto}header{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 12px) 15px 12px;border-bottom:1px solid #655432;background:#131311}header strong{display:block;font-size:14px;letter-spacing:.5px}.vitals{margin-left:auto;text-align:right}.vitals span{font:10px system-ui;color:var(--gold)}.utility{pointer-events:auto;min-width:44px;height:44px;font:25px system-ui;border:1px solid #494237;background:#20201b;border-radius:50%}#viewport{position:relative;overflow:hidden;min-height:0;background:#111}canvas{display:block;width:100%;height:100%;touch-action:none}#notice{position:absolute;bottom:17px;left:15px;right:15px;text-align:center;font:11px system-ui;color:#e6d7ba;pointer-events:none;text-shadow:0 2px 4px #000}#encounter{position:absolute;top:14px;width:100%;text-align:center;font:10px system-ui;letter-spacing:3px;color:#f8a687;pointer-events:none}footer{position:relative;display:flex;align-items:center;justify-content:space-between;padding:17px 25px calc(env(safe-area-inset-bottom) + 26px);background:radial-gradient(ellipse at top,#2a2922,#11120f);border-top:1px solid #665438;min-height:166px;touch-action:none}#joystick{width:114px;height:114px;border:1px solid #6c5d3e;border-radius:50%;background:radial-gradient(#35352c,#181a16);position:relative;touch-action:none;box-shadow:inset 0 0 18px #0008}#nub{position:absolute;left:32px;top:32px;width:48px;height:48px;border-radius:50%;background:radial-gradient(at 35% 25%,#77715c,#34372d);border:1px solid #9c8d67;box-shadow:0 4px 12px #0008;pointer-events:none}.crosshair:before,.crosshair:after{content:'';position:absolute;background:#86775044;left:15px;right:15px;top:56px;height:1px}.crosshair:after{transform:rotate(90deg)}.attacks{display:flex;gap:12px;align-items:center}.attacks button{width:72px;height:72px;border-radius:50%;border:1px solid #aa8b57;background:radial-gradient(at top,#4a4030,#201c16);box-shadow:0 4px 10px #0008}.attacks b{font:600 11px system-ui;letter-spacing:1px}.attacks small{display:block;font:7px system-ui;letter-spacing:1px;margin-top:5px;color:#b4a58c}.attacks #laser{border-color:#bc618d;background:radial-gradient(at top,#62354c,#281a23)}.attacks button:active{filter:brightness(1.5)}.controlHint{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 8px);left:0;right:0;text-align:center;font:7px system-ui;letter-spacing:2px;color:#7e796b}#transition{position:absolute;inset:0;background:#080a0ddb;display:flex;flex-direction:column;justify-content:center;padding:35px;text-align:center;backdrop-filter:blur(5px)}#transition h2{font-weight:400;font-size:32px;color:var(--gold)}#transition p{font:13px/1.7 system-ui;color:#c7bfac}@media(max-height:700px){#title{padding-top:20px}.menu p{font-size:10px}.menu .instructions{font-size:9px}h1{font-size:34px}.rule{margin:10px auto}footer{padding-top:10px;min-height:145px}#joystick{width:100px;height:100px}#nub{top:25px;left:25px}.attacks button{width:66px;height:66px}}@media(min-width:651px){#app{border-left:1px solid #443c2e;border-right:1px solid #443c2e}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* Royal court: jewel-toned surfaces, gold inlay and clear touch targets. */
:root{--gold:#f1d397;--pink:#ffa5d0;--ink:#211025}
#app{box-shadow:0 0 90px #3f133955}#title{padding-left:20px;padding-right:20px;background-image:linear-gradient(#210e27c9 0%,transparent 38%,#250f28bd 73%,#180c20 100%),url('assets/title.png')}
.masthead{position:relative;padding:8px 0 13px;border-top:1px solid #e2b66588}h1{color:#ffe7b1;text-shadow:0 2px 3px #311124,0 0 24px #a66a4155}h1 small{color:#ffbddc}.royal-caption{font:7px/1.6 system-ui;letter-spacing:2px;color:#efc9ce}.rule{background:linear-gradient(90deg,transparent,#f1ce88,transparent);width:170px;margin:12px auto}
.menu{padding:18px 18px 14px;border:1px solid #ccaa698c;border-radius:18px 18px 8px 8px;background:linear-gradient(140deg,#421b3ce8,#1e1028f2);box-shadow:inset 0 0 0 4px #e8bf6310,0 12px 35px #0007;backdrop-filter:blur(8px)}.menu-kicker{display:block;color:#ffb9d4;font:8px system-ui;letter-spacing:3px;margin-bottom:10px}.menu h2{color:#ffe5ac;font-size:20px}.menu p{color:#e9d3dc}.menu .instructions{color:#c1a6b7}.primary{border-radius:24px;border-color:#ffdea1;background:linear-gradient(135deg,#fff0ba,#d8ad59 48%,#f4d487);box-shadow:inset 0 2px 1px #fff7,0 3px 12px #0005;color:#3d1836;min-height:47px}#continue{background:linear-gradient(120deg,#713854,#382044);color:#ffdfac;border-color:#d8ac6c}.install{font-size:8px;color:#c7aebd}
header{background:linear-gradient(115deg,#421934,#21172f);border-bottom:2px solid #cba465;box-shadow:inset 0 -4px #130b1d;gap:8px}header strong{color:#fff0c8}.utility{background:radial-gradient(at 35% 20%,#75455e,#301d3c);border-color:#d4aa6e;box-shadow:inset 0 0 0 3px #1d1324,0 2px 6px #0005;color:#ffe3a4}
footer{background:radial-gradient(ellipse at 50% 0,#6a2d4d,#301b3e 60%,#20152e);border-top:2px solid #e6bf7b;box-shadow:inset 0 4px #190f2455;padding-left:22px;padding-right:22px}#joystick{background:radial-gradient(#5c3557,#261b34);border:2px solid #d0aa71;box-shadow:0 0 0 4px #23172d,0 0 0 5px #9f774d88,inset 0 0 22px #0008}#nub{background:radial-gradient(at 33% 20%,#e8c68c,#aa668d 48%,#57334e);border:2px solid #f1ce91;box-shadow:inset 0 2px 4px #fff4,0 5px 10px #110918aa}.attacks{gap:14px}.attacks button{width:76px;height:76px;border:2px solid #f1cf8f;background:radial-gradient(at 35% 15%,#be8192,#733852 50%,#3e253e);box-shadow:0 0 0 3px #24172e,0 0 0 4px #bd955f77,inset 0 2px 5px #fff3,0 7px 10px #0005}.attacks #laser{border-color:#f0bcda;background:radial-gradient(at 35% 15%,#d68abe,#8a427b 50%,#422542)}.attacks b{font:600 12px/1.4 Georgia,serif;letter-spacing:.5px;color:#fff0cd}.controlHint{font-size:7px;letter-spacing:1.8px;color:#d8b290}#notice:not(:empty){background:#32192be8;border:1px solid #b99b6888;border-radius:12px;padding:10px 12px;color:#ffe7c3;font:italic 12px/1.4 Georgia,serif;box-shadow:0 3px 12px #0007}#transition{background:#24102be8}#transition h2{color:#ffe0a0}
@media(max-height:740px){.royal-caption{display:none}.menu{padding:12px 14px 10px}.menu-kicker{margin-bottom:6px}.menu h2{font-size:17px}.menu p{margin:5px 0}.masthead{padding:4px 0}.primary{min-height:43px;margin:7px 0}}@media(max-width:360px){footer{padding-left:17px;padding-right:17px}.attacks{gap:10px}.attacks button{width:65px;height:65px}header{padding-left:10px;padding-right:10px}.utility{min-width:40px;height:40px}}
#transition{padding:18px 24px;overflow-y:auto;justify-content:flex-start;background:radial-gradient(ellipse at top,#57344bdd,#21112bf5);gap:10px}#transition>.eyebrow{margin-top:auto}#transition h2{font-size:26px;margin:0;color:#ffe0a0}#victoryPortrait{display:block;width:min(100%,240px);max-height:35dvh;aspect-ratio:1;object-fit:cover;align-self:center;border:2px solid #e8be77;border-radius:18px;box-shadow:0 0 0 4px #ac825329,0 8px 25px #0007}#victoryCaption{font:italic 17px/1.4 Georgia,serif;color:#ffe8bb;margin:0;text-align:center}#transition p{font-size:11px;margin:0}#transition .primary{flex-shrink:0;margin:0 0 auto;min-height:46px}@media(max-height:740px){#transition{gap:7px;padding:12px 20px}#victoryPortrait{max-height:24dvh;width:auto}#victoryCaption{font-size:14px}#transition h2{font-size:22px}}
#bossBanner{position:absolute;inset:0;z-index:5;background:radial-gradient(ellipse at center,#65334dea,#1d102bf5);display:flex;flex-direction:column;justify-content:center;padding:20px 16px;text-align:center;overflow:auto}#bossBanner h2{color:#ffdb91;letter-spacing:3px;font-size:30px;margin:12px 0}#bossBanner p{font:11px/1.5 system-ui;color:#eacbdd;margin:7px 0}.versus{display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);align-items:center;gap:5px}.versus figure{margin:0;min-width:0}.versus img{width:100%;height:150px;object-fit:contain}.versus strong{color:#ff9fcc;font:italic 24px Georgia}.versus figcaption{font:11px/1.4 Georgia;color:#ffdda7;min-height:32px}#bossPortrait{width:100%;height:150px;background-size:400% 200%;background-position:0 0;background-repeat:no-repeat}#mapToggle{position:absolute;left:12px;top:12px;z-index:3;min-width:48px;min-height:44px;background:#39233de8;border:1px solid #d4b778;border-radius:12px;color:#ffe2ab;font:11px Georgia}.battle-mode .attacks{display:grid;grid-template-columns:65px 65px;gap:9px}.battle-mode #jump{grid-column:1 / 3;justify-self:center;width:62px;height:43px;border-radius:20px;background:linear-gradient(#80619b,#382e50)}.battle-mode .attacks #claw,.battle-mode .attacks #laser{width:65px;height:65px}.battle-mode footer{padding-top:12px;min-height:178px}.battle-mode .controlHint{font-size:6px}@media(max-height:700px){.versus img,#bossPortrait{height:110px}#bossBanner h2{font-size:24px;margin:5px}#bossBanner{padding:10px}.battle-mode footer{min-height:155px;padding-top:8px}.battle-mode .attacks{gap:5px}.battle-mode .attacks #claw,.battle-mode .attacks #laser{height:57px;width:57px}}
#bossBanner{background:radial-gradient(ellipse at center,#65334d,#1d102b)}#bossPortrait{transform:scaleX(-1)}
.vitals #playerLevel,.vitals #xpText{display:block;font-size:9px;line-height:1.4}#xpBar{display:block;width:100px;height:4px;margin:3px 0 0 auto;border:none;border-radius:3px;overflow:hidden;accent-color:#ff97cb}#xpBar::-webkit-progress-bar{background:#24152c}#xpBar::-webkit-progress-value{background:linear-gradient(90deg,#b667c9,#ffd6a0)}
header{display:grid;grid-template-columns:minmax(0,1fr) auto 44px 44px;gap:8px 10px;padding-bottom:12px}.progressionHud{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 12px;border-top:1px solid #b1846655;padding-top:10px}.progressionHud #playerLevel{font:bold 22px/1.2 Georgia,serif;color:#ffe1a2;letter-spacing:1px}.progressionHud #xpText{font:600 15px/1.3 system-ui;color:#ffd2e7;text-align:right;font-variant-numeric:tabular-nums}.progressionHud #xpBar{grid-column:1/-1;width:100%;height:7px;margin:0;box-shadow:0 0 8px #c465aa33}@media(max-width:360px){header{gap:7px}.progressionHud #playerLevel{font-size:20px}.progressionHud #xpText{font-size:13px}}