:root {
    --ink: #2a170c;
    --ink-soft: #6b5440;
    --paper: #f4e6c6;
    --paper-2: #e6cf9e;
    --red: #b8332a;
    --red-dark: #7a1f17;
    --gold: #e0a83a;
    --gold-soft: #f3d58c;
    --wood-1: #5a3420;
    --wood-2: #3b2214;
    --wood-3: #26150c;
    --felt: #2f5a36;
    --felt-dark: #183520;
    --blue: #3b6c94;
    --brown: #8a5a2b;
    --ok: #3f8f4f;
    --shadow: 0 6px 18px rgba(0, 0, 0, .5);
    --radius: 12px;
    --card-w: 100px;
    --card-h: 146px;
    --title-font: 'Rye', serif;
    --title-weight: normal;

    /* illüstrasyon renkleri (art.js) */
    --art-ink: #2a170c;
    --art-red: #b8332a;
    --art-paper: #f4e6c6;
    --art-gold: #e0a83a;

    --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .08 0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --paper-bg: var(--noise), radial-gradient(ellipse at 50% 40%, #f9efd8 0%, #ecd8ab 75%, #dcc08a 100%);
    --wood-bg: var(--noise),
        repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 120px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 9px),
        linear-gradient(90deg, var(--wood-2), var(--wood-1) 30%, var(--wood-2) 60%, var(--wood-1) 85%, var(--wood-2));
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
    margin: 0;
    background: var(--wood-bg);
    background-color: var(--wood-2);
    color: var(--paper);
    font-family: 'Bitter', Georgia, serif;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
h1, h2, h3, .logo, .logo-small, .western { font-family: var(--title-font); font-weight: var(--title-weight); letter-spacing: .5px; }
svg { display: block; }

/* ================================================ butonlar & formlar */
.btn {
    font: 700 15px 'Bitter', serif;
    background: var(--paper-bg);
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 8px;
    padding: 10px 18px;
    cursor: pointer;
    box-shadow: 0 4px 0 var(--ink);
    transition: transform .08s, box-shadow .08s, filter .15s;
}
@media (hover: hover) { .btn:hover:not(:disabled) { filter: brightness(1.06); } }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: linear-gradient(#c94236, var(--red-dark)); color: #fff6e0; border-color: #4a120d; box-shadow: 0 4px 0 #4a120d; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.btn-ok { background: linear-gradient(#4fa05e, #2e6b3a); color: #fff; border-color: #1c4224; box-shadow: 0 4px 0 #1c4224; }
.btn-ghost { background: rgba(0,0,0,.2); color: var(--paper); border-color: rgba(244,230,198,.5); box-shadow: none; }
@media (hover: hover) { .btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.08); } }
.btn-small { padding: 6px 12px; font-size: 13px; box-shadow: 0 3px 0 var(--ink); }
.btn-small.btn-primary { box-shadow: 0 3px 0 #4a120d; }
.btn-small.btn-ok { box-shadow: 0 3px 0 #1c4224; }
.btn-small.btn-ghost { box-shadow: none; }

input {
    font: 700 16px 'Bitter', serif;
    padding: 11px 13px;
    border-radius: 8px;
    border: 2px solid var(--ink);
    background: #fffaf0;
    color: var(--ink);
    width: 100%;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
}
input:focus { outline: 3px solid var(--gold); outline-offset: 1px; }

/* ================================================ giriş & lobi: aranıyor posteri */
.screen { min-height: 100vh; }
#screen-home, #screen-lobby, #screen-choose { position: relative; display: flex; align-items: center; justify-content: center; padding: 28px 16px; overflow: hidden; }
.backdrop { position: fixed; inset: 0; z-index: 0; }
.backdrop svg { width: 100%; height: 100%; }
.backdrop svg { object-fit: cover; }

.poster {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 430px;
    background: var(--paper-bg);
    color: var(--ink);
    padding: 26px 26px 24px;
    box-shadow: 0 18px 40px rgba(0,0,0,.6);
    border: 1px solid #b89a62;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transform: rotate(-.6deg);
}
.poster::before {
    content: '';
    position: absolute; inset: 9px;
    border: 3px double rgba(42,23,12,.55);
    pointer-events: none;
}
.poster .nail { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c9c3b8, #4a4440 70%); box-shadow: 0 2px 2px rgba(0,0,0,.5); }
.poster .nail.tl { top: 8px; left: 8px; } .poster .nail.tr { top: 8px; right: 8px; }
.poster .nail.bl { bottom: 8px; left: 8px; } .poster .nail.br { bottom: 8px; right: 8px; }
.lobby-poster { max-width: 540px; transform: rotate(.4deg); }

.poster-head { text-align: center; }
.poster-head .wanted { font-family: var(--title-font); font-size: 15px; letter-spacing: 6px; color: var(--ink-soft); }
.logo {
    margin: 2px 0 0;
    font-size: 76px;
    line-height: .95;
    text-align: center;
    color: var(--red);
    text-shadow: 3px 3px 0 var(--ink), 6px 6px 0 rgba(0,0,0,.18);
}
.tagline { margin: 4px 0 0; text-align: center; color: var(--ink-soft); font-style: italic; }
.rule-line { height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 12px); opacity: .5; }
.field > span { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 13px; }
.divider::before, .divider::after { content: ''; flex: 1; border-top: 1px dashed var(--ink-soft); }
.join-row { display: flex; gap: 8px; }
#home-code { text-transform: uppercase; letter-spacing: 4px; text-align: center; font-family: var(--title-font); }
#home-code::placeholder { text-transform: none; letter-spacing: 1px; }
.rules { font-size: 14px; color: var(--ink-soft); }
.rules summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.rules ul { padding-left: 18px; margin: 8px 0 0; }
.rules li { margin-bottom: 4px; }

.lobby-poster h2 { margin: 0; text-align: center; font-size: 30px; }
.room-code-row { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; }
.room-code { font-family: var(--title-font); font-size: 34px; letter-spacing: 6px; color: var(--red); text-shadow: 2px 2px 0 rgba(42,23,12,.25); }
.lobby-players { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lobby-players li {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 8px;
    background: rgba(42,23,12,.08); border: 1px solid rgba(42,23,12,.18);
    font-weight: 700;
}
.lobby-players .lp-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-size: 16px; flex: none; }
.lobby-players .lp-name { flex: 1; }
.lobby-players .tag { font-size: 12px; color: var(--ink-soft); font-weight: 400; }
.lobby-players .kick { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--red-dark); }
.seats-meter { display: flex; gap: 6px; justify-content: center; }
.seats-meter span { width: 22px; height: 8px; border-radius: 4px; background: rgba(42,23,12,.18); }
.seats-meter span.on { background: var(--red); }
.seats-meter span.min { box-shadow: inset 0 0 0 2px var(--red); }
.hint { margin: 0; text-align: center; color: var(--ink-soft); font-size: 14px; }
.lobby-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.poster .btn-ghost { color: var(--ink); border-color: var(--ink-soft); background: transparent; }

/* ================================================ oyun düzeni */
#screen-game { display: flex; flex-direction: column; height: 100vh; }

.topbar {
    display: flex; align-items: center; gap: 14px;
    padding: 8px 18px;
    background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.35));
    border-bottom: 3px solid var(--wood-3);
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
    position: relative; z-index: 5;
}
.logo-small { color: var(--red); font-size: 26px; text-shadow: 2px 2px 0 #000; }
.turn-info { flex: 1; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.turn-info .mini-portrait { width: 28px; height: 28px; }
.countdown { font-weight: 700; color: var(--gold); min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.countdown.low { color: #ff6b5b; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .5; } }
.log-toggle { display: none; }

.game-layout { flex: 1; display: flex; min-height: 0; }
.table-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 12px 14px 0; gap: 10px; }

/* masa: ahşap kenar + yeşil çuha */
.table {
    position: relative;
    flex: 1;
    min-height: 330px;
    border-radius: 50% / 42%;
    background:
        var(--noise),
        radial-gradient(ellipse at 50% 45%, #3f7346 0%, var(--felt) 45%, var(--felt-dark) 100%);
    border: 16px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 0 0 3px #1a0d06,
        0 0 0 16px var(--wood-1),
        0 0 0 19px #1a0d06,
        inset 0 0 50px rgba(0,0,0,.65),
        0 18px 30px rgba(0,0,0,.55);
    margin: 18px 18px 6px;
}
.table::after {
    content: ''; position: absolute; inset: 22px; border-radius: 50% / 42%;
    border: 2px dashed rgba(243,213,140,.18); pointer-events: none;
}
.table-center {
    position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
    display: flex; gap: 18px; align-items: center; z-index: 1;
}
.pile { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--gold-soft); text-shadow: 0 1px 2px #000; }
.deck-stack { position: relative; width: var(--card-w); height: var(--card-h); }
.deck-stack .back { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.deck-stack .back:nth-child(1) { transform: translate(4px, 4px); }
.deck-stack .back:nth-child(2) { transform: translate(2px, 2px); }
.back svg { width: 100%; height: 100%; }
.store {
    display: flex; gap: 6px; padding: 10px; border-radius: 12px;
    background: rgba(0,0,0,.35); border: 2px dashed var(--gold);
    flex-direction: column; align-items: center;
}
.store-title { font-family: var(--title-font); color: var(--gold); font-size: 13px; }
.store-cards { display: flex; gap: 6px; }

/* ================================================ oyuncu koltukları */
.seat {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 210px;
    background: var(--paper-bg);
    color: var(--ink);
    border-radius: var(--radius);
    padding: 8px 9px 8px;
    box-shadow: var(--shadow);
    border: 2px solid #a88a56;
    font-size: 13px;
    z-index: 2;
    transition: box-shadow .25s, opacity .25s, filter .25s;
}
.seat.turn { border-color: var(--gold); }
.seat.actor { box-shadow: 0 0 0 3px var(--gold), 0 0 26px 4px rgba(224,168,58,.75); }
.seat.targetable { cursor: crosshair; animation: aim 1.1s infinite; }
.seat.targetable::after {
    content: ''; position: absolute; inset: -10px; border-radius: 16px; pointer-events: none;
    background:
        linear-gradient(var(--red), var(--red)) 50% 0 / 2px 10px no-repeat,
        linear-gradient(var(--red), var(--red)) 50% 100% / 2px 10px no-repeat,
        linear-gradient(var(--red), var(--red)) 0 50% / 10px 2px no-repeat,
        linear-gradient(var(--red), var(--red)) 100% 50% / 10px 2px no-repeat;
}
@keyframes aim { 50% { box-shadow: 0 0 0 4px var(--red), 0 0 22px rgba(184,51,42,.8); } }
.seat.not-targetable { opacity: .5; }
.seat.dead { filter: grayscale(.9) sepia(.3); opacity: .75; }

.seat-top { display: flex; gap: 9px; align-items: center; }
.avatar { position: relative; width: 58px; height: 58px; flex: none; }
.avatar .portrait { width: 100%; height: 100%; }
.role-badge {
    position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px;
    background: var(--paper); border-radius: 50%; border: 2px solid var(--ink);
    padding: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.role-badge svg { width: 100%; height: 100%; }
.seat-info { min-width: 0; flex: 1; }
.seat-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-tag { font: 700 9px 'Bitter', serif; letter-spacing: 1px; background: var(--ink-soft); color: var(--paper); border-radius: 3px; padding: 1px 4px; margin-right: 5px; vertical-align: 1px; font-style: normal; }
.seat-char { font-size: 12px; color: var(--ink-soft); cursor: help; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bullets { display: flex; gap: 1px; margin-top: 3px; }
.bullets svg { width: 11px; height: 16px; }
.seat-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 6px; }
.hand-fan { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 12px; }
.hand-fan .fan { position: relative; width: 26px; height: 20px; }
.hand-fan .fan i { position: absolute; bottom: 0; left: 8px; width: 11px; height: 16px; border-radius: 2px; background: var(--red-dark); border: 1px solid var(--gold); transform-origin: 50% 100%; }
.hand-fan .fan i:nth-child(1) { transform: rotate(-22deg); }
.hand-fan .fan i:nth-child(3) { transform: rotate(22deg); }
.dist {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 700; background: var(--ink); color: var(--paper);
    border-radius: 12px; padding: 2px 8px 2px 6px; white-space: nowrap;
}
.dist::before { content: ''; width: 10px; height: 10px; border: 2px solid var(--gold); border-radius: 50%; box-sizing: border-box; }
.in-play { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 700; padding: 1px 6px 1px 2px; border-radius: 6px;
    background: #dfe9f1; border: 1.5px solid var(--blue); cursor: help; white-space: nowrap; color: var(--ink);
}
.chip svg { width: 18px; height: 18px; }
.chip.jail, .chip.dynamite { background: #f7d6cc; border-color: var(--red); }
.turn-ribbon {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    background: var(--gold); color: var(--ink); font: 12px var(--title-font); padding: 1px 12px;
    border-radius: 4px; border: 2px solid var(--ink); white-space: nowrap;
}
.stamp {
    position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) rotate(-14deg);
    font: 26px var(--title-font); color: var(--red); border: 4px solid var(--red); border-radius: 6px;
    padding: 0 10px; background: rgba(244,230,198,.75); pointer-events: none; letter-spacing: 2px;
}
.seat.dying .stamp { animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes stamp { from { transform: translate(-50%, -50%) rotate(-14deg) scale(3); opacity: 0; } }

/* vurulma / iyileşme */
.hit { animation: shake .5s; }
.hit::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(184,51,42,.55); animation: flash .7s forwards; pointer-events: none; z-index: 3; }
.healed::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(79,160,94,.45); animation: flash .9s forwards; pointer-events: none; z-index: 3; }
@keyframes shake { 0%,100% { translate: 0 0; } 20% { translate: -6px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } }
@keyframes flash { to { opacity: 0; } }
.float-text {
    position: fixed; z-index: 80; pointer-events: none; font: 28px var(--title-font);
    text-shadow: 2px 2px 0 #000; animation: floatUp 1.3s ease-out forwards;
}
.float-text.dmg { color: #ff5a4a; }
.float-text.heal { color: #7fe08f; }
@keyframes floatUp { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -60px); opacity: 0; } }

.burst {
    position: fixed; z-index: 81; pointer-events: none; width: 150px; height: 110px;
    transform: translate(-50%, -50%); animation: burst .9s ease-out forwards;
}
.burst svg { width: 100%; height: 100%; overflow: visible; }
@keyframes burst {
    0% { transform: translate(-50%, -50%) scale(.2) rotate(-12deg); opacity: 0; }
    20% { transform: translate(-50%, -50%) scale(1.15) rotate(-6deg); opacity: 1; }
    70% { transform: translate(-50%, -50%) scale(1) rotate(-6deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.1) rotate(-6deg); opacity: 0; }
}

.banner {
    position: fixed; left: 50%; top: 40%; z-index: 82; pointer-events: none;
    font: 54px var(--title-font); color: var(--gold); white-space: nowrap;
    text-shadow: 3px 3px 0 var(--ink), 0 0 30px rgba(0,0,0,.8);
    padding: 10px 40px;
    background: linear-gradient(90deg, transparent, rgba(42,23,12,.85) 20%, rgba(42,23,12,.85) 80%, transparent);
    animation: banner 1.8s ease-in-out forwards;
}
@keyframes banner {
    0% { transform: translate(-50%, -50%) scaleX(0); opacity: 0; }
    15%, 75% { transform: translate(-50%, -50%) scaleX(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scaleX(1); opacity: 0; }
}

.card.flying { position: fixed; margin: 0; z-index: 79; transform-origin: 0 0; pointer-events: none; transition: transform .55s cubic-bezier(.3, .8, .3, 1), opacity .55s; }

/* ================================================ kartlar */
.card {
    position: relative;
    flex: 0 0 var(--card-w);
    width: var(--card-w);
    height: var(--card-h);
    border-radius: 10px;
    background: var(--paper-bg);
    color: var(--ink);
    border: 2px solid var(--ink);
    box-shadow: inset 0 0 0 4px var(--brown), inset 0 0 0 5px rgba(42,23,12,.6), 0 4px 10px rgba(0,0,0,.45);
    display: flex; flex-direction: column; align-items: stretch;
    padding: 9px 8px 7px;
    cursor: default; user-select: none;
    transition: transform .15s, box-shadow .15s, opacity .15s, filter .15s;
}
.card.blue { box-shadow: inset 0 0 0 4px var(--blue), inset 0 0 0 5px rgba(42,23,12,.6), 0 4px 10px rgba(0,0,0,.45); }
.card .ctitle.long { font-size: 10.5px; letter-spacing: -.2px; }
.card .ctitle {
    font: 12.5px var(--title-font); text-align: center; line-height: 1.1; min-height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-bottom: 1.5px solid rgba(42,23,12,.35); padding-bottom: 3px;
}
.card .cart { flex: 1; display: flex; align-items: center; justify-content: center; padding: 4px 2px; min-height: 0; }
.card .cart svg { width: 100%; height: 100%; max-height: 74px; }
.card .cfoot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; }
.card .rank { background: var(--paper); border: 1.5px solid var(--ink); border-radius: 5px; padding: 0 4px; line-height: 16px; }
.card .rank.red { color: var(--red); }
.card .range { display: inline-flex; align-items: center; gap: 3px; color: var(--blue); }
.card .range::before { content: ''; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--blue); box-sizing: border-box; background: radial-gradient(var(--blue) 0 1.5px, transparent 2px); }
.card .kind { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.card.blue .kind { color: var(--blue); }

.card.playable { cursor: pointer; }
@media (hover: hover) { .card.playable:hover { transform: translateY(-12px) rotate(-1deg); box-shadow: inset 0 0 0 4px var(--brown), inset 0 0 0 5px rgba(42,23,12,.6), 0 14px 22px rgba(0,0,0,.55); } }
@media (hover: hover) { .card.blue.playable:hover { box-shadow: inset 0 0 0 4px var(--blue), inset 0 0 0 5px rgba(42,23,12,.6), 0 14px 22px rgba(0,0,0,.55); } }
.card.selected { transform: translateY(-20px); outline: 3px solid var(--gold); outline-offset: 2px; }
.card.dim { filter: saturate(.3) brightness(.72); }
.card.deal-in { animation: dealIn .45s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes dealIn { from { transform: translateY(-80px) rotate(8deg); opacity: 0; } }

.card.small { --card-w: 74px; --card-h: 108px; padding: 6px 5px 5px; }
.card.small .ctitle { font-size: 10px; min-height: 22px; }
.card.small .cart svg { max-height: 50px; }
.card.small .cfoot { font-size: 10px; }
.card.small .kind { display: none; }

.empty-pile { width: var(--card-w); height: var(--card-h); border-radius: 10px; border: 2px dashed rgba(243,213,140,.4); }

/* ================================================ istem (tabela) */
.prompt {
    min-height: 52px;
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px;
    padding: 8px 16px; border-radius: 10px;
    background: var(--noise), linear-gradient(#4a2a17, #2e1a0e);
    border: 2px solid #1a0d06;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.4);
    text-align: center; font-weight: 700; color: var(--gold-soft);
    margin: 0 18px;
}
.prompt.urgent { border-color: var(--red); animation: urgent 1.4s infinite; }
@keyframes urgent { 50% { box-shadow: 0 0 0 3px rgba(184,51,42,.6), 0 0 18px rgba(184,51,42,.6); } }
.prompt .p-cards { display: flex; gap: 6px; }

.me-area { display: flex; gap: 14px; align-items: flex-end; padding: 0 4px 12px; }
.me-panel {
    flex: 0 0 250px;
    background: var(--paper-bg);
    color: var(--ink);
    border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow);
    border: 2px solid #a88a56; font-size: 13px; position: relative;
}
.me-panel.turn { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold), var(--shadow); }
.me-panel .seat-top { align-items: flex-start; }
.me-panel .avatar { width: 74px; height: 74px; }
.me-panel .role-badge { width: 32px; height: 32px; }
.me-panel .seat-name { font-size: 16px; }
.me-panel .role-name { font: 13px var(--title-font); }
.role-name.sheriff { color: #9a6b00; } .role-name.deputy { color: var(--blue); }
.role-name.outlaw { color: var(--red-dark); } .role-name.renegade { color: #4b6a1f; }
.me-panel .char-desc { font-size: 12px; color: var(--ink-soft); margin-top: 6px; line-height: 1.3; }
.me-panel .bullets svg { width: 13px; height: 19px; }
.me-stats { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; font-weight: 700; }

.hand { flex: 1; display: flex; gap: 8px; overflow-x: auto; overflow-y: visible; padding: 24px 6px 6px; min-height: calc(var(--card-h) + 32px); align-items: flex-end; }
.hand .hint { color: var(--gold-soft); align-self: center; }

/* ================================================ günlük */
.log-panel {
    width: 290px; flex: 0 0 290px;
    background: rgba(20,10,5,.55);
    border-left: 3px solid var(--wood-3);
    display: flex; flex-direction: column; min-height: 0;
}
.log-panel h3 { margin: 12px 16px 8px; font-size: 20px; color: var(--gold); }
.log { list-style: none; margin: 0; padding: 0 16px 16px; overflow-y: auto; flex: 1; font-size: 13px; line-height: 1.35; }
.log li { padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.06); color: #e8dcc0; }
.log li.turn-line { color: var(--gold); font-family: var(--title-font); padding-top: 10px; border-bottom-color: rgba(224,168,58,.3); }
.log li.death { color: #ff8a7a; font-weight: 700; }
.log li.win { color: var(--gold); font-weight: 700; font-size: 15px; }
.log li.fresh { animation: logIn .5s; }
@keyframes logIn { from { background: rgba(224,168,58,.25); } }

/* ================================================ modal & bildirim */
.modal {
    position: fixed; inset: 0; background: rgba(10,5,2,.7);
    display: flex; align-items: center; justify-content: center; z-index: 90; padding: 16px;
}
.modal-box {
    position: relative;
    background: var(--paper-bg); color: var(--ink); border-radius: 6px; padding: 26px 24px 22px;
    max-width: 580px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 18px 40px rgba(0,0,0,.7);
    display: flex; flex-direction: column; gap: 14px;
    animation: pop .25s ease-out;
}
@keyframes pop { from { transform: scale(.9); opacity: 0; } }
.modal-box h2 { margin: 0; text-align: center; font-size: 28px; }
.modal-cards { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.modal-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.winner-icon { width: 96px; height: 96px; margin: 0 auto; }
.result-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.result-list li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: rgba(42,23,12,.08); border-radius: 8px; }
.result-list li.won { background: rgba(224,168,58,.35); }
.result-list .r-por { width: 38px; height: 38px; flex: none; }
.result-list .r-name { flex: 1; font-weight: 700; }
.result-list .r-name small { font-weight: 400; color: var(--ink-soft); }
.result-list .r-role { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.result-list .r-role svg { width: 22px; height: 22px; }
.result-list li.dead .r-por { filter: grayscale(1); }

.toast {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
    background: var(--red-dark); color: #fff; padding: 11px 20px; border-radius: 8px;
    border: 2px solid #4a120d; box-shadow: var(--shadow); z-index: 95; font-weight: 700; max-width: calc(100% - 32px);
}

/* ================================================ mobil */
@media (max-width: 1100px) {
    .log-panel { position: fixed; right: 0; top: 50px; bottom: 0; z-index: 40; background: #1c0f08; transform: translateX(100%); transition: transform .2s; }
    .log-panel.open { transform: none; box-shadow: -10px 0 30px rgba(0,0,0,.6); }
    .log-toggle { display: inline-block; }
}

@media (max-width: 760px) {
    :root { --card-w: 78px; --card-h: 116px; }
    body { font-size: 14px; }
    .logo { font-size: 60px; }
    .table {
        border-radius: 18px; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px;
        align-content: flex-start; min-height: 0; flex: 0 0 auto; margin: 8px 4px;
        border-width: 8px;
        box-shadow: 0 0 0 2px #1a0d06, 0 0 0 8px var(--wood-1), 0 0 0 10px #1a0d06, inset 0 0 30px rgba(0,0,0,.6);
    }
    .table::after { display: none; }
    .seat { position: static; transform: none; width: calc(50% - 4px); padding: 7px; }
    .seat .avatar { width: 44px; height: 44px; }
    .seat .role-badge { width: 22px; height: 22px; }
    .table-center { position: static; transform: none; width: 100%; justify-content: center; order: 99; padding: 6px 0; }
    .me-area { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
    .me-panel { flex: none; padding: 8px; }
    .me-panel .avatar { width: 56px; height: 56px; }
    .me-panel .role-badge { width: 26px; height: 26px; }
    .me-panel .char-desc { display: none; } /* uzun basınca önizlemede görünür */
    .hand { padding: 14px 4px 4px; min-height: calc(var(--card-h) + 20px); }
    .table-wrap { overflow-y: auto; padding: 8px 8px 0; }
    .prompt { margin: 0; }
    #screen-game { height: auto; min-height: 100vh; }
    .card .ctitle { font-size: 10.5px; min-height: 24px; }
    .card .cart svg { max-height: 54px; }
    .banner { font-size: 34px; }
}

/* ================================================ tema seçici */
.theme-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-tile {
    display: flex; align-items: center; gap: 8px; text-align: left;
    padding: 7px 9px; border-radius: 9px; cursor: pointer; color: var(--ink);
    border: 2px solid rgba(42,23,12,.25); background: rgba(42,23,12,.05);
    font: 13px 'Bitter', serif; transition: border-color .15s, background .15s;
}
@media (hover: hover) { .theme-tile:hover:not(:disabled) { border-color: var(--ink-soft); } }
.theme-tile.on { border-color: var(--red); background: rgba(184,51,42,.12); box-shadow: inset 0 0 0 1px var(--red); }
.theme-tile:disabled { cursor: default; opacity: .55; }
.theme-tile.on:disabled { opacity: 1; }
.tt-art { width: 40px; height: 40px; flex: none; }
.tt-art svg { width: 100%; height: 100%; }
.tt-text { display: flex; flex-direction: column; line-height: 1.2; }
.tt-text small { color: var(--ink-soft); font-size: 11px; }
.logo-sub { text-align: center; font: 700 15px 'Cinzel', serif; letter-spacing: 10px; color: var(--ink-soft); margin-top: 2px; } /* Rye'nin İ'si bozuk */
.logo-sub:empty { display: none; }

/* ================================================ Calradia (Bannerlord) teması */
body[data-theme="bannerlord"] {
    --ink: #1f1a17;
    --ink-soft: #5e5248;
    --red: #8e1b1b;
    --red-dark: #5c1010;
    --gold: #c9a24a;
    --gold-soft: #e6cf8e;
    --wood-1: #3c3a42;
    --wood-2: #24232a;
    --wood-3: #121116;
    --felt: #b9a072;
    --felt-dark: #7d6844;
    --blue: #46607a;
    --brown: #8a6a32;
    --title-font: 'Cinzel', serif;
    --title-weight: 700;
    --art-red: #8e1b1b;
    --art-gold: #c9a24a;
    --art-ink: #1f1a17;
    --wood-bg: var(--noise),
        repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 2px, transparent 2px 46px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.2) 0 2px, transparent 2px 92px),
        linear-gradient(160deg, #2c2b33, #1c1b21 60%, #2a2830);
}
body[data-theme="bannerlord"] .table {
    background:
        var(--noise),
        repeating-radial-gradient(circle at 28% 38%, transparent 0 22px, rgba(90,60,30,.13) 22px 23.5px),
        repeating-radial-gradient(circle at 72% 64%, transparent 0 26px, rgba(90,60,30,.11) 26px 27.5px),
        radial-gradient(ellipse at 50% 45%, #e2cfa2 0%, #c9b082 55%, #8f774e 100%);
    box-shadow:
        0 0 0 3px #0c0b0f,
        0 0 0 16px #4a3a2a,
        0 0 0 19px #0c0b0f,
        inset 0 0 50px rgba(60,40,20,.55),
        0 18px 30px rgba(0,0,0,.6);
}
body[data-theme="bannerlord"] .table::after { border-color: rgba(31,26,23,.25); }
body[data-theme="bannerlord"] .pile { color: var(--ink); text-shadow: none; font-weight: 700; }
body[data-theme="bannerlord"] .empty-pile { border-color: rgba(31,26,23,.35); }
body[data-theme="bannerlord"] .logo { color: var(--red); text-shadow: 2px 2px 0 var(--gold), 4px 4px 0 rgba(0,0,0,.25); letter-spacing: 4px; }
body[data-theme="bannerlord"] .logo-small { color: var(--gold); text-shadow: 2px 2px 0 #000; }
body[data-theme="bannerlord"] .card .ctitle { font-size: 11.5px; letter-spacing: 0; }
body[data-theme="bannerlord"] .card .ctitle.long { font-size: 9.5px; }
body[data-theme="bannerlord"] .poster::after {
    content: ''; position: absolute; left: 50%; bottom: -16px; width: 44px; height: 44px; transform: translateX(-50%);
    border-radius: 50%; background: radial-gradient(circle at 40% 35%, #b42a2a, #6a0f0f 70%);
    box-shadow: 0 3px 6px rgba(0,0,0,.5), inset 0 0 0 4px rgba(0,0,0,.15);
}
body[data-theme="bannerlord"] .poster .nail { display: none; }
body[data-theme="bannerlord"] .poster { transform: none; }
body[data-theme="bannerlord"] .btn-primary { background: linear-gradient(#a02424, var(--red-dark)); }
body[data-theme="bannerlord"] .prompt { background: var(--noise), linear-gradient(#2e2c34, #1b1a20); border-color: #0c0b0f; color: var(--gold-soft); }
body[data-theme="bannerlord"] .log-panel { background: rgba(10,10,14,.55); }
body[data-theme="bannerlord"] .turn-ribbon { background: var(--red); color: var(--gold-soft); border-color: #1f1a17; }
body[data-theme="bannerlord"] .bullets svg { width: 12px; height: 16px; }
body[data-theme="bannerlord"] .room-code { letter-spacing: 8px; }
@media (max-width: 760px) {
    body[data-theme="bannerlord"] .table { box-shadow: 0 0 0 2px #0c0b0f, 0 0 0 8px #4a3a2a, 0 0 0 10px #0c0b0f, inset 0 0 30px rgba(60,40,20,.5); }
}

/* oyun sonu sorusu */
.end-question { margin: 4px 0 0; text-align: center; font: var(--title-weight) 18px var(--title-font); }
.modal-box .btn-ghost { color: var(--ink); border-color: var(--ink-soft); }

/* ================================================ Orijinal kart görselleri teması (yalnız yerel) */
.theme-pick.three { grid-template-columns: 1fr 1fr 1fr; }
.theme-pick.three .tt-art { width: 34px; height: 34px; }
.card.photo {
    padding: 0; border: none; background-color: #f4e6c6;
    background-size: cover; background-position: center; border-radius: 9px;
    box-shadow: 0 4px 10px rgba(0,0,0,.45);
}
@media (hover: hover) { .card.photo.playable:hover, .card.blue.photo.playable:hover { box-shadow: 0 14px 22px rgba(0,0,0,.55); } }
.card.photo .rank-ov {
    position: absolute; left: 3%; bottom: 1.5%; min-width: 22%; padding: 1px 3px;
    background: #fff; border-radius: 5px; text-align: center;
    font: 700 13px 'Bitter', serif; color: #111; box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.card.photo .rank-ov.red { color: #c0262d; }
.card.small.photo .rank-ov { font-size: 10px; }
body[data-theme="original"] .chip svg { border-radius: 3px; }

/* son olay satırı (istemin altında) */
.last-event {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 6px 18px 0; padding: 5px 14px; border-radius: 8px;
    background: rgba(20,12,6,.55); border: 1px solid rgba(243,213,140,.25);
    color: var(--gold-soft); font-size: 13px; text-align: center;
}
.last-event .le-label { flex: none; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; opacity: .7; }
.last-event.fresh .le-text { animation: lastEventIn .6s ease-out; }
@keyframes lastEventIn { 0% { opacity: 0; transform: translateY(-6px); color: #fff; } 100% { opacity: 1; transform: none; } }

/* elden çıkan kart: kendi etrafında dönerek uçar */
.card.spin-flying { position: fixed; margin: 0; z-index: 80; pointer-events: none; transform-origin: 50% 50%; box-shadow: 0 10px 24px rgba(0,0,0,.6); }

/* koltuğun üstüne gelince tam boy kartlar */
.peek {
    position: fixed; z-index: 85; pointer-events: none;
    display: flex; flex-wrap: wrap; gap: 8px; max-width: min(calc(100vw - 20px), 1060px);
    padding: 8px; border-radius: 12px; background: rgba(15,9,4,.82); box-shadow: 0 12px 34px rgba(0,0,0,.6);
}
.peek .card.peek-card { --card-w: 250px; --card-h: 389px; flex: 0 0 var(--card-w); border-radius: 14px; }
.peek .card.photo.peek-card .rank-ov { font-size: 20px; }
@media (max-height: 520px), (max-width: 760px) {
    .peek .card.peek-card { --card-w: 160px; --card-h: 249px; }
    .peek .card.photo.peek-card .rank-ov { font-size: 14px; }
}
@media (max-width: 760px) { .last-event { margin: 4px 0 0; } }

/* ana menü: aktif odalar */
.active-rooms { display: flex; flex-direction: column; gap: 8px; }
.room-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.room-list .hint { text-align: center; font-size: 13px; color: var(--ink-soft); }
.room-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px;
    background: rgba(42,23,12,.06); border: 1px dashed rgba(42,23,12,.3);
}
.ri-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.ri-code { font-family: monospace; font-size: 15px; letter-spacing: 1px; }
.ri-status { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 4px; background: #c9b27a; color: #2a170c; }
.ri-status.lobby { background: #6f9a4a; color: #fff; }
.ri-status.playing { background: var(--red); color: #fff; }
.ri-meta { flex-basis: 100%; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-actions { display: flex; gap: 4px; flex: none; }

/* izleyiciler */
.watchers { font-weight: 700; color: var(--gold-soft); white-space: nowrap; }
.watchers-line { text-align: center; margin: 0; font-weight: 700; color: var(--ink-soft); }
.spectator-panel { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 6px 0; }
.spectator-panel .sp-eye { font-size: 34px; line-height: 1; }
.spectator-panel .btn-ghost { color: var(--ink); border-color: var(--ink-soft); }

/* ================================================ dokunmatik */
/* uzun basmada metin seçimi / sistem menüsü çıkmasın, çift dokunma yakınlaştırması gecikmesi olmasın */
#screen-game { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.card, .seat, .btn, .chip, .me-panel { touch-action: manipulation; }

@media (max-width: 760px) {
    .last-event { font-size: 12px; padding: 4px 10px; }
    .topbar { gap: 8px; padding: 8px 10px; }
}
@media (max-width: 420px) {
    .logo-small { display: none; }
    /* üç tema kutucuğu dar ekrana sığsın: resim üstte, yazı altta */
    .theme-pick.three .theme-tile { flex-direction: column; text-align: center; padding: 6px 4px; gap: 4px; min-width: 0; }
    .theme-pick.three .tt-text { min-width: 0; overflow-wrap: anywhere; }
    .theme-pick.three .tt-text small { font-size: 10px; }
}

/* dokunmatik önizleme: kaydırılabilir, dokununca kapanır */
.peek.touch {
    pointer-events: auto; overflow-y: auto; justify-content: center;
    background: rgba(15,9,4,.96);
    max-height: calc(100vh - 20px); max-width: calc(100vw - 20px);
}
.peek.touch .card.peek-card { --card-w: min(200px, calc((100vw - 52px) / 2)); --card-h: calc(var(--card-w) * 1.556); }
.peek-hint { flex-basis: 100%; text-align: center; font-size: 12px; color: var(--gold-soft); opacity: .8; }
/* SVG temaları: kart + açıklama, karakter kutusu */
.peek-item { width: 150px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.peek-item .card { --card-w: 120px; --card-h: 175px; }
.peek-item p { margin: 0; font-size: 12px; line-height: 1.3; color: #f3e6c8; text-align: center; }
.peek-char {
    flex-basis: 100%; display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 8px;
    background: var(--paper-bg); color: var(--ink); font-size: 13px; max-width: 340px; box-sizing: border-box;
}
.peek-char .pc-por { width: 56px; height: 56px; flex: none; }
.peek-char small { display: block; font-weight: 700; }
.peek-char p { margin: 4px 0 0; line-height: 1.3; }

/* ================================================ oda ayarları (lobi) */
.settings { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 9px; background: rgba(42,23,12,.06); border: 1px dashed rgba(42,23,12,.3); }
.settings-title { font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.settings-sum { font-size: 12px; color: var(--ink-soft); }
.settings-body { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px dashed rgba(42,23,12,.3); animation: settingsOpen .25s ease-out; }
@keyframes settingsOpen { from { opacity: 0; transform: translateY(-4px); } }
.settings-title small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-soft); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.set-label { font-weight: 700; font-size: 14px; display: flex; flex-direction: column; line-height: 1.15; }
.set-label small { font-weight: 400; font-size: 11px; color: var(--ink-soft); }
.seg { display: inline-flex; border: 1.5px solid var(--ink-soft); border-radius: 7px; overflow: hidden; flex: none; }
.seg button {
    border: none; background: transparent; color: var(--ink); font: 600 12px 'Bitter', serif;
    padding: 5px 8px; cursor: pointer; touch-action: manipulation;
}
.seg button + button { border-left: 1px solid rgba(42,23,12,.3); }
.seg button.on { background: var(--red); color: #fff; }
.seg button:disabled { cursor: default; }
.seg button:disabled:not(.on) { opacity: .55; }
@media (hover: hover) { .seg button:not(:disabled):not(.on):hover { background: rgba(42,23,12,.1); } }

/* ================================================ karakter seçimi */
.choose-poster { max-width: 860px; transform: none; }
.choose-poster h2 { margin: 0; text-align: center; font-size: 30px; }
.choose-info { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; font-size: 15px; }
.choose-info .role-badge { position: static; display: inline-block; width: 28px; height: 28px; vertical-align: middle; }
.choose-countdown { font-weight: 700; color: var(--red-dark); font-variant-numeric: tabular-nums; }
.choose-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.choose-card {
    width: 200px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px;
    border-radius: 12px; border: 2px solid rgba(42,23,12,.35); background: rgba(255,255,255,.35);
    color: var(--ink); font: 14px 'Bitter', serif; cursor: pointer; text-align: center;
    transition: transform .15s, box-shadow .15s, border-color .15s; touch-action: manipulation;
}
.choose-card .cc-por { width: 96px; height: 96px; }
.choose-card b { font-size: 16px; }
.choose-card .cc-hp { color: var(--red); letter-spacing: 2px; font-weight: 700; }
.choose-card .cc-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.3; }
.choose-card.photo { width: 220px; padding: 8px; }
.choose-card .cc-img { width: 100%; aspect-ratio: 250 / 389; border-radius: 9px; background: #f4e6c6 center / cover; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.choose-card:active { transform: scale(.97); }
@media (hover: hover) { .choose-card:hover { transform: translateY(-6px); border-color: var(--red); box-shadow: 0 10px 22px rgba(0,0,0,.35); } }
.choose-status { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.choose-status li { padding: 3px 10px; border-radius: 12px; background: rgba(42,23,12,.08); font-size: 13px; }
.choose-status li.done { background: rgba(63,143,79,.2); }
.choose-status small { color: var(--ink-soft); }
#screen-choose { overflow: visible; }
@media (max-width: 760px) {
    .choose-list { gap: 8px; }
    .choose-card { width: calc(50% - 4px); padding: 8px 6px; }
    .choose-card .cc-por { width: 64px; height: 64px; }
    .setting-row { gap: 4px; }
    .seg button { padding: 6px 7px; }
}

/* ================================================ Klasik BANG!: akan çöl manzarası (art.js → LAND_RIDE) */
/* SVG içindeki CSS dönüşümünde px = viewBox birimi; döşeme genişliği 1200 */
.landscape .lm { animation: landScroll var(--land-d) linear infinite; }
.landscape .lm-cloud { --land-d: 240s; }
.landscape .lm-far { --land-d: 120s; }
.landscape .lm-mid { --land-d: 55s; }
.landscape .lm-fore { --land-d: 13s; }
.landscape .lm-trail { --land-d: 10s; }
@keyframes landScroll { to { transform: translateX(-1200px); } }
/* güneş: nefes alan parıltı */
.landscape .sun-glow { transform-origin: 660px 420px; animation: sunPulse 4s ease-in-out infinite alternate; }
@keyframes sunPulse { from { transform: scale(.9); opacity: .55; } to { transform: scale(1.14); opacity: 1; } }
/* atlı kovboy: ekranı soldan sağa geçer; at dörtnala (bacaklar, iniş-kalkış, kuyruk, toz) */
/* geçişleri art.js → startRides() yönetir (kovboy 3-5 sn, kasaba 5-10 sn rastgele bekler); beklerken ekran dışında */
.landscape .cb-run { transform: translateX(-120px); }
.landscape .town-run { transform: translateX(960px); }
.landscape .cb-bob { animation: cbBob .23s ease-in-out infinite alternate; }
/* dörtnala: her bacak tam bir adım döngüsü; faz farkı animation-delay ile (arka sol, arka sağ, ön sol, ön sağ) */
.landscape .cb-up { transform-box: fill-box; transform-origin: 50% 0; animation: cbUp .46s linear infinite; }
.landscape .cb-low { transform-box: fill-box; transform-origin: 50% 0; animation: cbLow .46s linear infinite; }
.landscape .l2 { animation-delay: -.06s; }
.landscape .l3 { animation-delay: -.23s; }
.landscape .l4 { animation-delay: -.29s; }
.landscape .cb-tail { transform-box: fill-box; transform-origin: 100% 0; animation: cbTail .46s ease-in-out infinite alternate; }
.landscape .cb-mane { transform-box: fill-box; transform-origin: 100% 0; animation: cbMane .23s ease-in-out infinite alternate; }
.landscape .cb-bandana { transform-box: fill-box; transform-origin: 100% 50%; animation: cbMane .18s ease-in-out infinite alternate; }
.landscape .cb-lasso { transform-box: fill-box; transform-origin: center; animation: cbLasso .7s linear infinite; }
.landscape .cb-dust circle { transform-box: fill-box; transform-origin: center; animation: cbDust .8s ease-out infinite; }
.landscape .cb-dust circle:nth-child(2) { animation-delay: .27s; }
.landscape .cb-dust circle:nth-child(3) { animation-delay: .54s; }
@keyframes cbBob { from { transform: translateY(0); } to { transform: translateY(-3.5px); } }
@keyframes cbUp { 0%, 100% { transform: rotate(32deg); } 50% { transform: rotate(-30deg); } }
@keyframes cbLow { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-10deg); } 65% { transform: rotate(55deg); } }
@keyframes cbTail { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
@keyframes cbMane { from { transform: rotate(-6deg); } to { transform: rotate(8deg); } }
@keyframes cbLasso { 0% { transform: scaleX(1) rotate(0deg); } 25% { transform: scaleX(.35) rotate(-6deg); } 50% { transform: scaleX(-1) rotate(0deg); } 75% { transform: scaleX(-.35) rotate(6deg); } 100% { transform: scaleX(1) rotate(0deg); } }
@keyframes cbDust { from { transform: scale(.4); opacity: .7; } to { transform: scale(1.8) translateX(-8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .landscape .lm, .landscape .sun-glow, .landscape .cb-bob, .landscape .cb-up, .landscape .cb-low,
    .landscape .cb-tail, .landscape .cb-mane, .landscape .cb-bandana, .landscape .cb-lasso, .landscape .cb-dust circle { animation: none; }
    .landscape .cb-run { transform: translateX(300px); }
    .landscape .town-run { transform: none; }
    .landscape .cb-dust { display: none; }
}

/* ================================================ Klasik BANG!: saloon poker masası */
/* zemin: tahta döşeme + masanın üstüne düşen lamba ışığı + kenarlarda karartma */
body[data-theme="original"] #screen-game {
    background:
        radial-gradient(ellipse 55% 50% at 42% 42%, rgba(255,186,100,.2), transparent 70%),
        radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(0,0,0,.6) 100%),
        var(--noise),
        repeating-linear-gradient(0deg, rgba(0,0,0,.4) 0 2px, transparent 2px 48px),
        repeating-linear-gradient(0deg, #3b2213 0 48px, #45281a 48px 96px, #34200f 96px 144px, #402516 144px 192px);
    background-color: #2e1a0e;
}
/* masa: damarlı ahşap kenar (border), deri dudak + pirinç şerit (inset gölgeler), yeşil çuha (padding-box) */
body[data-theme="original"] .table {
    border: 26px solid transparent;
    border-radius: 50% / 44%;
    background:
        radial-gradient(ellipse 50% 46% at 50% 47%, rgba(255,226,160,.17), transparent 72%) padding-box,
        radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(0,0,0,.5) 100%) padding-box,
        var(--noise) padding-box,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23e8d9a8' stroke-opacity='.07' stroke-width='2'><circle cx='50' cy='50' r='46'/><circle cx='50' cy='50' r='40'/><path d='M50 14 L59 39 L86 39 L64 55 L72 81 L50 66 L28 81 L36 55 L14 39 L41 39 Z'/></g></svg>") 50% 50% / 230px no-repeat padding-box,
        radial-gradient(ellipse at 50% 45%, #2d6c40 0%, #1c4f2e 50%, #0d2a18 100%) padding-box,
        linear-gradient(180deg, rgba(255,214,160,.28), transparent 28%, transparent 70%, rgba(0,0,0,.45)) border-box,
        repeating-linear-gradient(96deg, #6b3a1c 0 7px, #5a2f16 7px 11px, #7c4623 11px 17px, #4c2711 17px 22px, #683619 22px 30px) border-box;
    box-shadow:
        0 0 0 2px #140903,
        0 24px 44px rgba(0,0,0,.75),
        inset 0 0 0 5px #2a1408,
        inset 0 0 0 7px rgba(214,175,90,.35),
        inset 0 12px 40px rgba(0,0,0,.55);
}
body[data-theme="original"] .table::after {
    inset: -15px; border-radius: 50% / 44%;
    border: 3px dotted rgba(222,184,96,.9);
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.6));
}
body[data-theme="original"] .pile { color: #f0dca8; }
.table-decor { display: none; }
body[data-theme="original"] .table-decor { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.table-decor .decor { position: absolute; width: 150px; opacity: .95; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.table-decor .decor svg { width: 100%; height: auto; }
.table-decor .decor-l { left: 17%; top: 60%; }
.table-decor .decor-r { right: 13%; top: 56%; }
@media (max-width: 760px) {
    body[data-theme="original"] .table { border-width: 10px; border-radius: 18px; }
    body[data-theme="original"] .table::after { display: none; }
    body[data-theme="original"] .table-decor { display: none; }
}

/* ---------------- Klasik BANG! masası: lamba, WANTED posterleri, sigara dumanı (göz yormayan, yavaş) */
.table-decor .decor-r { width: 200px; }
.table-decor .decor svg { overflow: visible; }
/* lamba: ince sallanma; ışık çoğu zaman sabit, 12 sn'de bir kısa kısılıp parlar */
.table-decor .lamp { position: absolute; left: 50%; top: -64px; width: 104px; margin-left: -52px; transform-origin: 50% 0;
    animation: lampSway 9s ease-in-out infinite alternate; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.table-decor .lamp svg { width: 100%; height: auto; overflow: visible; }
.table-decor .lamp .bulb { animation: lampBreath 12s ease-in-out infinite; }
.table-decor .lamp-light {
    position: absolute; left: 50%; top: -4px; width: 70%; height: 85%; transform: translateX(-50%);
    background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(255,226,160,.2), transparent 75%);
    mix-blend-mode: screen; animation: lampBreath 12s ease-in-out infinite;
}
@keyframes lampSway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
@keyframes lampBreath { 0%, 60%, 100% { opacity: .9; } 65% { opacity: .55; } 69% { opacity: 1; } 73% { opacity: .68; } 80% { opacity: .95; } }
/* WANTED posterleri: masanın elips köşelerindeki boşlukta, çivisinden asılı, rüzgârda yavaşça sallanır */
.table-decor .wanted {
    position: absolute; top: -22px; width: 86px; padding: 10px 7px 6px; text-align: center; color: #2a170c;
    background: var(--noise), linear-gradient(170deg, #f1dfb4, #d9bd85 70%, #c7a56a);
    box-shadow: 0 6px 10px rgba(0,0,0,.55), inset 0 0 12px rgba(120,70,20,.35);
    transform-origin: 50% 5px; animation: posterSway 6.5s ease-in-out infinite alternate;
}
.table-decor .wanted.w1 { left: -20px; }
.table-decor .wanted.w2 { right: -20px; animation-duration: 8s; animation-delay: -3s; }
.table-decor .wanted .pin { position: absolute; top: 2px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #d8d2c6, #4a4440 70%); box-shadow: 0 1px 1px rgba(0,0,0,.5); }
.table-decor .wanted b { display: block; font: 13px 'Rye', serif; letter-spacing: 0; line-height: 1; white-space: nowrap; }
.table-decor .wanted .wp { display: block; height: 50px; margin: 4px 2px 3px; border: 1.5px solid #3a2414;
    background-size: 170% auto; background-position: 50% 26%; filter: sepia(.75) contrast(1.05); }
.table-decor .wanted small { display: block; font: 700 6.5px 'Bitter', serif; letter-spacing: .6px; }
.table-decor .wanted em { display: block; font: 12px 'Rye', serif; font-style: normal; color: #7a1f1a; }
@keyframes posterSway { from { transform: rotate(-2deg); } to { transform: rotate(1.6deg); } }
/* sigara: kor nefes alır, duman şeritleri sırayla süzülüp dağılır */
.table-decor .ember { animation: ember 2.6s ease-in-out infinite; }
.table-decor .smoke path { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: smoke 6.6s ease-out infinite; }
.table-decor .smoke .s2 { animation-delay: 2.2s; }
.table-decor .smoke .s3 { animation-delay: 4.4s; }
@keyframes ember { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes smoke {
    0% { opacity: 0; transform: translateY(0) scaleX(.8); }
    18% { opacity: .38; }
    100% { opacity: 0; transform: translate(7px, -34px) scaleX(1.8); }
}
@media (prefers-reduced-motion: reduce) {
    .table-decor .lamp, .table-decor .lamp .bulb, .table-decor .lamp-light, .table-decor .wanted,
    .table-decor .ember, .table-decor .smoke path { animation: none; }
    .table-decor .smoke path { opacity: .25; }
}

/* eskimiş çuha: çuhanın elips şekline kırpılır, süslerin ve koltukların altında kalır */
.table-decor .felt-wear { position: absolute; inset: 0; border-radius: 50% / 44%; overflow: hidden; }
.table-decor .felt-wear svg { width: 100%; height: 100%; }