/* TopChess.org — Durak: bendri stiliai (durak.html + durak-friend.html)
   Įtraukiama PRIEŠ puslapio <style>. Puslapio taisyklės su ta pačia specifiškumo
   reikšme ir toliau nugali. */
        /* Game area */
        .game-area {
            display: none; position: relative;
            /* One fluid size for every playing card; height and width both
               respond to the available viewport without sudden size jumps. */
            --durak-card-width: clamp(56px, min(calc(14vh - 31px), calc(9vw + 5px)), 85px);
            --durak-card-height: clamp(81px, min(calc(20.2vh - 45px), calc(13vw + 7px)), 122px);
            --durak-defense-offset: clamp(18px, calc(4vh - 8px), 35px);
        }
        .game-area.active { display: block; }
        .trump-info { display: flex; align-items: center; gap: 8px; }
        /* Koziris — balta kortos plokštuma su tamsiu rėmeliu, kad liktų įskaitomas */
        .trump-card-mini {
            width: 52px; height: 75px;
            border-radius: 4px;
            border: 1px solid rgba(0,0,0,0.25);
            background: #fff;
        }
        /* Vaidmenų žymos — šviesus fonas + tamsintas brand tekstas (kontrastas ≥4.5:1) */
        .player-label.attacker { background: var(--tc-surface-2); color: var(--tc-green-text); }
        .player-label.defender { background: var(--tc-surface-2); color: var(--tc-gold-text); }
        .player-label.neutral { background: var(--tc-surface-2); color: var(--tc-ink-soft); }
        .status-msg.your-turn { color: var(--tc-green-text); }
        .status-msg.opponent-turn { color: var(--tc-gold-text); }
        .status-msg.game-over { color: var(--tc-red-text); font-size: 1.3rem; }
        /* Opponent areas */
        .opponents-area {
            display: flex;
            justify-content: center;
            gap: 24px;
            flex-wrap: wrap;
            margin-bottom: 8px;
        }
        .opponent-section {
            text-align: center;
            min-width: 80px;
        }
        .opponent-name {
            font-size: 0.8rem;
            font-weight: 700;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        .opponent-cards-count {
            font-size: 0.75rem;
            color: var(--tc-ink-soft);
        }
        .card:hover { box-shadow: none; }
        /* Kortų plokštumos: baltas fonas + tamsus rėmelis — spalvos NEKEIČIAMOS,
           kad rausvos/juodos rūšys liktų ryškiai atskiriamos */
        .card-face {
            width: 100%; height: 100%;
            border-radius: 6px;
            background: #fff;
            border: 1px solid rgba(0,0,0,0.3);
            box-shadow: 0 2px 0 rgba(0,0,0,0.22);
        }
        .card-back {
            width: 100%; height: 100%;
            border-radius: 6px;
            border: 1px solid rgba(0,0,0,0.3);
            box-shadow: 0 2px 0 rgba(0,0,0,0.22);
        }
        .card.playable { cursor: pointer; }
        .card.playable:hover {
            transform: translateY(-12px);
            outline: 2px solid var(--tc-gold-deep);
            border-radius: 6px;
            z-index: 10;
        }
        .card.selected {
            transform: translateY(-16px);
            outline: 3px solid var(--tc-green-deep);
            border-radius: 6px;
            z-index: 11;
        }
        /* Overlapping cards in hand */
        .hand-area .card:not(:first-child) { margin-left: -25px; }
        /* Stalo „veltinis" — vientisas prislopintas paviršius; kortos ant jo lieka baltos */
        .table-area {
            background: var(--tc-surface-2);
            border: 2px solid var(--tc-line);
            box-shadow: 0 4px 0 var(--tc-line);
            border-radius: var(--tc-radius-lg);
            min-height: clamp(100px, calc(20vh - 30px), 160px);
            padding: clamp(6px, calc(1vh - 0.5px), 16px);
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
            align-items: center;
        }
        .table-pair {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            width: calc(var(--durak-card-width) + 8px);
            height: calc(var(--durak-card-height) + var(--durak-defense-offset) + 2px);
        }
        .table-pair .card { position: absolute; }
        .table-pair .attack-card { top: 0; left: 0; }
        .table-pair .defense-card { top: var(--durak-defense-offset); left: 8px; transform: rotate(8deg); }
        .table-pair.undefended { cursor: pointer; }
        .action-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--tc-line); }
        .action-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--tc-line); }
        .action-btn:focus-visible { outline: 3px solid var(--tc-blue-deep); outline-offset: 3px; }
        .action-btn:disabled {
            background: var(--tc-surface-2);
            color: var(--tc-ink-soft);
            border: 2px solid var(--tc-line);
            box-shadow: 0 4px 0 var(--tc-line);
            opacity: 0.6; cursor: not-allowed; transform: none;
        }
        /* „Imu" = teigiamas, „Pasiduodu/Nauja" = destruktyvus, perdavimas = aktyvus mėlynas */
        .btn-pickup { background: var(--tc-gold); color: #241500; box-shadow: 0 4px 0 var(--tc-gold-deep); }
        .btn-pickup:hover { box-shadow: 0 6px 0 var(--tc-gold-deep); }
        .btn-pickup:active { box-shadow: 0 0 0 var(--tc-gold-deep); }
        .btn-done { background: var(--tc-green); color: #04301A; box-shadow: 0 4px 0 var(--tc-green-deep); }
        .btn-done:hover { box-shadow: 0 6px 0 var(--tc-green-deep); }
        .btn-done:active { box-shadow: 0 0 0 var(--tc-green-deep); }
        .btn-pass { background: var(--tc-surface); color: var(--tc-ink); box-shadow: 0 4px 0 var(--tc-line); }
        /* Game over overlay */
        .game-over-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(27,36,48,0.55);
            z-index: 100;
            justify-content: center;
            align-items: center;
        }
        .game-over-overlay.active { display: flex; }
        .game-over-box {
            background: var(--tc-surface);
            border: 2px solid var(--tc-line);
            border-radius: var(--tc-radius-lg);
            box-shadow: 0 4px 0 var(--tc-line);
            padding: 40px;
            text-align: center;
            max-width: 400px;
            color: var(--tc-ink);
        }
        .game-over-box h2 { font-size: 2rem; margin-bottom: 12px; }
        .game-over-box .result-emoji { font-size: 4rem; margin-bottom: 12px; }
        .game-over-box p { margin-bottom: 20px; color: var(--tc-ink-soft); }
        /* Rules panel */
        .rules-panel {
            background: var(--tc-surface);
            border: 2px solid var(--tc-line);
            border-radius: var(--tc-radius);
            box-shadow: 0 3px 0 var(--tc-line);
            padding: 10px 16px;
            margin-bottom: 16px;
            font-size: 0.88rem;
            color: var(--tc-ink-soft);
        }
        .rules-panel summary {
            cursor: pointer;
            font-weight: 600;
            color: var(--tc-ink);
            user-select: none;
            list-style: none;
            padding: 4px 0;
        }
        .rules-panel summary::-webkit-details-marker { display: none; }
        .rules-panel summary::before { content: '▶  '; font-size: 0.7rem; opacity: 0.7; }
        details[open].rules-panel summary::before { content: '▼  '; }
        .rules-list { margin: 10px 0 4px 20px; line-height: 1.7; }
        .rules-list li { margin-bottom: 2px; }
        /* Animations */
        @keyframes dealCard {
            from { opacity: 0; transform: scale(0.3) translateY(-50px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        .card.dealing { animation: dealCard 0.3s ease-out forwards; }
        @keyframes table-card-enter {
            from { opacity: 0; transform: translateY(-10px) scale(0.94); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .card.new-on-table .card-face { animation: table-card-enter 0.24s ease-out both; }