:root{--green:#006233;--yellow:#ffc400;--red:#d01c1f;--brown:#533820;--cream:#f5dfb6;--dark:#24160c;--card:#fff7e8;--muted:#78644c;--shadow:0 22px 60px rgba(36,22,12,.26)}*{box-sizing:border-box}html{direction:rtl}body{margin:0;font-family:Tajawal,Arial,sans-serif;background:radial-gradient(circle at top,#f9e7bf 0,#d5b77d 45%,#5b3a21 100%);color:var(--dark);min-height:100vh}a{text-decoration:none;color:inherit}button,input,select{font-family:inherit}.page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px}.phone{width:min(430px,100%);min-height:760px;background:linear-gradient(180deg,#fff4d8,#c8a36c);border:7px solid #17110b;border-radius:42px;box-shadow:var(--shadow);overflow:hidden;position:relative}.notch{width:96px;height:24px;background:#111;border-radius:0 0 18px 18px;margin:0 auto;position:relative;z-index:3}.hero{padding:28px 24px 95px;text-align:center;background:linear-gradient(180deg,rgba(0,98,51,.94),rgba(208,28,31,.8)),url('../img/reference/3a0869f7-3dfd-46fb-ab5a-1d939c969a14.png');background-size:cover;background-position:center;min-height:330px;color:#fff}.logo{display:inline-flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--yellow);padding:8px 18px;border-radius:22px;color:var(--green);font-weight:900;font-size:34px;box-shadow:0 8px 0 rgba(0,0,0,.17)}.logo small{color:var(--red);font-size:15px}.hero h1{font-size:32px;margin:32px 0 8px}.hero p{line-height:1.8;margin:0;color:#fff8da}.panel{background:rgba(255,247,232,.95);margin:-54px 18px 90px;border-radius:28px;padding:18px;box-shadow:0 12px 25px rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.6)}.grid{display:grid;gap:12px}.btn{border:0;border-radius:18px;padding:14px 18px;font-weight:900;font-size:17px;cursor:pointer;box-shadow:inset 0 -4px 0 rgba(0,0,0,.14),0 7px 14px rgba(0,0,0,.14)}.btn-primary{background:linear-gradient(180deg,#fff06a,var(--yellow));color:#3d2b0b}.btn-green{background:linear-gradient(180deg,#40d13d,var(--green));color:#fff}.btn-red{background:linear-gradient(180deg,#ff4b4b,var(--red));color:#fff}.btn-dark{background:linear-gradient(180deg,#6b4a2c,#2c1b10);color:#fff}.btn-muted{background:#eee0c8;color:#3c2a18}.field{width:100%;border:2px solid #dfc38e;border-radius:16px;background:#fffaf0;padding:13px 14px;font-size:16px;outline:none}.field:focus{border-color:var(--green)}.topbar{height:78px;background:linear-gradient(180deg,#4d2e1b,#2a170b);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:5px solid var(--yellow)}.topbar .title{font-size:23px;font-weight:900}.coins{background:#fff3c1;color:#4a3109;border-radius:999px;padding:7px 12px;font-weight:900;border:2px solid var(--yellow)}.content{padding:16px 16px 96px}.bottom-nav{position:absolute;bottom:0;left:0;right:0;height:78px;background:linear-gradient(180deg,#5d3c23,#28170d);display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:8px 8px 10px;border-top:3px solid rgba(255,255,255,.18)}.bottom-nav a{color:#e6d2b3;text-align:center;font-size:12px;font-weight:800;border-radius:14px;padding:7px 2px}.bottom-nav a.active{background:#fff6dd;color:var(--green)}.bottom-nav b{display:block;font-size:20px;margin-bottom:3px}.room-card,.admin-card,.lesson-card{background:linear-gradient(180deg,#fffaf0,#ead2a2);border:2px solid #fff;border-radius:22px;padding:14px;box-shadow:0 9px 18px rgba(0,0,0,.13);margin-bottom:12px}.room-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.badge{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #dec28e;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900;color:#4d341b}.tabs{display:flex;gap:8px;background:#563820;padding:8px;border-radius:20px;margin-bottom:14px}.tabs a,.tabs button{flex:1;border:0;border-radius:15px;background:transparent;color:#e4d4b8;padding:10px;font-weight:900}.tabs .active{background:#fff;color:var(--green)}.table-scene{height:470px;background:linear-gradient(180deg,#e0c18b,#b88751);border-radius:28px;position:relative;overflow:hidden;border:4px solid #46301d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}.table-scene:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(90,60,25,.2) 1px,transparent 1px),linear-gradient(rgba(90,60,25,.2) 1px,transparent 1px);background-size:36px 36px;transform:perspective(500px) rotateX(18deg) scale(1.2);transform-origin:top center}.seat{position:absolute;width:92px;text-align:center;z-index:2}.seat.top{top:18px;right:50%;transform:translateX(50%)}.seat.left{top:130px;left:12px}.seat.right{top:130px;right:12px}.seat.me{bottom:104px;right:50%;transform:translateX(50%)}.avatar{width:52px;height:52px;margin:auto;border-radius:50%;background:#fff;border:3px solid #e8f7f0;box-shadow:0 4px 8px rgba(0,0,0,.2)}.seat-name{background:linear-gradient(180deg,#e8ffff,#8fc3c7);border:2px solid #31575a;border-radius:10px;padding:4px;font-size:11px;font-weight:900}.played{position:absolute;z-index:3;top:205px;right:50%;transform:translateX(50%);display:flex;gap:8px;align-items:center;justify-content:center}.card{width:49px;height:70px;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;flex-direction:column;font-weight:900;font-size:18px}.card.red{color:#c71020}.hand{position:absolute;left:8px;right:8px;bottom:12px;z-index:5;display:flex;justify-content:center;gap:4px}.hand .card{cursor:pointer;transition:.15s;transform:translateY(0) rotate(var(--r,0deg));margin-inline:-5px}.hand .card:hover{transform:translateY(-16px)}.game-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}.status-line{background:#fff6dd;border-radius:16px;padding:10px;margin:10px 0;font-weight:900;text-align:center}.tutorial-card{min-height:620px;background:#f8f8f8;border-radius:26px;padding:20px;box-shadow:0 9px 20px rgba(0,0,0,.12);margin-bottom:14px}.tutorial-card h2{color:var(--red);margin:0 0 12px}.mini-cards{display:flex;direction:ltr;justify-content:center;gap:3px;margin:14px 0 30px}.mini-cards .card{width:38px;height:56px;font-size:14px}.admin-shell{width:min(1180px,100%);background:#fff7e8;border-radius:26px;box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-columns:240px 1fr;min-height:760px}.sidebar{background:linear-gradient(180deg,#2b190d,#006233);color:#fff;padding:20px}.sidebar a{display:block;padding:13px;border-radius:14px;margin:6px 0;font-weight:900}.sidebar a.active,.sidebar a:hover{background:#fff;color:var(--green)}.admin-main{padding:22px;overflow:auto}.admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.table-wrap{overflow:auto;background:#fff;border-radius:18px;border:1px solid #ead2a2}table{width:100%;border-collapse:collapse;min-width:760px}th,td{border-bottom:1px solid #ead2a2;padding:10px;text-align:right;font-size:14px}th{background:#f3deb0}td input,td select{width:120px;border:1px solid #d7bd87;border-radius:10px;padding:8px;background:#fffaf0}.alert{padding:12px;border-radius:14px;background:#fff0c8;border:1px solid #e9bf4e;margin:10px 0;font-weight:800}.hidden{display:none!important}@media(max-width:760px){.admin-shell{grid-template-columns:1fr}.sidebar{display:flex;overflow:auto;gap:8px}.sidebar a{white-space:nowrap}.admin-grid{grid-template-columns:1fr 1fr}.page{padding:0}.phone{min-height:100vh;border-radius:0;border:0;width:100%}}

.bot-seat .avatar{background:linear-gradient(180deg,#ffffff,#d8fff0);border-color:var(--yellow)}.bot-seat .seat-name{background:linear-gradient(180deg,#fff8ca,#ffc400);color:#3f2b08}.my-seat .seat-name{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,98,51,.25)}.take-seat{margin-top:4px;border:0;border-radius:999px;background:linear-gradient(180deg,#40d13d,var(--green));color:#fff;font-weight:900;font-size:10px;padding:5px 8px;box-shadow:0 3px 7px rgba(0,0,0,.2);cursor:pointer}
.turn-seat .avatar{box-shadow:0 0 0 5px rgba(255,196,0,.55),0 4px 8px rgba(0,0,0,.2)}
.turn-seat .seat-name{background:linear-gradient(180deg,#fff9c9,#ffc400);border-color:#8a6100;color:#332100}
.bid-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0;background:#fff6dd;border:1px solid #e4c387;border-radius:18px;padding:10px}
.bid-actions .bid-title{grid-column:1/-1;text-align:center;font-weight:900;color:#4d341b;background:#fff;border-radius:12px;padding:8px}
.card em{font-style:normal;font-size:9px;color:inherit;opacity:.75;margin-top:2px}.disabled-card{opacity:.82;cursor:not-allowed}.disabled-card:hover{transform:rotate(var(--r,0deg))}.hand-hint{position:absolute;bottom:82px;right:50%;transform:translateX(50%);background:#fff6dd;border:1px solid #dfc38e;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:900;white-space:nowrap}.bid-log{background:#fff4c2;border-color:#ffc400}.game-actions .btn:disabled{opacity:.65;cursor:not-allowed}

/* Totato lobby and room production polish */
.game-phone{background:linear-gradient(180deg,#f8e2b6,#c4995f 52%,#6d4727);}
.game-top{height:62px;background:linear-gradient(180deg,#3b2414,#201107);color:#fff;display:grid;grid-template-columns:70px 1fr 70px;align-items:center;gap:6px;padding:10px 12px;border-bottom:4px solid var(--yellow)}
.game-top .title{text-align:center;font-size:18px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-icon{border:0;background:#fff6dd;color:#3b2414;border-radius:14px;padding:9px 6px;font-size:12px;font-weight:900;text-align:center;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}.game-content{padding:10px 10px 18px}.compact{margin:0 0 8px;padding:7px}.score-board{display:grid;grid-template-columns:1fr 1fr;gap:8px}.score-board div{background:linear-gradient(180deg,#fff,#ffe8a6);border:1px solid #dec28e;border-radius:13px;padding:5px}.score-board span{display:block;font-size:12px;color:#684720}.score-board b{font-size:24px;color:var(--green)}.table-scene{height:540px;background:radial-gradient(circle at center,#b52a23 0 18%,#1f6b42 19% 34%,#d7ad65 35% 100%);border-radius:24px;border:5px solid #3a2414;box-shadow:inset 0 0 0 9px rgba(255,255,255,.09),0 10px 23px rgba(0,0,0,.22)}.table-scene:before{background:linear-gradient(45deg,rgba(255,255,255,.12) 25%,transparent 25% 50%,rgba(255,255,255,.12) 50% 75%,transparent 75%);background-size:42px 42px;transform:perspective(650px) rotateX(16deg) scale(1.18);opacity:.55}.judge-banner{position:absolute;z-index:6;top:8px;right:50%;transform:translateX(50%);min-width:170px;text-align:center;background:linear-gradient(180deg,#fff8d8,#ffc400);border:2px solid #fff;border-radius:999px;padding:6px 14px;box-shadow:0 5px 11px rgba(0,0,0,.25);color:#3a260d}.judge-banner span{display:block;font-size:10px;font-weight:900}.judge-banner b{display:block;font-size:18px;color:var(--green)}.seat{width:96px}.seat.top{top:54px}.seat.left{top:210px;left:8px}.seat.right{top:210px;right:8px}.seat.me{bottom:122px}.seat small{display:block;font-size:9px}.avatar{background:linear-gradient(180deg,#fefefe,#d5d5d5),url('../img/cards/back.png');background-size:cover}.seat-backs{height:52px;position:relative;margin:0 auto 3px;width:78px}.seat-backs img{position:absolute;width:34px;height:48px;right:22px;top:2px;transform:rotate(var(--r));transform-origin:bottom center;filter:drop-shadow(0 2px 3px rgba(0,0,0,.32))}.seat-backs em{position:absolute;left:0;bottom:0;background:#fff;border:2px solid var(--yellow);color:#3b2414;border-radius:50%;width:24px;height:24px;line-height:20px;font-style:normal;font-weight:900;font-size:12px}.played{top:240px;min-width:190px;min-height:96px;background:rgba(255,245,214,.22);border:1px solid rgba(255,255,255,.33);border-radius:20px;padding:12px}.empty-played{color:#fff;font-weight:900;text-shadow:0 2px 3px rgba(0,0,0,.4)}.game-card-img{width:54px;height:76px;border:0;background:transparent;padding:0;position:relative;filter:drop-shadow(0 5px 5px rgba(0,0,0,.26));cursor:pointer}.game-card-img img{width:100%;height:100%;display:block}.game-card-img b,.game-card-img span{display:none}.fallback-card{background:#fff;border:1px solid #ddd;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-direction:column}.fallback-card b,.fallback-card span{display:block;font-size:18px}.fallback-card.red{color:#c51622}.hand{bottom:14px;gap:0}.hand-card{width:54px;height:78px;margin-inline:-8px;transition:.16s;transform:translateY(0) rotate(var(--r,0deg))}.hand-card:hover{transform:translateY(-17px) rotate(var(--r,0deg))}.disabled-card{cursor:not-allowed}.disabled-card:hover{transform:rotate(var(--r,0deg))}.game-actions{grid-template-columns:1fr 1fr 1fr;margin-top:8px}.game-actions .btn{padding:12px 8px;border-radius:14px;font-size:14px}.bid-actions{margin-top:8px;grid-template-columns:repeat(3,1fr);max-height:180px;overflow:auto}.bid-actions .btn{padding:10px 6px;border-radius:13px;font-size:13px}.moves-line{max-height:64px;overflow:auto;margin-bottom:0}.lobby-phone{background:linear-gradient(180deg,#fff4d8,#d7b36e)}.lobby-hero{background:linear-gradient(135deg,var(--green),#0c8d50);border:2px solid #fff;border-radius:24px;color:#fff;padding:14px;margin-bottom:12px;box-shadow:0 8px 18px rgba(0,0,0,.16)}.lobby-hero strong{display:block;font-size:20px}.lobby-hero small{display:block;line-height:1.7;color:#fff7d0}.create-room{background:linear-gradient(180deg,#fffbed,#ecd09b)}.rooms-list{display:grid;gap:10px}.lobby-room{margin-bottom:0;border-radius:24px;background:linear-gradient(180deg,#fffdf5,#efd49d);border:2px solid #fff;position:relative;overflow:hidden}.lobby-room:before{content:"";position:absolute;right:0;top:0;bottom:0;width:8px;background:linear-gradient(180deg,var(--green),var(--yellow),var(--red))}.lobby-room h3{margin:0;font-size:18px;color:#3b2414}.room-state{border-radius:999px;padding:6px 10px;font-weight:900;font-size:11px;background:#fff2bd;color:#3b2414;border:1px solid #d8bb77}.room-state.playing{background:#dff8e8;color:var(--green)}.room-meta{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0}.room-owner{font-size:12px;font-weight:900;color:#6c4a28;margin:8px 0}.room-actions{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:7px}.room-actions .btn{font-size:12px;padding:10px 4px;border-radius:13px;text-align:center}.hand-hint{bottom:96px}.btn.hidden + .btn{grid-column:auto}
/* تحديث غرفة توتاتو: طاولة أوضح، أوراق حقيقية، أزرار غرفة، وحساب العد */
.game-phone{background:linear-gradient(180deg,#f8e2b6,#c4995f 52%,#6d4727)}
.game-content{padding:8px 9px 12px}.table-scene{height:610px;border-radius:24px;background:radial-gradient(ellipse at center,#d22121 0 17%,#057a40 18% 35%,#d5aa64 36% 100%);border:5px solid #2f1c10;overflow:hidden}.table-scene:after{content:"";position:absolute;inset:142px 92px 136px;border-radius:45%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.22);z-index:1}.judge-banner{top:10px;min-width:190px;padding:7px 16px}.judge-banner small{display:block;font-size:10px;color:#6c451c;font-weight:900}.seat{width:112px}.seat.top{top:72px}.seat.left{top:246px;left:7px}.seat.right{top:246px;right:7px}.seat.me{bottom:74px}.seat-name{border-radius:12px;padding:5px 4px;line-height:1.25}.seat-name strong{display:block;font-size:12px}.seat-name small{font-size:9px}.avatar{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fff,#d6d6d6)}.avatar span{font-size:22px}.turn-seat:before{content:"دورك";position:absolute;right:50%;top:-18px;transform:translateX(50%);background:linear-gradient(180deg,#fff8c8,#ffc400);border:1px solid #8a6100;border-radius:999px;padding:3px 10px;font-size:10px;font-weight:900;color:#3b2414;z-index:10}.turn-seat .avatar{box-shadow:0 0 0 6px rgba(255,196,0,.62),0 5px 10px rgba(0,0,0,.25)}.seat-backs{height:48px;width:82px}.seat-backs img{width:32px;height:45px}.seat-backs em{left:3px;bottom:-2px;background:#fff8d8}.won-pile{position:absolute;z-index:7;display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.94);border:2px solid #ffc400;border-radius:999px;padding:2px 5px;box-shadow:0 3px 7px rgba(0,0,0,.18)}.won-pile img{width:24px;height:34px}.won-pile b{font-size:11px;color:#3b2414}.seat.top .won-pile{right:-5px;top:42px}.seat.left .won-pile{right:0;top:50px}.seat.right .won-pile{left:0;top:50px}.seat.me .won-pile{left:-6px;top:42px}.played{top:228px;right:50%;transform:translateX(50%);display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,90px);place-items:center;gap:0;min-width:218px;min-height:260px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:28px;padding:6px}.played.empty-played{display:flex;align-items:center;justify-content:center;min-height:120px;color:#fff}.played-card{position:relative;text-align:center}.played-card small{display:block;margin-top:-5px;background:rgba(255,255,255,.82);border-radius:999px;padding:1px 6px;font-size:9px;font-weight:900}.played-card.from-top{grid-column:2;grid-row:1}.played-card.from-right{grid-column:3;grid-row:2}.played-card.from-me{grid-column:2;grid-row:3}.played-card.from-left{grid-column:1;grid-row:2}.played-card.winner-card .game-card-img{filter:drop-shadow(0 0 7px #ffc400) drop-shadow(0 5px 5px rgba(0,0,0,.28))}.trick-winner{position:absolute;bottom:8px;right:50%;transform:translateX(50%);background:linear-gradient(180deg,#fff8c8,#ffc400);border-radius:999px;padding:5px 12px;font-size:11px;font-weight:900;box-shadow:0 4px 8px rgba(0,0,0,.22)}.game-card-img{width:58px;height:82px}.played .game-card-img{width:56px;height:79px}.hand{bottom:8px;left:5px;right:5px}.hand-card{width:59px;height:84px;margin-inline:-10px}.hand-card:hover{transform:translateY(-20px) rotate(var(--r,0deg))}.hand-hint{bottom:94px;background:linear-gradient(180deg,#fff9e8,#fff0b8)}.room-buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:9px}.room-buttons .btn{text-align:center;border-radius:15px;padding:11px 7px;font-size:13px}.bid-actions{margin-top:8px;background:#fff5dc;border:1px solid #d6b779;border-radius:18px;padding:8px;max-height:190px;overflow:auto}.bid-title{text-align:center;font-weight:900;font-size:13px;color:#543417}.bid-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:7px}.bid-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:8px}.bid-choice{border:0;border-radius:14px;background:linear-gradient(180deg,#ffffff,#ffeebc);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 2px 5px rgba(0,0,0,.12);padding:8px 5px;font-weight:900;color:#3b2414}.bid-choice span{display:block;font-size:24px;line-height:1}.bid-choice b{display:block;font-size:12px}.mini-log{position:absolute;right:50%;bottom:104px;transform:translateX(50%);z-index:7;background:rgba(36,22,12,.72);color:#fff;border-radius:999px;padding:5px 12px;max-width:310px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:900}.score-board div{position:relative}.score-board small{display:block;font-size:10px;color:#734b1d}.fallback-card{background:#fff;border:1px solid #ddd;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-direction:column}.fallback-card b,.fallback-card span{display:block}.game-actions,.moves-line{display:none!important}@media(max-width:450px){.table-scene{height:604px}.seat.left{left:2px}.seat.right{right:2px}.hand-card{width:56px;height:80px;margin-inline:-10px}.played{top:224px}.seat.me{bottom:75px}.game-content{padding-left:6px;padding-right:6px}}
.admin-settings-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px;background:#fff;border:1px solid #ead2a2;border-radius:18px;padding:14px;margin:10px 0 18px}.admin-settings-grid label{display:grid;gap:5px;font-weight:900;color:#4d3218}.admin-settings-grid input{width:100%;border:1px solid #d7bd87;border-radius:11px;padding:9px;background:#fffaf0}@media(max-width:900px){.admin-settings-grid{grid-template-columns:1fr 1fr}}
.turn-timer{position:absolute;z-index:8;top:-18px;right:50%;transform:translateX(50%);width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,#fff 0 50%,#ffc400 52% 100%);border:2px solid #006233;box-shadow:0 5px 12px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;gap:1px;color:#d01c1f;font-weight:900}.turn-timer b{font-size:17px;line-height:1}.turn-timer small{font-size:9px;color:#006233}.turn-seat{z-index:9}.turn-seat:after{content:"الدور";position:absolute;right:50%;top:18px;transform:translateX(50%);background:#006233;color:#fff;border:1px solid #ffc400;border-radius:999px;padding:3px 9px;font-size:10px;font-weight:900;box-shadow:0 3px 8px rgba(0,0,0,.22)}.game-card-img img{object-fit:contain}.played-card{transition:.22s}.played-card.from-me{margin-top:38px}.played-card.from-top{margin-top:-38px}.played-card.from-left{margin-left:34px}.played-card.from-right{margin-right:34px}.card-upload-note{background:#fff8d4;border:1px solid #f0ca4e;border-radius:16px;padding:10px;font-weight:800;line-height:1.8}

/* منع وميض الأوراق أثناء تحديث حالة الغرفة */
.game-card-img,
.game-card-img img,
.seat-backs img,
.won-pile img{
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transform:translateZ(0);
}
.game-card-img img,
.seat-backs img,
.won-pile img{
  image-rendering:auto;
  opacity:1!important;
}

/* تحديث مؤشر الدور وتناسب شاشة الجوال */
body:has(.game-phone){background:#1d1209;overflow:hidden}.page:has(.game-phone){padding:0;align-items:stretch}.game-phone{width:min(430px,100vw);height:100vh;min-height:0;border:0;border-radius:0;display:flex;flex-direction:column;overflow:hidden}.game-phone .notch{height:18px;min-height:18px}.game-top{height:50px;min-height:50px;padding:7px 9px;grid-template-columns:62px 1fr 62px}.game-top .title{font-size:15px}.top-icon{padding:7px 5px;border-radius:11px;font-size:11px}.game-content{flex:1;display:flex;flex-direction:column;padding:5px 6px 6px;overflow:hidden}.compact{margin:0 0 4px;padding:4px;border-radius:12px}.score-board{gap:5px}.score-board div{padding:3px}.score-board span{font-size:10px}.score-board b{font-size:18px}.score-board small{font-size:8px}.status-line>small{font-size:10px;line-height:1.3}.table-scene{height:auto!important;flex:1;min-height:0;border-width:4px;border-radius:18px;background:radial-gradient(ellipse at center,#d01c1f 0 14%,#006233 15% 33%,#d2ad72 34% 100%)}.table-scene:after{inset:118px 78px 116px;border-radius:45%;z-index:1}.judge-banner{top:6px;min-width:160px;padding:5px 12px;border-radius:20px}.judge-banner span{font-size:9px}.judge-banner b{font-size:16px}.judge-banner small{font-size:8px}.seat{width:94px}.seat.top{top:52px}.seat.left{top:42%;left:3px;transform:translateY(-50%)}.seat.right{top:42%;right:3px;transform:translateY(-50%)}.seat.me{bottom:58px}.seat-name{padding:4px 3px;border-radius:10px}.seat-name strong{font-size:11px}.seat-name small{font-size:8px}.avatar{width:40px;height:40px;border-width:2px}.avatar span{font-size:19px}.seat-backs{height:38px;width:70px}.seat-backs img{width:27px;height:38px}.seat-backs em{width:21px;height:21px;line-height:17px;font-size:11px}.take-seat{font-size:9px;padding:4px 7px}.turn-timer{top:-15px;width:30px;height:30px;border-width:2px}.turn-timer b{font-size:15px}.turn-timer small{font-size:8px}.turn-pointer{position:absolute;z-index:11;right:50%;top:17px;transform:translateX(50%);width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,#fff7c7,#ffc400);border:2px solid #006233;color:#d01c1f;font-weight:900;line-height:18px;text-align:center;box-shadow:0 4px 8px rgba(0,0,0,.25);animation:turnPulse .8s infinite alternate}.turn-seat:before{content:"";display:none}.turn-seat:after{content:"الدور";top:14px;font-size:9px;padding:2px 8px}.played-check{position:absolute;z-index:12;right:50%;top:-21px;transform:translateX(50%);background:#006233;color:#fff;border:1px solid #ffc400;border-radius:999px;padding:2px 7px;font-size:9px;font-weight:900;box-shadow:0 3px 7px rgba(0,0,0,.22)}.played-seat:not(.turn-seat) .avatar{box-shadow:0 0 0 4px rgba(0,98,51,.35),0 3px 7px rgba(0,0,0,.18)}@keyframes turnPulse{from{transform:translateX(50%) translateY(0);filter:brightness(1)}to{transform:translateX(50%) translateY(4px);filter:brightness(1.12)}}.played{top:36%;min-width:184px;min-height:216px;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,74px);border-radius:20px;padding:4px}.played.empty-played{min-height:82px}.played .game-card-img{width:48px;height:68px}.played-card small{font-size:8px;margin-top:-4px;padding:1px 5px}.played-card.from-me{margin-top:28px}.played-card.from-top{margin-top:-28px}.played-card.from-left{margin-left:26px}.played-card.from-right{margin-right:26px}.trick-winner{bottom:4px;font-size:10px;padding:4px 9px}.game-card-img{width:50px;height:71px}.hand{bottom:5px;left:4px;right:4px;align-items:flex-end}.hand-card{width:50px;height:72px;margin-inline:-8px}.hand-card:hover{transform:translateY(-13px) rotate(var(--r,0deg))}.hand-hint{bottom:75px;font-size:10px;padding:4px 8px}.mini-log{bottom:80px;max-width:92%;font-size:9px;padding:4px 9px}.won-pile img{width:20px;height:28px}.won-pile b{font-size:10px}.seat.top .won-pile{top:34px}.seat.left .won-pile,.seat.right .won-pile{top:40px}.seat.me .won-pile{top:34px}.room-buttons{grid-template-columns:1fr 1fr 1fr;gap:5px;margin-top:5px;min-height:39px}.room-buttons .btn{padding:8px 5px;border-radius:12px;font-size:11px}.bid-actions{margin-top:5px;padding:5px;max-height:126px;border-radius:14px}.bid-title{font-size:11px}.bid-row{gap:5px;margin-top:5px}.bid-row .btn{padding:8px 4px;border-radius:11px;font-size:11px}.bid-panel{gap:5px;margin-top:5px}.bid-choice{padding:5px 3px;border-radius:11px}.bid-choice span{font-size:18px}.bid-choice b{font-size:10px}.fallback-card b,.fallback-card span{font-size:14px}
@media(max-width:380px){.seat{width:86px}.seat.left{left:0}.seat.right{right:0}.hand-card{width:46px;height:66px;margin-inline:-8px}.played{min-width:168px;grid-template-columns:repeat(3,54px)}.played .game-card-img{width:44px;height:63px}.judge-banner{min-width:145px}.seat-name strong{font-size:10px}.room-buttons .btn{font-size:10px}}

/* Landing + card theme selection */
.landing-phone{background:linear-gradient(180deg,#fff3ce,#c99958)}
.landing-hero{min-height:360px;background:linear-gradient(180deg,rgba(0,98,51,.96),rgba(255,196,0,.58),rgba(208,28,31,.82)),url('../img/reference/8813045f-d117-402f-b559-2e1f4c3b8d1e.png');background-size:cover;background-position:center}
.landing-auth{display:grid;gap:12px;margin-top:-62px}
.profile-card{margin-bottom:12px}
.card-theme-panel{margin-top:0}
.card-theme-panel h3{margin:0 0 6px;font-size:19px;color:var(--green)}
.card-theme-panel p{margin:0 0 12px;color:#654832;font-weight:700}
.theme-options{display:grid;gap:10px}
.theme-option{border:2px solid #ead2a2;background:linear-gradient(180deg,#fffaf0,#efd7a4);border-radius:18px;padding:10px;cursor:pointer;text-align:right;display:grid;grid-template-columns:105px 1fr;align-items:center;gap:10px;box-shadow:0 8px 15px rgba(0,0,0,.12)}
.theme-option.active{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,98,51,.18),0 8px 15px rgba(0,0,0,.12)}
.theme-option b{font-size:16px;color:#2f1f10}.theme-option small{display:block;color:#7a6044;font-weight:800;margin-top:3px}
.theme-preview{display:flex;direction:ltr;align-items:center;justify-content:center;min-height:62px}
.theme-preview img{width:38px;height:56px;object-fit:cover;border-radius:5px;box-shadow:0 5px 10px rgba(0,0,0,.24);margin-left:-14px;background:#fff}
.toast{position:fixed;z-index:50;left:50%;bottom:22px;transform:translateX(-50%);background:#2b190d;color:#fff;padding:12px 18px;border-radius:18px;box-shadow:0 8px 22px rgba(0,0,0,.3);font-weight:900}

/* ===== Totato premium game redesign ===== */
.game-phone{
  background:radial-gradient(circle at top,#264428 0%,#2a180e 22%,#0f0a07 100%);
}
.game-top{
  background:linear-gradient(180deg,#4b2b17,#1d0f08);
  border-bottom:3px solid rgba(255,196,0,.55);
  min-height:56px;
}
.game-top .title{font-size:22px;color:#f2dda8;letter-spacing:.3px}
.top-icon{background:linear-gradient(180deg,#fff7dd,#e5c07a);color:#40240f}
.game-content{padding:8px 8px 10px;gap:8px;display:flex;flex-direction:column;overflow:hidden}
.game-header-score{background:linear-gradient(180deg,#113326,#0f201b);color:#f4ddb0;border:2px solid rgba(216,177,85,.7);padding:8px 10px;border-radius:24px;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.score-shell{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:8px}
.score-team{background:linear-gradient(180deg,rgba(255,248,220,.12),rgba(255,228,160,.05));border:1px solid rgba(231,196,105,.35);border-radius:18px;padding:8px 10px;text-align:center}
.score-team span{display:block;font-size:15px;font-weight:900;color:#f5e2ae}
.score-team b{display:block;font-size:34px;line-height:1;color:#fff3c2;margin-top:4px}
.score-team small{display:block;font-size:13px;color:#e0c178;margin-top:4px}
.score-meta{text-align:center;padding-top:2px}
.score-meta .room-name{font-size:15px;font-weight:900;color:#e5c378}
.score-meta .room-phase{font-size:12px;color:#d9c99a;margin-top:6px;line-height:1.7}
.table-scene{position:relative;flex:1;min-height:460px;background:radial-gradient(circle at center,#6b4527 0%,#2a1a11 56%,#130c08 100%);border:2px solid rgba(219,183,92,.5);border-radius:30px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 14px 30px rgba(0,0,0,.35)}
.table-scene:before{content:"";position:absolute;inset:auto 16px 18px;top:92px;background:radial-gradient(circle at center,rgba(0,98,51,.95) 0%,rgba(0,98,51,.95) 46%,rgba(208,28,31,.9) 47%,rgba(208,28,31,.9) 67%,rgba(255,196,0,.95) 68%,rgba(255,196,0,.75) 100%);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);box-shadow:0 0 0 9px rgba(177,124,54,.6),0 0 0 13px rgba(85,43,22,.85),inset 0 0 0 2px rgba(255,255,255,.15)}
.table-scene:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-47%);width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(255,228,164,.16),rgba(255,228,164,0) 72%);pointer-events:none}
.judge-banner{position:absolute;z-index:10;top:10px;left:50%;transform:translateX(-50%);min-width:230px;padding:10px 24px 12px;background:linear-gradient(180deg,#fff7e8,#ebd5a5);border:2px solid #d9b268;border-radius:999px;text-align:center;box-shadow:0 12px 26px rgba(0,0,0,.26)}
.judge-banner span{display:block;font-size:12px;color:#7c5e26;font-weight:900}
.judge-banner b{display:block;font-size:30px;color:#8d1718;line-height:1.1;margin-top:4px}
.judge-banner small{display:block;font-size:14px;color:#52361a;margin-top:4px}
.seat{position:absolute;width:108px;text-align:center;z-index:5}
.seat.top{top:102px;left:50%;transform:translateX(-50%)}
.seat.left{left:6px;top:48%;transform:translateY(-50%)}
.seat.right{right:6px;top:48%;transform:translateY(-50%)}
.seat.me{left:50%;bottom:82px;transform:translateX(-50%)}
.avatar{width:62px;height:62px;border-radius:50%;margin:0 auto;background:linear-gradient(180deg,#fff,#ead7bb);border:4px solid #f6d263;box-shadow:0 8px 16px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;overflow:hidden}
.avatar span{font-size:27px}
.seat-name{margin-top:6px;background:linear-gradient(180deg,#ffe46c,#f0bd1d);border:2px solid #7d5e18;color:#35220f;border-radius:16px;padding:7px 6px;box-shadow:0 6px 14px rgba(0,0,0,.16)}
.seat-name strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat-name small{display:block;font-size:11px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bot-seat .seat-name{background:linear-gradient(180deg,#fff2a2,#ffcd2f)}
.my-seat .seat-name{background:linear-gradient(180deg,#fff5ad,#ffd63a);box-shadow:0 0 0 4px rgba(255,211,65,.2),0 8px 16px rgba(0,0,0,.18)}
.turn-seat .avatar{box-shadow:0 0 0 8px rgba(255,196,0,.23),0 8px 18px rgba(0,0,0,.3)}
.turn-timer{position:absolute;left:50%;transform:translateX(-50%);top:-18px;min-width:42px;height:42px;border-radius:50%;background:linear-gradient(180deg,#fff6d7,#ffd54c);border:3px solid #0f5c33;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 8px 14px rgba(0,0,0,.25)}
.turn-timer b{font-size:18px;line-height:1;color:#ba151d}
.turn-timer small{font-size:9px;color:#0f5c33;font-weight:900}
.turn-pointer{position:absolute;left:50%;top:28px;transform:translateX(-50%);font-size:20px;color:#ffd54c;filter:drop-shadow(0 4px 6px rgba(0,0,0,.28));animation:totatoBlink .8s infinite alternate}
@keyframes totatoBlink{from{opacity:.6;transform:translateX(-50%) translateY(0)}to{opacity:1;transform:translateX(-50%) translateY(5px)}}
.played-check{position:absolute;left:50%;transform:translateX(-50%);top:48px;background:#0f5c33;color:#fff;border:1px solid #ffd24c;border-radius:999px;padding:2px 8px;font-size:10px;font-weight:900;white-space:nowrap}
.take-seat{margin-top:6px}
.seat-backs{position:relative;height:72px;width:86px;margin:0 auto 8px}
.seat-backs img{position:absolute;left:50%;top:0;transform:translateX(-50%) rotate(var(--r,0deg));width:40px;height:58px;object-fit:cover;border-radius:7px;box-shadow:0 5px 10px rgba(0,0,0,.23);margin-left:calc(var(--i) * 7px - 14px);background:#fff}
.seat-backs em{position:absolute;bottom:-2px;right:50%;transform:translateX(50%);display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(180deg,#fff2bb,#f0bd1d);border:2px solid #6f4f16;color:#3b250e;font-size:13px;font-weight:900;font-style:normal}
.won-pile{position:absolute;display:flex;align-items:center;gap:4px;background:rgba(41,24,14,.86);padding:3px 8px;border-radius:999px;color:#fff0ca;border:1px solid rgba(255,208,98,.35)}
.seat.top .won-pile{left:-4px;top:16px}.seat.left .won-pile{right:6px;top:10px}.seat.right .won-pile{left:6px;top:10px}.seat.me .won-pile{right:-4px;top:8px}
.won-pile img{width:22px;height:30px;border-radius:4px}.won-pile b{font-size:11px}
.played{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);z-index:8;width:210px;height:210px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center}
.played.empty-played{display:flex;align-items:center;justify-content:center;width:170px;height:90px;background:rgba(255,255,255,.08);border:1px dashed rgba(255,223,152,.4);border-radius:20px;color:#f5e7be;font-weight:900}
.played-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px}
.played-card small{font-size:10px;color:#ffe2b2;background:rgba(0,0,0,.35);padding:2px 7px;border-radius:999px}
.played-card.from-top{grid-column:2;grid-row:1}
.played-card.from-right{grid-column:3;grid-row:2}
.played-card.from-me{grid-column:2;grid-row:3}
.played-card.from-left{grid-column:1;grid-row:2}
.played-seat-icon{width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,#fff,#f1d9b8);border:2px solid #ffd24c;display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:0 4px 8px rgba(0,0,0,.18)}
.trick-winner{position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,#ffe673,#e1b31d);color:#3f2a10;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:900;box-shadow:0 8px 14px rgba(0,0,0,.2)}
.game-card-img{position:relative;border:0;background:transparent;padding:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.game-card-img img{width:100%;height:100%;object-fit:contain;display:block;border-radius:9px;background:#fff;box-shadow:0 10px 18px rgba(0,0,0,.22)}
.game-card-img b,.game-card-img span{display:none}
.played .game-card-img{width:62px;height:88px}
.hand{position:absolute;left:6px;right:6px;bottom:10px;z-index:10;display:flex;align-items:flex-end;justify-content:center}
.hand-card{width:62px;height:90px;margin-inline:-10px;transform:rotate(var(--r,0deg));transition:transform .15s ease, filter .15s ease}
.hand-card:hover{transform:translateY(-18px) rotate(var(--r,0deg));filter:brightness(1.04)}
.disabled-card{opacity:.9}
.hand-hint{position:absolute;bottom:99px;left:50%;transform:translateX(-50%);background:rgba(36,22,12,.84);color:#fff3cb;border-radius:999px;padding:5px 12px;font-size:11px;font-weight:900;box-shadow:0 6px 12px rgba(0,0,0,.24)}
.room-buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:0}
.room-buttons .btn{padding:11px 8px;font-size:13px;border-radius:16px}
.bid-actions{background:linear-gradient(180deg,#f9edd3,#efddba);border:1px solid #d5b271;border-radius:24px;padding:10px 10px 12px;box-shadow:0 8px 18px rgba(0,0,0,.14);max-height:230px;overflow:auto}
.bid-title{text-align:center;font-size:13px;font-weight:900;color:#4a2f18;margin-bottom:8px}
.bid-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.bid-row .btn{padding:10px 6px;font-size:13px;border-radius:15px}
.bid-panel{display:grid;gap:7px;margin-top:10px}
.bid-panel.hidden{display:none}
.bid-choice{border:1px solid #e2c58e;border-radius:16px;background:linear-gradient(180deg,#fffdf6,#f5ecd8);padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:900;color:#35200f;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)}
.bid-choice .bid-right{display:flex;align-items:center;gap:10px}
.bid-choice .bid-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.08)}
.bid-choice.selected{border-color:#0f6f3c;box-shadow:0 0 0 3px rgba(15,111,60,.15), inset 0 -2px 0 rgba(0,0,0,.08)}
.bid-choice .check{color:#0f6f3c;font-size:20px}
.mini-log{display:none!important}
.game-modal-overlay{position:absolute;inset:0;z-index:60;background:rgba(8,5,3,.66);display:flex;align-items:center;justify-content:center;padding:18px}
.game-modal-overlay.hidden{display:none!important}
.game-modal{width:min(100%,390px);background:linear-gradient(180deg,#fffef9,#f2e5c8);border:2px solid #c69f59;border-radius:24px;box-shadow:0 28px 50px rgba(0,0,0,.36);overflow:hidden}
.game-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(180deg,#173b2d,#0c1a15);padding:14px 18px;color:#f0d78f}
.game-modal-head h3{margin:0;font-size:26px}
.modal-close{width:42px;height:42px;border-radius:50%;border:2px solid #caa251;background:#1b2822;color:#f0d78f;font-size:20px;font-weight:900;cursor:pointer}
.game-modal-body{padding:18px}
.round-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.round-side{border:1px solid #ecd5a6;border-radius:20px;padding:12px;text-align:center;background:#fffdf6}
.round-side h4{margin:0 0 10px;font-size:20px}.round-side .round-points{font-size:52px;font-weight:900;line-height:1}.round-side .round-total{font-size:18px;color:#6c4e2e;margin-top:10px}.round-side.us h4,.round-side.us .round-points{color:#0c6335}.round-side.them h4,.round-side.them .round-points{color:#ab2527}.round-vs{width:48px;height:48px;border-radius:50%;background:linear-gradient(180deg,#e5c160,#a36c19);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900}.round-note{text-align:center;font-weight:900;color:#6d4a26;margin:16px 0 12px;line-height:1.8}.round-modal-actions{display:flex;justify-content:center}.round-modal-actions .btn{min-width:180px}
.result-xp{margin-top:16px;border-top:1px solid #ead8b5;padding-top:14px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;text-align:center;background:linear-gradient(180deg,#123528,#183e2f);color:#f2deb2;border-radius:18px;padding:14px}.result-xp b{display:block;font-size:28px;margin-top:6px}.result-xp span{font-size:13px}
.result-xp .winner{color:#9ee7a2}.result-xp .lose{color:#ff8c78}.result-xp .gain{color:#f5d48a}
@media(max-width:420px){
  .game-top .title{font-size:19px}
  .score-team b{font-size:28px}
  .judge-banner{min-width:190px;padding:9px 18px}.judge-banner b{font-size:24px}.judge-banner small{font-size:12px}
  .seat{width:96px}.avatar{width:54px;height:54px}.seat-name strong{font-size:13px}.seat-name small{font-size:10px}
  .table-scene:before{top:86px;left:14px;right:14px;bottom:112px}.played{width:188px;height:188px}.played .game-card-img{width:56px;height:80px}
  .seat.top{top:96px}.seat.me{bottom:78px}
  .hand-card{width:56px;height:82px;margin-inline:-10px}.hand-hint{bottom:92px}
}
@media(max-width:380px){
  .table-scene{min-height:430px}.seat{width:88px}.avatar{width:50px;height:50px}.hand-card{width:50px;height:74px;margin-inline:-9px}
}

/* ===== Refined landing, admin entry, and compact lobby ===== */
.premium-entry-phone{
  background:radial-gradient(circle at top,#123126 0%,#24150c 46%,#0c0705 100%);
}
.entry-hero{
  min-height:390px;
  padding:30px 24px 110px;
  background:
    linear-gradient(180deg,rgba(3,35,27,.88),rgba(4,43,32,.7),rgba(112,64,18,.78)),
    url('../img/reference/e52a5b65-ce63-4894-a2fc-2947c6b8c55b.png');
  background-size:cover;
  background-position:center;
}
.entry-hero .logo{box-shadow:0 12px 22px rgba(0,0,0,.25);border-color:#e6c172;background:linear-gradient(180deg,#fffef8,#f4e6c6)}
.entry-hero h1{color:#f3d993;font-size:36px;margin:28px 0 10px;text-shadow:0 4px 10px rgba(0,0,0,.35)}
.entry-hero p{font-size:16px;color:#f5e9c8}
.entry-panel{margin-top:-72px;background:linear-gradient(180deg,#fffdf6,#f3e2bc);border:1px solid rgba(255,255,255,.75);box-shadow:0 20px 42px rgba(0,0,0,.26)}
.entry-grid{display:grid;gap:12px}
.separate-admin-entry{margin-top:6px;padding-top:12px;border-top:1px solid #ecd9ac;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:900;color:#5b4124}
.admin-entry-link{display:inline-flex;align-items:center;justify-content:center;min-width:122px;padding:10px 14px;border-radius:16px;background:linear-gradient(180deg,#2f3a34,#101613);color:#f3d993;border:1px solid #d0ac5f;box-shadow:0 8px 16px rgba(0,0,0,.16)}

.admin-entry-phone{
  background:radial-gradient(circle at top,#112e24 0%,#1a100c 44%,#0c0806 100%);
}
.admin-entry-hero{
  text-align:center;
  padding:36px 24px 106px;
  background:
    linear-gradient(180deg,rgba(3,28,22,.92),rgba(25,49,39,.76),rgba(117,65,18,.82)),
    url('../img/reference/c9994406-35de-4599-a998-d1d7dcc0b8a4.png');
  background-size:cover;
  background-position:center;
  color:#f4e5bb;
  min-height:335px;
}
.admin-entry-chip{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;background:rgba(255,248,226,.12);border:1px solid rgba(233,196,102,.65);color:#f3d993;font-weight:900}
.admin-entry-hero h1{margin:22px 0 10px;font-size:34px;color:#f4d284}
.admin-entry-hero p{margin:0;line-height:1.9;color:#f3e7cb}
.admin-login-panel{margin-top:-66px;background:linear-gradient(180deg,#fffef9,#f1e0ba);box-shadow:0 20px 40px rgba(0,0,0,.28)}
.admin-label{display:grid;gap:8px;font-weight:900;color:#543a1d}

.lobby-premium-phone{
  background:radial-gradient(circle at top,#102c22 0%,#24150c 45%,#0c0705 100%);
}
.lobby-topbar{
  background:linear-gradient(180deg,#3b2214,#1a0f0a);
  border-bottom:2px solid #cfa95b;
}
.premium-tabs{background:#2a160d;border:1px solid rgba(255,215,144,.18);padding:6px;border-radius:18px}
.premium-tabs a,.premium-tabs button{padding:8px 10px;color:#ecd6af}
.premium-tabs .active{background:linear-gradient(180deg,#fffdf7,#efd6a3);color:#0d5f34}
.lobby-content{padding:12px 12px 92px}
.premium-lobby-hero{
  margin-bottom:10px;
  border-radius:24px;
  background:linear-gradient(135deg,#0f3c2d,#0d6d41 60%,#99703d 100%);
  border:1px solid rgba(255,222,155,.42);
  box-shadow:0 14px 28px rgba(0,0,0,.22);
}
.premium-lobby-hero strong{font-size:22px;color:#fff1c8}
.premium-lobby-hero small{color:#f7edd5}
.compact-create{padding:0;overflow:hidden;background:linear-gradient(180deg,#fffef9,#f4e6c5)}
.compact-create summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:900;color:#4a3118;position:relative}
.compact-create summary::-webkit-details-marker{display:none}
.compact-create summary:after{content:'▾';position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:18px;color:#80602f}
.compact-create[open] summary:after{content:'▴'}
.create-room-grid{display:grid;gap:10px;padding:0 14px 14px}
.mini-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.compact-rooms{gap:8px}
.room-mini{padding:12px 12px 10px;border-radius:24px;background:linear-gradient(180deg,#fffef8,#f2e3c0);border:1px solid rgba(255,255,255,.9);box-shadow:0 10px 22px rgba(0,0,0,.16)}
.room-mini:before{width:5px}
.room-mini-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.room-mini-title{display:flex;align-items:center;gap:10px;min-width:0}
.room-icon{width:42px;height:42px;border-radius:14px;background:linear-gradient(180deg,#fff7d7,#f3c93d);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08),0 6px 12px rgba(0,0,0,.1)}
.room-mini-title h3{margin:0;font-size:18px;color:#2e1d10;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.room-mini-title small{display:block;margin-top:4px;color:#785c3d;font-weight:900}
.room-mini-badges{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 8px}
.room-mini-actions{display:grid;grid-template-columns:1.1fr .95fr .95fr;gap:7px}
.room-mini-actions .btn{font-size:12px;padding:10px 6px;border-radius:14px}
.room-state{font-size:11px;padding:6px 10px;min-width:66px;justify-content:center}
.room-state.waiting{background:#fff4c8;color:#5c4617}
.room-state.playing{background:#d9f1e4;color:#0c6335}
.room-state.finished{background:#f2d7d7;color:#9b2325}

@media(max-width:420px){
  .entry-hero h1,.admin-entry-hero h1{font-size:31px}
  .room-mini-title h3{max-width:160px;font-size:17px}
  .room-mini-actions{grid-template-columns:1fr 1fr 1fr}
  .room-mini-actions .btn{font-size:11px}
  .separate-admin-entry{flex-direction:column;align-items:stretch}
}

/* ===== Room overlap fix ===== */
.game-phone .table-scene{min-height:540px}
.game-phone .table-scene:before{top:108px;left:18px;right:18px;bottom:152px}
.game-phone .judge-banner{z-index:14;min-width:190px;padding:8px 18px 10px}
.game-phone .judge-banner b{font-size:23px}
.game-phone .judge-banner small{font-size:11px}
.game-phone .seat{z-index:12}
.game-phone .seat.top{top:92px;width:90px}
.game-phone .seat.left{left:4px;top:44%;width:74px}
.game-phone .seat.right{right:4px;top:44%;width:74px}
.game-phone .seat.me{bottom:120px;width:86px}
.game-phone .avatar{width:38px;height:38px}
.game-phone .avatar span{font-size:18px}
.game-phone .seat-name{padding:5px 4px;border-radius:12px}
.game-phone .seat-name strong{font-size:11px;line-height:1.15}
.game-phone .seat-name small{font-size:8px;line-height:1.15;margin-top:2px}
.game-phone .seat-backs{height:34px;width:56px;margin-bottom:5px}
.game-phone .seat-backs img{width:23px;height:32px;top:0}
.game-phone .seat-backs em{width:20px;height:20px;line-height:16px;font-size:10px}
.game-phone .won-pile{padding:2px 6px;gap:3px}
.game-phone .won-pile img{width:16px;height:22px}
.game-phone .won-pile b{font-size:9px}
.game-phone .seat.top .won-pile{top:12px;left:-2px}
.game-phone .seat.left .won-pile{top:0;right:-2px}
.game-phone .seat.right .won-pile{top:0;left:-2px}
.game-phone .seat.me .won-pile{top:4px;right:-4px}
.game-phone .turn-timer{top:-12px;width:28px;height:28px}
.game-phone .turn-timer b{font-size:14px}
.game-phone .turn-pointer{top:15px;width:20px;height:20px;line-height:16px}
.game-phone .played-check{top:-18px;font-size:8px;padding:2px 6px}
.game-phone .take-seat{font-size:8px;padding:4px 6px}
.game-phone .played{top:51%;width:168px;height:168px;min-width:168px;min-height:168px;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,56px);padding:2px;border-radius:18px}
.game-phone .played .game-card-img{width:42px;height:60px}
.game-phone .played-card small{font-size:7px;padding:1px 4px}
.game-phone .played-card.from-me{margin-top:22px}
.game-phone .played-card.from-top{margin-top:-22px}
.game-phone .played-card.from-left{margin-left:18px}
.game-phone .played-card.from-right{margin-right:18px}
.game-phone .trick-winner{bottom:-10px;font-size:9px;padding:4px 8px}
.game-phone .hand{left:6px;right:6px;bottom:12px;z-index:13}
.game-phone .hand-card{width:44px;height:64px;margin-inline:-7px}
.game-phone .hand-card:hover{transform:translateY(-10px) rotate(var(--r,0deg))}
.game-phone .hand-hint{bottom:68px;font-size:9px;padding:4px 7px}
.game-phone .room-buttons{margin-top:6px}
.game-phone .room-buttons .btn{font-size:11px;padding:9px 4px}
.game-phone .bid-actions{max-height:118px}
@media (max-width:390px){
  .game-phone .table-scene{min-height:510px}
  .game-phone .seat.left,.game-phone .seat.right{width:70px}
  .game-phone .seat.me{bottom:112px;width:80px}
  .game-phone .hand-card{width:40px;height:58px;margin-inline:-6px}
  .game-phone .played{width:156px;height:156px;grid-template-columns:repeat(3,48px)}
  .game-phone .played .game-card-img{width:38px;height:56px}
}

/* ===== Hand cards clarity fix ===== */
.game-phone .hand{
  left:8px;
  right:8px;
  bottom:14px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:0;
  padding-inline:2px;
}
.game-phone .hand-card{
  width:38px;
  height:58px;
  margin-inline:0;
  flex:0 0 auto;
  transform-origin:center bottom;
}
.game-phone .hand-card:hover{
  transform:translateY(-10px) rotate(var(--r,0deg));
}
.game-phone .hand .game-card-img img{
  border-radius:6px;
}
.game-phone .hand-hint{
  bottom:72px;
}
@media (min-width:360px){
  .game-phone .hand-card{
    width:40px;
    height:61px;
  }
}
@media (min-width:390px){
  .game-phone .hand-card{
    width:42px;
    height:64px;
  }
}

/* ===== Hand cards final readability fix ===== */
.game-phone .seat.me{bottom:108px;width:78px}
.game-phone .hand{
  left:8px;
  right:8px;
  bottom:10px;
  z-index:14;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:0;
  padding:0;
}
.game-phone .hand-card{
  width:var(--card-w,44px);
  height:var(--card-h,64px);
  margin-inline:var(--overlap,-6px);
  flex:0 0 auto;
  transform-origin:center bottom;
  transform:rotate(var(--r,0deg));
}
.game-phone .hand-card:first-of-type{margin-right:0}
.game-phone .hand-card:last-of-type{margin-left:0}
.game-phone .hand-card:hover{transform:translateY(-9px) rotate(var(--r,0deg))}
.game-phone .hand .game-card-img img{border-radius:6px}
.game-phone .hand-hint{bottom:72px;font-size:9px;padding:4px 8px}
@media (max-width:390px){
  .game-phone .seat.me{bottom:102px;width:74px}
}

/* ===== Final layout and overflow fix ===== */
body:has(.game-phone){
  overflow:auto !important;
}
.page:has(.game-phone){
  min-height:auto !important;
  align-items:flex-start !important;
  padding:0 !important;
}
.game-phone{
  height:auto !important;
  min-height:100vh !important;
  overflow:hidden !important;
}
.game-content{
  overflow:visible !important;
  padding-bottom:14px !important;
}
.game-phone .table-scene{
  flex:none !important;
  min-height:590px !important;
  height:590px !important;
}
.game-phone .table-scene:before{
  top:114px !important;
  left:22px !important;
  right:22px !important;
  bottom:148px !important;
}
.game-phone .judge-banner{
  top:10px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  min-width:180px !important;
  max-width:210px !important;
  z-index:20 !important;
}
.game-phone .seat.top{
  top:102px !important;
  width:84px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
}
.game-phone .seat.left{
  top:56% !important;
  left:4px !important;
  right:auto !important;
  transform:translateY(-50%) !important;
  width:72px !important;
}
.game-phone .seat.right{
  top:56% !important;
  right:4px !important;
  left:auto !important;
  transform:translateY(-50%) !important;
  width:72px !important;
}
.game-phone .seat.me{
  bottom:96px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:82px !important;
}
.game-phone .played{
  top:54% !important;
  left:50% !important;
  right:auto !important;
  transform:translate(-50%,-50%) !important;
  width:154px !important;
  height:154px !important;
  min-width:154px !important;
  min-height:154px !important;
  grid-template-columns:repeat(3,48px) !important;
  grid-template-rows:repeat(3,48px) !important;
  padding:3px !important;
}
.game-phone .played .game-card-img{
  width:36px !important;
  height:52px !important;
}
.game-phone .played-card.from-me,
.game-phone .played-card.from-top,
.game-phone .played-card.from-left,
.game-phone .played-card.from-right{
  margin:0 !important;
}
.game-phone .played-card.from-top{transform:translateY(-8px)}
.game-phone .played-card.from-me{transform:translateY(8px)}
.game-phone .played-card.from-left{transform:translateX(-8px)}
.game-phone .played-card.from-right{transform:translateX(8px)}
.game-phone .played-card small{
  font-size:7px !important;
}
.game-phone .won-pile{
  padding:2px 5px !important;
}
.game-phone .seat.me .won-pile{
  top:-6px !important;
  right:-8px !important;
}
.game-phone .seat.left .won-pile,
.game-phone .seat.right .won-pile,
.game-phone .seat.top .won-pile{
  top:-4px !important;
}
.game-phone .hand{
  left:8px !important;
  right:8px !important;
  bottom:10px !important;
  z-index:18 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-end !important;
  gap:var(--card-gap,4px) !important;
  flex-wrap:nowrap !important;
  direction:ltr !important;
}
.game-phone .hand-card{
  width:var(--card-w,40px) !important;
  height:var(--card-h,60px) !important;
  margin:0 !important;
  transform:rotate(var(--r,0deg)) !important;
  border-radius:6px !important;
}
.game-phone .hand-card:hover{
  transform:translateY(-8px) rotate(var(--r,0deg)) !important;
}
.game-phone .hand-hint{
  bottom:68px !important;
}
.game-phone .room-buttons,
.game-phone .bid-actions{
  position:relative;
  z-index:2;
}
@media (min-width:700px){
  .page:has(.game-phone){padding:14px 0 24px !important}
  .game-phone{width:430px !important; border-radius:24px 24px 0 0 !important;}
}
@media (max-width:390px){
  .game-phone .table-scene{min-height:565px !important;height:565px !important;}
  .game-phone .seat.left,.game-phone .seat.right{width:68px !important;}
  .game-phone .seat.me{bottom:92px !important;width:78px !important;}
  .game-phone .hand{gap:2px !important;}
  .game-phone .played{width:146px !important;height:146px !important;grid-template-columns:repeat(3,46px) !important;}
}

/* ===== Elegant fan hand layout ===== */
.game-phone .hand.hand-fan{
  position:absolute !important;
  left:8px !important;
  right:8px !important;
  bottom:10px !important;
  height:104px !important;
  z-index:18 !important;
  display:block !important;
  overflow:visible !important;
}
.game-phone .hand.hand-fan .hand-card{
  position:absolute !important;
  left:50% !important;
  bottom:0 !important;
  width:var(--card-w,48px) !important;
  height:var(--card-h,72px) !important;
  margin:0 !important;
  border-radius:8px !important;
  transform:translateX(calc(-50% + var(--x,0px))) translateY(var(--y,0px)) rotate(var(--r,0deg)) !important;
  transform-origin:center bottom !important;
  box-shadow:0 10px 18px rgba(0,0,0,.28) !important;
}
.game-phone .hand.hand-fan .hand-card:hover{
  transform:translateX(calc(-50% + var(--x,0px))) translateY(calc(var(--y,0px) - 12px)) rotate(var(--r,0deg)) !important;
}
.game-phone .hand.hand-fan .hand-card img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  border-radius:8px !important;
  background:#fff !important;
}
.game-phone .hand.hand-fan .hand-card:first-of-type,
.game-phone .hand.hand-fan .hand-card:last-of-type{margin:0 !important}
.game-phone .hand-hint{
  bottom:82px !important;
  z-index:19 !important;
}
@media (max-width:390px){
  .game-phone .hand.hand-fan{height:96px !important;bottom:8px !important}
}

/* ===== Turn flow indicator and trick pause polish ===== */
.game-phone .turn-seat .avatar{
  box-shadow:0 0 0 5px rgba(255,196,0,.42),0 0 0 10px rgba(0,98,51,.22),0 8px 18px rgba(0,0,0,.28) !important;
}
.game-phone .turn-pointer{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:28px !important;
  height:28px !important;
  border-radius:50% !important;
  background:linear-gradient(180deg,#fff9ce,#ffc400) !important;
  border:2px solid #006233 !important;
  color:#d01c1f !important;
  font-size:17px !important;
  line-height:22px !important;
  font-weight:900 !important;
  box-shadow:0 7px 14px rgba(0,0,0,.28) !important;
  z-index:30 !important;
}
.game-phone .turn-seat:after{
  content:"الدور" !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#006233 !important;
  color:#fff !important;
  border:1px solid #ffc400 !important;
  border-radius:999px !important;
  font-size:9px !important;
  font-weight:900 !important;
  padding:2px 8px !important;
  box-shadow:0 4px 8px rgba(0,0,0,.22) !important;
}
.game-phone .completed-trick{
  box-shadow:0 0 0 2px rgba(255,196,0,.28),0 0 22px rgba(255,196,0,.25) !important;
}
.game-phone .winner-card .game-card-img img{
  box-shadow:0 0 0 2px #ffc400,0 10px 18px rgba(0,0,0,.28) !important;
}

/* ===== Organized bidding dropdown + dealer badge ===== */
.game-phone .bid-actions{
  overflow:visible !important;
  max-height:none !important;
  padding:8px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#fff4da,#ecd3a6) !important;
  position:relative !important;
  z-index:45 !important;
}
.game-phone .bid-title{
  margin:0 0 8px !important;
  padding:0 !important;
  background:transparent !important;
  font-size:12px !important;
  color:#4b3118 !important;
}
.game-phone .compact-bid-row{
  display:grid !important;
  grid-template-columns:1fr 1.15fr 1fr !important;
  gap:8px !important;
  align-items:end !important;
  margin:0 !important;
}
.game-phone .compact-bid-row .btn{
  width:100% !important;
  min-height:42px !important;
  padding:9px 5px !important;
  border-radius:16px !important;
  font-size:12px !important;
  line-height:1.25 !important;
}
.game-phone .bid-dropdown-wrap{
  position:relative !important;
  min-width:0 !important;
}
.game-phone .bid-panel{
  position:absolute !important;
  left:50% !important;
  bottom:calc(100% + 10px) !important;
  transform:translateX(-50%) !important;
  width:118px !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:0 !important;
  padding:8px !important;
  margin:0 !important;
  border-radius:16px !important;
  background:rgba(70,70,70,.94) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.36) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  z-index:80 !important;
}
.game-phone .bid-panel.hidden{display:none !important}
.game-phone .bid-panel:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  transform:translateX(-50%);
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:8px solid rgba(70,70,70,.94);
}
.game-phone .bid-choice{
  display:grid !important;
  grid-template-columns:22px 1fr !important;
  align-items:center !important;
  gap:5px !important;
  width:100% !important;
  padding:8px 6px !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#fff !important;
  box-shadow:none !important;
  text-align:right !important;
  font-size:13px !important;
}
.game-phone .bid-choice:last-child{border-bottom:0 !important}
.game-phone .bid-choice:hover{background:rgba(255,255,255,.12) !important;border-radius:10px !important}
.game-phone .bid-choice .bid-icon{
  width:20px !important;
  height:20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.16) !important;
  font-size:14px !important;
}
.game-phone .bid-choice b{
  display:block !important;
  font-size:13px !important;
  font-weight:900 !important;
}
.dealer-badge{
  position:absolute;
  z-index:22;
  left:50%;
  top:38px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#fff8d4,#ffc400);
  color:#3b260d;
  border:1px solid #8d6517;
  border-radius:999px;
  padding:2px 8px;
  font-size:9px;
  font-weight:900;
  box-shadow:0 4px 8px rgba(0,0,0,.22);
  white-space:nowrap;
}
.game-phone .seat.me .dealer-badge{top:34px}
.game-phone .seat.left .dealer-badge,
.game-phone .seat.right .dealer-badge{top:30px}

/* Spectator / full-room behavior */
.spectator-title{
  background:linear-gradient(180deg,#fff6d8,#edd7a6);
  color:#543417;
  border:1px solid #d6b779;
  border-radius:16px;
  padding:10px;
  font-size:12px;
}
.room-buttons .btn-red{display:flex;align-items:center;justify-content:center}

/* ===== Hand order fix: sorted fan only, no side grouping ===== */
.game-phone .hand.sorted-hand{
  position:absolute!important;
  left:8px!important;
  right:8px!important;
  bottom:10px!important;
  height:104px!important;
  z-index:18!important;
  display:block!important;
  overflow:visible!important;
  direction:ltr!important;
}
.game-phone .hand.sorted-hand .hand-card{
  position:absolute!important;
  left:50%!important;
  bottom:0!important;
  width:var(--card-w,48px)!important;
  height:var(--card-h,72px)!important;
  margin:0!important;
  transform:translateX(calc(-50% + var(--x,0px))) translateY(var(--y,0px)) rotate(var(--r,0deg))!important;
  transform-origin:center bottom!important;
}
.game-phone .hand.sorted-hand .hand-card:hover{
  transform:translateX(calc(-50% + var(--x,0px))) translateY(calc(var(--y,0px) - 12px)) rotate(var(--r,0deg))!important;
}
.game-phone .hand.sorted-hand .hand-card img{
  object-fit:contain!important;
  border-radius:8px!important;
  background:#fff!important;
}

/* ===== Top room actions + larger bidding buttons ===== */
.game-phone .game-top.game-top-actions{
  grid-template-columns:48px 46px 1fr 56px 48px !important;
  gap:6px !important;
  padding:7px 8px !important;
  min-height:54px !important;
}
.game-phone .game-top.game-top-actions .title{
  font-size:16px !important;
  min-width:0 !important;
}
.game-phone .game-top.game-top-actions .top-icon{
  min-height:34px !important;
  padding:7px 4px !important;
  font-size:11px !important;
  border-radius:12px !important;
  white-space:nowrap !important;
}
.game-phone .game-top.game-top-actions .top-exit{
  background:linear-gradient(180deg,#ffefc3,#e44949) !important;
  color:#fff !important;
}
.game-phone .room-buttons{
  display:flex !important;
  justify-content:center !important;
  min-height:0 !important;
  margin-top:6px !important;
}
.game-phone .room-buttons:has(#startBtn.hidden){
  display:none !important;
}
.game-phone .room-buttons #startBtn{
  min-width:150px !important;
  min-height:42px !important;
  font-size:15px !important;
}
.game-phone .bid-actions{
  padding:10px !important;
  border-radius:20px !important;
}
.game-phone .compact-bid-row{
  grid-template-columns:1fr 1.15fr 1fr !important;
  gap:10px !important;
}
.game-phone .compact-bid-row .btn{
  min-height:54px !important;
  padding:12px 6px !important;
  border-radius:18px !important;
  font-size:15px !important;
  line-height:1.25 !important;
}
.game-phone .bid-dropdown-wrap > .btn{
  font-size:16px !important;
}
.game-phone .bid-panel{
  width:140px !important;
  bottom:calc(100% + 12px) !important;
}
.game-phone .bid-choice{
  min-height:38px !important;
  font-size:15px !important;
}
.game-phone .bid-choice b{
  font-size:15px !important;
}
@media(max-width:380px){
  .game-phone .game-top.game-top-actions{
    grid-template-columns:43px 42px 1fr 50px 43px !important;
    gap:4px !important;
  }
  .game-phone .game-top.game-top-actions .top-icon{font-size:10px !important;padding:6px 3px !important;}
  .game-phone .game-top.game-top-actions .title{font-size:14px !important;}
  .game-phone .compact-bid-row{gap:7px !important;}
  .game-phone .compact-bid-row .btn{font-size:14px !important;min-height:50px !important;}
}

/* ===== Slightly larger readable card images ===== */
.game-phone .hand.sorted-hand{
  height:114px !important;
  bottom:8px !important;
}
.game-phone .hand.sorted-hand .hand-card img{
  border-radius:9px !important;
  box-shadow:0 9px 18px rgba(0,0,0,.32) !important;
}
.game-phone .played .game-card-img{
  width:44px !important;
  height:64px !important;
}
.game-phone .played{
  width:172px !important;
  height:172px !important;
  min-width:172px !important;
  min-height:172px !important;
  grid-template-columns:repeat(3,54px) !important;
  grid-template-rows:repeat(3,54px) !important;
}
.game-phone .seat-backs img{
  width:27px !important;
  height:38px !important;
}
.game-phone .seat-backs{
  height:40px !important;
}
@media(max-width:380px){
  .game-phone .hand.sorted-hand .hand-card{
    width:calc(var(--card-w,52px) - 3px) !important;
    height:calc(var(--card-h,78px) - 4px) !important;
  }
  .game-phone .played .game-card-img{
    width:41px !important;
    height:59px !important;
  }
}

/* ===== Bottom bidding buttons organization fix ===== */
.game-phone .bid-actions{
  overflow:visible !important;
  max-height:none !important;
  padding:10px !important;
  border-radius:24px !important;
}
.game-phone .bid-title{
  font-size:15px !important;
  line-height:1.35 !important;
  margin-bottom:10px !important;
}
.game-phone .bid-controls-bar{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.15fr 1.35fr;
  gap:10px;
  align-items:stretch;
  direction:rtl;
}
.game-phone .bid-controls-bar .bid-btn{
  min-height:56px;
  padding:10px 8px !important;
  border-radius:18px !important;
  font-size:16px !important;
  line-height:1.15 !important;
  white-space:normal !important;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.14),0 8px 16px rgba(0,0,0,.16) !important;
}
.game-phone .bid-pass{
  background:linear-gradient(180deg,#fffdf5,#efe1c4) !important;
  color:#3d2815 !important;
}
.game-phone .bid-hokum{
  background:linear-gradient(180deg,#31d55b,#00853f) !important;
  color:#fff !important;
}
.game-phone .bid-double{
  background:linear-gradient(180deg,#64432c,#2c180d) !important;
  color:#fff !important;
}
.game-phone .bid-dropdown-wrap{
  position:relative;
  min-width:0;
}
.game-phone .bid-dropdown-wrap > .bid-btn{
  width:100%;
  height:100%;
}
.game-phone .bid-panel{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  bottom:calc(100% + 10px) !important;
  transform:translateX(-50%) !important;
  width:min(190px,76vw) !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:0 !important;
  padding:8px !important;
  background:rgba(58,58,58,.96) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  border-radius:16px !important;
  box-shadow:0 18px 36px rgba(0,0,0,.34) !important;
  z-index:80 !important;
  max-height:none !important;
}
.game-phone .bid-panel.hidden{display:none !important;}
.game-phone .bid-choice{
  min-height:42px !important;
  border:0 !important;
  border-radius:10px !important;
  background:transparent !important;
  color:#fff !important;
  box-shadow:none !important;
  padding:8px 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  font-size:16px !important;
}
.game-phone .bid-choice:hover,
.game-phone .bid-choice:active{
  background:rgba(255,255,255,.14) !important;
}
.game-phone .bid-choice .bid-icon{
  font-size:18px !important;
  width:22px;
  display:inline-flex;
  justify-content:center;
}
.game-phone .bid-choice b{
  font-size:16px !important;
}
.game-phone .bid-spacer{
  min-height:56px;
  display:block;
}
@media (max-width:380px){
  .game-phone .bid-controls-bar{gap:7px;grid-template-columns:1fr 1.1fr 1.28fr;}
  .game-phone .bid-controls-bar .bid-btn{font-size:14px !important;min-height:52px;padding:8px 5px !important;}
}

/* ===== Final mobile bidding buttons cleanup ===== */
.game-phone .bid-actions{
  max-height:none !important;
  overflow:visible !important;
  padding:14px 12px !important;
  border-radius:28px !important;
}
.game-phone .bid-title{
  font-size:19px !important;
  line-height:1.5 !important;
  padding:0 0 10px !important;
  color:#3d2a15 !important;
}
.game-phone .bid-controls-bar{
  display:grid !important;
  grid-template-columns:1fr 1fr 1fr !important;
  gap:10px !important;
  align-items:stretch !important;
  width:100% !important;
  direction:rtl !important;
}
.game-phone .bid-spacer{display:block !important;min-height:1px !important;}
.game-phone .bid-dropdown-wrap{position:relative !important;width:100% !important;}
.game-phone .bid-controls-bar .bid-btn,
.game-phone .bid-dropdown-wrap > .bid-btn{
  width:100% !important;
  min-width:0 !important;
  min-height:58px !important;
  height:58px !important;
  padding:0 8px !important;
  border-radius:20px !important;
  font-size:17px !important;
  font-weight:900 !important;
  white-space:normal !important;
  line-height:1.15 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.game-phone .bid-double{font-size:15px !important;}
.game-phone .bid-panel{
  position:absolute !important;
  left:50% !important;
  bottom:68px !important;
  transform:translateX(-50%) !important;
  width:150px !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:0 !important;
  padding:8px !important;
  border-radius:18px !important;
  background:rgba(60,44,31,.94) !important;
  box-shadow:0 16px 32px rgba(0,0,0,.35) !important;
  z-index:80 !important;
}
.game-phone .bid-panel.hidden{display:none !important;}
.game-phone .bid-choice{
  min-height:36px !important;
  padding:7px 10px !important;
  border-radius:10px !important;
  background:transparent !important;
  color:#fff3d2 !important;
  box-shadow:none !important;
  border-bottom:1px solid rgba(255,255,255,.16) !important;
  font-size:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
}
.game-phone .bid-choice:last-child{border-bottom:0 !important;}
.game-phone .bid-choice .bid-icon{font-size:16px !important;}
.game-phone .bid-choice b{font-size:16px !important;}
@media(max-width:390px){
  .game-phone .bid-actions{padding:12px 10px !important;}
  .game-phone .bid-controls-bar{gap:8px !important;}
  .game-phone .bid-controls-bar .bid-btn,
  .game-phone .bid-dropdown-wrap > .bid-btn{
    min-height:54px !important;
    height:54px !important;
    font-size:15px !important;
    border-radius:18px !important;
  }
  .game-phone .bid-double{font-size:13px !important;}
}

/* ===== Legal card ranking + two-tap selection ===== */
.game-phone .hand-card.selected-card{
  transform:translateX(calc(-50% + var(--x,0px))) translateY(calc(var(--y,0px) - 18px)) rotate(var(--r,0deg)) !important;
  filter:drop-shadow(0 0 10px #ffc400) drop-shadow(0 10px 18px rgba(0,0,0,.32)) brightness(1.06) !important;
}
.game-phone .hand-card.selected-card::after{
  content:'✓';
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  width:24px;
  height:24px;
  border-radius:50%;
  background:linear-gradient(180deg,#fff8c8,#ffc400);
  color:#006233;
  border:2px solid #006233;
  font-size:14px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:20;
  box-shadow:0 5px 10px rgba(0,0,0,.25);
}

/* ===== Clean header and remove promo/hints ===== */
.entry-hero p,
.separate-admin-entry,
.admin-entry-link,
.hand-hint{
  display:none !important;
}
.entry-panel{
  margin-bottom:34px !important;
}
.game-header-score{
  padding:9px 10px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#0c3325,#071d16) !important;
  border:2px solid rgba(212,172,78,.78) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.22) !important;
}
.score-shell-clean{
  display:grid !important;
  grid-template-columns:92px 1fr 92px !important;
  gap:8px !important;
  align-items:stretch !important;
  direction:rtl !important;
}
.score-shell-clean .score-team{
  min-height:82px !important;
  border-radius:16px !important;
  padding:8px 6px !important;
  background:linear-gradient(180deg,rgba(255,255,225,.10),rgba(255,225,140,.04)) !important;
  border:1px solid rgba(219,181,87,.55) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}
.score-shell-clean .score-team span{
  font-size:14px !important;
  line-height:1 !important;
  color:#fff0bc !important;
  font-weight:900 !important;
}
.score-shell-clean .score-team b{
  font-size:34px !important;
  line-height:1.05 !important;
  color:#fff4c7 !important;
  margin:4px 0 !important;
}
.score-shell-clean .score-team small{
  font-size:12px !important;
  line-height:1 !important;
  color:#efd38f !important;
  font-weight:900 !important;
}
.score-shell-clean .score-meta{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  text-align:center !important;
  padding:0 2px !important;
}
.score-shell-clean .room-name{
  color:#f0d48b !important;
  font-size:15px !important;
  font-weight:900 !important;
  margin-bottom:5px !important;
  white-space:nowrap !important;
}
.score-shell-clean .room-phase{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:4px 6px !important;
  color:#efe2bd !important;
  font-size:11px !important;
  line-height:1.4 !important;
  margin:0 !important;
}
.score-shell-clean .room-phase span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:2px 6px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,222,155,.16) !important;
  white-space:nowrap !important;
}
@media(max-width:390px){
  .score-shell-clean{grid-template-columns:82px 1fr 82px !important;gap:6px !important}
  .score-shell-clean .score-team{min-height:76px !important;padding:7px 4px !important}
  .score-shell-clean .score-team b{font-size:29px !important}
  .score-shell-clean .room-name{font-size:13px !important}
  .score-shell-clean .room-phase{font-size:10px !important;gap:3px}
  .score-shell-clean .room-phase span{padding:2px 5px !important}
}

/* ===== Trick collect animation ===== */
.played.completed-trick .played-card{
  animation:trickHoldThenCollect 1.45s ease-in-out var(--collect-delay,0ms) forwards;
  transform-origin:center center;
}
.played.completed-trick.collect-to-me .played-card{--collect-x:0px;--collect-y:112px;}
.played.completed-trick.collect-to-top .played-card{--collect-x:0px;--collect-y:-116px;}
.played.completed-trick.collect-to-left .played-card{--collect-x:-116px;--collect-y:0px;}
.played.completed-trick.collect-to-right .played-card{--collect-x:116px;--collect-y:0px;}
@keyframes trickHoldThenCollect{
  0%,42%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1)}
  72%{opacity:1;transform:translate(calc(var(--collect-x) * .72),calc(var(--collect-y) * .72)) rotate(10deg) scale(.82)}
  100%{opacity:.08;transform:translate(var(--collect-x),var(--collect-y)) rotate(18deg) scale(.28)}
}
.played.completed-trick .collect-label{
  animation:collectLabelPulse 1.45s ease-in-out forwards;
}
@keyframes collectLabelPulse{
  0%,38%{opacity:0;transform:translateX(-50%) scale(.92)}
  50%,86%{opacity:1;transform:translateX(-50%) scale(1)}
  100%{opacity:0;transform:translateX(-50%) scale(.94)}
}
.won-pile{
  animation:wonPilePop .55s ease-out;
}
@keyframes wonPilePop{
  0%{transform:scale(.78);filter:brightness(1.25)}
  70%{transform:scale(1.08);filter:brightness(1.05)}
  100%{transform:scale(1);filter:brightness(1)}
}
.game-phone .played.completed-trick.collect-to-me .played-card{--collect-y:96px;}
.game-phone .played.completed-trick.collect-to-top .played-card{--collect-y:-96px;}
.game-phone .played.completed-trick.collect-to-left .played-card{--collect-x:-96px;}
.game-phone .played.completed-trick.collect-to-right .played-card{--collect-x:96px;}

/* ===== Game over winner/loser effects ===== */
.game-over-modal{
  position:relative;
  overflow:hidden;
}
.game-over-head{
  justify-content:center;
  text-align:center;
}
.game-over-modal.winner-effect .game-modal-head{
  background:linear-gradient(180deg,#11452f,#061c14);
}
.game-over-modal.loser-effect .game-modal-head{
  background:linear-gradient(180deg,#4a1d1d,#1c0808);
}
.game-over-badge{
  width:86px;
  height:86px;
  margin:0 auto 12px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:44px;
  background:radial-gradient(circle,#fff6cc 0 45%,#d3a12d 46% 100%);
  border:3px solid #fff0b9;
  box-shadow:0 14px 28px rgba(0,0,0,.22),0 0 0 8px rgba(214,172,68,.16);
  animation:gameOverPop .7s ease both;
}
.loser-effect .game-over-badge{
  background:radial-gradient(circle,#fff 0 45%,#b94141 46% 100%);
  box-shadow:0 14px 28px rgba(0,0,0,.22),0 0 0 8px rgba(185,65,65,.12);
}
.game-over-title{
  text-align:center;
  font-size:24px;
  font-weight:900;
  color:#5d3b16;
  margin:4px 0 16px;
}
.winner-effect .game-over-title{color:#0b6b39}
.loser-effect .game-over-title{color:#a22428}
.game-over-score{margin-top:6px}
.game-over-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:16px;
}
.game-over-actions .btn{
  padding:15px 12px;
  border-radius:20px;
  font-size:18px;
}
.game-over-sparks{
  pointer-events:none;
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
}
.game-over-sparks i{
  position:absolute;
  top:-24px;
  width:12px;
  height:18px;
  border-radius:4px;
  background:#f5cf52;
  opacity:.9;
  animation:gameOverSpark 2.6s linear infinite;
}
.loser-effect .game-over-sparks i{background:#d86b5b;opacity:.55}
.game-over-sparks i:nth-child(1){left:12%;animation-delay:.1s}
.game-over-sparks i:nth-child(2){left:28%;animation-delay:.7s;background:#0f8b4d}
.game-over-sparks i:nth-child(3){left:46%;animation-delay:.25s;background:#fff1a8}
.game-over-sparks i:nth-child(4){left:63%;animation-delay:1s;background:#d01c1f}
.game-over-sparks i:nth-child(5){left:78%;animation-delay:.45s;background:#ffc400}
.game-over-sparks i:nth-child(6){left:90%;animation-delay:1.3s;background:#0f8b4d}
.game-over-modal .game-modal-head,
.game-over-modal .game-modal-body{
  position:relative;
  z-index:2;
}
@keyframes gameOverPop{
  from{transform:scale(.6);opacity:0}
  70%{transform:scale(1.08);opacity:1}
  to{transform:scale(1)}
}
@keyframes gameOverSpark{
  0%{transform:translateY(-30px) rotate(0deg);opacity:0}
  12%{opacity:1}
  100%{transform:translateY(620px) rotate(320deg);opacity:0}
}
@media(max-width:420px){
  .game-over-badge{width:72px;height:72px;font-size:36px}
  .game-over-title{font-size:21px}
  .game-over-actions .btn{font-size:16px;padding:13px 8px}
}

/* ===== Strict trick hints and bid badges ===== */
.lead-badge,
.seat-bid-badge{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  z-index:24;
  border-radius:999px;
  padding:4px 9px;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
  box-shadow:0 5px 12px rgba(0,0,0,.22);
}
.lead-badge{
  top:58px;
  background:linear-gradient(180deg,#fff5c8,#f4bf28);
  color:#4a2f0d;
  border:1px solid #7b5816;
}
.seat-bid-badge{
  top:-34px;
  background:linear-gradient(180deg,#0f6b39,#05361f);
  color:#fff7d4;
  border:1px solid #ffd466;
}
.seat.top .seat-bid-badge{top:40px;left:calc(50% + 44px)}
.seat.me .seat-bid-badge{top:-28px;left:calc(50% + 48px)}
.seat.left .seat-bid-badge{top:30px;left:88px}
.seat.right .seat-bid-badge{top:30px;left:-18px}
.seat.top .lead-badge{top:72px}
.seat.left .lead-badge,.seat.right .lead-badge{top:62px}
.seat.me .lead-badge{top:-24px}
.completed-trick .played-card{animation-fill-mode:both;animation-iteration-count:1!important}

/* ===== Admin control center + runtime UI variables ===== */
.game-phone .table-scene{min-height:var(--admin-room-min-h,590px)!important;height:var(--admin-room-min-h,590px)!important}
.game-phone .hand.hand-fan .hand-card{width:var(--admin-hand-card-w,52px)!important;height:var(--admin-hand-card-h,78px)!important}
.game-phone .played .game-card-img{width:var(--admin-table-card-w,40px)!important;height:var(--admin-table-card-h,58px)!important}
.game-phone .seat-backs img{width:var(--admin-back-card-w,26px)!important;height:var(--admin-back-card-h,37px)!important}
.game-phone .avatar{width:var(--admin-avatar-size,38px)!important;height:var(--admin-avatar-size,38px)!important}
.game-phone .bid-actions{max-height:var(--admin-bottom-actions-h,118px)!important}
.completed-trick .played-card{animation-duration:var(--admin-collect-ms,650ms)!important}
.game-over-win{animation-duration:var(--admin-winner-ms,1800ms)!important}
.game-over-lose{animation-duration:var(--admin-loser-ms,1200ms)!important}
body[data-bid-button-size="small"] .bid-btn{font-size:11px!important;padding:8px 6px!important}
body[data-bid-button-size="large"] .bid-btn{font-size:15px!important;padding:13px 10px!important}
body[data-table-skin="dark"] .game-phone .table-scene:before{background:radial-gradient(circle,#0b3e2a 0 48%,#6b1215 49% 68%,#c1973e 69% 100%)!important}
body[data-table-skin="gold"] .game-phone .table-scene:before{background:radial-gradient(circle,#d9b256 0 48%,#0f6b3f 49% 68%,#9d1b22 69% 100%)!important}

.admin-control-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}.admin-control-head h2{margin:0;color:#2e1d10}.admin-control-head small{color:#76593a;font-weight:900}.admin-section{background:linear-gradient(180deg,#fffef8,#f3e4c3);border:1px solid #e4c88f;border-radius:22px;padding:14px;margin-bottom:14px;box-shadow:0 8px 18px rgba(0,0,0,.08)}.admin-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.admin-section-title h3{margin:0;color:#0d5f34;font-size:20px}.admin-section-title .btn{font-size:13px;padding:9px 14px;border-radius:14px}.admin-form-grid{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:10px}.admin-form-grid label,.admin-card-field{display:grid;gap:6px;font-weight:900;color:#4b3117}.admin-form-grid input,.admin-form-grid select,.admin-form-grid textarea,.admin-card-field input,.admin-card-field select{width:100%;border:1px solid #d7bd87;border-radius:13px;padding:10px;background:#fffaf0;outline:none}.admin-form-grid textarea{min-height:74px;resize:vertical}.admin-wide{grid-column:1/-1}.tribe-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tribe-card{border:1px solid #e7d0a0;background:#fffdf7;border-radius:18px;padding:12px}.tribe-card h4{margin:0 0 8px;color:#7b541f}.tribe-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0}.tribe-cards{display:flex;gap:4px;direction:ltr;flex-wrap:wrap}.tribe-mini-card{width:28px;height:40px;border-radius:5px;background:#fff;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;box-shadow:0 3px 6px rgba(0,0,0,.12)}.score-map-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.score-map-box{border:1px solid #e4c88f;border-radius:18px;background:#fffdf7;padding:12px}.score-map-box h4{margin:0 0 8px;color:#8a1b1e}.image-upload-grid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px}.image-upload-card{background:#fffdf7;border:1px solid #e4c88f;border-radius:16px;padding:10px;display:grid;gap:8px}.image-upload-card img{width:46px;height:66px;object-fit:contain;background:#fff;border-radius:7px;box-shadow:0 5px 10px rgba(0,0,0,.15);justify-self:center}.image-upload-card span{text-align:center;font-weight:900;color:#4b3117}.image-upload-card input{font-size:11px;width:100%}.admin-save-row{margin-top:12px;display:flex;justify-content:flex-start}.admin-save-row .btn{min-width:150px}.mobile-admin-note{background:#e8f6ee;color:#0d5f34;border:1px solid #b8dfc8;border-radius:14px;padding:10px;font-weight:900;margin-bottom:12px}
@media(max-width:900px){.admin-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tribe-grid,.score-map-grid{grid-template-columns:1fr}.image-upload-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-shell{min-height:100vh;border-radius:0}.admin-main{padding:12px}.sidebar{position:sticky;top:0;z-index:10}.admin-section{padding:12px;border-radius:18px}.admin-section-title{align-items:flex-start}.admin-section-title h3{font-size:18px}.admin-save-row .btn{width:100%}}
@media(max-width:520px){.admin-form-grid{grid-template-columns:1fr}.image-upload-grid{grid-template-columns:1fr 1fr}.admin-control-head{display:block}.admin-control-head small{display:block;margin-top:6px}.admin-section-title{display:grid}.admin-section-title .btn{width:100%}.table-wrap{border-radius:14px}table{min-width:0}th,td{font-size:12px;padding:7px}td input,td select{width:100%;min-width:88px}.sidebar{padding:10px}.sidebar h1{font-size:18px;margin:0}.sidebar a{padding:9px 11px;font-size:13px}.admin-card{border-radius:16px}.page:has(.admin-shell){padding:0!important}}

/* ===== Full card tribe editor ===== */
.admin-tribes-full{
  grid-template-columns:1fr!important;
}
.admin-tribe-full{
  padding:14px;
}
.tribe-card-head{
  display:grid;
  grid-template-columns:1fr minmax(180px,240px);
  gap:12px;
  align-items:end;
  margin-bottom:10px;
}
.tribe-card-head h4{
  margin:0;
  font-size:20px;
  color:#0d5f34;
}
.tribe-card-head label{
  display:grid;
  gap:6px;
  font-weight:900;
  color:#5d3b17;
}
.tribe-card-head select{
  width:100%;
  border:1px solid #d7bd87;
  border-radius:13px;
  padding:10px;
  background:#fffaf0;
}
.tribe-mode-panel{
  display:none;
  margin-top:12px;
}
.tribe-mode-panel.active{
  display:block;
}
.admin-card-note{
  background:#fff7d9;
  border:1px solid #e5c56f;
  color:#5d3b17;
  border-radius:14px;
  padding:9px 12px;
  font-weight:900;
  margin-bottom:10px;
  line-height:1.7;
}
.admin-card-table{
  display:grid;
  gap:8px;
}
.admin-real-card-row{
  display:grid;
  grid-template-columns:86px 1.1fr 1.1fr .75fr .8fr;
  gap:8px;
  align-items:center;
  background:#fffaf0;
  border:1px solid #ead6a8;
  border-radius:16px;
  padding:9px;
}
.admin-real-card-preview{
  display:grid;
  justify-items:center;
  gap:5px;
  font-weight:900;
  color:#3b2610;
}
.admin-real-card-preview img{
  width:54px;
  height:78px;
  object-fit:contain;
  background:#fff;
  border-radius:8px;
  box-shadow:0 6px 12px rgba(0,0,0,.15);
}
.admin-real-card-row label{
  display:grid;
  gap:5px;
  font-weight:900;
  color:#4c3116;
  font-size:13px;
}
.admin-real-card-row input,
.admin-real-card-row select{
  width:100%;
  border:1px solid #d7bd87;
  border-radius:12px;
  padding:9px;
  background:#fff;
  outline:none;
}
.admin-real-card-row small{
  color:#8a6b42;
  font-size:11px;
}
.admin-tribe-full .admin-save-row{
  justify-content:flex-start;
  margin-top:12px;
}
.admin-tribe-full .admin-save-row .btn{
  min-width:180px;
}
@media(max-width:900px){
  .tribe-card-head{grid-template-columns:1fr}
  .admin-real-card-row{grid-template-columns:74px 1fr 1fr}
  .admin-real-card-row label:nth-of-type(3),
  .admin-real-card-row label:nth-of-type(4){grid-column:auto}
}
@media(max-width:560px){
  .admin-real-card-row{grid-template-columns:1fr 1fr;align-items:start}
  .admin-real-card-preview{grid-column:1/-1;display:flex;justify-content:flex-start;align-items:center}
  .admin-real-card-preview img{width:48px;height:70px}
  .admin-real-card-row label{font-size:12px}
  .admin-real-card-row input,.admin-real-card-row select{padding:8px}
}

/* ===== Improved score conversion settings ===== */
.score-map-note{
  background:#fff7dd;
  border:1px solid #e6c681;
  color:#513616;
  border-radius:16px;
  padding:10px 12px;
  font-weight:900;
  line-height:1.8;
  margin-bottom:12px;
}
.score-map-grid-improved{
  align-items:stretch;
}
.score-map-box-improved{
  padding:0;
  overflow:hidden;
  background:linear-gradient(180deg,#fffef9,#fff8e8);
}
.score-map-card-head{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:8px;
  align-items:center;
  padding:12px;
  background:linear-gradient(180deg,#123a2b,#0d211a);
  color:#f5dfaa;
}
.score-map-card-head h4{
  margin:0;
  color:#f5dfaa;
  font-size:19px;
}
.score-map-card-head div{
  min-width:74px;
  text-align:center;
  border:1px solid rgba(236,204,126,.35);
  border-radius:12px;
  padding:6px 8px;
  background:rgba(255,255,255,.06);
}
.score-map-card-head span{
  display:block;
  font-size:11px;
  color:#e7cf97;
  font-weight:900;
}
.score-map-card-head b{
  display:block;
  font-size:18px;
  color:#fff6cf;
}
.score-map-rows{
  display:grid;
  gap:9px;
  padding:12px;
}
.score-map-row{
  display:grid;
  grid-template-columns:1fr 112px 68px;
  gap:10px;
  align-items:center;
  padding:10px;
  background:#fff;
  border:1px solid #ead4a4;
  border-radius:16px;
  box-shadow:0 5px 12px rgba(0,0,0,.05);
}
.score-range-badge{
  display:flex;
  align-items:center;
  gap:7px;
  justify-content:center;
  background:#fff8e3;
  border:1px solid #ebd29b;
  border-radius:14px;
  padding:8px;
  color:#5b3d1d;
  font-weight:900;
}
.score-range-badge span{
  font-size:12px;
  color:#7e6238;
}
.score-range-badge b{
  min-width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:linear-gradient(180deg,#fff,#f1dfb6);
  border:1px solid #dfc286;
  font-size:16px;
}
.score-map-input{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px;
  align-items:center;
  font-weight:900;
  color:#4d3316;
}
.score-map-input input{
  width:100%;
  min-width:0;
  height:42px;
  border:1px solid #d7bd87;
  border-radius:12px;
  padding:8px 10px;
  background:#fffaf0;
  font-size:16px;
  font-weight:900;
  text-align:center;
}
.score-map-row small{
  color:#86683d;
  font-weight:900;
  text-align:center;
}
@media(max-width:900px){
  .score-map-card-head{grid-template-columns:1fr 1fr 1fr;}
  .score-map-card-head h4{grid-column:1/-1;text-align:center;}
  .score-map-row{grid-template-columns:1fr;}
  .score-map-row small{display:none;}
}

/* Card set manager */
.card-set-manager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.card-set-box{background:#fffdf7;border:1px solid #e4c88f;border-radius:18px;padding:12px;display:grid;gap:10px}
.card-set-box h4{margin:0;color:#0d5f34;font-size:18px}.card-set-box small{color:#6d4a25;font-weight:800;line-height:1.7}.set-picker-row{display:flex;align-items:end;gap:10px;margin:10px 0 12px;flex-wrap:wrap}.set-picker-row label{display:grid;gap:6px;font-weight:900;color:#4b3117;min-width:220px}.set-picker-row select{border:1px solid #d7bd87;border-radius:13px;padding:10px;background:#fffaf0}.card-theme-panel .theme-options{display:grid;gap:10px}.card-theme-panel .theme-option{grid-template-columns:115px 1fr}.theme-option small{direction:ltr;text-align:right}
@media(max-width:900px){.card-set-manager{grid-template-columns:1fr}.set-picker-row label{min-width:100%;}.set-picker-row .btn{width:100%}}
@media(max-width:520px){.card-set-box{border-radius:16px;padding:10px}.card-theme-panel .theme-option{grid-template-columns:1fr}.theme-preview{justify-content:flex-start}}

/* ===== Admin score conversion full-number control ===== */
.score-map-full-control{
  display:grid;
  grid-template-columns:repeat(3,minmax(260px,1fr));
  gap:14px;
}
.score-map-box-control{
  background:#fffdf7;
  border:1px solid #e7c47d;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 8px 18px rgba(86,52,18,.08);
}
.score-map-control-head{
  display:grid;
  gap:12px;
  padding:14px 16px;
  background:linear-gradient(180deg,#093923,#0d261d);
  color:#f7e4ad;
}
.score-map-control-head h4{
  margin:0;
  font-size:20px;
  color:#f7e4ad;
}
.score-map-head-inputs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.score-map-head-inputs label,
.score-map-edit-row label{
  display:grid;
  gap:5px;
  font-weight:900;
}
.score-map-head-inputs input{
  width:100%;
  border:1px solid rgba(255,223,152,.55);
  border-radius:14px;
  padding:10px;
  background:#fff8e4;
  color:#2c1b10;
  font-weight:900;
  font-size:18px;
  text-align:center;
}
.score-map-rows{
  display:grid;
  gap:10px;
  padding:12px;
}
.score-map-edit-row{
  display:grid;
  grid-template-columns:1.5fr .8fr;
  gap:10px;
  align-items:end;
  padding:11px;
  border:1px solid #ead2a2;
  border-radius:16px;
  background:linear-gradient(180deg,#fffaf0,#fff6e0);
}
.score-map-edit-range{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.score-map-edit-row input{
  width:100%;
  border:1px solid #d8b56f;
  border-radius:12px;
  padding:9px;
  background:#fff;
  font-weight:900;
  font-size:16px;
  text-align:center;
}
.score-map-edit-register input{
  background:#fff4cf;
  color:#6a3e00;
}
@media(max-width:900px){
  .score-map-full-control{grid-template-columns:1fr;}
}
@media(max-width:520px){
  .score-map-edit-row{grid-template-columns:1fr;}
  .score-map-head-inputs{grid-template-columns:1fr;}
}

/* ===== Clean card sets manager admin UI ===== */
.admin-section:has(.card-set-manager-clean){overflow:hidden}
.card-set-manager-clean{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;align-items:stretch;margin-bottom:14px}
.card-set-manager-clean .card-set-box{background:linear-gradient(180deg,#fffef8,#f7ecd5);border:1px solid #e5c88d;border-radius:22px;padding:14px;box-shadow:0 8px 18px rgba(0,0,0,.07);min-width:0}
.card-set-box-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;border-bottom:1px solid #ead7ad;padding-bottom:10px}
.card-set-box-head h4{margin:0;color:#0d5f34;font-size:19px}.card-set-box-head span{background:#fff5d6;border:1px solid #e3c27c;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;color:#6b471e;white-space:nowrap}
.card-set-form-row{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:10px;align-items:end}.card-set-form-row.single{grid-template-columns:1fr 1fr}
.card-set-form-row label{display:grid;gap:7px;font-weight:900;color:#4b3117;min-width:0}.card-set-form-row input{width:100%;min-width:0;border:1px solid #d7bd87;border-radius:14px;padding:11px 12px;background:#fffaf0;outline:none}
.full-row-btn{width:100%;margin-top:12px}.help-line{display:block;margin-top:10px;color:#6c4b25;font-weight:900;line-height:1.7;text-align:center}
.clean-note{margin:12px 0;background:#fff8d4;border:1px solid #f0ca4e;border-radius:16px;padding:12px 14px;text-align:center;font-weight:900;color:#5d3e17;line-height:1.8}
.clean-set-picker{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:10px;align-items:end;margin:12px 0}.clean-set-picker label{display:grid;gap:7px;font-weight:900;color:#4b3117}.clean-set-picker select{width:100%;border:1px solid #d7bd87;border-radius:14px;padding:11px 12px;background:#fffaf0}
.clean-image-upload-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;overflow:visible}.clean-card-upload{background:#fffdf7;border:1px solid #e4c88f;border-radius:18px;padding:12px;display:grid;gap:9px;align-items:center;text-align:center;min-width:0;box-shadow:0 8px 16px rgba(0,0,0,.06)}
.upload-card-preview{height:92px;display:flex;align-items:center;justify-content:center}.clean-card-upload img{width:54px;height:78px;object-fit:contain;background:#fff;border-radius:7px;box-shadow:0 5px 11px rgba(0,0,0,.14)}
.upload-card-info b{display:block;color:#3d2814;font-size:14px}.upload-card-info small{display:block;color:#846849;font-size:11px;direction:ltr;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-pill input{display:none}.file-pill span{display:block;border:1px dashed #d4b06f;background:#fff8e8;border-radius:13px;padding:9px 8px;font-size:12px;font-weight:900;color:#5d3d18;cursor:pointer}.upload-card-btn{padding:10px 8px!important;border-radius:14px!important;font-size:13px!important}
@media(max-width:900px){.card-set-manager-clean{grid-template-columns:1fr}.card-set-form-row,.card-set-form-row.single{grid-template-columns:1fr}.clean-set-picker{grid-template-columns:1fr}.clean-set-picker .btn{width:100%}.clean-image-upload-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card-set-box-head{align-items:flex-start}.card-set-box-head span{white-space:normal;text-align:center}}
@media(max-width:520px){.admin-main{overflow-x:hidden}.admin-section:has(.card-set-manager-clean){padding:10px}.card-set-box-head{display:grid}.card-set-box-head h4{font-size:17px}.clean-card-upload{padding:9px;border-radius:15px}.upload-card-preview{height:78px}.clean-card-upload img{width:46px;height:66px}.file-pill span{padding:8px 5px;font-size:11px}.upload-card-btn{font-size:12px!important}.clean-image-upload-grid{gap:8px}.help-line,.clean-note{font-size:12px}.card-set-form-row input,.clean-set-picker select{padding:10px}}

/* منع تكرار تأثير لمّ الأوراق لنفس اللفة */
.played.completed-trick.no-collect-animation .played-card,
.played.completed-trick.no-collect-animation .collect-label{
  animation:none !important;
}
.played.completed-trick.no-collect-animation .played-card{
  opacity:1 !important;
}

/* ===== Room skins and fixed-room admin ===== */
.table-scene.has-room-skin{
  background-image:linear-gradient(180deg,rgba(23,12,6,.18),rgba(23,12,6,.25)),var(--room-bg)!important;
  background-size:cover!important;
  background-position:center!important;
}
.table-scene.has-room-skin:before{opacity:.10!important}
.table-scene.has-room-skin:after{background:rgba(255,255,255,.05)!important}
.admin-room-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin-top:16px}
.admin-room-card{background:linear-gradient(180deg,#fffdf6,#f3e1bd);border:1px solid #e0bc7b;border-radius:22px;padding:14px;box-shadow:0 8px 22px rgba(0,0,0,.12);overflow:hidden}
.admin-room-preview{height:220px;border-radius:18px;overflow:hidden;border:1px solid #d3ad69;background:#1d1209;margin-bottom:12px}
.admin-room-preview img{width:100%;height:100%;object-fit:cover;display:block}
.admin-room-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.admin-room-fields label{display:grid;gap:6px;font-weight:900;color:#523515;font-size:13px}
.admin-room-fields input,.admin-room-fields select{width:100%;border:1px solid #d5b170;border-radius:12px;background:#fffaf0;padding:10px}
.admin-room-fields button{grid-column:1/-1}
.room-skin-upload{align-items:end}
.fouja-btn{display:block;width:100%;max-width:220px;margin:10px auto 0;background:linear-gradient(180deg,#ffdf62,#d0a117);color:#3b2509;border-radius:18px}
.fouja-modal .game-modal-body{max-height:70vh;overflow:auto}
.fouja-grid{display:grid;gap:12px}
.fouja-trick{border:1px solid #dfc18b;border-radius:18px;background:#fffaf0;padding:10px;text-align:center}
.fouja-trick h4{margin:0 0 8px;color:#684315}
.fouja-trick>div{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.fouja-card{width:54px;height:76px;border:1px solid #c9aa70;border-radius:9px;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.12);font-weight:900;font-size:16px;cursor:pointer}
.fouja-card b{display:block;font-size:20px;line-height:1}.fouja-card span{display:block;margin-top:8px}
@media(max-width:760px){
  .admin-room-grid{grid-template-columns:1fr}.admin-room-preview{height:200px}.admin-room-fields{grid-template-columns:1fr}.room-skin-upload{grid-template-columns:1fr!important}
}
.room-mini-skin{height:92px;border-radius:18px;overflow:hidden;margin-bottom:10px;border:1px solid rgba(205,164,86,.55);background:#1d1209}
.room-mini-skin img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== Room skin final display and room admin cleanup ===== */
.game-phone .table-scene.has-room-skin{
  background-color:#1b1008!important;
  background-image:linear-gradient(180deg,rgba(23,12,6,.06),rgba(23,12,6,.14)),var(--room-bg)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.game-phone .table-scene.has-room-skin:before{
  opacity:0!important;
  display:none!important;
}
.game-phone .table-scene.has-room-skin:after{
  opacity:.08!important;
}
.room-admin-tools-clean .admin-section-title{
  align-items:center;
}
.room-admin-actions-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:12px 0;
}
.room-card-actions{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.admin-room-fields label input[disabled]{
  color:#6b4b2a;
  background:#fff6df;
}
@media(max-width:760px){
  .room-admin-actions-row,
  .room-card-actions{grid-template-columns:1fr}
}

/* ===== Room skin real layer + chair alignment + cache update ===== */
.game-phone .table-scene.has-room-skin{
  background:#160d07 !important;
}
.game-phone .table-scene.has-room-skin .room-skin-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  display:block;
  z-index:0;
  pointer-events:none;
  user-select:none;
}
.game-phone .table-scene.has-room-skin:before,
.game-phone .table-scene.has-room-skin:after{
  display:none !important;
}
.game-phone .table-scene.has-room-skin .judge-banner,
.game-phone .table-scene.has-room-skin .seat,
.game-phone .table-scene.has-room-skin .played,
.game-phone .table-scene.has-room-skin .hand,
.game-phone .table-scene.has-room-skin .mini-log,
.game-phone .table-scene.has-room-skin .hand-hint{
  position:absolute;
}
.game-phone .table-scene.has-room-skin .judge-banner{z-index:20;top:14px!important;}
.game-phone .table-scene.has-room-skin .seat{z-index:12;}
.game-phone .table-scene.has-room-skin .seat.top{
  top:118px!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
}
.game-phone .table-scene.has-room-skin .seat.left{
  top:50%!important;
  left:8px!important;
  right:auto!important;
  transform:translateY(-50%)!important;
}
.game-phone .table-scene.has-room-skin .seat.right{
  top:50%!important;
  right:8px!important;
  left:auto!important;
  transform:translateY(-50%)!important;
}
.game-phone .table-scene.has-room-skin .seat.me{
  bottom:86px!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
}
.game-phone .table-scene.has-room-skin .played{
  z-index:10;
}
.game-phone .table-scene.has-room-skin .hand{
  z-index:18;
}
@media(max-width:390px){
  .game-phone .table-scene.has-room-skin .seat.top{top:110px!important;}
  .game-phone .table-scene.has-room-skin .seat.me{bottom:78px!important;}
  .game-phone .table-scene.has-room-skin .seat.left{left:4px!important;}
  .game-phone .table-scene.has-room-skin .seat.right{right:4px!important;}
}


/* ===== Ultra visual polish for gameplay only (no logic changes) ===== */
.game-phone{
  background:
    radial-gradient(circle at top, rgba(40,67,43,.9) 0%, rgba(30,18,12,.96) 20%, #120a07 100%) !important;
}
.game-phone .content.game-content{
  padding:10px 10px 14px !important;
  gap:10px !important;
}
.game-phone .game-top.game-top-actions{
  grid-template-columns:56px 56px 1fr 56px 56px !important;
  gap:7px !important;
  padding:8px 10px !important;
  min-height:60px !important;
  background:linear-gradient(180deg,#4b2b17 0%, #28140b 100%) !important;
  border-bottom:2px solid rgba(214,176,86,.62) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
}
.game-phone .game-top.game-top-actions .title{
  font-size:18px !important;
  color:#f6dfad !important;
  text-shadow:0 2px 6px rgba(0,0,0,.3) !important;
}
.game-phone .game-top.game-top-actions .top-icon{
  min-height:38px !important;
  padding:8px 4px !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,#fffdf9,#e8cf9b) !important;
  border:1px solid rgba(142,97,29,.45) !important;
  color:#4a2b15 !important;
  font-size:12px !important;
  font-weight:900 !important;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.08), 0 8px 14px rgba(0,0,0,.14) !important;
}
.game-phone .game-top.game-top-actions .top-exit{
  background:linear-gradient(180deg,#fff0d2,#f2d9aa) !important;
  color:#642413 !important;
}

.game-phone .game-header-score{
  border-radius:26px !important;
  padding:10px 12px !important;
  background:linear-gradient(180deg,#0f3b2c 0%,#103427 52%,#0b241c 100%) !important;
  border:1px solid rgba(226,193,116,.78) !important;
  box-shadow:0 14px 26px rgba(0,0,0,.24) !important;
}
.game-phone .score-shell{
  gap:10px !important;
}
.game-phone .score-team{
  border-radius:20px !important;
  padding:9px 10px !important;
  background:linear-gradient(180deg,rgba(255,251,241,.08),rgba(255,228,167,.03)) !important;
  border:1px solid rgba(231,196,105,.34) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.game-phone .score-team span{font-size:15px !important;}
.game-phone .score-team b{font-size:36px !important;}
.game-phone .score-team small{font-size:13px !important;}
.game-phone .score-meta .room-name{font-size:16px !important;}
.game-phone .score-meta .room-phase{
  font-size:12px !important;
  line-height:1.85 !important;
  color:#ebddb6 !important;
}

.game-phone .table-scene{
  min-height:590px !important;
  height:590px !important;
  border-radius:34px !important;
  border:1px solid rgba(214,175,88,.72) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), 0 18px 40px rgba(0,0,0,.35) !important;
  background:radial-gradient(circle at center,#694528 0%,#2a1a11 60%,#130c08 100%) !important;
}
.game-phone .table-scene.has-room-skin{
  background:#160d07 !important;
}
.game-phone .table-scene.has-room-skin .room-skin-layer{
  object-fit:fill !important;
  filter:saturate(1.03) contrast(1.03) brightness(.98) !important;
}

.game-phone .judge-banner{
  top:14px !important;
  min-width:220px !important;
  max-width:82% !important;
  padding:14px 24px !important;
  border-radius:28px !important;
  background:linear-gradient(180deg,rgba(255,249,237,.98),rgba(239,220,177,.97)) !important;
  border:2px solid rgba(207,166,87,.92) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.24) !important;
  backdrop-filter:blur(4px);
}
.game-phone .judge-banner span{
  font-size:13px !important;
  color:#79602d !important;
}
.game-phone .judge-banner b{
  font-size:32px !important;
  color:#8b1d20 !important;
  letter-spacing:.2px !important;
}
.game-phone .judge-banner small{
  display:none !important;
}

.game-phone .seat{
  width:108px !important;
}
.game-phone .avatar{
  width:60px !important;
  height:60px !important;
  border-width:4px !important;
  box-shadow:0 10px 18px rgba(0,0,0,.22), 0 0 0 4px rgba(255,255,255,.06) !important;
}
.game-phone .seat-name{
  margin-top:7px !important;
  padding:8px 7px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,rgba(255,231,103,.98),rgba(239,187,29,.98)) !important;
  border:2px solid #7d5e18 !important;
  box-shadow:0 10px 18px rgba(0,0,0,.16) !important;
}
.game-phone .seat-name strong{
  font-size:13px !important;
  line-height:1.2 !important;
}
.game-phone .seat-name small{
  font-size:10px !important;
  line-height:1.3 !important;
  color:#4b3414 !important;
}
.game-phone .take-seat{
  border-radius:999px !important;
  padding:6px 12px !important;
  font-size:11px !important;
  box-shadow:0 8px 14px rgba(0,0,0,.18) !important;
}
.game-phone .turn-timer{
  box-shadow:0 10px 18px rgba(0,0,0,.25) !important;
}
.game-phone .turn-pointer{
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.3)) !important;
}

.game-phone .played{
  width:214px !important;
  height:214px !important;
  padding:8px !important;
}
.game-phone .played.empty-played{
  width:184px !important;
  height:116px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04)) !important;
  border:1px dashed rgba(255,227,159,.42) !important;
  border-radius:24px !important;
  color:#f3e2b2 !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04) !important;
}
.game-phone .played .game-card-img,
.game-phone .played-card .game-card-img,
.game-phone .played-card img{
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.28));
}
.game-phone .played-card small{
  background:rgba(36,22,12,.68) !important;
  color:#ffe7bb !important;
  border:1px solid rgba(255,210,118,.18) !important;
}

.game-phone .hand.sorted-hand{
  height:126px !important;
  bottom:8px !important;
}
.game-phone .hand.sorted-hand .hand-card{
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.25));
  transition:transform .18s ease, filter .18s ease !important;
}
.game-phone .hand.sorted-hand .hand-card:hover,
.game-phone .hand.sorted-hand .hand-card.selected-card{
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.32));
}
.game-phone .hand.sorted-hand .hand-card.selected-card{
  transform:translateX(calc(-50% + var(--x,0px))) translateY(calc(var(--y,0px) - 18px)) rotate(var(--r,0deg)) !important;
}
.game-phone .hand.sorted-hand .hand-card img{
  border-radius:12px !important;
  box-shadow:0 5px 10px rgba(0,0,0,.15) inset !important;
}
.game-phone .hand-hint{
  bottom:102px !important;
  background:rgba(28,18,11,.84) !important;
  color:#ffefc7 !important;
  border:1px solid rgba(214,174,86,.35) !important;
  padding:6px 14px !important;
  border-radius:999px !important;
  font-size:11px !important;
}

.game-phone .room-buttons{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  min-height:0 !important;
  margin-top:2px !important;
}
.game-phone .bid-actions{
  padding:14px 14px 16px !important;
  border-radius:28px !important;
  background:linear-gradient(180deg,rgba(255,249,238,.98),rgba(244,228,193,.98)) !important;
  border:1px solid rgba(217,177,96,.68) !important;
  box-shadow:0 12px 24px rgba(0,0,0,.14) !important;
}
.game-phone .bid-title{
  margin-bottom:12px !important;
  padding-bottom:0 !important;
  text-align:center !important;
  font-size:20px !important;
  line-height:1.5 !important;
  color:#3d2914 !important;
}
.game-phone .spectator-title{
  color:#3d2914 !important;
}
.game-phone .bid-controls-bar{
  grid-template-columns:1fr 1.1fr 1.3fr !important;
  gap:10px !important;
}
.game-phone .bid-controls-bar .bid-btn,
.game-phone .bid-dropdown-wrap > .bid-btn{
  min-height:58px !important;
  height:58px !important;
  border-radius:19px !important;
  padding:0 10px !important;
  font-size:16px !important;
  line-height:1.18 !important;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 10px 16px rgba(0,0,0,.14) !important;
}
.game-phone .bid-pass{
  background:linear-gradient(180deg,#ffffff,#f1e6d3) !important;
  color:#3c2814 !important;
}
.game-phone .bid-hokum{
  background:linear-gradient(180deg,#3ee35f,#0c8b44) !important;
  color:#fff !important;
}
.game-phone .bid-double{
  background:linear-gradient(180deg,#5f3b27,#28160d) !important;
  color:#fff !important;
  font-size:15px !important;
}
.game-phone .bid-dropdown-wrap{
  position:relative !important;
}
.game-phone .bid-panel{
  width:min(200px,80vw) !important;
  bottom:68px !important;
  padding:9px !important;
  border-radius:18px !important;
  background:rgba(54,36,26,.97) !important;
  border:1px solid rgba(255,231,179,.18) !important;
  box-shadow:0 18px 34px rgba(0,0,0,.35) !important;
}
.game-phone .bid-choice{
  min-height:42px !important;
  border-radius:12px !important;
  font-size:15px !important;
  color:#fff5d8 !important;
}
.game-phone .bid-choice:hover,
.game-phone .bid-choice:active{
  background:rgba(255,255,255,.12) !important;
}
.game-phone .bid-choice .bid-icon{
  width:24px !important;
  font-size:18px !important;
}
.game-phone .fouja-btn{
  min-height:50px !important;
  font-size:16px !important;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12), 0 10px 16px rgba(0,0,0,.16) !important;
}
.game-phone #toast{
  border-radius:18px !important;
  box-shadow:0 12px 24px rgba(0,0,0,.18) !important;
}

.game-phone .game-modal{
  border-radius:28px !important;
  box-shadow:0 26px 54px rgba(0,0,0,.38) !important;
}
.game-phone .game-modal-head{
  padding:16px 20px !important;
}
.game-phone .game-modal-head h3{
  font-size:28px !important;
}

@media(max-width:420px){
  .game-phone .table-scene{min-height:575px !important;height:575px !important;}
  .game-phone .judge-banner{min-width:210px !important;max-width:84% !important;padding:13px 18px !important;}
  .game-phone .judge-banner b{font-size:28px !important;}
  .game-phone .seat{width:102px !important;}
  .game-phone .avatar{width:56px !important;height:56px !important;}
  .game-phone .hand.sorted-hand{height:120px !important;}
  .game-phone .hand.sorted-hand .hand-card{width:58px !important;height:84px !important;}
  .game-phone .bid-actions{padding:13px 12px 15px !important;}
}
@media(max-width:390px){
  .game-phone .game-top.game-top-actions{
    grid-template-columns:50px 50px 1fr 50px 50px !important;
    gap:5px !important;
    padding:8px 8px !important;
  }
  .game-phone .game-top.game-top-actions .title{font-size:16px !important;}
  .game-phone .game-top.game-top-actions .top-icon{font-size:11px !important;min-height:36px !important;}
  .game-phone .table-scene{min-height:548px !important;height:548px !important;}
  .game-phone .judge-banner{top:12px !important;min-width:195px !important;padding:12px 16px !important;}
  .game-phone .judge-banner b{font-size:26px !important;}
  .game-phone .seat{width:94px !important;}
  .game-phone .seat-name{padding:6px 5px !important;}
  .game-phone .seat-name strong{font-size:12px !important;}
  .game-phone .seat-name small{font-size:9px !important;}
  .game-phone .played{width:198px !important;height:198px !important;}
  .game-phone .played.empty-played{width:172px !important;height:104px !important;}
  .game-phone .hand.sorted-hand{height:114px !important;}
  .game-phone .hand.sorted-hand .hand-card{width:54px !important;height:78px !important;}
  .game-phone .hand-hint{bottom:92px !important;}
  .game-phone .bid-title{font-size:18px !important;}
  .game-phone .bid-controls-bar{gap:8px !important;grid-template-columns:1fr 1.02fr 1.22fr !important;}
  .game-phone .bid-controls-bar .bid-btn,
  .game-phone .bid-dropdown-wrap > .bid-btn{min-height:54px !important;height:54px !important;font-size:14px !important;}
  .game-phone .bid-double{font-size:13px !important;}
}


/* ===== Clean tester build: stable room skin + no empty hints ===== */
.game-phone .table-scene.has-room-skin .room-skin-layer{
  will-change:auto !important;
  transform:translateZ(0) !important;
  backface-visibility:hidden !important;
  opacity:1 !important;
  transition:none !important;
}
.game-phone .table-scene .table-dynamic-layer{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.game-phone .table-scene .table-dynamic-layer .judge-banner,
.game-phone .table-scene .table-dynamic-layer .seat,
.game-phone .table-scene .table-dynamic-layer .played,
.game-phone .table-scene .table-dynamic-layer .hand,
.game-phone .table-scene .table-dynamic-layer .mini-log,
.game-phone .table-scene .table-dynamic-layer .hand-hint{
  pointer-events:auto;
}
.game-phone .played.empty-played{
  color:transparent !important;
  background:rgba(255,255,255,.045) !important;
}
.game-phone .played.empty-played::before,
.game-phone .played.empty-played::after{
  content:none !important;
}

/* === game room visual polish footer chat v2 === */
body{overflow-x:hidden}
.page:has(.game-phone){padding:0!important;min-height:100dvh;align-items:stretch;justify-content:center;background:linear-gradient(180deg,#ede5d8,#c9b089)}
.game-phone{
  width:min(430px,100vw)!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  display:flex!important;
  flex-direction:column!important;
  border-radius:0!important;
  overflow:hidden!important;
}
.game-phone .game-content{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:8px 8px 0!important;
  gap:8px;
  overflow:hidden;
}
.game-phone .status-line.compact.game-header-score{margin:0!important}
.game-phone .table-scene{
  flex:1 1 auto;
  min-height:0!important;
  height:auto!important;
  margin:0;
  border-radius:26px 26px 18px 18px!important;
}
.game-phone .game-footer{
  flex:0 0 auto;
  padding:8px 8px calc(env(safe-area-inset-bottom,0px) + 8px);
  background:linear-gradient(180deg,rgba(58,29,13,.98),rgba(28,14,7,1));
  border-top:2px solid rgba(231,190,118,.45);
  box-shadow:0 -10px 22px rgba(0,0,0,.20);
}
.game-phone .footer-actions.bid-actions{
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  display:block!important;
  min-height:auto!important;
  max-height:none!important;
}
.game-phone .compact-bid-row.compact-bid-row-4{
  display:grid!important;
  grid-template-columns:1fr 1fr 1.18fr 1fr!important;
  gap:8px!important;
  align-items:center!important;
}
.game-phone .footer-note{
  background:#f7eed8;
  color:#51351d;
  border:1px solid #dfc48a;
  border-radius:16px;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  font-size:15px;
  font-weight:900;
  text-align:center;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.08);
}
.game-phone .footer-note-full{grid-column:2 / -1!important}.game-phone .footer-note-wide{grid-column:3 / -1!important}
.game-phone .bid-controls-bar,.game-phone .bid-title{display:none!important}
.game-phone .bid-btn{
  width:100%!important;
  min-height:52px!important;
  padding:10px 8px!important;
  border-radius:16px!important;
  font-size:17px!important;
  font-weight:900!important;
  line-height:1.15!important;
}
.game-phone .bid-pass{background:linear-gradient(180deg,#fffef6,#ece4cf)!important;color:#2e1c12!important}
.game-phone .bid-hokum{background:linear-gradient(180deg,#49db5b,#169d33)!important;color:#fff!important}
.game-phone .bid-double{background:linear-gradient(180deg,#5c3a23,#2e180d)!important;color:#fff!important}
.game-phone .bid-chat{background:linear-gradient(180deg,#1fa8ff,#0a6cb8)!important;color:#fff!important}
.game-phone .bid-spacer{display:block!important;min-height:52px!important;opacity:0;pointer-events:none}
.game-phone .bid-dropdown-wrap{position:relative!important;width:100%!important}
.game-phone .bid-dropdown-wrap > .bid-btn{width:100%!important}
.game-phone .bid-panel{
  bottom:calc(100% + 10px)!important;
  top:auto!important;
  right:0!important;
  left:0!important;
  min-width:0!important;
  background:rgba(29,16,8,.98)!important;
  border:1px solid rgba(250,214,146,.8)!important;
  border-radius:18px!important;
  padding:8px!important;
}
.game-phone .bid-choice{padding:10px 12px!important}
.game-phone .room-buttons{margin:0!important}
.game-phone .room-buttons:has(#startBtn.hidden){display:none!important}
.game-phone .room-buttons #startBtn{width:100%;min-height:50px}
.game-phone .table-scene.has-room-skin .judge-banner,
.game-phone .judge-banner{
  top:14px!important;
  right:50%!important;
  transform:translateX(50%)!important;
  min-width:auto!important;
  max-width:calc(100% - 34px);
  padding:10px 16px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(255,247,222,.98),rgba(244,233,207,.95))!important;
  border:2px solid rgba(222,184,109,.92)!important;
  box-shadow:0 8px 20px rgba(64,35,15,.24)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
}
.game-phone .judge-banner span,
.game-phone .judge-banner b{display:inline-block!important}
.game-phone .judge-banner span{font-size:14px!important;color:#6b4a1e!important}
.game-phone .judge-banner b{font-size:26px!important;color:#9d1d1f!important}
.game-phone .table-scene.has-room-skin .seat.top,
.game-phone .seat.top{top:82px!important;width:90px!important}
.game-phone .table-scene.has-room-skin .seat.left,
.game-phone .seat.left{top:220px!important;left:10px!important;width:88px!important}
.game-phone .table-scene.has-room-skin .seat.right,
.game-phone .seat.right{top:220px!important;right:10px!important;width:88px!important}
.game-phone .table-scene.has-room-skin .seat.me,
.game-phone .seat.me{bottom:106px!important;width:94px!important}
.game-phone .seat-name{background:linear-gradient(180deg,#ffe97d,#f7cf4f)!important;border:2px solid #9b7720!important;border-radius:16px!important;padding:8px 6px!important;color:#3b240f!important;box-shadow:0 5px 12px rgba(0,0,0,.18)!important}
.game-phone .seat-name strong{display:block;font-size:14px;line-height:1.1;margin-bottom:3px}
.game-phone .seat-name small{font-size:11px;line-height:1.2;color:#513517}
.game-phone .avatar{border:4px solid #ffc400!important;box-shadow:0 5px 10px rgba(0,0,0,.28)!important}
.game-phone .lead-badge,
.game-phone .seat-bid-badge,
.game-phone .dealer-badge{
  position:absolute;
  right:50%;
  transform:translateX(50%);
  background:linear-gradient(180deg,#fff7dc,#f4cf5a);
  color:#4c3213;
  border:2px solid #b98619;
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  box-shadow:0 4px 9px rgba(0,0,0,.18);
}
.game-phone .seat-bid-badge{top:-14px}
.game-phone .lead-badge{top:40px;background:linear-gradient(180deg,#f7ffdb,#9de55a)}
.game-phone .dealer-badge{top:-8px;background:linear-gradient(180deg,#ffefb9,#ffbf3e)}
.game-phone .seat-chat-bubble{
  position:absolute;
  right:50%;
  transform:translateX(50%);
  top:-54px;
  max-width:118px;
  background:rgba(8,92,60,.96);
  color:#fff;
  border-radius:16px;
  padding:8px 10px;
  font-size:12px;
  line-height:1.4;
  text-align:center;
  box-shadow:0 8px 18px rgba(0,0,0,.24);
  z-index:30;
  animation:seatBubbleIn .18s ease-out;
}
.game-phone .seat-chat-bubble:after,
.game-phone .seat-bid-badge:after{
  content:"";
  position:absolute;
  right:50%;
  transform:translateX(50%);
  bottom:-8px;
  border-width:8px 7px 0 7px;
  border-style:solid;
  border-color:rgba(8,92,60,.96) transparent transparent transparent;
}
.game-phone .seat-bid-badge:after{border-color:#f4cf5a transparent transparent transparent}
@keyframes seatBubbleIn{from{opacity:0;transform:translateX(50%) translateY(6px)}to{opacity:1;transform:translateX(50%) translateY(0)}}
.game-phone .played{top:50%!important;transform:translate(50%,-40%)!important}
.game-phone .hand.hand-fan{bottom:6px!important;height:98px!important}
.game-phone .hand.hand-fan .hand-card{width:52px!important;height:78px!important}
.game-phone .chat-popover{
  position:absolute;
  right:10px;
  left:10px;
  bottom:92px;
  z-index:60;
  background:linear-gradient(180deg,#fff8e8,#f1e1bc);
  border:2px solid #d6b16d;
  border-radius:22px;
  box-shadow:0 16px 28px rgba(0,0,0,.28);
  padding:12px;
}
.game-phone .chat-popover-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:#4b3017;font-weight:900}
.game-phone .chat-close{border:0;background:#603813;color:#fff;border-radius:12px;padding:5px 10px;font-size:20px;line-height:1;cursor:pointer}
.game-phone .chat-input-row{display:grid;grid-template-columns:1fr 92px;gap:8px;align-items:center}
.game-phone .chat-send-btn{min-height:48px;padding:0 10px}
.game-phone .chat-note{display:block;margin-top:8px;color:#6a5231;text-align:center;font-weight:700}
@media (max-width:430px){
  .game-phone .game-top.game-top-actions{padding:8px 6px!important;gap:6px!important}
  .game-phone .game-top.game-top-actions .top-icon{font-size:11px!important;padding:8px 5px!important}
  .game-phone .game-top.game-top-actions .title{font-size:16px!important}
  .game-phone .compact-bid-row.compact-bid-row-4{grid-template-columns:1fr 1fr 1.18fr 1fr!important;gap:6px!important}
  .game-phone .bid-btn{font-size:15px!important;min-height:50px!important}
  .game-phone .footer-note{font-size:13px;min-height:50px;padding:8px}
  .game-phone .judge-banner span{font-size:12px!important}
  .game-phone .judge-banner b{font-size:23px!important}
  .game-phone .seat.left,.game-phone .seat.right{width:84px!important}
  .game-phone .seat.me{width:90px!important}
  .game-phone .seat-chat-bubble{max-width:104px;font-size:11px}
}

/* === emergency fix: keep table layer visible + remove top notch === */
.game-phone .notch{
  display:none!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}
.page:has(.game-phone){
  padding:0!important;
  margin:0!important;
  min-height:100dvh!important;
  overflow:hidden!important;
}
.game-phone{
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
}
.game-phone .table-scene.has-room-skin{
  background-image:var(--room-bg)!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-color:#160d07!important;
}
.game-phone .table-scene.has-room-skin .room-skin-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:1!important;
  pointer-events:none!important;
}
.game-phone .table-scene .table-dynamic-layer{
  position:absolute!important;
  inset:0!important;
  z-index:50!important;
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
  overflow:visible!important;
}
.game-phone .table-scene .table-dynamic-layer > *{
  opacity:1!important;
  visibility:visible!important;
}
.game-phone .table-scene .table-dynamic-layer .judge-banner,
.game-phone .table-scene .table-dynamic-layer .seat,
.game-phone .table-scene .table-dynamic-layer .played,
.game-phone .table-scene .table-dynamic-layer .hand,
.game-phone .table-scene .table-dynamic-layer .mini-log,
.game-phone .table-scene .table-dynamic-layer .hand-hint{
  pointer-events:auto!important;
}
.game-phone .game-top.game-top-actions{
  margin-top:0!important;
}
.game-phone .game-content{
  min-height:0!important;
  overflow:hidden!important;
}
.game-phone .table-scene{
  min-height:0!important;
  height:auto!important;
  flex:1 1 auto!important;
}
.game-phone .game-footer{
  z-index:80!important;
}
.game-phone .chat-popover,
.game-phone .game-modal-overlay{
  z-index:120!important;
}


/* === final fix: top judge rectangle width/alignment === */
.game-phone .table-scene .table-dynamic-layer .judge-banner,
.game-phone .table-scene.has-room-skin .judge-banner,
.game-phone .judge-banner{
  position:absolute!important;
  top:12px!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:auto!important;
  min-width:178px!important;
  max-width:calc(100% - 42px)!important;
  height:auto!important;
  min-height:0!important;
  writing-mode:horizontal-tb!important;
  white-space:nowrap!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:8px 16px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#fff7dd,#f3e2bd)!important;
  border:2px solid rgba(214,174,91,.95)!important;
  box-shadow:0 8px 18px rgba(38,18,7,.22)!important;
  z-index:90!important;
  overflow:hidden!important;
}
.game-phone .judge-banner span,
.game-phone .judge-banner b,
.game-phone .table-scene .table-dynamic-layer .judge-banner span,
.game-phone .table-scene .table-dynamic-layer .judge-banner b{
  display:inline-block!important;
  white-space:nowrap!important;
  writing-mode:horizontal-tb!important;
  line-height:1.1!important;
  margin:0!important;
}
.game-phone .judge-banner span,
.game-phone .table-scene .table-dynamic-layer .judge-banner span{
  font-size:12px!important;
  color:#6b4b22!important;
  font-weight:900!important;
}
.game-phone .judge-banner b,
.game-phone .table-scene .table-dynamic-layer .judge-banner b{
  font-size:22px!important;
  color:#981f22!important;
  font-weight:900!important;
}
.game-phone .judge-banner small,
.game-phone .table-scene .table-dynamic-layer .judge-banner small{
  display:none!important;
}
.game-phone .table-scene.has-room-skin .seat.top,
.game-phone .seat.top{
  top:78px!important;
}

/* === seat spacing fix: raise top player and lower bottom player === */
.game-phone .table-scene .table-dynamic-layer .seat.top,
.game-phone .table-scene.has-room-skin .seat.top,
.game-phone .seat.top{
  top:54px!important;
}
.game-phone .table-scene .table-dynamic-layer .seat.me,
.game-phone .table-scene.has-room-skin .seat.me,
.game-phone .seat.me{
  bottom:48px!important;
}
@media(max-width:430px){
  .game-phone .table-scene .table-dynamic-layer .seat.top,
  .game-phone .table-scene.has-room-skin .seat.top,
  .game-phone .seat.top{top:52px!important;}
  .game-phone .table-scene .table-dynamic-layer .seat.me,
  .game-phone .table-scene.has-room-skin .seat.me,
  .game-phone .seat.me{bottom:44px!important;}
}


/* === final hand containment fix === */
.game-phone .table-scene .table-dynamic-layer .seat.me,
.game-phone .table-scene.has-room-skin .seat.me,
.game-phone .seat.me{
  bottom:72px!important;
}
.game-phone .table-scene .table-dynamic-layer .hand,
.game-phone .table-scene.has-room-skin .hand,
.game-phone .hand.hand-fan,
.game-phone .hand.sorted-hand{
  bottom:8px!important;
  left:18px!important;
  right:18px!important;
  height:78px!important;
  overflow:visible!important;
  z-index:95!important;
}
.game-phone .hand.hand-fan .hand-card,
.game-phone .hand.sorted-hand .hand-card{
  width:var(--card-w,48px)!important;
  height:var(--card-h,72px)!important;
}
.game-phone .hand.hand-fan .hand-card img,
.game-phone .hand.sorted-hand .hand-card img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
.game-phone .hand.hand-fan .hand-card.selected-card,
.game-phone .hand.sorted-hand .hand-card.selected-card{
  transform:translateX(calc(-50% + var(--x,0px))) translateY(calc(var(--y,0px) - 13px)) rotate(var(--r,0deg))!important;
}
.game-phone .hand.hand-fan .hand-card:hover,
.game-phone .hand.sorted-hand .hand-card:hover{
  transform:translateX(calc(-50% + var(--x,0px))) translateY(calc(var(--y,0px) - 10px)) rotate(var(--r,0deg))!important;
}
@media(max-width:430px){
  .game-phone .table-scene .table-dynamic-layer .seat.me,
  .game-phone .table-scene.has-room-skin .seat.me,
  .game-phone .seat.me{bottom:68px!important;}
  .game-phone .table-scene .table-dynamic-layer .hand,
  .game-phone .table-scene.has-room-skin .hand,
  .game-phone .hand.hand-fan,
  .game-phone .hand.sorted-hand{left:14px!important;right:14px!important;bottom:7px!important;height:74px!important;}
}
@media(max-width:380px){
  .game-phone .hand.hand-fan .hand-card,
  .game-phone .hand.sorted-hand .hand-card{width:44px!important;height:66px!important;}
}

/* === precise table card area and side seat alignment fix only === */
.game-phone .table-scene .table-dynamic-layer .played,
.game-phone .table-scene.has-room-skin .played,
.game-phone .played{
  left:50%!important;
  right:auto!important;
  top:52%!important;
  transform:translate(-50%,-50%)!important;
  width:176px!important;
  height:176px!important;
  min-width:176px!important;
  min-height:176px!important;
  z-index:70!important;
}
.game-phone .table-scene .table-dynamic-layer .played.empty-played,
.game-phone .table-scene.has-room-skin .played.empty-played,
.game-phone .played.empty-played{
  left:50%!important;
  right:auto!important;
  top:52%!important;
  transform:translate(-50%,-50%)!important;
  width:156px!important;
  height:96px!important;
  min-width:156px!important;
  min-height:96px!important;
}
.game-phone .table-scene .table-dynamic-layer .seat.left,
.game-phone .table-scene.has-room-skin .seat.left,
.game-phone .seat.left{
  left:2px!important;
  right:auto!important;
  top:48%!important;
  transform:translateY(-50%)!important;
  width:78px!important;
  z-index:75!important;
}
.game-phone .table-scene .table-dynamic-layer .seat.right,
.game-phone .table-scene.has-room-skin .seat.right,
.game-phone .seat.right{
  right:2px!important;
  left:auto!important;
  top:48%!important;
  transform:translateY(-50%)!important;
  width:78px!important;
  z-index:75!important;
}
.game-phone .seat.left .seat-name,
.game-phone .seat.right .seat-name{
  padding:6px 4px!important;
  border-radius:14px!important;
}
.game-phone .seat.left .seat-name strong,
.game-phone .seat.right .seat-name strong{
  font-size:12px!important;
}
.game-phone .seat.left .seat-name small,
.game-phone .seat.right .seat-name small{
  font-size:9px!important;
}
.game-phone .seat.left .avatar,
.game-phone .seat.right .avatar{
  width:52px!important;
  height:52px!important;
}
@media(max-width:430px){
  .game-phone .table-scene .table-dynamic-layer .played,
  .game-phone .table-scene.has-room-skin .played,
  .game-phone .played{width:164px!important;height:164px!important;min-width:164px!important;min-height:164px!important;}
  .game-phone .table-scene .table-dynamic-layer .played.empty-played,
  .game-phone .table-scene.has-room-skin .played.empty-played,
  .game-phone .played.empty-played{width:148px!important;height:88px!important;min-width:148px!important;min-height:88px!important;}
  .game-phone .table-scene .table-dynamic-layer .seat.left,
  .game-phone .table-scene.has-room-skin .seat.left,
  .game-phone .seat.left{left:0!important;width:74px!important;}
  .game-phone .table-scene .table-dynamic-layer .seat.right,
  .game-phone .table-scene.has-room-skin .seat.right,
  .game-phone .seat.right{right:0!important;width:74px!important;}
}


/* === real final position correction: center table cards + push side players to edges === */
.game-phone .table-scene .table-dynamic-layer .played,
.game-phone .table-scene.has-room-skin .played,
.game-phone .table-scene .played{
  position:absolute!important;
  inset:auto!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:150px!important;
  height:150px!important;
  min-width:150px!important;
  min-height:150px!important;
  max-width:150px!important;
  max-height:150px!important;
  z-index:88!important;
  pointer-events:none!important;
}
.game-phone .table-scene .table-dynamic-layer .played.empty-played,
.game-phone .table-scene.has-room-skin .played.empty-played,
.game-phone .table-scene .played.empty-played{
  position:absolute!important;
  inset:auto!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:130px!important;
  height:80px!important;
  min-width:130px!important;
  min-height:80px!important;
  max-width:130px!important;
  max-height:80px!important;
  pointer-events:none!important;
}
.game-phone .table-scene .table-dynamic-layer .played-card{
  max-width:48px!important;
}
.game-phone .table-scene .table-dynamic-layer .played .game-card-img,
.game-phone .table-scene .table-dynamic-layer .played .game-card-img img{
  width:42px!important;
  height:60px!important;
}
.game-phone .table-scene .table-dynamic-layer .played-card.from-left{transform:translateX(-18px)!important;}
.game-phone .table-scene .table-dynamic-layer .played-card.from-right{transform:translateX(18px)!important;}
.game-phone .table-scene .table-dynamic-layer .played-card.from-top{transform:translateY(-16px)!important;}
.game-phone .table-scene .table-dynamic-layer .played-card.from-me{transform:translateY(16px)!important;}

.game-phone .table-scene .table-dynamic-layer .seat.left,
.game-phone .table-scene.has-room-skin .seat.left,
.game-phone .table-scene .seat.left{
  position:absolute!important;
  inset:auto!important;
  top:50%!important;
  left:6px!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  width:82px!important;
  max-width:82px!important;
  z-index:110!important;
}
.game-phone .table-scene .table-dynamic-layer .seat.right,
.game-phone .table-scene.has-room-skin .seat.right,
.game-phone .table-scene .seat.right{
  position:absolute!important;
  inset:auto!important;
  top:50%!important;
  right:6px!important;
  left:auto!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  width:82px!important;
  max-width:82px!important;
  z-index:110!important;
}
.game-phone .table-scene .table-dynamic-layer .seat.top,
.game-phone .table-scene.has-room-skin .seat.top,
.game-phone .table-scene .seat.top{
  position:absolute!important;
  inset:auto!important;
  top:83px!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  width:92px!important;
  max-width:92px!important;
  z-index:112!important;
}
.game-phone .table-scene .table-dynamic-layer .seat.me,
.game-phone .table-scene.has-room-skin .seat.me,
.game-phone .table-scene .seat.me{
  position:absolute!important;
  inset:auto!important;
  bottom:78px!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  transform:translateX(-50%)!important;
  width:94px!important;
  max-width:94px!important;
  z-index:112!important;
}
.game-phone .table-scene .table-dynamic-layer .seat.left .avatar,
.game-phone .table-scene .table-dynamic-layer .seat.right .avatar{
  width:48px!important;
  height:48px!important;
}
.game-phone .table-scene .table-dynamic-layer .seat.left .seat-name,
.game-phone .table-scene .table-dynamic-layer .seat.right .seat-name{
  width:82px!important;
  padding:5px 3px!important;
  border-radius:13px!important;
}
.game-phone .table-scene .table-dynamic-layer .seat.left .seat-name strong,
.game-phone .table-scene .table-dynamic-layer .seat.right .seat-name strong{font-size:11px!important;}
.game-phone .table-scene .table-dynamic-layer .seat.left .seat-name small,
.game-phone .table-scene .table-dynamic-layer .seat.right .seat-name small{font-size:8px!important;}
.game-phone .table-scene .table-dynamic-layer .seat-backs{width:62px!important;height:42px!important;}
.game-phone .table-scene .table-dynamic-layer .seat-backs img{width:25px!important;height:36px!important;}
.game-phone .table-scene .table-dynamic-layer .seat-backs em{width:22px!important;height:22px!important;font-size:11px!important;}
@media(max-width:390px){
  .game-phone .table-scene .table-dynamic-layer .seat.left,
  .game-phone .table-scene.has-room-skin .seat.left,
  .game-phone .table-scene .seat.left{left:3px!important;width:78px!important;max-width:78px!important;}
  .game-phone .table-scene .table-dynamic-layer .seat.right,
  .game-phone .table-scene.has-room-skin .seat.right,
  .game-phone .table-scene .seat.right{right:3px!important;width:78px!important;max-width:78px!important;}
  .game-phone .table-scene .table-dynamic-layer .played,
  .game-phone .table-scene.has-room-skin .played,
  .game-phone .table-scene .played{width:140px!important;height:140px!important;min-width:140px!important;min-height:140px!important;max-width:140px!important;max-height:140px!important;}
}

/* === Pixel-perfect scalable layout controlled from admin === */
.game-phone .table-scene .table-dynamic-layer .judge-banner,
.game-phone .table-scene.has-room-skin .judge-banner,
.game-phone .judge-banner{
  position:absolute!important;
  inset:auto!important;
  left:var(--layout-judge-x,50%)!important;
  top:var(--layout-judge-y,7.45%)!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  z-index:130!important;
}
.game-phone .table-scene .table-dynamic-layer .seat.top,
.game-phone .table-scene.has-room-skin .seat.top,
.game-phone .seat.top{
  position:absolute!important;
  inset:auto!important;
  left:var(--layout-seat-top-x,50%)!important;
  top:var(--layout-seat-top-y,15.59%)!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  z-index:112!important;
}
.game-phone .table-scene .table-dynamic-layer .seat.right,
.game-phone .table-scene.has-room-skin .seat.right,
.game-phone .seat.right{
  position:absolute!important;
  inset:auto!important;
  left:var(--layout-seat-right-x,85.64%)!important;
  top:var(--layout-seat-right-y,45.76%)!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  z-index:112!important;
}
.game-phone .table-scene .table-dynamic-layer .seat.me,
.game-phone .table-scene.has-room-skin .seat.me,
.game-phone .seat.me{
  position:absolute!important;
  inset:auto!important;
  left:var(--layout-seat-bottom-x,50%)!important;
  top:var(--layout-seat-bottom-y,77.63%)!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  z-index:112!important;
}
.game-phone .table-scene .table-dynamic-layer .seat.left,
.game-phone .table-scene.has-room-skin .seat.left,
.game-phone .seat.left{
  position:absolute!important;
  inset:auto!important;
  left:var(--layout-seat-left-x,14.36%)!important;
  top:var(--layout-seat-left-y,45.76%)!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  z-index:112!important;
}
.game-phone .table-scene .table-dynamic-layer .played,
.game-phone .table-scene.has-room-skin .played,
.game-phone .played{
  position:absolute!important;
  inset:auto!important;
  left:var(--layout-played-x,50%)!important;
  top:var(--layout-played-y,51.52%)!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:var(--layout-played-w,47.18%)!important;
  height:var(--layout-played-h,31.18%)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  z-index:90!important;
}
.game-phone .table-scene .table-dynamic-layer .played.empty-played,
.game-phone .table-scene.has-room-skin .played.empty-played,
.game-phone .played.empty-played{
  left:var(--layout-played-x,50%)!important;
  top:var(--layout-played-y,51.52%)!important;
  transform:translate(-50%,-50%)!important;
  width:calc(var(--layout-played-w,47.18%) * .78)!important;
  height:calc(var(--layout-played-h,31.18%) * .48)!important;
  max-width:none!important;
  max-height:none!important;
}
.game-phone .table-scene .table-dynamic-layer .hand,
.game-phone .table-scene.has-room-skin .hand,
.game-phone .hand{
  position:absolute!important;
  inset:auto!important;
  left:var(--layout-hand-x,50%)!important;
  top:var(--layout-hand-y,90.68%)!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  width:100%!important;
  z-index:122!important;
}
.game-phone .table-scene .table-dynamic-layer .seat,
.game-phone .table-scene.has-room-skin .seat,
.game-phone .seat{
  width:clamp(72px,24%,98px)!important;
  max-width:98px!important;
}
.game-phone .table-scene .table-dynamic-layer .seat.left,
.game-phone .table-scene .table-dynamic-layer .seat.right{
  width:clamp(70px,22%,92px)!important;
}

/* Admin pixel layout editor */
.pixel-layout-note{background:#fff8df;border:1px solid #e5c278;border-radius:16px;padding:12px;margin:0 0 12px;font-weight:900;color:#4b3017;line-height:1.8}
.pixel-layout-wrap{display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:start}
.pixel-layout-preview{position:relative;width:100%;aspect-ratio:390/590;border-radius:22px;border:2px solid #0b5c35;background:radial-gradient(circle at center,#155b37 0 42%,#a71f23 43% 58%,#d4ad52 59%);box-shadow:inset 0 0 0 8px rgba(255,255,255,.08),0 12px 28px rgba(0,0,0,.15);overflow:hidden}
.pixel-layout-preview:before{content:"";position:absolute;inset:8%;border:1px dashed rgba(255,255,255,.38);border-radius:18px}.px-seat,.px-judge,.px-played,.px-hand{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;text-align:center;font-weight:900}.px-seat{width:76px;height:54px;border-radius:16px;background:linear-gradient(180deg,#ffe87b,#efbd31);border:2px solid #744f13;color:#3b250b;box-shadow:0 8px 14px rgba(0,0,0,.18)}.px-judge{width:132px;height:38px;border-radius:999px;background:#fff3cf;border:2px solid #d6ad63;color:#8c1f1f}.px-played{width:47%;height:31%;border-radius:18px;background:rgba(255,255,255,.14);border:2px dashed rgba(255,255,255,.55);color:#fff8d8}.px-hand{width:120px;height:32px;border-radius:999px;background:#fff;color:#114d2f;border:2px solid #d7b26b}.pixel-layout-fields input{font-weight:900;text-align:center}
@media(max-width:900px){.pixel-layout-wrap{grid-template-columns:1fr}.pixel-layout-preview{max-width:360px;margin:auto}}