/* Rekor Oyun esintili klasik oyun portalı arayüzü — işlevsel sınıflar korunur. */
:root{
  --page:#eef1f4;--surface:#fff;--line:#d8dde3;--text:#333;--muted:#757d86;
  --blue:#2676c9;--blue-dark:#1d5fa5;--green:#1f6e38;--green-dark:#15552b;
  --felt:#18743a;--felt-dark:#115d2d;--wood:#9a6337;--wood-dark:#71401f;
  --danger:#c0392b;--gold:#f2c14e;--tile-w:39px;--tile-h:56px;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:var(--page)}
button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}

/* ---------------- Home / portal ---------------- */
body.home-page{background:linear-gradient(#e8ebef,#f5f6f8);overflow-x:hidden}
.home-bg{display:none}.home-shell{width:min(1040px,calc(100% - 28px));margin:18px auto 35px}
.home-nav{height:56px;background:linear-gradient(#2e81d2,#2168b1);border:1px solid #1a5b98;border-radius:5px 5px 0 0;padding:0 14px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.brand-lockup{display:flex;align-items:center;gap:9px;color:#fff}.brand-mark{height:35px;min-width:47px;padding:0 7px;border-radius:3px;background:#fff;color:#246cb3;font-weight:800;font-size:20px;display:grid;place-items:center;text-shadow:none}.brand-lockup strong{display:block;font-size:18px;letter-spacing:.2px}.brand-lockup span{display:block;font-size:10px;color:rgba(255,255,255,.78);margin-top:1px}.nav-pill{color:#eaf4ff;font-size:11px;background:rgba(0,0,0,.12);border:1px solid rgba(255,255,255,.16);border-radius:4px;padding:6px 9px}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#57db6a;margin-right:6px}
.hero-grid{margin-top:12px;display:grid;grid-template-columns:1fr 450px;gap:12px;align-items:start}.hero-copy{background:#fff;border:1px solid var(--line);border-radius:4px;padding:28px 30px;box-shadow:0 2px 7px rgba(0,0,0,.05);min-height:100%}.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.05em}.eyebrow span{width:7px;height:7px;background:#53b85a;border-radius:50%}.hero-copy h1{font-size:39px;line-height:1.1;margin:15px 0 10px;color:#27313b}.hero-copy h1 em{font-style:normal;color:var(--blue)}.hero-copy p{margin:0;max-width:540px;line-height:1.6;font-size:14px;color:#68717a}.feature-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}.feature-row span{background:#f3f6f8;border:1px solid #dde3e8;border-radius:3px;padding:7px 9px;font-size:11px;color:#58616a}
.join-card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:19px;box-shadow:0 2px 7px rgba(0,0,0,.06)}.card-topline{display:flex;align-items:center;justify-content:space-between;padding-bottom:11px;border-bottom:1px solid #e7eaed;margin-bottom:15px;font-size:12px;font-weight:700;color:#47515b}.status-chip{font-size:9px;color:#2c813a;background:#edf7ef;border:1px solid #d4ead7;padding:4px 7px;border-radius:3px}.field-label{font-size:11px;font-weight:700;color:#545d66;margin-bottom:6px}.name-input{width:100%;height:38px;border:1px solid #cfd6dd;border-radius:3px;padding:0 11px;outline:none;background:#fff;color:#313a42}.name-input:focus{border-color:#4e96d6;box-shadow:0 0 0 2px rgba(38,118,201,.12)}
.selection-block{margin-top:16px}.selection-title{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;color:#4c555e;margin-bottom:8px}.selection-title small{font-size:9px;font-weight:400;color:#9098a0}.avatar-grid.large{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.avatar-option{height:61px;padding:3px;border:1px solid #d3d9df;border-radius:4px;background:#f7f8fa}.avatar-option img{width:100%;height:100%;object-fit:cover;border-radius:2px}.avatar-option.selected{border-color:#2f7eca;box-shadow:0 0 0 2px rgba(47,126,202,.14);background:#eef6ff}
.istaka-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.istaka-option{display:grid;grid-template-columns:55px 1fr;gap:8px;align-items:center;padding:5px;border:1px solid #d3d9df;background:#f7f8fa;border-radius:4px;text-align:left}.istaka-option img{width:55px;height:41px;object-fit:cover;border-radius:2px}.istaka-option b{font-size:10px;color:#49545e}.istaka-option.selected{border-color:#2f7eca;background:#eef6ff}
.mode-list{margin-top:16px;border-top:1px solid #e7eaed}.mode-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #edf0f2}.mode-row span{display:flex;flex-direction:column;gap:2px}.mode-row b{font-size:11px;color:#414a53}.mode-row small{font-size:9px;color:#8a939c}.mode-row input{display:none}.mode-row i{position:relative;width:38px;height:20px;border-radius:10px;background:#cbd2d9;flex:none;transition:.15s}.mode-row i:after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.22);transition:.15s}.mode-row input:checked+i{background:#2d7ec6}.mode-row input:checked+i:after{left:20px}
.btn{border:1px solid #bdc6ce;border-radius:3px;padding:9px 13px;background:#f5f6f7;color:#444;font-weight:700;font-size:11px}.btn-primary{background:linear-gradient(#368bd5,#236bb2);border-color:#1e5e9c;color:#fff}.btn-secondary{background:#fff}.btn-danger{background:#fff3f2;border-color:#e0bbb6;color:#a6332b}.btn-large{padding:12px 16px}.join-btn{width:100%;display:flex;justify-content:space-between;align-items:center;margin-top:16px}.join-btn strong{font-size:16px}.tiny-note{text-align:center;margin-top:8px;font-size:9px;color:#98a0a8}
.toast{position:fixed;right:18px;bottom:18px;z-index:1000;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d9dee4;box-shadow:0 4px 15px rgba(0,0,0,.13);border-radius:4px;padding:9px 12px;font-size:11px}.toast-icon{width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#d65b50;color:#fff;font-weight:700}.toast-message{max-width:300px}

/* ---------------- Game shell ---------------- */
body.game-page{background:#dfe3e7;overflow:hidden}.background-animation,.particles{display:none}
.game-container{position:fixed;inset:10px;max-width:1380px;margin:auto;background:#f3f5f7;border:1px solid #c9d0d6;box-shadow:0 2px 12px rgba(0,0,0,.12);overflow:hidden}.game-board{position:absolute;left:0;right:0;top:54px;bottom:0;background:linear-gradient(135deg,#166b35,#0f5c2c);overflow:hidden}
.game-container:before{content:'101 OKEY';position:absolute;left:14px;top:11px;height:32px;line-height:32px;color:#fff;font-size:16px;font-weight:800;z-index:80}.game-container:after{content:'OYUN MASASI';position:absolute;right:16px;top:16px;color:#6e7780;font-size:9px;font-weight:700;letter-spacing:.04em;z-index:80}
.ui-layer{position:absolute;left:0;right:0;top:0;height:54px;background:#fff;border-bottom:1px solid #cfd5da;z-index:70}.stats-panel,.game-status-panel{position:absolute;top:8px;background:#fff!important;border:1px solid #d3d9df!important;border-radius:3px!important;box-shadow:none!important;color:#333!important;backdrop-filter:none!important}.stats-panel{left:106px;width:200px}.game-status-panel{right:10px;display:flex;align-items:center;padding:6px 10px}.panel-header{font-size:10px;font-weight:700;text-transform:uppercase;color:#59636d;padding:6px 8px;border-bottom:1px solid #e5e8eb}.stats-list{padding:4px 7px;display:flex;gap:4px}.stats-list>*{font-size:9px}.status-item{display:flex;align-items:center;gap:5px;padding:0 8px}.status-item .label{font-size:9px;color:#929aa2}.status-item .value{font-size:11px;font-weight:700;color:#38414a}.game-status-panel .divider{width:1px;height:20px;background:#e1e4e7}
.table-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(690px,58vw);height:min(430px,55vh);border-radius:7px;background:radial-gradient(circle at 50% 45%,#1d8240 0,#176f36 55%,#115f30 100%);border:8px solid #4a311f;box-shadow:inset 0 0 0 2px rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.22);overflow:visible}.table-center:before{content:'';position:absolute;inset:15px;border:2px solid rgba(255,255,255,.16);border-radius:4px;pointer-events:none}.center-content{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:28px;z-index:5}.pile-section,.indicator-section,.discard-section{display:flex;flex-direction:column;align-items:center;gap:5px}.area-label,.slot-label{font-size:8px;text-transform:uppercase;color:rgba(255,255,255,.76);font-weight:700;letter-spacing:.04em}.indicator-section{display:grid;grid-template-columns:1fr 1fr;gap:6px}.indicator-slot{display:flex;flex-direction:column;align-items:center;gap:4px}.tile-placeholder{width:44px;height:62px;border:1px dashed rgba(255,255,255,.32);border-radius:4px;background:rgba(0,0,0,.12)}.pile-stack{position:relative;width:48px;height:64px}.pile-tile-back,.opponent-tile-back{position:absolute;width:44px;height:60px;background:linear-gradient(135deg,#eee,#d6dadd);border:1px solid #afb6bc;border-radius:4px;box-shadow:2px 2px 0 #b9c0c5}.pile-tile-back:nth-child(1){left:0;top:0}.pile-tile-back:nth-child(2){left:2px;top:2px}.pile-tile-back:nth-child(3){left:4px;top:4px}.pile-count-badge,.tomato-counter{position:absolute}.pile-count-badge{right:-8px;top:-8px;width:19px;height:19px;border-radius:50%;background:#c0392b;color:#fff;display:grid;place-items:center;font-size:9px;font-weight:700;border:2px solid #fff}.discard-stack{width:48px;height:64px;border:1px dashed rgba(255,255,255,.35);display:grid;place-items:center;border-radius:4px;background:rgba(0,0,0,.08)}.discard-placeholder{font-size:8px;color:rgba(255,255,255,.68)}
.opened-tiles-table{position:absolute;inset:0;z-index:8;pointer-events:none}.opened-player-area{position:absolute;display:flex;gap:3px;min-width:70px;min-height:30px}.opened-player-area.top{left:50%;top:38px;transform:translateX(-50%)}.opened-player-area.bottom{left:50%;bottom:36px;transform:translateX(-50%)}.opened-player-area.left{left:30px;top:50%;transform:translateY(-50%) rotate(-90deg)}.opened-player-area.right{right:30px;top:50%;transform:translateY(-50%) rotate(90deg)}
.opponent-area{position:absolute;z-index:20}.opponent-area.top{left:50%;top:16px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px}.opponent-area.left{left:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px}.opponent-area.right{right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;flex-direction:row-reverse}.opponent-hand{display:flex;justify-content:center}.opponent-hand.vertical{flex-direction:column}.opponent-tile-back{position:relative;width:34px;height:48px;box-shadow:2px 2px 0 #aeb5ba;margin-left:-10px}.opponent-hand .opponent-tile-back:first-child{margin-left:0}.opponent-tile-back.vertical{margin-left:0;margin-top:-16px}.opponent-hand.vertical .opponent-tile-back:first-child{margin-top:0}.player-info{display:flex;align-items:center;gap:7px;padding:5px 7px;border:1px solid rgba(0,0,0,.18);background:#fff;border-radius:3px;min-width:113px;box-shadow:0 2px 5px rgba(0,0,0,.12)}.avatar-wrapper{position:relative;width:28px;height:28px;flex:none}.player-avatar{width:28px;height:28px;border-radius:3px;object-fit:cover;border:1px solid #cfd5da}.turn-badge{position:absolute;right:-3px;bottom:-3px;width:8px;height:8px;border-radius:50%;background:#a9b0b6;border:2px solid #fff}.current-turn .turn-badge{background:#2c9b42}.player-details{display:flex;flex-direction:column;gap:2px;min-width:0}.player-name{font-size:10px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}.player-score,.tile-count-badge{font-size:8px;color:#7c858e}.tile-count-badge{font-weight:700}
.player-area.bottom{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(900px,88vw);height:210px;z-index:30}.cue-container{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(720px,70vw);height:154px}.cue-wood{position:absolute;inset:0;border:2px solid #6a401f;border-bottom:0;border-radius:12px 12px 0 0;background:linear-gradient(#ad7948,#915c32);box-shadow:inset 0 2px 0 rgba(255,255,255,.15),0 -4px 14px rgba(0,0,0,.22);padding:10px 12px}.cue-wood:after{content:'';position:absolute;inset:7px;border:1px solid rgba(255,255,255,.13);border-bottom:0;border-radius:7px 7px 0 0;pointer-events:none}.cue-row{position:relative;z-index:2;display:flex;align-items:end;justify-content:center;min-height:62px}.cue-row.top-row{padding-right:38px}.cue-row.bottom-row{padding-left:38px;margin-top:-9px}.tile-sprite{width:var(--tile-w);height:var(--tile-h);position:relative;border-radius:4px;overflow:hidden;cursor:pointer;transform-origin:center bottom;transition:transform .12s,filter .12s;filter:drop-shadow(0 3px 2px rgba(0,0,0,.2))}.tile-sprite:hover{transform:translateY(-5px)}.tile-sprite.selected{transform:translateY(-8px);filter:drop-shadow(0 5px 4px rgba(243,194,64,.35))}.tile-sprite.okey{outline:2px solid var(--gold)}.tile-slot{position:relative;min-width:9px}.player-discard{position:absolute;bottom:58px;width:87px}.left-discard{left:4px}.right-discard{right:4px}.discard-label{font-size:8px;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:4px}.discard-tiles{display:flex;gap:2px;height:58px}.discard-tiles .tile-sprite{width:38px;height:54px;transform:scale(.88);transform-origin:left bottom}.player-area.bottom>.player-info{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);z-index:32}.action-buttons{position:fixed;right:26px;bottom:26px;z-index:60;display:flex;gap:6px}.action-btn{border:1px solid #bfc6cd;background:#fff;color:#424a52;padding:8px 10px;border-radius:3px;cursor:pointer;font-size:10px;font-weight:700;box-shadow:0 2px 5px rgba(0,0,0,.12)}.action-btn.open-hand{background:linear-gradient(#4c97dd,#2876bb);color:#fff;border-color:#2369a6}.action-btn.pair-open{background:linear-gradient(#7765c8,#5845a8);color:#fff;border-color:#4c3a95}.action-btn:disabled{opacity:.45;cursor:not-allowed}.tomato-btn{position:fixed;left:24px;bottom:24px;z-index:60;width:42px;height:42px;border-radius:4px;background:#fff;border:1px solid #c5cbd1;box-shadow:0 2px 5px rgba(0,0,0,.14);cursor:pointer;font-size:18px}.tomato-counter{right:-5px;top:-6px;width:17px;height:17px;border-radius:50%;background:#c0392b;font-size:8px;display:grid;place-items:center;color:#fff;font-weight:800;border:2px solid #fff}.opened-tiles-panel{position:fixed;left:18px;top:76px;width:190px;max-height:270px;overflow:auto;z-index:40;padding:10px;border-radius:3px;background:#fff;border:1px solid #cfd5da;box-shadow:0 2px 8px rgba(0,0,0,.12)}.opened-tiles-panel h4{font-size:9px;text-transform:uppercase;color:#5e6872;margin:0 0 7px}.opened-group{padding:7px 0;border-bottom:1px solid #edf0f2}.mini-tile{display:inline-flex;width:24px;height:34px;align-items:center;justify-content:center;border-radius:3px;overflow:hidden;margin-right:2px}.mini-tile-inner{font-size:9px}
.modal{position:fixed;inset:0;z-index:700;display:grid;place-items:center;background:rgba(29,37,44,.52)}.modal-content{width:min(680px,92vw);max-height:88vh;overflow:auto;background:#fff;border:1px solid #cfd5da;border-radius:4px;padding:20px;box-shadow:0 6px 30px rgba(0,0,0,.22)}.modal-content h2{font-size:19px;margin:0}.open-hand-info{font-size:10px;color:#7b858e;margin-top:5px}.open-hand-score{margin:14px 0 12px;padding:10px 12px;border-radius:3px;background:#f4f6f8;border:1px solid #e1e5e8;font-size:11px}.score-bar{height:5px;background:#dfe4e8;border-radius:3px;overflow:hidden;margin-top:7px}.score-progress{height:100%;width:0;background:#2f7bc2;border-radius:3px}.selected-groups-display{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.selected-group{background:#eff6fd;border:1px solid #cfe0f2;padding:7px;border-radius:3px}.group-score{font-size:8px;color:#2d79bd;margin-left:4px}.remove-group{font-size:8px;color:#7b858e;cursor:pointer}.open-hand-instructions{font-size:9px;color:#717b84;line-height:1.55;padding:9px 10px;border-radius:3px;background:#f8f9fa;border:1px solid #e6e9ec;margin-bottom:12px}.open-hand-tiles{display:flex;flex-wrap:wrap;gap:4px}.open-hand-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:15px}.target-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:13px 0}.target-btn{padding:10px;border-radius:3px;background:#f4f6f8;color:#424b54;border:1px solid #d5dbe0;cursor:pointer}.cancel-throw-btn{width:100%;padding:9px;border-radius:3px;background:#fff;color:#7a848d;border:1px solid #d5dbe0;cursor:pointer}.tomato-select-overlay{position:fixed;inset:0;display:grid;place-items:center;z-index:650;background:rgba(29,37,44,.5)}.tomato-select-panel{width:min(350px,90vw);padding:20px;border-radius:4px;background:#fff;border:1px solid #cfd5da;text-align:center;box-shadow:0 5px 24px rgba(0,0,0,.18)}.tomato-select-panel h3{font-size:18px;margin:0}.tomato-select-panel p{color:#7a848c;font-size:10px;margin-top:5px}.final-scores{margin:15px 0;padding:12px;border-radius:3px;background:#f5f6f8;border:1px solid #e1e5e8}.score-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #e3e7ea;font-size:11px}.score-row:last-child{border-bottom:0}.flying-tomato{position:fixed;z-index:9999;font-size:30px;pointer-events:none}.tomato-splat{position:fixed;z-index:9998}.confetti{position:fixed;z-index:9998;width:7px;height:12px;border-radius:2px;top:-20px;animation:confettiFall 2.5s linear forwards}@keyframes confettiFall{to{transform:translateY(110vh) rotate(720deg);opacity:.1}}

/* ---------------- Lobby ---------------- */
.lobby-overlay{position:fixed;inset:0;background:rgba(226,230,234,.88);z-index:600;display:grid;place-items:center}.lobby-container{width:min(500px,calc(100% - 28px));background:#fff;border:1px solid #cbd2d8;border-radius:4px;box-shadow:0 6px 24px rgba(0,0,0,.18);padding:22px}.lobby-header h1{margin:0;font-size:21px;color:#2d70b4}.lobby-header p{margin:4px 0 0;color:#7b848d;font-size:11px}.lobby-room-code{margin-top:16px;background:#f4f6f8;border:1px solid #dfe4e8;padding:14px;text-align:center;border-radius:3px}.lobby-room-code-label{font-size:9px;color:#7b858e;text-transform:uppercase}.lobby-room-code-value{font-size:28px;font-weight:800;letter-spacing:4px;color:#3b4854;margin:4px 0 8px}.lobby-room-code-copy{border:1px solid #cbd3da;background:#fff;color:#4b5862;border-radius:3px;padding:7px 10px;font-size:10px;font-weight:700}.lobby-team-badge{margin-top:10px;padding:7px;border-radius:3px;background:#edf6ff;color:#2b70b2;border:1px solid #cde0f2;text-align:center;font-size:10px;font-weight:700}.lobby-players{margin-top:18px}.lobby-players h3{font-size:12px;margin:0 0 8px}.lobby-players-count{color:#8b949d;font-weight:400}.lobby-players-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.lobby-player-slot{min-height:73px;border:1px solid #dfe4e8;background:#f8f9fa;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#8b949d}.lobby-player-slot:not(.empty){background:#f1f7fc;border-color:#cfe0f2;color:#3d4d5b}.position-icon{font-size:16px}.player-name{font-size:10px}.lobby-waiting{margin-top:14px;display:flex;justify-content:center;align-items:center;gap:7px;color:#7b858e;font-size:10px}.spinner{width:15px;height:15px;border:2px solid #d6dde3;border-top-color:#2d78be;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.lobby-leave-btn{display:block;width:100%;margin-top:15px;border:1px solid #d2d8de;background:#fff;color:#6f7982;border-radius:3px;padding:9px;font-size:10px;font-weight:700}

@media(max-width:850px){.home-shell{width:min(100% - 18px,700px)}.hero-grid{grid-template-columns:1fr}.hero-copy{min-height:auto}.game-container{inset:0;border:0}.stats-panel{display:none}.table-center{width:62vw;height:52vh}.cue-container{width:84vw}.player-area.bottom{width:96vw}.action-buttons{right:12px;bottom:12px}.tomato-btn{left:12px;bottom:12px}}
@media(max-width:560px){.home-shell{margin-top:8px}.home-nav{height:50px}.brand-lockup strong{font-size:15px}.brand-lockup span{display:none}.hero-copy{padding:22px}.hero-copy h1{font-size:32px}.hero-copy p{font-size:12px}.avatar-option{height:55px}.table-center{width:78vw;height:48vh}.center-content{gap:12px}.indicator-section{gap:3px}.cue-container{height:135px;width:94vw}.player-area.bottom{height:180px}.opponent-area.left,.opponent-area.right{transform:translateY(-50%) scale(.88)}.game-container:after{display:none}.action-btn{padding:7px 8px}.lobby-container{padding:17px}}

/* ===== OKEY CLUB / MOBILE-FIRST FRONTEND ===== */
.club-page{margin:0;min-height:100dvh;background:#08111c;color:#eef3f8;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden;padding-bottom:78px}
.club-bg{position:fixed;inset:auto;pointer-events:none;z-index:0;border-radius:999px;filter:blur(60px);opacity:.22}.club-bg-1{width:340px;height:340px;background:#0f7b60;top:-150px;right:-100px}.club-bg-2{width:280px;height:280px;background:#b8872d;bottom:10%;left:-180px}
.club-shell{position:relative;z-index:1;width:100%;max-width:720px;margin:0 auto;padding:0 14px 24px}.club-header{height:64px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;background:linear-gradient(180deg,rgba(8,17,28,.96),rgba(8,17,28,.74),transparent);backdrop-filter:blur(8px)}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:#fff}.brand-chip{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:linear-gradient(145deg,#d7b75b,#8c6921);color:#16200e;font-size:17px;font-weight:950;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 24px rgba(0,0,0,.22)}.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-copy strong{font-size:14px;letter-spacing:.13em}.brand-copy small{margin-top:5px;color:#91a0ae;font-size:8px;letter-spacing:.18em}.header-status{font-size:11px;color:#b9c6d1;display:flex;gap:6px;align-items:center}.pulse{width:7px;height:7px;background:#29d79a;border-radius:50%;box-shadow:0 0 10px #29d79a}
.view{display:none}.view.active{display:block}.hero-card{padding:34px 4px 20px}.eyebrow,.kicker{font-size:10px;font-weight:800;letter-spacing:.18em;color:#cbaa55}.hero-card h1{margin:8px 0 12px;font-size:36px;line-height:1.02;letter-spacing:-.05em}.hero-card h1 span{color:#5dd6b4}.hero-card p{margin:0;max-width:560px;color:#98a8b7;line-height:1.55;font-size:14px}.live-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:22px}.live-stats div{padding:12px 10px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.035);border-radius:12px}.live-stats b,.live-stats span{display:block}.live-stats b{font-size:16px;color:#f4f7fa}.live-stats span{font-size:9px;color:#718192;margin-top:4px}
.panel{background:linear-gradient(180deg,rgba(22,34,46,.94),rgba(14,25,36,.95));border:1px solid rgba(255,255,255,.08);border-radius:18px;box-shadow:0 18px 45px rgba(0,0,0,.20)}.login-panel{padding:17px}.panel-heading,.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.panel-heading h2,.section-head h2{margin:4px 0 0;font-size:20px;letter-spacing:-.03em}.badge{font-size:9px;font-weight:800;color:#d8c27d;background:rgba(202,170,85,.12);border:1px solid rgba(202,170,85,.22);padding:7px 8px;border-radius:999px}.input-label{display:block;margin:18px 0 7px;font-size:10px;font-weight:700;color:#94a3b1}.club-input{width:100%;box-sizing:border-box;border:1px solid #2a3947;background:#0a1520;color:#fff;border-radius:12px;padding:14px;font-size:15px;outline:none}.club-input:focus{border-color:#4cbd9f;box-shadow:0 0 0 3px rgba(76,189,159,.12)}.primary-cta,.secondary-cta{width:100%;border:0;border-radius:12px;padding:14px 16px;font-weight:900;cursor:pointer}.primary-cta{margin-top:10px;display:flex;justify-content:space-between;background:linear-gradient(135deg,#49caa4,#2f9578);color:#07140f;box-shadow:0 12px 26px rgba(43,161,126,.22)}.secondary-cta{margin-top:9px;background:#111f2c;color:#dce5ec;border:1px solid rgba(255,255,255,.07)}.micro-copy{margin:10px 3px 0;color:#687887;font-size:10px;text-align:center;line-height:1.4}.feature-strip{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}.feature-strip article{display:flex;align-items:center;gap:10px;padding:12px;border-radius:13px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.025)}.feature-strip article>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(202,170,85,.1);color:#d9bc6a}.feature-strip b,.feature-strip small{display:block}.feature-strip b{font-size:12px}.feature-strip small{margin-top:2px;font-size:9px;color:#6f7f8d}
.section-head{padding:23px 3px 14px}.text-btn{border:0;background:transparent;color:#8ca0af;font-size:12px}.filter-row{display:flex;gap:7px;overflow:auto;padding:0 0 12px;scrollbar-width:none}.filter-row::-webkit-scrollbar{display:none}.filter{flex:0 0 auto;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:#0e1a26;color:#80919f;padding:8px 11px;font-size:10px}.filter.active{background:#17362e;color:#62d0b0;border-color:#215b4d}.room-list{display:grid;gap:10px}.room-card{padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,#132332,#0f1b27)}.featured-room{border-color:rgba(202,170,85,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}.room-top,.room-main{display:flex;justify-content:space-between;gap:10px}.room-live,.room-code{font-size:9px;color:#81909e}.room-live{color:#63d2af;font-weight:800}.room-live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#4ed6aa;margin-right:4px}.room-main{align-items:flex-end;margin-top:12px}.room-main h3{margin:0;font-size:15px}.room-main p{margin:4px 0 0;color:#748492;font-size:9px}.room-players{text-align:right}.room-players b{display:block;font-size:16px}.room-players span{font-size:8px;color:#71818f}.room-join{width:100%;margin-top:13px;border:0;border-radius:10px;padding:11px;background:#1a5c4c;color:#dff7ef;font-size:11px;font-weight:900}.demo-room .room-join{background:#172532;color:#6f7d89}.profile-preview{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px}.avatar-mini{width:42px;height:42px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}.avatar-mini img{width:100%;height:100%;object-fit:cover}.profile-preview h3{margin:2px 0;font-size:13px}.profile-preview p{margin:0;color:#738492;font-size:9px}.icon-btn{margin-left:auto;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:#0d1924;color:#c6d2dc;font-size:20px}.mobile-nav{position:fixed;z-index:30;left:50%;bottom:0;transform:translateX(-50%);width:min(720px,100%);padding:8px 12px calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,1fr);background:rgba(7,13,21,.93);border-top:1px solid rgba(255,255,255,.08);backdrop-filter:blur(15px)}.mobile-tab{border:0;background:transparent;color:#677684;display:grid;place-items:center;gap:2px;font-size:18px}.mobile-tab small{font-size:8px;letter-spacing:.08em}.mobile-tab.active{color:#5ed5b3}.mobile-tab:disabled{opacity:.5}.toast{position:fixed;z-index:50;left:50%;bottom:84px;transform:translateX(-50%);width:calc(100% - 28px);max-width:620px;box-sizing:border-box;background:#31151a;color:#ffd9df;border:1px solid #65303a;border-radius:12px;padding:12px;font-size:12px;box-shadow:0 18px 40px rgba(0,0,0,.3)}.toast.hidden{display:none}.toast-icon{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#7d2b39;margin-right:6px}.toast-message{vertical-align:middle}
@media (min-width:700px){.club-shell{padding-left:20px;padding-right:20px}.hero-card{padding-top:55px}.hero-card h1{font-size:50px}.feature-strip{grid-template-columns:repeat(3,1fr)}.feature-strip article{min-height:58px}.mobile-nav{display:none}.club-page{padding-bottom:30px}}

/* ===== CREATE ROOM — MOBILE SHEET ===== */
body.sheet-open{overflow:hidden}
.room-sheet{position:fixed;inset:0;z-index:120;display:none}
.room-sheet.open{display:block}
.room-sheet-backdrop{position:absolute;inset:0;background:rgba(2,7,12,.72);backdrop-filter:blur(5px)}
.room-sheet-panel{position:absolute;left:0;right:0;bottom:0;max-width:720px;margin:0 auto;background:linear-gradient(180deg,#132231,#0c1621 100%);border:1px solid rgba(255,255,255,.09);border-bottom:0;border-radius:24px 24px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -20px 55px rgba(0,0,0,.42);animation:sheetUp .22s ease-out}
.sheet-handle{width:42px;height:4px;border-radius:999px;background:#3c4d5b;margin:2px auto 14px}
.sheet-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.sheet-head h2{margin:4px 0 5px;font-size:22px;letter-spacing:-.04em}
.sheet-head p{margin:0;color:#7e909f;font-size:11px;line-height:1.45}
.sheet-close{width:34px;height:34px;flex:none;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:#10202d;color:#9daab6;font-size:24px;line-height:1}
.sheet-label{display:block;margin:20px 0 7px;font-size:10px;font-weight:800;color:#91a0ad}
.sheet-input{width:100%;height:48px;border:1px solid #2a3b49;background:#08131e;color:#f6f8fb;border-radius:12px;padding:0 14px;font-size:15px;outline:none}
.sheet-input:focus{border-color:#49b996;box-shadow:0 0 0 3px rgba(73,185,150,.12)}
.sheet-section{margin-top:18px}.sheet-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#e4eaf0;font-size:11px;font-weight:800}.sheet-section-head small{font-size:9px;color:#687a88;font-weight:600}
.mode-pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mode-pick{min-height:72px;display:grid;grid-template-columns:38px 1fr 16px;align-items:center;gap:9px;text-align:left;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:#0d1b27;color:#dae2e8;padding:10px}.mode-pick .mode-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#142a32;color:#63d3b1;font-size:11px;font-weight:950}.mode-pick b,.mode-pick small{display:block}.mode-pick b{font-size:11px}.mode-pick small{margin-top:3px;font-size:9px;color:#718290}.mode-pick i{opacity:0;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:#48c19a;color:#062119;font-size:10px;font-style:normal;font-weight:950}.mode-pick.selected{border-color:rgba(72,193,154,.58);background:linear-gradient(180deg,#112c2d,#0e2428);box-shadow:0 0 0 1px rgba(72,193,154,.15) inset}.mode-pick.selected i{opacity:1}
.compact-section{border-top:1px solid rgba(255,255,255,.07);padding-top:6px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.055)}.setting-row:last-child{border-bottom:0}.setting-row b,.setting-row small{display:block}.setting-row b{font-size:11px;color:#dfe6ec}.setting-row small{font-size:9px;color:#6d7f8d;margin-top:3px}.switch{position:relative;width:42px;height:24px;flex:none}.switch input{position:absolute;opacity:0}.switch span{display:block;width:42px;height:24px;border-radius:999px;background:#293946;border:1px solid rgba(255,255,255,.07);transition:.15s}.switch span:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#dce3e9;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.35)}.switch input:checked+span{background:#247d64;border-color:#3aa987}.switch input:checked+span:after{left:21px;background:#fff}
.private-hint{margin-top:8px;padding:9px 10px;border:1px solid rgba(202,170,85,.18);background:rgba(202,170,85,.08);border-radius:10px;color:#c4aa67;font-size:9px;line-height:1.4}.private-hint.hidden{display:none}
.sheet-create-btn,.sheet-cancel-btn{width:100%;height:48px;border-radius:12px;font-weight:950}.sheet-create-btn{margin-top:14px;border:0;background:linear-gradient(135deg,#52cfaa,#319878);color:#061812;display:flex;align-items:center;justify-content:space-between;padding:0 15px;box-shadow:0 13px 28px rgba(41,153,117,.23)}.sheet-create-btn:disabled{opacity:.65}.sheet-cancel-btn{margin-top:8px;border:1px solid rgba(255,255,255,.07);background:#10202d;color:#8695a2}.mini-spinner{display:block;width:15px;height:15px;border:2px solid rgba(0,0,0,.15);border-top-color:#062119;border-radius:50%;animation:spin .7s linear infinite}
.create-room-btn{flex:0 0 auto;border:1px solid rgba(202,170,85,.4);border-radius:999px;background:rgba(202,170,85,.1);color:#dfc477;padding:8px 12px;font-size:10px;font-weight:900}
.empty-rooms{padding:30px 16px;text-align:center;border:1px dashed rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.02)}.empty-rooms strong,.empty-rooms span{display:block}.empty-rooms strong{font-size:13px}.empty-rooms span{margin-top:5px;color:#70808e;font-size:10px}
@keyframes sheetUp{from{transform:translateY(24px);opacity:.4}to{transform:translateY(0);opacity:1}}
@media(max-width:420px){.room-sheet-panel{padding-left:14px;padding-right:14px}.mode-pick{grid-template-columns:34px 1fr 15px;padding:9px;gap:7px}.mode-pick .mode-icon{width:34px;height:34px}.sheet-head h2{font-size:20px}}

/* ===== PLAYER PROFILE ===== */
.profile-sheet{position:fixed;inset:0;z-index:140;display:none}.profile-sheet.open{display:block}.profile-sheet-backdrop{position:absolute;inset:0;background:rgba(2,7,12,.74);backdrop-filter:blur(6px)}.profile-sheet-panel{position:absolute;left:0;right:0;bottom:0;max-width:720px;margin:0 auto;background:linear-gradient(180deg,#132231,#0b1520);border:1px solid rgba(255,255,255,.09);border-bottom:0;border-radius:24px 24px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -20px 55px rgba(0,0,0,.45);animation:sheetUp .22s ease-out;max-height:92dvh;overflow:auto}.profile-hero{display:flex;align-items:center;gap:13px;padding:6px 0 4px}.profile-avatar-wrap{width:68px;height:68px;border-radius:18px;padding:2px;background:linear-gradient(135deg,#d8b960,#3fc39c);box-shadow:0 9px 25px rgba(0,0,0,.25)}.profile-avatar-wrap img{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block}.profile-level{display:inline-flex;border:1px solid rgba(202,170,85,.25);background:rgba(202,170,85,.1);color:#ddc16f;border-radius:999px;padding:4px 7px;font-size:8px;font-weight:900;letter-spacing:.08em}.profile-hero h3{margin:5px 0 2px;font-size:19px}.profile-hero p{margin:0;color:#718392;font-size:9px}.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.avatar-choice{aspect-ratio:1;border-radius:14px;border:1px solid rgba(255,255,255,.08);padding:3px;background:#0d1b27}.avatar-choice img{width:100%;height:100%;border-radius:10px;object-fit:cover;display:block}.avatar-choice.selected{border-color:#49c09d;box-shadow:0 0 0 2px rgba(73,192,157,.14)}.profile-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.profile-stats-grid div{padding:12px 8px;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:#0d1a25;text-align:center}.profile-stats-grid b,.profile-stats-grid span{display:block}.profile-stats-grid b{font-size:18px;color:#e6edf2}.profile-stats-grid span{margin-top:4px;color:#6e7f8c;font-size:8px;text-transform:uppercase;letter-spacing:.06em}
@media(min-width:700px){.profile-sheet-panel{bottom:24px;border-bottom:1px solid rgba(255,255,255,.09);border-radius:24px;max-height:760px}}

/* ===== LOBBY PLAYER AVATARS ===== */
.room-member-row{display:flex;align-items:center;gap:8px;margin-top:9px;min-width:0}
.room-avatar-stack{display:flex;align-items:center;padding-left:4px;flex:none}
.room-avatar{position:relative;width:30px;height:30px;border-radius:50%;overflow:hidden;border:2px solid #0d1b27;background:#132634;margin-left:-7px;box-shadow:0 2px 8px rgba(0,0,0,.28)}
.room-avatar:first-child{margin-left:0}
.room-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.room-avatar i{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;display:grid;place-items:center;background:#d8b45b;color:#231d08;font-size:6px;font-style:normal;border:1px solid #0d1b27}
.room-avatar-empty{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px dashed #456072;background:#0e1c28;color:#6c8798;font-size:16px;flex:none}
.room-member-names{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden;color:#9aaab6;font-size:8px;white-space:nowrap}
.room-member-names span{overflow:hidden;text-overflow:ellipsis;max-width:70px}
.room-member-names span+span:before{content:'·';margin-right:4px;color:#566a78}
.room-member-names .more-players{color:#d7bc6d;font-weight:800;overflow:visible}
@media(max-width:420px){.room-avatar{width:28px;height:28px}.room-member-names span{max-width:58px}}

/* ===== ACCOUNT AUTH ===== */
.auth-view{min-height:calc(100dvh - 94px);display:none;place-items:center;padding:30px 14px 110px}.auth-view.active{display:grid}.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:#fff}.auth-brand .brand-chip{display:grid;place-items:center;width:46px;height:36px;border-radius:10px;background:linear-gradient(135deg,#d6bb67,#8e6c2e);color:#201a09;font-weight:1000;font-size:18px}.auth-brand strong{display:block;letter-spacing:.12em;font-size:15px}.auth-brand small{display:block;color:#718391;font-size:8px;letter-spacing:.12em;margin-top:2px}.auth-card{width:min(100%,460px);background:linear-gradient(180deg,#112131,#0a1520);border:1px solid rgba(255,255,255,.09);border-radius:22px;padding:22px 17px;box-shadow:0 22px 60px rgba(0,0,0,.38)}.auth-kicker{color:#58cba9;font-size:9px;font-weight:900;letter-spacing:.12em}.auth-card h1{font-size:27px;margin:7px 0 6px}.auth-card>p{margin:0;color:#81909c;font-size:11px;line-height:1.55}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#09131d;border:1px solid rgba(255,255,255,.06);border-radius:12px;margin-top:18px}.auth-tab{height:38px;border:0;border-radius:9px;background:transparent;color:#748694;font-size:11px;font-weight:900}.auth-tab.active{background:#16302f;color:#65d2ae}.auth-form{margin-top:16px}.auth-form .input-label{margin-top:12px}.auth-form .club-input{margin-top:6px}.auth-register-fields.hidden{display:none}.auth-note{display:flex;gap:8px;align-items:flex-start;margin-top:14px;padding:10px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);color:#718391;font-size:9px;line-height:1.45}.auth-benefits{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:12px;color:#718391;font-size:8px}.account-preview{display:flex;align-items:center;gap:10px;margin:13px 0;padding:10px;border:1px solid rgba(255,255,255,.07);background:#0d1b27;border-radius:12px}.account-avatar{width:42px;height:42px;border-radius:50%;padding:2px;background:linear-gradient(135deg,#d6bb67,#3fc39c)}.account-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.account-preview strong,.account-preview small{display:block}.account-preview strong{font-size:11px;color:#dfe8ed}.account-preview small{font-size:9px;color:#6e7f8b;margin-top:2px}
.mini-profile-sheet{z-index:150}.mini-profile-panel{max-height:520px}.room-avatar{border:0;padding:0}.room-avatar button{border:0}.room-avatar:focus-visible{outline:2px solid #55caaa;outline-offset:2px}


/* ===== v10.2 TILE RENDER FIX =====
   The hand tiles use public/asset/Taslar.png as a 13 x 5 sprite sheet.
   Keep the background declaration in CSS too as a visual fallback; game.js
   also assigns it inline so drag clones/opened groups render consistently. */
.tile-sprite{
  background-image:url('../asset/Taslar.png');
  background-repeat:no-repeat;
  background-color:#f7f4e9;
  border:1px solid rgba(91,78,53,.28);
  box-shadow:0 2px 2px rgba(0,0,0,.22);
}
.tile-placeholder{
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.tile-placeholder .mini-tile-inner{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(#fffdf7,#eee9dc);
  border:1px solid rgba(70,62,47,.25);border-radius:4px;
  font-size:22px;font-weight:800;line-height:1;
  text-shadow:0 1px 0 #fff;
}
.mini-tile-inner.mavi{color:#1597e5}.mini-tile-inner.siyah{color:#161616}
.mini-tile-inner.kirmizi{color:#ef2020}.mini-tile-inner.yesil{color:#77cb00}
.mini-tile-inner.sahte{color:#f39a16}
.mini-tile{background:#f7f4e9;border:1px solid rgba(70,62,47,.2);box-shadow:0 1px 1px rgba(0,0,0,.16)}
.mini-tile .mini-tile-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:800;background:linear-gradient(#fffdf7,#eee9dc)}

/* ======================================================================
   v10.4 DESKTOP TABLE REVAMP
   Visual target: premium green felt + warm wood + gold accents.
   Desktop-only on purpose. Mobile/browser-specific tuning comes later.
   ====================================================================== */
@media (min-width: 851px) {
  body.game-page {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    background:
      radial-gradient(circle at 50% -20%, #2b1a0d 0 18%, transparent 42%),
      linear-gradient(135deg, #160d07, #090704 70%);
  }

  .game-container {
    inset: 0;
    max-width: none;
    background: #063d2b;
    border: 0;
    box-shadow: none;
  }

  .game-container::before {
    content: '101 OKEY';
    left: 28px;
    top: 18px;
    width: 170px;
    height: 64px;
    line-height: 64px;
    padding: 0 18px;
    color: #fff6db;
    font-size: 29px;
    font-style: italic;
    font-weight: 950;
    letter-spacing: -.04em;
    text-align: center;
    border: 1px solid rgba(227,185,92,.72);
    border-radius: 16px 16px 12px 12px;
    background:
      linear-gradient(180deg, rgba(26,38,33,.96), rgba(5,18,15,.98));
    box-shadow:
      inset 0 0 0 2px rgba(255,255,255,.025),
      0 8px 24px rgba(0,0,0,.40),
      0 0 18px rgba(210,166,73,.10);
    text-shadow: 0 2px 0 #2a1708, 0 0 12px rgba(255,221,137,.18);
    z-index: 95;
  }

  .game-container::after {
    content: '♛';
    right: auto;
    left: 102px;
    top: 7px;
    color: #e3ba5d;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 0;
    z-index: 96;
    text-shadow: 0 2px 7px rgba(0,0,0,.6);
  }

  .ui-layer {
    height: 104px;
    background: transparent;
    border: 0;
    pointer-events: none;
    z-index: 90;
  }

  .stats-panel,
  .game-status-panel {
    pointer-events: auto;
    top: 18px;
    color: #f6efe2 !important;
    background: linear-gradient(180deg, rgba(6,31,27,.95), rgba(3,18,16,.94)) !important;
    border: 1px solid rgba(221,180,91,.62) !important;
    border-radius: 12px !important;
    box-shadow: 0 9px 24px rgba(0,0,0,.33), inset 0 1px 0 rgba(255,255,255,.045) !important;
    backdrop-filter: blur(8px) !important;
  }

  .stats-panel {
    left: 220px;
    width: 355px;
    min-height: 72px;
  }

  .panel-header {
    padding: 8px 13px 7px;
    border-bottom: 1px solid rgba(220,184,98,.25);
    color: #f7efd9;
    font-size: 13px;
    letter-spacing: .03em;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
  }

  .panel-header .icon { color: #e0b95e; }

  .stats-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 0;
    padding: 4px 7px 7px;
  }

  .stats-list .stat-row {
    min-width: 0;
    padding: 3px 8px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(255,255,255,.085);
  }
  .stats-list .stat-row:last-child { border-right: 0; }
  .stats-list .score-name {
    max-width: 68px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #d9dfda;
    font-size: 9px;
    font-weight: 600;
  }
  .stats-list .stat-score {
    margin-top: 1px;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
  }
  .stats-list .stat-score.negative { color: #ff8f86; }

  .game-status-panel {
    right: 28px;
    min-height: 58px;
    padding: 0 12px;
  }
  .game-status-panel .status-item { padding: 0 12px; gap: 7px; }
  .game-status-panel .status-item .label {
    color: #d1d6cf;
    font-size: 11px;
    font-weight: 600;
  }
  .game-status-panel .status-item .value {
    color: #fff;
    font-size: 14px;
    font-weight: 850;
  }
  #turnIndicator.my-turn #currentPlayerName {
    color: #65f4a3;
    text-shadow: 0 0 12px rgba(64,255,145,.32);
  }
  .game-status-panel .divider {
    width: 1px;
    height: 34px;
    background: linear-gradient(transparent, rgba(225,193,116,.48), transparent);
  }

  .game-board {
    top: 0;
    background:
      radial-gradient(ellipse at center, rgba(18,126,83,.36), transparent 56%),
      radial-gradient(circle at 12% 18%, rgba(255,255,255,.035), transparent 20%),
      radial-gradient(circle at 89% 72%, rgba(0,0,0,.10), transparent 24%),
      repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
      linear-gradient(150deg, #08734d 0%, #075e42 43%, #04482f 100%);
    box-shadow:
      inset 0 0 0 18px #5b3218,
      inset 0 0 0 21px #ae7238,
      inset 0 0 0 24px #2b160a,
      inset 0 0 85px rgba(0,0,0,.38);
  }

  .game-board::before,
  .game-board::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 3;
  }
  .game-board::before {
    inset: 26px;
    border: 1px solid rgba(227,186,89,.35);
    border-radius: 14px;
    box-shadow: inset 0 0 28px rgba(0,0,0,.14);
  }
  .game-board::after {
    inset: 34px;
    border: 1px solid rgba(255,255,255,.035);
    border-radius: 12px;
  }

  .table-center {
    top: 43%;
    width: min(965px, 62vw);
    height: min(535px, 56vh);
    border: 2px solid rgba(214,170,72,.70);
    border-radius: 12px;
    background:
      radial-gradient(circle at 50% 46%, rgba(26,149,98,.36), rgba(7,100,66,.28) 38%, rgba(4,78,52,.64) 100%),
      repeating-linear-gradient(45deg, rgba(255,255,255,.009) 0 1px, transparent 1px 4px);
    box-shadow:
      0 16px 36px rgba(0,0,0,.27),
      inset 0 0 0 1px rgba(255,235,173,.15),
      inset 0 0 55px rgba(0,0,0,.16);
  }
  .table-center::before {
    inset: 10px;
    border: 1px solid rgba(221,178,78,.56);
    border-radius: 8px;
    box-shadow:
      inset 0 0 0 3px rgba(3,45,31,.45),
      0 0 12px rgba(217,175,72,.06);
  }
  .table-center::after {
    content: '♣';
    position: absolute;
    left: 50%;
    top: 13%;
    transform: translateX(-50%);
    color: rgba(0,48,33,.30);
    font-size: 72px;
    font-weight: 900;
    pointer-events: none;
  }

  .center-content {
    gap: 35px;
    top: 49%;
  }
  .pile-section,.indicator-section,.discard-section { gap: 8px; }
  .area-label,.slot-label {
    color: rgba(248,241,218,.92);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .055em;
    text-shadow: 0 1px 3px rgba(0,0,0,.7);
  }
  .indicator-section { gap: 14px; }
  .indicator-slot { gap: 6px; }
  .tile-placeholder {
    width: 58px;
    height: 80px;
    border-radius: 8px;
    border: 1px solid rgba(220,190,119,.40);
    background: rgba(7,60,42,.48);
    box-shadow: inset 0 0 13px rgba(0,0,0,.16), 0 5px 10px rgba(0,0,0,.18);
  }
  .tile-placeholder .mini-tile-inner {
    border-radius: 7px;
    font-size: 30px;
    background: linear-gradient(145deg,#fffef7,#ece6d7);
    box-shadow: inset 0 1px 0 #fff, 0 3px 7px rgba(0,0,0,.25);
  }

  .pile-stack { width: 64px; height: 84px; }
  .pile-tile-back,
  .opponent-tile-back {
    background:
      linear-gradient(90deg, rgba(255,255,255,.055), transparent 24% 76%, rgba(0,0,0,.09)),
      repeating-linear-gradient(90deg,#9f5e30 0 3px,#b77741 3px 6px,#8a4c27 6px 9px);
    border: 2px solid #5e321a;
    box-shadow:
      inset 0 0 0 2px rgba(230,175,105,.32),
      inset 0 0 0 5px rgba(80,39,18,.22),
      2px 4px 7px rgba(0,0,0,.35);
  }
  .pile-tile-back { width: 58px; height: 80px; border-radius: 7px; }
  .pile-tile-back:nth-child(2){left:3px;top:3px}.pile-tile-back:nth-child(3){left:6px;top:6px}
  .pile-count-badge {
    right: -10px;
    top: -10px;
    width: 30px;
    height: 30px;
    border: 2px solid #ffe6d9;
    background: linear-gradient(#f54537,#bd1d17);
    font-size: 12px;
    box-shadow: 0 3px 8px rgba(0,0,0,.35);
  }
  .discard-stack {
    width: 82px;
    height: 100px;
    border: 1px dashed rgba(245,226,169,.48);
    border-radius: 9px;
    background: rgba(0,58,40,.18);
  }
  .discard-placeholder {
    max-width: 62px;
    color: rgba(239,235,216,.66);
    font-size: 9px;
    line-height: 1.35;
    text-align: center;
  }
  .discard-placeholder::before {
    content: 'Atılan taşlar';
    display: block;
    margin-bottom: 2px;
  }

  .opponent-area { z-index: 25; }
  .opponent-area.top { top: 88px; gap: 6px; }
  .opponent-area.left { left: 47px; }
  .opponent-area.right { right: 47px; }
  .opponent-hand { filter: drop-shadow(0 5px 8px rgba(0,0,0,.34)); }
  .opponent-tile-back {
    width: 43px;
    height: 61px;
    border-radius: 6px;
    margin-left: -13px;
  }
  .opponent-tile-back.vertical { margin-top: -20px; margin-left: 0; }

  .player-info {
    min-width: 145px;
    min-height: 52px;
    gap: 9px;
    padding: 6px 10px;
    border: 1px solid rgba(219,176,80,.60);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(4,28,25,.96), rgba(3,18,17,.96));
    color: #fff;
    box-shadow: 0 7px 19px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.045);
  }
  .avatar-wrapper { width: 39px; height: 39px; }
  .player-avatar {
    width: 39px;
    height: 39px;
    border: 2px solid rgba(255,255,255,.75);
    border-radius: 7px;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
  }
  .turn-badge {
    right: -4px;
    bottom: -4px;
    width: 11px;
    height: 11px;
    border: 2px solid #10251d;
    background: #6c756f;
  }
  .current-turn {
    border-color: #9aff70 !important;
    box-shadow:
      0 0 0 1px rgba(123,255,100,.38),
      0 0 19px rgba(84,255,117,.38),
      0 8px 20px rgba(0,0,0,.34) !important;
  }
  .current-turn .turn-badge {
    background: #66ff88;
    box-shadow: 0 0 8px rgba(73,255,111,.75);
  }
  .player-name {
    max-width: 100px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
  }
  .player-score,.tile-count-badge {
    color: #aeb9b1;
    font-size: 10px;
  }

  .player-area.bottom {
    width: min(1110px, 86vw);
    height: 248px;
    bottom: 18px;
  }
  .cue-container {
    width: min(990px, 74vw);
    height: 204px;
    bottom: 0;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,.36));
  }
  .cue-wood {
    inset: 0;
    padding: 13px 23px 10px;
    border: 3px solid #5b2d12;
    border-bottom-width: 5px;
    border-radius: 20px 20px 11px 11px;
    background-image:
      linear-gradient(rgba(121,55,18,.12),rgba(62,27,8,.16)),
      url('../asset/istaka.jpg');
    background-size: 100% 100%;
    background-position: center;
    box-shadow:
      inset 0 2px 0 rgba(255,220,164,.55),
      inset 0 -8px 16px rgba(45,18,5,.36),
      0 0 0 2px rgba(201,130,61,.34),
      0 10px 26px rgba(0,0,0,.35);
  }
  .cue-wood::before {
    content:'';
    position:absolute;
    left:18px;
    right:18px;
    top:92px;
    height:4px;
    border-radius:999px;
    background:linear-gradient(180deg,#5a2d12,#bd7835 55%,#5b2b10);
    box-shadow:0 2px 4px rgba(0,0,0,.42);
    pointer-events:none;
  }
  .cue-wood::after {
    inset: 8px;
    border: 1px solid rgba(255,206,125,.24);
    border-bottom: 1px solid rgba(57,22,6,.45);
    border-radius: 13px 13px 7px 7px;
  }
  .cue-row {
    min-height: 78px;
    justify-content: center;
    align-items: flex-end;
  }
  .cue-row.top-row { padding-right: 44px; }
  .cue-row.bottom-row { padding-left: 44px; margin-top: -4px; }
  .cue-row .tile-sprite {
    border-radius: 7px;
    border: 1px solid rgba(86,57,21,.45);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.82),
      0 4px 6px rgba(0,0,0,.28);
    filter: none;
  }
  .cue-row .tile-sprite:hover { transform: translateY(-7px); }
  .cue-row .tile-sprite.selected {
    transform: translateY(-11px);
    outline: 2px solid #f6ce67;
    box-shadow: 0 0 15px rgba(255,211,100,.42), 0 6px 8px rgba(0,0,0,.32);
  }
  .cue-row .tile-sprite.okey {
    outline: 2px solid #ffcf54;
    box-shadow: 0 0 0 1px rgba(255,217,104,.3), 0 0 14px rgba(255,197,66,.35);
  }

  .player-area.bottom > .player-info {
    bottom: 196px;
    min-width: 190px;
    z-index: 34;
    border-color: rgba(156,255,108,.75);
  }

  .player-discard {
    bottom: 66px;
    width: 110px;
  }
  .left-discard { left: -24px; }
  .right-discard { right: -24px; }
  .discard-label {
    color: rgba(248,240,215,.90);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
    text-shadow:0 1px 2px rgba(0,0,0,.7);
  }

  .action-buttons {
    right: 27px;
    bottom: 27px;
    gap: 8px;
  }
  .action-btn {
    min-height: 43px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid rgba(227,187,93,.38);
    background: linear-gradient(180deg, rgba(12,48,39,.96), rgba(5,28,24,.97));
    color: #f6f1df;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 6px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.055);
  }
  .action-btn:hover:not(:disabled) {
    border-color: rgba(102,239,168,.70);
    background: linear-gradient(180deg,#17684f,#0d4436);
    transform: translateY(-1px);
  }
  .action-btn.open-hand,
  .action-btn.pair-open {
    background: linear-gradient(180deg, rgba(13,70,54,.98), rgba(6,43,34,.98));
    border-color: rgba(88,207,153,.55);
    color: #edfff7;
  }
  .action-btn.finish {
    background: linear-gradient(180deg,#6d5726,#493713);
    border-color: rgba(231,188,83,.62);
    color:#fff2c2;
  }
  .action-btn:disabled { opacity: .42; filter: saturate(.55); }

  .tomato-btn {
    left: 27px;
    bottom: 27px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(227,185,91,.42);
    background: linear-gradient(180deg, rgba(6,35,30,.98), rgba(4,22,19,.98));
    box-shadow: 0 7px 16px rgba(0,0,0,.3);
  }
  .tomato-counter { border-color:#183327; }

  .opened-tiles-panel {
    left: 28px;
    top: 112px;
    width: 230px;
    background: linear-gradient(180deg, rgba(6,34,29,.98), rgba(3,23,20,.98));
    color: #f3eee0;
    border: 1px solid rgba(222,182,88,.45);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
  }
  .opened-tiles-panel h4 { color:#e8d9aa; }
  .opened-group { border-bottom-color:rgba(255,255,255,.08); }
}

/* v10.8.3 - premium waiting room and result modal */
body.game-page .lobby-overlay{
  padding:24px;
  background:
    radial-gradient(circle at 20% 18%, rgba(47,170,121,.18), transparent 28%),
    radial-gradient(circle at 82% 80%, rgba(202,170,85,.14), transparent 30%),
    rgba(2,18,15,.74);
  backdrop-filter: blur(8px);
}
body.game-page .premium-lobby{
  width:min(860px, calc(100vw - 42px));
  padding:28px;
  border-radius:26px;
  color:#f1ead7;
  border:1px solid rgba(214,187,103,.28);
  background:
    linear-gradient(180deg, rgba(6,39,32,.98), rgba(4,26,23,.985)),
    linear-gradient(145deg, rgba(255,255,255,.04), transparent 28%);
  box-shadow:0 28px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}
body.game-page .lobby-kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(214,187,103,.12);border:1px solid rgba(214,187,103,.24);color:#dfc67d;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
body.game-page .lobby-header h1{margin:14px 0 4px;font-size:36px;line-height:1.05;color:#fff2cf}
body.game-page .lobby-header p{margin:0;color:#a3b7af;font-size:15px;line-height:1.6;max-width:62ch}
body.game-page .lobby-summary-grid{display:grid;grid-template-columns:minmax(240px, 310px) 1fr;gap:16px;margin-top:22px}
body.game-page .lobby-room-code, body.game-page .lobby-meta-panel{border-radius:22px;border:1px solid rgba(214,187,103,.18);background:linear-gradient(180deg, rgba(9,53,44,.96), rgba(5,34,29,.98));box-shadow: inset 0 1px 0 rgba(255,255,255,.05)}
body.game-page .lobby-room-code{padding:20px 18px;text-align:left}
body.game-page .lobby-room-code-label{font-size:11px;color:#8fb39f;letter-spacing:.18em;text-transform:uppercase}
body.game-page .lobby-room-code-value{margin:12px 0 14px;font-size:42px;line-height:1;font-weight:900;letter-spacing:.16em;color:#fff4d7;text-shadow:0 6px 16px rgba(0,0,0,.18)}
body.game-page .lobby-room-code-actions{display:flex;flex-wrap:wrap;gap:10px}
body.game-page .lobby-room-code-copy{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 15px;border-radius:14px;border:1px solid rgba(214,187,103,.2);background:rgba(255,255,255,.05);color:#f5edd7;font-size:13px;font-weight:800}
body.game-page .lobby-room-code-copy.alt{background:rgba(79,174,138,.1);border-color:rgba(79,174,138,.22);color:#d4f8eb}
body.game-page .lobby-meta-panel{padding:18px}
body.game-page .lobby-meta-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
body.game-page .lobby-meta-head strong{font-size:18px;color:#fff3d5}
body.game-page .lobby-players-count{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.06);color:#d8e3df;font-size:12px;font-weight:800}
body.game-page .lobby-chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
body.game-page .lobby-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#e8f2ed;font-size:12px;font-weight:700}
body.game-page .lobby-meta-note{margin-top:16px;padding:12px 14px;border-radius:15px;background:rgba(214,187,103,.07);border:1px solid rgba(214,187,103,.14);color:#cfddcf;font-size:13px;line-height:1.55}
body.game-page .lobby-players-premium{margin-top:18px;padding:18px;border-radius:22px;border:1px solid rgba(214,187,103,.16);background:linear-gradient(180deg, rgba(8,46,39,.96), rgba(5,30,26,.98))}
body.game-page .lobby-section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
body.game-page .lobby-section-head h3{margin:0;font-size:22px;color:#fff3d7}
body.game-page .lobby-inline-note{color:#8cb3a6;font-size:12px}
body.game-page .lobby-players-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:14px}
body.game-page .lobby-player-slot{min-height:152px;padding:16px;border-radius:20px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));display:flex;flex-direction:column;justify-content:space-between;gap:10px;color:#d9e3de}
body.game-page .lobby-player-slot.empty{background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012));border-style:dashed;color:#89a098}
body.game-page .lobby-seat-line{display:flex;align-items:center;gap:8px;color:#9eb4ab;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
body.game-page .lobby-player-core{display:flex;align-items:center;gap:12px}
body.game-page .lobby-avatar{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg, rgba(214,187,103,.18), rgba(56,161,121,.18));border:1px solid rgba(214,187,103,.24);font-weight:900;font-size:24px;color:#fff4d0}
body.game-page .lobby-avatar img{width:100%;height:100%;object-fit:cover;display:block}
body.game-page .lobby-player-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
body.game-page .lobby-player-copy .player-name{font-size:18px;font-weight:900;color:#fff4d8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.game-page .lobby-player-copy .player-status{font-size:13px;color:#98b1a8}
body.game-page .lobby-player-flags{display:flex;flex-wrap:wrap;gap:8px}
body.game-page .lobby-flag{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800}
body.game-page .lobby-flag.self{background:rgba(107,255,170,.14);border:1px solid rgba(107,255,170,.28);color:#aef0c4}
body.game-page .lobby-flag.host{background:rgba(214,187,103,.14);border:1px solid rgba(214,187,103,.28);color:#f3dea1}
body.game-page .lobby-flag.bot{background:rgba(138,161,255,.14);border:1px solid rgba(138,161,255,.25);color:#d6ddff}
body.game-page .lobby-flag.team{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#f0f5f1}
body.game-page .lobby-player-slot.filled{border-color:rgba(214,187,103,.17)}
body.game-page .lobby-player-slot.team1{background:linear-gradient(180deg, rgba(40,111,196,.18), rgba(255,255,255,.03))}
body.game-page .lobby-player-slot.team2{background:linear-gradient(180deg, rgba(196,83,83,.16), rgba(255,255,255,.03))}
body.game-page .lobby-player-slot.filled.self-seat{box-shadow:0 0 0 1px rgba(79,174,138,.34) inset, 0 0 0 3px rgba(79,174,138,.12)}
body.game-page .lobby-waiting-panel{display:flex;align-items:center;gap:14px;margin-top:18px;padding:16px 18px;border-radius:18px;background:rgba(2,19,16,.5);border:1px solid rgba(255,255,255,.06)}
body.game-page .lobby-waiting-copy{display:flex;flex-direction:column;gap:3px}
body.game-page .lobby-waiting-copy strong{font-size:16px;color:#fff3d3}
body.game-page .lobby-waiting-copy span{font-size:13px;color:#99b0a8}
body.game-page .spinner{width:22px;height:22px;border-width:3px;border-color:rgba(255,255,255,.15);border-top-color:#ddb75c}
body.game-page .lobby-footer-actions{display:flex;justify-content:flex-end;margin-top:16px}
body.game-page .lobby-leave-btn{width:auto;min-width:168px;margin-top:0;padding:12px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);color:#f3ebe0;font-size:13px;font-weight:800}

body.game-page .result-modal-content{
  width:min(760px, 92vw);
  padding:26px;
  color:#f4eedf;
  border-radius:24px;
  border:1px solid rgba(214,187,103,.28);
  background:linear-gradient(180deg, rgba(7,41,34,.985), rgba(4,24,21,.99));
  box-shadow:0 24px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}
body.game-page .result-modal-header{display:flex;flex-direction:column;gap:10px}
body.game-page .result-badge{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;padding:8px 13px;border-radius:999px;background:rgba(214,187,103,.12);border:1px solid rgba(214,187,103,.24);color:#e1c981;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
body.game-page .result-modal-content h2{font-size:34px;line-height:1.08;color:#fff2ce;margin:0}
body.game-page .result-subtext{margin:0;color:#9fb4ac;font-size:15px;line-height:1.55}
body.game-page .result-reward{margin-top:16px;padding:14px 16px;border-radius:18px;background:rgba(79,174,138,.1);border:1px solid rgba(79,174,138,.24);color:#ddf8ee;font-size:14px;line-height:1.5}
body.game-page .result-reward.negative{background:rgba(196,74,74,.12);border-color:rgba(196,74,74,.24);color:#ffd9d9}
body.game-page .final-scores.premium{margin:20px 0 0;padding:0;border:none;background:none}
body.game-page .result-score-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:14px}
body.game-page .result-score-card{display:flex;align-items:center;gap:13px;padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025))}
body.game-page .result-score-card.winner{border-color:rgba(214,187,103,.35);box-shadow:0 0 0 1px rgba(214,187,103,.16) inset}
body.game-page .result-score-card.self{box-shadow:0 0 0 1px rgba(79,174,138,.28) inset}
body.game-page .result-score-avatar{width:52px;height:52px;border-radius:16px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg, rgba(214,187,103,.18), rgba(56,161,121,.18));border:1px solid rgba(214,187,103,.24);color:#fff3d2;font-size:20px;font-weight:900;flex:0 0 auto}
body.game-page .result-score-avatar img{width:100%;height:100%;object-fit:cover;display:block}
body.game-page .result-score-copy{min-width:0;display:flex;flex-direction:column;gap:4px;flex:1}
body.game-page .result-score-copy strong{font-size:17px;color:#fff4d9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.game-page .result-score-copy small{font-size:12px;color:#96aea5}
body.game-page .result-score-value{margin-left:auto;font-size:26px;font-weight:900}
body.game-page .result-score-value.positive{color:#78e5aa}
body.game-page .result-score-value.negative{color:#ff8787}
body.game-page .team-summary{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:14px}
body.game-page .team-score-card{padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02))}
body.game-page .team-score-card.winner{border-color:rgba(214,187,103,.35);box-shadow:0 0 0 1px rgba(214,187,103,.16) inset}
body.game-page .team-score-card strong{display:block;font-size:18px;color:#fff1d0}
body.game-page .team-score-card span{display:block;margin-top:10px;font-size:30px;font-weight:900}
body.game-page .team-score-card .positive{color:#78e5aa}
body.game-page .team-score-card .negative{color:#ff8787}
body.game-page .team-score-card .team-lineup{margin-top:10px;color:#93a8a0;font-size:12px;line-height:1.5}
body.game-page .result-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:22px}
body.game-page .result-actions .btn{min-width:156px;border-radius:14px;padding:12px 18px;font-size:13px}
body.game-page .result-actions .btn-secondary{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12);color:#efe7db}
body.game-page .result-actions .btn-primary{background:linear-gradient(180deg,#3cc38d,#17895d);border-color:#106746}

@media (max-width: 880px){
  body.game-page .premium-lobby{width:min(94vw, 700px)}
  body.game-page .lobby-summary-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  body.game-page .lobby-players-grid, body.game-page .result-score-grid, body.game-page .team-summary{grid-template-columns:1fr}
  body.game-page .lobby-header h1{font-size:30px}
  body.game-page .result-modal-content h2{font-size:28px}
  body.game-page .result-actions{flex-direction:column-reverse}
  body.game-page .result-actions .btn{width:100%}
}