@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

/* ===== VARIABLES ===== */
:root {
    --bg-deep:    #0a0608;
    --bg-mid:     #130d10;
    --bg-card:    #1c1218;
    --border:     #3d2535;
    --border-glow:#8b3a5a;
    --gold:       #d4a832;
    --gold-light: #f0c84a;
    --red:        #c0392b;
    --red-glow:   #e74c3c;
    --green:      #27ae60;
    --blue:       #2980b9;
    --text:       #e8d5c0;
    --text-dim:   #8a6a5a;
    --accent:     #c0392b;
    --accent2:    #8b3a5a;
    --shadow:     0 8px 32px rgba(0,0,0,0.7);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Crimson Text', Georgia, serif;
    background: var(--bg-deep);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ===== BACKGROUND ===== */
.bg-layer {
    position: fixed; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, #2a0d1a 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 20% 100%, #1a0a0f 0%, transparent 60%),
        linear-gradient(180deg, #0a0608 0%, #130d10 50%, #0d0810 100%);
}
.bg-layer::before {
    content:'';
    position:absolute; inset:0;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(61,37,53,0.08) 40px, rgba(61,37,53,0.08) 41px),
        repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(61,37,53,0.08) 40px, rgba(61,37,53,0.08) 41px);
}

.particle-field {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
}
.particle {
    position: absolute;
    width: 2px; height: 2px;
    background: var(--gold);
    border-radius: 50%;
    animation: float-up linear infinite;
    opacity: 0;
}
@keyframes float-up {
    0%   { opacity:0; transform: translateY(0) scale(1); }
    20%  { opacity:0.6; }
    80%  { opacity:0.3; }
    100% { opacity:0; transform: translateY(-120vh) scale(0.3); }
}

/* ===== HUD ===== */
.hud {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    height: 56px;
    background: linear-gradient(180deg, rgba(10,6,8,0.98) 0%, rgba(10,6,8,0.92) 100%);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 20px rgba(0,0,0,0.8);
}

/* BAL – Avatar */
.hud-left { flex-shrink: 0; }
.player-badge { display:flex; align-items:center; gap:8px; cursor:pointer; }
.avatar-ring {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px solid var(--gold);
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle, #2a1520 0%, #1a0d10 100%);
    box-shadow: 0 0 10px rgba(212,168,50,0.25);
    flex-shrink: 0;
}
.avatar-icon { font-size: 18px; }
.player-info { display: flex; flex-direction: column; }
.player-name { font-family:'Cinzel',serif; font-size:12px; color:var(--gold); line-height:1.2; }
.player-rank { font-size:10px; color:var(--text-dim); font-style:italic; line-height:1.2; }

/* KÖZÉP – Arany + Szint + XP */
.hud-center {
    display: flex; align-items: center; gap: 10px;
    flex: 1; justify-content: center;
}
.hud-stat {
    display: flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 4px 12px;
    white-space: nowrap;
}
.hud-stat-icon { font-size: 14px; }
.hud-stat-val {
    font-family: 'Cinzel', serif; font-size: 14px;
    font-weight: 700; color: var(--gold-light);
}
.lvl-stat .hud-stat-val { color: #a080d0; }

/* XP bár */
.hud-xp-wrap {
    display: flex; flex-direction: column; gap: 3px;
    min-width: 100px; max-width: 160px;
}
.hud-xp-labels {
    display: flex; gap: 3px; align-items: baseline;
    font-family: 'Cinzel', serif; font-size: 11px;
}
#xp-display { color: #a0d0ff; font-weight: 700; }
#xp-display-label { color: var(--text-dim); font-size: 10px; }
#xp-next-label { color: var(--text-dim); font-size: 10px; }
.hud-xp-bar {
    height: 4px; background: rgba(255,255,255,0.08);
    border-radius: 2px; overflow: hidden;
}
.hud-xp-fill {
    height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, #6080c0, #a0c0ff);
    transition: width 0.6s ease;
}

/* JOBB – Navigáció */
.hud-right { flex-shrink: 0; }
.hud-nav { display: flex; gap: 3px; }
.hud-nav-btn {
    display: flex; flex-direction: column; align-items: center;
    padding: 5px 10px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color: var(--text-dim);
    font-family: 'Cinzel', serif;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    gap: 1px;
}
.hnb-icon { font-size: 16px; line-height: 1; }
.hnb-label { font-size: 9px; letter-spacing: 0.5px; line-height: 1; }
.hud-nav-btn:hover, .hud-nav-btn.active {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212,168,50,0.08);
}
.hud-nav-btn.arena:hover, .hud-nav-btn.arena.active {
    border-color: var(--red-glow);
    color: var(--red-glow);
    background: rgba(192,57,43,0.08);
}

