/* TIPS Royale v27 — clean baseline
   One stylesheet. One game coordinate system. No device-specific seat geometry. */

*{box-sizing:border-box}
:root{
  --bg:#07111d;--panel:#0d1d2d;--panel2:#10283d;--panel3:#122f48;
  --line:#315472;--line2:#4f7899;--text:#f4f8ff;--muted:#9db2c7;
  --gold:#ffd166;--green:#4ee59a;--red:#ff676f;--orange:#ff9f43;
  --blue:#66b8ff;--cyan:#60e0ff;--purple:#d47cff;
  --shadow:0 18px 46px rgba(0,0,0,.32);
  --game-max:820px;--board-ratio:1.12/1;
}
html{background:var(--bg);color-scheme:dark}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 0,#173653 0,#07111d 56%);color:var(--text);font-family:Arial,Helvetica,sans-serif}
button,input,select{font:inherit}button{cursor:pointer}
.hidden,[hidden],#game.hidden,#lobby.hidden,#app.hidden,#entry.hidden,#splash.hidden{display:none!important}
.mut{color:var(--muted)}.error{color:#ff9da3;min-height:20px;margin-top:10px}

/* buttons/forms */
.btn{border:1px solid var(--line);background:linear-gradient(180deg,#18334d,#102438);color:#fff;border-radius:10px;padding:10px 13px;font-weight:800;transition:.15s filter,.15s transform,.15s border-color}
.btn:hover{filter:brightness(1.1);border-color:#6290b5}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.42;cursor:not-allowed;filter:none}
.btn.primary{background:linear-gradient(180deg,#326aa8,#234f82);border-color:#568dc6}.btn.good{background:linear-gradient(180deg,#247b50,#155f3b);border-color:#48aa76}.btn.danger,.btn.danger-soft{background:linear-gradient(180deg,#40202b,#2a151d);border-color:#824254}.btn.danger{background:linear-gradient(180deg,#7d2d37,#5b1c25)}
.field{margin:12px 0}.field label{display:block;margin-bottom:5px;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.45px}.field input,.field select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:#081827;color:#fff;outline:none}.field input:focus,.field select:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(102,184,255,.12)}
.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}
.cardbox{background:linear-gradient(180deg,rgba(15,33,50,.97),rgba(9,23,36,.97));border:1px solid var(--line);border-radius:15px;padding:14px;box-shadow:0 10px 28px rgba(0,0,0,.16)}

/* splash/front */
.splash{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 18%,rgba(45,91,139,.58),transparent 36%),radial-gradient(circle at 50% 75%,rgba(183,125,22,.15),transparent 40%),#07101b}
.splash-inner{width:min(700px,94vw);text-align:center}.hero-logo{display:block;width:min(590px,90vw);max-height:60vh;object-fit:contain;margin:auto;filter:drop-shadow(0 20px 42px rgba(0,0,0,.45))}
.lets-play{margin-top:4px;padding:14px 42px;border:1px solid #e2b94f;border-radius:999px;background:linear-gradient(180deg,#356ca7,#214b7d);color:white;font-size:20px;font-weight:1000;letter-spacing:1.5px;box-shadow:0 12px 35px rgba(0,0,0,.3)}
.frontpage{width:min(760px,94vw);margin:4vh auto;padding:20px;border:1px solid var(--line);border-radius:20px;background:rgba(9,25,40,.96);box-shadow:var(--shadow)}
.front-logo{display:block;width:min(215px,48vw);margin:0 auto 4px}.front-title{text-align:center;margin:0 0 4px;font-size:24px}.front-sub{text-align:center;color:var(--muted);margin:0 0 15px}
.resume-banner{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:10px 0 14px;padding:11px;border:1px solid #47759e;border-radius:11px;background:#0d2943}.resume-banner strong{display:block}.resume-banner .mut{font-size:11px}
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.menu-card{min-height:112px;padding:14px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#173451,#0f2337);color:white;text-align:left;transition:.15s transform,.15s border-color,.15s filter}.menu-card:hover{transform:translateY(-2px);border-color:#6492b8;filter:brightness(1.07)}.menu-icon{display:block;margin-bottom:8px;font-size:25px}.menu-card strong{display:block;font-size:16px;margin-bottom:4px}.menu-card span{font-size:11px;line-height:1.4;color:var(--muted)}.menu-card.rules{background:linear-gradient(180deg,#3b321f,#211d13);border-color:#71613a}.rejoin-session-card.session-unavailable{opacity:.45}
.choice-panel{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:13px;background:#081827}.choice-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.choice-head h3{margin:0}.choice-close{border:0;background:transparent;color:var(--muted);font-size:20px}.public-lobbies{display:grid;gap:7px;max-height:260px;overflow:auto;margin:9px 0}.public-lobby{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:#0b1d2d}.public-lobby .mut{font-size:10px}.join-divider{display:flex;align-items:center;gap:8px;margin:12px 0 5px;color:var(--muted);font-size:10px}.join-divider::before,.join-divider::after{content:"";height:1px;flex:1;background:var(--line)}

/* modal / leaderboard */
.rules-modal,.confirm-overlay,.game-end-overlay{position:fixed;inset:0;z-index:6000;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}
.rules-card,.confirm-card,.game-end-card{width:min(760px,96vw);max-height:90vh;overflow:auto;padding:18px;border:1px solid var(--line2);border-radius:17px;background:#0b1b2b;box-shadow:0 24px 80px rgba(0,0,0,.55)}.rules-close{float:right}.rules-card h2{margin-top:0}.rules-card h3{color:var(--gold)}.rules-card p,.rules-card li{line-height:1.5;color:#cfdaea}
.confirm-card{width:min(420px,94vw);text-align:center}.confirm-icon{font-size:35px}.confirm-actions{display:flex;justify-content:center;gap:9px;margin-top:14px}
.leaderboard-switch{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.lb-switch.active{border-color:var(--gold);color:#ffe69d}.leaderboard-panel{border:1px solid var(--line);border-radius:12px;overflow:hidden}.leaderboard-head{padding:12px}.leaderboard-kicker{font-size:11px;font-weight:1000;color:var(--gold);letter-spacing:.6px}.leaderboard-columns,.leaderboard-row{display:grid;grid-template-columns:42px minmax(110px,1.5fr) repeat(4,minmax(62px,.7fr));gap:5px;align-items:center;padding:8px 10px}.leaderboard-columns{background:#081827;color:var(--muted);font-size:9px;font-weight:900}.leaderboard-row{border-top:1px solid rgba(255,255,255,.06);font-size:11px}.lb-stat{display:flex;flex-direction:column;align-items:center}.lb-stat small{font-size:8px;color:var(--muted)}.leaderboard-empty,.leaderboard-loading{padding:20px;text-align:center;color:var(--muted)}

/* app header */
.shell{width:min(var(--game-max),96vw);margin:10px auto}.top-three-way{display:grid;grid-template-columns:minmax(86px,1fr) auto minmax(86px,1fr);align-items:center;gap:8px;min-height:72px;margin-bottom:7px}.top-left-action{justify-self:start}.top-right-action{justify-self:end}.top-three-way>.btn{width:clamp(86px,14vw,118px);padding:8px 8px;font-size:9px;line-height:1.1}.ingame-brand{justify-self:center;display:flex;align-items:center;justify-content:center}.mini-logo{display:block;width:clamp(128px,21vw,178px);height:auto;object-fit:contain;filter:drop-shadow(0 7px 12px rgba(0,0,0,.28))}

/* lobby */
#lobby{width:100%}.recovery-box{margin:9px 0;padding:9px 10px;border:1px dashed #577da2;border-radius:9px;background:#081827;font-size:11px}.recovery-code{font-family:Consolas,monospace;color:var(--gold);font-weight:1000;letter-spacing:.6px}.lobbylist{display:grid;gap:7px;margin:12px 0}.person{display:flex;justify-content:space-between;align-items:center;padding:10px;border:1px solid var(--line);border-radius:9px;background:#0a1c2b}.online{color:var(--green)}.offline{color:var(--red)}.lobby-bot-controls{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}

/* Game composition. Hidden always wins. */
#game.gamegrid:not(.hidden){display:block;width:100%}.table{width:100%;padding:7px}.side{display:block;width:100%;margin-top:7px}.round-panel{display:none}.summary-box{margin-bottom:7px}.log-panel{padding:0!important;overflow:hidden}.log-panel summary{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;font-weight:900;cursor:pointer;list-style:none}.log-panel summary::-webkit-details-marker{display:none}.log-panel summary::after{content:"＋";color:var(--blue);font-size:17px}.log-panel[open] summary::after{content:"−"}.log-hint{font-size:9px;color:var(--muted);font-weight:400}.log{max-height:270px;overflow:auto;padding:0 13px 11px;font-size:11px}.log div{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.05)}

/* HUD */
.game-hud{margin-bottom:7px}.hud-mainline{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;min-height:50px;padding:7px 9px;border:1px solid var(--line);border-radius:11px;background:#091b2a}.hud-status{min-width:0}.hud-status h3{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(10px,1.6vw,14px)}
.live-trump{justify-self:center;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:clamp(102px,17vw,150px);min-height:36px;padding:5px 8px;border:1px solid #5a7893;border-radius:10px;background:linear-gradient(180deg,#17334a,#0c2031);font-size:clamp(7px,1vw,10px);font-weight:1000}.live-trump.hidden{display:inline-flex!important;visibility:hidden}.trump-suit,.side-trump-suit{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;border:1px solid #d9dfe7;border-radius:50%;background:#f7f8fb;font-size:20px}.original-red{color:#cf242d}.original-black{color:#071425}
.economy{justify-self:end;min-width:clamp(92px,15vw,132px);padding:6px 7px;border:1px solid var(--line);border-radius:9px;text-align:center;font-size:clamp(7px,1vw,9px);font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.economy.ok{color:#b5f8cf;background:#123d29;border-color:#40986a}.economy.exp{color:#ffc0c3;background:#471b22;border-color:#ac4854}.economy.cheap{color:#ffd4a3;background:#4c2b10;border-color:#b76d2d}

/* Board: one aspect + one coordinate model for every platform */
.poker-stage{container-type:inline-size;position:relative;width:100%;aspect-ratio:var(--board-ratio);overflow:visible;border:2px solid #4f86ad;border-radius:42%/21%;background:radial-gradient(ellipse at 50% 43%,#18805f 0,#0f654c 45%,#094837 72%,#062e27 100%);box-shadow:inset 0 0 0 5px rgba(5,17,25,.5),inset 0 0 0 6px rgba(123,183,221,.11),inset 0 0 40px rgba(0,0,0,.28),0 12px 28px rgba(0,0,0,.24)}.poker-stage::before{content:"";position:absolute;inset:8.5% 15% 9.5%;border-radius:clamp(18px,4cqw,34px);background:rgba(3,47,36,.17);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
.players{position:absolute;inset:0;z-index:10;pointer-events:none}.player{position:absolute;width:clamp(112px,19cqw,150px);height:clamp(92px,14.5cqw,114px);padding:0;border:1.5px solid #5d87a5;border-radius:11px;background:linear-gradient(180deg,#0b2232,#071822);box-shadow:0 8px 18px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05);overflow:visible;color:var(--text)}.player.local{border-color:#6ebcff}.player.bidwinner{border-color:#d3a83e;box-shadow:0 0 0 2px rgba(255,209,102,.1),0 0 18px rgba(255,209,102,.23)}.player.scoreleader{border-color:#7e78ff;box-shadow:0 0 0 2px rgba(125,119,255,.1),0 0 17px rgba(105,94,255,.24)}
.player-card-body{position:absolute;inset:4px;display:grid;grid-template-rows:clamp(20px,3.1cqw,26px) minmax(0,1fr);gap:3px;padding:2px;border-radius:8px;overflow:hidden}.pname{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;height:100%;padding:0 clamp(15px,2cqw,18px);font-size:clamp(9px,1.45cqw,12px);font-weight:1000;white-space:nowrap}.pname-text{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:center}.inline-bid-star{position:absolute;left:2px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:11px;height:11px;border:1px solid #d7ad45;border-radius:50%;background:#4a370e;color:#ffe288;font-size:5.5px}.dealer-chip{position:absolute;z-index:30;left:-10px;top:-10px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#f3f6f9;color:#0a1621;border:1px solid #cdd6de;font-size:11px;font-weight:1000;box-shadow:0 3px 7px rgba(0,0,0,.35)}
.player-static-stats{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:2px;min-height:0}.player-static-stats>span{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0;padding:0 clamp(5px,.8cqw,8px);border:1px solid;border-radius:5px;overflow:hidden}.player-static-stats small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(5px,.8cqw,6.5px);font-weight:1000;letter-spacing:.2px}.player-static-stats strong{flex:0 0 auto;font-size:clamp(8px,1.25cqw,11px);font-weight:1000}.meta-bid{background:linear-gradient(90deg,#102b42,#123b59)!important;border-color:#3f87b6!important}.meta-bid small{color:#92ccec}.meta-bid strong{color:#e5f6ff}.meta-pinde{background:linear-gradient(90deg,#2b1734,#452046)!important;border-color:#9d589d!important}.meta-pinde small{color:#dda9df}.meta-pinde strong{color:#ffc6f1}.meta-score{background:linear-gradient(90deg,#30270e,#4b3a12)!important;border-color:#b28a32!important}.meta-score small{color:#e5ca7a}.meta-score strong{color:#ffe493}.meta-pinde.hidden-value strong{color:#987c98}
.active-pulse-ring{position:absolute;inset:-5px;z-index:20;border:2px solid rgba(82,245,159,.55);border-radius:inherit;pointer-events:none;animation:turnGlow .78s ease-in-out infinite alternate}@keyframes turnGlow{from{opacity:.3;box-shadow:0 0 6px rgba(78,229,154,.18)}to{opacity:1;box-shadow:0 0 22px rgba(78,229,154,.85),0 0 38px rgba(78,229,154,.2)}}

/* one seat map */
.count-3 .seat-r0,.count-4 .seat-r0,.count-5 .seat-r0{left:50%;bottom:.8%;transform:translateX(-50%)}
.count-3 .seat-r1{left:25%;top:6.5%;transform:translateX(-50%)}.count-3 .seat-r2{left:75%;top:6.5%;transform:translateX(-50%)}
.count-4 .seat-r1{left:1%;top:38%}.count-4 .seat-r2{left:50%;top:6%;transform:translateX(-50%)}.count-4 .seat-r3{right:1%;top:38%}
.count-5 .seat-r1{left:.5%;top:39%}.count-5 .seat-r2{left:27%;top:6%;transform:translateX(-50%)}.count-5 .seat-r3{left:73%;top:6%;transform:translateX(-50%)}.count-5 .seat-r4{right:.5%;top:39%}

/* center trick zone */
.trick-center-layer{position:absolute;z-index:6;left:50%;top:50%;width:64cqw;height:35cqw;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none}.trick-empty-state{grid-area:1/1;padding:7px 11px;border-radius:9px;background:rgba(3,36,29,.3);color:#c4d8d0;font-size:clamp(10px,1.5cqw,12px);white-space:nowrap}.trick{grid-area:1/1;display:flex;align-items:flex-start;justify-content:center;flex-wrap:nowrap;gap:var(--table-card-gap);width:max-content;max-width:100%;padding:3px;border-radius:10px;background:rgba(2,34,27,.13)}
.count-3 .trick{--table-card-w:clamp(48px,8.5cqw,68px);--table-card-h:clamp(69px,12.3cqw,98px);--table-card-gap:clamp(4px,.8cqw,6px)}.count-4 .trick{--table-card-w:clamp(44px,7.7cqw,62px);--table-card-h:clamp(64px,11.2cqw,90px);--table-card-gap:clamp(3px,.7cqw,5px)}.count-5 .trick{--table-card-w:clamp(40px,7cqw,56px);--table-card-h:clamp(58px,10.1cqw,81px);--table-card-gap:clamp(3px,.6cqw,4px)}
.slot{position:relative;flex:0 0 var(--table-card-w);width:var(--table-card-w);text-align:center}.played-by{width:100%;height:10px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e0eaf2;font-size:clamp(5px,.8cqw,7px);font-weight:900;line-height:10px}.leadlabel{position:absolute;left:50%;top:-7px;transform:translateX(-50%);width:100%;color:var(--gold);font-size:clamp(4.5px,.68cqw,5.5px);font-weight:1000;white-space:nowrap}.playcard,.handcard,.trick-fly-card{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fbfcfe;color:#08111b;border:2px solid #e0e2e5;border-radius:8px;font-weight:1000;box-shadow:0 5px 11px rgba(0,0,0,.22)}.playcard{width:var(--table-card-w);height:var(--table-card-h)}.red{color:#d3202b!important}.black{color:#071425!important}.card-rank{font-size:clamp(13px,2cqw,16px);line-height:1}.card-suit{font-size:clamp(27px,5cqw,40px);line-height:.9}.slot.lead,.slot.lead .playcard{border-color:transparent;box-shadow:none}.slot.lead .playcard{border:2px solid #e0e2e5}
.collecting-trick .trick .playcard,.collecting-trick .trick .played-by,.collecting-trick .trick .leadlabel{opacity:0;visibility:hidden}

/* trick piles */
.trick-pile{position:absolute;z-index:25;width:clamp(30px,4.8cqw,39px);height:clamp(35px,5.4cqw,44px);padding:2px;border:1px solid #9b7b2d;border-radius:7px;background:#091a27;box-shadow:0 4px 12px rgba(0,0,0,.35)}.trick-pile.hidden{display:none!important}.trick-pile-label{position:absolute;left:0;right:0;top:2px;text-align:center;color:#c4a957;font-size:4.5px;font-weight:1000;letter-spacing:.4px}.trick-pile-card{position:absolute;top:11px;left:8px;width:15px;height:22px;border:1px solid #d5aa3d;border-radius:3px;background:radial-gradient(circle,#18456c,#0a2540)}.trick-pile-card:nth-of-type(2){transform:rotate(-7deg)}.trick-pile-card:nth-of-type(3){transform:rotate(0deg);left:11px}.trick-pile-card:nth-of-type(4){transform:rotate(7deg);left:14px}.trick-pile-count{position:absolute;right:-6px;bottom:-6px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#5b420d;border:1px solid #d7aa39;color:#ffe38a;font-size:9px;font-weight:1000}.seat-r0 .trick-pile{right:calc(-1 * clamp(27px,4.2cqw,35px));top:50%;transform:translateY(-50%)}.count-4 .seat-r1 .trick-pile,.count-4 .seat-r3 .trick-pile,.count-5 .seat-r1 .trick-pile,.count-5 .seat-r4 .trick-pile{left:50%;top:calc(100% + 5px);transform:translateX(-50%)}.count-3 .seat-r1 .trick-pile,.count-4 .seat-r2 .trick-pile,.count-5 .seat-r2 .trick-pile{right:calc(-1 * clamp(27px,4.2cqw,35px));top:50%;transform:translateY(-50%)}.count-3 .seat-r2 .trick-pile,.count-5 .seat-r3 .trick-pile{left:calc(-1 * clamp(27px,4.2cqw,35px));top:50%;transform:translateY(-50%)}

/* player controls and hand */
.player-controls{position:relative;margin:10px -7px -7px;padding:8px 7px 9px;border-top:1px solid #28435b;background:#06121f}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:2px 0 5px}.actions .btn{padding:7px 9px;font-size:11px}.wait{min-height:20px;color:#bdd3e8;font-size:10px;font-weight:900}.reveal-hint{text-align:center;color:#f2d879}.hand{display:flex;flex-wrap:nowrap;align-items:flex-end;justify-content:flex-start;width:max-content;max-width:100%;margin:5px auto 0;padding:3px 1px;gap:clamp(3px,.65vw,6px);overflow-x:auto;overflow-y:visible;scrollbar-width:none}.hand::-webkit-scrollbar{display:none}.handcard{position:relative;flex:0 0 clamp(40px,11.5vw,62px);width:clamp(40px,11.5vw,62px);height:clamp(58px,16.7vw,90px);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.handcard.legal{outline:3px solid rgba(78,229,154,.72);box-shadow:0 0 14px rgba(78,229,154,.3)}.handcard.illegal{opacity:.34;filter:grayscale(.25)}.handcard.trump-card{outline:2px solid #ffb52e;box-shadow:0 0 10px rgba(255,151,28,.45)}.handcard.card-hidden{background:radial-gradient(circle,#164773,#092641);border-color:#c99d31}.card-back-logo{width:78%;height:70%;object-fit:contain}.handcard.card-flip{animation:cardReveal .2s ease-out both}@keyframes cardReveal{from{opacity:.35}to{opacity:1}}
.trump-choice{min-width:90px;display:flex;flex-direction:column;align-items:center}.trump-choice .suit-symbol{font-size:32px}.trump-choice .suit-name{font-size:10px}.red-suit{color:#ff6a70}.black-suit{color:#fff}
.ready-flow{display:grid;gap:7px;width:min(520px,100%);margin:auto;padding:8px;border:1px solid var(--line);border-radius:9px;background:#081827}.ready-flow-title{text-align:center;font-weight:1000}.ready-flow-names{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}.ready-flow-names span{padding:4px 6px;border-radius:999px;font-size:9px}.ready-flow-names .ready{background:#123b29;color:#aef4ca}.ready-flow-names .waiting{background:#332713;color:#f2d39a}

/* overlays/effects */
.turn-overlay,.last-play-overlay{display:none!important}.game-toast{position:fixed;z-index:5000;left:50%;top:13%;transform:translateX(-50%) scale(.92);max-width:min(420px,90vw);padding:11px 14px;border:1px solid #5e7e99;border-radius:12px;background:#081927;text-align:center;font-weight:1000;opacity:0;pointer-events:none;transition:.2s opacity,.2s transform}.game-toast.visible{opacity:1;transform:translateX(-50%) scale(1)}.game-toast .toast-suit{display:block;font-size:34px}.game-toast.red .toast-suit{color:#ff646b}.toast-sub{display:block;margin-top:3px;color:var(--muted);font-size:9px}
.deal-layer{position:absolute;inset:0;z-index:40;pointer-events:none;overflow:hidden;border-radius:inherit}.deal-deck{position:absolute;left:50%;top:50%;width:28px;height:40px;transform:translate(-50%,-50%)}.deal-deck span,.deal-card{width:25px;height:36px;border:1px solid #d4a938;border-radius:4px;background:url('/tips-royale-logo.png') center/72% auto no-repeat,radial-gradient(circle,#16456e,#09243c);box-shadow:0 3px 8px rgba(0,0,0,.3)}.deal-deck span{position:absolute}.deal-deck span:nth-child(1){transform:translate(-3px,-2px) rotate(-4deg)}.deal-deck span:nth-child(2){transform:rotate(1deg)}.deal-deck span:nth-child(3){transform:translate(3px,2px) rotate(4deg)}.deal-card{position:absolute;will-change:transform,opacity}.trick-fly-layer{position:fixed;inset:0;z-index:5500;pointer-events:none}.trick-fly-card{position:fixed;will-change:transform,opacity}.trick-fly-card .card-rank{font-size:15px}.trick-fly-card .card-suit{font-size:29px}.emoji-menu{position:fixed;z-index:7000;display:flex;gap:4px;padding:6px;border:1px solid var(--line2);border-radius:12px;background:#091a29;box-shadow:0 12px 35px rgba(0,0,0,.5)}.emoji-menu.hidden{display:none!important}.emoji-menu button{width:33px;height:33px;padding:0;border:1px solid var(--line);border-radius:8px;background:#102b42;font-size:19px}.player.local.emoji-hold-enabled{pointer-events:auto;touch-action:none}.emoji-reaction{position:absolute;z-index:80;left:50%;top:-27px;transform:translateX(-50%);font-size:27px;pointer-events:none;animation:emojiPop 3.1s ease-out both}@keyframes emojiPop{0%{opacity:0;transform:translateX(-50%) translateY(7px) scale(.5)}12%{opacity:1;transform:translateX(-50%) scale(1.18)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-13px) scale(.9)}}

/* game end */
.game-end-card{width:min(560px,94vw);text-align:center}.game-end-kicker{color:var(--gold);font-size:11px;font-weight:1000;letter-spacing:1px}.game-end-title{margin-top:5px;font-size:20px;font-weight:1000}.game-winner-name{margin-top:8px;color:#ffe591;font-size:31px;font-weight:1000}.game-winner-score{font-size:14px;color:#d6e4ef}.game-final-ranking{display:grid;gap:5px;margin:13px 0}.final-rank-row{display:grid;grid-template-columns:32px 1fr auto;gap:7px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:8px;background:#091b2b;text-align:left}.final-rank-row.winner{border-color:#ad8730;background:#32270f}.final-place{font-weight:1000;color:var(--gold)}.game-ready-players{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}.game-ready-players span{padding:4px 6px;border-radius:999px;font-size:9px}.game-ready-players .ready{background:#123b29;color:#b1f4cb}.game-ready-players .waiting{background:#332713;color:#f1d297}.fireworks{position:absolute;inset:0;pointer-events:none}.fw{position:absolute;font-size:40px;animation:fw 1.5s ease-in-out infinite alternate}.fw1{left:10%;top:14%}.fw2{right:10%;top:20%}.fw3{left:18%;bottom:12%}.fw4{right:18%;bottom:17%}@keyframes fw{from{transform:scale(.8);opacity:.45}to{transform:scale(1.25);opacity:1}}

/* small screens: only page chrome changes; board coordinates DO NOT */
@media(max-width:620px){
  body{background:#06101b}.frontpage{width:100%;margin:0;padding:14px;border-radius:0;min-height:100vh}.menu-grid{grid-template-columns:1fr}.menu-card{min-height:auto}.row{flex-direction:column}.shell{width:100%;margin:0;padding:6px}.top-three-way{min-height:68px;grid-template-columns:minmax(80px,1fr) auto minmax(80px,1fr);gap:5px}.top-three-way>.btn{width:82px;padding:7px 5px;font-size:7.5px}.mini-logo{width:122px}.table{padding:6px}.hud-mainline{padding:6px;gap:4px}.live-trump{min-width:96px}.economy{min-width:86px}.leaderboard-columns,.leaderboard-row{grid-template-columns:30px minmax(90px,1fr) repeat(4,48px);padding:7px 6px;font-size:9px;overflow-x:auto}.game-winner-name{font-size:26px}
}

@supports not (width:1cqw){.player{width:116px;height:94px}.trick-center-layer{width:64%;height:35%}}

/* ==========================================================================
   v27.1 — SAFE TABLE LANE + RESPONSIVE PLAYER SCALE

   v27 mobile remains the visual baseline.
   The fix is geometric:
   - in 4/5 player games HUD width adapts to preserve a real centre card lane
   - desktop HUDs grow with the table instead of staying phone-sized
   - the card lane/card sizes are tied to player count
   ========================================================================== */

/* ---------- player-count aware HUD scale ---------- */

/* 3 players have plenty of horizontal room. */
.poker-stage.count-3 .player{
  width:clamp(112px,22cqw,176px);
  min-width:clamp(112px,22cqw,176px);
  max-width:clamp(112px,22cqw,176px);

  height:clamp(92px,15.5cqw,124px);
  min-height:clamp(92px,15.5cqw,124px);
  max-height:clamp(92px,15.5cqw,124px);
}

/* 4 players: slightly narrower on phone, clearly larger on desktop. */
.poker-stage.count-4 .player{
  width:clamp(102px,21cqw,172px);
  min-width:clamp(102px,21cqw,172px);
  max-width:clamp(102px,21cqw,172px);

  height:clamp(88px,15cqw,122px);
  min-height:clamp(88px,15cqw,122px);
  max-height:clamp(88px,15cqw,122px);
}

/* 5 players need the most centre clearance on narrow screens. */
.poker-stage.count-5 .player{
  width:clamp(96px,20.5cqw,168px);
  min-width:clamp(96px,20.5cqw,168px);
  max-width:clamp(96px,20.5cqw,168px);

  height:clamp(84px,14.5cqw,118px);
  min-height:clamp(84px,14.5cqw,118px);
  max-height:clamp(84px,14.5cqw,118px);
}

/* HUD typography scales with the HUD rather than staying desktop-tiny. */
.poker-stage .player-card-body .pname{
  font-size:clamp(9px,1.55cqw,13px);
}
.poker-stage .player-static-stats small{
  font-size:clamp(4.8px,.9cqw,7px);
}
.poker-stage .player-static-stats strong{
  font-size:clamp(7.5px,1.45cqw,12px);
}

/* ---------- protected centre card lanes ---------- */

/*
  Different player counts get different safe lane widths.
  4/5-player lanes are deliberately sized to end before the side HUDs begin.
*/
.poker-stage.count-3 .trick-center-layer{
  width:62cqw;
  max-width:62cqw;
}
.poker-stage.count-4 .trick-center-layer{
  width:56cqw;
  max-width:56cqw;
}
.poker-stage.count-5 .trick-center-layer{
  width:52cqw;
  max-width:52cqw;
}

.poker-stage .trick{
  width:100%;
  max-width:100%;
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  justify-content:center;
  box-sizing:border-box;
}

/*
  At 4/5 players the cards remain readable on phone but cannot exceed the
  protected lane. On desktop cqw lets them grow substantially.
*/
.poker-stage.count-3 .trick{
  --table-card-w:clamp(46px,8.2cqw,70px);
  --table-card-h:clamp(67px,11.9cqw,101px);
  --table-card-gap:clamp(4px,.8cqw,7px);
}
.poker-stage.count-4 .trick{
  --table-card-w:clamp(38px,7cqw,60px);
  --table-card-h:clamp(55px,10.15cqw,87px);
  --table-card-gap:clamp(3px,.65cqw,5px);
}
.poker-stage.count-5 .trick{
  --table-card-w:clamp(34px,6.1cqw,52px);
  --table-card-h:clamp(49px,8.85cqw,75px);
  --table-card-gap:clamp(3px,.55cqw,4px);
}

.poker-stage .trick .slot{
  flex:0 0 var(--table-card-w);
  width:var(--table-card-w);
  min-width:var(--table-card-w);
  max-width:var(--table-card-w);
}

.poker-stage .trick .playcard{
  width:var(--table-card-w);
  min-width:var(--table-card-w);
  max-width:var(--table-card-w);
  height:var(--table-card-h);
  min-height:var(--table-card-h);
  max-height:var(--table-card-h);
}

/* Keep rank/suit readable in the smaller 4/5-player phone cards. */
.poker-stage .trick .card-rank{
  font-size:clamp(11px,1.8cqw,16px);
}
.poker-stage .trick .card-suit{
  font-size:clamp(23px,4.4cqw,38px);
}

/* A tiny extra safety margin for the narrowest phones in 5-player games. */
@media(max-width:390px){
  .poker-stage.count-5 .player{
    width:94px;
    min-width:94px;
    max-width:94px;
  }

  .poker-stage.count-5 .trick-center-layer{
    width:53cqw;
    max-width:53cqw;
  }

  .poker-stage.count-5 .trick{
    --table-card-w:32px;
    --table-card-h:47px;
    --table-card-gap:2px;
  }
}


/* ==========================================================================
   v27.2 — ACTIVE TURN GLOW HOTFIX
   Purely visual. Never changes seat size, position or transform.
   ========================================================================== */

/* Existing ring is made clearly visible on every HUD/background combination. */
.poker-stage .player.active > .active-pulse-ring{
  display:block!important;
  position:absolute!important;
  inset:-6px!important;
  z-index:30!important;

  border:2px solid rgba(77,255,164,.92)!important;
  border-radius:inherit!important;

  opacity:1!important;
  pointer-events:none!important;

  animation:activeTurnHaloV272 .78s ease-in-out infinite alternate!important;
  will-change:opacity,box-shadow,border-color!important;
}

/* A second, subtle pulse on the HUD body makes the active turn unmistakable
   even when another player also has leader/bid-winner styling. */
.poker-stage .player.active > .player-card-body{
  animation:activeTurnHudV272 .78s ease-in-out infinite alternate!important;
}

/* Do not animate the PLAYER itself — this guarantees zero seat movement. */
.poker-stage .player.active{
  animation:none!important;
}

@keyframes activeTurnHaloV272{
  from{
    opacity:.42;
    border-color:rgba(77,255,164,.55);
    box-shadow:
      0 0 0 1px rgba(77,255,164,.10),
      0 0 8px rgba(77,255,164,.32),
      0 0 16px rgba(77,255,164,.12);
  }
  to{
    opacity:1;
    border-color:rgba(112,255,186,1);
    box-shadow:
      0 0 0 2px rgba(77,255,164,.20),
      0 0 20px rgba(77,255,164,.88),
      0 0 38px rgba(77,255,164,.42);
  }
}

@keyframes activeTurnHudV272{
  from{
    box-shadow:
      inset 0 0 0 1px rgba(77,255,164,.10),
      inset 0 0 7px rgba(77,255,164,.04);
    filter:brightness(1);
  }
  to{
    box-shadow:
      inset 0 0 0 1px rgba(112,255,186,.72),
      inset 0 0 12px rgba(77,255,164,.10);
    filter:brightness(1.07);
  }
}

/* Respect reduced-motion users: keep a clear static active indication. */
@media (prefers-reduced-motion: reduce){
  .poker-stage .player.active > .active-pulse-ring,
  .poker-stage .player.active > .player-card-body{
    animation:none!important;
  }

  .poker-stage .player.active > .active-pulse-ring{
    opacity:1!important;
    border-color:rgba(112,255,186,1)!important;
    box-shadow:
      0 0 0 2px rgba(77,255,164,.18),
      0 0 18px rgba(77,255,164,.75)!important;
  }
}


/* ==========================================================================
   v27.3 — CONTAINED ACTIVE TURN GLOW
   Keep glow clearly around the HUD, but never wash into the trick pile.
   ========================================================================== */

.poker-stage .player.active > .active-pulse-ring{
  inset:-3px!important;
  border-width:2px!important;
  animation:activeTurnHaloV273 .78s ease-in-out infinite alternate!important;
}

.poker-stage .player.active > .player-card-body{
  animation:activeTurnHudV273 .78s ease-in-out infinite alternate!important;
}

@keyframes activeTurnHaloV273{
  from{
    opacity:.46;
    border-color:rgba(77,255,164,.58);
    box-shadow:
      0 0 0 1px rgba(77,255,164,.10),
      0 0 5px rgba(77,255,164,.30),
      0 0 9px rgba(77,255,164,.10);
  }
  to{
    opacity:1;
    border-color:rgba(112,255,186,1);
    box-shadow:
      0 0 0 2px rgba(77,255,164,.18),
      0 0 10px rgba(77,255,164,.72),
      0 0 15px rgba(77,255,164,.24);
  }
}

@keyframes activeTurnHudV273{
  from{
    box-shadow:
      inset 0 0 0 1px rgba(77,255,164,.10),
      inset 0 0 5px rgba(77,255,164,.03);
    filter:brightness(1);
  }
  to{
    box-shadow:
      inset 0 0 0 1px rgba(112,255,186,.62),
      inset 0 0 8px rgba(77,255,164,.08);
    filter:brightness(1.045);
  }
}

/* Trick pile always renders cleanly above any nearby light spill. */
.poker-stage .player .trick-pile{
  z-index:40!important;
  isolation:isolate!important;
}

/* Reduced motion keeps the same contained footprint. */
@media (prefers-reduced-motion: reduce){
  .poker-stage .player.active > .active-pulse-ring{
    animation:none!important;
    inset:-3px!important;
    opacity:1!important;
    box-shadow:
      0 0 0 2px rgba(77,255,164,.16),
      0 0 10px rgba(77,255,164,.62)!important;
  }

  .poker-stage .player.active > .player-card-body{
    animation:none!important;
  }
}


/* ==========================================================================
   v27.4 — TURN STATE SYNC + JUST-PLAYED RING
   ========================================================================== */

/*
  The player who JUST played gets a short blue/gold countdown ring.
  This is independent from the green ACTIVE-TURN glow on the next player.
*/
@property --played-ring-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:360deg;
}

.poker-stage .player{
  isolation:isolate;
}

.poker-stage .player.handover::after{
  content:"";
  position:absolute;
  inset:-3px;
  z-index:28;
  padding:2px;
  border-radius:inherit;
  pointer-events:none;

  background:conic-gradient(
    from -90deg,
    #79a8ff 0deg,
    #58d7a0 var(--played-ring-angle),
    transparent var(--played-ring-angle),
    transparent 360deg
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;

  filter:drop-shadow(0 0 4px rgba(121,168,255,.35));
  animation:playedCardRingV274 1.18s linear forwards;
}

/* Own recently-played card gets the familiar gold accent in the ring. */
.poker-stage .player.local.handover::after{
  background:conic-gradient(
    from -90deg,
    #58d7a0 0deg,
    #ffd166 var(--played-ring-angle),
    transparent var(--played-ring-angle),
    transparent 360deg
  );
}

@keyframes playedCardRingV274{
  0%{
    --played-ring-angle:360deg;
    opacity:1;
  }
  75%{
    opacity:.92;
  }
  100%{
    --played-ring-angle:0deg;
    opacity:0;
  }
}

/*
  Active turn remains a separate green pulse.
  It may be visible at the same time as the previous player's handover ring.
*/
.poker-stage .player.active > .active-pulse-ring{
  z-index:30!important;
}

/* Trick pile must remain visually clean above both effects. */
.poker-stage .player .trick-pile{
  z-index:40!important;
}

/* Fallback where animated custom properties are reduced/unsupported. */
@media (prefers-reduced-motion: reduce){
  .poker-stage .player.handover::after{
    animation:playedCardRingFallbackV274 .8s ease-out forwards!important;
    background:transparent!important;
    border:2px solid rgba(121,168,255,.8)!important;
    -webkit-mask:none!important;
    mask:none!important;
  }

  @keyframes playedCardRingFallbackV274{
    from{opacity:1}
    to{opacity:0}
  }
}


/* ==========================================================================
   v27.5 — VISUAL / INTERACTION POLISH
   ========================================================================== */

/* 1. HUD text and numbers are WHITE.
   Field identity comes from background/border color, not text color. */
.player-card-body .pname,
.player-card-body .pname-text,
.player-static-stats small,
.player-static-stats strong,
.meta-bid small,
.meta-bid strong,
.meta-pinde small,
.meta-pinde strong,
.meta-pinde.hidden-value strong,
.meta-score small,
.meta-score strong{
  color:#fff!important;
}

.hud-status h3,
.live-trump > span,
.economy,
.played-by,
.trick-pile-count{
  color:#fff!important;
}

/* Preserve actual playing-card suit colors. */
.playcard.red,
.handcard.red,
.trick-fly-card.red,
.played-card-flight.red,
.trump-suit.original-red{
  color:#d3202b!important;
}
.playcard.black,
.handcard.black,
.trick-fly-card.black,
.played-card-flight.black,
.trump-suit.original-black{
  color:#071425!important;
}

/* 2. Back-to-lobby is clearly GREEN. */
.back-lobby-btn,
.top-left-action.back-lobby-btn{
  background:linear-gradient(180deg,#1f7a4b,#145737)!important;
  border-color:#46b879!important;
  color:#fff!important;
  box-shadow:0 4px 12px rgba(26,127,79,.22)!important;
}
.back-lobby-btn:hover,
.top-left-action.back-lobby-btn:hover{
  background:linear-gradient(180deg,#278d5a,#196540)!important;
  border-color:#62d69a!important;
}

/* 3. iOS / touch: no native selection, copy callout or image dragging in game UI. */
#app #game,
#app #game *,
#app #lobby,
#app #lobby *,
#app > .top,
#app > .top *,
#emojiMenu,
#emojiMenu *,
#gameEndOverlay,
#gameEndOverlay *,
#endSessionModal,
#endSessionModal *{
  -webkit-touch-callout:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-tap-highlight-color:transparent!important;
}

#app img,
#emojiMenu img{
  -webkit-user-drag:none!important;
  user-drag:none!important;
}

/* Inputs remain selectable/editable should one appear in an in-game overlay. */
#app input,
#app textarea,
#app select{
  -webkit-user-select:text!important;
  user-select:text!important;
  -webkit-touch-callout:default!important;
}

/* 4. Small explicit emoji button in the top-right corner of OWN HUD. */
.emoji-trigger{
  position:absolute!important;
  z-index:48!important;
  top:3px!important;
  right:3px!important;

  width:19px!important;
  height:19px!important;
  min-width:19px!important;

  display:grid!important;
  place-items:center!important;

  margin:0!important;
  padding:0!important;

  border:1px solid #6288a5!important;
  border-radius:6px!important;
  background:#0d2639!important;
  color:#fff!important;

  font-size:12px!important;
  line-height:1!important;
  cursor:pointer!important;
  touch-action:manipulation!important;

  box-shadow:0 2px 5px rgba(0,0,0,.28)!important;
}

.emoji-trigger:active{
  transform:scale(.92)!important;
}
.emoji-trigger.cooldown,
.emoji-trigger:disabled{
  opacity:.38!important;
  filter:grayscale(.35)!important;
  cursor:default!important;
}

/* Name keeps room for the right-corner emoji button on the local HUD. */
.player.local .pname{
  padding-right:23px!important;
}

/* Legacy long-hold interaction is completely disabled. */
.player.local.emoji-hold-enabled{
  touch-action:auto!important;
}

/* 5. Card visibly flies from player's HUD to its table position. */
.played-card-flight{
  position:fixed!important;
  z-index:6200!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;

  box-sizing:border-box!important;

  background:#fbfcfe!important;
  border:2px solid #e0e2e5!important;
  border-radius:8px!important;
  box-shadow:0 9px 22px rgba(0,0,0,.42)!important;

  font-weight:1000!important;
  pointer-events:none!important;
  will-change:transform,opacity!important;
}

.played-card-flight .card-rank{
  font-size:14px!important;
  line-height:1!important;
}
.played-card-flight .card-suit{
  font-size:29px!important;
  line-height:.9!important;
}

/* Hide only the final card while its animated copy is travelling. */
.trick .slot.flight-pending .playcard{
  opacity:0!important;
}

/* 6. Won tricks are ONLY a small stack + count circle.
   No rectangular dock/background around the pile. */
.trick-pile{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  overflow:visible!important;
}

.trick-pile-label{
  display:none!important;
}

.trick-pile-card{
  box-shadow:0 2px 5px rgba(0,0,0,.34)!important;
}

.trick-pile-count{
  background:#57400e!important;
  border:1px solid #efc759!important;
  color:#fff!important;
  box-shadow:0 2px 5px rgba(0,0,0,.34)!important;
}

/* 7. Trump suit now resembles a small REAL playing card, not a circle. */
.trump-suit{
  position:relative!important;

  width:30px!important;
  min-width:30px!important;
  height:40px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  border:2px solid #e0e2e5!important;
  border-radius:5px!important;
  background:#fbfcfe!important;

  font-size:24px!important;
  line-height:1!important;

  box-shadow:0 4px 8px rgba(0,0,0,.22)!important;
}

.trump-suit::before{
  content:"T";
  position:absolute;
  left:3px;
  top:2px;

  color:currentColor;
  font-size:7px;
  font-weight:1000;
  line-height:1;
}

/* 8. Strong, short finish confirmation around the HUD after the card lands. */
.player.played-landed{
  animation:none!important;
}

.player.played-landed > .player-card-body{
  animation:playedLandedHudV275 .28s ease-out both!important;
}

.player.played-landed::before{
  content:"";
  position:absolute;
  inset:-4px;
  z-index:32;

  border:2px solid #8fd6ff;
  border-radius:inherit;
  pointer-events:none;

  animation:playedLandedRingV275 .28s ease-out both;
}

.player.local.played-landed::before{
  border-color:#ffd166;
}

@keyframes playedLandedRingV275{
  0%{
    opacity:0;
    transform:scale(.94);
    box-shadow:0 0 0 rgba(143,214,255,0);
  }
  35%{
    opacity:1;
    transform:scale(1.03);
    box-shadow:0 0 15px rgba(143,214,255,.72);
  }
  100%{
    opacity:0;
    transform:scale(1.07);
    box-shadow:0 0 5px rgba(143,214,255,.18);
  }
}

@keyframes playedLandedHudV275{
  0%{filter:brightness(1)}
  45%{filter:brightness(1.16)}
  100%{filter:brightness(1)}
}

/* The existing 1.45s played-card ring remains around the previous player.
   Make the finish of that ring slightly clearer without affecting active glow. */
.poker-stage .player.handover::after{
  animation-duration:1.38s!important;
}

/* Reduced motion: no card flight motion, but keep state clarity. */
@media (prefers-reduced-motion: reduce){
  .played-card-flight{
    display:none!important;
  }

  .trick .slot.flight-pending .playcard{
    opacity:1!important;
  }

  .player.played-landed::before,
  .player.played-landed > .player-card-body{
    animation:none!important;
  }
}


/* ==========================================================================
   v27.6 — INTERACTION / ANIMATION FIXES
   ========================================================================== */

/* 1. Trump announcement starts exactly in screen center, then JS animates it
   into the permanent top trump indicator. */
.game-toast.trump-toast-flight{
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;

  width:min(300px,84vw)!important;
  max-width:min(300px,84vw)!important;

  display:grid!important;
  justify-items:center!important;
  gap:7px!important;

  padding:14px 16px!important;
  transform:translate(-50%,-50%) scale(.72);
  transform-origin:center!important;

  border:1px solid #6689a5!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,#102b40,#071725)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.55)!important;

  text-align:center!important;
  pointer-events:none!important;
  z-index:8000!important;
}

.game-toast.trump-toast-flight .toast-kicker{
  color:#dce9f3!important;
  font-size:10px!important;
  font-weight:900!important;
}

.game-toast.trump-toast-flight .toast-title{
  color:#fff!important;
  font-size:13px!important;
  letter-spacing:.45px!important;
}

.toast-trump-card{
  position:relative!important;

  width:48px!important;
  height:66px!important;

  display:grid!important;
  place-items:center!important;

  border:2px solid #e4e7ea!important;
  border-radius:7px!important;
  background:#fbfcfe!important;

  box-shadow:0 6px 15px rgba(0,0,0,.30)!important;
}

.toast-trump-card small{
  position:absolute!important;
  left:4px!important;
  top:3px!important;

  color:inherit!important;
  font-size:9px!important;
  font-weight:1000!important;
}

.toast-trump-card strong{
  font-size:34px!important;
  line-height:1!important;
}

.toast-trump-card.red{color:#d3202b!important}
.toast-trump-card.black{color:#071425!important}

.live-trump.trump-arrival{
  animation:trumpArrivalV276 .42s ease-out both!important;
}

@keyframes trumpArrivalV276{
  0%{transform:scale(.82);filter:brightness(1)}
  45%{transform:scale(1.12);filter:brightness(1.24)}
  100%{transform:scale(1);filter:brightness(1)}
}

/* 2. Meldte / Pinde / Point labels use the SAME readable size as values.
   The row geometry does not change. */
.player-static-stats small,
.player-static-stats strong{
  font-size:clamp(7.5px,1.22cqw,10.5px)!important;
  line-height:1!important;
  font-weight:1000!important;
}

.player-static-stats small{
  flex:1 1 auto!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.player-static-stats strong{
  flex:0 0 auto!important;
  max-width:34%!important;
}

/* 3. Played-card flight is guaranteed visible above table/player layers. */
.played-card-flight{
  z-index:9000!important;
  pointer-events:none!important;
}

.trick .slot.flight-pending .playcard{
  opacity:0!important;
}

/* 4. Emoji button: explicit hit target, independent of old player-layer rules. */
.players{
  pointer-events:none!important;
}

.players > .player.local{
  pointer-events:auto!important;
}

.emoji-trigger{
  pointer-events:auto!important;
  touch-action:manipulation!important;

  width:28px!important;
  min-width:28px!important;
  height:28px!important;

  top:3px!important;
  right:3px!important;

  border-radius:8px!important;
  font-size:16px!important;
  line-height:1!important;

  cursor:pointer!important;
}

.player.local .pname{
  padding-right:34px!important;
}

.emoji-menu{
  pointer-events:auto!important;
  gap:6px!important;
  padding:8px!important;
  border-radius:14px!important;
}

.emoji-menu button{
  pointer-events:auto!important;
  touch-action:manipulation!important;

  width:42px!important;
  min-width:42px!important;
  height:42px!important;

  border-radius:10px!important;
  font-size:24px!important;
  cursor:pointer!important;
}

/* Clear finish marker when card reaches table. */
.player.played-landed::before{
  inset:-4px!important;
  z-index:34!important;
  border-width:2px!important;
  animation-duration:.36s!important;
}

@media(max-width:430px){
  .emoji-trigger{
    width:27px!important;
    min-width:27px!important;
    height:27px!important;
    font-size:15px!important;
  }

  .emoji-menu{
    gap:4px!important;
    padding:6px!important;
  }

  .emoji-menu button{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    font-size:22px!important;
  }
}


/* ==========================================================================
   v27.7 — DEALER + TRUMP ARRIVAL POLISH
   ========================================================================== */

/* Emoji trigger is only slightly smaller than v27.6, while remaining easy
   to hit because the whole local player HUD is still pointer-enabled. */
.emoji-trigger{
  width:25px!important;
  min-width:25px!important;
  height:25px!important;
  font-size:14px!important;
  border-radius:7px!important;
}

.player.local .pname{
  padding-right:31px!important;
}

@media(max-width:430px){
  .emoji-trigger{
    width:24px!important;
    min-width:24px!important;
    height:24px!important;
    font-size:13.5px!important;
  }

  .player.local .pname{
    padding-right:30px!important;
  }
}

/* Fresh trump is intentionally invisible in the permanent top HUD until the
   centre-screen announcement has finished flying into this exact position. */
.live-trump.trump-awaiting-arrival{
  visibility:hidden!important;
  opacity:0!important;
}

/* Dealer marker should never be visually masked by neighbouring effects. */
.dealer-chip{
  z-index:55!important;
}


/* ==========================================================================
   v27.8 — NATIVE SEARCH / TEXT-SELECTION LOCK
   Prevent Chrome/Android "Touch to Search" and iOS text callouts in game UI.
   ========================================================================== */

#game,
#game *,
#lobby,
#lobby *,
.top,
.top *,
#emojiMenu,
#emojiMenu *,
#gameEndOverlay,
#gameEndOverlay *,
#endSessionModal,
#endSessionModal *{
  -webkit-user-select:none!important;
  user-select:none!important;

  -webkit-touch-callout:none!important;
  -webkit-tap-highlight-color:transparent!important;

  /* Keeps normal tap/scroll behaviour while avoiding browser text gestures. */
  touch-action:manipulation;
}

/* Explicitly include generated labels/icons. */
#game *::before,
#game *::after,
#lobby *::before,
#lobby *::after,
.top *::before,
.top *::after{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
}

/* Images/logos/cards must not start native drag/search gestures. */
#game img,
#lobby img,
.top img,
#emojiMenu img{
  -webkit-user-drag:none!important;
  user-drag:none!important;
  pointer-events:none;
}

/* Interactive controls stay clickable even if they contain an image/icon. */
#game button,
#game .handcard,
#game .emoji-trigger,
#lobby button,
.top button,
#emojiMenu button{
  touch-action:manipulation!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}

/* Form fields are the deliberate exception: typing/selection must work. */
#app input,
#app textarea,
#app select,
#app [contenteditable="true"]{
  -webkit-user-select:text!important;
  user-select:text!important;
  -webkit-touch-callout:default!important;
  touch-action:auto!important;
}


/* ==========================================================================
   v27.9 — PERSISTENT EMOJI REACTION LAYER
   Emoji animation is independent from player HUD re-renders.
   ========================================================================== */

.poker-stage > .emoji-reaction-stage{
  position:absolute!important;
  z-index:90!important;

  width:auto!important;
  height:auto!important;

  transform:translate(-50%,-100%)!important;
  transform-origin:center bottom!important;

  font-size:27px!important;
  line-height:1!important;

  pointer-events:none!important;
  will-change:transform,opacity!important;

  animation:emojiPopStageV279 3.1s ease-out both!important;
}

@keyframes emojiPopStageV279{
  0%{
    opacity:0;
    transform:translate(-50%,calc(-100% + 7px)) scale(.5);
  }
  12%{
    opacity:1;
    transform:translate(-50%,-100%) scale(1.18);
  }
  80%{
    opacity:1;
    transform:translate(-50%,-100%) scale(1);
  }
  100%{
    opacity:0;
    transform:translate(-50%,calc(-100% - 13px)) scale(.9);
  }
}

@media (prefers-reduced-motion: reduce){
  .poker-stage > .emoji-reaction-stage{
    animation:emojiPopStageReducedV279 3.1s linear both!important;
  }

  @keyframes emojiPopStageReducedV279{
    0%{opacity:0}
    8%{opacity:1}
    88%{opacity:1}
    100%{opacity:0}
  }
}


/* ==========================================================================
   v27.10 — HAND CARD NATIVE-SEARCH LOCK
   Hand cards are now real controls, never browser-searchable content.
   ========================================================================== */

.handcard{
  appearance:none!important;
  -webkit-appearance:none!important;

  margin:0!important;
  padding:0!important;

  font:inherit!important;
  text-align:center!important;

  /* A card gesture belongs to the game, not browser text/image search. */
  touch-action:none!important;
  -webkit-touch-callout:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;

  -webkit-tap-highlight-color:transparent!important;
  -webkit-user-drag:none!important;

  outline-offset:0;
}

/*
  Child rank/suit/logo content never becomes the browser's hit target.
  Pointer events always land on the .handcard button itself.
*/
.handcard *,
.handcard *::before,
.handcard *::after{
  pointer-events:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
}

/* Hidden-card logo is CSS artwork rather than an <img>, so Android/Chrome
   cannot offer Google Lens / Search image actions for the card back. */
.handcard .card-back-logo{
  display:block!important;
  width:78%!important;
  height:70%!important;

  background:
    url('/tips-royale-logo.png')
    center / contain
    no-repeat!important;

  border:0!important;
  pointer-events:none!important;
}

/* Preserve visual button focus for keyboard users without browser defaults. */
.handcard:focus{
  outline:none!important;
}
.handcard:focus-visible{
  outline:2px solid rgba(110,188,255,.92)!important;
  outline-offset:2px!important;
}


/* ==========================================================================
   v27.11 — STABILIZATION + UX POLISH
   ========================================================================== */

/* 1. End-session confirmation must sit ABOVE the final score overlay. */
.game-end-overlay{z-index:8000!important}
.confirm-overlay{z-index:9500!important}
.rules-modal{z-index:9000!important}

/* 2. Cleaner final scorecard. */
.game-end-card{
  width:min(520px,94vw)!important;
  max-height:min(92dvh,760px)!important;
  padding:16px!important;
  text-align:left!important;
  overflow:auto!important;
}
.game-end-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.game-end-title{
  margin:0!important;
  color:#d9e8f5;
  font-size:12px!important;
  letter-spacing:.8px;
}
.game-winner-hero{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  margin:12px 0;
  padding:12px;
  border:1px solid #aa8734;
  border-radius:13px;
  background:linear-gradient(180deg,#342a12,#201a0d);
  text-align:center;
}
.winner-trophy{font-size:34px}
.winner-label{color:#d9bd68;font-size:9px;font-weight:1000;letter-spacing:1px}
.game-winner-name{
  margin:2px 0 0!important;
  font-size:clamp(23px,5vw,30px)!important;
  line-height:1.05;
}
.game-winner-score{font-size:12px!important}
.final-section-title{
  margin:5px 0 6px;
  color:#9db2c7;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.8px;
}
.game-final-ranking{
  gap:4px!important;
  margin:0 0 10px!important;
}
.final-rank-row{
  grid-template-columns:38px minmax(0,1fr) auto!important;
  padding:7px 9px!important;
  border-radius:8px!important;
}
.final-rank-row.winner{
  border-color:#9e7c2f!important;
  background:#2b220f!important;
}
.final-place{
  display:grid;
  place-items:center;
  color:#fff!important;
  font-size:15px;
}
.final-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:900;
}
.final-score{
  display:flex;
  align-items:baseline;
  gap:4px;
  color:#fff;
}
.final-score strong{font-size:15px}
.final-score small{color:#9db2c7;font-size:8px}
.game-ready-status{
  margin:8px 0;
  padding:8px;
  border:1px solid #315472;
  border-radius:9px;
  background:#081827;
  text-align:center;
}
.game-ready-title{
  margin-bottom:5px;
  font-size:9px;
  font-weight:1000;
  color:#cbdceb;
}
.game-end-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
}
.game-end-actions .btn{width:100%}
.game-restart-hint{
  margin-top:8px;
  text-align:center;
  font-size:8px;
  line-height:1.35;
}
.fireworks{opacity:.55}

/* 3. iPad / tablet landscape: fit the complete playable area above the fold.
   Seat geometry is unchanged; the whole game scales from viewport height. */
@media (orientation:landscape) and (min-width:700px) and (max-height:900px){
  .shell{
    width:min(94vw,calc(100vh - 165px))!important;
    width:min(94vw,calc(100dvh - 165px))!important;
    margin:3px auto!important;
  }
  .top-three-way{
    min-height:50px!important;
    margin-bottom:3px!important;
  }
  .mini-logo{width:118px!important}
  .top-three-way>.btn{
    padding:6px 7px!important;
    font-size:8px!important;
  }
  .table{padding:5px!important}
  .game-hud{margin-bottom:4px!important}
  .hud-mainline{
    min-height:42px!important;
    padding:4px 7px!important;
  }
  .player-controls{
    margin:5px -5px -5px!important;
    padding:5px 5px 6px!important;
  }
  .actions{margin:1px 0 3px!important}
  .actions .btn{padding:5px 8px!important;font-size:10px!important}
  .wait{min-height:15px!important;font-size:9px!important}
  .hand{margin-top:2px!important}
  .handcard{
    flex-basis:clamp(40px,7.2dvh,56px)!important;
    width:clamp(40px,7.2dvh,56px)!important;
    height:clamp(58px,10.4dvh,80px)!important;
  }
  .side{margin-top:4px!important}
  .log-panel summary{padding:8px 11px!important}
}

/* 5. Trick result now lives in the side column directly above collapsed log. */
.side > .trick-result-overlay{
  position:relative!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:min(100%,430px)!important;
  min-width:0!important;
  margin:0 auto 7px!important;
  padding:9px 12px!important;
  z-index:70!important;
}

/* 6. Menu navigation: large visible green Back button instead of tiny X. */
.menu-back{
  float:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:94px!important;
  padding:8px 11px!important;
  border:1px solid #48aa76!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,#247b50,#155f3b)!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:1000!important;
  line-height:1!important;
}
.choice-head .menu-back{margin-left:auto!important}
.rules-card > .menu-back{
  float:right!important;
  margin:0 0 9px 10px!important;
}

/* 8. Narrow 4-player phones: protect a real center lane.
   Only this extreme width needs slightly smaller side HUDs/cards. */
@media(max-width:390px){
  .poker-stage.count-4 .player{
    width:94px!important;
    min-width:94px!important;
    max-width:94px!important;
  }
  .poker-stage.count-4 .trick-center-layer{
    width:46cqw!important;
    max-width:46cqw!important;
  }
  .poker-stage.count-4 .trick{
    --table-card-w:34px!important;
    --table-card-h:50px!important;
    --table-card-gap:2px!important;
  }
  .poker-stage.count-4 .trick .card-rank{font-size:10px!important}
  .poker-stage.count-4 .trick .card-suit{font-size:22px!important}
}

/* New feature: BUSTED trick pile turns red once visible tricks exceed pinde. */
.trick-pile.busted .trick-pile-card{
  border-color:#ff767d!important;
  background:radial-gradient(circle,#a92735,#5e1420)!important;
  box-shadow:0 2px 7px rgba(255,71,85,.38)!important;
}
.trick-pile.busted .trick-pile-count{
  background:#8e1f2b!important;
  border-color:#ff7c84!important;
  color:#fff!important;
  box-shadow:0 0 9px rgba(255,78,90,.48)!important;
}

/* ==========================================================================
   v30.5.2 — STABILITY / UI POLISH
   ========================================================================== */

/* 1. Minimal leaderboard: the column heading explains the number. */
.leaderboard-modal-card{width:min(760px,96vw)!important}
.leaderboard-modal-card>h2{margin-bottom:10px!important}
.leaderboard-head{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:9px 11px!important;
  background:#0a1d2d!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
}
.leaderboard-kicker{font-size:10px!important;letter-spacing:.8px!important}
.leaderboard-columns,.leaderboard-row{
  grid-template-columns:34px minmax(96px,1.55fr) minmax(52px,.68fr) minmax(48px,.62fr) minmax(56px,.72fr) minmax(78px,.92fr)!important;
  gap:5px!important;
  align-items:center!important;
  padding:9px 11px!important;
}
.leaderboard-columns{
  color:#c3d3e1!important;
  font-size:9px!important;
  text-transform:uppercase!important;
  letter-spacing:.35px!important;
  text-align:center!important;
}
.leaderboard-columns span:nth-child(2){text-align:left!important}
.leaderboard-row{font-size:11px!important;min-height:40px!important}
.lb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-value{display:block;text-align:center;color:#fff;font-weight:1000;font-size:12px}
.leaderboard-row.podium{background:linear-gradient(90deg,rgba(217,181,86,.08),transparent 70%)}
.leaderboard-row.podium .lb-name{color:#ffe7a1}

/* 2. Over-target feedback: no BUSTED popup. The HUD gets one short red pulse,
   then the existing trick pile becomes/stays red. */
.player.busted-pulse>.player-card-body{
  animation:bustedHudPulseV3052 .38s ease-in-out 2 alternate!important;
}
@keyframes bustedHudPulseV3052{
  from{
    border-color:#496e89;
    box-shadow:0 0 0 0 rgba(255,67,80,0),inset 0 0 0 0 rgba(255,67,80,0);
  }
  to{
    border-color:#ff6672;
    box-shadow:0 0 0 2px rgba(255,77,89,.45),0 0 20px rgba(255,54,69,.75),inset 0 0 0 1px rgba(255,117,126,.7);
  }
}

/* 4. Gameplay itself never scrolls. Expanded Spillog is the explicit
   exception and releases the page lock. */
html.game-scroll-locked,
body.game-scroll-locked{
  width:100%!important;
  height:var(--tips-visual-vh,100dvh)!important;
  max-height:var(--tips-visual-vh,100dvh)!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
body.game-scroll-locked #app{
  max-height:var(--tips-visual-vh,100dvh)!important;
  overflow:hidden!important;
}
body.game-scroll-locked #game{
  max-height:calc(var(--tips-visual-vh,100dvh) - 2px)!important;
  overflow:hidden!important;
}
body.game-scroll-locked .log-panel{overflow:hidden!important}
body.game-scroll-locked .log-panel:not([open]) .log{display:none!important}

/* Final score must fit as a panel rather than introducing another scroll area. */
.game-end-card{overflow:hidden!important}
@media(max-height:650px){
  .game-end-card{padding:10px!important}
  .game-winner-hero{margin:7px 0!important;padding:8px!important}
  .winner-trophy{font-size:27px!important}
  .game-winner-name{font-size:22px!important}
  .final-rank-row{padding:5px 7px!important}
  .game-ready-status{margin:5px 0!important;padding:5px!important}
  .game-end-actions{gap:4px!important}
  .game-end-actions .btn{padding:6px 8px!important}
}

/* 5. WebKit/iPhone compositing guard. Animated CSS filter on text-bearing
   layers can produce bright horizontal flicker lines. On WebKit the visual
   effect is kept on border/box-shadow layers instead. */
@supports (-webkit-touch-callout:none){
  body{
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  .player.active>.player-card-body,
  .player.played-landed>.player-card-body{
    animation:none!important;
    filter:none!important;
  }
  .live-trump.trump-arrival{
    animation:trumpArrivalWebkitV3052 .42s ease-out both!important;
    filter:none!important;
  }
  @keyframes trumpArrivalWebkitV3052{
    0%{box-shadow:0 0 0 rgba(93,217,255,0)}
    45%{box-shadow:0 0 18px rgba(93,217,255,.68)}
    100%{box-shadow:0 0 0 rgba(93,217,255,0)}
  }
  .player-card-body,
  .hud-mainline,
  .wait,
  .pname,
  .player-static-stats{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
}

@media(max-width:430px){
  .leaderboard-columns,.leaderboard-row{
    grid-template-columns:26px minmax(78px,1.4fr) 42px 38px 46px 62px!important;
    gap:3px!important;
    padding:8px 6px!important;
  }
  .leaderboard-columns{font-size:7.5px!important}
  .leaderboard-row{font-size:9px!important}
  .lb-value{font-size:10px!important}
}


/* ==========================================================================
   v30.5.5 — ROYAL HUD + CLEAN EMPTY TABLE + RESPONSIVE CARD NAMES
   ========================================================================== */

/*
  IMPORTANT:
  The responsive rule `.poker-stage .trick { display:flex!important }`
  had greater specificity than global `.hidden`, so the empty trick container
  still rendered as a long horizontal background before the first card.
*/
.poker-stage .trick.hidden{
  display:none!important;
}

/* Empty-state is now only the small central waiting pill. */
.poker-stage .trick-empty-state{
  width:max-content!important;
  max-width:80%!important;
  padding:clamp(5px,.55cqw,8px) clamp(9px,.9cqw,14px)!important;
  border:1px solid rgba(201,157,49,.20)!important;
  border-radius:999px!important;
  background:rgba(4,34,31,.48)!important;
  box-shadow:0 3px 9px rgba(0,0,0,.15)!important;
}

/*
  TIPS ROYALE HUD PALETTE
  Navy / Ruby / Gold from the logo identity. All text remains white.
  No animated filters, so this stays friendly to iOS/WebKit rendering.
*/
.player-static-stats .meta-bid{
  background:linear-gradient(90deg,#092844 0%,#0f4775 55%,#155b8d 100%)!important;
  border-color:#4c91bd!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important;
}

.player-static-stats .meta-pinde{
  background:linear-gradient(90deg,#3b1017 0%,#651b26 55%,#812632 100%)!important;
  border-color:#b8505c!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}

.player-static-stats .meta-score{
  background:linear-gradient(90deg,#443006 0%,#6a4b0a 55%,#826214 100%)!important;
  border-color:#cba43c!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important;
}

.player-static-stats .meta-bid small,
.player-static-stats .meta-bid strong,
.player-static-stats .meta-pinde small,
.player-static-stats .meta-pinde strong,
.player-static-stats .meta-score small,
.player-static-stats .meta-score strong{
  color:#fff!important;
  text-shadow:0 1px 1px rgba(0,0,0,.24)!important;
}

.player-static-stats .meta-pinde.hidden-value strong{
  color:rgba(255,255,255,.76)!important;
}

/*
  Player names above table cards must scale with the same poker-stage
  container as the cards. The old 7px max looked tiny on desktop/4K.
*/
.poker-stage .played-by{
  height:clamp(10px,1.15cqw,17px)!important;
  margin-bottom:clamp(2px,.22cqw,4px)!important;
  font-size:clamp(6.5px,.72cqw,11.5px)!important;
  line-height:clamp(10px,1.15cqw,17px)!important;
  letter-spacing:.05px!important;
  color:#f5f8fb!important;
  text-shadow:0 1px 2px rgba(0,0,0,.55)!important;
}

/* UDSPL label follows the same scale family, so it doesn't become tiny
   compared with a larger desktop player name. */
.poker-stage .leadlabel{
  top:calc(-1 * clamp(6px,.65cqw,10px))!important;
  font-size:clamp(5px,.55cqw,8.5px)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.60)!important;
}


/* ==========================================================================
   v30.5.6 — FINAL 10-SECOND TURN COUNTDOWN
   ========================================================================== */

.turn-countdown{
  position:absolute!important;
  z-index:60!important;
  left:50%!important;
  top:calc(-1 * clamp(10px,1.15cqw,17px))!important;
  transform:translateX(-50%)!important;
  min-width:clamp(22px,2.5cqw,34px)!important;
  height:clamp(22px,2.5cqw,34px)!important;
  padding:0 clamp(5px,.55cqw,8px)!important;
  display:grid!important;
  place-items:center!important;
  border:2px solid #ff7c7c!important;
  border-radius:999px!important;
  background:#7a1018!important;
  color:#fff!important;
  font-size:clamp(10px,1.05cqw,14px)!important;
  font-weight:1000!important;
  line-height:1!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 0 12px rgba(224,51,65,.40)!important;
  pointer-events:none!important;
}

.turn-countdown.hidden{display:none!important}

.turn-countdown.critical{
  animation:turnCountdownCriticalV3056 .68s ease-in-out infinite alternate!important;
}

@keyframes turnCountdownCriticalV3056{
  from{transform:translateX(-50%) scale(1);box-shadow:0 0 8px rgba(224,51,65,.35)}
  to{transform:translateX(-50%) scale(1.12);box-shadow:0 0 18px rgba(255,69,79,.80)}
}

@media (prefers-reduced-motion:reduce){
  .turn-countdown.critical{animation:none!important}
}


/* ==========================================================================
   v30.5.7 — CLEAN ACTIVE TURN GLOW
   Keep only the outer active-turn halo. The inner green HUD rectangle is
   intentionally removed for a calmer, cleaner player card.
   ========================================================================== */

.poker-stage .player.active > .player-card-body{
  animation:none!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Outer halo remains the sole active-turn indicator. */
.poker-stage .player.active > .active-pulse-ring{
  display:block!important;
}


/* ==========================================================================
   v30.5.8 — ROUND HISTORY + EXPLICIT OUTER TURN PULSE
   ========================================================================== */

.hud-status{
  display:flex!important;
  align-items:center!important;
  gap:clamp(4px,.6vw,8px)!important;
}

.hud-status h3{
  flex:1 1 auto!important;
  min-width:0!important;
}

.round-history-btn{
  flex:0 0 auto!important;
  width:clamp(27px,2.1vw,34px)!important;
  height:clamp(27px,2.1vw,34px)!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #9c7b2c!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,#4d3a0c,#2d2208)!important;
  color:#fff!important;
  font-size:clamp(13px,1.3vw,17px)!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
  box-shadow:0 3px 8px rgba(0,0,0,.24)!important;
}

.round-history-btn.hidden{
  display:none!important;
}

.round-result-modal{
  position:fixed!important;
  inset:0!important;
  z-index:7600!important;
  display:grid!important;
  place-items:center!important;
  padding:14px!important;
  background:rgba(0,0,0,.72)!important;
  backdrop-filter:blur(5px)!important;
}

.round-result-modal.hidden{
  display:none!important;
}

.round-result-card{
  width:min(620px,94vw)!important;
  max-width:94vw!important;
  padding:14px!important;
  border:1px solid #536f88!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#0d2538,#081724)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.58)!important;
}

.round-result-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin-bottom:8px!important;
}

.round-result-kicker{
  color:#e0b84b!important;
  font-size:9px!important;
  font-weight:1000!important;
  letter-spacing:.8px!important;
}

.round-result-head h3{
  margin:2px 0 0!important;
  color:#fff!important;
  font-size:18px!important;
}

.round-result-close{
  flex:0 0 auto!important;
  padding:7px 10px!important;
  font-size:9px!important;
}

.round-result-meta{
  margin-bottom:7px!important;
  color:#9fb6c9!important;
  font-size:9px!important;
}

.round-result-rows{
  display:grid!important;
  gap:5px!important;
}

.round-result-row{
  display:grid!important;
  grid-template-columns:minmax(90px,1.5fr) repeat(4,minmax(48px,.65fr))!important;
  gap:5px!important;
  align-items:center!important;
  padding:7px 8px!important;
  border:1px solid #28465e!important;
  border-radius:9px!important;
  background:#091b2a!important;
}

.round-result-row.round-best{
  border-color:#a78430!important;
  background:linear-gradient(90deg,#2c250f,#0a1d2b 55%)!important;
}

.round-result-name{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:1000!important;
}

.round-result-row>span:not(.round-result-name){
  display:grid!important;
  justify-items:center!important;
  gap:1px!important;
}

.round-result-row small{
  color:#91a9bd!important;
  font-size:7px!important;
  font-weight:900!important;
}

.round-result-row strong{
  color:#fff!important;
  font-size:11px!important;
}

.round-result-row strong.positive{color:#9bf1bd!important}
.round-result-row strong.negative{color:#ff989e!important}

/*
  v30.5.7 removed the inner HUD animation. Reassert the OUTER pulse explicitly
  so future visual overrides cannot accidentally make the active ring static.
*/
.poker-stage .player.active > .active-pulse-ring{
  animation:activeOuterPulseV3058 .78s ease-in-out infinite alternate!important;
}

@keyframes activeOuterPulseV3058{
  from{
    opacity:.44;
    border-color:rgba(77,255,164,.58);
    box-shadow:0 0 5px rgba(77,255,164,.28),0 0 9px rgba(77,255,164,.10);
  }
  to{
    opacity:1;
    border-color:rgba(112,255,186,1);
    box-shadow:0 0 11px rgba(77,255,164,.78),0 0 17px rgba(77,255,164,.27);
  }
}

@media(max-width:620px){
  .round-result-card{padding:10px!important}
  .round-result-head{align-items:flex-start!important}
  .round-result-close{padding:6px 8px!important;font-size:8px!important}
  .round-result-row{
    grid-template-columns:minmax(78px,1.35fr) repeat(4,minmax(38px,.6fr))!important;
    gap:3px!important;
    padding:6px 5px!important;
  }
  .round-result-name,.round-result-row strong{font-size:9px!important}
  .round-result-row small{font-size:6px!important}
}


/* ==========================================================================
   v30.5.9 — TRUMP / LOBBY POLISH
   ========================================================================== */

/* Clean permanent trump card: suit only. */
.trump-suit::before{
  content:none!important;
  display:none!important;
}

.lobby-code-line{
  margin-top:4px!important;
  color:#b8cbd9!important;
  font-size:12px!important;
}

.lobby-code-line strong{
  color:#fff!important;
  letter-spacing:.7px!important;
}


/* ==========================================================================
   v30.5.10 — ROUND SCORE BUTTON + FINAL TARGET MISS
   ========================================================================== */

.round-history-btn{
  width:clamp(27px,2.1vw,34px)!important;
  min-width:clamp(27px,2.1vw,34px)!important;
  height:clamp(27px,2.1vw,34px)!important;
  padding:0!important;
  border-radius:50%!important;
  font-family:inherit!important;
  font-size:clamp(11px,1.15vw,14px)!important;
  font-weight:1000!important;
  line-height:1!important;
  letter-spacing:0!important;
}

.trick-pile.missed-target .trick-pile-card{
  border-color:#ff6971!important;
}

.trick-pile.missed-target .trick-pile-count{
  border-color:#ff858b!important;
}

/* ==========================================================================
   v30.6.11 — LOG MODAL + BID SPEECH BUBBLES
   ========================================================================== */


.game-log-btn{
  flex:0 0 auto!important;
  width:clamp(27px,2.1vw,34px)!important;
  min-width:clamp(27px,2.1vw,34px)!important;
  height:clamp(27px,2.1vw,34px)!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #6991ae!important;
  border-radius:50%!important;
  background:linear-gradient(180deg,#17364d,#0a2132)!important;
  color:#fff!important;
  font-family:inherit!important;
  font-size:clamp(11px,1.15vw,14px)!important;
  font-weight:1000!important;
  line-height:1!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
  box-shadow:0 3px 8px rgba(0,0,0,.24)!important;
}

.game-log-btn:hover{
  border-color:#8bb8d6!important;
  background:linear-gradient(180deg,#204962,#0d2b40)!important;
}

.game-log-card{
  width:min(680px,94vw)!important;
  max-height:min(84dvh,760px)!important;
  overflow:hidden!important;
}

.game-log-rows{
  display:grid!important;
  gap:4px!important;
  max-height:min(65dvh,580px)!important;
  overflow:auto!important;
  padding:2px 3px 3px!important;
  scrollbar-width:thin!important;
}

.game-log-row{
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr)!important;
  gap:8px!important;
  align-items:start!important;
  padding:8px 9px!important;
  border:1px solid rgba(100,142,174,.25)!important;
  border-radius:8px!important;
  background:#091b2b!important;
  color:#e4eef6!important;
  font-size:clamp(9px,1vw,11px)!important;
  line-height:1.35!important;
}

.game-log-index{
  color:#6f98b5!important;
  font-family:Consolas,monospace!important;
  font-size:.82em!important;
  text-align:right!important;
}

.game-log-empty{
  padding:18px!important;
  color:#8fa9bc!important;
  text-align:center!important;
  font-size:11px!important;
}

/* Speech bubbles are temporary board effects, not part of layout flow. */
.hud-speech-bubble{
  position:absolute!important;
  z-index:160!important;
  min-width:44px!important;
  max-width:min(170px,38cqw)!important;
  padding:clamp(6px,.8cqw,9px) clamp(8px,1cqw,12px)!important;
  border:1px solid rgba(255,255,255,.88)!important;
  border-radius:999px!important;
  background:#f7fbff!important;
  color:#0a2030!important;
  box-shadow:0 7px 18px rgba(0,0,0,.32)!important;
  font-size:clamp(8px,1.2cqw,13px)!important;
  font-weight:1000!important;
  line-height:1!important;
  letter-spacing:.2px!important;
  white-space:nowrap!important;
  pointer-events:none!important;
  transform-origin:center!important;
  animation:hudSpeechBubbleLife 2.65s ease-out forwards!important;
}

.hud-speech-bubble::after{
  content:""!important;
  position:absolute!important;
  width:9px!important;
  height:9px!important;
  background:#f7fbff!important;
  transform:rotate(45deg)!important;
}

.hud-speech-bubble.speech-from-bottom{
  transform:translate(-50%,-100%) scale(.78);
}
.hud-speech-bubble.speech-from-bottom::after{
  left:50%!important;
  bottom:-5px!important;
  margin-left:-5px!important;
}

.hud-speech-bubble.speech-from-top{
  transform:translate(-50%,0) scale(.78);
}
.hud-speech-bubble.speech-from-top::after{
  left:50%!important;
  top:-5px!important;
  margin-left:-5px!important;
}

.hud-speech-bubble.speech-from-left{
  transform:translate(0,-50%) scale(.78);
}
.hud-speech-bubble.speech-from-left::after{
  left:-5px!important;
  top:50%!important;
  margin-top:-5px!important;
}

.hud-speech-bubble.speech-from-right{
  transform:translate(-100%,-50%) scale(.78);
}
.hud-speech-bubble.speech-from-right::after{
  right:-5px!important;
  top:50%!important;
  margin-top:-5px!important;
}

@keyframes hudSpeechBubbleLife{
  0%{opacity:0;filter:blur(1px)}
  9%{opacity:1;filter:none}
  76%{opacity:1}
  100%{opacity:0}
}

@media (orientation:landscape) and (max-height:600px){
  .game-log-btn{
    width:clamp(20px,6.2dvh,26px)!important;
    min-width:clamp(20px,6.2dvh,26px)!important;
    height:clamp(20px,6.2dvh,26px)!important;
    font-size:clamp(8px,2.4dvh,10px)!important;
  }

  .hud-speech-bubble{
    padding:clamp(4px,1.3dvh,6px) clamp(6px,1.8dvh,8px)!important;
    font-size:clamp(6px,1.9dvh,8px)!important;
  }
}


/* ==========================================================================
   v30.6.13 — UNIFIED HUD UTILITIES + CLEAN TOP BRAND
   ========================================================================== */

.ingame-brand{
  position:static!important;
  justify-self:center!important;
  display:grid!important;
  place-items:center!important;
}

.hud-status{
  display:flex!important;
  align-items:center!important;
  gap:clamp(5px,.65vw,9px)!important;
}

.hud-status h3{
  flex:1 1 auto!important;
  min-width:0!important;
}

.hud-utility-cluster{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:clamp(3px,.35vw,5px)!important;
  white-space:nowrap!important;
}

/* Exact same appearance for S, L and sound. */
.hud-utility-cluster .hud-utility-btn{
  flex:0 0 auto!important;
  width:clamp(27px,2.1vw,34px)!important;
  min-width:clamp(27px,2.1vw,34px)!important;
  height:clamp(27px,2.1vw,34px)!important;
  min-height:clamp(27px,2.1vw,34px)!important;
  padding:0!important;

  display:grid!important;
  place-items:center!important;

  border:1px solid #9c7b2c!important;
  border-radius:50%!important;
  background:linear-gradient(180deg,#4d3a0c,#2d2208)!important;
  color:#fff!important;

  font-family:inherit!important;
  font-size:clamp(11px,1.15vw,14px)!important;
  font-weight:1000!important;
  line-height:1!important;
  letter-spacing:0!important;

  cursor:pointer!important;
  touch-action:manipulation!important;
  box-shadow:0 3px 8px rgba(0,0,0,.24)!important;
  -webkit-tap-highlight-color:transparent!important;
}

.hud-utility-cluster .hud-utility-btn:hover{
  border-color:#c6a048!important;
  background:linear-gradient(180deg,#5d470f,#372908)!important;
}

.hud-utility-cluster .hud-utility-btn:active{
  transform:scale(.94)!important;
}

.hud-utility-cluster .sound-hud-btn{
  font-size:clamp(10px,1.05vw,13px)!important;
}

.hud-utility-cluster .hud-utility-btn.hidden{
  display:none!important;
}

@media (orientation:landscape) and (max-height:600px){
  .hud-utility-cluster{gap:2px!important}

  .hud-utility-cluster .hud-utility-btn{
    width:clamp(20px,6.2dvh,25px)!important;
    min-width:clamp(20px,6.2dvh,25px)!important;
    height:clamp(20px,6.2dvh,25px)!important;
    min-height:clamp(20px,6.2dvh,25px)!important;
    font-size:clamp(7px,2.2dvh,9px)!important;
  }

  .hud-utility-cluster .sound-hud-btn{
    font-size:clamp(7px,2.05dvh,8.5px)!important;
  }
}


/* ==========================================================================
   v30.6.17 — SPLASH VERSION + MODAL VISUAL ISOLATION
   ========================================================================== */

/* Always pin build number to the physical bottom of the opening splash.
   It is deliberately independent of logo / LET'S PLAY layout. */
#splash .splash-version{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:max(10px,env(safe-area-inset-bottom,0px))!important;
  transform:translateX(-50%)!important;
  z-index:2!important;
  margin:0!important;
  color:rgba(225,233,241,.48)!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.6px!important;
  line-height:1!important;
  white-space:nowrap!important;
  pointer-events:none!important;
  user-select:none!important;
}

@media(max-width:620px){
  #splash .splash-version{
    bottom:max(8px,env(safe-area-inset-bottom,0px))!important;
    font-size:9px!important;
  }
}

/* Scoreboard and Spillog are inspection surfaces. Nothing animated from the
   board is allowed to render above/through them. */
.round-result-modal{
  z-index:20000!important;
}

body.view-modal-open .deal-layer,
body.view-modal-open .played-card-flight,
body.view-modal-open .trick-fly-layer,
body.view-modal-open .game-toast,
body.view-modal-open .hud-speech-bubble,
body.view-modal-open .emoji-reaction{
  visibility:hidden!important;
}


/* ========================================================================== 
   v30.6.25 — AUTO QUEUE / MATCHMAKING MENU
   ========================================================================== */
.queue-launch-card{
  grid-column:1/-1;
  min-height:126px;
  border-color:#b78e2f;
  background:linear-gradient(135deg,#173d39,#11304a 58%,#352b12);
  box-shadow:inset 0 0 0 1px rgba(255,210,88,.12),0 10px 26px rgba(0,0,0,.2);
}
.queue-launch-card .menu-icon{font-size:31px}
.queue-launch-card strong{font-size:19px;color:#fff4c2}
.lobby-launch-card{border-color:#466f93}
.queue-entry-copy{margin:8px 0 12px;color:#c2d1df;font-size:12px;line-height:1.45}
.queue-start-btn{width:100%;min-height:50px;font-weight:1000;font-size:15px}
.queue-entry-hint{text-align:center;margin-top:8px;font-size:10px}
.lobby-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}

.queue-lobby-panel{
  margin:13px 0 10px;
  padding:14px;
  border:1px solid #4c789d;
  border-radius:14px;
  background:linear-gradient(180deg,#0c2235,#081826);
  box-shadow:inset 0 0 30px rgba(49,126,169,.08);
}
.queue-lobby-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.queue-kicker{font-size:9px;letter-spacing:1.5px;color:#d9b856;font-weight:1000;margin-bottom:3px}
.queue-lobby-head strong{font-size:17px}
.queue-count{display:grid;place-items:center;min-width:64px;height:42px;border:1px solid #8d7429;border-radius:999px;background:#392f12;color:#ffdf70;font-weight:1000;font-size:16px}
.queue-seats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.queue-seat{min-width:0;text-align:center;padding:8px 4px;border:1px solid #31546f;border-radius:12px;background:#0b1e2e}
.queue-seat small{display:block;min-height:20px;font-size:7px;line-height:1.25;color:#86a2b7;font-weight:900}
.queue-avatar{display:grid;place-items:center;width:58px;height:58px;margin:5px auto 7px;border-radius:50%;border:2px solid #5f87a5;background:linear-gradient(180deg,#173b58,#0b2235);font-size:22px;font-weight:1000;color:#fff}
.queue-seat.occupied.connected .queue-avatar{border-color:#47b979;box-shadow:0 0 14px rgba(71,185,121,.18)}
.queue-seat.empty{opacity:.6;border-style:dashed}
.queue-seat.empty .queue-avatar{color:#6f899b}
.queue-seat strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.queue-seat>span{display:block;margin-top:3px;font-size:8px;color:#7fbf9a}
.queue-seat.empty>span{color:#7890a3}
.queue-lobby-foot{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.queue-stat{padding:9px 10px;border:1px solid #29465e;border-radius:10px;background:#071521}
.queue-stat small{display:block;font-size:7px;letter-spacing:1px;color:#7692a8;font-weight:1000}
.queue-stat strong{display:block;margin-top:2px;font-size:13px;color:#f5e5a7}

@media(max-width:620px){
  .queue-launch-card{grid-column:auto;min-height:auto}
  .lobby-choice-grid{grid-template-columns:1fr}
  .queue-lobby-panel{padding:10px 7px}
  .queue-lobby-head{margin-bottom:10px}
  .queue-lobby-head strong{font-size:14px}
  .queue-count{min-width:54px;height:36px;font-size:13px}
  .queue-seats{gap:4px}
  .queue-seat{padding:6px 2px;border-radius:9px}
  .queue-seat small{min-height:18px;font-size:5.5px;letter-spacing:-.1px}
  .queue-avatar{width:43px;height:43px;margin:4px auto 5px;font-size:16px}
  .queue-seat strong{font-size:8px}
  .queue-seat>span{font-size:6px}
  .queue-lobby-foot{gap:6px;margin-top:8px}
  .queue-stat{padding:7px}
  .queue-stat small{font-size:6px}
  .queue-stat strong{font-size:10px}
}



/* ========================================================================== 
   v30.6.28 — CENTERED FRONT MENU / REFRESH NAVIGATION
   ========================================================================== */
html.front-home-active,
body.front-home-active{
  height:100%!important;
  min-height:100%!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

body.front-home-active #entry.frontpage{
  width:min(1060px,94vw)!important;
  min-height:0!important;
  max-height:calc(100dvh - 16px)!important;
  margin:8px auto!important;
  padding:clamp(12px,1.8dvh,20px)!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}

body.front-home-active .front-logo{
  width:clamp(215px,28dvh,310px)!important;
  max-height:29dvh!important;
  margin:0 auto clamp(10px,1.8dvh,16px)!important;
  object-fit:contain!important;
}

body.front-home-active .menu-grid{
  width:100%!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(10px,1.4dvh,16px)!important;
}

body.front-home-active .queue-launch-card{
  grid-column:auto!important;
}

body.front-home-active .menu-card{
  min-height:clamp(120px,18dvh,158px)!important;
  padding:clamp(14px,2dvh,18px)!important;
  text-align:center!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
}

body.front-home-active .menu-icon{
  display:block!important;
  margin:0 0 clamp(8px,1.2dvh,12px)!important;
  font-size:clamp(26px,4.4dvh,38px)!important;
  line-height:1!important;
  text-align:center!important;
}

body.front-home-active .menu-card strong{
  font-size:clamp(17px,2.7dvh,22px)!important;
  margin:0 0 6px!important;
  line-height:1.18!important;
  text-align:center!important;
}

body.front-home-active .menu-card span:not(.menu-icon){
  font-size:clamp(11px,1.7dvh,14px)!important;
  line-height:1.35!important;
  color:var(--muted)!important;
  text-align:center!important;
  max-width:92%!important;
}

.info-launch-card{
  border-color:#71613a!important;
  background:linear-gradient(180deg,#28394a,#171d25 72%,#2b2415)!important;
}
.info-choice-grid{margin-top:12px}

.rejoin-corner-btn{
  position:fixed!important;
  z-index:4500!important;
  left:max(10px,env(safe-area-inset-left,0px))!important;
  top:max(10px,env(safe-area-inset-top,0px))!important;
  width:46px!important;
  height:46px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid #d1a83e!important;
  border-radius:50%!important;
  background:linear-gradient(180deg,#247b50,#155f3b)!important;
  color:#fff6ca!important;
  box-shadow:0 8px 22px rgba(0,0,0,.34),0 0 0 3px rgba(209,168,62,.08)!important;
  font-size:23px!important;
  font-weight:1000!important;
  line-height:1!important;
}
.rejoin-corner-btn:hover{filter:brightness(1.08)}
.rejoin-corner-btn.hidden{display:none!important}

@media(max-width:620px){
  body.front-home-active #entry.frontpage{
    width:100%!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:max(10px,env(safe-area-inset-top,0px)) 10px max(10px,env(safe-area-inset-bottom,0px))!important;
    border-radius:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }

  body.front-home-active .front-logo{
    width:min(240px,60vw)!important;
    max-height:23dvh!important;
    margin:0 auto clamp(10px,1.6dvh,14px)!important;
  }

  body.front-home-active .menu-grid{
    width:100%!important;
    grid-template-columns:1fr!important;
    gap:clamp(8px,1.2dvh,10px)!important;
  }

  body.front-home-active .menu-card,
  body.front-home-active .queue-launch-card{
    min-height:0!important;
    height:clamp(84px,12.6dvh,110px)!important;
    padding:10px 12px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    text-align:center!important;
  }

  body.front-home-active .menu-icon,
  body.front-home-active .queue-launch-card .menu-icon{
    margin:0 0 6px!important;
    font-size:26px!important;
    text-align:center!important;
  }

  body.front-home-active .menu-card strong,
  body.front-home-active .queue-launch-card strong{
    margin:0 0 4px!important;
    font-size:14px!important;
    line-height:1.16!important;
    text-align:center!important;
  }

  body.front-home-active .menu-card span:not(.menu-icon),
  body.front-home-active .queue-launch-card span:not(.menu-icon){
    font-size:9.5px!important;
    line-height:1.24!important;
    text-align:center!important;
    max-width:95%!important;
  }

  .rejoin-corner-btn{
    width:42px!important;
    height:42px!important;
    left:max(8px,env(safe-area-inset-left,0px))!important;
    top:max(8px,env(safe-area-inset-top,0px))!important;
    font-size:21px!important;
  }
}

@media(max-width:380px), (max-height:610px){
  body.front-home-active .front-logo{
    width:min(210px,56vw)!important;
    max-height:19dvh!important;
  }
  body.front-home-active .menu-card,
  body.front-home-active .queue-launch-card{
    height:clamp(78px,11.8dvh,92px)!important;
    padding:8px 10px!important;
  }
  body.front-home-active .menu-card strong,
  body.front-home-active .queue-launch-card strong{
    font-size:13px!important;
  }
  body.front-home-active .menu-card span:not(.menu-icon),
  body.front-home-active .queue-launch-card span:not(.menu-icon){
    font-size:8.5px!important;
  }
}



/* ========================================================================== 
   v30.6.28 — EXPLICIT REFRESH / UPDATE CONTROL
   ========================================================================== */
.refresh-corner-btn{
  position:fixed!important;
  z-index:4500!important;
  right:max(10px,env(safe-area-inset-right,0px))!important;
  top:max(10px,env(safe-area-inset-top,0px))!important;
  width:46px!important;
  height:46px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid #6b96b9!important;
  border-radius:50%!important;
  background:linear-gradient(180deg,#173f60,#102b43)!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(0,0,0,.34),0 0 0 3px rgba(80,138,181,.08)!important;
  font-size:24px!important;
  font-weight:1000!important;
  line-height:1!important;
  touch-action:manipulation!important;
}
.refresh-corner-btn:hover{filter:brightness(1.1)}
.refresh-corner-btn:active{transform:scale(.96)}

@media(max-width:620px){
  .refresh-corner-btn{
    width:42px!important;
    height:42px!important;
    right:max(8px,env(safe-area-inset-right,0px))!important;
    top:max(8px,env(safe-area-inset-top,0px))!important;
    font-size:22px!important;
  }
}


/* ==========================================================================
   v30.6.30 — MATCHMAKING CHAT
   ========================================================================== */
.queue-chat{
  margin-top:12px;
  padding:10px;
  border:1px solid #29465e;
  border-radius:12px;
  background:#071521;
}
.queue-chat-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px}
.queue-chat-head>span{font-size:9px;letter-spacing:1px;color:#d9b856;font-weight:1000}
.queue-chat-head>small{font-size:8px;color:#7692a8}
.queue-chat-messages{
  height:112px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:5px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:9px;
  background:#04101a;
}
.queue-chat-empty{display:grid;place-items:center;height:100%;color:#6f899b;font-size:9px;text-align:center}
.queue-chat-message{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:start;margin:3px 0;padding:5px 7px;border-radius:8px;background:#0e2639;font-size:10px}
.queue-chat-message strong{color:#f5e5a7;white-space:nowrap;font-size:9px}
.queue-chat-message span{min-width:0;overflow-wrap:anywhere;color:#dce8f1;line-height:1.3}
.queue-chat-message.mine{background:#123a30}
.queue-chat-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin-top:7px}
.queue-chat-compose input{min-width:0;margin:0!important}
.queue-chat-compose .btn{min-width:72px}
@media(max-width:620px){
  .queue-chat{margin-top:8px;padding:7px}
  .queue-chat-head{margin-bottom:5px}
  .queue-chat-head>small{display:none}
  .queue-chat-messages{height:92px;padding:4px}
  .queue-chat-message{font-size:9px;padding:4px 6px}
  .queue-chat-compose .btn{min-width:58px;padding-inline:8px}
}

/* ========================================================================== 
   v30.7.0 — TIPS ROYALE TEXAS HOLD'EM ALPHA
   ========================================================================== */
.other-games-launch{
  border-color:#8d6d2d!important;
  background:linear-gradient(180deg,#29384a,#171d25 72%,#302415)!important;
}
.other-games-grid{grid-template-columns:1fr!important}
.poker-launch-card{
  border-color:#b88a31!important;
  background:radial-gradient(circle at 50% 10%,rgba(192,145,53,.2),transparent 42%),linear-gradient(180deg,#173451,#0e2234)!important;
}
.poker-alpha-note{
  margin:8px 0 14px;
  padding:10px 12px;
  border:1px solid #5f7488;
  border-radius:10px;
  background:#0b2235;
  color:#b8c9d8;
  font-size:11px;
  line-height:1.4;
}
.poker-start-btn{width:100%;margin-top:6px}
.poker-rejoin-btn{width:100%;margin-top:8px}

html.poker-active,
body.poker-active{
  min-height:100%;
  height:100%;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
.poker-app{
  position:fixed;
  inset:0;
  z-index:3000;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% -10%,rgba(29,87,128,.3),transparent 45%),
    #06121d;
  color:#fff;
}
.poker-shell{
  width:min(1180px,100vw);
  height:100dvh;
  margin:0 auto;
  padding:clamp(8px,1.3dvh,14px);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto auto;
  gap:clamp(5px,.9dvh,9px);
}
.poker-topbar{
  min-height:58px;
  display:grid;
  grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr);
  align-items:center;
  gap:8px;
}
.poker-exit-btn{justify-self:start}
.poker-brand{
  display:grid;
  justify-items:center;
  line-height:1;
}
.poker-logo{
  width:clamp(82px,10dvh,124px);
  max-height:9dvh;
  object-fit:contain;
}
.poker-brand strong{
  margin-top:2px;
  color:#f8df92;
  font-size:clamp(10px,1.7dvh,14px);
  letter-spacing:.5px;
}
.poker-brand span{
  margin-top:3px;
  font-size:8px;
  color:#92a8ba;
  letter-spacing:1.5px;
}
.poker-blind-info{
  justify-self:end;
  padding:8px 11px;
  border:1px solid #8c7133;
  border-radius:12px;
  background:#1e2630;
  color:#f8df92;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
.poker-status-line{
  min-height:30px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:5px 12px;
  border:1px solid #31536d;
  border-radius:10px;
  background:#0a1f30;
  font-size:11px;
  font-weight:800;
}
#pokerPhaseInfo{text-align:center;color:#f3d47d}
#pokerCountdown{text-align:right;color:#dbe8f1;font-weight:1000}
#pokerCountdown.urgent{color:#ff6a6a}
.poker-table-wrap{
  min-height:0;
  display:grid;
  place-items:center;
}
.poker-table{
  position:relative;
  width:min(100%,1050px);
  height:min(100%,620px);
  min-height:330px;
  aspect-ratio:1.72/1;
  border:3px solid #4d86aa;
  border-radius:48% / 42%;
  background:
    radial-gradient(ellipse at center,#168158 0%,#08704a 48%,#055337 75%,#063421 100%);
  box-shadow:
    inset 0 0 0 9px rgba(3,26,23,.32),
    inset 0 0 60px rgba(0,0,0,.45),
    0 16px 38px rgba(0,0,0,.34);
  overflow:hidden;
}
.poker-table::after{
  content:"TIPS ROYALE";
  position:absolute;
  left:50%;top:70%;
  transform:translate(-50%,-50%);
  color:rgba(243,216,131,.12);
  font-size:clamp(18px,3.5cqw,42px);
  font-weight:1000;
  letter-spacing:4px;
  pointer-events:none;
}
.poker-seats{position:absolute;inset:0;z-index:5}
.poker-seat{
  position:absolute;
  transform:translate(-50%,-50%);
  width:clamp(112px,15cqw,160px);
  min-height:76px;
  padding:7px 8px 6px;
  border:2px solid #52748d;
  border-radius:13px;
  background:linear-gradient(180deg,#102b40,#081c2a);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  text-align:center;
  transition:.2s opacity,.2s border-color,.2s box-shadow;
}
.poker-seat.active{
  border-color:#70e6a9;
  box-shadow:0 0 0 3px rgba(80,227,154,.16),0 0 24px rgba(80,227,154,.34),0 8px 18px rgba(0,0,0,.35);
}
.poker-seat.folded{opacity:.48;filter:saturate(.65)}
.poker-seat.busted{opacity:.3}
.poker-seat-badges{
  position:absolute;
  left:5px;top:-11px;
  display:flex;gap:3px;
}
.poker-badge{
  display:grid;place-items:center;
  min-width:24px;height:22px;padding:0 5px;
  border-radius:11px;
  border:1px solid #ac8535;
  background:#30260d;
  color:#ffe8a2;
  font-size:8px;
  font-weight:1000;
}
.poker-badge.dealer{background:#f6f6f2;color:#101820;border-color:#cfd3d5}
.poker-seat-name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11px;font-weight:1000;color:#fff;
}
.poker-seat-chips{margin-top:2px;color:#f4d678;font-size:10px;font-weight:900}
.poker-seat-cards{height:33px;margin-top:4px;display:flex;justify-content:center;gap:3px}
.poker-seat-action{min-height:12px;margin-top:2px;color:#9ed6ff;font-size:8px;font-weight:1000;letter-spacing:.4px}
.poker-center{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  width:min(58%,570px);
  display:grid;
  justify-items:center;
  gap:7px;
}
.poker-pot{
  padding:5px 12px;
  border:1px solid #be963e;
  border-radius:999px;
  background:rgba(20,31,22,.78);
  color:#ffe39a;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.5px;
}
.poker-board{display:flex;justify-content:center;gap:clamp(4px,.6cqw,8px);min-height:74px}
.poker-center-message{
  min-height:22px;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(4,36,29,.72);
  color:#d7eee5;
  font-size:10px;
  font-weight:800;
  text-align:center;
}
.poker-card{
  position:relative;
  width:clamp(45px,5.8cqw,66px);
  aspect-ratio:.69;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid #d5d5d2;
  border-radius:7px;
  background:linear-gradient(160deg,#fff,#ecece8);
  box-shadow:0 3px 7px rgba(0,0,0,.28);
  color:#111;
  font-weight:1000;
  line-height:.9;
}
.poker-card.red-card{color:#cf2d31}
.poker-card .card-rank{font-size:clamp(15px,2cqw,24px)}
.poker-card .card-suit{font-size:clamp(17px,2.3cqw,27px);margin-top:3px}
.poker-card.small{width:25px;border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.poker-card.small .card-rank{font-size:8px}
.poker-card.small .card-suit{font-size:10px;margin-top:1px}
.poker-card.card-back{
  border-color:#cca53d;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 3px,transparent 3px 6px),
    linear-gradient(160deg,#183c65,#0a2342);
  color:#eecb66;
  font-size:6px;
  letter-spacing:.5px;
}
.poker-card.empty{
  border:1px dashed rgba(205,226,220,.24);
  background:rgba(1,43,33,.3);
  box-shadow:none;
}
.poker-bottom-panel{
  min-height:108px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:8px 12px;
  border:1px solid #31536d;
  border-radius:14px;
  background:#081c2b;
}
.poker-hole-wrap{display:grid;justify-items:center;min-width:150px}
.poker-hole-label{margin-bottom:5px;color:#8faabe;font-size:8px;font-weight:1000;letter-spacing:1.2px}
.poker-hole{display:flex;gap:7px;min-height:70px}
.poker-actions{min-width:0;display:grid;gap:8px}
.poker-primary-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.poker-action{
  min-height:44px;
  border:1px solid #4e728d;
  border-radius:10px;
  background:#15364f;
  color:#fff;
  font-size:11px;
  font-weight:1000;
  cursor:pointer;
}
.poker-action.fold{background:#4a1d25;border-color:#9c4a56}
.poker-action.call{background:#155a3a;border-color:#3fa56f}
.poker-action.allin{background:#4c3510;border-color:#b78a31;color:#ffe19a}
.poker-action.raise{min-width:116px;background:#183d66;border-color:#4e86b9}
.poker-raise-row{display:grid;grid-template-columns:auto minmax(80px,1fr) auto;align-items:center;gap:8px;color:#9bb1c1;font-size:9px;font-weight:1000}
.poker-raise-row input{width:100%;accent-color:#d7a83b}
.poker-wait-next{
  min-height:52px;
  display:grid;
  place-items:center;
  color:#a8c0d0;
  font-size:11px;
  font-weight:900;
  text-align:center;
}
.poker-error{min-height:16px;text-align:center;font-size:10px}

@media(max-width:720px){
  .poker-shell{padding:6px;gap:5px}
  .poker-topbar{grid-template-columns:90px 1fr 90px;min-height:54px}
  .poker-exit-btn{width:86px;padding:7px 5px;font-size:7px}
  .poker-logo{width:94px;max-height:8dvh}
  .poker-brand strong{font-size:9px}.poker-brand span{font-size:6px}
  .poker-blind-info{padding:6px 5px;font-size:7.5px}
  .poker-status-line{padding:4px 7px;font-size:8px}
  .poker-table{width:100%;height:100%;min-height:350px;border-radius:46% / 38%}
  .poker-seat{width:86px;min-height:66px;padding:6px 4px 4px;border-radius:10px}
  .poker-seat-name{font-size:8.5px}.poker-seat-chips{font-size:8px}.poker-seat-action{font-size:6.5px}
  .poker-seat-cards{height:28px;gap:2px}.poker-card.small{width:21px}
  .poker-center{width:62%;gap:5px}
  .poker-pot{font-size:8px;padding:4px 8px}
  .poker-board{gap:3px;min-height:60px}
  .poker-card{width:clamp(38px,10vw,50px);border-radius:6px}
  .poker-card .card-rank{font-size:16px}.poker-card .card-suit{font-size:18px}
  .poker-center-message{font-size:8px;min-height:18px;padding:3px 7px}
  .poker-bottom-panel{min-height:104px;grid-template-columns:112px minmax(0,1fr);gap:7px;padding:6px}
  .poker-hole-wrap{min-width:0}.poker-hole{gap:4px;min-height:60px}
  .poker-primary-actions{gap:4px}
  .poker-action{min-height:39px;border-radius:8px;font-size:8.5px;padding:3px}
  .poker-raise-row{grid-template-columns:auto minmax(45px,1fr) 84px;gap:5px;font-size:7px}
  .poker-action.raise{min-width:0;font-size:7.5px}
}

@media(max-width:480px){
  .poker-shell{grid-template-rows:auto auto minmax(0,1fr) auto auto}
  .poker-table{min-height:390px}
  .poker-seat{width:78px;min-height:62px}
  .poker-seat-name{font-size:8px}.poker-seat-chips{font-size:7px}
  .poker-bottom-panel{grid-template-columns:96px minmax(0,1fr)}
  .poker-card{width:42px}
  .poker-hole .poker-card{width:43px}
  .poker-primary-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(min-width:721px){
  .info-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}


/* ==========================================================================
   v30.7.1 — ONLINE #1 TIPS ROYALE HUD FRAME
   Pure overlay: no width, height, padding or seat coordinates are changed.
   ========================================================================== */
.poker-stage .player .online-champion-frame{
  position:absolute!important;
  inset:-5px!important;
  z-index:16!important;
  pointer-events:none!important;
  border:2px solid #e3b842!important;
  border-radius:calc(11px + 5px)!important;
  box-shadow:
    0 0 0 1px rgba(36,106,167,.88),
    0 0 12px rgba(227,184,66,.55),
    inset 0 0 8px rgba(45,116,181,.20)!important;
  animation:royaleChampionGlow 1.7s ease-in-out infinite alternate!important;
}
.poker-stage .player .online-champion-badge{
  position:absolute!important;
  top:-9px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  min-width:34px!important;
  height:16px!important;
  display:grid!important;
  place-items:center!important;
  padding:0 5px!important;
  border:1px solid #ffe18a!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#173d68,#081b31)!important;
  color:#ffe18a!important;
  box-shadow:0 2px 8px rgba(0,0,0,.42)!important;
  font-size:7px!important;
  font-weight:1000!important;
  letter-spacing:.25px!important;
  white-space:nowrap!important;
}
@keyframes royaleChampionGlow{
  from{opacity:.72;filter:brightness(.94)}
  to{opacity:1;filter:brightness(1.18);box-shadow:0 0 0 1px rgba(36,106,167,.95),0 0 20px rgba(227,184,66,.82),inset 0 0 10px rgba(45,116,181,.30)}
}
/* Active-turn ring remains above the champion frame and keeps its original
   timing/green pulse. */
.poker-stage .player.online-champion > .active-pulse-ring{z-index:20!important}

.game-end-actions-final{
  grid-template-columns:1fr!important;
  justify-items:center!important;
}
.game-end-actions-final .game-end-exit{
  width:min(280px,100%)!important;
}

/* ========================================================================== 
   v30.7.4 — FULL ROYALE HUD FRAME BLUEPRINT
   --------------------------------------------------------------------------
   The full character + ornamental frame is a visual overlay only. The
   authoritative .player width/height/position/transform continue to come from
   layout-v30.5.css, so seat geometry, the protected trick lane and the fixed
   decision/hand reserve are unchanged.
   ========================================================================== */

/* No animated halo/ring around a player HUD. The only turn/wait marker on the
   frame is the small green status dot below. */
.poker-stage .player.active > .active-pulse-ring,
.poker-stage .player.handover::after,
.poker-stage .player.played-landed::before,
.poker-stage .player .online-champion-frame,
.poker-stage .player .online-champion-badge{
  display:none!important;
  animation:none!important;
}

.poker-stage .player.active > .player-card-body,
.player.busted-pulse > .player-card-body{
  animation:none!important;
  filter:none!important;
  box-shadow:none!important;
}

.poker-stage .player{
  animation:none!important;
}

/* Geometry guard: visual-only treatment. Deliberately no width, height,
   position or transform on .player.hud-skin. */
.poker-stage .player.hud-skin{
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Champion identity comes from the dedicated full TIPS Royale artwork only. */
.poker-stage .player.hud-skin-champion{
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Full generated Royale artwork. Bottom-alignment makes the three artwork rows
   live inside the old HUD footprint while the character rises above it. */
.poker-stage .player .hud-full-frame{
  position:absolute!important;
  z-index:12!important;
  left:50%!important;
  bottom:0!important;
  width:94%!important;
  aspect-ratio:1122 / 1402!important;
  transform:translateX(-50%)!important;
  display:block!important;
  overflow:visible!important;
  pointer-events:none!important;
  user-select:none!important;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.34))!important;
}

.poker-stage .player .hud-full-frame img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:contain!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}

/* The HTML data layer uses the SAME coordinate box as the full artwork. This
   keeps names and values aligned at every board size without changing seats. */
.poker-stage .player.hud-skin > .player-card-body{
  position:absolute!important;
  z-index:20!important;
  inset:auto!important;
  left:50%!important;
  bottom:0!important;
  width:94%!important;
  aspect-ratio:1122 / 1402!important;
  transform:translateX(-50%)!important;
  display:block!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  pointer-events:none!important;
}

/* Live player name occupies the clean navy strip directly above Meldte. */
.poker-stage .player.hud-skin .pname{
  position:absolute!important;
  z-index:22!important;
  left:12.5%!important;
  right:12.5%!important;
  top:min(calc(var(--hud-name-top,51.5%) - 1.35%),calc(var(--hud-bid-top,58.15%) - 7.5%))!important;
  transform:translateY(var(--hud-name-nudge,1px))!important;
  width:auto!important;
  height:5.3%!important;
  min-width:0!important;
  padding:0 4.4%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  border:1px solid rgba(238,198,73,.72)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(11,46,76,.92),rgba(5,27,47,.94))!important;
  box-shadow:inset 0 0 0 1px rgba(93,178,255,.18),0 1px 3px rgba(0,0,0,.28)!important;
  color:#fff4ce!important;
  font-size:clamp(6px,.98cqw,10px)!important;
  font-weight:1000!important;
  line-height:1!important;
  letter-spacing:.05px!important;
  white-space:nowrap!important;
  text-shadow:0 1px 2px rgba(0,0,0,.75)!important;
}

.poker-stage .player.hud-skin .pname-text{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  text-align:center!important;
}

.poker-stage .player.hud-skin .pname.name-condensed{
  font-size:clamp(5.2px,.90cqw,8.6px)!important;
}

.poker-stage .player.hud-skin .pname.name-super-condensed{
  font-size:clamp(4.7px,.84cqw,7.9px)!important;
  letter-spacing:-.01em!important;
}

.poker-stage .player.hud-skin .inline-bid-star{
  left:2%!important;
  top:50%!important;
  width:clamp(8px,1.15cqw,11px)!important;
  height:clamp(8px,1.15cqw,11px)!important;
  transform:translateY(-50%)!important;
  border-color:#ffe289!important;
  background:#533b0b!important;
  color:#ffe289!important;
  font-size:clamp(4px,.55cqw,6px)!important;
}

/* The labels Meldte / Pinde / Point are baked into the artwork. Keep only the
   live values and place them in the three blank value fields. */
.poker-stage .player.hud-skin .player-static-stats{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  min-height:0!important;
  pointer-events:none!important;
}

.poker-stage .player.hud-skin .player-static-stats > span{
  position:absolute!important;
  left:10.4%!important;
  right:10.2%!important;
  height:8.2%!important;
  min-width:0!important;
  padding:0 2.2%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.poker-stage .player.hud-skin .player-static-stats .meta-bid{top:var(--hud-bid-top,58.15%)!important}
.poker-stage .player.hud-skin .player-static-stats .meta-pinde{top:var(--hud-pinde-top,68.15%)!important}
.poker-stage .player.hud-skin .player-static-stats .meta-score{top:var(--hud-score-top,78.15%)!important}

.poker-stage .player.hud-skin .player-static-stats small{
  display:none!important;
}

.poker-stage .player.hud-skin .player-static-stats strong{
  flex:0 0 26%!important;
  width:26%!important;
  max-width:26%!important;
  height:100%!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  color:#fff8e6!important;
  font-size:clamp(7px,1.05cqw,11px)!important;
  font-weight:1000!important;
  line-height:1!important;
  text-align:center!important;
  text-shadow:0 1px 2px rgba(0,0,0,.78)!important;
}


.poker-stage .player.hud-skin .meta-bid strong{
  border:1px solid rgba(114,195,255,.55)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(14,62,103,.88),rgba(7,31,54,.92))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.18)!important;
}

.poker-stage .player.hud-skin .meta-pinde strong{
  border:1px solid rgba(255,148,228,.52)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(89,16,84,.88),rgba(52,8,48,.92))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.18)!important;
}

.poker-stage .player.hud-skin .meta-score strong{
  border:1px solid rgba(248,212,132,.50)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(84,54,12,.82),rgba(49,31,7,.90))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.18)!important;
}

.poker-stage .player.hud-skin .meta-pinde.hidden-value strong{
  color:#ffd8f3!important;
}

/* Keep table utilities readable without taking name space. These overlays do
   not affect the artwork or player box dimensions. */
.poker-stage .player.hud-skin .dealer-chip{
  left:-18px!important;
  top:20%!important;
  width:clamp(17px,2.25cqw,22px)!important;
  height:clamp(17px,2.25cqw,22px)!important;
  font-size:clamp(8px,1.05cqw,11px)!important;
}

.poker-stage .player.local.hud-skin .emoji-trigger{
  z-index:72!important;
  top:28%!important;
  right:-22px!important;
  width:clamp(19px,2.45cqw,24px)!important;
  min-width:clamp(19px,2.45cqw,24px)!important;
  height:clamp(19px,2.45cqw,24px)!important;
  padding:0!important;
  border-radius:50%!important;
  font-size:clamp(11px,1.45cqw,14px)!important;
}

/* The ONLY repeating active/wait animation around the Royale HUD. During
   Pinde, waitingIds() intentionally returns every unresolved seat. */
.poker-stage .player .wait-status-dot{
  position:absolute!important;
  z-index:75!important;
  right:-5px!important;
  top:7%!important;
  width:clamp(9px,1.35cqw,12px)!important;
  height:clamp(9px,1.35cqw,12px)!important;
  padding:0!important;
  border:2px solid #d9ffea!important;
  border-radius:50%!important;
  background:#35ee91!important;
  box-shadow:0 0 0 1px rgba(11,74,43,.9),0 0 7px rgba(53,238,145,.72)!important;
  pointer-events:none!important;
  animation:waitStatusPulseV3074 .78s ease-in-out infinite alternate!important;
}

@keyframes waitStatusPulseV3074{
  from{opacity:.48;transform:scale(.82);box-shadow:0 0 0 1px rgba(11,74,43,.75),0 0 3px rgba(53,238,145,.34)}
  to{opacity:1;transform:scale(1.08);box-shadow:0 0 0 1px rgba(11,74,43,1),0 0 10px rgba(53,238,145,.92)}
}

/* 5-player tables have the tightest top/side spacing. Slightly reduce only the
   visual artwork, never the logical HUD box or seat coordinates. */
.poker-stage.count-5 .player .hud-full-frame,
.poker-stage.count-5 .player.hud-skin > .player-card-body{
  width:91%!important;
}

@media(max-width:430px){
  .poker-stage .player .hud-full-frame,
  .poker-stage .player.hud-skin > .player-card-body{
    width:96%!important;
  }

  .poker-stage.count-5 .player .hud-full-frame,
  .poker-stage.count-5 .player.hud-skin > .player-card-body{
    width:93%!important;
  }
}


@media(max-width:1179px){
  .poker-stage .player.hud-skin .pname{
    top:min(calc(var(--hud-name-top,51.5%) - 1.7%),calc(var(--hud-bid-top,58.15%) - 7.8%))!important;
    height:5.0%!important;
    font-size:clamp(5.3px,.94cqw,8.7px)!important;
  }
}

@media(max-width:680px){
  .poker-stage .player.hud-skin .pname{
    top:min(calc(var(--hud-name-top,51.5%) - 2.1%),calc(var(--hud-bid-top,58.15%) - 8.2%))!important;
    height:4.6%!important;
    font-size:clamp(4.8px,.90cqw,7.8px)!important;
    padding:0 3.6%!important;
  }

  .poker-stage .player.hud-skin .pname.name-condensed{
    font-size:clamp(4.4px,.84cqw,7.1px)!important;
  }

  .poker-stage .player.hud-skin .pname.name-super-condensed{
    font-size:clamp(4px,.78cqw,6.5px)!important;
  }

  .poker-stage .player.hud-skin .player-static-stats strong{
    font-size:clamp(5.1px,.86cqw,8.1px)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .poker-stage .player .wait-status-dot{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}


/* ==========================================================================
   v30.7.5 — ROYALE HUD CLEARANCE HOTFIX
   Dealer and local emoji controls are kept outside the ornamental frame.
   ========================================================================== */
.poker-stage .player.hud-skin .dealer-chip{left:-18px!important}
.poker-stage .player.local.hud-skin .emoji-trigger{right:-22px!important;top:28%!important}


/* ==========================================================================
   v30.7.6 — EXTENSIBLE HUD CATALOG
   Art-specific alignment is supplied as CSS variables by hud-catalog.js.
   This keeps future HUD additions out of seat geometry and prevents new art
   from requiring device/layout patches. The 1px name nudge also clears the
   inner frame without moving the HUD itself.
   ========================================================================== */
.poker-stage .player.hud-skin .pname{
  top:var(--hud-name-top,51.5%)!important;
  transform:translateY(var(--hud-name-nudge,1px))!important;
}
.poker-stage .player.hud-skin .player-static-stats .meta-bid{top:var(--hud-bid-top,58.15%)!important}
.poker-stage .player.hud-skin .player-static-stats .meta-pinde{top:var(--hud-pinde-top,68.15%)!important}
.poker-stage .player.hud-skin .player-static-stats .meta-score{top:var(--hud-score-top,78.15%)!important}

/* ==========================================================================
   v30.7.7 — PER-ART HUD TEXT/VALUE CALIBRATION
   Values are now anchored to the actual blank value boxes in each HUD PNG.
   This block changes visual overlay coordinates only; player/seat/table/layout
   geometry remains authoritative in layout-v30.5.css and is not touched here.
   ========================================================================== */
.poker-stage .player.hud-skin .player-static-stats > span{
  left:var(--hud-value-left,60%)!important;
  right:auto!important;
  width:var(--hud-value-width,25%)!important;
  height:var(--hud-value-height,6.5%)!important;
  padding:0!important;
  justify-content:center!important;
}

.poker-stage .player.hud-skin .player-static-stats strong{
  flex:none!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  padding:0 4%!important;
  font-size:clamp(6px,.95cqw,10px)!important;
  line-height:1!important;
  font-variant-numeric:tabular-nums!important;
  letter-spacing:0!important;
}

/* Keep the dynamic player name a fraction lower inside the navy name strip. */
.poker-stage .player.hud-skin .pname{
  transform:translateY(var(--hud-name-nudge,1px))!important;
  font-size:clamp(6px,1cqw,10px)!important;
  line-height:1!important;
}

/* v30.8.15 final-score exit safety: keep the overlay/button tappable above
   every cinematic gameplay layer on desktop, tablet and mobile. */
#gameEndOverlay{
  z-index:12000!important;
  pointer-events:auto!important;
}
#gameEndOverlay .game-end-card,
#gameEndExitBtn{
  pointer-events:auto!important;
}
#gameEndExitBtn{
  position:relative!important;
  z-index:2!important;
  touch-action:manipulation!important;
}