:root{--bg:#0b120f;--panel:#111b16;--panel2:#17241d;--gold:#e4b84c;--text:#f3f1e8;--muted:#9fa9a3;--line:#26352d;--green:#174b34;--danger:#d26060}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -20%,#234632 0,#0b120f 45%);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;min-height:100vh}.app-shell{width:min(100%,760px);margin:auto;min-height:100vh;background:rgba(7,13,10,.72);box-shadow:0 0 80px #0008}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;background:#0b120fee;backdrop-filter:blur(12px)}.brand{display:flex;gap:12px;align-items:center}.brand-mark{width:42px;height:42px;border:1px solid #e4b84c66;border-radius:12px;display:grid;place-items:center;color:var(--gold);font-size:28px;background:#e4b84c0d}.brand strong,.brand span{display:block}.brand span{font-size:11px;color:var(--muted);margin-top:2px}.user-tools{display:flex;gap:10px;align-items:center}.coin-pill{background:#201d12;border:1px solid #6b5827;padding:9px 13px;border-radius:999px}.avatar,.profile-big{background:linear-gradient(145deg,#d4a93f,#f0d67c);color:#1a1609;border:0;font-weight:800}.avatar{width:38px;height:38px;border-radius:50%}.view{display:none;padding:24px 22px 110px}.view.active{display:block}.hero{padding:22px 4px 24px}.eyebrow{color:var(--gold);font-weight:800;font-size:11px;letter-spacing:2px;margin:0 0 8px}.hero h1{font-size:42px;line-height:.98;margin:0 0 16px;letter-spacing:-1.7px}.hero p{color:var(--muted);max-width:480px;line-height:1.5}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mode-card{min-height:132px;text-align:left;padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#18261f,#101914);color:var(--text);cursor:pointer;position:relative;overflow:hidden}.mode-card:first-child{grid-column:1/-1;background:linear-gradient(130deg,#244d37,#112119)}.mode-card .suit{font-size:30px;color:#d7c37c;position:absolute;right:18px;top:16px;opacity:.8}.mode-card b{display:block;font-size:18px;max-width:150px;margin-top:35px}.mode-card span{display:block;color:var(--muted);font-size:11px;margin-top:7px}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,760px);display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);background:#0c1410f5;backdrop-filter:blur(14px);z-index:6}.nav-item{height:68px;background:none;border:0;color:#7f8d85;font-size:20px}.nav-item span{display:block;font-size:10px;margin-top:3px}.nav-item.active{color:var(--gold)}.section-head{display:flex;align-items:center;gap:13px;margin-bottom:8px}.section-head h2{margin:0;font-size:24px}.back,.refresh{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:20px}.refresh{margin-left:auto}.room-summary{color:var(--muted);font-size:12px;display:flex;gap:8px;margin:14px 0 18px}.room-list{display:flex;flex-direction:column;gap:10px}.empty{border:1px dashed #405247;border-radius:18px;padding:40px 20px;text-align:center;color:var(--muted)}.empty b{display:block;color:var(--text);font-size:18px;margin-bottom:7px}.room-card{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}.room-card h3{margin:0 0 5px}.room-meta{font-size:12px;color:var(--muted)}.room-card button{border:0;border-radius:10px;padding:10px 14px;font-weight:800;background:var(--gold);color:#171305}.create-fab{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);width:min(calc(100% - 44px),716px);height:54px;border:0;border-radius:16px;background:var(--gold);font-weight:900;color:#1c180b;z-index:7}.create-fab small{margin-left:8px}.table-stage{height:430px;border-radius:26px;border:1px solid #395c48;background:radial-gradient(circle,#20563a,#0f2f20 70%);position:relative;margin:24px 0;box-shadow:inset 0 0 70px #0007}.felt{position:absolute;inset:22% 24%;border:1px solid #ffffff1f;border-radius:50%;display:grid;place-items:center}.felt-logo{font-size:56px;color:#e4b84c55;text-align:center}.felt-logo small{display:block;font-size:10px;letter-spacing:2px}.seat{position:absolute;text-align:center;font-size:11px;color:#dce4df;min-width:85px}.seat-avatar{width:48px;height:48px;border-radius:50%;background:#17231d;border:2px solid #60786a;margin:0 auto 5px;display:grid;place-items:center;font-weight:900}.north{top:18px;left:50%;transform:translateX(-50%)}.south{bottom:18px;left:50%;transform:translateX(-50%)}.west{left:12px;top:50%;transform:translateY(-50%)}.east{right:12px;top:50%;transform:translateY(-50%)}.table-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.table-actions button,.primary{border:1px solid var(--line);border-radius:12px;padding:13px;background:var(--panel);color:var(--text);font-weight:800}.table-actions .primary,.primary{background:var(--gold);color:#191507;border-color:var(--gold)}.chat-box{margin-top:14px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}.chat-messages{height:120px;padding:12px;overflow:auto;font-size:12px}.system-msg{color:var(--muted);font-style:italic}.chat-msg{margin:5px 0}.chat-msg b{color:var(--gold)}#chatForm{display:flex;border-top:1px solid var(--line)}#chatForm input{flex:1;background:#0c1410;border:0;color:white;padding:13px;outline:none}#chatForm button{background:none;color:var(--gold);border:0;padding:0 16px;font-weight:800}.status-dot{margin-left:auto;width:10px;height:10px;border-radius:50%;background:#4ed47a;box-shadow:0 0 14px #4ed47a}.modal{position:fixed;inset:0;background:#000b;display:none;align-items:center;justify-content:center;padding:24px;z-index:20}.modal.show{display:flex}.modal-card{width:min(100%,420px);background:#111b16;border:1px solid #314438;border-radius:24px;padding:26px;text-align:center;position:relative}.modal-card h3{font-size:24px;margin:10px 0}.modal-card p{color:var(--muted)}.modal-card input{width:100%;padding:13px;border-radius:11px;background:#0b120f;border:1px solid #33483b;color:white;margin:10px 0 14px}.wide{width:100%;padding:14px}.modal-icon{font-size:46px;color:var(--gold)}.modal-card small{display:block;color:var(--muted);margin-top:12px}.modal-close{position:absolute;right:15px;top:12px;border:0;background:none;color:white;font-size:28px}.coin-packages{display:grid;gap:9px}.coin-packages button{padding:15px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:white;text-align:left}.coin-packages b,.coin-packages span{display:block}.coin-packages span{color:var(--muted);font-size:11px;margin-top:4px}.dev-button{width:100%;margin-top:12px;border:1px dashed #735f2b;background:#221f13;color:var(--gold);padding:12px;border-radius:10px}.profile-big{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;font-size:30px;margin:0 auto}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}.stats div{padding:12px 5px;background:#0c1410;border-radius:12px}.stats b,.stats span{display:block}.stats span{font-size:10px;color:var(--muted);margin-top:4px}.toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,20px);background:#f0e9d1;color:#18140b;padding:11px 16px;border-radius:12px;font-size:12px;font-weight:700;opacity:0;pointer-events:none;transition:.2s;z-index:40}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:520px){.hero h1{font-size:36px}.mode-grid{grid-template-columns:1fr}.mode-card:first-child{grid-column:auto}.table-stage{height:390px}}
.hidden{display:none!important}.game-panel{margin:12px 0 16px;border:1px solid var(--line);border-radius:18px;background:#0d1712;padding:14px}.game-status{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:12px}.game-status b{color:var(--gold)}.auction-panel{display:flex;gap:8px;align-items:center;margin-top:12px;overflow:auto}.bid-row{display:flex;gap:6px;flex:1}.bid-row button,.danger-button,.trump-panel button{min-width:42px;border:1px solid var(--line);border-radius:10px;padding:10px;background:#18251e;color:var(--text);font-weight:800}.bid-row button:disabled{opacity:.3}.danger-button{background:#3a1919;color:#ffdede;border-color:#643030}.trump-panel{display:flex;align-items:center;gap:8px;margin-top:12px}.trump-panel span{font-size:12px;color:var(--muted);margin-right:auto}.trump-panel button{font-size:22px}.trump-panel button:nth-of-type(2),.trump-panel button:nth-of-type(3){color:#ff7f7f}.trick-area{min-height:78px;margin:12px 0;display:flex;justify-content:center;align-items:center;gap:8px}.played-card,.card{width:54px;height:76px;border-radius:9px;background:#f7f2e6;color:#111;border:1px solid #d9d0bc;display:flex;flex-direction:column;justify-content:space-between;padding:5px;font-weight:900;box-shadow:0 5px 12px #0005}.played-card.red,.card.red{color:#b71f2e}.played-card small,.card small{align-self:flex-end;font-size:18px}.hand-wrap{border-top:1px solid var(--line);padding-top:10px}.hand-title{font-size:10px;color:var(--muted);letter-spacing:1.5px;margin-bottom:8px}.hand{display:flex;gap:4px;overflow-x:auto;padding-bottom:5px}.card{flex:0 0 50px;height:72px;cursor:pointer;transition:.15s}.card:hover{transform:translateY(-5px)}.card.disabled{opacity:.45;cursor:not-allowed}.score-strip{font-size:11px;color:var(--muted);margin-top:6px}

.seat{cursor:default}.seat.open{cursor:pointer}.seat.open .seat-avatar{border-style:dashed;color:var(--gold);border-color:#d7b95f;background:#203228}.seat.open:hover .seat-avatar{transform:scale(1.08);box-shadow:0 0 18px #e4b84c55}.seat.mine .seat-avatar{border-color:var(--gold);box-shadow:0 0 15px #e4b84c44}.seat-name{display:block;font-weight:800;white-space:nowrap}.seat-stat{display:block;margin-top:3px;color:#aebbb3;font-size:10px;min-height:12px}.seat-stat.trump-player{color:var(--gold);font-weight:900;letter-spacing:.2px}.seat-avatar{transition:.15s}

.seat-stat.trick-count{font-size:20px;font-weight:1000;color:#fff;line-height:1}.seat-stat.trump-player{font-size:15px;font-weight:1000;color:var(--gold);line-height:1.1}.round-select{display:flex;align-items:center;justify-content:space-between;margin:12px 0 82px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.round-select span{font-weight:800}.round-select select{background:#0c1410;color:#fff;border:1px solid #425649;border-radius:10px;padding:9px 12px;font-weight:900}.scoreboard{margin:14px 0;border:1px solid var(--line);border-radius:16px;background:#0d1712;padding:12px}.score-title{display:flex;justify-content:space-between;font-weight:1000;color:var(--gold);margin-bottom:9px}.score-title span{color:var(--muted);font-size:11px}.score-scroll{overflow-x:auto}.scoreboard table{width:100%;border-collapse:collapse;min-width:520px;font-size:12px}.scoreboard th,.scoreboard td{padding:9px;border-bottom:1px solid var(--line);text-align:center}.scoreboard th:first-child,.scoreboard td:first-child{text-align:left;white-space:nowrap}.scoreboard tfoot th{font-size:13px;border-bottom:0;border-top:2px solid #4c5e53}.scoreboard .pos{color:#7fe09b;font-weight:900}.scoreboard .neg{color:#ff8888;font-weight:900}

.round-options{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:18px 0}.round-options button{padding:13px 5px;border:1px solid var(--line);border-radius:11px;background:#17241d;color:var(--text);font-weight:900}.round-options button.selected{background:var(--gold);border-color:var(--gold);color:#191507;box-shadow:0 0 0 2px #e4b84c33}.round-badge{display:inline-block;margin-left:7px;padding:4px 7px;border-radius:999px;background:#e4b84c1c;border:1px solid #e4b84c66;color:var(--gold);font-size:10px;vertical-align:middle}.room-card h3{display:flex;align-items:center;flex-wrap:wrap}

.auth-card{max-width:420px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.auth-tabs button{padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:inherit;font-weight:800}.auth-tabs button.selected{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}.auth-form{display:grid;gap:10px}.auth-form input{width:100%;box-sizing:border-box;padding:13px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.22);color:#fff;outline:none}.auth-form input:focus{border-color:rgba(255,255,255,.42)}

.link-button{border:0;background:transparent;color:var(--gold);font-weight:800;padding:8px;cursor:pointer}.link-button:hover{text-decoration:underline}.dev-reset-box{margin-top:10px;padding:12px;border:1px dashed #725f2f;border-radius:12px;background:#211d12;text-align:left}.dev-reset-box b,.dev-reset-box small{display:block}.dev-reset-box small{margin:5px 0 10px;color:var(--muted)}.dev-reset-box button{width:100%;border:1px solid #8d7635;border-radius:10px;background:#332b16;color:var(--gold);font-weight:900;padding:10px;cursor:pointer}

/* v8 social / league / profile */
.social-card,.league-card,.profile-page-card{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:16px;margin:14px 0}.social-card h3{margin:0 0 12px}.inline-form{display:flex;gap:8px}.inline-form input{flex:1;min-width:0;padding:12px;border-radius:11px;background:#0b120f;border:1px solid #33483b;color:#fff;outline:none}.inline-form button{padding:0 18px}.card-title-row{display:flex;align-items:center;justify-content:space-between}.mini-button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#0c1410;color:#fff}.people-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}.compact-list:empty{display:none}.person-row{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:13px;background:#0c1410}.person-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#d4a93f,#f0d67c);color:#1a1609;display:grid;place-items:center;font-weight:1000}.person-avatar img{width:100%;height:100%;object-fit:cover}.person-info b,.person-info small{display:block}.person-info small{color:var(--muted);font-size:10px;margin-top:3px}.mini-primary{border:0;border-radius:9px;padding:8px 10px;background:var(--gold);color:#181407;font-weight:900;font-size:10px}.mini-primary:disabled{background:#253129;color:#738079}.friend-ok{font-size:10px;color:#7fe09b;font-weight:900}.empty-mini{padding:18px 8px;text-align:center;color:var(--muted);font-size:12px}.league-head,.league-row{display:grid;grid-template-columns:38px 1fr 110px 42px;gap:8px;align-items:center}.league-head{padding:5px 10px 10px;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:1px}.league-row{padding:12px 10px;border-top:1px solid var(--line);font-size:12px}.league-row b{color:var(--gold);font-size:14px}.league-row strong{text-align:left;color:#e9d28b;font-size:11px}.league-row em{font-style:normal;text-align:center;font-weight:900}.league-row.me{background:#e4b84c0d}.pagination{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:16px}.pagination button{width:42px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:#fff}.pagination button:disabled{opacity:.3}.pagination span{font-size:12px;font-weight:900;color:var(--gold)}.store-page{margin-top:18px}.page-note{display:block;text-align:center;color:var(--muted);margin-top:10px}.profile-page-card{text-align:center;padding:28px 18px}.profile-photo-wrap{position:relative;width:88px;margin:0 auto 10px}.profile-photo{width:78px;height:78px;border-radius:50%;object-fit:cover;border:2px solid #d5b352}.settings-fab{position:absolute;right:0;bottom:-5px;width:30px;height:30px;border-radius:50%;border:2px solid #111b16;background:var(--gold);color:#171305;font-size:14px;display:grid;place-items:center;cursor:pointer}.profile-page-card h3{font-size:24px;margin:12px 0 4px}.profile-page-card>p{margin:0;color:var(--gold);font-weight:900}.profile-logout{margin-top:18px}.field-label{display:block;text-align:left;color:var(--muted);font-size:10px;font-weight:900;margin-top:10px}.settings-card input[type=file]{padding:10px;font-size:11px}.settings-divider{font-size:9px;letter-spacing:1.5px;color:var(--gold);margin:17px 0 2px}.secondary-button{border:1px solid var(--line);border-radius:10px;background:#18251e;color:var(--text);padding:10px;font-weight:800;font-size:10px}.avatar{background-size:cover;background-position:center}.bottom-nav{z-index:12}
@media(max-width:520px){.league-head,.league-row{grid-template-columns:30px 1fr 88px 34px}.league-row{padding:11px 6px}.person-row{grid-template-columns:40px 1fr auto}.person-avatar{width:40px;height:40px}}

/* v9 bot seats */
.bot-seat-action{border:1px solid #d7b95f;border-radius:8px;background:#2a2413;color:#f0cf69;font-size:9px;font-weight:1000;padding:5px 7px;cursor:pointer;letter-spacing:.4px}.bot-seat-action:hover{background:#3a3219}.bot-seat-action.remove{border-color:#7d3d3d;background:#2c1717;color:#ff9c9c}.seat .seat-avatar{user-select:none}

/* v10 bot seat visibility + Koz Maca prediction UI */
.seat{z-index:4;overflow:visible}.seat-stat{position:relative;z-index:6;overflow:visible}.bot-seat-action{position:relative;z-index:9;pointer-events:auto;min-width:74px;box-shadow:0 3px 12px #0008}.north .bot-seat-action{transform:translateY(2px)}
#auctionPanel .bid-row{flex-wrap:wrap;overflow:visible}#auctionPanel .bid-row button{flex:0 0 42px}

/* Esli Batak: oyuncunun karsisindaki esinin kartlari, esinin isminin hemen altinda acik gorunur. */
.partner-hand-preview{display:none;margin:5px auto 0;width:176px;grid-template-columns:repeat(7,22px);gap:2px;justify-content:center;pointer-events:none;position:relative;z-index:5}
.partner-hand-preview.show{display:grid}
.partner-mini-card{width:22px;height:31px;border-radius:4px;background:#f7f2e6;color:#111;border:1px solid #d9d0bc;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:8px;line-height:1;box-shadow:0 2px 5px #0006}
.partner-mini-card.red{color:#b71f2e}.partner-mini-card b{font-size:8px}.partner-mini-card span{font-size:10px;margin-top:2px}
.north .partner-hand-preview,.south .partner-hand-preview{transform:translateX(0)}
.west .partner-hand-preview{transform:translateX(30px)}.east .partner-hand-preview{transform:translateX(-30px)}
@media(max-width:520px){.partner-hand-preview{width:150px;grid-template-columns:repeat(7,19px)}.partner-mini-card{width:19px;height:28px;font-size:7px}.west .partner-hand-preview{transform:translateX(18px)}.east .partner-hand-preview{transform:translateX(-18px)}}


/* v12: three game modes, 10s turn timer, turn arrow, modern cards, create button fix */
.create-fab{bottom:82px;z-index:14}
#roomsView{padding-bottom:165px}
.seat-avatar{position:relative;overflow:visible;background-color:#17231d}
.seat-avatar-content{position:relative;z-index:2;display:grid;place-items:center;width:100%;height:100%;border-radius:50%}
.seat-avatar-content.photo{background:transparent}
.turn-ring{position:absolute;z-index:4;inset:-7px;border-radius:50%;pointer-events:none;background:conic-gradient(var(--timer-color,#42d66b) var(--timer-deg,360deg),rgba(255,255,255,.08) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));opacity:0;transition:opacity .15s}
.seat.turn-active .turn-ring{opacity:1}.seat.turn-active .seat-name{color:#fff;font-weight:1000}
.turn-arrow{position:absolute;z-index:8;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e4b84c;color:#191507;font-size:23px;font-weight:1000;box-shadow:0 5px 22px #0009,0 0 18px #e4b84c55;transition:.2s;pointer-events:none}
.turn-arrow.seat-0{left:50%;bottom:92px;transform:translateX(-50%)}
.turn-arrow.seat-2{left:50%;top:92px;transform:translateX(-50%)}
.turn-arrow.seat-1{left:105px;top:50%;transform:translateY(-50%)}
.turn-arrow.seat-3{right:105px;top:50%;transform:translateY(-50%)}
.hand{overflow-x:auto;overflow-y:visible;padding:12px 8px 20px;min-height:136px;align-items:flex-end}
.card{position:relative;flex:0 0 86px;width:86px;height:122px;border-radius:12px;padding:0;background:linear-gradient(150deg,#fffdf7,#e9e3d7);border:1px solid #c9c2b6;box-shadow:0 8px 22px #0007;overflow:hidden;transition:transform .15s,filter .15s;z-index:1}
.hand .card+.card{margin-left:-43px}.hand .card:hover{transform:translateY(-14px);z-index:30}.hand .card.disabled{filter:grayscale(.35);opacity:.42}
.card-corner{position:absolute;left:9px;top:7px;display:flex;flex-direction:column;align-items:center;line-height:.9;z-index:2}.card-corner b{font-size:22px;letter-spacing:-1px}.card-corner span{font-size:21px;margin-top:4px}.card-suit-big{position:absolute;right:8px;bottom:2px;font-size:50px;opacity:.14}
.played-card{position:relative;width:72px;height:100px;border-radius:11px;padding:0;background:linear-gradient(150deg,#fffdf7,#e9e3d7);border:1px solid #c9c2b6;overflow:hidden}.played-card .card-corner{left:8px;top:7px}.played-card .card-corner b{font-size:19px}.played-card .card-corner span{font-size:18px}.played-card .card-suit-big{font-size:42px}
@media(max-width:520px){.create-fab{bottom:78px}.card{flex-basis:78px;width:78px;height:112px}.hand .card+.card{margin-left:-39px}.turn-arrow.seat-1{left:88px}.turn-arrow.seat-3{right:88px}}

/* v12.1 AFK takeover / reclaim */
.reclaim-control{display:block;margin:10px auto 4px;padding:11px 18px;border-radius:12px;border:1px solid #e4b84c;background:#e4b84c;color:#17130a;font-weight:1000;letter-spacing:.4px;box-shadow:0 6px 20px #0006;cursor:pointer}
.reclaim-control.hidden{display:none}
.seat.afk-controlled .seat-avatar{filter:saturate(.55);box-shadow:0 0 0 3px #e46e4c88}
.afk-label{display:block;color:#ffb14a;font-weight:1000;font-size:10px;letter-spacing:.35px;white-space:nowrap}
.afk-score{display:block;font-weight:1000;font-size:18px;color:#fff;margin-top:1px}

/* v12.3: played cards stack in the center of the table */
.table-stage .table-trick-stack{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;min-height:0;width:auto;display:flex;align-items:center;justify-content:center;gap:0;z-index:4;pointer-events:none}
.table-stage .table-trick-stack>div{position:relative;flex:0 0 72px;margin-left:-36px;filter:drop-shadow(0 7px 10px #0007)}
.table-stage .table-trick-stack>div:first-child{margin-left:0}
.table-stage .table-trick-stack>div:nth-child(2){transform:translateY(7px)}
.table-stage .table-trick-stack>div:nth-child(3){transform:translateY(14px)}
.table-stage .table-trick-stack>div:nth-child(4){transform:translateY(21px)}
.table-stage .table-trick-stack .played-card{width:72px;height:100px;box-shadow:0 8px 18px #0008}
.table-stage .table-trick-stack .played-card .card-corner{z-index:5;background:#fffdf7dd;border-radius:6px;padding:2px 3px}
@media(max-width:520px){.table-stage .table-trick-stack>div{flex-basis:64px;margin-left:-32px}.table-stage .table-trick-stack>div:first-child{margin-left:0}.table-stage .table-trick-stack .played-card{width:64px;height:90px}.table-stage .table-trick-stack .played-card .card-corner b{font-size:17px}.table-stage .table-trick-stack .played-card .card-corner span{font-size:16px}}


/* v12.7 - Sabit ust radyo cubugu */
.header-tools{display:flex;align-items:center;gap:12px;min-width:0}
.radio-strip{height:42px;display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid #34473b;border-radius:13px;background:#0f1813;box-shadow:inset 0 0 18px #0004;white-space:nowrap}
.radio-label{font-size:9px;letter-spacing:1.2px;font-weight:1000;color:var(--gold);padding:0 2px}
.radio-icon{width:29px;height:29px;border:1px solid #34473b;border-radius:8px;background:#17231d;color:#f5f1df;display:grid;place-items:center;padding:0;cursor:pointer;font-size:15px;font-weight:900}
.radio-icon:hover{border-color:#b49745;background:#202d25}
.radio-play{color:var(--gold)}
.radio-select{height:29px;max-width:118px;border:1px solid #34473b;border-radius:8px;background:#101a15;color:#fff;padding:0 24px 0 8px;font-size:10px;font-weight:800;outline:none}
.radio-volume{width:72px;height:4px;accent-color:var(--gold);cursor:pointer}
.radio-volume-text{min-width:20px;text-align:right;color:#c9d1cc;font-size:9px;font-weight:900}
#radioAudio{display:none}
@media(max-width:690px){.topbar{height:auto;min-height:76px;align-items:flex-start;padding-top:10px;padding-bottom:10px}.header-tools{flex-direction:column-reverse;align-items:flex-end;gap:6px}.radio-strip{max-width:100%;height:36px;gap:4px;padding:3px 5px}.radio-label{display:none}.radio-icon{width:26px;height:26px}.radio-select{max-width:94px;height:26px}.radio-volume{width:52px}.coin-pill{padding:7px 10px}.avatar{width:34px;height:34px}}
@media(max-width:460px){.brand span{display:none}.brand strong{font-size:13px}.brand-mark{width:34px;height:34px;font-size:22px}.radio-volume-text{display:none}.radio-select{max-width:80px}}

/* v13 system rooms + private room management */
.room-type-badge{font-size:10px;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.08);vertical-align:middle}.private-room-card{border-color:rgba(236,196,76,.35)}.system-room-card{border-color:rgba(255,255,255,.08)}
.table-head-actions{display:flex;align-items:center;gap:8px}.score-p-button,.manage-room-button{width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:#151515;color:#f5d45d;font-weight:900;font-size:17px}.score-popup-card{max-width:720px}.score-popup-card .score-scroll{max-height:58vh;overflow:auto}.score-popup-card table{width:100%;border-collapse:collapse}.score-popup-card th,.score-popup-card td{padding:9px;border-bottom:1px solid rgba(255,255,255,.08);text-align:center}.score-popup-card .neg{color:#ff6c6c}.score-popup-card .pos{color:#78e091}
.manage-controls{display:grid;gap:12px}.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:12px;background:rgba(255,255,255,.05)}.chat-disabled{opacity:.6}.create-fab{z-index:25}

.system-start-countdown-modal{background:#0007;z-index:30;pointer-events:none}.system-start-countdown-modal.show{display:flex}.system-start-countdown-card{width:min(88vw,300px);padding:22px 20px;border-color:#6d5a27;background:#111b16ee;box-shadow:0 18px 60px #000a;pointer-events:none}.system-start-countdown-card h3{margin:6px 0 4px;font-size:20px}.system-start-countdown-card p{margin:0;color:#d9dedb}.countdown-number{width:74px;height:74px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;font-size:38px;font-weight:1000;color:#171305;background:var(--gold);box-shadow:0 0 30px #e4b84c55}

/* v13.2 - belirgin koz göstergesi */
.table-head-stack{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.table-head-row{display:flex;align-items:center;gap:8px}.trump-badge{min-width:132px;padding:9px 12px;border-radius:12px;border:1px solid rgba(245,212,93,.55);background:linear-gradient(180deg,#2a2410,#171308);box-shadow:0 8px 20px #0008,0 0 0 1px #f5d45d22 inset;text-align:center}.trump-label{display:block;font-size:9px;line-height:1;color:#f5d45d;letter-spacing:1.7px;font-weight:1000;margin-bottom:3px}.trump-badge b{display:block;font-size:20px;line-height:1.05;font-weight:1000;letter-spacing:.4px;color:#fff}.trump-badge[data-suit='H'] b,.trump-badge[data-suit='D'] b{color:#ff6868;text-shadow:0 0 12px #ff404055}.trump-badge[data-suit='S'] b{color:#fff;text-shadow:0 0 10px #ffffff22}.trump-badge[data-suit='C'] b{color:#8ef0a2;text-shadow:0 0 12px #62d47a44}@media(max-width:700px){.trump-badge{min-width:112px;padding:8px 10px}.trump-badge b{font-size:17px}}

/* =========================================================
   KOZHANE PREMIUM THEME v1
   Visual-only layer. Existing game logic and DOM ids preserved.
   ========================================================= */
:root{
  --kh-bg:#070a08;
  --kh-panel:#0c120f;
  --kh-panel-2:#101a14;
  --kh-green:#0c3a26;
  --kh-green-2:#145535;
  --kh-gold:#d9aa43;
  --kh-gold-light:#f3d682;
  --kh-red:#7c191b;
  --kh-blue:#123e63;
  --kh-text:#f4efe3;
  --kh-muted:#a9aea8;
  --kh-line:rgba(217,170,67,.34);
}
*{box-sizing:border-box}
html,body{min-height:100%;background:#060806}
body{
  color:var(--kh-text);
  background:
    radial-gradient(circle at 50% 22%,rgba(40,91,58,.23),transparent 36%),
    radial-gradient(circle at 88% 32%,rgba(179,119,39,.12),transparent 27%),
    linear-gradient(115deg,#050705 0%,#09110c 44%,#050705 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    linear-gradient(90deg,rgba(0,0,0,.64),transparent 18%,transparent 82%,rgba(0,0,0,.55)),
    repeating-linear-gradient(90deg,transparent 0 78px,rgba(255,255,255,.008) 79px 80px);
}
.app-shell{min-height:100vh;padding-left:248px;padding-bottom:0;max-width:1800px;margin:0 auto;position:relative}
.topbar{
  height:94px;padding:14px 24px 12px 30px;border-bottom:1px solid var(--kh-line);
  background:linear-gradient(180deg,rgba(4,7,5,.98),rgba(6,10,7,.91));
  backdrop-filter:blur(16px);position:sticky;top:0;z-index:40;
}
.brand{gap:14px}.brand-mark{
  width:56px;height:56px;border:1px solid var(--kh-gold);border-radius:50%;
  background:radial-gradient(circle,#18231c,#070b08 70%);color:var(--kh-gold-light);
  box-shadow:0 0 0 3px #000,0 0 24px rgba(217,170,67,.16);font-size:34px
}
.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-copy strong{
  font-family:Georgia,"Times New Roman",serif;font-size:28px;letter-spacing:3px;color:var(--kh-gold-light);
  text-shadow:0 2px 12px #000
}.brand-copy span{font-family:Georgia,serif;font-size:11px;letter-spacing:4px;color:#caa554;margin-top:7px}
.header-tools{margin-left:auto}.radio-strip{background:#080c09;border-color:var(--kh-line);box-shadow:0 7px 26px #0007}.radio-label{color:var(--kh-gold-light)}
.radio-icon,.radio-select{border-color:#58451f;background:#0d120f}.radio-icon:hover{border-color:var(--kh-gold)}
.coin-pill{border:1px solid var(--kh-line);background:#0e1510;color:var(--kh-gold-light);box-shadow:0 8px 22px #0005}
.avatar{border:2px solid var(--kh-gold);box-shadow:0 0 0 2px #15100a}
main{min-height:calc(100vh - 94px);padding:28px 34px 54px}
.view{animation:khViewIn .34s cubic-bezier(.2,.8,.2,1)}
@keyframes khViewIn{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}

/* Left navigation from existing bottom nav */
.bottom-nav{
  position:fixed!important;left:0!important;top:0!important;bottom:0!important;width:248px!important;height:100vh!important;
  padding:122px 16px 24px!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;gap:8px!important;
  border-right:1px solid var(--kh-line)!important;border-top:0!important;
  background:linear-gradient(180deg,#080c09 0%,#0b100d 72%,#070907 100%)!important;
  box-shadow:18px 0 50px #0007;z-index:35!important
}
.bottom-nav:before{content:"KOZHANE";position:absolute;left:22px;top:27px;font-family:Georgia,serif;font-size:24px;letter-spacing:3px;color:var(--kh-gold-light);font-weight:800}
.bottom-nav:after{content:"";display:none}
.nav-item{
  width:100%!important;height:58px!important;border:1px solid transparent!important;border-radius:13px!important;
  display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:15px!important;
  padding:0 18px!important;background:transparent!important;color:#c9cec9!important;font-size:20px!important;transition:.2s!important
}
.nav-item span{font-size:12px!important;text-transform:uppercase;letter-spacing:.6px;font-weight:800}
.nav-item:hover{background:#141b16!important;border-color:#2f372f!important;color:#fff!important;transform:translateX(2px)}
.nav-item.active{background:linear-gradient(90deg,#9d741f,#4e3812)!important;border-color:#d9b457!important;color:#fff!important;box-shadow:inset 0 0 20px #fff1,0 8px 22px #0005}

/* Home */
#homeView{max-width:1220px;margin:0 auto}.hero{text-align:center;padding:24px 10px 30px;position:relative}
.hero:before{content:"♠";display:block;font-family:Georgia,serif;font-size:54px;color:var(--kh-gold);line-height:.75;text-shadow:0 0 24px rgba(217,170,67,.2)}
.hero .eyebrow{color:#cba75a;letter-spacing:4px;font-size:10px;margin:18px 0 8px}
.hero h1{font-family:Georgia,"Times New Roman",serif;font-size:64px;line-height:.95;letter-spacing:7px;color:var(--kh-gold-light);margin:0;text-shadow:0 4px 20px #000,0 0 14px rgba(217,170,67,.12)}
.hero-subtitle{text-transform:uppercase!important;letter-spacing:7px!important;font-family:Georgia,serif!important;color:#d2ac5a!important;font-size:15px!important;margin:9px 0 18px!important}
.hero>p:last-child{color:#abb3ad;max-width:590px;margin:0 auto;font-size:13px}
.mode-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1010px;margin:0 auto}
.mode-card{
  min-height:320px;border:1px solid var(--kh-line)!important;border-radius:18px!important;padding:28px 22px 22px!important;
  background:linear-gradient(180deg,rgba(13,37,24,.96),rgba(5,13,9,.98))!important;box-shadow:0 24px 50px #0007,inset 0 0 45px #0005!important;
  position:relative;overflow:hidden;transition:.28s cubic-bezier(.2,.8,.2,1)!important
}
.mode-card:after{content:"ODALARA GİR   ›";position:absolute;left:22px;right:22px;bottom:20px;height:50px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(#2eb553,#0b722f);border:1px solid #5cdc7d;color:white;font-weight:900;font-size:13px;letter-spacing:.4px;box-shadow:0 7px 22px #0008}
.mode-card:nth-child(2){background:linear-gradient(180deg,rgba(13,36,61,.96),rgba(6,14,22,.98))!important}.mode-card:nth-child(2):after{background:linear-gradient(#2d9bd0,#076391);border-color:#55bbed}
.mode-card:nth-child(3){background:linear-gradient(180deg,rgba(75,19,19,.96),rgba(25,7,7,.98))!important}.mode-card:nth-child(3):after{background:linear-gradient(#d7493f,#8e1616);border-color:#ef6a62}
.mode-card:hover{transform:translateY(-7px) scale(1.012)!important;border-color:#e2bc61!important;box-shadow:0 30px 70px #0009,0 0 22px rgba(217,170,67,.12)!important}
.mode-card .suit{font-size:88px!important;color:#f1d27c!important;text-shadow:0 8px 25px #000;margin-bottom:12px}.mode-card:nth-child(2) .suit{color:#f4ead3!important}.mode-card:nth-child(3) .suit{color:#eac461!important}
.mode-card b{font-family:Georgia,serif!important;font-size:24px!important;line-height:1.05;color:#f5ddb0!important;text-transform:uppercase}.mode-card>span:last-child{margin-top:10px!important;color:#c7beb0!important;font-size:11px!important;padding-bottom:58px}

/* Generic panels */
.section-head{padding-bottom:18px;border-bottom:1px solid var(--kh-line)}.section-head h2{font-family:Georgia,serif;color:#f0d38d;letter-spacing:.8px}.eyebrow{color:#b8974a}.back,.refresh{border-color:var(--kh-line)!important;background:#0e1510!important;color:#f1d27c!important}
.room-summary,.social-card,.league-card,.profile-page-card,.game-panel,.chat-box{background:linear-gradient(180deg,rgba(10,16,12,.97),rgba(6,10,8,.98))!important;border-color:var(--kh-line)!important;box-shadow:0 16px 38px #0006!important}
.room-list{display:grid;gap:9px}.room-card{border-color:#283129!important;background:linear-gradient(90deg,#0c120f,#0a100d)!important;border-radius:13px!important;box-shadow:0 7px 16px #0004!important}.room-card:hover{border-color:#755f2e!important;background:#111a14!important}.room-card button{border-radius:10px!important;font-weight:900!important}.create-fab{background:linear-gradient(#efca71,#b17d25)!important;color:#171006!important;border:1px solid #ffe49b!important;box-shadow:0 9px 28px #0008,0 0 16px #d5aa4733!important;font-weight:1000!important}

/* Table */
#tableView{max-width:1420px;margin:0 auto}.table-stage{
  border:10px solid #5b341c!important;outline:2px solid #bd843c!important;box-shadow:0 0 0 6px #1b0e08,0 26px 60px #000b,inset 0 0 60px #0008!important;
  background:radial-gradient(circle at 50% 44%,#13583a 0,#0c3e29 48%,#06291c 78%,#051a12 100%)!important
}
.table-stage:after{content:"";position:absolute;inset:21%;border:1px solid rgba(219,184,91,.15);border-radius:50%;pointer-events:none}.felt-logo{color:#c7a956!important;opacity:.15!important}.felt-logo small{color:#d7bd77!important;letter-spacing:3px!important}
.seat{filter:drop-shadow(0 12px 18px #0008)}.seat-avatar{border:3px solid #d1a74b!important;background:#101510!important;box-shadow:0 0 0 3px #201407,0 4px 18px #0008!important}.seat-name{font-weight:900!important;color:#fff!important;text-shadow:0 2px 5px #000}.seat-stat{color:#d9b75d!important;font-weight:800!important}.turn-arrow{background:linear-gradient(#f4d26f,#ad7c23)!important;color:#120d06!important;box-shadow:0 0 28px #edc75f77,0 7px 18px #0008!important}
.trump-badge{border-color:#d3a841!important;background:linear-gradient(#17130b,#090805)!important;box-shadow:0 10px 26px #0009,0 0 18px #c69b3033!important}.score-p-button,.manage-room-button{border-color:#725b28!important;background:#0d0e0b!important;color:#f0c85c!important}
.hand-wrap{background:transparent!important}.hand{justify-content:center!important;scrollbar-color:#785d28 #0b0e0b}.card{border-color:#b8aa90!important;background:linear-gradient(145deg,#fffdf6,#e8ddca)!important;box-shadow:0 12px 28px #0009!important}.hand .card:hover{transform:translateY(-18px) rotate(-.5deg)!important}.played-card{background:linear-gradient(145deg,#fffdf6,#e8ddca)!important;border-color:#b8aa90!important;box-shadow:0 10px 24px #0009!important}
.auction-panel,.trump-panel{border:1px solid var(--kh-line);border-radius:14px;background:#080d0a;padding:12px}.bid-row button,.trump-panel button{border-color:#6c5526!important;background:#111713!important;color:#fff!important}.bid-row button:hover,.trump-panel button:hover{border-color:#e1b95a!important;background:#282114!important}
.chat-box{border-radius:15px!important}.chat-messages{color:#e7e0d0}.chat-box input{background:#101510!important;border-color:#36433a!important;color:#fff!important}

/* Profile / league / store / friends */
.profile-page-card{max-width:960px!important;padding:34px!important;border-radius:18px!important}.profile-big,.profile-photo{border:4px solid #d1a74b!important;box-shadow:0 0 0 4px #1b1209,0 13px 30px #0008!important}.settings-fab{background:#d1a74b!important;color:#171006!important;border-color:#ffe28f!important}.stats>div{background:#0e1511!important;border:1px solid #2b382f!important;border-radius:12px!important}.stats b{color:#f0cf76!important}.league-card{border-radius:16px!important}.league-row{border-bottom-color:#263029!important}.league-row.me{background:linear-gradient(90deg,rgba(207,167,73,.18),transparent)!important}.coin-packages button{background:linear-gradient(145deg,#101711,#080d0a)!important;border-color:#645024!important;box-shadow:0 12px 30px #0006!important}.coin-packages button b{color:#f3d47f!important}.people-list{border-color:#27332b!important}

/* Modals / auth */
.modal{backdrop-filter:blur(9px);background:rgba(0,0,0,.72)!important}.modal-card{border-color:#8e6e2f!important;background:linear-gradient(180deg,#101711,#070b08)!important;box-shadow:0 24px 80px #000c,0 0 30px #c49a2e22!important}.modal-icon{color:#e5bd59!important}.auth-card h3{font-family:Georgia,serif!important;color:#f2d17a!important;letter-spacing:4px!important}.auth-tabs button.selected{color:#f0cf74!important;border-bottom-color:#d0a341!important}.auth-form input{background:#0b100d!important;border-color:#334037!important;color:#fff!important}.primary{background:linear-gradient(#34b65e,#0d7132)!important;border-color:#60dd84!important}.danger-button{background:linear-gradient(#bd3a34,#751514)!important;border-color:#e65a53!important}
.toast{border:1px solid #80662d!important;background:#111611!important;color:#f3e4b6!important}

/* Micro animations */
button{transition:transform .15s ease,filter .15s ease,border-color .15s ease,background-color .15s ease}button:active{transform:scale(.97)}
.mode-card .suit{animation:khFloat 4s ease-in-out infinite}@keyframes khFloat{50%{transform:translateY(-7px)}}
.trump-badge:not(.hidden){animation:khBadge .38s ease-out}@keyframes khBadge{from{opacity:0;transform:translateY(-8px) scale(.9)}to{opacity:1;transform:none}}
.table-trick-stack>div:last-child{animation:khCardDrop .24s cubic-bezier(.2,.8,.2,1)}@keyframes khCardDrop{from{opacity:.2;transform:translateY(-25px) scale(1.16) rotate(4deg)}to{opacity:1}}

@media(max-width:980px){
 .app-shell{padding-left:0;padding-bottom:78px}.bottom-nav{top:auto!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:72px!important;padding:6px 8px!important;flex-direction:row!important;justify-content:space-around!important;border-right:0!important;border-top:1px solid var(--kh-line)!important}.bottom-nav:before,.bottom-nav:after{display:none}.nav-item{height:58px!important;width:auto!important;flex:1!important;flex-direction:column!important;justify-content:center!important;gap:3px!important;padding:4px!important;font-size:18px!important}.nav-item span{font-size:9px!important}.topbar{padding-left:14px}.brand-copy strong{font-size:21px}.brand-copy span{font-size:8px}.mode-grid{grid-template-columns:1fr}.mode-card{min-height:230px}.mode-card .suit{font-size:64px!important}.hero h1{font-size:46px}main{padding:20px 14px 90px}
}
@media(max-width:640px){.radio-strip{max-width:280px}.hero{padding-top:8px}.hero h1{font-size:38px}.mode-card{min-height:210px}.table-stage{border-width:6px!important}.brand-mark{display:none}.topbar{min-height:72px}}

/* =========================================================
   KOZHANE DESKTOP WEB LAYOUT v2
   Desktop-first: 1366x768 minimum, 1920x1080 ideal
   ========================================================= */
@media (min-width:981px){
  html,body{min-width:1280px;min-height:720px;overflow-x:auto}
  body{background:
    radial-gradient(circle at 50% -10%,rgba(32,73,49,.42),transparent 42%),
    linear-gradient(rgba(2,5,3,.38),rgba(2,5,3,.66)),
    #060907;
  }
  .app-shell{width:100%;max-width:none;margin:0;min-height:100vh;padding-left:260px;background:transparent;box-shadow:none}
  .topbar{left:260px;width:calc(100% - 260px);height:86px;padding:12px 34px;position:fixed;top:0;right:0;z-index:40;background:rgba(6,10,7,.94)}
  main{padding:112px 34px 40px;min-height:100vh}
  .view{padding:0 0 40px;max-width:1600px;margin:0 auto}

  .bottom-nav{left:0!important;top:0!important;bottom:0!important;transform:none!important;width:260px!important;height:100vh!important;padding:116px 16px 26px!important;display:flex!important;flex-direction:column!important;gap:8px!important;background:linear-gradient(180deg,#0b0f0c 0,#080b09 100%)!important;box-shadow:18px 0 45px rgba(0,0,0,.35)!important}
  .bottom-nav:before{left:25px!important;top:32px!important;font-size:27px!important}
  .bottom-nav:after{left:25px!important;top:70px!important}
  .nav-item{height:58px!important;width:100%!important;display:flex!important;align-items:center!important;gap:14px!important;padding:0 18px!important;font-size:21px!important;border:1px solid transparent!important;border-radius:12px!important;text-align:left!important}
  .nav-item span{display:inline!important;font-size:12px!important;margin:0!important}

  .header-tools{display:flex;align-items:center;gap:18px;min-width:0}
  .radio-strip{min-width:470px;max-width:650px;padding:8px 12px}
  .radio-volume{width:120px}
  .user-tools{flex:0 0 auto}

  #homeView{max-width:1500px}
  .hero{padding:22px 10px 34px}
  .hero h1{font-size:72px!important}
  .mode-grid{max-width:1280px;gap:24px}
  .mode-card{min-height:350px!important}
  .mode-card b{font-size:27px!important;max-width:230px!important}
  .mode-card .suit{font-size:96px!important}

  #roomsView{max-width:1500px}
  .room-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;padding-bottom:88px}
  .room-card{min-height:86px;padding:18px 20px!important}
  .create-fab{position:fixed!important;left:calc(260px + (100vw - 260px)/2)!important;bottom:24px!important;width:min(760px,calc(100vw - 330px))!important;z-index:35!important}

  #friendsView,#leagueView,#storeView,#profileView{max-width:1280px}
  .social-card{padding:24px!important}.league-card{padding:22px!important}.profile-page-card{max-width:1050px!important;margin:28px auto!important}
  .coin-packages.store-page{grid-template-columns:repeat(3,1fr);gap:18px}.coin-packages.store-page button{min-height:130px;padding:24px!important}

  #tableView{max-width:1660px!important}
  #tableView .section-head{margin-bottom:16px}
  .table-stage{height:min(64vh,690px)!important;min-height:560px!important;border-radius:46% / 40%!important;margin:14px auto 20px!important;max-width:1450px!important}
  .felt{inset:20% 23%!important}
  .seat-avatar{width:68px!important;height:68px!important;font-size:16px!important}.seat{min-width:150px!important;font-size:13px!important}.seat-stat{font-size:12px!important}.seat-name{font-size:14px!important}
  .north{top:26px!important}.south{bottom:28px!important}.west{left:30px!important}.east{right:30px!important}
  .trick-area{min-height:150px!important}.played-card{width:92px!important;height:128px!important;padding:9px!important;font-size:25px!important}.played-card small{font-size:28px!important}
  .game-panel{max-width:1450px;margin:0 auto 18px!important;padding:16px 20px!important}.hand{min-height:150px!important;padding:18px 0 8px!important;overflow:visible!important;justify-content:center!important}.hand .card{width:96px!important;flex:0 0 96px!important;height:138px!important;margin-left:-44px!important;padding:9px!important;font-size:25px!important;border-radius:11px!important}.hand .card:first-child{margin-left:0!important}.hand .card small{font-size:27px!important}.hand .card:hover{z-index:20;transform:translateY(-24px)!important}
  .auction-panel{max-width:980px;margin:14px auto 0!important}.bid-row{justify-content:center}.bid-row button,.danger-button,.trump-panel button{min-width:64px!important;padding:12px 14px!important;font-size:15px!important}
  .trump-panel{max-width:700px;margin:14px auto 0!important}
  .table-actions{max-width:900px;margin:0 auto 14px;grid-template-columns:1fr 1fr}.table-actions button{min-height:48px}
  .chat-box{max-width:1450px;margin:0 auto!important}.chat-messages{height:135px!important;font-size:13px!important}

  .score-p-button{width:48px!important;height:48px!important;font-size:18px!important}.trump-badge{min-width:150px!important;padding:10px 14px!important}.trump-badge b{font-size:17px!important}.trump-badge .trump-label{font-size:10px!important}
  .toast{bottom:34px}
}

/* Desktop-only prototype: do not collapse into the mobile navigation layout. */
@media (max-width:980px){
  html,body{min-width:1280px;overflow-x:auto}
  .app-shell{padding-left:260px!important;padding-bottom:0!important}
  .bottom-nav{left:0!important;top:0!important;bottom:0!important;transform:none!important;width:260px!important;height:100vh!important;padding:116px 16px 26px!important;display:flex!important;flex-direction:column!important;gap:8px!important;border-right:1px solid var(--kh-line)!important;border-top:0!important}
  .bottom-nav:before,.bottom-nav:after{display:block!important}
  .nav-item{height:58px!important;width:100%!important;flex:none!important;flex-direction:row!important;justify-content:flex-start!important;gap:14px!important;padding:0 18px!important;font-size:21px!important}.nav-item span{font-size:12px!important}
  .topbar{left:260px!important;width:1020px!important;padding:12px 30px!important;min-height:86px!important}.brand-mark{display:grid!important}.brand-copy strong{font-size:27px!important}.brand-copy span{font-size:9px!important}
  main{padding:112px 34px 40px!important;width:1020px!important}.mode-grid{grid-template-columns:repeat(3,1fr)!important}.mode-card{min-height:320px!important}.hero h1{font-size:64px!important}.table-stage{height:600px!important}
}

/* =========================================================
   KOZHANE DESKTOP TABLE FIT v3
   Single-screen table, larger overlapped cards, right chat rail
   ========================================================= */
@media (min-width:981px){
  #tableView{
    position:relative!important;
    max-width:none!important;
    height:calc(100vh - 126px)!important;
    min-height:620px!important;
    padding-right:300px!important;
    overflow:hidden!important;
  }
  #tableView .section-head{
    height:66px!important;
    margin:0 0 8px!important;
    padding:0 0 10px!important;
    position:relative!important;
    z-index:12!important;
  }
  #tableView .table-stage{
    width:100%!important;
    max-width:none!important;
    height:calc(100% - 76px)!important;
    min-height:0!important;
    margin:0!important;
    border-radius:46% / 40%!important;
  }

  /* Chat moves to a narrow permanent rail on the right. */
  #tableView .chat-box{
    position:absolute!important;
    top:74px!important;
    right:0!important;
    bottom:0!important;
    width:276px!important;
    max-width:none!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    z-index:16!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }
  #tableView .chat-box:before{
    content:"MASA SOHBETİ";
    display:block;
    padding:12px 14px 9px;
    color:#e8c665;
    font-size:11px;
    font-weight:900;
    letter-spacing:1.3px;
    border-bottom:1px solid var(--kh-line);
    background:#0b100d;
  }
  #tableView .chat-messages{
    flex:1!important;
    height:auto!important;
    min-height:0!important;
    padding:12px!important;
    font-size:12px!important;
  }
  #tableView #chatForm{flex:0 0 auto!important}
  #tableView #chatForm input{min-width:0!important;padding:11px!important;font-size:12px!important}
  #tableView #chatForm button{padding:0 11px!important;font-size:11px!important}

  /* Waiting-room actions float over the table instead of creating a new row. */
  #tableView .table-actions{
    position:absolute!important;
    left:34px!important;
    right:auto!important;
    top:76px!important;
    z-index:18!important;
    display:flex!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    gap:8px!important;
  }
  #tableView .table-actions button{min-height:38px!important;padding:8px 12px!important;font-size:11px!important}

  /* The complete game panel overlays the lower felt area so the page never needs vertical scrolling. */
  #tableView .game-panel{
    position:absolute!important;
    left:34px!important;
    right:326px!important;
    bottom:8px!important;
    z-index:14!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    pointer-events:none;
  }
  #tableView .game-panel > *{pointer-events:auto}
  #tableView .game-status{
    width:max-content!important;
    max-width:520px!important;
    margin:0 auto 5px!important;
    padding:6px 12px!important;
    border:1px solid #715923!important;
    border-radius:10px!important;
    background:rgba(5,10,7,.86)!important;
    box-shadow:0 8px 20px #0008!important;
    font-size:11px!important;
  }
  #tableView .auction-panel,#tableView .trump-panel{
    width:max-content!important;
    max-width:920px!important;
    margin:0 auto 6px!important;
    padding:7px 9px!important;
  }
  #tableView .bid-row button,#tableView .danger-button,#tableView .trump-panel button{
    min-width:52px!important;
    padding:8px 10px!important;
    font-size:13px!important;
  }
  #tableView .reclaim-control{margin:0 auto 6px!important;display:block!important}
  #tableView .reclaim-control.hidden{display:none!important}

  /* Bigger cards with roughly half-card overlap. 13 cards remain inside a desktop viewport. */
  #tableView .hand-wrap{margin:0!important;padding:0!important}
  #tableView .hand-title{
    width:max-content!important;
    margin:0 auto 2px!important;
    padding:3px 10px!important;
    border-radius:999px!important;
    background:rgba(4,8,6,.78)!important;
    color:#d7ba69!important;
    font-size:10px!important;
    letter-spacing:1.2px!important;
  }
  #tableView .hand{
    min-height:184px!important;
    height:184px!important;
    padding:6px 0 0!important;
    overflow:visible!important;
    justify-content:center!important;
    align-items:flex-end!important;
  }
  #tableView .hand .card{
    width:118px!important;
    flex:0 0 118px!important;
    height:170px!important;
    margin-left:-60px!important;
    padding:10px!important;
    border-radius:13px!important;
    font-size:31px!important;
    box-shadow:0 13px 28px #000b!important;
  }
  #tableView .hand .card:first-child{margin-left:0!important}
  #tableView .hand .card-corner{font-size:23px!important;line-height:.9!important}
  #tableView .hand .card-corner b{font-size:24px!important}
  #tableView .hand .card-corner span{font-size:22px!important}
  #tableView .hand .card-suit-big{font-size:57px!important}
  #tableView .hand .card:hover{z-index:40!important;transform:translateY(-20px)!important}

  /* Keep played cards large but centered safely above the hand. */
  #tableView .trick-area{z-index:8!important}
  #tableView .played-card{width:104px!important;height:146px!important;font-size:28px!important}
  #tableView .played-card .card-corner b{font-size:22px!important}
  #tableView .played-card .card-corner span{font-size:21px!important}
  #tableView .played-card .card-suit-big{font-size:50px!important}
}

/* 1366x768 tuning: preserve one-screen play without shrinking card readability. */
@media (min-width:981px) and (max-height:820px){
  main{padding-top:98px!important;padding-bottom:18px!important}
  #tableView{height:calc(100vh - 108px)!important;min-height:580px!important}
  #tableView .section-head{height:58px!important}
  #tableView .table-stage{height:calc(100% - 66px)!important}
  #tableView .chat-box{top:66px!important}
  #tableView .table-actions{left:26px!important;right:auto!important;top:68px!important}
  #tableView .hand{height:164px!important;min-height:164px!important}
  #tableView .hand .card{width:110px!important;flex-basis:110px!important;height:158px!important;margin-left:-56px!important}
  #tableView .hand .card:first-child{margin-left:0!important}
}

/* =========================================================
   KOZHANE DESKTOP v4 - fixed top-right table controls
   ========================================================= */
@media (min-width:981px){
  #tableView .section-head{
    position:relative!important;
    padding-right:190px!important;
  }
  #tableView .table-head-actions{
    position:absolute!important;
    top:0!important;
    right:0!important;
    z-index:40!important;
    margin:0!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:flex-end!important;
    pointer-events:auto!important;
  }
  #tableView .table-head-stack{
    align-items:flex-end!important;
    gap:7px!important;
  }
  #tableView .table-head-row{
    justify-content:flex-end!important;
  }
  #tableView .score-p-button,
  #tableView .manage-room-button{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    flex:0 0 46px!important;
    box-shadow:0 8px 20px #0008!important;
  }
  #tableView .status-dot{
    align-self:center!important;
    margin-left:2px!important;
  }
  #tableView .trump-badge{
    min-width:148px!important;
    position:relative!important;
    z-index:41!important;
    box-shadow:0 10px 24px #000a,0 0 18px #c69b3033!important;
  }
  #tableView .chat-box{z-index:20!important}
  #tableView .game-panel{z-index:14!important}
  #tableView .table-stage{z-index:1!important}
}

@media (min-width:981px) and (max-height:820px){
  #tableView .section-head{padding-right:178px!important}
  #tableView .score-p-button,
  #tableView .manage-room-button{width:42px!important;height:42px!important;min-width:42px!important;flex-basis:42px!important}
  #tableView .trump-badge{min-width:136px!important;padding:8px 11px!important}
}

/* =========================================================
   KOZHANE DESKTOP v6 - equal home mode cards + reference card face
   ========================================================= */
@media (min-width:981px){
  #homeView{max-width:1320px!important}
  #homeView .mode-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:22px!important;
    max-width:1180px!important;
    align-items:stretch!important;
  }
  #homeView .mode-card{
    width:100%!important;
    min-width:0!important;
    min-height:330px!important;
    height:330px!important;
    padding:32px 24px 76px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }
  #homeView .mode-card .suit{font-size:82px!important;margin:0 0 18px!important;line-height:1!important}
  #homeView .mode-card b{font-size:25px!important;min-height:58px!important;display:flex!important;align-items:center!important;justify-content:center!important}
  #homeView .mode-card>span:last-child{padding:0!important;margin:8px 0 0!important;min-height:18px!important}
  #homeView .mode-card:after{left:20px!important;right:20px!important;bottom:20px!important;height:52px!important}

  /* Card proportions matching the approved visual reference. */
  #tableView .hand .card{
    width:124px!important;flex-basis:124px!important;height:178px!important;
    margin-left:-63px!important;border-radius:12px!important;
    background:linear-gradient(145deg,#fffdf7 0%,#f2eadc 56%,#e4d8c5 100%)!important;
    border:1px solid #b9aa90!important;
  }
  #tableView .hand .card:first-child{margin-left:0!important}
  #tableView .hand .card-corner{left:10px!important;top:8px!important}
  #tableView .hand .card-corner b{font-family:Georgia,"Times New Roman",serif!important;font-size:27px!important;font-weight:800!important;letter-spacing:-1px!important}
  #tableView .hand .card-corner span{font-size:25px!important;margin-top:2px!important}
  #tableView .hand .card-suit-big{right:10px!important;bottom:5px!important;font-size:62px!important;opacity:.12!important}
  #tableView .played-card{
    width:108px!important;height:150px!important;border-radius:11px!important;
    background:linear-gradient(145deg,#fffdf7 0%,#f2eadc 56%,#e4d8c5 100%)!important;
  }
  #tableView .played-card .card-corner b{font-family:Georgia,"Times New Roman",serif!important;font-size:24px!important}
  #tableView .played-card .card-corner span{font-size:23px!important}
}

@media (min-width:981px) and (max-width:1450px){
  #homeView .mode-grid{max-width:1040px!important;gap:16px!important}
  #homeView .mode-card{height:300px!important;min-height:300px!important}
  #tableView .hand .card{width:112px!important;flex-basis:112px!important;height:162px!important;margin-left:-57px!important}
  #tableView .hand .card:first-child{margin-left:0!important}
}


/* KOZHANE DESKTOP v7 - equal game tiles + custom playing-card artwork */
@media (min-width:981px){
 #homeView .mode-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important;max-width:1180px!important;margin:0 auto!important;align-items:stretch!important}
 #homeView .mode-card,#homeView .mode-card:first-child{grid-column:auto!important;width:100%!important;height:340px!important;min-height:340px!important;max-height:340px!important;padding:25px 20px 78px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important}
 #homeView .mode-card-art{height:145px!important;min-height:145px!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0 0 14px!important;position:relative!important}
 #homeView .mini-card{width:82px;height:122px;border-radius:9px;background:linear-gradient(145deg,#fffdf7,#eadfce);border:1px solid #b7a78c;box-shadow:0 10px 20px #0009;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:8px;position:relative;margin-left:-22px;transform:rotate(-5deg);font-family:Georgia,"Times New Roman",serif;font-style:normal}
 #homeView .mini-card:first-child{margin-left:0;transform:rotate(-10deg)}
 #homeView .mini-card:nth-child(2){transform:rotate(-3deg);z-index:2}
 #homeView .mini-card:nth-child(3){transform:rotate(4deg);z-index:3}
 #homeView .mini-card:nth-child(4){transform:rotate(10deg);z-index:4}
 #homeView .mini-card b{font-size:27px!important;line-height:.9!important;min-height:0!important;color:inherit!important;margin:0!important;display:block!important}
 #homeView .mini-card i{font-size:34px;line-height:1;font-style:normal;margin-top:3px}
 #homeView .mini-card.red{color:#b71924!important}.mini-card.black{color:#111!important}
 #homeView .mode-card>b{font-size:25px!important;line-height:1.05!important;min-height:55px!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important}
 #homeView .mode-card>span:last-child{margin:5px 0 0!important;padding:0!important;min-height:18px!important}
 #homeView .mode-card:after{left:20px!important;right:20px!important;bottom:20px!important;height:52px!important}
 #homeView .mode-card.ihaleli_artirmali{background:linear-gradient(180deg,rgba(5,52,31,.97),rgba(4,22,14,.99))!important}
 #homeView .mode-card.koz_maca{background:linear-gradient(180deg,rgba(10,42,73,.97),rgba(5,18,31,.99))!important}
 #homeView .mode-card.esli{background:linear-gradient(180deg,rgba(81,18,19,.97),rgba(31,6,7,.99))!important}
}
@media (min-width:981px) and (max-width:1450px){
 #homeView .mode-card,#homeView .mode-card:first-child{height:310px!important;min-height:310px!important;max-height:310px!important;padding-top:18px!important}
 #homeView .mode-card-art{height:125px!important;min-height:125px!important}
 #homeView .mini-card{width:70px;height:105px;padding:7px;margin-left:-19px}
 #homeView .mini-card b{font-size:23px!important}.mode-card .mini-card i{font-size:29px!important}
}

/* v8: supplied KOZHANE logo replaces duplicated hero copy */
#homeView .hero{padding:10px 10px 24px;min-height:190px;display:flex;align-items:center;justify-content:center}
#homeView .hero:before{display:none!important;content:none!important}
#homeView .hero-logo{display:block;width:min(430px,42vw);max-height:180px;object-fit:contain;border-radius:8px;filter:drop-shadow(0 12px 30px rgba(0,0,0,.72));}
#homeView .hero .eyebrow,#homeView .hero h1,#homeView .hero .hero-subtitle,#homeView .hero>p{display:none!important}

/* v10 - KOZHANE coin economy + cosmetic shop */
.store-balance{align-self:center;border:1px solid #6f5727;background:#0c120e;border-radius:14px;padding:11px 16px;color:#c9b577;font-size:12px}.store-balance b{font-size:20px;color:#f4d676;margin:0 4px}.store-rate{display:flex;align-items:center;gap:14px;margin:10px 0 22px;padding:14px 18px;border:1px solid #715824;border-radius:14px;background:linear-gradient(90deg,#261b08,#11150f);font-weight:1000;letter-spacing:1.3px;color:#f1cd68}.store-rate small{font-weight:600;letter-spacing:0;color:#aaad9e}.store-section-head{display:flex;align-items:end;justify-content:space-between;margin:24px 0 12px}.store-section-head h3{font-family:Georgia,serif;color:#efd174;font-size:24px;margin:0}.store-section-head span{font-size:11px;color:#8e9b91}.coin-package-grid{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:14px}.coin-product,.cosmetic-card{border:1px solid #5d4922;background:linear-gradient(145deg,#111a14,#090e0b);border-radius:16px;box-shadow:0 14px 32px #0007;overflow:hidden}.coin-product{min-height:215px;padding:20px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.coin-stack{font-size:40px;filter:drop-shadow(0 5px 14px #dcae3b55)}.coin-product b{font-size:19px;color:#f6d77b}.coin-product strong{font-size:25px;color:#fff}.coin-product small{color:#8f9a92}.store-buy,.store-equip{margin-top:7px;border:1px solid #b98d2e;border-radius:10px;background:linear-gradient(#d5a73c,#886018);color:#fff8dc;padding:10px 12px;font-weight:1000;cursor:pointer;box-shadow:inset 0 1px #ffe4a3}.store-buy:disabled,.store-equip:disabled{cursor:default;opacity:.55}.cash-test{background:linear-gradient(#248a46,#135b2e);border-color:#4cca70}.payment-dev-note{margin-top:11px;padding:10px 13px;border-radius:9px;background:#553b071f;border:1px dashed #967529;color:#d3bd7b;font-size:10px;text-align:center}.cosmetic-head{margin-top:34px}.store-filter-row{margin-bottom:12px}.store-filter{border:1px solid #94722b;background:#251b0a;color:#f5d97f;border-radius:9px;padding:9px 14px;font-size:10px;font-weight:1000}.cosmetic-grid{display:grid;grid-template-columns:repeat(3,minmax(240px,1fr));gap:14px;padding-bottom:30px}.cosmetic-card{display:grid;grid-template-columns:82px 1fr auto;align-items:center;gap:14px;padding:16px}.cosmetic-card.equipped{border-color:#e2bf5d;box-shadow:0 0 0 1px #e2bf5d55,0 13px 34px #0007}.frame-preview{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:#1c251f;color:#fff;font-weight:1000;font-size:27px;border:3px solid #b8984b;position:relative}.cosmetic-copy b,.cosmetic-copy small,.cosmetic-copy strong{display:block}.cosmetic-copy b{font-size:14px;color:#f4d77d}.cosmetic-copy small{font-size:10px;color:#96a198;margin:5px 0 8px}.cosmetic-copy strong{font-size:12px;color:#fff}.store-equip,.cosmetic-card>.store-buy{margin:0;min-width:84px}.equipped-btn{background:#2d6c42;border-color:#54ae70}

/* Equippable avatar frames */
.frame-classic{border-color:#d1a74b!important;box-shadow:0 0 0 3px #221707,0 0 17px #d4a63c38!important}.frame-emerald{border-color:#51d980!important;box-shadow:0 0 0 3px #0b3b25,0 0 20px #4cff8877!important}.frame-ruby{border-color:#ff5b63!important;box-shadow:0 0 0 3px #4c0f15,0 0 20px #ff445d77!important}.frame-royal{border-color:#ffd768!important;box-shadow:0 0 0 4px #5d410e,0 0 0 6px #e6b33a,0 0 26px #ffd76f80!important}.frame-blackgold{border-color:#d5ac46!important;box-shadow:inset 0 0 0 3px #0b0b0b,0 0 0 3px #151515,0 0 20px #d7ae5060!important}.frame-diamond{border-color:#c9f6ff!important;box-shadow:0 0 0 3px #467783,0 0 12px #aaf2ff,0 0 28px #d7faff99!important}.frame-diamond::after,.frame-royal::after{content:'◆';position:absolute;right:-6px;top:-9px;font-size:15px;color:#eaffff;text-shadow:0 0 7px currentColor}.frame-royal::after{content:'♛';color:#ffd769;font-size:18px}

@media(max-width:1450px){.coin-package-grid{grid-template-columns:repeat(3,1fr)}.cosmetic-grid{grid-template-columns:repeat(2,1fr)}}


/* v11 - expanded KOZHANE cosmetic marketplace */
.store-filter-row{display:flex;gap:10px;flex-wrap:wrap}.store-filter{transition:.18s}.store-filter.active{background:linear-gradient(#d8ad48,#8f681f);color:#fff8df;box-shadow:0 0 0 1px #f4d87b66,0 8px 22px #0007}.cosmetic-grid{grid-template-columns:repeat(3,minmax(250px,1fr))}.shop-icon-preview,.shop-cardback,.shop-table-preview,.shop-text-preview,.shop-chat-preview,.shop-emote-preview{width:78px;height:78px;border-radius:13px;display:grid;place-items:center;border:1px solid #715927;background:#111913;color:#f2d374;font-size:28px;font-weight:1000;box-shadow:inset 0 0 20px #0007}.shop-text-preview{font-size:12px}.shop-chat-preview{font-size:10px;padding:7px;width:78px;text-align:center}.shop-emote-preview{font-size:17px}.shop-cardback{border-radius:9px;background:repeating-linear-gradient(45deg,#101923,#101923 5px,#18263a 5px,#18263a 10px);border:4px solid #e4dfcf;color:#e2bd58}.cardback-blackgold{background:radial-gradient(circle at 50% 45%,#ad832f 0 3px,#111 4px 100%)}.cardback-velvet{background:repeating-linear-gradient(45deg,#5d1018,#5d1018 6px,#791722 6px,#791722 12px)}.cardback-ottoman{background:radial-gradient(circle,#c49a42 1px,#18223a 2px 8px,#b9913e 9px 10px,#18223a 11px)}.shop-table-preview{border-radius:50%;font-size:33px}.table-green{background:#063b23}.table-bordeaux{background:#57151b}.table-midnight{background:#102644}.table-blackgold{background:radial-gradient(circle,#252525,#080808);border-color:#d6aa45}.name-gold{color:#f1ce6a;text-shadow:0 0 9px #d59b32}.name-ruby{color:#ff747d;text-shadow:0 0 9px #c51f32}.name-neon{color:#75efff;text-shadow:0 0 8px #00d5ff,0 0 18px #00d5ff}.badge-preview{background:radial-gradient(circle,#3d2b0b,#0c100d)}.fx-gold{box-shadow:inset 0 0 25px #ffd45b55,0 0 16px #dba63755}.fx-cards{background:#162038}.fx-crown{background:#31200a}.fx-spade{background:#111;color:#fff}.chat-gold{border-color:#b48a34;color:#f3d179}.chat-glass{background:#d8f5ff10;backdrop-filter:blur(6px);color:#dff8ff}.chat-velvet{background:#52151c;color:#ffd9dc}.profile-badge{display:inline-block;margin:2px auto 7px;padding:5px 9px;border:1px solid #806426;border-radius:999px;background:#1a1408;color:#efd276;font-size:10px;font-weight:1000;letter-spacing:.6px}.profile-badge.hidden{display:none}
#profileName[data-name-style="gold"]{color:#f0cf72;text-shadow:0 0 10px #d69d31}#profileName[data-name-style="ruby"]{color:#ff707a;text-shadow:0 0 10px #a8192a}#profileName[data-name-style="neon"]{color:#7befff;text-shadow:0 0 10px #00d6ff}
#tableView[data-table-theme="bordeaux"] .felt{background:radial-gradient(circle at 50% 45%,#6a1d24,#3d0d12 70%)!important}#tableView[data-table-theme="midnight"] .felt{background:radial-gradient(circle at 50% 45%,#193a62,#09172a 72%)!important}#tableView[data-table-theme="blackgold"] .felt{background:radial-gradient(circle at 50% 45%,#242424,#080808 73%)!important;box-shadow:inset 0 0 0 2px #b88b34!important}.chat-box[data-chat-style="gold"]{border-color:#a98231!important;box-shadow:0 0 20px #d6a63722!important}.chat-box[data-chat-style="glass"]{background:#d9f5ff12!important;backdrop-filter:blur(12px)}.chat-box[data-chat-style="velvet"]{background:linear-gradient(#401116ee,#1a080bee)!important;border-color:#762a31!important}
body[data-cardback="blackgold"] .partner-mini-card{background:#111!important;color:#e8c564!important;border-color:#aa8233!important}body[data-cardback="velvet"] .partner-mini-card{background:#64121c!important;color:#fff!important}body[data-cardback="ottoman"] .partner-mini-card{background:#18233b!important;color:#e2c06a!important}
.cosmetic-enter[data-enter-fx="gold"] .table-stage{animation:enterGold .7s ease}.cosmetic-enter[data-enter-fx="deal"] .table-stage{animation:enterDeal .55s ease}.cosmetic-enter[data-enter-fx="smoke"] .table-stage{animation:enterSmoke .8s ease}.cosmetic-win{animation:winPulse .65s ease}.cosmetic-win[data-win-fx="crown"]::after{content:'♛';position:absolute;inset:0;display:grid;place-items:center;font-size:90px;color:#f0cc65;text-shadow:0 0 30px #dca633;pointer-events:none;animation:fxPop .75s ease both}.cosmetic-win[data-win-fx="spade"]::after{content:'♠';position:absolute;inset:0;display:grid;place-items:center;font-size:110px;color:#fff;text-shadow:0 0 35px #d9bd67;pointer-events:none;animation:fxPop .75s ease both}.cosmetic-win[data-win-fx="cards"]::after{content:'🂡  🂮  🂫';position:absolute;inset:0;display:grid;place-items:center;font-size:55px;pointer-events:none;animation:fxPop .75s ease both}@keyframes enterGold{0%{filter:brightness(.4);transform:scale(.98)}60%{filter:brightness(1.35)}100%{filter:none;transform:none}}@keyframes enterDeal{0%{transform:translateY(18px);opacity:.3}100%{transform:none;opacity:1}}@keyframes enterSmoke{0%{filter:blur(8px);opacity:.25}100%{filter:none;opacity:1}}@keyframes winPulse{50%{filter:brightness(1.22)}}@keyframes fxPop{0%{opacity:0;transform:scale(.4) rotate(-10deg)}45%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(1.5)}}
@media(max-width:1450px){.cosmetic-grid{grid-template-columns:repeat(2,minmax(240px,1fr))}}


/* v12 trick collection animation: won cards fly from table center to winner avatar */
.table-stage{isolation:isolate}
.trick-collect-layer{position:absolute;inset:0;z-index:80;pointer-events:none;overflow:visible}
.trick-collect-card{position:absolute;width:104px;height:146px;transform:translate(-50%,-50%);transform-origin:center center;will-change:transform,opacity;filter:drop-shadow(0 14px 18px #000b)}
.trick-collect-card .played-card{width:104px!important;height:146px!important;margin:0!important;box-shadow:0 12px 24px #000b!important}
.trick-collect-source-hide{opacity:0!important;transition:opacity .08s linear}
.seat-avatar.trick-winner-catch{animation:trickWinnerCatch .78s ease both;z-index:90!important}
@keyframes trickWinnerCatch{0%{transform:scale(1);box-shadow:0 0 0 3px #201407,0 4px 18px #0008}48%{transform:scale(1.16);box-shadow:0 0 0 4px #f0cc65,0 0 34px #f0cc65aa,0 8px 25px #000b}100%{transform:scale(1);box-shadow:0 0 0 3px #201407,0 4px 18px #0008}}
@media(max-width:1366px){.trick-collect-card,.trick-collect-card .played-card{width:92px!important;height:128px!important}}


/* =========================================================
   KOZHANE v13 - reactions + visible opponent card backs
   ========================================================= */
.chat-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #6b5428;background:#090d0b;flex:0 0 auto}
.chat-tabs button{height:38px;border:0;background:transparent;color:#9b9f99;font-weight:900;letter-spacing:.7px;cursor:pointer;border-bottom:2px solid transparent}
.chat-tabs button.active{color:#f0cf6b;border-bottom-color:#d6a83f;background:linear-gradient(180deg,#d6a83f18,transparent)}
.reaction-panel{flex:1;min-height:0;padding:12px;overflow:auto;background:linear-gradient(180deg,#0b100dee,#070b09ee)}
.reaction-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.reaction-button{aspect-ratio:1;border:1px solid #5f4b27;border-radius:10px;background:#101612;color:#fff;font-size:24px;cursor:pointer;box-shadow:inset 0 0 14px #0008}
.reaction-button:hover{border-color:#e3ba56;transform:translateY(-1px);box-shadow:0 0 16px #d9a93c33}
#reactionHint{display:block;color:#8f978f;font-size:10px;line-height:1.4;margin-top:10px;text-align:center}

.opponent-hand-backs{position:absolute;display:none;z-index:3;pointer-events:none;width:230px;height:92px;left:50%;transform:translateX(-50%);top:72px}
.opponent-hand-backs.show{display:block}
.opponent-card-back{position:absolute;left:50%;top:0;width:54px;height:78px;border:3px solid #e4dfcf;border-radius:8px;background:repeating-linear-gradient(45deg,#101923,#101923 5px,#18263a 5px,#18263a 10px);box-shadow:0 4px 12px #0008;display:grid;place-items:center;transform-origin:50% 115%;transform:translateX(calc(-50% + (var(--i) - (var(--n) - 1)/2) * 13px)) rotate(calc((var(--i) - (var(--n) - 1)/2) * 2.1deg))}
.opponent-card-back i{font-style:normal;font-size:18px;color:#d7b756;opacity:.9}
.opponent-hand-backs[data-cardback="blackgold"] .opponent-card-back{background:radial-gradient(circle at 50% 45%,#bd923b 0 3px,#0a0a0a 4px 100%);border-color:#d6b356;color:#e8c564}
.opponent-hand-backs[data-cardback="velvet"] .opponent-card-back{background:repeating-linear-gradient(45deg,#5d1018,#5d1018 6px,#791722 6px,#791722 12px);border-color:#deb4b7}
.opponent-hand-backs[data-cardback="ottoman"] .opponent-card-back{background:radial-gradient(circle,#c49a42 1px,#18223a 2px 8px,#b9913e 9px 10px,#18223a 11px);border-color:#d9bd73}
.opponent-hand-backs[data-cardback="neonblue"] .opponent-card-back{background:radial-gradient(circle at 50% 46%,#0e2941 0 18%,#06111e 50%,#03080f 100%);border-color:#15aaff;box-shadow:0 0 6px #16aaff,0 0 16px #168dff88,inset 0 0 14px #0b7fd744}
.opponent-hand-backs[data-cardback="neonblue"] .opponent-card-back i{color:#45c8ff;text-shadow:0 0 8px #24a9ff}
.opponent-hand-backs[data-cardback="neonpurple"] .opponent-card-back{background:radial-gradient(circle at 50% 46%,#35104b 0 18%,#16051f 55%,#07020b 100%);border-color:#d845ff;box-shadow:0 0 6px #d845ff,0 0 16px #a72cff99,inset 0 0 14px #9b21e744}
.opponent-hand-backs[data-cardback="neonpurple"] .opponent-card-back i{color:#ef88ff;text-shadow:0 0 8px #d845ff}
.opponent-hand-backs[data-cardback="neongold"] .opponent-card-back{background:radial-gradient(circle at 50% 46%,#3a2a08 0 18%,#171005 55%,#080602 100%);border-color:#ffd15a;box-shadow:0 0 6px #ffd15a,0 0 17px #ffb00099,inset 0 0 14px #cc8d1f55}
.opponent-hand-backs[data-cardback="neongold"] .opponent-card-back i{color:#ffe084;text-shadow:0 0 8px #ffbd27}
.shop-cardback.cardback-neonblue{background:radial-gradient(circle,#173e61,#06101b)!important;border-color:#18aaff!important;box-shadow:0 0 16px #18aaff88!important}
.shop-cardback.cardback-neonpurple{background:radial-gradient(circle,#4b1763,#100617)!important;border-color:#d845ff!important;box-shadow:0 0 16px #d845ff88!important}
.shop-cardback.cardback-neongold{background:radial-gradient(circle,#4c370d,#100c04)!important;border-color:#ffd15a!important;box-shadow:0 0 16px #ffb00088!important}

/* Place racks around the four seats without covering names/avatars. */
#seat2 .opponent-hand-backs{top:74px}
#seat0 .opponent-hand-backs{top:auto;bottom:74px}
#seat1 .opponent-hand-backs,#seat3 .opponent-hand-backs{top:64px;width:190px;height:82px}
#seat1 .opponent-card-back,#seat3 .opponent-card-back{width:48px;height:70px}
@media(min-width:981px){
  #tableView .seat{z-index:6!important;overflow:visible!important}
  #tableView .chat-box:before{display:none!important}
  #tableView .chat-tabs{display:grid!important}
}

.admin-site-announcement,.maintenance-banner{position:sticky;top:0;z-index:100;text-align:center;padding:9px 14px;background:var(--gold);color:#171305;font-weight:900;font-size:12px}.maintenance-banner{background:#8b2525;color:#fff}