/* Fejlesztés gomb (auth.js adja hozzá) */
.btn-upgrade {
    display: flex; flex-direction: column; align-items: center;
    padding: 5px 10px;
    border: 1px solid rgba(39,174,96,0.4);
    background: rgba(39,174,96,0.06);
    color: #60c080;
    font-family: 'Cinzel', serif;
    font-size: 9px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    gap: 1px;
    letter-spacing: 0.5px;
}
.btn-upgrade::before { content: '⚒️'; font-size: 16px; line-height: 1; }
.btn-upgrade:hover { border-color: #27ae60; background: rgba(39,174,96,0.15); }

/* Régi resource class – backward compat */
.resource { display:flex; align-items:center; gap:6px; }
.res-icon { font-size:16px; }
.res-val { font-family:'Cinzel',serif; font-size:15px; font-weight:700; color:var(--gold-light); }

/* ===== MAIN ===== */
.game-container {
    position: relative; z-index: 10;
    max-width: 1000px;
    margin: 0 auto;
    padding: 76px 16px 20px;
}

.game-title-area { text-align:center; margin-bottom:12px; }
.game-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(22px, 4vw, 36px);
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 30px rgba(212,168,50,0.5), 0 2px 4px rgba(0,0,0,0.8);
    letter-spacing: 4px;
}
.game-subtitle {
    font-style:italic; color:var(--text-dim);
    font-size:13px; margin-top:2px;
}

