*{box-sizing:border-box}
:root{--bg:#07111f;--panel:#0b1730;--text:#f4fbff;--muted:#9bb2d7;--cyan:#61e8ff;--gold:#ffd76f;--pink:#ff80d9;--green:#90ff9d;--purple:#b28cff;--border:rgba(255,255,255,.12);--shadow:0 24px 70px rgba(0,0,0,.35)}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;overflow:hidden}
body{background:radial-gradient(1000px 520px at 8% -16%,rgba(97,232,255,.16),transparent 60%),radial-gradient(780px 500px at 100% 0%,rgba(178,140,255,.12),transparent 58%),radial-gradient(780px 420px at 50% 108%,rgba(255,215,111,.08),transparent 60%),#07111f}
button,a{font:inherit}button{color:inherit}
.hh-shell{width:min(1440px,calc(100vw - 14px));height:100dvh;max-height:100dvh;margin:0 auto;padding:8px 0 10px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;overflow:hidden}
.hh-top,.hh-modal,.hh-class-panel,.hh-overlay-panel,.hh-canvas-shell{border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018)),rgba(8,16,35,.84);backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.hh-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:18px}.hh-brand{display:flex;align-items:center;gap:10px;min-width:0}.hh-mark{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--green));color:#07111f;font-weight:1000;box-shadow:0 0 24px rgba(97,232,255,.3)}
.hh-brand p,.hh-kicker{margin:0;color:var(--cyan);font-size:.68rem;font-weight:950;letter-spacing:.13em;text-transform:uppercase}.hh-brand h1{margin:0;font-size:clamp(1.2rem,2.8vw,1.92rem);letter-spacing:-.04em}.hh-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.hh-ghost,.hh-primary{border:0;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-weight:900;transition:transform .12s ease,filter .12s ease;min-height:40px;padding:9px 16px}.hh-ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:var(--text)}.hh-primary{background:linear-gradient(135deg,var(--gold),var(--cyan));color:#06111f;box-shadow:0 14px 34px rgba(97,232,255,.16)}
button:hover:not(:disabled),a:hover{transform:translateY(-1px);filter:brightness(1.05)}
.hh-stage{min-height:0}.hh-canvas-shell{position:relative;min-height:0;height:100%;border-radius:24px;padding:8px;overflow:hidden}#gameCanvas{display:block;width:100%;height:100%;min-height:420px;border-radius:18px;background:#040912;touch-action:none}
.hh-class-overlay,.hh-overlay{position:absolute;inset:8px;display:grid;place-items:center;background:rgba(5,10,20,.58);z-index:6}.hh-overlay.hidden,.hh-class-overlay.hidden{display:none}.hh-class-panel,.hh-overlay-panel{width:min(900px,calc(100% - 28px));border-radius:24px;padding:18px 18px 20px;text-align:center}.hh-class-panel h2,.hh-overlay-panel h2,.hh-modal h2{margin:4px 0 8px;font-size:clamp(1.5rem,3.8vw,2.4rem);letter-spacing:-.04em}.hh-sub{margin:0 0 14px;color:var(--muted)}
.hh-class-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.hh-class-card{border:1px solid rgba(255,255,255,.12);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));padding:14px 10px 12px;display:grid;justify-items:center;gap:8px;cursor:pointer}.hh-class-card canvas{width:92px;height:92px;border-radius:18px;background:radial-gradient(circle at 50% 35%,rgba(97,232,255,.16),rgba(255,255,255,0) 70%);image-rendering:pixelated}.hh-class-card strong{font-size:1.02rem}.hh-class-card span{color:var(--muted);font-size:.9rem}
.hh-overlay-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px}.hh-dialog{border:0;padding:0;background:transparent}.hh-dialog::backdrop{background:rgba(4,8,18,.72);backdrop-filter:blur(4px)}.hh-modal{width:min(900px,calc(100vw - 24px));border-radius:24px;padding:20px 18px}.hh-guide-grid,.hh-upgrade-grid{display:grid;gap:12px}.hh-guide-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin:14px 0}.hh-guide-grid article{border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:14px;background:rgba(255,255,255,.03)}.hh-guide-grid span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;background:linear-gradient(135deg,var(--gold),var(--cyan));color:#07111f;font-weight:1000;margin-bottom:10px}.hh-guide-grid strong{display:block;margin-bottom:6px}.hh-guide-grid p{margin:0;color:var(--muted);line-height:1.45}
.hh-upgrade-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}.hh-upgrade-card{border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));color:var(--text);border-radius:20px;padding:14px;text-align:left;display:grid;gap:8px;cursor:pointer}.hh-upgrade-card:hover{border-color:rgba(97,232,255,.45)}.hh-upgrade-card strong{font-size:1.05rem}.hh-upgrade-card p{margin:0;color:var(--muted);line-height:1.45}.hh-upgrade-tag{display:inline-flex;justify-self:start;padding:5px 10px;border-radius:999px;background:rgba(97,232,255,.14);color:var(--cyan);font-size:.76rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
@media (max-width:980px){.hh-shell{width:min(100vw,calc(100vw - 8px));padding:4px 0 6px;gap:6px}.hh-top{padding:8px 10px}.hh-actions{gap:6px}.hh-ghost,.hh-primary{min-height:38px;padding:8px 13px;font-size:.94rem}.hh-class-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hh-guide-grid,.hh-upgrade-grid{grid-template-columns:1fr}}
@media (max-width:720px){.hh-top{align-items:flex-start;flex-direction:column}.hh-actions{width:100%;justify-content:flex-start}#gameCanvas{min-height:360px}.hh-class-panel,.hh-overlay-panel,.hh-modal{padding:16px 14px}.hh-class-card canvas{width:76px;height:76px}}


/* v9 polish */
.hh-class-card{padding:12px 10px 14px;background:linear-gradient(180deg,rgba(34,30,40,.94),rgba(10,12,18,.98));border-color:rgba(235,190,112,.24);box-shadow:0 16px 30px rgba(0,0,0,.28)}
.hh-class-card canvas{width:104px;height:104px;border-radius:22px;background:radial-gradient(circle at 50% 35%,rgba(97,232,255,.08),rgba(255,255,255,0) 70%),linear-gradient(180deg,rgba(9,12,20,.96),rgba(21,14,27,.96));box-shadow:inset 0 0 0 1px rgba(235,190,112,.16)}
.hh-class-card strong{font-size:1.04rem;color:#fff6e8}
.hh-class-card span{color:#b7c0d4;font-size:.88rem}
.hh-modal,.hh-class-panel,.hh-overlay-panel,.hh-top,.hh-canvas-shell{border-color:rgba(235,190,112,.18)}
.hh-upgrade-card{background:linear-gradient(180deg,rgba(25,24,33,.98),rgba(8,9,14,.98));border-color:rgba(235,190,112,.18)}
.hh-upgrade-card strong{color:#fff6e8}
.hh-upgrade-card p{color:#b7c0d4}

/* v14 top-HUD polish, high-res class cards, and upgrade icons */
.hh-top{position:relative;overflow:hidden;min-height:76px;padding:12px 16px;border-radius:24px;border-color:rgba(255,215,111,.24);background:linear-gradient(180deg,rgba(26,32,52,.96),rgba(7,10,20,.92));box-shadow:0 20px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08)}
.hh-top:before{content:"";position:absolute;inset:-90px -80px auto -80px;height:150px;background:radial-gradient(circle at 24% 44%,rgba(97,232,255,.28),transparent 34%),radial-gradient(circle at 72% 25%,rgba(255,215,111,.22),transparent 38%),linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);opacity:.9;pointer-events:none}
.hh-top:after{content:"";position:absolute;left:18px;right:18px;bottom:7px;height:1px;background:linear-gradient(90deg,transparent,rgba(97,232,255,.55),rgba(255,215,111,.58),rgba(178,140,255,.52),transparent);opacity:.8}
.hh-brand{position:relative;z-index:1;gap:14px}.hh-brand h1{display:flex;align-items:center;gap:9px;color:#fff7df;text-shadow:0 0 18px rgba(97,232,255,.22);line-height:1}.hh-brand p{color:#75efff}.hh-season{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:999px;background:linear-gradient(135deg,rgba(255,215,111,.95),rgba(97,232,255,.9));color:#07111f;font:950 .68rem/1 system-ui;letter-spacing:.08em;box-shadow:0 0 18px rgba(255,215,111,.24)}
.hh-rune-strip{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}.hh-rune-strip span{font-size:.64rem;font-weight:950;letter-spacing:.09em;text-transform:uppercase;color:#dceeff;padding:4px 8px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.055);box-shadow:inset 0 0 12px rgba(97,232,255,.05)}
.hh-mark{position:relative;width:48px;height:48px;border-radius:18px;background:radial-gradient(circle at 30% 20%,#fff6d8,transparent 20%),linear-gradient(135deg,var(--cyan),var(--gold) 52%,var(--purple));clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);box-shadow:0 0 28px rgba(97,232,255,.32),inset 0 0 0 2px rgba(255,255,255,.25)}
.hh-mark span{filter:drop-shadow(0 0 8px rgba(255,255,255,.75));font-size:1.25rem}.hh-actions{position:relative;z-index:1}.hh-actions .hh-ghost{position:relative;overflow:hidden;border-color:rgba(255,215,111,.24);background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 10px 24px rgba(0,0,0,.22)}
.hh-actions .hh-ghost:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(97,232,255,.18),transparent);transform:translateX(-130%);transition:transform .28s ease}.hh-actions .hh-ghost:hover:before{transform:translateX(130%)}.hh-actions .hh-ghost span{position:relative;z-index:1}
.hh-class-panel{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(20,23,40,.97),rgba(7,9,17,.96));border-color:rgba(255,215,111,.22)}.hh-class-panel:before{content:"";position:absolute;inset:-120px -80px auto -80px;height:190px;background:radial-gradient(circle at 50% 0,rgba(178,140,255,.22),transparent 48%),linear-gradient(90deg,transparent,rgba(97,232,255,.12),transparent);pointer-events:none}.hh-class-panel>*{position:relative;z-index:1}
.hh-class-grid{gap:14px}.hh-class-card{position:relative;overflow:hidden;border-color:rgba(255,215,111,.20);background:linear-gradient(180deg,rgba(29,30,44,.97),rgba(8,10,18,.98));box-shadow:0 18px 36px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07)}.hh-class-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(255,215,111,.11),transparent 34%);opacity:.8;pointer-events:none}.hh-class-card:hover{border-color:rgba(97,232,255,.48);box-shadow:0 20px 44px rgba(0,0,0,.42),0 0 28px rgba(97,232,255,.10)}
.hh-class-card canvas{position:relative;z-index:1;width:112px;height:112px;border-radius:26px;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.08),rgba(255,255,255,0) 70%),linear-gradient(180deg,rgba(9,12,20,.96),rgba(21,14,27,.96));box-shadow:inset 0 0 0 1px rgba(255,215,111,.18),0 0 26px rgba(0,0,0,.28);image-rendering:auto}.hh-class-card strong,.hh-class-card span{position:relative;z-index:1}
.hh-level-modal{background:linear-gradient(180deg,rgba(21,24,42,.98),rgba(7,9,16,.98));border-color:rgba(255,215,111,.22)}.hh-upgrade-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.hh-upgrade-card{position:relative;overflow:hidden;grid-template-columns:76px 1fr;grid-template-rows:auto auto 1fr;align-items:center;min-height:150px;border-color:rgba(255,215,111,.18);background:linear-gradient(180deg,rgba(26,29,43,.98),rgba(8,10,18,.98));box-shadow:0 16px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06)}.hh-upgrade-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,rgba(97,232,255,.12),transparent 32%),radial-gradient(circle at 80% 0,rgba(255,215,111,.10),transparent 34%);pointer-events:none}.hh-upgrade-card>*{position:relative;z-index:1}.hh-upgrade-icon{grid-row:1/4;width:70px;height:70px;border-radius:18px;background:rgba(0,0,0,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 0 22px rgba(97,232,255,.08)}.hh-upgrade-tag{grid-column:2}.hh-upgrade-card strong{grid-column:2;color:#fff6e8}.hh-upgrade-card p{grid-column:2;color:#b7c0d4}
@media (max-width:980px){.hh-top{min-height:70px}.hh-rune-strip{display:none}.hh-class-card canvas{width:96px;height:96px}.hh-upgrade-card{grid-template-columns:68px 1fr;min-height:132px}.hh-upgrade-icon{width:62px;height:62px}.hh-upgrade-grid{grid-template-columns:1fr}}
@media (max-width:720px){.hh-top{border-radius:20px}.hh-brand{gap:10px}.hh-mark{width:42px;height:42px}.hh-actions .hh-ghost{min-height:36px;padding:8px 12px}.hh-class-card canvas{width:86px;height:86px}}

/* v16 class-select overhaul, mobile polish, and 7-slot UI support */
@supports not (height:100dvh){.hh-shell{height:100vh;max-height:100vh}}
.hh-shell{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}
.hh-top{isolation:isolate}.hh-top:before{animation:hhSweep 6s ease-in-out infinite alternate}.hh-actions .hh-ghost{letter-spacing:.02em}.hh-actions .hh-ghost:focus-visible,.hh-class-card:focus-visible,.hh-upgrade-card:focus-visible{outline:3px solid rgba(97,232,255,.58);outline-offset:3px}
@keyframes hhSweep{from{transform:translateX(-2%);opacity:.72}to{transform:translateX(2%);opacity:1}}
.hh-class-overlay{overflow:auto;padding:18px;background:radial-gradient(620px 360px at 50% 9%,rgba(97,232,255,.18),transparent 65%),radial-gradient(560px 360px at 15% 88%,rgba(178,140,255,.13),transparent 60%),rgba(3,7,14,.74);backdrop-filter:blur(7px)}
.hh-class-panel{width:min(1120px,calc(100% - 12px));padding:26px 26px 28px;border-radius:30px;background:linear-gradient(180deg,rgba(28,31,50,.98),rgba(7,9,18,.98));box-shadow:0 28px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.hh-class-panel:before{height:260px;background:radial-gradient(circle at 50% 0,rgba(255,215,111,.20),transparent 38%),radial-gradient(circle at 18% 30%,rgba(97,232,255,.18),transparent 34%),radial-gradient(circle at 84% 18%,rgba(178,140,255,.20),transparent 36%),linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent)}
.hh-class-panel:after{content:"";position:absolute;inset:12px;border-radius:24px;border:1px solid rgba(255,215,111,.16);pointer-events:none;box-shadow:inset 0 0 70px rgba(97,232,255,.04)}
.hh-class-titlebar{max-width:760px;margin:0 auto 20px}.hh-class-titlebar .hh-kicker{display:inline-flex;padding:7px 13px;border:1px solid rgba(97,232,255,.25);border-radius:999px;background:rgba(97,232,255,.08);box-shadow:0 0 22px rgba(97,232,255,.08)}
.hh-class-titlebar h2{margin:10px 0 8px;font-size:clamp(2rem,5vw,4.2rem);line-height:.92;letter-spacing:-.07em;text-transform:uppercase}.hh-class-titlebar h2 span{background:linear-gradient(180deg,#fff8dc 0%,#ffd76f 38%,#7fe7ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 16px 38px rgba(0,0,0,.32)}
.hh-class-titlebar .hh-sub{font-size:clamp(.95rem,1.8vw,1.08rem);color:#c0cbe2;line-height:1.5}.hh-class-titlebar .hh-sub strong{color:#fff0a8}
.hh-class-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.hh-class-card{--accent:var(--cyan);--accent-rgb:97,232,255;min-height:324px;padding:16px 13px 17px;border-radius:26px;border-color:rgba(255,215,111,.20);background:linear-gradient(180deg,rgba(35,37,55,.98),rgba(7,9,17,.99));transform:translateZ(0);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.hh-class-card[data-class="ranger"]{--accent:var(--cyan);--accent-rgb:97,232,255}.hh-class-card[data-class="knight"]{--accent:var(--gold);--accent-rgb:255,215,111}.hh-class-card[data-class="binder"]{--accent:var(--purple);--accent-rgb:178,140,255}.hh-class-card[data-class="alchemist"]{--accent:var(--green);--accent-rgb:144,255,157}
.hh-class-card:before{background:radial-gradient(circle at 50% -5%,rgba(var(--accent-rgb),.28),transparent 42%),linear-gradient(180deg,rgba(255,255,255,.055),transparent);opacity:1}.hh-card-glow{position:absolute;inset:10px;border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.07),transparent 44%),radial-gradient(circle at 50% 22%,rgba(var(--accent-rgb),.18),transparent 45%);opacity:.9;pointer-events:none}.hh-class-card:hover{transform:translateY(-5px) scale(1.015);border-color:rgba(var(--accent-rgb),.58);box-shadow:0 26px 58px rgba(0,0,0,.48),0 0 34px rgba(var(--accent-rgb),.16)}
.hh-class-card canvas{width:124px;height:124px;border-radius:28px;border:1px solid rgba(var(--accent-rgb),.32);background:radial-gradient(circle at 50% 38%,rgba(var(--accent-rgb),.12),rgba(255,255,255,0) 70%),linear-gradient(180deg,rgba(11,14,24,.98),rgba(22,14,30,.96));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 34px rgba(var(--accent-rgb),.15);margin-bottom:2px}.hh-class-card em{position:relative;z-index:1;display:inline-flex;padding:5px 10px;border-radius:999px;background:rgba(var(--accent-rgb),.13);border:1px solid rgba(var(--accent-rgb),.32);color:#fff7df;font-style:normal;font-size:.68rem;font-weight:950;letter-spacing:.10em;text-transform:uppercase}.hh-class-card strong{font-size:1.22rem;letter-spacing:-.03em;text-shadow:0 0 20px rgba(var(--accent-rgb),.20)}.hh-class-card span{font-size:.92rem;color:rgba(var(--accent-rgb),.88)}.hh-class-card small{position:relative;z-index:1;color:#aebbd1;line-height:1.38;max-width:210px;margin:0 auto;font-weight:650}
.hh-upgrade-card{transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}.hh-upgrade-card:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(0,0,0,.38),0 0 32px rgba(97,232,255,.10)}.hh-upgrade-tag{box-shadow:inset 0 0 14px rgba(255,255,255,.04)}
@media (max-width:980px){.hh-class-panel{width:min(760px,calc(100% - 8px));padding:22px 18px}.hh-class-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.hh-class-card{min-height:278px}.hh-class-card canvas{width:104px;height:104px}.hh-class-titlebar h2{font-size:clamp(1.8rem,7vw,3.2rem)}}
@media (max-width:720px){.hh-shell{width:100vw;padding-left:4px;padding-right:4px}.hh-top{gap:8px}.hh-brand h1{font-size:1.36rem}.hh-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.hh-actions .hh-ghost{padding:7px 8px;font-size:.82rem;min-height:34px}.hh-class-overlay{inset:6px;padding:12px;place-items:start center}.hh-class-panel{padding:18px 12px;border-radius:24px}.hh-class-grid{gap:10px}.hh-class-card{min-height:248px;padding:12px 8px}.hh-class-card canvas{width:86px;height:86px;border-radius:22px}.hh-class-card strong{font-size:1rem}.hh-class-card span{font-size:.8rem}.hh-class-card small{font-size:.76rem}.hh-class-card em{font-size:.58rem;padding:4px 7px}.hh-class-titlebar{margin-bottom:12px}.hh-class-titlebar h2{letter-spacing:-.06em}.hh-modal{max-height:calc(100dvh - 26px);overflow:auto}.hh-upgrade-card{grid-template-columns:58px 1fr;padding:12px;min-height:118px}.hh-upgrade-icon{width:54px;height:54px}.hh-upgrade-card p{font-size:.9rem}}
@media (max-width:470px){.hh-class-grid{grid-template-columns:1fr}.hh-class-card{min-height:auto;grid-template-columns:84px 1fr;grid-template-rows:auto auto auto;column-gap:10px;text-align:left;justify-items:start}.hh-class-card canvas{grid-row:1/5;width:78px;height:78px}.hh-class-card em,.hh-class-card strong,.hh-class-card span,.hh-class-card small{grid-column:2}.hh-class-card small{max-width:none}.hh-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.hh-top:before{animation:none}.hh-class-card,.hh-upgrade-card,.hh-actions .hh-ghost:before{transition:none}}

/* v16 final polish: 7-slot build, dramatic class select, mobile-safe UI */
html,body{-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
.hh-shell{height:100vh;max-height:100vh;height:100dvh;max-height:100dvh;padding:calc(8px + env(safe-area-inset-top,0px)) 0 calc(10px + env(safe-area-inset-bottom,0px))}
.hh-top,.hh-modal,.hh-class-panel,.hh-overlay-panel,.hh-canvas-shell{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hh-canvas-shell{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),radial-gradient(900px 260px at 50% 0,rgba(97,232,255,.10),transparent 60%),rgba(6,9,19,.92);border-color:rgba(255,215,111,.22);box-shadow:0 26px 80px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.035)}
#gameCanvas{box-shadow:inset 0 0 0 1px rgba(255,215,111,.12),inset 0 0 70px rgba(0,0,0,.55)}
.hh-class-overlay{background:radial-gradient(circle at 50% 12%,rgba(97,232,255,.14),transparent 38%),radial-gradient(circle at 20% 85%,rgba(178,140,255,.12),transparent 34%),rgba(5,7,14,.76)}
.hh-class-panel{width:min(1040px,calc(100% - 24px));padding:24px 24px 26px;border-radius:30px;background:linear-gradient(180deg,rgba(25,28,46,.98),rgba(6,8,16,.98));box-shadow:0 34px 110px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.08)}
.hh-class-panel:before{inset:-180px -120px auto -120px;height:270px;background:radial-gradient(circle at 50% 2%,rgba(255,215,111,.22),transparent 34%),radial-gradient(circle at 18% 30%,rgba(97,232,255,.18),transparent 34%),radial-gradient(circle at 84% 28%,rgba(178,140,255,.20),transparent 38%),linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
.hh-class-panel:after{content:"";position:absolute;inset:12px;border:1px solid rgba(255,215,111,.10);border-radius:24px;pointer-events:none;box-shadow:inset 0 0 42px rgba(97,232,255,.035)}
.hh-class-titlebar{position:relative;z-index:1;margin-bottom:18px}.hh-class-titlebar .hh-kicker{color:#9dfcff;text-shadow:0 0 14px rgba(97,232,255,.28)}
.hh-class-titlebar h2{margin:2px 0 8px;font-size:clamp(2rem,5.1vw,4.1rem);line-height:.92;letter-spacing:-.07em;text-transform:uppercase}.hh-class-titlebar h2 span{background:linear-gradient(180deg,#fff7dd 0%,#ffd76f 42%,#8eeeff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 18px 45px rgba(97,232,255,.14)}
.hh-class-titlebar .hh-sub{max-width:720px;margin:0 auto;color:#c7d7ee;font-size:1rem;line-height:1.5}.hh-class-titlebar .hh-sub strong{color:#ffe7a3}
.hh-class-grid{gap:16px}.hh-class-card{--accent:rgba(255,215,111,.95);isolation:isolate;padding:15px 12px 14px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.018)),radial-gradient(circle at 50% 0,rgba(255,215,111,.11),transparent 44%),rgba(9,11,20,.98);box-shadow:0 22px 46px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);transform:translateZ(0)}
.hh-class-card:nth-child(1){--accent:#61e8ff}.hh-class-card:nth-child(2){--accent:#ffd76f}.hh-class-card:nth-child(3){--accent:#b28cff}.hh-class-card:nth-child(4){--accent:#90ff9d}
.hh-card-glow{position:absolute;inset:auto 18px 80px;height:42px;border-radius:50%;background:radial-gradient(ellipse at center,var(--accent),transparent 70%);filter:blur(8px);opacity:.18;z-index:0;pointer-events:none}.hh-class-card:before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);opacity:.65;transform:translateX(-120%);transition:transform .28s ease}.hh-class-card:hover:before{transform:translateX(120%)}
.hh-class-card:hover{border-color:rgba(157,252,255,.56);box-shadow:0 25px 58px rgba(0,0,0,.52),0 0 34px rgba(97,232,255,.10),inset 0 1px 0 rgba(255,255,255,.10)}
.hh-class-card canvas{width:124px;height:124px;border-radius:30px;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.08),transparent 62%),linear-gradient(180deg,rgba(14,17,28,.98),rgba(5,7,12,.98));box-shadow:inset 0 0 0 1px rgba(255,215,111,.18),0 0 30px rgba(255,215,111,.08)}
.hh-class-card em{position:relative;z-index:1;margin-top:2px;padding:4px 9px;border-radius:999px;border:1px solid rgba(255,215,111,.30);background:rgba(255,255,255,.045);color:#ffe7a3;font-style:normal;font-size:.72rem;font-weight:950;letter-spacing:.09em;text-transform:uppercase}.hh-class-card strong{color:#fff9e8;font-size:1.13rem;letter-spacing:-.02em;text-shadow:0 0 18px rgba(255,215,111,.16)}.hh-class-card span{color:#c6d4ec;font-weight:750}.hh-class-card small{position:relative;z-index:1;color:#93a7c5;line-height:1.35;max-width:190px}
.hh-level-modal{max-width:980px}.hh-upgrade-card{border-color:rgba(255,215,111,.22)}.hh-upgrade-card:hover{border-color:rgba(157,252,255,.56);box-shadow:0 18px 42px rgba(0,0,0,.42),0 0 26px rgba(97,232,255,.10)}
@media (max-width:980px){.hh-class-panel{padding:20px 16px 22px}.hh-class-titlebar h2{font-size:clamp(2rem,8vw,3.5rem)}.hh-class-card canvas{width:102px;height:102px}.hh-class-grid{gap:12px}}
@media (max-width:720px){.hh-shell{padding:calc(4px + env(safe-area-inset-top,0px)) 0 calc(6px + env(safe-area-inset-bottom,0px))}.hh-top{min-height:auto}.hh-brand h1{font-size:1.25rem}.hh-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.hh-actions .hh-ghost{min-height:34px;padding:7px 8px;font-size:.78rem}.hh-class-panel{width:calc(100% - 14px);padding:16px 12px 18px;border-radius:24px}.hh-class-titlebar .hh-sub{font-size:.92rem}.hh-class-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hh-class-card{padding:11px 8px 10px;border-radius:20px}.hh-class-card canvas{width:78px;height:78px;border-radius:21px}.hh-class-card strong{font-size:.94rem}.hh-class-card span{font-size:.78rem}.hh-class-card small{display:none}.hh-class-card em{font-size:.62rem;padding:3px 7px}.hh-upgrade-grid{grid-template-columns:1fr}.hh-upgrade-card{min-height:122px}}
@media (max-width:430px){.hh-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.hh-class-card canvas{width:70px;height:70px}.hh-class-titlebar h2{font-size:2rem}.hh-mark{display:none}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
.hh-upgrade-note{margin:0 0 8px;color:#b7c0d4;text-align:center;font-weight:750}

/* v16 polish: reduced visual noise + mobile input stability */
.hh-season{display:inline-flex;align-items:center;justify-content:center;margin-left:.32rem;padding:.08rem .42rem;border-radius:999px;border:1px solid rgba(255,215,111,.25);background:rgba(255,215,111,.08);color:#ffe49a;font-size:.62em;vertical-align:middle;letter-spacing:.02em}
.hh-canvas-shell,#gameCanvas{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
@media (hover:none){button:hover:not(:disabled),a:hover,.hh-class-card:hover,.hh-upgrade-card:hover{transform:none;filter:none}}
@media (max-height:640px) and (max-width:720px){#gameCanvas{min-height:300px}.hh-top{padding:6px 8px}.hh-actions .hh-ghost{min-height:30px}.hh-class-titlebar h2{font-size:1.75rem}}

/* v17 Graveyard UI pass: less generic, more crypt-gate / cemetery styling */
:root{--stone:#bfa56f;--stone2:#6f6045;--grave-green:#7cff9d;--grave-blue:#84e9ff;--grave-purple:#b28cff;--grave-red:#ff6b6b}
body{background:radial-gradient(900px 500px at 50% -18%,rgba(132,233,255,.12),transparent 62%),radial-gradient(720px 420px at 18% 108%,rgba(124,255,157,.08),transparent 60%),radial-gradient(760px 420px at 90% 112%,rgba(178,140,255,.10),transparent 60%),linear-gradient(180deg,#05080f 0%,#0a1112 44%,#10100e 100%)}
.hh-top{position:relative;overflow:hidden;border-color:rgba(191,165,111,.38);background:linear-gradient(180deg,rgba(39,31,26,.96),rgba(9,11,15,.95)),radial-gradient(360px 80px at 12% 0,rgba(132,233,255,.20),transparent 70%);box-shadow:0 18px 58px rgba(0,0,0,.52),inset 0 0 0 1px rgba(255,246,215,.04)}
.hh-top:before{content:"";position:absolute;inset:auto 10px 0 10px;height:18px;background:repeating-linear-gradient(90deg,rgba(191,165,111,.38) 0 2px,transparent 2px 18px),linear-gradient(180deg,transparent,rgba(0,0,0,.42));opacity:.72;pointer-events:none}.hh-top:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 50%,rgba(132,233,255,.13),transparent 25%),radial-gradient(circle at 94% 12%,rgba(255,215,111,.12),transparent 24%);pointer-events:none}
.hh-brand,.hh-actions{position:relative;z-index:1}.hh-mark{background:linear-gradient(145deg,#e7c77d,#473a28 52%,#101318);color:#07090d;border:1px solid rgba(255,246,215,.38);box-shadow:0 0 24px rgba(255,215,111,.17),inset 0 2px 0 rgba(255,255,255,.22)}.hh-brand h1{font-family:Georgia,serif;text-transform:uppercase;letter-spacing:.02em;text-shadow:0 2px 0 #000,0 0 18px rgba(255,215,111,.18)}.hh-brand p,.hh-kicker{color:#9dfcff;text-shadow:0 0 12px rgba(132,233,255,.28)}
.hh-rune-strip span{border:1px solid rgba(191,165,111,.22);background:rgba(0,0,0,.24);color:#dfcfaa;border-radius:999px;padding:2px 8px;margin-right:5px}.hh-ghost{position:relative;overflow:hidden;border-color:rgba(191,165,111,.30);background:linear-gradient(180deg,rgba(255,246,215,.08),rgba(0,0,0,.18));box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}.hh-ghost:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,246,215,.16),transparent);transform:translateX(-120%);transition:transform .28s ease}.hh-ghost:hover:before{transform:translateX(120%)}
.hh-class-overlay{background:radial-gradient(600px 260px at 50% 5%,rgba(132,233,255,.12),transparent 65%),radial-gradient(720px 360px at 50% 100%,rgba(124,255,157,.09),transparent 70%),linear-gradient(180deg,rgba(5,7,12,.83),rgba(5,8,6,.88))}.hh-class-panel{border-color:rgba(191,165,111,.36);background:linear-gradient(180deg,rgba(20,19,18,.98),rgba(7,8,11,.98) 54%,rgba(5,8,6,.98));box-shadow:0 38px 120px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,246,215,.08),inset 0 -34px 80px rgba(44,18,8,.18)}
.hh-class-panel:before{content:"";position:absolute;inset:-120px -100px auto -100px;height:330px;background:radial-gradient(circle at 50% 10%,rgba(255,215,111,.16),transparent 31%),radial-gradient(circle at 26% 34%,rgba(132,233,255,.14),transparent 30%),radial-gradient(circle at 74% 36%,rgba(178,140,255,.15),transparent 32%),repeating-linear-gradient(90deg,transparent 0 42px,rgba(191,165,111,.12) 42px 45px,transparent 45px 66px);pointer-events:none}.hh-class-panel:after{content:"";position:absolute;inset:12px;border:1px solid rgba(191,165,111,.18);border-radius:24px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,246,215,.035),inset 0 0 70px rgba(0,0,0,.38)}
.hh-class-titlebar:before{content:"☽  CHOOSE WISELY  ☾";display:block;margin:0 auto 8px;width:max-content;max-width:100%;padding:4px 14px;border-top:1px solid rgba(191,165,111,.36);border-bottom:1px solid rgba(191,165,111,.36);color:#d7bd7c;font:900 .72rem/1 system-ui;letter-spacing:.20em;text-shadow:0 0 14px rgba(255,215,111,.16)}.hh-class-titlebar h2{font-family:Georgia,serif;letter-spacing:.01em;text-transform:uppercase}.hh-class-titlebar h2 span{background:linear-gradient(180deg,#fff9df 0%,#d7bd7c 42%,#84e9ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 7px 0 rgba(0,0,0,.42));text-shadow:none}.hh-class-titlebar .hh-sub{color:#d0c5ac}.hh-class-titlebar .hh-sub strong{color:#9dfcff;text-shadow:0 0 12px rgba(132,233,255,.24)}
.hh-class-card{position:relative;overflow:hidden;border-color:rgba(191,165,111,.25);background:linear-gradient(180deg,rgba(255,246,215,.075),rgba(0,0,0,.06) 30%,rgba(0,0,0,.28)),radial-gradient(circle at 50% 0,var(--accent),transparent 42%),linear-gradient(180deg,#161413,#090b0d);background-blend-mode:normal,soft-light,normal;box-shadow:0 24px 52px rgba(0,0,0,.54),inset 0 0 0 1px rgba(255,246,215,.04)}.hh-class-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 26%),repeating-linear-gradient(90deg,transparent 0 19px,rgba(255,246,215,.035) 19px 20px);opacity:.9;transform:none}.hh-class-card:after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:24px;border-radius:0 0 18px 18px;background:repeating-linear-gradient(90deg,rgba(191,165,111,.22) 0 2px,transparent 2px 14px),linear-gradient(180deg,transparent,rgba(0,0,0,.45));opacity:.55;pointer-events:none}.hh-class-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 58%,#fff 18%);box-shadow:0 30px 72px rgba(0,0,0,.62),0 0 34px color-mix(in srgb,var(--accent) 24%,transparent),inset 0 0 0 1px rgba(255,246,215,.06)}
.hh-class-card canvas{position:relative;z-index:1;background:radial-gradient(circle at 50% 36%,rgba(255,246,215,.09),transparent 52%),linear-gradient(180deg,#1b1a16,#08090b);border:1px solid rgba(191,165,111,.34);box-shadow:inset 0 0 24px rgba(0,0,0,.42),0 0 30px color-mix(in srgb,var(--accent) 18%,transparent)}.hh-card-glow{background:radial-gradient(ellipse at center,var(--accent),transparent 70%);opacity:.14}.hh-class-card em{background:rgba(0,0,0,.34);border-color:rgba(191,165,111,.36);color:#dfcfaa}.hh-class-card strong{font-family:Georgia,serif;text-transform:uppercase;color:#fff6d7;letter-spacing:.035em;text-shadow:0 2px 0 #000,0 0 18px color-mix(in srgb,var(--accent) 26%,transparent)}.hh-class-card span{color:color-mix(in srgb,var(--accent) 65%,#fff 25%);font-weight:850}.hh-class-card small{color:#b9b09e}.hh-card-glow+canvas{clip-path:polygon(50% 0,88% 12%,100% 50%,84% 100%,16% 100%,0 50%,12% 12%)}
.hh-modal{border-color:rgba(191,165,111,.35);background:linear-gradient(180deg,rgba(20,19,18,.98),rgba(7,8,11,.98));box-shadow:0 34px 100px rgba(0,0,0,.62)}.hh-upgrade-card{border-color:rgba(191,165,111,.30);background:linear-gradient(180deg,rgba(255,246,215,.07),rgba(0,0,0,.12)),#090b10}.hh-upgrade-card strong{font-family:Georgia,serif;letter-spacing:.02em}.hh-upgrade-note{color:#d0c5ac}.hh-primary{background:linear-gradient(135deg,#d7bd7c,#84e9ff);box-shadow:0 16px 38px rgba(132,233,255,.14),0 0 0 1px rgba(255,246,215,.22) inset}
@media (max-width:720px){.hh-class-titlebar:before{font-size:.60rem;letter-spacing:.13em}.hh-rune-strip{display:none}.hh-class-card:after{display:none}.hh-class-card:hover{transform:none}.hh-class-card canvas{clip-path:none}.hh-class-titlebar h2 span{filter:drop-shadow(0 4px 0 rgba(0,0,0,.42))}}
@supports not (color:color-mix(in srgb,#fff,#000)){.hh-class-card:hover{border-color:rgba(191,165,111,.58)}.hh-class-card canvas{box-shadow:inset 0 0 24px rgba(0,0,0,.42),0 0 30px rgba(255,215,111,.10)}.hh-class-card strong{text-shadow:0 2px 0 #000,0 0 18px rgba(255,215,111,.18)}.hh-class-card span{color:#dfcfaa}}


/* v21 raven/mobile polish: smoother raven flight, no slow moss circles, no decorative stones */
.hh-class-panel{position:relative;overflow:hidden;isolation:isolate;border-radius:18px 18px 36px 36px;border-color:rgba(201,171,105,.48);background:linear-gradient(180deg,rgba(23,20,18,.985),rgba(8,8,12,.99) 50%,rgba(4,8,6,.995));}
.hh-class-titlebar,.hh-class-grid{position:relative;z-index:2}.hh-class-panel:before{z-index:0}.hh-class-panel:after{z-index:1}
.hh-grave-scene{position:absolute;inset:0;z-index:0!important;pointer-events:none;overflow:hidden;border-radius:inherit}
.hh-grave-scene:before{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,transparent,rgba(2,4,5,.40) 18%,rgba(2,4,5,.82)),repeating-linear-gradient(90deg,transparent 0 44px,rgba(201,171,105,.10) 45px 47px,transparent 48px 84px);opacity:.9}
.hh-moon{position:absolute;right:9%;top:8%;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 36% 34%,#fff8d8 0 22%,#d8be7e 54%,rgba(216,190,126,.08) 74%,transparent 75%);box-shadow:0 0 50px rgba(255,233,174,.22),0 0 120px rgba(132,233,255,.10)}
.hh-moon:after{content:"";position:absolute;right:17px;top:14px;width:68px;height:68px;border-radius:50%;background:rgba(14,13,18,.35);filter:blur(1px)}
.hh-gate{position:absolute;left:50%;top:6%;width:360px;height:200px;transform:translateX(-50%);opacity:.34;background:linear-gradient(90deg,transparent 0 10%,rgba(201,171,105,.35) 10% 11%,transparent 11% 20%,rgba(201,171,105,.35) 20% 21%,transparent 21% 30%,rgba(201,171,105,.35) 30% 31%,transparent 31% 40%,rgba(201,171,105,.35) 40% 41%,transparent 41% 50%,rgba(201,171,105,.35) 50% 51%,transparent 51% 60%,rgba(201,171,105,.35) 60% 61%,transparent 61% 70%,rgba(201,171,105,.35) 70% 71%,transparent 71% 80%,rgba(201,171,105,.35) 80% 81%,transparent 81%),radial-gradient(ellipse at 50% 100%,transparent 0 46%,rgba(201,171,105,.36) 47% 49%,transparent 50%);mask:linear-gradient(180deg,#000 0 82%,transparent)}
.hh-gate:after{content:"";position:absolute;left:0;right:0;bottom:38px;height:3px;background:linear-gradient(90deg,transparent,rgba(201,171,105,.62),transparent);box-shadow:0 -54px 0 rgba(201,171,105,.20)}
.hh-fog{position:absolute;left:-12%;right:-12%;height:72px;border-radius:50%;background:radial-gradient(ellipse at 12% 50%,rgba(132,233,255,.16),transparent 42%),radial-gradient(ellipse at 54% 42%,rgba(124,255,157,.12),transparent 44%),radial-gradient(ellipse at 85% 60%,rgba(255,246,215,.10),transparent 38%);filter:blur(11px);opacity:.8;animation:hhFogDrift 7s ease-in-out infinite alternate}
.hh-fog-a{bottom:112px}.hh-fog-b{bottom:38px;opacity:.62;animation-duration:9s;animation-direction:alternate-reverse}
.hh-crow{position:absolute;width:34px;height:14px;opacity:.50}.hh-crow:before,.hh-crow:after{content:"";position:absolute;top:4px;width:19px;height:8px;border-top:2px solid rgba(5,7,10,.88);border-radius:50%}.hh-crow:before{left:0;transform:rotate(15deg)}.hh-crow:after{right:0;transform:rotate(-15deg)}.hh-crow-a{right:22%;top:19%;transform:scale(.9)}.hh-crow-b{right:27%;top:14%;transform:scale(.62)}
.hh-class-titlebar:before{content:"✦  CEMETERY GATE  ✦";letter-spacing:.28em;color:#d9c07e;border-color:rgba(201,171,105,.50);background:linear-gradient(90deg,transparent,rgba(0,0,0,.22),transparent)}
.hh-class-titlebar .hh-kicker{font-size:.72rem;letter-spacing:.18em;color:#9dfcff}.hh-class-titlebar h2{margin-top:2px}.hh-class-titlebar h2 span{letter-spacing:.035em;text-shadow:none;filter:drop-shadow(0 5px 0 rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(201,171,105,.12))}.hh-class-titlebar .hh-sub{max-width:760px;margin-left:auto;margin-right:auto;color:#d7cfba;font-weight:650}
.hh-class-card{border-radius:18px 18px 32px 32px;border-color:rgba(201,171,105,.34);background:linear-gradient(180deg,rgba(255,246,215,.075),rgba(0,0,0,.11) 38%,rgba(0,0,0,.34)),radial-gradient(circle at 50% 0,var(--accent),transparent 38%),linear-gradient(180deg,#17130f,#08090b);box-shadow:0 26px 58px rgba(0,0,0,.60),inset 0 1px 0 rgba(255,246,215,.08),inset 0 -14px 28px rgba(0,0,0,.32)}
.hh-class-card:after{height:28px;background:repeating-linear-gradient(90deg,rgba(201,171,105,.24) 0 2px,transparent 2px 13px),linear-gradient(180deg,transparent,rgba(0,0,0,.55));border-radius:0 0 23px 23px}.hh-class-card:hover{transform:translateY(-7px);filter:none}.hh-class-card canvas{border-radius:50%;clip-path:none;border-color:rgba(201,171,105,.42);background:radial-gradient(circle at 50% 36%,rgba(255,246,215,.11),transparent 52%),radial-gradient(circle at 50% 78%,rgba(0,0,0,.52),transparent 38%),linear-gradient(180deg,#201b16,#08090b);}
.hh-class-card em{font-family:ui-sans-serif,system-ui,sans-serif;color:#f0d68b;background:rgba(0,0,0,.36);border-color:rgba(201,171,105,.44)}.hh-class-card strong{font-size:1.16rem;color:#fff5d7}.hh-class-card small{color:#beb6a4}.hh-upgrade-note{color:#d7cfba}.hh-upgrade-card:hover{border-color:rgba(157,252,255,.58);box-shadow:0 18px 48px rgba(0,0,0,.50),0 0 30px rgba(132,233,255,.12)}
@keyframes hhFogDrift{from{transform:translateX(-18px)}to{transform:translateX(22px)}}
@media (max-width:720px){.hh-moon{width:58px;height:58px;right:6%;top:7%}.hh-gate{width:260px;opacity:.24}.hh-crow{display:none}.hh-fog{height:48px}.hh-class-titlebar:before{letter-spacing:.16em}.hh-class-titlebar .hh-sub{font-size:.88rem}.hh-class-card:hover{transform:none}}


/* v21 optimized raven polish accents */
.hh-season{background:linear-gradient(135deg,#d7bd7c,#9ab6ff);color:#07111f;border:1px solid rgba(255,246,215,.28);box-shadow:0 0 18px rgba(154,182,255,.18)}
.hh-rune-strip span:nth-child(3){color:#cbd8ff;text-shadow:0 0 12px rgba(154,182,255,.28)}
.hh-class-card[data-class="ranger"]:hover,.hh-class-card[data-class="knight"]:hover,.hh-class-card[data-class="binder"]:hover,.hh-class-card[data-class="alchemist"]:hover{box-shadow:0 30px 76px rgba(0,0,0,.64),0 0 36px color-mix(in srgb,var(--accent) 25%,transparent),inset 0 1px 0 rgba(255,246,215,.12)}


/* v23 mobile/gameplay-space pass: compact shell, phone HUD room, optimized power styling */
@media (max-width:760px){
  html,body{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;background:#050913}
  .hh-shell{width:100vw;height:100dvh;max-height:100dvh;padding:3px 3px calc(3px + env(safe-area-inset-bottom));gap:3px;grid-template-rows:34px minmax(0,1fr)}
  .hh-top{height:34px;min-height:0;flex-direction:row;align-items:center;justify-content:space-between;padding:3px 5px;border-radius:12px;background:linear-gradient(180deg,rgba(15,16,22,.96),rgba(4,6,10,.94));box-shadow:0 8px 22px rgba(0,0,0,.36),inset 0 0 0 1px rgba(215,189,124,.08)}
  .hh-top:before{opacity:.36;height:80px;inset:-46px -40px auto -40px}.hh-top:after{bottom:2px;left:8px;right:8px;opacity:.55}
  .hh-brand{gap:6px;min-width:0}.hh-mark{width:24px;height:24px;border-radius:9px}.hh-mark span{font-size:.86rem}.hh-brand p,.hh-rune-strip,.hh-season{display:none!important}.hh-brand h1{font-size:.84rem;letter-spacing:-.03em;white-space:nowrap;max-width:92px;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 10px rgba(157,252,255,.14)}
  .hh-actions{width:auto;gap:3px;flex-wrap:nowrap;justify-content:flex-end}.hh-actions .hh-ghost{min-height:26px;padding:3px 5px;border-radius:9px;font-size:.60rem;letter-spacing:-.02em;border-color:rgba(215,189,124,.22);background:rgba(255,255,255,.055)}.hh-actions .hh-ghost:before{display:none}.hh-actions a.hh-ghost{max-width:48px;overflow:hidden}.hh-actions a.hh-ghost span{font-size:0}.hh-actions a.hh-ghost span:after{content:"Board";font-size:.60rem}
  .hh-stage,.hh-canvas-shell{height:100%;min-height:0}.hh-canvas-shell{border-radius:14px;padding:3px;box-shadow:0 12px 28px rgba(0,0,0,.42)}#gameCanvas{min-height:0;border-radius:12px}
  .hh-class-overlay,.hh-overlay{inset:3px;place-items:start center;overflow:auto;padding:7px 0;background:rgba(3,6,12,.70);-webkit-overflow-scrolling:touch}.hh-class-panel{width:calc(100% - 12px);max-height:none;min-height:min-content;border-radius:16px 16px 24px 24px;padding:9px 8px 10px;overflow:visible}.hh-class-titlebar:before{font-size:.50rem;letter-spacing:.11em;margin-bottom:4px;padding:3px 8px}.hh-class-titlebar .hh-kicker{font-size:.56rem;letter-spacing:.12em}.hh-class-titlebar h2{font-size:1.08rem;margin:2px 0 4px;line-height:1.05}.hh-class-titlebar .hh-sub{font-size:.72rem;line-height:1.22;margin-bottom:8px}.hh-moon{width:40px;height:40px;right:5%;top:5%}.hh-moon:after{width:31px;height:31px;right:8px;top:6px}.hh-gate{width:205px;height:122px;top:1%;opacity:.20}.hh-fog{height:36px;filter:blur(9px)}
  .hh-class-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.hh-class-card{gap:4px;padding:7px 5px 8px;border-radius:13px 13px 18px 18px;box-shadow:0 14px 30px rgba(0,0,0,.48)}.hh-class-card canvas{width:52px!important;height:52px!important;border-radius:50%}.hh-class-card em{font-size:.52rem;padding:2px 5px}.hh-class-card strong{font-size:.78rem;letter-spacing:.02em}.hh-class-card span{font-size:.66rem}.hh-class-card small{display:none}.hh-card-glow,.hh-class-card:after{display:none!important}.hh-class-card:hover{transform:none}
  .hh-modal{width:calc(100vw - 16px);max-height:calc(100dvh - 18px);overflow:auto;border-radius:18px;padding:12px}.hh-modal h2{font-size:1.2rem}.hh-guide-grid,.hh-upgrade-grid{grid-template-columns:1fr;gap:8px}.hh-upgrade-card{padding:10px;border-radius:14px}.hh-upgrade-card p{font-size:.82rem;line-height:1.25}.hh-upgrade-icon{width:54px;height:54px}.hh-upgrade-tag{font-size:.62rem;padding:4px 8px}
}
@media (max-width:380px){.hh-actions .hh-ghost{padding:4px 5px;font-size:.59rem}.hh-brand h1{max-width:88px;font-size:.86rem}.hh-actions a.hh-ghost{max-width:40px}.hh-actions a.hh-ghost span:after{content:"LB";font-size:.59rem}.hh-class-card canvas{width:48px!important;height:48px!important}.hh-class-card strong{font-size:.72rem}.hh-class-card span{font-size:.61rem}}
@media (max-height:640px) and (max-width:760px){.hh-shell{grid-template-rows:34px minmax(0,1fr)}.hh-top{height:34px}.hh-actions .hh-ghost{min-height:26px;padding:3px 5px}.hh-mark{width:24px;height:24px}.hh-class-titlebar .hh-sub{display:none}.hh-class-panel{padding-top:7px}.hh-class-card{padding:5px 4px}.hh-class-card canvas{width:46px!important;height:46px!important}}

/* v21 cross-browser/mobile safety fallback */
.hh-shell{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh}
@supports not (height:100dvh){
  .hh-shell{height:100vh;max-height:100vh}
  @media (max-width:760px){.hh-modal{max-height:calc(100vh - 18px)}}
}
@media (max-width:760px){
  body{touch-action:none;-webkit-tap-highlight-color:transparent}
  .hh-shell{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh}
  .hh-class-overlay{max-height:100%;}
  .hh-upgrade-grid{max-height:calc(100dvh - 120px);overflow:auto;padding-right:2px}
}

@media (max-width:960px) and (max-height:520px){
  .hh-shell{width:100vw;height:100dvh;max-height:100dvh;padding:3px;gap:3px;grid-template-rows:auto minmax(0,1fr)}
  .hh-top{min-height:38px;height:38px;padding:3px 5px;border-radius:11px;display:flex;flex-direction:row;align-items:center;gap:5px;overflow:hidden}.hh-top:before{height:64px;inset:-38px -28px auto -28px;opacity:.55}.hh-top:after{bottom:3px}.hh-brand{gap:6px;flex:1 1 auto;min-width:110px;overflow:hidden}.hh-mark{width:28px;height:28px;border-radius:9px;flex:0 0 28px}.hh-mark span{font-size:.88rem}.hh-brand p,.hh-rune-strip{display:none!important}.hh-brand h1{font-size:.95rem;white-space:nowrap}.hh-season{font-size:.52rem;padding:2px 5px}.hh-actions{display:flex;flex-wrap:nowrap;gap:4px}.hh-actions .hh-ghost{width:30px;height:30px;min-height:30px;padding:0;border-radius:9px;font-size:0}.hh-actions .hh-ghost span{font-size:0}.hh-actions .hh-ghost span:after{font-size:14px}.hh-actions #guideBtn span:after{content:'?'} .hh-actions #pauseBtn span:after{content:'Ⅱ'} .hh-actions #restartBtn span:after{content:'↻'} .hh-actions #leaderboardLink span:after{content:'♛'}
  .hh-stage,.hh-canvas-shell{min-height:0;height:100%}.hh-canvas-shell{padding:3px;border-radius:13px}#gameCanvas{min-height:0!important;border-radius:10px}.hh-class-overlay,.hh-overlay{inset:3px;place-items:start center;overflow:auto;padding:5px}.hh-class-panel,.hh-overlay-panel{width:100%;max-height:calc(100% - 4px);overflow:auto;padding:8px;border-radius:14px 14px 22px 22px}.hh-class-titlebar .hh-sub{display:none}.hh-class-titlebar h2{font-size:1.05rem;margin:1px 0 5px}.hh-class-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.hh-class-card{padding:6px 4px;gap:3px;border-radius:12px 12px 18px 18px}.hh-class-card canvas{width:48px;height:48px}.hh-class-card em,.hh-class-card small{display:none}.hh-class-card strong{font-size:.70rem}.hh-class-card span{font-size:.58rem}.hh-moon,.hh-gate,.hh-fog,.hh-stone,.hh-crow{display:none!important}
}

/* v21.1 full-phone arena override: header floats over the game, canvas keeps the screen, class chooser scrolls cleanly */
@media (max-width:760px){
  html,body{width:100%;height:100%;overflow:hidden;touch-action:none;background:#050913}
  .hh-shell{position:relative;display:block;width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;overflow:hidden}
  .hh-stage{position:absolute;inset:0;height:100dvh;min-height:0;z-index:1}
  .hh-canvas-shell{position:absolute;inset:0;height:100dvh;min-height:0;padding:0;border:0;border-radius:0;box-shadow:none;background:#050913;overflow:hidden}
  #gameCanvas{display:block;min-height:0;border-radius:0;background:#040912;touch-action:none}
  .hh-top{position:absolute;z-index:24;left:5px;right:5px;top:calc(4px + env(safe-area-inset-top));height:29px;min-height:0;padding:2px 4px;border-radius:11px;display:flex;flex-direction:row;align-items:center;gap:4px;background:linear-gradient(180deg,rgba(19,16,18,.82),rgba(4,6,10,.70));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 8px 20px rgba(0,0,0,.30),inset 0 0 0 1px rgba(215,189,124,.10)}
  .hh-top:before,.hh-top:after{display:none!important}.hh-brand{flex:0 1 auto;gap:5px;min-width:0}.hh-mark{width:22px;height:22px;border-radius:8px;clip-path:none}.hh-mark span{font-size:.70rem}.hh-brand p,.hh-rune-strip,.hh-season{display:none!important}.hh-brand h1{font-size:.70rem;line-height:1;letter-spacing:.01em;max-width:82px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hh-actions{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;min-width:0}.hh-actions .hh-ghost{height:22px;min-height:22px;padding:0 3px;border-radius:8px;font-size:.56rem;letter-spacing:0;background:rgba(255,255,255,.060)}.hh-actions .hh-ghost span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hh-actions a.hh-ghost{max-width:none}.hh-actions a.hh-ghost span{font-size:0}.hh-actions a.hh-ghost span:after{content:"Board";font-size:.56rem}
  .hh-class-overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:start center;padding:calc(38px + env(safe-area-inset-top)) 6px calc(8px + env(safe-area-inset-bottom));overflow:auto;-webkit-overflow-scrolling:touch;background:radial-gradient(440px 150px at 50% 0,rgba(132,233,255,.13),transparent 70%),rgba(3,6,12,.82)}
  .hh-class-panel{width:min(520px,100%);max-height:none;overflow:visible;padding:9px 8px 12px;border-radius:17px;box-shadow:0 18px 60px rgba(0,0,0,.70)}
  .hh-class-titlebar:before{font-size:.48rem;letter-spacing:.10em;margin-bottom:4px;padding:3px 8px}.hh-class-titlebar .hh-kicker{font-size:.54rem}.hh-class-titlebar h2{font-size:clamp(1.12rem,6.4vw,1.62rem);margin:2px 0 5px;line-height:1}.hh-class-titlebar .hh-sub{font-size:.68rem;line-height:1.22;margin:0 auto 7px;max-width:95%}
  .hh-grave-scene{opacity:.62}.hh-moon{width:38px;height:38px;top:5%;right:6%}.hh-gate{width:190px;height:120px;opacity:.18}.hh-fog{height:32px;filter:blur(8px)}
  .hh-class-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.hh-class-card{min-height:0;padding:7px 6px 8px;border-radius:14px;display:grid;grid-template-columns:50px 1fr;grid-template-rows:auto auto auto;column-gap:7px;row-gap:2px;text-align:left;justify-items:start;align-items:center}.hh-class-card canvas{grid-row:1/4;width:50px!important;height:50px!important;border-radius:14px}.hh-class-card em{font-size:.47rem;padding:2px 5px;margin:0}.hh-class-card strong{font-size:.74rem;line-height:1.05}.hh-class-card span{font-size:.61rem;line-height:1.06}.hh-class-card small{display:none!important}.hh-card-glow,.hh-class-card:after{display:none!important}
  .hh-overlay{position:absolute;inset:0;z-index:26;padding:calc(34px + env(safe-area-inset-top)) 6px 8px;overflow:auto}.hh-dialog{max-width:100vw}.hh-modal{width:calc(100vw - 12px);max-height:calc(100dvh - 18px);overflow:auto;padding:12px 10px;border-radius:16px}.hh-guide-grid,.hh-upgrade-grid{grid-template-columns:1fr;gap:8px}.hh-upgrade-card{grid-template-columns:48px 1fr;min-height:88px;padding:8px;border-radius:14px;gap:7px}.hh-upgrade-icon{width:46px;height:46px}.hh-upgrade-card p{font-size:.78rem;line-height:1.22}.hh-upgrade-card strong{font-size:.90rem}.hh-upgrade-note{font-size:.73rem;margin-bottom:6px}
}
@media (max-width:380px){.hh-brand h1{display:none!important}.hh-actions .hh-ghost{font-size:.52rem}.hh-actions a.hh-ghost span:after{content:"Rank";font-size:.52rem}.hh-class-grid{grid-template-columns:1fr}.hh-class-card canvas{width:48px!important;height:48px!important}}
@media (max-height:560px) and (max-width:760px){.hh-class-titlebar .hh-sub{display:none!important}.hh-class-panel{padding-top:8px}.hh-class-card canvas{width:45px!important;height:45px!important}.hh-class-card{grid-template-columns:45px 1fr;padding:5px 6px}}


/* v21.1 phone controls: icon-only chrome leaves more arena visible */
@media (max-width:760px){
  .hh-actions .hh-ghost{width:30px;min-width:30px;height:29px;display:grid;place-items:center;padding:0!important;font-size:0!important;line-height:1!important}
  .hh-actions .hh-ghost span{font-size:0!important;line-height:0!important}
  .hh-actions .hh-ghost::after{content:attr(data-icon);font-size:14px;font-weight:950;color:#fff6d7;text-shadow:0 0 10px rgba(157,252,255,.18)}
  .hh-actions a.hh-ghost{max-width:none!important;overflow:visible!important;text-decoration:none}
  .hh-actions a.hh-ghost span:after{content:""!important;font-size:0!important}
  .hh-brand h1{max-width:104px}
}
@media (max-width:380px){
  .hh-actions .hh-ghost{width:28px;min-width:28px;height:27px}.hh-actions .hh-ghost::after{font-size:13px}.hh-brand h1{max-width:84px}
}


/* v23 final phone polish: keep the HTML chrome tiny and class choice scrollable on every phone */
@media (max-width:760px){
  .hh-shell{grid-template-rows:34px minmax(0,1fr);padding:2px 2px calc(2px + env(safe-area-inset-bottom));gap:2px}
  .hh-top{height:34px;padding:2px 4px;border-radius:10px}
  .hh-mark{width:24px;height:24px}.hh-brand h1{font-size:.84rem;max-width:96px}.hh-actions .hh-ghost{min-height:25px;padding:3px 5px;font-size:.59rem;border-radius:8px}
  .hh-canvas-shell{padding:2px;border-radius:12px}.hh-stage{min-height:0}
  .hh-class-overlay{align-items:flex-start;padding:5px 0}.hh-class-panel{width:calc(100% - 10px);padding:7px 6px 8px;border-radius:14px 14px 20px 20px}
  .hh-class-titlebar:before{font-size:.46rem}.hh-class-titlebar h2{font-size:1rem}.hh-class-titlebar .hh-sub{font-size:.68rem;line-height:1.15;margin-bottom:6px}
  .hh-class-grid{gap:6px}.hh-class-card{min-height:0;padding:6px 4px}.hh-class-card canvas{width:48px!important;height:48px!important}.hh-class-card em{font-size:.49rem}.hh-class-card strong{font-size:.70rem}.hh-class-card span{font-size:.58rem}
}
@media (max-width:760px) and (orientation:landscape){
  .hh-class-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.hh-class-titlebar .hh-sub{display:none}.hh-class-card canvas{width:42px!important;height:42px!important}.hh-class-card em{display:none}.hh-class-card strong{font-size:.66rem}.hh-class-card span{font-size:.54rem}
}
@media (max-width:340px){.hh-brand h1{max-width:72px;font-size:.78rem}.hh-actions .hh-ghost{padding:3px 4px;font-size:.55rem}.hh-mark{display:none}}


/* v23 phone-first gameplay layout: top site chrome is a tiny overlay, canvas gets the space */
@media (max-width:760px){
  html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;position:fixed;inset:0;touch-action:none;-webkit-tap-highlight-color:transparent;background:#050913}
  .hh-shell{width:100vw;height:100dvh;max-height:100dvh;padding:0!important;display:grid!important;grid-template-rows:minmax(0,1fr)!important;gap:0!important;position:relative;overflow:hidden;background:#050913}
  .hh-stage{height:100%;min-height:0;position:relative;overflow:hidden}
  .hh-canvas-shell{height:100%;min-height:0;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#050913}
  #gameCanvas{height:100%!important;min-height:0!important;border-radius:0!important;box-shadow:none!important;display:block;background:#050913}

  .hh-top{position:absolute!important;top:calc(4px + env(safe-area-inset-top,0px));left:6px;right:6px;z-index:20;height:28px!important;min-height:0!important;padding:2px 4px!important;border-radius:11px!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;background:linear-gradient(180deg,rgba(17,17,23,.76),rgba(4,6,10,.58))!important;border-color:rgba(215,189,124,.22)!important;box-shadow:0 8px 24px rgba(0,0,0,.30),inset 0 0 0 1px rgba(255,246,215,.035)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .hh-top:before{opacity:.22!important;height:58px!important;inset:-34px -30px auto -30px!important}.hh-top:after{display:none!important}
  .hh-brand{min-width:0!important;gap:5px!important;flex:1 1 auto!important}.hh-mark{display:grid!important;width:22px!important;height:22px!important;border-radius:8px!important;min-width:22px!important}.hh-mark span{font-size:.72rem!important}.hh-brand p,.hh-rune-strip,.hh-season{display:none!important}.hh-brand h1{font-size:.70rem!important;max-width:98px!important;letter-spacing:.02em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#fff6d8!important}
  .hh-actions{display:flex!important;gap:3px!important;flex:0 0 auto!important;width:auto!important;align-items:center!important;justify-content:flex-end!important}.hh-actions .hh-ghost{width:25px!important;min-width:25px!important;height:23px!important;min-height:23px!important;padding:0!important;border-radius:8px!important;font-size:0!important;line-height:1!important;text-align:center!important;background:rgba(255,255,255,.055)!important}.hh-actions .hh-ghost span{display:none!important}.hh-actions .hh-ghost:before{display:none!important}
  #guideBtn::after{content:'?';font-size:.72rem;font-weight:1000;color:#fff6d8}#pauseBtn::after{content:'Ⅱ';font-size:.67rem;font-weight:1000;color:#fff6d8}#restartBtn::after{content:'↻';font-size:.77rem;font-weight:1000;color:#fff6d8}.hh-actions a.hh-ghost::after{content:'♛';font-size:.70rem;font-weight:1000;color:#fff6d8}

  .hh-class-overlay{position:absolute!important;inset:0!important;z-index:15!important;padding:calc(36px + env(safe-area-inset-top,0px)) 8px 8px!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;place-items:start center!important;align-content:start!important;background:radial-gradient(520px 240px at 50% 5%,rgba(132,233,255,.12),transparent 65%),rgba(3,6,12,.74)!important}
  .hh-class-panel{width:min(520px,calc(100vw - 16px))!important;max-height:none!important;margin:0 auto 12px!important;padding:10px 9px 12px!important;border-radius:18px 18px 24px 24px!important;overflow:hidden!important}.hh-class-titlebar{margin:0 auto 8px!important}.hh-class-titlebar:before{font-size:.49rem!important;letter-spacing:.10em!important;margin-bottom:4px!important;padding:3px 7px!important}.hh-class-titlebar .hh-kicker{font-size:.52rem!important;padding:3px 7px!important}.hh-class-titlebar h2{font-size:1.22rem!important;line-height:1!important;margin:3px 0 4px!important;letter-spacing:.01em!important}.hh-class-titlebar .hh-sub{font-size:.70rem!important;line-height:1.22!important;max-width:330px!important;margin-bottom:7px!important}.hh-moon{width:38px!important;height:38px!important}.hh-gate{height:112px!important;opacity:.18!important}.hh-fog{height:32px!important}
  .hh-class-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}.hh-class-card{min-height:0!important;padding:7px 5px 8px!important;border-radius:13px 13px 18px 18px!important;gap:4px!important}.hh-class-card canvas{width:54px!important;height:54px!important}.hh-class-card em{font-size:.50rem!important;padding:2px 5px!important}.hh-class-card strong{font-size:.76rem!important}.hh-class-card span{font-size:.64rem!important}.hh-class-card small{display:none!important}

  .hh-dialog{max-width:100vw!important}.hh-modal{width:calc(100vw - 14px)!important;max-height:calc(100dvh - 18px)!important;overflow:auto!important;border-radius:17px!important;padding:12px 10px!important}.hh-guide-grid,.hh-upgrade-grid{grid-template-columns:1fr!important;gap:8px!important}.hh-upgrade-grid{max-height:calc(100dvh - 124px)!important;overflow:auto!important}.hh-upgrade-card{min-height:94px!important;padding:9px!important;grid-template-columns:48px 1fr!important}.hh-upgrade-icon{width:44px!important;height:44px!important;border-radius:13px!important}.hh-upgrade-card strong{font-size:.88rem!important}.hh-upgrade-card p{font-size:.76rem!important;line-height:1.24!important}
}
@media (max-width:380px){
  .hh-brand h1{max-width:82px!important;font-size:.66rem!important}.hh-actions .hh-ghost{width:23px!important;min-width:23px!important}.hh-class-card canvas{width:50px!important;height:50px!important}.hh-class-card strong{font-size:.70rem!important}.hh-class-card span{font-size:.60rem!important}
}
@media (orientation:landscape) and (max-height:520px){
  .hh-top{height:26px!important}.hh-class-overlay{padding-top:32px!important}.hh-class-titlebar .hh-sub{display:none!important}.hh-class-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.hh-class-card canvas{width:48px!important;height:48px!important}.hh-class-card strong{font-size:.68rem!important}.hh-class-card span{font-size:.56rem!important}
}

/* v23 bone path / raven separation pass: gameplay logic lives in game.js; layout kept from the phone polish pass. */

/* v25: late-game FX budgets, fewer round pillars, richer Rot Bloom fog, and Soul Lantern power are handled in game.js. */

/* v33: Larger Hellfire Comet, tactical water pool, Spectral Gate, and Mirewalker Charm. */
.hh-class-panel{width:min(1120px,calc(100% - 28px))}
.hh-class-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.hh-class-card{min-height:302px}
.hh-class-card[data-class="werewolf"]{--accent:#ff8a4a;--accent-rgb:255,138,74}
.hh-class-card[data-class="ranger"]:hover,.hh-class-card[data-class="knight"]:hover,.hh-class-card[data-class="binder"]:hover,.hh-class-card[data-class="alchemist"]:hover,.hh-class-card[data-class="werewolf"]:hover{box-shadow:0 30px 76px rgba(0,0,0,.64),0 0 36px color-mix(in srgb,var(--accent) 25%,transparent),inset 0 1px 0 rgba(255,246,215,.12)}
@media (max-width:980px){.hh-class-panel{width:min(760px,calc(100% - 8px))}.hh-class-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hh-class-card{min-height:278px}}
@media (max-width:760px){
  .hh-top{height:32px!important;top:calc(5px + env(safe-area-inset-top,0px))!important;padding:3px 5px!important}
  .hh-brand{gap:6px!important}.hh-mark{width:24px!important;height:24px!important;min-width:24px!important}.hh-mark span{font-size:.78rem!important}.hh-brand h1{font-size:.77rem!important;max-width:108px!important}
  .hh-actions{gap:4px!important}.hh-actions .hh-ghost{width:28px!important;min-width:28px!important;height:26px!important;min-height:26px!important}.hh-actions .hh-ghost::after,#guideBtn::after,#pauseBtn::after,#restartBtn::after,.hh-actions a.hh-ghost::after{font-size:.78rem!important}
  .hh-class-overlay{padding-top:calc(42px + env(safe-area-inset-top,0px))!important}.hh-class-panel{width:min(540px,calc(100vw - 14px))!important}.hh-class-card canvas{width:58px!important;height:58px!important}.hh-class-card strong{font-size:.80rem!important}.hh-class-card span{font-size:.67rem!important}
}
@media (orientation:landscape) and (max-height:520px){.hh-top{height:29px!important}.hh-class-overlay{padding-top:36px!important}.hh-class-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}.hh-class-card canvas{width:48px!important;height:48px!important}}
@media (max-width:380px){.hh-actions .hh-ghost{width:26px!important;min-width:26px!important}.hh-brand h1{font-size:.72rem!important;max-width:90px!important}.hh-class-card canvas{width:52px!important;height:52px!important}}


/* v36 polish: squared bottom HUD, clean water, blocker graves, obstacle steering, upgraded class attacks, Spectral Gate, and Mirewalker feedback. */
.hh-top{background:linear-gradient(180deg,rgba(25,23,31,.96),rgba(7,8,13,.94)),radial-gradient(420px 120px at 20% 20%,rgba(216,231,255,.10),transparent 68%)!important;border-color:rgba(226,190,116,.28)!important}
.hh-top:before{background:radial-gradient(circle at 12% 15%,rgba(255,246,215,.22),transparent 26%),radial-gradient(circle at 65% -10%,rgba(143,169,255,.20),transparent 38%),linear-gradient(90deg,transparent,rgba(232,191,116,.16),transparent)!important}
.hh-rune-strip span{background:linear-gradient(180deg,rgba(255,246,215,.07),rgba(0,0,0,.10));border-color:rgba(226,190,116,.19);color:#ead8a6}
.hh-canvas-shell{border-color:rgba(226,190,116,.22);box-shadow:0 24px 70px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,246,215,.04)}
.hh-class-overlay{background:radial-gradient(680px 300px at 50% 4%,rgba(216,231,255,.14),transparent 68%),radial-gradient(660px 360px at 50% 105%,rgba(14,20,30,.92),rgba(3,5,9,.80)),rgba(3,5,9,.70)}
.hh-class-panel{width:min(1220px,calc(100% - 24px));padding:20px 20px 22px;background:linear-gradient(180deg,rgba(18,18,27,.98),rgba(5,7,12,.97));border-color:rgba(226,190,116,.30);box-shadow:0 34px 110px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,246,215,.09)}
.hh-class-titlebar h2{font-family:Georgia,serif;text-shadow:0 0 20px rgba(216,231,255,.14);letter-spacing:-.025em}.hh-class-titlebar .hh-sub{max-width:820px;margin-left:auto;margin-right:auto;color:#c9bfa6}
.hh-class-grid{grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:13px}.hh-class-card{position:relative;overflow:hidden;min-height:292px;background:linear-gradient(180deg,rgba(31,28,34,.98),rgba(7,8,13,.98));border-color:rgba(226,190,116,.24)}
.hh-class-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 16%,rgba(var(--accent-rgb,97,232,255),.16),transparent 45%),linear-gradient(180deg,rgba(255,246,215,.045),transparent 50%);opacity:.92;pointer-events:none}.hh-class-card>*{position:relative}.hh-class-card:hover{transform:translateY(-3px);border-color:rgba(255,224,151,.42)}
.hh-class-card[data-class="warden"]{--accent:#a7f0ff;--accent-rgb:167,240,255}.hh-class-card[data-class="shade"]{--accent:#d8f7ff;--accent-rgb:216,247,255}.hh-class-card[data-class="witch"]{--accent:#8ff6ff;--accent-rgb:143,246,255}
.hh-class-card em{background:rgba(0,0,0,.28);border:1px solid rgba(226,190,116,.18);padding:3px 8px;border-radius:999px;color:#ead8a6}.hh-class-card small{line-height:1.32;color:#9eabbc}
.hh-modal{background:linear-gradient(180deg,rgba(20,19,29,.98),rgba(6,7,11,.98));border-color:rgba(226,190,116,.25)}
@media (min-width:1180px){.hh-class-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.hh-class-card{min-height:286px}.hh-class-card canvas{width:96px;height:96px}.hh-class-card small{font-size:.76rem}}
@media (min-width:1500px){.hh-shell{width:min(1560px,calc(100vw - 18px))}.hh-class-panel{width:min(1320px,calc(100% - 28px))}}
@media (max-width:980px){.hh-class-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hh-class-card{min-height:238px}.hh-class-card small{display:none}}
@media (max-width:760px){
  .hh-top{height:34px!important;top:calc(5px + env(safe-area-inset-top,0px))!important;left:5px!important;right:5px!important;background:linear-gradient(180deg,rgba(17,16,22,.82),rgba(4,5,9,.66))!important}
  .hh-brand h1{font-size:.80rem!important;max-width:116px!important}.hh-actions .hh-ghost{width:29px!important;min-width:29px!important;height:27px!important;min-height:27px!important}
  .hh-class-overlay{padding-top:calc(44px + env(safe-area-inset-top,0px))!important}.hh-class-panel{width:min(560px,calc(100vw - 12px))!important;padding:11px 9px 12px!important}.hh-class-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}.hh-class-card{min-height:132px!important;padding:7px 5px!important}.hh-class-card canvas{width:56px!important;height:56px!important}.hh-class-card small{display:none!important}.hh-class-card em{font-size:.50rem!important}.hh-class-card strong{font-size:.78rem!important}.hh-class-card span{font-size:.64rem!important}
  .hh-upgrade-card{border-color:rgba(226,190,116,.22)!important}.hh-modal h2{font-size:1.35rem!important}
}
@media (orientation:landscape) and (max-height:540px){.hh-class-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.hh-class-card{min-height:102px!important}.hh-class-card canvas{width:44px!important;height:44px!important}.hh-class-card span{display:none}.hh-class-card strong{font-size:.68rem!important}.hh-class-titlebar h2{font-size:1.02rem!important}}

/* v37: squared in-game HUD panels, swinging Chain Warden, readable upgrade modal, and depth-layered graves. */


/* v37 modal polish: make the level-up title readable and remove build-note clutter. */
#upgradeDialog .hh-modal h2{color:#fff6d8!important;text-shadow:0 0 18px rgba(255,215,111,.22),0 2px 0 rgba(0,0,0,.55)!important}
#upgradeDialog .hh-upgrade-note{display:none!important}


/* v38: fixed shared rounded rectangle path in game.js so HUD panels and wall blocks render square/clean instead of diagonally slashed. */




/* v41: removed Abyssal Rift, rarer reliquaries, stronger shorter Soulstorm, red Moonfang Shift bite, Headman's Hatchet, and orbit-depth cleanup. */


/* v43: stable enemy visual facing to prevent rapid sprite flip flicker. */
.hh-class-overlay{background:
  radial-gradient(720px 360px at 50% -8%,rgba(198,222,255,.16),transparent 66%),
  radial-gradient(440px 220px at 14% 18%,rgba(255,215,111,.075),transparent 70%),
  radial-gradient(520px 260px at 88% 18%,rgba(178,140,255,.105),transparent 70%),
  linear-gradient(180deg,rgba(2,4,9,.76),rgba(2,3,7,.92))!important;
}
.hh-class-panel{position:relative;isolation:isolate;border-radius:22px!important;background:
  linear-gradient(180deg,rgba(24,22,29,.98),rgba(6,7,11,.985)),
  radial-gradient(900px 260px at 50% 0,rgba(236,214,157,.10),transparent 70%)!important;
  border:1px solid rgba(229,192,122,.36)!important;box-shadow:0 38px 120px rgba(0,0,0,.70),0 0 0 1px rgba(255,246,215,.035) inset,0 0 70px rgba(91,133,190,.065)!important;
}
.hh-class-panel:before{content:"";position:absolute;inset:9px;border-radius:17px;border:1px solid rgba(229,192,122,.17);box-shadow:inset 0 0 48px rgba(0,0,0,.42);pointer-events:none;z-index:0;background:
  linear-gradient(90deg,transparent,rgba(255,246,215,.045),transparent),
  radial-gradient(360px 80px at 50% 0,rgba(255,215,111,.08),transparent 78%)!important;
}
.hh-class-panel:after{content:"✦  ✧  ✦";position:absolute;left:50%;bottom:11px;transform:translateX(-50%);font-size:.66rem;letter-spacing:1.1rem;color:rgba(229,192,122,.30);pointer-events:none;z-index:0;text-indent:1.1rem;white-space:nowrap}
.hh-class-titlebar{position:relative;z-index:1;margin-bottom:18px!important;padding:2px 10px 0}.hh-class-titlebar:before{display:none!important}.hh-class-titlebar .hh-kicker{border-color:rgba(229,192,122,.28)!important;background:linear-gradient(180deg,rgba(255,246,215,.085),rgba(0,0,0,.16))!important;color:#edd7a1!important;box-shadow:0 0 28px rgba(255,215,111,.055)!important;text-transform:uppercase;letter-spacing:.16em!important}.hh-class-titlebar h2{font-family:Georgia,'Times New Roman',serif!important;letter-spacing:-.015em!important;text-shadow:0 3px 0 rgba(0,0,0,.72),0 0 28px rgba(236,214,157,.14)!important}.hh-class-titlebar h2 span{background:linear-gradient(180deg,#fff7d6 0%,#e8b96a 48%,#c7f2ff 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}.hh-class-titlebar .hh-sub{max-width:850px!important;color:#d3c8aa!important}.hh-class-seals{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:12px auto 0}.hh-class-seals span{font-size:.68rem;font-weight:900;letter-spacing:.105em;text-transform:uppercase;color:#f2deb0;border:1px solid rgba(229,192,122,.24);border-radius:999px;padding:5px 9px;background:rgba(0,0,0,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.hh-class-grid{position:relative;z-index:1;gap:15px!important}.hh-class-card{border-radius:18px!important;min-height:300px!important;padding:13px 10px 14px!important;background:
  linear-gradient(180deg,rgba(37,34,40,.98),rgba(7,8,12,.99))!important;border-color:rgba(229,192,122,.25)!important;box-shadow:0 18px 45px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,246,215,.07)!important;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,filter .16s ease!important;
}
.hh-class-card:before{background:radial-gradient(120px 115px at 50% 20%,rgba(var(--accent-rgb,97,232,255),.18),transparent 70%),linear-gradient(180deg,rgba(255,246,215,.035),transparent 55%)!important}.hh-class-card:after{content:"";position:absolute;left:13px;right:13px;bottom:12px;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb,97,232,255),.48),transparent);opacity:.70;pointer-events:none}.hh-class-card:hover,.hh-class-card:focus-visible{transform:translateY(-4px)!important;border-color:rgba(var(--accent-rgb,229,192,122),.62)!important;box-shadow:0 28px 70px rgba(0,0,0,.58),0 0 32px rgba(var(--accent-rgb,97,232,255),.13),inset 0 1px 0 rgba(255,246,215,.11)!important;filter:saturate(1.08)}.hh-class-card canvas{border-radius:18px!important;background:linear-gradient(180deg,rgba(8,10,15,.96),rgba(15,13,19,.98))!important;box-shadow:0 0 0 1px rgba(229,192,122,.22),0 12px 28px rgba(0,0,0,.32),0 0 22px rgba(var(--accent-rgb,97,232,255),.08)!important}.hh-class-card em{font-size:.65rem!important;letter-spacing:.10em!important;text-transform:uppercase!important;color:#e8cd92!important;border-color:rgba(var(--accent-rgb,229,192,122),.32)!important;background:rgba(0,0,0,.32)!important}.hh-class-card strong{font-family:Georgia,'Times New Roman',serif!important;font-size:1.08rem!important;color:#fff4d8!important;text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 14px rgba(var(--accent-rgb,97,232,255),.10)}.hh-class-card span{color:#d4dbea!important;font-weight:800!important}.hh-class-card small{color:#98a6b9!important}.hh-class-card[data-class="knight"]{--accent:#ffd76f;--accent-rgb:255,215,111}.hh-class-card[data-class="binder"]{--accent:#b28cff;--accent-rgb:178,140,255}.hh-class-card[data-class="alchemist"]{--accent:#90ff9d;--accent-rgb:144,255,157}.hh-class-card[data-class="ranger"]{--accent:#61e8ff;--accent-rgb:97,232,255}.hh-class-card[data-class="werewolf"]{--accent:#ff704c;--accent-rgb:255,112,76}.hh-class-card[data-class="warden"]{--accent:#a7f0ff;--accent-rgb:167,240,255}.hh-class-card[data-class="shade"]{--accent:#d8f7ff;--accent-rgb:216,247,255}.hh-class-card[data-class="witch"]{--accent:#8ff6ff;--accent-rgb:143,246,255}
@media (min-width:1180px){.hh-class-card canvas{width:104px!important;height:104px!important}.hh-class-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.hh-class-card{min-height:250px!important}}
@media (max-width:980px){.hh-class-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.hh-class-card{min-height:226px!important}.hh-class-seals span{font-size:.60rem;padding:4px 7px}.hh-class-card strong{font-size:.92rem!important}}
@media (max-width:760px){.hh-class-panel{border-radius:16px!important}.hh-class-panel:after{display:none}.hh-class-titlebar{margin-bottom:8px!important;padding:0 4px}.hh-class-titlebar .hh-sub{font-size:.70rem!important;line-height:1.22!important}.hh-class-seals{gap:4px;margin-top:6px}.hh-class-seals span{font-size:.49rem;padding:3px 5px;letter-spacing:.06em}.hh-class-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}.hh-class-card{min-height:132px!important;border-radius:13px!important;padding:7px 5px 8px!important}.hh-class-card:after{left:10px;right:10px;bottom:7px}.hh-class-card canvas{width:56px!important;height:56px!important;border-radius:13px!important}.hh-class-card em{font-size:.48rem!important}.hh-class-card strong{font-size:.78rem!important}.hh-class-card span{font-size:.63rem!important}.hh-class-card small{display:none!important}}
@media (orientation:landscape) and (max-height:540px){.hh-class-seals,.hh-class-titlebar .hh-sub{display:none!important}.hh-class-card{min-height:104px!important}.hh-class-card canvas{width:46px!important;height:46px!important}}


/* v44 small-screen polish: compact site chrome on short laptops so the canvas HUD does not eat the play field. */
@media (max-height:820px) and (min-width:761px){
  .hh-shell{padding:4px 0 6px!important;gap:4px!important}
  .hh-top{min-height:42px!important;height:42px!important;padding:4px 9px!important;border-radius:14px!important}
  .hh-top:before{opacity:.22!important;height:70px!important;inset:-42px -40px auto -40px!important}.hh-top:after{display:none!important}
  .hh-brand{gap:8px!important}.hh-mark{width:30px!important;height:30px!important;border-radius:10px!important}.hh-mark span{font-size:.88rem!important}
  .hh-brand p,.hh-rune-strip{display:none!important}.hh-brand h1{font-size:1.04rem!important;white-space:nowrap!important}.hh-season{font-size:.56rem!important;padding:2px 6px!important}
  .hh-actions{gap:5px!important}.hh-actions .hh-ghost{min-height:30px!important;padding:4px 10px!important;border-radius:11px!important;font-size:.78rem!important}
  .hh-canvas-shell{padding:4px!important;border-radius:16px!important}#gameCanvas{min-height:0!important;border-radius:12px!important}
  .hh-class-panel{max-height:calc(100dvh - 62px);overflow:auto}.hh-class-grid{gap:9px}.hh-class-card{padding:9px 7px}.hh-class-card canvas{width:74px!important;height:74px!important}.hh-class-card small{display:none}
}
@media (max-height:640px) and (min-width:761px){
  .hh-shell{padding:2px 0!important;gap:2px!important}.hh-top{height:32px!important;min-height:32px!important;padding:2px 6px!important;border-radius:10px!important}
  .hh-mark{width:24px!important;height:24px!important}.hh-brand h1{font-size:.82rem!important}.hh-season{display:none!important}.hh-actions .hh-ghost{min-height:24px!important;padding:2px 7px!important;font-size:.68rem!important;border-radius:8px!important}
  .hh-canvas-shell{padding:2px!important;border-radius:10px!important}.hh-class-overlay{padding-top:36px!important}.hh-class-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.hh-class-card canvas{width:48px!important;height:48px!important}.hh-class-card em{display:none}.hh-class-card strong{font-size:.70rem}.hh-class-card span{font-size:.58rem}
}
@media (min-width:981px){.hh-class-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* v45/v46: styled class-selection scrollbar and clearer class identities. */
.hh-class-overlay,.hh-class-panel{
  scrollbar-width:thin;
  scrollbar-color:rgba(229,192,122,.74) rgba(7,8,13,.72);
}
.hh-class-overlay::-webkit-scrollbar,.hh-class-panel::-webkit-scrollbar{width:12px;height:12px}
.hh-class-overlay::-webkit-scrollbar-track,.hh-class-panel::-webkit-scrollbar-track{
  background:linear-gradient(180deg,rgba(7,8,13,.82),rgba(17,13,18,.88));
  border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(229,192,122,.10);
}
.hh-class-overlay::-webkit-scrollbar-thumb,.hh-class-panel::-webkit-scrollbar-thumb{
  border:3px solid rgba(7,8,13,.86);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,238,187,.96),rgba(229,157,81,.78) 55%,rgba(85,220,255,.48));
  box-shadow:0 0 16px rgba(229,192,122,.18);
}
.hh-class-overlay::-webkit-scrollbar-thumb:hover,.hh-class-panel::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#fff6cf,#ffc16f 54%,#8ff6ff);
}
.hh-class-card[data-class="witch"]{--accent:#ffcf7a;--accent-rgb:255,207,122}

/* v46: compact class choice, no forced scroll on normal laptop/desktop heights. */
@media (min-width:761px){
  .hh-class-overlay{padding:14px 10px!important;place-items:center!important;overflow:hidden!important}
  .hh-class-panel{width:min(1060px,calc(100vw - 24px))!important;padding:18px 18px 20px!important;border-radius:20px!important;max-height:calc(100dvh - 28px)!important;overflow:visible!important}
  .hh-class-panel:after{bottom:7px!important;font-size:.56rem!important;opacity:.85!important}
  .hh-class-titlebar{margin-bottom:10px!important;padding-top:0!important}
  .hh-class-titlebar .hh-kicker{font-size:.66rem!important;padding:4px 9px!important}
  .hh-class-titlebar h2{font-size:clamp(1.75rem,3.4vw,3.15rem)!important;line-height:.96!important;margin:5px 0 7px!important}
  .hh-class-titlebar .hh-sub{font-size:.88rem!important;line-height:1.24!important;margin-bottom:0!important;max-width:760px!important}
  .hh-class-seals{margin-top:7px!important;gap:6px!important}
  .hh-class-seals span{font-size:.56rem!important;padding:4px 7px!important}
  .hh-class-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
  .hh-class-card{min-height:202px!important;padding:10px 9px 11px!important;border-radius:15px!important;gap:5px!important}
  .hh-class-card canvas{width:82px!important;height:82px!important;border-radius:16px!important;margin-bottom:0!important}
  .hh-class-card em{font-size:.55rem!important;padding:3px 7px!important;margin-top:0!important}
  .hh-class-card strong{font-size:.94rem!important;line-height:1.06!important}
  .hh-class-card span{font-size:.76rem!important;line-height:1.08!important}
  .hh-class-card small{font-size:.72rem!important;line-height:1.22!important;max-width:190px!important}
}
@media (min-width:1180px){
  .hh-class-card{min-height:210px!important}.hh-class-card canvas{width:86px!important;height:86px!important}
}
@media (min-width:761px) and (max-height:760px){
  .hh-class-overlay{padding:8px 8px!important;overflow:hidden!important}
  .hh-class-panel{padding:12px 12px 14px!important;max-height:calc(100dvh - 16px)!important;overflow:visible!important}
  .hh-class-titlebar h2{font-size:1.55rem!important;margin:2px 0 5px!important}.hh-class-titlebar .hh-sub{display:none!important}.hh-class-seals{display:none!important}
  .hh-class-grid{gap:8px!important}.hh-class-card{min-height:154px!important;padding:7px 6px 8px!important}.hh-class-card canvas{width:62px!important;height:62px!important}.hh-class-card small{display:none!important}.hh-class-card em{font-size:.49rem!important}.hh-class-card strong{font-size:.78rem!important}.hh-class-card span{font-size:.62rem!important}
}
@media (min-width:761px) and (max-height:610px){
  .hh-class-panel{overflow:auto!important}.hh-class-grid{gap:6px!important}.hh-class-card{min-height:126px!important}.hh-class-card canvas{width:48px!important;height:48px!important}.hh-class-card em{display:none!important}
}

/* v51 class unlocks: locked classes show as grey silhouettes with clear achievement requirements. */
.hh-class-card.is-locked{
  cursor:not-allowed!important;
  border-color:rgba(132,143,164,.28)!important;
  background:radial-gradient(120px 115px at 50% 18%,rgba(120,132,154,.10),transparent 72%),linear-gradient(180deg,rgba(13,15,22,.96),rgba(7,8,12,.985))!important;
  filter:saturate(.62);
}
.hh-class-card.is-locked:hover,.hh-class-card.is-locked:focus-visible{
  transform:none!important;
  box-shadow:0 18px 45px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.hh-class-card.is-locked canvas{
  filter:grayscale(1) brightness(.62) contrast(1.15)!important;
  opacity:.78!important;
}
.hh-class-card.is-locked em,.hh-class-card.is-locked > span:not(.hh-card-glow),.hh-class-card.is-locked > small:not(.hh-unlock-hint){display:none!important}
.hh-lock-badge{
  display:none;
  position:absolute;
  top:10px;right:10px;
  z-index:2;
  padding:4px 8px;
  border:1px solid rgba(210,218,232,.34);
  border-radius:999px;
  background:rgba(3,5,10,.72);
  color:#d5dbe7;
  font:900 .56rem/1 system-ui,sans-serif;
  letter-spacing:.10em;
  text-transform:uppercase;
  box-shadow:0 0 14px rgba(0,0,0,.32);
}
.hh-class-card.is-locked .hh-lock-badge{display:block}
.hh-class-card:not(.is-locked) .hh-lock-badge,.hh-class-card:not(.is-locked) .hh-unlock-hint{display:none!important}
.hh-unlock-hint{
  display:none;
  color:#c6cfdf!important;
  font-size:.68rem!important;
  line-height:1.18!important;
  max-width:190px;
  padding:5px 7px;
  border:1px solid rgba(210,218,232,.16);
  border-radius:9px;
  background:rgba(0,0,0,.24);
}
.hh-class-card.is-locked .hh-unlock-hint{display:block!important}
.hh-lock-shake{animation:hhLockShake .38s ease both}.hh-unlock-pop{color:#fff4d8!important;border-color:rgba(255,207,122,.45)!important;box-shadow:0 0 16px rgba(255,207,122,.16)}
@keyframes hhLockShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
@media (max-width:760px){.hh-lock-badge{top:6px;right:6px;font-size:.44rem;padding:3px 5px}.hh-unlock-hint{font-size:.54rem!important;padding:3px 4px;line-height:1.08!important}.hh-class-card.is-locked canvas{width:52px!important;height:52px!important}}

/* v58 polish: top-left ruins cleanup and upright Phantom Hearse fix. */
.hh-top{
  min-width:0;
  overflow:hidden;
  gap:12px;
}
.hh-brand{min-width:0;max-width:calc(100% - 360px)}
.hh-brand h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 0 rgba(0,0,0,.8),0 0 16px rgba(255,224,154,.14)}
.hh-season{display:none!important}
.hh-rune-strip{
  max-width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:5px 7px;
  overflow:hidden;
  line-height:1.05;
  max-height:43px;
}
.hh-rune-strip span{
  white-space:nowrap;
  border-radius:6px!important;
  padding:4px 8px!important;
  color:#f7e7bd!important;
  text-shadow:0 1px 0 #000,0 0 8px rgba(255,226,156,.12);
}
.hh-actions{flex-shrink:0;display:flex;align-items:center;gap:8px;max-width:360px;flex-wrap:wrap;justify-content:flex-end}
.hh-actions .hh-ghost{white-space:nowrap;border-radius:10px!important;min-height:34px;box-shadow:0 8px 20px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,238,190,.045)!important}
.hh-guide-hero{
  border:1px solid rgba(216,186,120,.28);
  background:radial-gradient(circle at 20% 10%,rgba(130,220,255,.12),transparent 34%),radial-gradient(circle at 78% 16%,rgba(255,208,106,.11),transparent 30%),linear-gradient(180deg,rgba(13,17,25,.94),rgba(5,6,10,.96));
  border-radius:18px;
  padding:14px;
  margin:10px 0 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 30px rgba(0,0,0,.28);
}
.hh-guide-hero p{margin:10px 0 0;color:#e9dcc2;line-height:1.45;font-size:.95rem}
.hh-guide-artrow{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.hh-guide-artrow img{
  width:72px;height:72px;object-fit:cover;border-radius:16px;
  border:1px solid rgba(255,226,156,.25);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.22));
  box-shadow:0 0 20px rgba(255,215,118,.06),inset 0 0 0 1px rgba(255,255,255,.035);
}
.hh-guide-grid-polished{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.hh-guide-grid-polished article{
  min-height:0;
  border:1px solid rgba(208,180,118,.23)!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,rgba(14,17,24,.95),rgba(6,8,12,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 26px rgba(0,0,0,.24);
}
.hh-guide-grid-polished article p{font-size:.88rem;line-height:1.38;color:#d9cfbd}
.hh-guide-strip{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin:12px 0 14px;
}
.hh-guide-strip span{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:8px 6px;
  border:1px solid rgba(216,186,120,.18);
  border-radius:14px;
  background:rgba(0,0,0,.22);
  color:#f1e0bd;
  font:900 .62rem/1.1 system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.06em;
  text-align:center;
}
.hh-guide-strip img{width:46px;height:46px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 5px 9px rgba(0,0,0,.45))}
.hh-dialog .hh-modal h2{color:#fff0cf;text-shadow:0 2px 0 #000,0 0 16px rgba(255,216,128,.14)}
@media (max-width:1100px){
  .hh-brand{max-width:calc(100% - 300px)}
  .hh-rune-strip{max-height:22px}.hh-rune-strip span:nth-child(n+5){display:none}
  .hh-actions{max-width:300px;gap:6px}.hh-actions .hh-ghost{padding:8px 11px!important;min-height:32px}
}
@media (max-width:760px){
  .hh-top{height:34px!important;padding:3px 6px!important;overflow:hidden!important}
  .hh-brand{max-width:none!important}.hh-brand h1{font-size:.78rem!important;max-width:108px!important}.hh-rune-strip{display:none!important}
  .hh-actions{max-width:none!important;flex-wrap:nowrap!important;gap:4px!important}.hh-actions .hh-ghost{width:30px!important;min-width:30px!important;height:28px!important;min-height:28px!important;border-radius:9px!important}
  .hh-guide-artrow img{width:52px;height:52px;border-radius:13px}.hh-guide-hero{padding:10px;border-radius:15px}.hh-guide-hero p{font-size:.82rem;line-height:1.32}
  .hh-guide-grid-polished{grid-template-columns:1fr!important}.hh-guide-grid-polished article p{font-size:.78rem}.hh-guide-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.hh-guide-strip span{font-size:.55rem}.hh-guide-strip img{width:38px;height:38px}
}
@media (orientation:landscape) and (max-height:560px){
  .hh-top{height:30px!important}.hh-brand p,.hh-rune-strip{display:none!important}.hh-actions .hh-ghost{height:26px!important;min-height:26px!important;width:30px!important;min-width:30px!important;padding:0!important}
}

/* v54 finished-layout pass: keep the top-right controls fully inside every desktop, laptop, and phone viewport. */
.hh-shell{
  width:min(1440px,calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
}
.hh-top{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) max-content!important;
  align-items:center!important;
  justify-content:stretch!important;
  gap:12px!important;
  padding:9px 14px!important;
  overflow:hidden!important;
  min-width:0!important;
}
.hh-brand{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  overflow:hidden!important;
}
.hh-brand > div{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
}
.hh-brand h1{
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.hh-rune-strip{
  flex-wrap:nowrap!important;
  overflow:hidden!important;
  max-width:100%!important;
  max-height:20px!important;
  gap:5px!important;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 88%,transparent 100%);
}
.hh-rune-strip span{
  flex:0 0 auto!important;
  font-size:.56rem!important;
  line-height:1!important;
  padding:3px 7px!important;
  border-radius:7px!important;
}
.hh-actions{
  max-width:none!important;
  width:auto!important;
  min-width:max-content!important;
  flex:0 0 auto!important;
  flex-wrap:nowrap!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:6px!important;
  overflow:visible!important;
}
.hh-actions .hh-ghost{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  min-width:0!important;
  min-height:32px!important;
  height:32px!important;
  padding:6px 11px!important;
  border-radius:11px!important;
  font-size:.78rem!important;
  line-height:1!important;
}
.hh-actions .hh-ghost span{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media (max-width:1180px){
  .hh-shell{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important}
  .hh-top{padding:8px 10px!important;gap:9px!important}
  .hh-actions{gap:5px!important}
  .hh-actions .hh-ghost{height:30px!important;min-height:30px!important;padding:5px 9px!important;font-size:.72rem!important}
  .hh-rune-strip span:nth-child(n+5){display:none!important}
}
@media (max-width:980px){
  .hh-top{min-height:38px!important;height:38px!important;padding:5px 8px!important;border-radius:13px!important}
  .hh-brand p,.hh-rune-strip{display:none!important}
  .hh-mark{width:28px!important;height:28px!important;min-width:28px!important;border-radius:10px!important}
  .hh-mark span{font-size:.82rem!important}
  .hh-brand h1{font-size:.92rem!important;letter-spacing:.01em!important}
  .hh-actions{gap:4px!important}
  .hh-actions .hh-ghost{width:33px!important;min-width:33px!important;height:30px!important;min-height:30px!important;padding:0!important;border-radius:9px!important;font-size:0!important}
  .hh-actions .hh-ghost span{display:none!important}
  .hh-actions .hh-ghost:before{display:none!important}
  #guideBtn::after{content:'?';font-size:.82rem;font-weight:1000;color:#fff6d8}
  #pauseBtn::after{content:'Ⅱ';font-size:.76rem;font-weight:1000;color:#fff6d8}
  #restartBtn::after{content:'↻';font-size:.86rem;font-weight:1000;color:#fff6d8}
  .hh-actions a.hh-ghost::after{content:'♛';font-size:.80rem;font-weight:1000;color:#fff6d8}
}
@media (max-width:760px){
  .hh-shell{width:100vw!important;max-width:100vw!important}
  .hh-top{
    grid-template-columns:minmax(0,1fr) max-content!important;
    left:5px!important;
    right:5px!important;
    width:auto!important;
    height:34px!important;
    min-height:34px!important;
    padding:3px 6px!important;
    gap:6px!important;
    border-radius:12px!important;
  }
  .hh-brand{gap:6px!important}
  .hh-brand h1{font-size:.78rem!important;max-width:112px!important}
  .hh-actions{gap:4px!important;min-width:max-content!important}
  .hh-actions .hh-ghost{width:30px!important;min-width:30px!important;height:28px!important;min-height:28px!important;border-radius:9px!important}
}
@media (max-width:380px){
  .hh-top{left:4px!important;right:4px!important;gap:4px!important;padding-left:4px!important;padding-right:4px!important}
  .hh-brand h1{max-width:92px!important;font-size:.70rem!important}
  .hh-mark{display:grid!important;width:22px!important;height:22px!important;min-width:22px!important}
  .hh-actions{gap:3px!important}
  .hh-actions .hh-ghost{width:27px!important;min-width:27px!important;height:26px!important;min-height:26px!important}
}
@media (orientation:landscape) and (max-height:560px){
  .hh-top{height:30px!important;min-height:30px!important;padding:2px 6px!important}
  .hh-brand h1{font-size:.74rem!important;max-width:112px!important}
  .hh-actions .hh-ghost{width:29px!important;min-width:29px!important;height:26px!important;min-height:26px!important}
}

/* v54 final UI polish: cleaner finished header/buttons/guide without changing gameplay. */
.hh-actions .hh-ghost{
  border-color:rgba(233,202,136,.35)!important;
  background:linear-gradient(180deg,rgba(255,246,215,.12),rgba(12,14,20,.76))!important;
  box-shadow:0 9px 18px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,246,215,.10),inset 0 0 0 1px rgba(255,255,255,.035)!important;
}
.hh-actions .hh-ghost:hover,.hh-actions .hh-ghost:focus-visible{
  border-color:rgba(255,226,154,.55)!important;
  box-shadow:0 12px 24px rgba(0,0,0,.38),0 0 18px rgba(132,233,255,.10),inset 0 1px 0 rgba(255,246,215,.15)!important;
}
.hh-dialog .hh-modal{
  border-color:rgba(233,202,136,.38)!important;
  background:radial-gradient(520px 170px at 50% 0,rgba(255,220,145,.12),transparent 72%),linear-gradient(180deg,rgba(19,18,22,.985),rgba(6,7,11,.99))!important;
}
.hh-guide-grid-polished article strong{color:#fff1ca;text-shadow:0 0 12px rgba(255,215,111,.12)}
.hh-guide-grid-polished article span{box-shadow:0 0 16px rgba(132,233,255,.10),inset 0 1px 0 rgba(255,255,255,.24)}

/* v58 finish pass: safer ruins obstacle spacing and upright Phantom Hearse visuals. */


/* v60 hard fit: protect the top-right controls from being clipped on small laptops while keeping the finished graveyard header. */
.hh-shell{
  width:100vw!important;
  max-width:100vw!important;
  padding-left:max(8px,env(safe-area-inset-left))!important;
  padding-right:max(10px,env(safe-area-inset-right))!important;
}
.hh-top{
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
  grid-template-columns:minmax(112px,1fr) auto!important;
  padding-right:18px!important;
}
.hh-actions{
  justify-self:end!important;
  padding-right:2px!important;
  min-width:0!important;
  max-width:max-content!important;
}
.hh-actions .hh-ghost{
  max-width:96px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.hh-actions a.hh-ghost{max-width:82px!important}
.hh-actions .hh-ghost span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1320px) and (min-width:981px){
  .hh-top{padding-left:12px!important;padding-right:14px!important;gap:8px!important}
  .hh-actions{gap:5px!important}
  .hh-actions .hh-ghost{height:30px!important;min-height:30px!important;padding:5px 8px!important;font-size:.70rem!important;max-width:78px!important;border-radius:10px!important}
  .hh-actions a.hh-ghost{max-width:62px!important}
  .hh-rune-strip span:nth-child(n+4){display:none!important}
}
@media (max-width:1040px){
  .hh-top{padding-right:10px!important;overflow:visible!important}
  .hh-actions .hh-ghost{font-size:0!important;width:32px!important;min-width:32px!important;max-width:32px!important;padding:0!important}
  .hh-actions .hh-ghost span{display:none!important}
  .hh-actions .hh-ghost:before{display:none!important}
  #guideBtn::after{content:'?';font-size:.82rem;font-weight:1000;color:#fff6d8}
  #pauseBtn::after{content:'Ⅱ';font-size:.76rem;font-weight:1000;color:#fff6d8}
  #restartBtn::after{content:'↻';font-size:.86rem;font-weight:1000;color:#fff6d8}
  .hh-actions a.hh-ghost::after{content:'♛';font-size:.80rem;font-weight:1000;color:#fff6d8}
}
@media (max-width:420px){
  .hh-top{grid-template-columns:minmax(72px,1fr) auto!important;padding-left:5px!important;padding-right:6px!important}
  .hh-brand h1{max-width:82px!important}
  .hh-actions{gap:3px!important}
  .hh-actions .hh-ghost{width:26px!important;min-width:26px!important;max-width:26px!important}
}


/* v61 phone class chooser fit: prevent class cards from clipping off the right edge. */
@media (max-width:760px){
  .hh-class-overlay{overflow-x:hidden!important;padding-left:max(8px,env(safe-area-inset-left))!important;padding-right:max(8px,env(safe-area-inset-right))!important;box-sizing:border-box!important;}
  .hh-class-panel{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;box-sizing:border-box!important;overflow-x:hidden!important;margin-left:auto!important;margin-right:auto!important;}
  .hh-class-grid{width:100%!important;max-width:100%!important;box-sizing:border-box!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;overflow:visible!important;}
  .hh-class-card{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;}
  .hh-class-card strong,.hh-class-card span,.hh-class-card em{max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
}
@media (max-width:380px){
  .hh-class-grid{grid-template-columns:1fr!important;}
  .hh-class-panel{width:calc(100vw - 14px)!important;max-width:calc(100vw - 14px)!important;}
}
@media (max-width:760px) and (orientation:landscape){
  .hh-class-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}

/* v65: class specialization modal polish. */
.hh-special-modal{border-color:rgba(157,252,255,.34)!important;background:radial-gradient(circle at 50% 0,rgba(97,232,255,.13),transparent 36%),linear-gradient(180deg,rgba(20,19,29,.99),rgba(6,7,11,.99))!important}
.hh-special-modal .hh-kicker{color:#9dfcff!important;border-color:rgba(157,252,255,.28)!important;background:rgba(97,232,255,.07)!important}
.hh-special-modal h2{color:#e9fbff!important;text-shadow:0 0 22px rgba(157,252,255,.24),0 2px 0 rgba(0,0,0,.55)!important}
.hh-special-card{border-color:rgba(157,252,255,.30)!important;background:radial-gradient(circle at 15% 12%,rgba(157,252,255,.13),transparent 32%),linear-gradient(180deg,rgba(25,28,43,.99),rgba(8,9,15,.99))!important}
.hh-special-card:after{content:"SPECIALIZATION";position:absolute;right:10px;bottom:8px;font-size:.58rem;font-weight:1000;letter-spacing:.12em;color:rgba(157,252,255,.48);pointer-events:none}
.hh-special-card:hover{border-color:rgba(157,252,255,.70)!important;box-shadow:0 22px 52px rgba(0,0,0,.48),0 0 34px rgba(97,232,255,.16)!important}
@media (max-width:760px){.hh-special-card:after{font-size:.48rem;right:8px;bottom:6px}.hh-special-modal h2{font-size:1.12rem!important}}


/* v66 mobile landscape/fullscreen + specialization polish */
.hh-sound-btn[aria-pressed="true"]{color:#ffd76f;border-color:rgba(255,215,111,.38);background:rgba(255,215,111,.08)}
.hh-sound-btn{min-width:88px}

@media (orientation: landscape) and (max-height: 540px) and (pointer: coarse){
  html,body{width:100vw;height:100svh;overflow:hidden;background:#03060b;}
  .hh-shell{
    width:100vw!important;
    height:100svh!important;
    max-height:100svh!important;
    padding:0!important;
    margin:0!important;
    display:block!important;
    overflow:hidden!important;
  }
  .hh-stage,.hh-canvas-shell{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100svh!important;
    max-height:100svh!important;
    border-radius:0!important;
    padding:0!important;
    border:0!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }
  #gameCanvas{
    width:100vw!important;
    height:100svh!important;
    min-height:0!important;
    border-radius:0!important;
  }
  .hh-top{
    position:fixed!important;
    z-index:30!important;
    top:calc(env(safe-area-inset-top,0px) + 4px)!important;
    left:calc(env(safe-area-inset-left,0px) + 6px)!important;
    right:calc(env(safe-area-inset-right,0px) + 6px)!important;
    min-height:28px!important;
    padding:3px 6px!important;
    border-radius:12px!important;
    gap:5px!important;
    background:linear-gradient(180deg,rgba(8,10,16,.72),rgba(4,6,10,.58))!important;
    backdrop-filter:blur(7px)!important;
  }
  .hh-brand{gap:5px!important}
  .hh-brand p,.hh-mark{display:none!important}
  .hh-brand h1{font-size:.86rem!important;line-height:1!important;white-space:nowrap!important}
  .hh-actions{gap:4px!important;flex-wrap:nowrap!important}
  .hh-actions .hh-ghost,.hh-actions .hh-primary{
    min-height:24px!important;
    height:24px!important;
    padding:3px 7px!important;
    font-size:.64rem!important;
    line-height:1!important;
  }
  .hh-actions a[href*="leaderboards"]{display:none!important}
  .hh-sound-btn{min-width:62px!important}
  .hh-class-overlay,.hh-overlay{inset:0!important;padding:6px!important;}
  .hh-class-panel,.hh-overlay-panel{
    width:min(96vw,760px)!important;
    max-height:calc(100svh - 12px)!important;
    overflow:auto!important;
    padding:8px 10px!important;
    border-radius:16px!important;
  }
  .hh-class-panel h2,.hh-overlay-panel h2{font-size:1.18rem!important;margin:2px 0 3px!important}
  .hh-class-panel .hh-sub{display:none!important}
  .hh-class-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}
  .hh-class-card{min-height:88px!important;padding:6px!important;border-radius:14px!important;gap:2px!important}
  .hh-class-card canvas{width:46px!important;height:46px!important;border-radius:12px!important}
  .hh-class-card em,.hh-class-card small{display:none!important}
  .hh-class-card strong{font-size:.66rem!important}
  .hh-class-card span{font-size:.54rem!important}
  .hh-dialog .hh-modal{
    max-height:calc(100svh - 16px)!important;
    overflow:auto!important;
    padding:10px!important;
    border-radius:16px!important;
  }
  .hh-upgrade-grid{gap:7px!important}
  .hh-upgrade-card{padding:8px!important;border-radius:13px!important}
  .hh-upgrade-icon{width:46px!important;height:46px!important}
}

/* v66: make specialization choices feel like a class shrine, not a normal upgrade row. */
.hh-special-modal{
  width:min(880px,calc(100vw - 26px))!important;
  overflow:hidden!important;
}
.hh-special-modal .hh-upgrade-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;
  max-width:760px!important;
  margin:14px auto 0!important;
  justify-content:center!important;
  align-items:stretch!important;
}
.hh-special-card{
  min-height:235px!important;
  justify-items:center!important;
  text-align:center!important;
  padding:16px 14px 28px!important;
  position:relative!important;
  overflow:hidden!important;
}
.hh-special-card .hh-upgrade-icon{
  width:108px!important;
  height:108px!important;
  margin:0 auto 4px!important;
  border-radius:26px!important;
  background:radial-gradient(circle at 50% 42%,rgba(157,252,255,.18),rgba(0,0,0,.20) 62%,rgba(0,0,0,.42))!important;
  box-shadow:inset 0 0 0 1px rgba(157,252,255,.16),0 0 30px rgba(97,232,255,.08)!important;
}
.hh-special-card strong{
  font-size:1.08rem!important;
  color:#f4fbff!important;
}
.hh-special-card p{
  max-width:30ch!important;
  margin-inline:auto!important;
}
.hh-special-card .hh-upgrade-tag{
  justify-self:center!important;
  margin-bottom:2px!important;
}
@media (max-width:760px){
  .hh-special-modal .hh-upgrade-grid{grid-template-columns:1fr 1fr!important;max-width:560px!important}
}
@media (max-width:520px){
  .hh-special-modal .hh-upgrade-grid{grid-template-columns:1fr!important}
}


/* v67: stronger mobile landscape viewport + compact top overlay */
@media (orientation: landscape) and (max-height: 540px) and (pointer: coarse){
  html,body{width:100vw!important;height:100svh!important;overflow:hidden!important;background:#03060b!important;overscroll-behavior:none!important;}
  .hh-shell{display:block!important;position:fixed!important;inset:0!important;width:100vw!important;height:100svh!important;max-height:100svh!important;padding:0!important;margin:0!important;overflow:hidden!important;}
  .hh-stage,.hh-canvas-shell{position:fixed!important;inset:0!important;width:100vw!important;height:100svh!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;overflow:hidden!important;}
  #gameCanvas{width:100vw!important;height:100svh!important;min-height:0!important;border-radius:0!important;display:block!important;}
  .hh-top{position:fixed!important;top:calc(env(safe-area-inset-top,0px) + 2px)!important;right:calc(env(safe-area-inset-right,0px) + 5px)!important;left:auto!important;width:auto!important;height:24px!important;min-height:24px!important;padding:0!important;margin:0!important;border:0!important;border-radius:10px!important;background:rgba(3,5,9,.35)!important;box-shadow:none!important;backdrop-filter:blur(4px)!important;z-index:50!important;}
  .hh-brand{display:none!important}.hh-top:before,.hh-top:after{display:none!important}
  .hh-actions{display:flex!important;gap:3px!important;align-items:center!important;justify-content:flex-end!important;padding:0!important;margin:0!important;width:auto!important;}
  .hh-actions .hh-ghost{width:24px!important;min-width:24px!important;max-width:24px!important;height:22px!important;min-height:22px!important;padding:0!important;border-radius:7px!important;font-size:0!important;background:rgba(8,10,16,.52)!important;border:1px solid rgba(233,202,136,.24)!important;box-shadow:none!important;}
  .hh-actions .hh-ghost span{display:none!important}.hh-actions .hh-ghost:before{display:none!important}
  .hh-actions .hh-ghost::after{font-size:.70rem!important;line-height:1!important;color:#fff6d8!important;text-shadow:0 0 8px rgba(157,252,255,.20)!important;}
  #soundBtn{width:30px!important;min-width:30px!important;max-width:30px!important;}
  #soundBtn::after{content:attr(data-icon)!important;}
  #pauseBtn::after{content:'Ⅱ'!important;}
  #guideBtn,#restartBtn,.hh-actions a.hh-ghost{display:none!important;}
  .hh-class-overlay,.hh-overlay{inset:0!important;padding:5px!important;overflow:auto!important;}
  .hh-class-panel,.hh-overlay-panel{width:min(96vw,760px)!important;max-height:calc(100svh - 10px)!important;overflow:auto!important;padding:8px 10px!important;border-radius:15px!important;}
  .hh-class-titlebar .hh-sub{display:none!important}.hh-class-titlebar h2{font-size:1.05rem!important;margin:1px 0 4px!important}.hh-class-titlebar:before{display:none!important}
  .hh-class-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}.hh-class-card{min-height:84px!important;padding:5px!important;border-radius:12px!important}.hh-class-card canvas{width:44px!important;height:44px!important}.hh-class-card em,.hh-class-card small{display:none!important}.hh-class-card strong{font-size:.62rem!important}.hh-class-card span{font-size:.52rem!important}
}
/* v67: specialization modal balance */
.hh-special-modal{width:min(860px,calc(100vw - 24px))!important;}
.hh-special-modal .hh-upgrade-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(245px,285px))!important;justify-content:center!important;align-items:stretch!important;max-width:900px!important;margin:14px auto 0!important;}
.hh-special-card{min-height:236px!important;text-align:center!important;justify-items:center!important;padding:16px 14px 30px!important;}
.hh-special-card .hh-upgrade-icon{width:110px!important;height:110px!important;margin:0 auto 4px!important;border-radius:28px!important;}
.hh-special-card .hh-upgrade-tag{justify-self:center!important}.hh-special-card p{max-width:30ch!important;margin-left:auto!important;margin-right:auto!important;}


/* v68: canvas aspect correction for mobile landscape nova/circle visuals. */
@media (orientation: landscape) and (max-height: 540px) and (pointer: coarse){
  .hh-stage,.hh-canvas-shell{
    width:var(--hh-game-w,100vw)!important;
    height:var(--hh-game-h,100svh)!important;
  }
  #gameCanvas{
    width:var(--hh-game-w,100vw)!important;
    height:var(--hh-game-h,100svh)!important;
    aspect-ratio:auto!important;
  }
}


/* v69: specialization path choices are earlier and more strategic. */
.hh-special-modal .hh-kicker{
  letter-spacing:.16em!important;
}
.hh-special-card{
  min-height:248px!important;
}
.hh-special-card strong{
  font-size:1.12rem!important;
}
.hh-special-card p{
  font-size:.92rem!important;
  line-height:1.38!important;
}
.hh-special-card .hh-upgrade-tag{
  text-transform:uppercase!important;
  letter-spacing:.12em!important;
}


/* v70: compact laptop/tablet mode. The play wrapper already has Hub/Leaderboard,
   so the in-game header becomes a tiny control island instead of consuming a full row. */
@media (max-height: 820px) and (min-width: 761px){
  .hh-shell{
    width:100%!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:0!important;
    margin:0!important;
    display:block!important;
    position:relative!important;
    overflow:hidden!important;
  }
  .hh-stage,.hh-canvas-shell{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding:0!important;
    border-radius:0!important;
    border:0!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }
  #gameCanvas{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    border-radius:0!important;
    display:block!important;
  }
  .hh-top{
    position:absolute!important;
    z-index:40!important;
    top:6px!important;
    right:8px!important;
    left:auto!important;
    width:auto!important;
    height:26px!important;
    min-height:26px!important;
    padding:0!important;
    border:0!important;
    border-radius:10px!important;
    background:rgba(3,5,9,.34)!important;
    box-shadow:none!important;
    backdrop-filter:blur(5px)!important;
  }
  .hh-brand{display:none!important;}
  .hh-actions{
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
    flex-wrap:nowrap!important;
    padding:0!important;
    margin:0!important;
  }
  .hh-actions .hh-ghost{
    height:24px!important;
    min-height:24px!important;
    padding:0 8px!important;
    border-radius:8px!important;
    font-size:.64rem!important;
    line-height:1!important;
    background:rgba(8,10,16,.62)!important;
    border:1px solid rgba(233,202,136,.25)!important;
    box-shadow:none!important;
  }
  .hh-actions a.hh-ghost,#guideBtn{display:none!important;}
  #soundBtn{min-width:66px!important;}
}
/* v70: slim the outer website play header on laptops/tablets without removing navigation. */


/* v71: specialization should feel like an event, not a normal level-up. */
.hh-special-modal{
  position:relative!important;
  overflow:hidden!important;
}
.hh-special-modal:before{
  content:"";
  position:absolute;
  inset:-45% -20% auto -20%;
  height:68%;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,rgba(157,252,255,.22),transparent 42%),
    radial-gradient(circle at 20% 70%,rgba(255,215,111,.13),transparent 30%),
    radial-gradient(circle at 80% 72%,rgba(178,140,255,.16),transparent 34%);
  animation:hh-special-glow 2.8s ease-in-out infinite alternate;
}
.hh-special-pop{
  animation:hh-special-pop .46s cubic-bezier(.2,.9,.25,1.15);
}
.hh-special-banner{
  grid-column:1/-1;
  display:grid;
  place-items:center;
  gap:5px;
  padding:12px 14px 14px;
  margin:0 auto 2px;
  width:min(100%,720px);
  border-radius:20px;
  border:1px solid rgba(157,252,255,.28);
  background:
    radial-gradient(circle at 50% 0,rgba(157,252,255,.16),transparent 64%),
    linear-gradient(180deg,rgba(13,18,32,.92),rgba(5,7,12,.94));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 18px 44px rgba(0,0,0,.32);
  text-align:center;
}
.hh-special-banner .hh-special-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  color:#06111f;
  background:linear-gradient(135deg,#9dfcff,#ffd76f);
  font-weight:1000;
  letter-spacing:.14em;
  font-size:.68rem;
}
.hh-special-banner strong{
  color:#f4fbff;
  font-size:clamp(1.25rem,3.2vw,1.9rem);
  letter-spacing:-.04em;
  text-shadow:0 0 22px rgba(157,252,255,.22);
}
.hh-special-banner span{
  color:#b9cde8;
  font-size:.92rem;
}
.hh-special-card{
  transform-origin:center;
}
.hh-special-card:before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:20px;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.045);
}
.hh-special-card .hh-special-pick{
  margin-top:2px;
  display:inline-flex;
  padding:5px 10px;
  border-radius:999px;
  color:#fff6d7;
  background:rgba(255,215,111,.09);
  border:1px solid rgba(255,215,111,.20);
  font-style:normal;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
@keyframes hh-special-pop{
  0%{transform:scale(.965);filter:brightness(.92)}
  70%{transform:scale(1.012);filter:brightness(1.12)}
  100%{transform:scale(1);filter:brightness(1)}
}
@keyframes hh-special-glow{
  from{opacity:.65;transform:translateY(-10px) scale(1)}
  to{opacity:1;transform:translateY(2px) scale(1.05)}
}


/* v72 performance pass: make specialization feel like a rare class event without more canvas cost. */
.hh-special-modal:before{content:'CLASS PATH UNLOCKED';display:block;margin:0 auto 10px;width:max-content;padding:6px 14px;border-radius:999px;border:1px solid rgba(157,252,255,.42);background:rgba(97,232,255,.10);color:#dffbff;font-weight:1000;font-size:.72rem;letter-spacing:.18em;text-shadow:0 0 18px rgba(97,232,255,.36);animation:hhSpecPulse 1.6s ease-in-out infinite;}
@keyframes hhSpecPulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.035);filter:brightness(1.18)}}


/* v73: mobile specialization readability + no brief scrollbar flicker */
.hh-dialog .hh-modal,
.hh-upgrade-grid{
  scrollbar-width:none;
}
.hh-dialog .hh-modal::-webkit-scrollbar,
.hh-upgrade-grid::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}
.hh-dialog[open]{
  overflow:hidden!important;
}
.hh-special-modal{
  color:#f7fbff!important;
  background:
    radial-gradient(circle at 50% 0,rgba(125,236,255,.19),transparent 34%),
    radial-gradient(circle at 12% 100%,rgba(178,140,255,.16),transparent 36%),
    linear-gradient(180deg,rgba(9,13,24,.99),rgba(3,5,10,.99))!important;
}
.hh-special-banner{
  grid-column:1/-1!important;
  display:grid!important;
  justify-items:center!important;
  gap:4px!important;
  padding:12px 14px!important;
  margin:0 auto 4px!important;
  width:min(680px,100%)!important;
  border:1px solid rgba(157,252,255,.28)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(157,252,255,.10),rgba(12,14,24,.88))!important;
  color:#f7fbff!important;
  text-align:center!important;
  box-shadow:0 0 32px rgba(97,232,255,.10), inset 0 0 0 1px rgba(255,255,255,.04)!important;
}
.hh-special-banner strong{
  font-size:clamp(1.05rem,2.2vw,1.55rem)!important;
  letter-spacing:.02em!important;
  color:#ffffff!important;
  text-shadow:0 0 18px rgba(157,252,255,.26),0 2px 0 rgba(0,0,0,.72)!important;
}
.hh-special-banner span{
  color:#d9f8ff!important;
  font-weight:800!important;
  text-shadow:0 1px 0 rgba(0,0,0,.8)!important;
}
.hh-special-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:4px 10px!important;
  border-radius:999px!important;
  color:#06111f!important;
  background:linear-gradient(135deg,#9dfcff,#ffe49d)!important;
  font-size:.70rem!important;
  font-weight:1000!important;
  letter-spacing:.14em!important;
}
.hh-special-card{
  display:grid!important;
  grid-template-rows:auto auto auto minmax(48px,1fr) auto!important;
  align-items:start!important;
  gap:6px!important;
  color:#f7fbff!important;
  isolation:isolate!important;
}
.hh-special-card .hh-upgrade-icon{
  grid-row:1!important;
  position:relative!important;
  z-index:1!important;
  align-self:start!important;
}
.hh-special-card .hh-upgrade-tag,
.hh-special-card strong,
.hh-special-card p,
.hh-special-card .hh-special-pick{
  position:relative!important;
  z-index:2!important;
}
.hh-special-card strong{
  color:#ffffff!important;
  text-shadow:0 2px 0 rgba(0,0,0,.75),0 0 18px rgba(157,252,255,.20)!important;
}
.hh-special-card p{
  color:#dceeff!important;
  text-shadow:0 1px 0 rgba(0,0,0,.80)!important;
}
.hh-special-pick{
  align-self:end!important;
  justify-self:center!important;
  display:inline-flex!important;
  padding:6px 12px!important;
  border-radius:999px!important;
  background:rgba(157,252,255,.10)!important;
  border:1px solid rgba(157,252,255,.24)!important;
  color:#e9fbff!important;
  font-size:.72rem!important;
  font-style:normal!important;
  font-weight:1000!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
}
@media (max-width:760px){
  .hh-special-modal{
    width:calc(100vw - 14px)!important;
    max-height:calc(100dvh - 14px)!important;
    padding:10px!important;
    overflow:auto!important;
    background:
      radial-gradient(circle at 50% 0,rgba(157,252,255,.20),transparent 32%),
      linear-gradient(180deg,#080d19,#03050a)!important;
  }
  .hh-special-modal .hh-upgrade-grid{
    grid-template-columns:1fr!important;
    gap:9px!important;
    max-width:440px!important;
    overflow:visible!important;
  }
  .hh-special-banner{
    padding:10px 12px!important;
    border-radius:16px!important;
  }
  .hh-special-banner span{
    font-size:.78rem!important;
    line-height:1.25!important;
  }
  .hh-special-card{
    min-height:0!important;
    grid-template-columns:70px minmax(0,1fr)!important;
    grid-template-rows:auto auto 1fr auto!important;
    column-gap:10px!important;
    row-gap:4px!important;
    text-align:left!important;
    justify-items:stretch!important;
    padding:10px!important;
  }
  .hh-special-card .hh-upgrade-icon{
    grid-column:1!important;
    grid-row:1 / span 4!important;
    width:68px!important;
    height:68px!important;
    margin:0!important;
    border-radius:18px!important;
  }
  .hh-special-card .hh-upgrade-tag,
  .hh-special-card strong,
  .hh-special-card p,
  .hh-special-card .hh-special-pick{
    grid-column:2!important;
    justify-self:start!important;
    text-align:left!important;
  }
  .hh-special-card strong{
    font-size:.98rem!important;
    line-height:1.05!important;
  }
  .hh-special-card p{
    font-size:.78rem!important;
    line-height:1.22!important;
    max-width:none!important;
    margin:0!important;
  }
  .hh-special-pick{
    padding:4px 9px!important;
    font-size:.62rem!important;
  }
}
@media (max-width:380px){
  .hh-special-card{
    grid-template-columns:58px minmax(0,1fr)!important;
  }
  .hh-special-card .hh-upgrade-icon{
    width:56px!important;
    height:56px!important;
  }
}


/* v74: clearer specialization wording/readability */
.hh-special-banner strong{color:#ffffff!important;text-shadow:0 0 18px rgba(157,252,255,.32),0 2px 0 rgba(0,0,0,.85)!important;}
.hh-special-banner span{color:#eafcff!important;font-weight:900!important;line-height:1.28!important;}
.hh-special-card p{color:#edf8ff!important;font-weight:780!important;}
.hh-special-pick{background:linear-gradient(135deg,rgba(157,252,255,.16),rgba(255,228,157,.10))!important;color:#ffffff!important;border-color:rgba(157,252,255,.32)!important;}
@media (max-width:760px){
  .hh-special-banner{background:linear-gradient(180deg,rgba(7,15,26,.98),rgba(3,6,12,.98))!important;}
  .hh-special-card{background:linear-gradient(180deg,rgba(10,14,24,.98),rgba(3,5,10,.99))!important;}
  .hh-special-card p{font-size:.80rem!important;line-height:1.24!important;}
}


/* v103: keyboard-selected upgrade/power card */
.hh-upgrade-card.hh-key-focus{
  outline:3px solid rgba(255,235,160,.92);
  outline-offset:3px;
  transform:translateY(-3px) scale(1.015);
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 26px rgba(255,216,105,.22),0 18px 36px rgba(0,0,0,.30);
}
.hh-upgrade-card:focus-visible{
  outline:3px solid rgba(255,235,160,.92);
  outline-offset:3px;
}