/* main.css - Core layout, variables, scenes */
:root {
    --bg-dark: #0a0a14;
    --bg-medium: #151525;
    --bg-light: #1e1e35;
    --panel-bg: rgba(20,20,40,0.92);
    --text: #e0e0e8;
    --text-dim: #8888aa;
    --gold: #ffd700;
    --fire: #ff5533;
    --water: #3399ff;
    --nature: #33cc55;
    --light: #ffee55;
    --dark: #9944cc;
    --neutral: #aaaacc;
    --common: #b0b0b0;
    --uncommon: #33cc55;
    --rare: #3399ff;
    --legendary: #ff9900;
    --hp-red: #ee3344;
    --mana-blue: #4488ff;
    --shield-gray: #88aacc;
    --card-w: 120px;
    --card-h: 170px;
    --field-card-w: 100px;
    --field-card-h: 130px;
    --base-font: clamp(12px, 3vw, 16px);
    --heading-font: clamp(18px, 5vw, 32px);
    --btn-height: max(48px, 8vh);
    --card-width: max(80px, 20vw);
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow-x:hidden; font-family:'Segoe UI',Tahoma,sans-serif; background:var(--bg-dark); color:var(--text); -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
/* Juice: button hover scale */
.btn { transition:all 0.15s ease; }
.btn:hover { transform:translateY(-2px) scale(1.03); }
/* Juice: number counter pop */
@keyframes counterPop { 0% { transform:scale(1); } 50% { transform:scale(1.3); color:#FFD700; } 100% { transform:scale(1); } }
.counter-pop { animation:counterPop 0.3s ease-out; }
/* Juice: screen flash */
@keyframes screenFlashWhite { 0% { opacity:0.6; } 100% { opacity:0; } }
.screen-flash { position:fixed; inset:0; background:#fff; pointer-events:none; z-index:9998; animation:screenFlashWhite 0.3s ease-out forwards; }
/* Juice: text wobble entrance */
@keyframes textWobble { 0% { transform:scale(0.3) rotate(-5deg); opacity:0; } 60% { transform:scale(1.1) rotate(2deg); opacity:1; } 100% { transform:scale(1) rotate(0); opacity:1; } }
.text-wobble { animation:textWobble 0.5s ease-out; }
#game-container { width:100%; height:100%; position:relative; overflow:hidden; }
.scene { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s; z-index:1; }
.scene.active { opacity:1; pointer-events:auto; z-index:2; }
.overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s; z-index:50; }
.overlay.active { opacity:1; pointer-events:auto; }
#particles-layer { position:fixed; inset:0; pointer-events:none; z-index:100; overflow:hidden; }
#tooltip { position:fixed; background:var(--panel-bg); border:1px solid rgba(255,255,255,0.2); border-radius:8px; padding:10px 14px; max-width:260px; z-index:200; pointer-events:none; font-size:13px; box-shadow:0 4px 20px rgba(0,0,0,0.6); }
#tooltip.hidden { display:none; }
.tooltip-title { font-weight:bold; color:var(--gold); margin-bottom:4px; }
.tooltip-desc { color:var(--text-dim); line-height:1.4; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 24px; border:none; border-radius:6px; font-size:15px; font-weight:600; cursor:pointer; transition:all 0.15s; background:var(--bg-light); color:var(--text); border:1px solid rgba(255,255,255,0.1); }
.btn:hover { background:#2a2a50; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.4); }
.btn:active { transform:translateY(1px); }
.btn-gold { background:linear-gradient(135deg,#665500,#aa8800); color:#fff; border-color:#997700; }
.btn-gold:hover { background:linear-gradient(135deg,#776600,#bb9900); box-shadow:0 0 16px rgba(255,215,0,0.3); }
.btn-fire { background:linear-gradient(135deg,#662200,#aa3300); border-color:#993300; }
.btn-water { background:linear-gradient(135deg,#002266,#003399); border-color:#002266; }
.btn-nature { background:linear-gradient(135deg,#005522,#008833); border-color:#006633; }
.btn-sm { padding:6px 14px; font-size:13px; }
.btn-lg { padding:14px 36px; font-size:18px; }
.btn-wide { width:240px; }
.btn[disabled] { opacity:0.4; pointer-events:none; }
.panel { background:var(--panel-bg); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:20px; }

/* Boot scene */
#scene-boot { background:var(--bg-dark); }
.boot-content { text-align:center; }
.boot-title { font-size:48px; font-weight:900; color:var(--gold); text-shadow:0 0 30px rgba(255,215,0,0.3); margin-bottom:8px; letter-spacing:3px; }
.boot-subtitle { font-size:16px; color:var(--text-dim); margin-bottom:30px; }
.boot-bar { width:300px; height:6px; background:rgba(255,255,255,0.1); border-radius:3px; margin:0 auto; }
.boot-bar-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--gold),#ffaa00); border-radius:3px; transition:width 0.3s; }
.boot-text { font-size:12px; color:var(--text-dim); margin-top:8px; }

/* Menu scene */
#scene-menu { background:radial-gradient(ellipse at 50% 30%, rgba(40,30,60,0.8) 0%, var(--bg-dark) 70%); }
.menu-content { text-align:center; }
.menu-title { font-size:56px; font-weight:900; line-height:1; margin-bottom:8px; background:linear-gradient(180deg,var(--gold),#cc8800); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-shadow:none; filter:drop-shadow(0 2px 8px rgba(255,215,0,0.3)); }
.menu-tagline { font-size:16px; color:var(--text-dim); margin-bottom:40px; }
.menu-buttons { display:flex; flex-direction:column; gap:12px; align-items:center; }
.menu-stats { font-size:12px; color:var(--text-dim); margin-top:30px; }
.menu-card-art { width:80px; height:80px; object-fit:contain; margin-bottom:10px; filter:drop-shadow(0 0 8px rgba(255,215,0,0.2)); }
.menu-version { position:absolute; bottom:10px; right:15px; font-size:11px; color:rgba(255,255,255,0.15); }

/* Class/Deck select */
.scene-heading { font-size:28px; font-weight:700; color:var(--gold); margin-bottom:20px; text-align:center; }
.starter-decks { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; margin:20px 0; }
.starter-deck { width:220px; padding:20px; background:var(--panel-bg); border:2px solid rgba(255,255,255,0.1); border-radius:12px; cursor:pointer; text-align:center; transition:all 0.2s; }
.starter-deck:hover { border-color:var(--gold); transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.4); }
.starter-deck.selected { border-color:var(--gold); background:rgba(60,50,0,0.3); }
.starter-deck-icon { font-size:48px; margin-bottom:8px; }
.starter-deck-name { font-size:18px; font-weight:700; margin-bottom:6px; }
.starter-deck-desc { font-size:12px; color:var(--text-dim); line-height:1.4; }
.starter-deck-cards { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; margin-top:10px; }
.starter-deck-cards img { width:30px; height:30px; object-fit:contain; }

/* Gameover */
#scene-gameover { background:radial-gradient(ellipse at 50% 50%, rgba(30,0,0,0.4) 0%, var(--bg-dark) 70%); }
.gameover-title { font-size:48px; font-weight:900; margin-bottom:20px; }
.gameover-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; max-width:400px; margin:0 auto 20px; }
.gameover-stat { display:flex; justify-content:space-between; padding:6px 12px; background:rgba(255,255,255,0.05); border-radius:4px; }
.gameover-stat .label { color:var(--text-dim); }
.gameover-stat .value { color:var(--gold); font-weight:600; }

/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:3px; }

@media(max-width:640px){
    #game-container{overflow-y:auto;overflow-x:hidden;max-width:100vw;width:100vw;}
    html, body{max-width:100vw;overflow-x:hidden;width:100vw;}
    .scene{position:relative;min-height:100vh;max-width:100vw;overflow-x:hidden;width:100vw;}
    .scene-heading{font-size:clamp(1.2rem,4vw,1.8rem)}
    .btn{padding:10px 18px;font-size:clamp(13px,3vw,16px);min-height:52px;border-radius:8px}
    .btn-lg{padding:14px 30px;font-size:clamp(15px,3.5vw,18px);min-height:56px}
    .btn-wide{width:min(260px,90vw)}
    .btn-sm{padding:8px 14px;font-size:13px;min-height:44px}
    .menu-title{font-size:clamp(2rem,8vw,3.5rem)}
    .menu-tagline{font-size:clamp(13px,3vw,16px)}
    .menu-buttons{gap:14px}
    .starter-decks{gap:12px}
    .starter-deck{width:min(220px,85vw);padding:16px;max-height: 250px; overflow-y: auto;}
    .starter-deck-name{font-size:16px}
    .starter-deck-desc{font-size:13px;line-height:1.5}
    .starter-deck-icon{font-size:40px}
    .gameover-stats{grid-template-columns:1fr}
    .gameover-title{font-size:clamp(2rem,7vw,3rem)}
    .gameover-stat{padding:8px 12px;font-size:14px}
    .boot-title{font-size:clamp(1.5rem,6vw,3rem)}
    .panel{padding:12px}
    .panel h2{font-size:clamp(15px,3.5vw,20px)}
    .menu-stats{font-size:13px}
}
@media(max-width:400px){
    .btn{padding:10px 16px;font-size:14px;min-height:52px}
    .btn-lg{padding:12px 26px;font-size:16px;min-height:54px}
    .menu-title{font-size:clamp(1.8rem,7vw,2.5rem)}
    .starter-deck{width:min(200px,90vw);padding:14px}
}