*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050407;color:#f4dcb0;font-family:Georgia,'Times New Roman',serif}
canvas#game{display:block;width:100vw;height:100vh;image-rendering:pixelated;background:#080608;cursor:crosshair;position:fixed;inset:0}
.class-preview{image-rendering:pixelated}
/* ── Overlay screens ── */
.screen{position:fixed;inset:0;display:grid;place-items:center;z-index:10;
background:linear-gradient(180deg,rgba(4,4,8,.52),rgba(0,0,0,.90)),
radial-gradient(circle at 50% 22%,rgba(148,38,34,.32),transparent 46%),
radial-gradient(circle at 20% 80%,rgba(38,112,95,.2),transparent 38%),
#040306}
.hidden{display:none}
/* ── Audio panel (music + SFX) ── */
.audio-panel{
position:fixed;top:12px;right:12px;z-index:40;
display:flex;flex-direction:column;gap:8px;padding:10px 12px;
border:1px solid rgba(255,216,132,.28);border-radius:8px;
background:linear-gradient(180deg,rgba(14,8,18,.94),rgba(6,6,10,.97));
box-shadow:0 8px 28px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);
min-width:180px}
.audio-row{display:flex;align-items:center;gap:10px}
.audio-label{font-size:12px;color:#c8a878;min-width:44px;text-align:left;letter-spacing:.2px}
.audio-row input[type="range"]{
flex:1;min-width:0;height:6px;accent-color:#d4a048;cursor:pointer;
background:rgba(0,0,0,.35);border-radius:3px}
/* ── Generic frame ── */
.frame{width:min(1200px,calc(100vw - 32px));padding:32px 36px;
border:1px solid rgba(236,188,99,.38);border-radius:10px;
background:linear-gradient(180deg,rgba(28,14,22,.96),rgba(6,6,10,.98));
box-shadow:0 32px 96px rgba(0,0,0,.76),0 0 80px rgba(190,34,18,.18),inset 0 1px 0 rgba(255,255,255,.05);
text-align:center;backdrop-filter:blur(12px)}
.frame{border-image:linear-gradient(180deg,rgba(255,216,132,.6),rgba(140,100,40,.28)) 1;border-width:2px}
/* ── Menu frame – wider/taller ── */
.menu-frame{max-width:min(1300px,calc(100vw - 24px));padding:36px 40px}
/* ── Typography ── */
h1{font-size:clamp(38px,6vw,82px);margin:0 0 6px;color:#ffd884;
text-shadow:0 0 22px rgba(255,84,32,.85),0 2px 8px rgba(0,0,0,.7);letter-spacing:.5px}
h2{font-size:40px;margin:0 0 20px;color:#ffd884}
.subtitle{font-size:15px;margin:0 auto 24px;max-width:720px;color:#c8a878;line-height:1.5}
.controls{font-size:13px;color:#a08860;margin-top:22px;letter-spacing:.3px}
/* ── Class grid ── */
.classes{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:10px}
/* ── Class button ── */
.class-btn{
border:1px solid rgba(255,216,132,.2);border-radius:10px;
background:linear-gradient(180deg,rgba(22,10,32,.96),rgba(8,6,14,.99));
color:#f7e2bd;padding:14px 10px 16px;cursor:pointer;
box-shadow:0 12px 28px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
transition:.18s transform,.18s box-shadow,.18s border-color,.18s background;
position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:6px}
.class-btn::before{content:"";position:absolute;inset:0;
background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);
transform:translateX(-120%);transition:.32s transform;pointer-events:none}
.class-btn:hover{transform:translateY(-6px);
border-color:rgba(255,216,132,.55);
box-shadow:0 0 28px rgba(255,216,132,.18),0 20px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.class-btn:hover::before{transform:translateX(120%)}
/* Per-class accent colors on hover */
.class-btn[data-class="mage"]:hover{border-color:rgba(145,243,255,.55);box-shadow:0 0 28px rgba(145,243,255,.2),0 20px 40px rgba(0,0,0,.55)}
.class-btn[data-class="shaman"]:hover{border-color:rgba(124,255,141,.55);box-shadow:0 0 28px rgba(124,255,141,.2),0 20px 40px rgba(0,0,0,.55)}
.class-btn[data-class="paladin"]:hover{border-color:rgba(255,231,155,.6);box-shadow:0 0 28px rgba(255,231,155,.22),0 20px 40px rgba(0,0,0,.55)}
.class-btn[data-class="barbarian"]:hover{border-color:rgba(255,118,95,.55);box-shadow:0 0 28px rgba(255,118,95,.2),0 20px 40px rgba(0,0,0,.55)}
.class-btn[data-class="rogue"]:hover{border-color:rgba(157,255,179,.5);box-shadow:0 0 28px rgba(157,255,179,.18),0 20px 40px rgba(0,0,0,.55)}
.class-btn[data-class="necromancer"]:hover{border-color:rgba(184,117,255,.55);box-shadow:0 0 28px rgba(184,117,255,.2),0 20px 40px rgba(0,0,0,.55)}
/* ── Canvas preview inside button ── */
.class-preview{display:block;image-rendering:pixelated;border-radius:6px;
background:linear-gradient(180deg,rgba(10,4,18,.9),rgba(4,2,10,.95));
border:1px solid rgba(255,255,255,.06);width:120px;height:140px}
/* ── Button text ── */
.class-btn b{display:block;font-size:17px;color:#ffd884;margin:0;letter-spacing:.3px}
.class-btn span{display:block;font-size:11px;color:#b89060;line-height:1.45;text-align:center}
/* ── Upgrade grid ── */
.upgrade-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
@media(max-width:1100px){.upgrade-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.upgrade-grid{grid-template-columns:1fr}}
.card{border:2px solid rgba(255,216,132,.28);border-radius:8px;
background:linear-gradient(180deg,rgba(20,12,28,.94),rgba(8,6,14,.98));
color:#f7e2bd;padding:16px;cursor:pointer;
box-shadow:0 16px 36px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
transition:.16s transform,.16s filter,.16s box-shadow,.16s border-color;
position:relative;overflow:hidden;min-height:190px;text-align:left}
.card::before{content:"";position:absolute;inset:0;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.08),transparent);
transform:translateX(-110%);transition:.28s transform;pointer-events:none}
.card:hover{transform:translateY(-4px);filter:brightness(1.14);
border-color:rgba(255,232,176,.62);
box-shadow:0 0 24px rgba(255,216,132,.22),0 16px 36px rgba(0,0,0,.5)}
.card:hover::before{transform:translateX(110%)}
.card .icon{font-size:34px}
.upgrade-icon{display:block;margin:6px auto 2px;image-rendering:pixelated;border-radius:6px}
.card b{display:block;font-size:20px;color:#ffd884;margin:8px 0}
.card span{display:block;font-size:14px;color:#d9ba8a;line-height:1.35}
/* ── Generic button (retry etc) ── */
button:not(.class-btn):not(.card){
border:2px solid rgba(255,216,132,.4);border-radius:8px;
background:linear-gradient(180deg,rgba(20,12,28,.94),rgba(8,6,14,.98));
color:#f7e2bd;padding:14px 32px;cursor:pointer;font-size:16px;
font-family:Georgia,serif;
box-shadow:0 16px 36px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
transition:.16s transform,.16s box-shadow,.16s border-color}
button:not(.class-btn):not(.card):hover{
transform:translateY(-3px);border-color:rgba(255,216,132,.7);
box-shadow:0 0 20px rgba(255,216,132,.2),0 16px 36px rgba(0,0,0,.5)}
/* ── Upgrade card extras ── */
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;min-height:18px}
.rarity-badge{font-size:10px;font-family:Georgia,serif;letter-spacing:.6px;text-transform:uppercase;opacity:.9}
.skill-tag{font-size:10px;font-weight:bold;padding:2px 7px;border-radius:10px;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#ffd884}
.skill-tag.spec{background:rgba(204,68,255,.18);border-color:rgba(204,68,255,.4);color:#cc44ff}
/* ── Skill tooltip ── */
.skill-tooltip{
position:fixed;z-index:50;pointer-events:none;
background:linear-gradient(180deg,rgba(18,10,28,.97),rgba(8,6,14,.99));
border:1px solid rgba(255,216,132,.35);border-radius:8px;
padding:12px 14px;min-width:240px;max-width:310px;
box-shadow:0 8px 32px rgba(0,0,0,.7),0 0 20px rgba(255,200,80,.08);
backdrop-filter:blur(8px);
transform:translateY(-100%) translateY(-12px)}
.tt-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tt-key{font-size:11px;font-weight:bold;padding:2px 8px;border-radius:10px;
background:rgba(255,216,132,.15);border:1px solid rgba(255,216,132,.4);
color:#ffd884;letter-spacing:.5px}
.tt-name{font-size:15px;font-weight:bold;color:#ffd884;flex:1}
.tt-cd{font-size:11px;color:#a08060;margin-left:auto;white-space:nowrap}
.tt-desc{font-size:12px;color:#c8a870;line-height:1.55;margin:0 0 8px}
.tt-stats{display:flex;gap:12px}
.tt-dmg,.tt-range{font-size:11px;padding:2px 8px;border-radius:4px;
background:rgba(255,255,255,.06);color:#d9ba8a;border:1px solid rgba(255,255,255,.1)}
.tt-dmg::before{content:"⚔ "}
.tt-range::before{content:"◎ "}
@media(max-width:1100px){.classes{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.classes{grid-template-columns:repeat(2,1fr)}.frame{padding:18px 16px}.menu-frame{padding:20px 14px}}
@media(max-width:420px){.classes{grid-template-columns:1fr}}