/* ===== ANAGRAM PANEL ===== */
.anagram-panel {
    background: linear-gradient(145deg, #1c1218 0%, #130d10 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.05);
    position: relative;
}
.anagram-panel::before {
    content:'';
    position:absolute; top:-1px; left:20%; right:20%; height:2px;
    background: linear-gradient(90deg, transparent, var(--accent2), transparent);
}

/* ROUND INFO */
.round-info {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:24px;
}
.round-badge, .score-badge {
    font-family:'Cinzel',serif; font-size:13px;
    color:var(--text-dim); letter-spacing:1px;
}
.round-badge span, .score-badge span { color:var(--gold); font-weight:700; }

/* TIMER */
.timer-wrap { position:relative; width:60px; height:60px; }
.timer-ring { width:60px; height:60px; transform:rotate(-90deg); }
.ring-bg { fill:none; stroke:rgba(255,255,255,0.08); stroke-width:4; }
.ring-fill {
    fill:none; stroke:var(--gold); stroke-width:4;
    stroke-dasharray: 163.4;
    stroke-dashoffset: 0;
    stroke-linecap:round;
    transition: stroke-dashoffset 1s linear, stroke 0.3s;
}
.ring-fill.urgent { stroke: var(--red-glow); }
.timer-text {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    font-family:'Cinzel',serif; font-size:18px; font-weight:700;
    color:var(--gold);
}
.timer-text.urgent { color:var(--red-glow); animation:pulse 0.5s infinite alternate; }
@keyframes pulse { from{opacity:1} to{opacity:0.5} }

/* LETTERS */
.letters-label, .answer-label {
    font-family:'Cinzel',serif; font-size:10px;
    letter-spacing:3px; color:var(--text-dim);
    text-align:center; margin-bottom:12px;
}
.letter-rack {
    display:flex; flex-wrap:wrap;
    justify-content:center; gap:8px;
    min-height:60px;
    padding:8px;
}

.letter-card {
    width:52px; height:62px;
    background: linear-gradient(145deg, #2a1a22 0%, #1e1218 100%);
    border: 1px solid var(--border-glow);
    border-radius: 8px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Cinzel',serif; font-size:24px; font-weight:700;
    color:var(--text);
    cursor:pointer;
    user-select:none;
    transition: all 0.15s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
    position:relative;
}
.letter-card::after {
    content:attr(data-score);
    position:absolute; bottom:3px; right:5px;
    font-size:9px; color:var(--gold); font-weight:400; font-family:'Crimson Text',serif;
}
.letter-card:hover:not(.used) {
    border-color:var(--gold);
    box-shadow: 0 0 16px rgba(212,168,50,0.3), 0 4px 12px rgba(0,0,0,0.5);
    transform: translateY(-3px);
    color:var(--gold-light);
}
.letter-card.used {
    opacity:0.25; cursor:default;
    transform:scale(0.9);
}
.letter-card.selected {
    border-color:var(--gold-light);
    background:linear-gradient(145deg,#3a2228 0%,#2a1820 100%);
    box-shadow: 0 0 20px rgba(212,168,50,0.4);
}

/* ANSWER SLOTS */
.answer-area { margin:20px 0; }
.answer-slots {
    display:flex; flex-wrap:wrap;
    justify-content:center; gap:6px;
    min-height:62px;
    padding:8px;
    background:rgba(0,0,0,0.2);
    border:1px dashed rgba(139,58,90,0.3);
    border-radius:8px;
    margin-bottom:14px;
}
.ans-slot {
    width:52px; height:62px;
    background:linear-gradient(145deg, #3a2030 0%, #2a1520 100%);
    border:1px solid var(--accent2);
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Cinzel',serif; font-size:24px; font-weight:700;
    color:var(--gold-light);
    cursor:pointer;
    animation: slot-in 0.2s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 0 10px rgba(139,58,90,0.3);
}
@keyframes slot-in { from{transform:scale(0) rotate(-15deg); opacity:0} to{transform:scale(1) rotate(0); opacity:1} }
.ans-slot:hover { border-color:var(--red-glow); color:var(--red-glow); }

/* CONTROLS */
.answer-controls { display:flex; gap:10px; justify-content:center; }
.btn-action {
    padding: 10px 20px;
    border-radius:6px;
    font-family:'Cinzel',serif; font-size:12px;
    cursor:pointer; border:1px solid;
    transition:all 0.2s;
    display:flex; align-items:center; gap:6px;
    letter-spacing:1px;
}
.btn-clear { background:rgba(192,57,43,0.1); border-color:rgba(192,57,43,0.4); color:#e07060; }
.btn-clear:hover { background:rgba(192,57,43,0.2); border-color:var(--red-glow); }
.btn-shuffle { background:rgba(41,128,185,0.1); border-color:rgba(41,128,185,0.4); color:#60a0e0; }
.btn-shuffle:hover { background:rgba(41,128,185,0.2); border-color:var(--blue); }
.btn-submit {
    background:linear-gradient(135deg, rgba(212,168,50,0.2) 0%, rgba(192,57,43,0.2) 100%);
    border-color:var(--gold);
    color:var(--gold-light);
    font-weight:700;
}
.btn-submit:hover {
    background:linear-gradient(135deg, rgba(212,168,50,0.35) 0%, rgba(192,57,43,0.35) 100%);
    box-shadow:0 0 20px rgba(212,168,50,0.3);
}

/* RESULT FLASH */
.result-flash {
    text-align:center; font-family:'Cinzel',serif;
    font-size:20px; font-weight:700;
    min-height:32px;
    transition:all 0.3s;
}
.result-flash.correct { color:var(--gold-light); text-shadow:0 0 20px rgba(212,168,50,0.6); }
.result-flash.wrong   { color:var(--red-glow); }
.result-flash.duplicate { color:#a08060; }

/* FOUND WORDS */
.found-words-area { margin-top:16px; }
.found-label { font-size:11px; color:var(--text-dim); letter-spacing:2px; font-family:'Cinzel',serif; margin-bottom:8px; }
.found-list { display:flex; flex-wrap:wrap; gap:6px; min-height:30px; }
.found-word {
    padding:3px 10px;
    background:rgba(212,168,50,0.08);
    border:1px solid rgba(212,168,50,0.2);
    border-radius:20px;
    font-size:14px; color:var(--gold);
    animation: pop-in 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.found-word .word-pts { font-size:11px; color:var(--text-dim); margin-left:4px; }
@keyframes pop-in { from{transform:scale(0)} to{transform:scale(1)} }

/* QUICK SHOP */
.quick-shop {
    display:flex; gap:8px; justify-content:flex-end;
    margin-top:16px; padding-top:16px;
    border-top:1px solid rgba(255,255,255,0.05);
}
.shop-btn {
    padding:6px 12px;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--border);
    border-radius:6px;
    cursor:pointer; color:var(--text);
    font-size:14px;
    transition:all 0.2s;
    display:flex; align-items:center; gap:4px;
}
.shop-btn:hover { border-color:var(--gold); background:rgba(212,168,50,0.08); }
.shop-price { font-size:11px; color:var(--gold); font-family:'Cinzel',serif; }

/* SUMMARY PANEL */
/* Summary overlay – a játéktábla felett, középen */
.summary-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.summary-overlay.hidden { display: none; }

.summary-panel {
    background: linear-gradient(145deg, #1c1218 0%, #130d10 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 32px 36px;
    text-align: center;
    animation: fade-up 0.4s cubic-bezier(.34,1.56,.64,1);
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
@keyframes fade-up { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.summary-title { font-family:'Cinzel',serif; font-size:28px; color:var(--gold); margin-bottom:24px; }
.summary-stats { margin-bottom:24px; }
.stat-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 20px;
    border-bottom:1px solid rgba(255,255,255,0.05);
    font-size:16px;
}
.stat-row strong { font-family:'Cinzel',serif; }
.gold-row strong { color:var(--gold); font-size:20px; }
.xp-row strong { color:#a0d0ff; font-size:20px; }
.btn-next-round {
    padding:14px 40px;
    background:linear-gradient(135deg, #8b3a5a 0%, #c0392b 100%);
    border:none; border-radius:8px;
    font-family:'Cinzel',serif; font-size:16px; font-weight:700;
    color:#fff; cursor:pointer;
    box-shadow:0 4px 20px rgba(192,57,43,0.4);
    transition:all 0.2s;
    letter-spacing:1px;
}
.btn-next-round:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 30px rgba(192,57,43,0.6);
}

/* OVERLAY PANELS */
.overlay-panel {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(4px);
    padding: 60px 16px 24px;   /* top: HUD magassága alatt */
    overflow-y: auto;
}
.overlay-panel.hidden { display: none; }

.panel-inner {
    background: linear-gradient(145deg, #1c1218 0%, #130d10 100%);
    border: 1px solid var(--border-glow);
    border-radius: 16px;
    padding: 24px 24px 28px;
    width: 100%;
    max-width: 520px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(139,58,90,0.2);
    margin-bottom: 24px; /* bottom breathing room */
}

.panel-close {
    position: absolute;
    top: 14px; right: 14px;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--border);
    color: var(--text-dim);
    width: 34px; height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    z-index: 10;
    display: flex; align-items: center; justify-content: center;
}
.panel-close:hover { border-color: var(--red-glow); color: var(--red-glow); background: rgba(192,57,43,0.15); }

.panel-title {
    font-family: 'Cinzel', serif;
    font-size: 20px;
    color: var(--gold);
    margin-bottom: 20px;
    margin-right: 40px; /* ne takarja a bezáró gomb */
    text-align: center;
}

@media (max-width: 600px) {
    .overlay-panel { padding: 56px 8px 16px; }
    .panel-inner { padding: 20px 16px 20px; border-radius: 12px; }
    .panel-title { font-size: 17px; }
}
.panel-desc { text-align:center; color:var(--text-dim); font-style:italic; line-height:1.7; margin-bottom:24px; }

/* KNIGHT PANEL */
.knight-display {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding: 12px;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.knight-avatar {
    flex-shrink: 0;
    width: 68px; height: 68px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 34px;
    background: rgba(0,0,0,0.3);
    overflow: hidden;
}
.knight-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.knight-name {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    color: var(--gold);
    font-weight: 700;
}
.knight-level {
    font-family: 'Cinzel', serif;
    color: var(--text-dim);
    font-size: 13px;
    margin-top: 3px;
}
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.stat-card {
    background:rgba(0,0,0,0.3);
    border:1px solid var(--border);
    border-radius:8px; padding:8px 12px;
}
.stat-name { font-size:11px; color:var(--text-dim); letter-spacing:1px; }
.stat-value { font-family:'Cinzel',serif; font-size:18px; color:var(--text); margin-top:2px; }
.stat-bar { height:3px; background:rgba(255,255,255,0.1); border-radius:2px; margin-top:5px; }
.stat-fill { height:100%; border-radius:2px; background:linear-gradient(90deg, var(--accent2), var(--gold)); transition:width 0.5s; }
.gold-info { text-align:center; font-family:'Cinzel',serif; color:var(--gold); font-size:16px; }

/* ARENA PREVIEW */
.arena-preview { display:flex; align-items:center; justify-content:center; gap:20px; margin:24px 0; }
.fighter-card {
    background:rgba(0,0,0,0.3); border:1px solid var(--border);
    border-radius:10px; padding:16px 20px; text-align:center; width:120px;
}
.fighter-card.you { border-color:var(--gold); }
.fc-avatar { font-size:36px; margin-bottom:6px; }
.fc-name { font-family:'Cinzel',serif; font-size:13px; color:var(--text); }
.fc-level { font-size:12px; color:var(--text-dim); margin-top:2px; }
.vs-text { font-family:'Cinzel',serif; font-size:28px; font-weight:900; color:var(--red-glow);
    text-shadow:0 0 20px rgba(231,76,60,0.6); }

/* NOTIFICATION */
.notification {
    position:fixed; bottom:24px; right:24px; z-index:300;
    background:linear-gradient(135deg, #2a1a22 0%, #1a0f14 100%);
    border:1px solid var(--border-glow);
    border-radius:8px; padding:12px 20px;
    font-family:'Cinzel',serif; font-size:13px;
    box-shadow:0 8px 24px rgba(0,0,0,0.6);
    transform:translateX(120%);
    transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.notification.show { transform:translateX(0); }
.notification.gold { border-color:var(--gold); color:var(--gold); }
.notification.error { border-color:var(--red-glow); color:var(--red-glow); }

/* UTILITY */
.hidden { display:none !important; }

/* XP BAR under HUD */
.xp-bar-wrap {
    position:fixed; top:64px; left:0; right:0; height:3px; z-index:99;
    background:rgba(255,255,255,0.05);
}
.xp-bar-fill {
    height:100%;
    background:linear-gradient(90deg, var(--accent2), var(--gold));
    transition:width 0.8s ease;
    box-shadow:0 0 8px rgba(212,168,50,0.5);
}

/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-deep); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

@media (max-width:480px) {
    .hud { padding:8px 12px; }
    .hud-right .btn-knight, .hud-right .btn-battle { padding:6px 10px; font-size:11px; }
    .letter-card { width:44px; height:52px; font-size:20px; }
    .ans-slot { width:44px; height:52px; font-size:20px; }
}

/* ===== FŐMENÜ ===== */
.mainmenu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.menu-card {
    background: linear-gradient(145deg, #1c1218 0%, #130d10 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}
.menu-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--border-glow), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}
.menu-card:hover {
    border-color: var(--border-glow);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(139,58,90,0.3);
}
.menu-card:hover::before { opacity: 1; }
.menu-card:active { transform: translateY(-1px); }

.mc-icon { font-size: 42px; }
.mc-title {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 1px;
}
.mc-desc {
    font-size: 12px;
    color: var(--text-dim);
    font-style: italic;
    line-height: 1.4;
}

/* Vissza gomb */
.back-btn {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: inline-block;
    transition: color 0.2s;
}
.back-btn:hover { color: var(--gold); }

/* HUD navigáció */
.hud-nav {
    display: flex;
    gap: 4px;
}
.hud-nav-btn {
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color: var(--text-dim);
    font-family: 'Cinzel', serif;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.5px;
}
.hud-nav-btn:hover,
.hud-nav-btn.active {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212,168,50,0.08);
}
.hud-nav-btn.arena:hover,
.hud-nav-btn.arena.active {
    border-color: var(--red-glow);
    color: var(--red-glow);
    background: rgba(192,57,43,0.08);
}

@media (max-width: 480px) {
    .mainmenu-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .menu-card { padding: 20px 12px; }
    .mc-icon { font-size: 32px; }
    .mc-title { font-size: 13px; }
}

/* ===== LEHETSÉGES SZAVAK SZÁMLÁLÓJA ===== */
.found-label {
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 1px;
    font-family: 'Cinzel', serif;
    margin-bottom: 8px;
}
#found-count {
    font-size: 16px;
    font-weight: 700;
    color: #60a0e0;
    transition: color 0.4s;
}
.possible-count {
    font-size: 14px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 1px;
}

/* ===== ÉLET RENDSZER ===== */
.hud-lives {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.lives-hearts {
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1;
}
.lives-timer {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    color: #e07060;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
/* Élet veszítés animáció */
@keyframes heart-break {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.4); }
    60%  { transform: scale(0.8); }
    100% { transform: scale(1); }
}
.lives-hearts.lost {
    animation: heart-break 0.4s ease;
}

/* ===== HÁROMOSZLOPOS JÁTÉK LAYOUT ===== */
.game-layout {
    display: grid;
    grid-template-columns: 64px 1fr 160px;
    gap: 10px;
    align-items: start;
    width: 100%;
}

/* BAL OLDALSÁV – eszközök */
.game-sidebar-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
}

.sidebar-title {
    font-family: 'Cinzel', serif;
    font-size: 8px;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-align: center;
    margin-bottom: 4px;
}

.sidebar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 54px;
    padding: 10px 4px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text);
}
.sidebar-btn:hover {
    border-color: var(--gold);
    background: rgba(212,168,50,0.08);
    transform: translateY(-2px);
}
.sb-icon  { font-size: 22px; line-height: 1; }
.sb-label { font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.5px; color: var(--text-dim); }
.sb-price { font-family: 'Cinzel', serif; font-size: 9px; color: var(--gold); font-weight: 700; }

/* JOBB OLDALSÁV – inventory */
.game-sidebar-right {
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 10px;
    min-height: 300px;
}

.inventory-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.inventory-empty {
    text-align: center;
    padding: 20px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.inv-empty-icon { font-size: 28px; opacity: 0.5; }
.inv-empty-text { font-family: 'Cinzel', serif; font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }
.inv-empty-hint { font-size: 10px; color: var(--text-dim); opacity: 0.5; font-style: italic; }

/* Inventory tárgy kártya */
.inv-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 6px;
    background: rgba(212,168,50,0.06);
    border: 1px solid rgba(212,168,50,0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.inv-item:hover {
    border-color: var(--gold);
    background: rgba(212,168,50,0.12);
}
.inv-item-icon  { font-size: 20px; }
.inv-item-name  { font-family: 'Cinzel', serif; font-size: 9px; color: var(--text-dim); letter-spacing: 0.5px; }
.inv-item-count {
    font-family: 'Cinzel', serif; font-size: 11px;
    font-weight: 700; color: var(--gold);
    background: rgba(212,168,50,0.1);
    border-radius: 8px; padding: 1px 6px;
}

/* Reszponzív – kisebb képernyőn */
@media (max-width: 700px) {
    .game-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .game-sidebar-left {
        flex-direction: row;
        justify-content: center;
        padding-top: 0;
    }
    .game-sidebar-right { min-height: auto; }
}

/* ===== NINCS ÉLET OVERLAY ===== */
.no-lives-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    animation: fade-up 0.3s ease;
}
.nlo-box {
    background: linear-gradient(145deg, #1c0d0d, #130508);
    border: 1px solid rgba(192,57,43,0.5);
    border-radius: 16px;
    padding: 36px 40px;
    text-align: center;
    max-width: 340px;
    box-shadow: 0 0 40px rgba(192,57,43,0.2);
}
.nlo-icon  { font-size: 48px; margin-bottom: 12px; }
.nlo-title { font-family: 'Cinzel', serif; font-size: 22px; color: #e07060; font-weight: 700; margin-bottom: 10px; }
.nlo-desc  { font-size: 14px; color: var(--text-dim); line-height: 1.6; margin-bottom: 16px; }
.nlo-timer { font-family: 'Cinzel', serif; font-size: 18px; color: var(--gold); margin-bottom: 20px; font-weight: 700; }
.nlo-btn {
    padding: 11px 32px;
    background: linear-gradient(135deg, #5c1a1a, #c0392b);
    border: none; border-radius: 8px;
    color: #fff; font-family: 'Cinzel', serif; font-size: 14px;
    font-weight: 700; cursor: pointer; letter-spacing: 1px;
    transition: opacity 0.2s;
}
.nlo-btn:hover { opacity: 0.85; }

/* ===== RANGLISTA ===== */
.my-league-badge {
    display: flex; align-items: center; gap: 10px;
    background: rgba(0,0,0,0.3); border: 1px solid var(--border);
    border-radius: 10px; padding: 10px 16px;
    margin-bottom: 16px; flex-wrap: wrap;
}
.mlb-icon  { font-size: 24px; }
.mlb-name  { font-family:'Cinzel',serif; font-size:16px; font-weight:700; }
.mlb-pts   { font-family:'Cinzel',serif; font-size:13px; color:var(--gold); margin-left:auto; }
.mlb-next  { font-size:11px; color:var(--text-dim); width:100%; font-style:italic; }

.lb-tabs { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:14px; }
.lb-tab {
    padding:6px 12px; border-radius:6px; font-size:12px; cursor:pointer;
    border:1px solid var(--border); background:rgba(255,255,255,.03);
    color:var(--text-dim); font-family:'Cinzel',serif; transition:all .2s;
    white-space:nowrap;
}
.lb-tab:hover { border-color:var(--gold); color:var(--gold); }
.lb-tab.active { border-color:var(--gold); color:var(--gold); background:rgba(212,168,50,.08); }

.lb-list { display:flex; flex-direction:column; gap:4px; max-height:60vh; overflow-y:auto; }
.lb-loading,.lb-empty { text-align:center; padding:24px; color:var(--text-dim); font-style:italic; }

.lb-row {
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; border-radius:8px;
    background:rgba(0,0,0,.2); border:1px solid var(--border);
    transition:background .15s;
}
.lb-row:hover { background:rgba(255,255,255,.03); }
.lb-row.lb-me { border-color:var(--gold); background:rgba(212,168,50,.06); }
.lb-rank   { font-family:'Cinzel',serif; font-size:13px; min-width:28px; text-align:center; }
.lb-avatar { font-size:20px; }
.lb-info   { flex:1; display:flex; flex-direction:column; gap:1px; }
.lb-name   { font-family:'Cinzel',serif; font-size:13px; color:var(--text); }
.lb-you    { font-size:10px; background:rgba(212,168,50,.2); color:var(--gold); border-radius:4px; padding:1px 5px; }
.lb-league { font-size:11px; }
.lb-score  { font-family:'Cinzel',serif; font-size:13px; color:var(--gold); font-weight:700; white-space:nowrap; }
.lb-winpct { font-size:11px; color:var(--text-dim); font-weight:400; }
.lb-separator { text-align:center; color:var(--text-dim); padding:4px; font-size:16px; }

/* ===== AVATAR VÁLASZTÓ ===== */

.avatar-picker {
    margin: 12px 0;
    padding: 12px;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.ap-title {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-dim);
    margin-bottom: 10px;
}
.ap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
}
.ap-item {
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid transparent;
    overflow: hidden;
    transition: all 0.2s;
    aspect-ratio: 1;
    background: rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center;
}
.ap-item:hover { border-color: var(--gold); transform: scale(1.08); }
.ap-item.selected { border-color: var(--gold); box-shadow: 0 0 12px rgba(212,168,50,0.5); }
.ap-item img { width: 100%; height: 100%; object-fit: cover; }
.ap-item .ap-label {
    font-size: 9px;
    color: var(--text-dim);
    font-family: 'Cinzel', serif;
    margin-top: 4px;
    text-align: center;
}
.ap-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Avatar lakat + ár */
.ap-item.locked { opacity: 0.6; cursor: not-allowed; }
.ap-item.locked:hover { transform: none; border-color: rgba(192,57,43,0.4); }
.ap-lock {
    position: absolute; bottom: 2px; right: 2px;
    font-size: 14px; line-height: 1;
}
.ap-price {
    font-size: 10px; color: var(--gold);
    font-family: 'Cinzel', serif;
    text-align: center;
}
.ap-item { position: relative; }

/* ===== KLÁN RENDSZER ===== */
.clan-loading,.clan-error,.clan-empty {
    text-align:center; padding:24px; color:var(--text-dim); font-style:italic;
}
.clan-form { background:rgba(0,0,0,.2); border:1px solid var(--border); border-radius:10px; padding:18px; margin-bottom:14px; }
.clan-form-title { font-family:'Cinzel',serif; font-size:15px; color:var(--gold); margin-bottom:14px; font-weight:700; }
.clan-input { width:100%; padding:9px 12px; background:rgba(0,0,0,.4); border:1px solid var(--border); border-radius:7px; color:var(--text); font-size:13px; outline:none; resize:vertical; }
.clan-input:focus { border-color:var(--gold); }
.form-group { margin-bottom:12px; }
.form-group label { display:block; font-size:11px; color:var(--text-dim); margin-bottom:4px; }

.clan-btn { padding:8px 16px; border-radius:7px; font-size:12px; font-weight:700; cursor:pointer; border:1px solid; transition:all .2s; font-family:'Cinzel',serif; letter-spacing:.5px; }
.clan-btn:hover { opacity:.85; transform:translateY(-1px); }
.clan-btn:disabled { opacity:.4; cursor:default; transform:none; }
.clan-btn-primary  { background:linear-gradient(135deg,#1a5c3a,#27ae60); border:none; color:#fff; }
.clan-btn-secondary{ background:rgba(255,255,255,.05); border-color:var(--border); color:var(--text-dim); }
.clan-btn-secondary:hover { border-color:var(--gold); color:var(--gold); }
.clan-btn-danger   { background:rgba(192,57,43,.12); border-color:rgba(192,57,43,.4); color:#e07060; }

/* Klán lista */
.clan-list { display:flex; flex-direction:column; gap:10px; }
.clan-card { background:rgba(0,0,0,.2); border:1px solid var(--border); border-radius:10px; padding:14px; display:flex; align-items:center; gap:12px; transition:border-color .2s; }
.clan-card:hover { border-color:var(--gold); }
.clan-card-emblem { font-size:32px; flex-shrink:0; }
.clan-card-info { flex:1; }
.clan-card-name { font-family:'Cinzel',serif; font-size:15px; color:var(--gold); font-weight:700; }
.clan-card-desc { font-size:12px; color:var(--text-dim); margin:3px 0 6px; }
.clan-card-stats { display:flex; gap:12px; font-size:11px; color:var(--text-dim); flex-wrap:wrap; }

/* Saját klán */
.clan-header { display:flex; gap:14px; align-items:flex-start; background:rgba(0,0,0,.2); border:1px solid var(--border); border-radius:10px; padding:16px; margin-bottom:14px; }
.clan-emblem { font-size:48px; flex-shrink:0; }
.clan-info { flex:1; }
.clan-name { font-family:'Cinzel',serif; font-size:20px; color:var(--gold); font-weight:700; }
.clan-desc { font-size:13px; color:var(--text-dim); margin:4px 0 8px; line-height:1.5; }
.clan-stats { display:flex; gap:14px; font-size:12px; color:var(--text-dim); flex-wrap:wrap; }

/* Tab-ok */
.clan-tabs { display:flex; gap:4px; margin-bottom:12px; }
.clan-tab { padding:7px 16px; border-radius:6px; font-size:12px; cursor:pointer; border:1px solid var(--border); background:rgba(255,255,255,.03); color:var(--text-dim); font-family:'Cinzel',serif; transition:all .15s; }
.clan-tab:hover { border-color:var(--gold); color:var(--gold); }
.clan-tab.active { border-color:var(--gold); color:var(--gold); background:rgba(212,168,50,.08); }
.clan-tab-content.hidden { display:none; }

/* Tagok lista */
.clan-member-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; background:rgba(0,0,0,.15); border:1px solid var(--border); margin-bottom:6px; }
.cm-avatar { width:36px; height:36px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cm-info { flex:1; }
.cm-name { font-family:'Cinzel',serif; font-size:13px; color:var(--text); }
.cm-level { font-size:11px; color:var(--gold); margin-left:6px; }
.cm-rank { font-size:11px; color:var(--text-dim); margin-top:2px; }
.cm-actions { display:flex; gap:6px; align-items:center; }
.clan-select { padding:4px 8px; background:rgba(0,0,0,.4); border:1px solid var(--border); border-radius:5px; color:var(--text-dim); font-size:11px; outline:none; cursor:pointer; }

/* Chat */
.clan-msg-list { max-height:280px; overflow-y:auto; margin-bottom:10px; display:flex; flex-direction:column; gap:6px; }
.clan-msg { display:flex; gap:8px; align-items:flex-start; }
.msg-avatar { width:30px; height:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.msg-body { flex:1; background:rgba(0,0,0,.2); border-radius:8px; padding:7px 10px; }
.msg-name { font-family:'Cinzel',serif; font-size:12px; color:var(--gold); font-weight:700; }
.msg-rank { font-size:10px; color:var(--text-dim); margin-left:6px; }
.msg-time { font-size:10px; color:var(--text-dim); margin-left:6px; }
.msg-text { font-size:13px; color:var(--text); margin-top:3px; word-break:break-word; }
.clan-msg-form { display:flex; gap:8px; }
.clan-msg-form .clan-input { flex:1; }

/* ===== DROP RENDSZER ===== */
#drop-inventory-wrap {
    position: fixed;
    bottom: 80px;
    right: 16px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.drop-inv-title {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-align: right;
}
.drop-inventory {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
}
.drop-empty {
    font-size: 10px;
    color: var(--text-dim);
    font-style: italic;
    opacity: 0.5;
}
.drop-item-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: rgba(10,6,8,0.9);
    border: 1px solid var(--border-glow);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(8px);
    animation: drop-in 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.drop-item-btn:hover {
    border-color: var(--gold);
    transform: scale(1.05) translateX(-3px);
    box-shadow: 0 4px 20px rgba(212,168,50,0.3);
}
.di-icon { font-size: 18px; }
.di-name { font-family: 'Cinzel', serif; font-size: 11px; color: var(--gold); letter-spacing: 0.5px; }

@keyframes drop-in {
    from { opacity: 0; transform: translateX(60px) scale(0.8); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Drop értesítő */
.drop-notif {
    position: fixed;
    top: 80px;
    right: -300px;
    z-index: 500;
    background: linear-gradient(135deg, #1c1218, #130d10);
    border: 1px solid var(--border-glow);
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    transition: right 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.drop-notif.show { right: 16px; }
.dn-icon { font-size: 24px; }
.dn-text { font-family: 'Cinzel', serif; font-size: 12px; color: var(--text-dim); }
.dn-text strong { color: var(--gold); }

/* Használati effekt */
.drop-use-effect {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    font-size: 60px;
    z-index: 600;
    pointer-events: none;
    animation: use-burst 0.8s ease-out forwards;
}
@keyframes use-burst {
    0%   { transform: translate(-50%,-50%) scale(0.5); opacity: 1; }
    60%  { transform: translate(-50%,-50%) scale(2);   opacity: 0.8; }
    100% { transform: translate(-50%,-50%) scale(2.5); opacity: 0; }
}

/* Drop inventory csak játék közben látszik */
#section-game.hidden ~ #drop-inventory-wrap,
#section-mainmenu:not(.hidden) ~ #drop-inventory-wrap {
    display: none;
}

/* Drop section a raktárban */
.drop-section { margin-top:10px; border-top:1px solid var(--border); padding-top:10px; }
.drop-section-title { font-family:'Cinzel',serif; font-size:9px; letter-spacing:2px; color:var(--text-dim); margin-bottom:6px; }
.drop-inventory { display:flex; flex-direction:column; gap:5px; }

.drop-item-btn {
    display:flex; align-items:center; gap:6px;
    padding:7px 10px; width:100%;
    background:rgba(212,168,50,.08);
    border:1px solid rgba(212,168,50,.3);
    border-radius:8px; cursor:pointer;
    transition:all .2s;
    animation:drop-in .4s cubic-bezier(.34,1.56,.64,1);
}
.drop-item-btn:hover { background:rgba(212,168,50,.18); border-color:var(--gold); transform:scale(1.03); }
.di-icon { font-size:18px; flex-shrink:0; }
.di-name { font-family:'Cinzel',serif; font-size:10px; color:var(--gold); letter-spacing:.5px; }

@keyframes drop-in {
    from { opacity:0; transform:translateX(30px) scale(.8); }
    to   { opacity:1; transform:translateX(0) scale(1); }
}

/* Drop popup (becsúszó értesítő) */
.drop-popup {
    position:fixed; top:76px; right:-280px; z-index:500;
    background:linear-gradient(135deg,#1c1218,#130d10);
    border:1px solid var(--border-glow); border-radius:12px;
    padding:10px 16px; display:flex; align-items:center; gap:10px;
    box-shadow:0 8px 32px rgba(0,0,0,.6);
    transition:right .4s cubic-bezier(.34,1.56,.64,1);
    pointer-events:none;
}
.drop-popup.show { right:16px; }
.dp-text { font-family:'Cinzel',serif; font-size:12px; color:var(--text-dim); }
.dp-text b { color:var(--gold); }

/* Használati burst effekt */
.drop-use-burst {
    position:fixed; top:50%; left:50%;
    transform:translate(-50%,-50%) scale(1);
    font-size:56px; z-index:600; pointer-events:none;
    animation:use-burst .7s ease-out forwards;
}
@keyframes use-burst {
    0%   { transform:translate(-50%,-50%) scale(.5); opacity:1; }
    60%  { transform:translate(-50%,-50%) scale(2);  opacity:.8; }
    100% { transform:translate(-50%,-50%) scale(2.5);opacity:0; }
}

/* Főmenü gomb a körvégén */
.btn-quit-round {
    background: rgba(44,62,80,0.6) !important;
    border: 1px solid rgba(100,120,140,0.4) !important;
    color: #a0b0c0 !important;
    font-size: 13px !important;
}
.btn-quit-round:hover {
    background: rgba(44,62,80,0.9) !important;
    border-color: #7f8c8d !important;
    color: #ecf0f1 !important;
}