body {
    background: radial-gradient(ellipse at center, #2d8a4e, #1a5c32 50%, #0a2e18 100%);
}
.main { padding-top: 80px; min-height: 100vh; }
.doc { padding-top: 0; }

/* ── Pre-game logo ── */
.pregame-logo {
    width:600px; max-width:88%; height:auto; margin-top:40px;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.45));
}

/* ── Registration form ── */
.containerr { display:flex; flex-direction:column; align-items:center; max-width:100%; margin:0 auto; }
.user-info-form { display:none; background:#fff; padding:20px; border-radius:10px; margin-bottom:20px; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,.71); }
.info-title { font-size:1.2em; font-weight:bold; margin-bottom:10px; }
.infos-list { text-align:center; padding:15px; background:#1a5c32; color:#d7d7d7; font-weight:100; margin-bottom:15px; border-radius:8px; }
.nadpis { color:#2d8a4e; font-weight:600; }
.infos input { padding:7px; margin-bottom:8px; border-radius:8px; border:1px solid #ccc; }
.infos { margin:5px 0; font-size:14px; }
.sex { background:#4CAF50; border:none; color:#fff; padding:3px 9px; text-align:center; display:inline-block; font-size:18px; margin:2px 4px; cursor:pointer; border-radius:4px; }

/* ── Game wrapper ── */
.game-section { max-width:800px; margin:0 auto; }
.game-wrapper { display:none; width:100%; max-width:1000px; margin:0 auto; padding:10px; }

/* ── Score panel ── */
.score-panel {
    display:flex; justify-content:space-between; align-items:center;
    background:linear-gradient(135deg,rgba(0,0,0,.55) 0%,rgba(20,60,35,.65) 100%);
    border-radius:14px; padding:10px 16px;
    margin:0 auto 8px; max-width:800px; color:#fff; font-size:14px; gap:6px;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 4px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
    filter:drop-shadow(3px 3px 2px rgba(0,0,0,.4));
}
.score-section { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.score-label { opacity:.7; font-size:12px; }
.score-value { font-size:22px; font-weight:700; }
.player-score .score-value { color:#4fc3f7; }
.ai-score .score-value { color:#ef5350; }

/* Mini dice in score panel */
.score-dice {
    display:inline-block; width:30px; height:30px; vertical-align:middle;
    opacity:0; transition:opacity .3s;
}
.score-dice.visible { opacity:1; }
.score-dice img { width:100%; height:100%; object-fit:contain; }

/* Center status message in score panel */
.status-center {
    flex:1; text-align:center; font-size:13px; font-weight:400;
    padding:5px 10px; border-radius:8px; min-width:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition: background .3s, color .3s, border-color .3s, box-shadow .3s;
    border:1px solid transparent;
}
.status-center.status-player {
    background:rgba(79,195,247,.12); color:#4fc3f7;
    border-color:rgba(79,195,247,.25);
    box-shadow:0 0 10px rgba(79,195,247,.12);
}
.status-center.status-ai {
    background:rgba(239,83,80,.12); color:#ef5350;
    border-color:rgba(239,83,80,.25);
    box-shadow:0 0 10px rgba(239,83,80,.12);
}
.status-center.status-neutral {
    background:rgba(255,255,255,.07); color:rgba(255,255,255,.7);
    border-color:rgba(255,255,255,.08);
}

/* ── Dice overlay (center screen) ── */
.dice-overlay {
    display:none; position:fixed; z-index:900;
    top:0; left:0; right:0; bottom:0;
    pointer-events:none;
    align-items:center; justify-content:center;
}
.dice-overlay.active { display:flex; }
.dice-overlay .dice {
    width:80px; height:80px; pointer-events:none;
    position:absolute; left:50%; top:66%;
    transform:translate(-50%,-50%);
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.6));
}
.dice-overlay .dice img { width:100%; height:100%; object-fit:contain; }

/* ── Board grid ── */
.board-container {
    position:relative; width:100%; overflow:visible; display:flex; justify-content:center;
    user-select:none; -webkit-user-select:none;
}
.board-grid {
    display:inline-grid;
    gap:0;
    width:100%;
}
.board-cell {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:1;
    user-select:none;
    -webkit-user-select:none;
}
.board-cell img.cell-bg {
    width:100%; height:100%; display:block; object-fit:cover;
    border-radius:3px;
    pointer-events:none;
    user-select:none;
    filter:drop-shadow(3px 3px 2px rgba(0,0,0,.4));
}
.board-cell-empty { user-select:none; }

/* Category icon on question tiles — engraved / inset look */
.board-cell .cat-icon {
    position:absolute; font-size:2.2em;
    color:rgba(233, 183, 119, 0.69);
    
    pointer-events:none; z-index:5;
}
/* Shield icon on shield tiles — purple engraved */
.board-cell .shield-icon {
    position:absolute; font-size:2.2em;
    color:rgba(120,60,180,.4);
    text-shadow:0 1px 1px rgba(255,255,255,.4), 0 -1px 1px rgba(0,0,0,.4);
    pointer-events:none; z-index:5;
}
/* Bonus overlay */
.board-cell .bonus-label {
    position:absolute; font-size:1.6em; font-weight:700;
   
    pointer-events:none; z-index:5;
}
.board-cell .bonus-plus { color:rgba(30,120,50,.5); }
.board-cell .bonus-minus { color:rgba(180,30,30,.5); }

/* ── Figurky (absolute in board-container, sized dynamically by JS) ── */
.figurka {
    border-radius:50%;
    position:absolute; z-index:10;
    cursor:pointer;
    transition: left 0.25s ease, top 0.25s ease, transform 0.15s ease;
    background:transparent;
}
.figurka img { width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.figurka.clickable { cursor:pointer; animation:pulse-click 1.5s infinite; }
.figurka.in-goal { opacity:1; cursor:default; }
.figurka.selected { transform:scale(1.45); z-index:20; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
@keyframes pulse-click {
    0%,100% { filter:drop-shadow(0 0 0 rgba(33,150,243,.6)); }
    50% { filter:drop-shadow(0 0 8px rgba(33,150,243,.8)); }
}
@keyframes fig-think {
    0%,100% { transform:rotate(0deg); }
    25%     { transform:rotate(-16deg); }
    75%     { transform:rotate(16deg); }
}
.figurka.thinking {
    transform-origin:center bottom;
    animation:fig-think 0.75s ease-in-out infinite;
}
@keyframes fig-kick-spin {
    0%   { transform:rotate(0deg) scale(1); }
    100% { transform:rotate(360deg) scale(0.7); }
}
.figurka.kicking-out {
    animation:fig-kick-spin 0.9s ease-in forwards;
}

/* ── Ochranná záře — fialová (štítové pole, 4 tahy) ── */
.figurka.shielded-purple::before {
    content:''; position:absolute; inset:-4px; border-radius:50%;
    border:2px solid #b388ff;
    animation:shield-purple-pulse 1.5s ease-in-out infinite;
    pointer-events:none;
}
@keyframes shield-purple-pulse {
    0%,100% { box-shadow:0 0 6px #b388ff, 0 0 12px rgba(179,136,255,.3); opacity:1; }
    50% { box-shadow:0 0 12px #b388ff, 0 0 24px rgba(179,136,255,.5); opacity:.7; }
}

/* ── Quiz modal ── */
.quiz-overlay {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.65);
    z-index:1000; align-items:center; justify-content:center;
}
.quiz-overlay.active { display:flex; }
.quiz-box {
    background:#fff; border-radius:18px; padding:24px 20px; max-width:540px; width:96%;
    box-shadow:0 12px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.06);
    text-align:center;
}
.quiz-question {
    font-size:19px; font-weight:600; color:#333; margin-bottom:16px; line-height:1.5;
    text-align:left;
}
.quiz-question strong { font-weight:800; }
.quiz-timer {
    width:100%; height:6px; background:#e8e8e8; border-radius:3px; margin-bottom:20px; overflow:hidden;
}
.quiz-timer-bar { height:100%; background:#4CAF50; border-radius:3px; transition:width .1s linear; }
.quiz-timer-bar.warning { background:#ff9800; }
.quiz-timer-bar.danger { background:#f44336; animation:timer-blink .5s ease-in-out infinite; }
@keyframes timer-blink {
    0%,100% { opacity:1; }
    50%      { opacity:.35; }
}
.quiz-options { display:grid; grid-template-columns:1fr; gap:10px; }
.quiz-option {
    padding:13px 16px; border:1.5px solid #ddd; border-radius:12px; background:#fafafa;
    cursor:pointer; font-size:16px; font-weight:500; color:#333; transition:all .2s;
    text-align:left; box-shadow:0 1px 3px rgba(0,0,0,.06); line-height:1.4;
}
.quiz-option:hover { border-color:#64b5f6; background:#e8f4fd; box-shadow:0 2px 8px rgba(33,150,243,.15); }
.quiz-option.correct {
    border-color:#43a047; background:#e8f5e9; color:#2e7d32;
    box-shadow:0 0 0 2px rgba(67,160,71,.25);
}
.quiz-option.wrong {
    border-color:#e53935; background:#ffebee; color:#c62828;
    box-shadow:0 0 0 2px rgba(229,57,53,.2);
}
.quiz-option.disabled { pointer-events:none; opacity:.55; }
.quiz-continue-btn {
    display:none; margin-top:14px; padding:11px 32px; border:none; border-radius:10px;
    background:#2d8a4e; color:#fff; font-size:15px; font-weight:600; cursor:pointer;
    box-shadow:0 2px 8px rgba(45,138,78,.3); transition:all .2s;
}
.quiz-continue-btn:hover { background:#24753f; box-shadow:0 4px 14px rgba(45,138,78,.35); transform:translateY(-1px); }
.quiz-note {
    display:none; margin-top:12px; padding:12px 14px; background:#f9f6ed;
    border-radius:10px; font-size:15px; color:#554; text-align:center;
    border:1px solid #ede8d4; line-height:1.45;
}


/* ── Game over overlay ── */
.game-over-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.75); backdrop-filter:blur(4px);
    z-index:1100; align-items:center; justify-content:center;
    padding:12px;
}
.game-over-overlay.active { display:flex; animation:goFadeIn .4s ease; }
@keyframes goFadeIn { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }

.game-over-box {
    background:linear-gradient(160deg,#1e5c35 0%,#0f3a1f 100%);
    border-radius:22px; padding:32px 24px 28px;
    max-width:440px; width:100%;
    text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
    color:#fff;
}

/* Trophy / lose icon */
.go-trophy { margin-bottom:6px; }
.go-trophy img { filter:drop-shadow(0 4px 16px rgba(255,215,0,.5)); }
.go-lose-icon { font-size:80px; display:block; line-height:1; margin-bottom:6px; }

/* Title */
.go-title {
    font-size:1.35rem; font-weight:800; letter-spacing:.02em;
    color:#ffd700; text-shadow:0 1px 12px rgba(255,215,0,.4);
    margin-bottom:6px;
}

/* Main score */
.go-score-main {
    font-size:clamp(2.6rem,10vw,4rem); font-weight:900; line-height:1;
    color:#fff; margin:8px 0 22px;
    text-shadow:0 2px 20px rgba(0,0,0,.4);
}

/* Stat boxes — same pattern as kv-res-box */
.go-stats {
    display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:26px;
}
.go-stat-box {
    background:rgba(255,255,255,.1); border-radius:14px; padding:12px 14px; min-width:84px;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.12), 0 4px 14px rgba(0,0,0,.2);
    flex:1; min-width:80px; max-width:120px;
}
.go-stat-val { font-size:1.5rem; font-weight:900; color:#fff; line-height:1.1; }
.go-stat-val small { font-size:.85rem; font-weight:500; opacity:.7; }
.go-stat-lbl { font-size:.7rem; opacity:.55; margin-top:4px; text-transform:uppercase; letter-spacing:.06em; }

/* Action buttons */
.go-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.go-btn {
    display:inline-block; padding:11px 24px; border-radius:12px;
    font-size:.95rem; font-weight:700; cursor:pointer; border:none;
    text-decoration:none; transition:all .2s; letter-spacing:.02em;
}
.go-btn-primary { background:#4CAF50; color:#fff; box-shadow:0 4px 14px rgba(76,175,80,.4); }
.go-btn-primary:hover { background:#43a047; transform:translateY(-1px); box-shadow:0 6px 18px rgba(76,175,80,.5); color:#fff; }
.go-btn-secondary { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.2); }
.go-btn-secondary:hover { background:rgba(255,255,255,.2); transform:translateY(-1px); color:#fff; }

/* ── Buttons ── */
.btn-game { font-size:1.1em; padding:12px 28px; margin:8px; cursor:pointer; border:none; border-radius:8px; transition:all .3s; }
.btn-game-start { background:#fff; color:#2d8a4e; }
.btn-game-start:hover { background:#e8f5e9; transform:scale(1.05); }
.btn-game-info { font-size:.8em; padding:8px 16px; background:#c8e6c9; color:#1b5e20; }

/* ── Info modal ── */
.info-modal { margin-top:0; display:none; position:fixed; z-index:1050; left:0; top:0; width:100%; height:100%; overflow:auto; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); }
.info-modal-content {
    background:#fff; margin:4% auto 20px; padding:28px 24px; border:none; width:92%; max-width:680px;
    border-radius:18px; color:#333; box-shadow:0 8px 40px rgba(0,0,0,.45); max-height:88vh; overflow-y:auto;
}
.info-modal-content h2 { color:#1b5e20; margin-bottom:18px; font-size:1.3rem; }

/* Rules grid — 2 cols on wide, 1 col on mobile */
.rules-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px;
}
.rules-card {
    background:#f4faf6; border-radius:12px; padding:14px 14px 12px;
    border:1px solid #c8e6c9;
}
.rules-card-icon { font-size:1.6rem; margin-bottom:4px; line-height:1; }
.rules-card h4 { color:#1b5e20; margin:4px 0 6px; font-size:.9rem; font-weight:700; }
.rules-card p { font-size:.82rem; color:#444; margin:0; line-height:1.45; }

/* Score table */
.rules-score-table { background:#f4faf6; border-radius:12px; padding:14px 16px; border:1px solid #c8e6c9; margin-bottom:18px; }
.rules-score-table h4 { color:#1b5e20; margin:0 0 10px; font-size:.9rem; font-weight:700; }
.rules-score-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid #e0f0e4; font-size:.83rem; }
.rules-score-row:last-of-type { border-bottom:none; }
.rs-val { font-weight:800; font-size:1rem; }
.rs-plus { color:#2e7d32; }
.rs-minus { color:#c62828; }

.rules-close-btn {
    display:block; width:100%; padding:11px; border:none; border-radius:10px;
    background:#2d8a4e; color:#fff; font-size:.95rem; font-weight:700; cursor:pointer;
    transition:background .2s;
}
.rules-close-btn:hover { background:#1b5e20; }

@media (max-width:480px) {
    .rules-grid { grid-template-columns:1fr; }
    .info-modal-content { padding:18px 14px; }
}

/* ── Responsive ── */
@media (max-width:767px) {
    .main { padding-top:65px; }
    .score-panel { font-size:11px; padding:8px 10px; }
    .score-value { font-size:16px; }
    .score-dice { width:24px; height:24px; }
    .status-center { font-size:11px; }
    .dice-overlay .dice { width:64px; height:64px; }
    .quiz-box { width:100%; border-radius:12px; padding:18px 14px; }
    .quiz-question { font-size:17px; }
    .quiz-option { font-size:15px; padding:11px 13px; }
    .quiz-note { font-size:14px; }
    .game-wrapper { padding:5px; }
    .board-cell .cat-icon { font-size:1.4em; }
    .board-cell .shield-icon { font-size:1.4em; }
    .board-cell .bonus-label { font-size:1em; }
}

/* ── Sound toggle ── */
.sound-toggle-label {
    display:flex; align-items:center; gap:8px; margin-top:14px;
    cursor:pointer; color:#fff; font-size:15px; font-weight:500;
    user-select:none;
}
.sound-toggle-label input[type=checkbox] {
    width:18px; height:18px; cursor:pointer; accent-color:#4CAF50;
}
.sound-toggle-icon { font-size:18px; }

/* ── Footer ── */
.footer { display:flex; flex-direction:column; justify-content:flex-end; width:100%; }