@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Outfit:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--bg:#0c1324;--panel:#121e34;--cyan:#71e5db;--gold:#ffd66e;--white:#f4f7ff}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(ellipse at 50% 0%,#1a2b49 0%,var(--bg) 58%);color:var(--white);font-family:Outfit,system-ui,sans-serif}
body{display:grid;place-items:center;padding:18px}.shell{width:min(1100px,100%)}.topbar,.footer{display:flex;align-items:center;justify-content:space-between;padding:12px 4px}.brand{display:flex;align-items:center;gap:10px;color:#f4f7ff;text-decoration:none;font-size:13px;font-weight:800;letter-spacing:2px}.brand b{color:var(--cyan)}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid #35516b;border-radius:10px;color:var(--gold);font-size:19px}.stats{display:flex;gap:10px}.stat{background:#17243b;border:1px solid #2a3c56;border-radius:10px;padding:7px 12px;font-family:'DM Mono',monospace;font-size:13px}.stat i{font-style:normal;color:var(--gold);margin-right:5px}.stat:nth-child(2) i{color:#ff8196}
.game-wrap{position:relative;overflow:hidden;border:1px solid #314760;border-radius:22px;background:#172a3c;box-shadow:0 28px 80px #0008;aspect-ratio:16/9;min-height:380px}canvas{width:100%;height:100%;display:block;touch-action:none}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:linear-gradient(90deg,#0b1528d9,#0b15287a 55%,#0b1528b0)}.hidden{display:none!important}.eyebrow{font-family:'DM Mono',monospace;color:var(--cyan);font-size:11px;letter-spacing:3px;margin-bottom:13px}.screen h1{font-size:clamp(42px,8vw,88px);line-height:.82;letter-spacing:-3px;margin:0 0 18px;font-weight:900;text-shadow:0 5px 30px #06101d}.screen h1 em{font-style:normal;color:var(--gold)}.screen h2{font-size:clamp(34px,6vw,58px);margin:0 0 10px}.screen p{color:#d0d9e9;max-width:390px;margin:0 0 25px;font-size:clamp(14px,2vw,17px)}.primary{border:0;border-radius:12px;background:linear-gradient(135deg,#ffe18b,#ffbf58);color:#20243a;font:800 13px Outfit,sans-serif;letter-spacing:1px;padding:15px 23px;box-shadow:0 7px 0 #bd7d3a,0 12px 30px #0005;cursor:pointer}.primary span{font-size:18px;margin-left:14px}.primary:active{transform:translateY(3px);box-shadow:0 4px 0 #bd7d3a}.hint{font:10px 'DM Mono',monospace;color:#a9bbce;margin-top:25px;letter-spacing:1px}.hud{position:absolute;left:20px;right:20px;top:18px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;font:11px 'DM Mono',monospace;text-shadow:0 2px 8px #000}.level{background:#0c172bbd;border:1px solid #9ac7d044;border-radius:9px;padding:9px 12px}.level b{color:var(--gold)}.level small{color:#afc0d3}.objective{background:#0c172bbd;border:1px solid #9ac7d044;border-radius:9px;padding:9px 12px;color:var(--gold)}
.footer{font:10px 'DM Mono',monospace;color:#8fa4bc;letter-spacing:1.2px}.mobile-controls{position:absolute;bottom:17px;left:17px;right:17px;display:flex;justify-content:space-between;align-items:end;pointer-events:none}.dpad,.jump{pointer-events:auto}.dpad>button,.dpad div button,.jump{background:#12233ccc;border:1px solid #a6d7e566;color:#fff;border-radius:12px;width:42px;height:42px;font-size:16px;backdrop-filter:blur(8px);touch-action:none}.dpad>button{display:block;margin:auto auto 4px}.dpad div{display:flex;gap:4px}.jump{width:66px;height:58px;border-radius:18px;color:var(--gold);font:700 10px 'DM Mono',monospace}
@media(max-width:650px){body{padding:8px}.topbar{padding:7px 3px}.brand{font-size:10px}.game-wrap{aspect-ratio:4/5;min-height:min(540px,calc(125vw - 20px));border-radius:16px}.screen{background:linear-gradient(180deg,#0b1528b0,#0b152833 55%,#0b1528a8)}.screen h1{font-size:48px}.hud{left:10px;right:10px;top:10px}.mobile-controls{bottom:12px;left:12px;right:12px}.footer{font-size:8px}.hint{font-size:9px}}
@media(hover:hover) and (pointer:fine){.mobile-controls{opacity:.5}.mobile-controls:hover{opacity:1}}
.brand-mark{flex:0 0 40px;width:40px;height:40px;border:0;object-fit:contain}
#startScreen{background:radial-gradient(ellipse at 75% 20%,#ef694021,transparent 34%),linear-gradient(180deg,#08070bd9,#0d090df0)}
#startScreen .eyebrow{color:#ff9a68}
#startScreen h1 em{color:#ff8952;text-shadow:0 0 28px #f35e3c66}
.primary{background:linear-gradient(135deg,#ffd47e,#f17b4a);box-shadow:0 7px 0 #a94732,0 12px 30px #0008}
.primary:active{box-shadow:0 4px 0 #a94732}
.stat #lives{color:#ff8196;letter-spacing:2px}
.menu-dragon{position:absolute;z-index:4;top:7%;right:7%;width:clamp(110px,18%,190px);overflow:visible;filter:drop-shadow(0 0 14px #f06b4655);animation:dragon-float 3.5s ease-in-out infinite;pointer-events:none}
.game-wrap.playing .menu-dragon{top:24%}
.brand-dragon{width:42px;height:26px;flex:0 0 auto;overflow:visible;filter:drop-shadow(0 0 5px #f06b4655)}
.dragon-wing,.dragon-body,.dragon-tail,.dragon-horn{fill:#b84d39;stroke:#ffc06d;stroke-width:3;stroke-linejoin:round}
.dragon-body{fill:#d66547}
.dragon-tail,.dragon-horn{fill:none;stroke-width:4;stroke-linecap:round}
.dragon-eye{fill:#ffe08a;filter:drop-shadow(0 0 4px #ff793d)}
#startScreen{z-index:3}
@keyframes dragon-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:650px){.menu-dragon{top:5%;right:5%;width:105px}.brand-dragon{width:32px;height:20px}}
@media(prefers-reduced-motion:reduce){.menu-dragon{animation:none}}
:root{--bg:#09080b;--panel:#1b1114;--cyan:#ff9a68}
html,body{background:radial-gradient(ellipse at 50% 0%,#48201b 0%,#1d1114 32%,var(--bg) 74%)}
.stats .stat{background:#1b1115;border-color:#48282b}
.game-wrap{border-color:#59302a;background:#211319}
.screen{background:linear-gradient(180deg,#100b0eed,#140d0ff2)}
.level,.objective{background:#120c0edb;border-color:#a2563b55}
.dpad>button,.dpad div button,.jump{background:#211419e8;border-color:#ff9b6155}
@media(max-width:650px){.screen{background:linear-gradient(180deg,#100b0ecf,#140d0fe8)}}
.music-toggle{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;padding:0;border:1px solid #a2563b77;border-radius:8px;background:#1b1115;color:#ffbd75;cursor:pointer}
.music-toggle:hover{background:#33201e;color:#ffe1a3}
.music-toggle:focus-visible{outline:2px solid #ffbd75;outline-offset:3px}
.music-toggle svg{width:18px;height:18px}
.music-toggle .sound-off{display:none}
.music-toggle[aria-pressed="true"] .sound-on{display:none}
.music-toggle[aria-pressed="true"] .sound-off{display:block}