@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--room-bg:url(/bg.jpg);--room-bg-pos:center;--bg:#080810;--gold:#d4a843;--gold2:#f0cc6b;--green:#3da66a;--red:#c44040;--felt:#1b6b42;
--text:#e8e0d0;--muted:#7a7a88;--surface:#16161d;--border:#2a2a36;}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100dvh;width:100%;overflow-x:hidden;}
.scr{display:none;width:100%;min-height:100dvh}.scr.on{display:flex;}

/* AUTH */
#auth{justify-content:center;align-items:center;flex-direction:column;background:radial-gradient(ellipse at center,rgba(10,10,18,.60),rgba(5,5,10,.88)),var(--room-bg);background-size:cover;background-position:var(--room-bg-pos);}
.abox{max-width:380px;width:90%;text-align:center;background:rgba(10,10,18,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:30px 26px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.logo{font-family:'Playfair Display',serif;font-size:34px;font-weight:800;color:var(--gold)}
.tag{color:var(--muted);font-size:11px;letter-spacing:4px;margin:4px 0 20px}
.tabs{display:flex;margin-bottom:16px;border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.tab{flex:1;padding:10px;cursor:pointer;background:var(--surface);color:var(--muted);font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;border:none;transition:background .2s}
.tab.on{background:var(--gold);color:#111}
.fld{width:100%;padding:13px;font-size:15px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:'DM Sans',sans-serif;text-align:center;margin-bottom:10px}
.gbtn{width:100%;margin-top:4px;padding:13px;border-radius:10px;border:none;cursor:pointer;background:linear-gradient(180deg,var(--gold2),var(--gold));color:#111;font-family:'DM Sans',sans-serif;font-weight:700;font-size:15px}
.gbtn:active{opacity:.85}.gbtn:disabled{opacity:.5;cursor:default}
.err{color:var(--red);font-size:13px;min-height:18px;margin-top:6px}
.auth-form{display:none}.auth-form.on{display:block}

/* LOBBY */
#lobby{flex-direction:column;align-items:center;padding:16px;overflow-y:auto}
.lobby-hdr{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:16px}
.lobby-hdr h1{font-family:'Playfair Display',serif;font-size:22px;color:var(--gold)}
.lobby-bal{font-size:13px;color:var(--gold2)}
.room-grid{display:grid;grid-template-columns:1fr;gap:10px;width:100%}
/* logos */
/* The badge carries the wordmark, so the old text logo underneath it was
   saying the name twice. Bigger, and alone. */
.auth-logo{width:min(230px,62vw);height:auto;display:block;margin:0 auto 2px;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.7))}
.lobby-brand{display:flex;align-items:center;gap:10px}
.lobby-logo-img{width:36px;height:auto}
/* lobby two-column + profile panel */
.lobby-wrap{display:flex;gap:18px;width:100%;max-width:1060px;margin:0 auto;align-items:flex-start}
.lobby-main{flex:1;min-width:0}
.profile-panel{width:268px;flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.pp-banner{height:92px;position:relative;background:linear-gradient(135deg,#1f1f30,#101018)}
.pp-avatar{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);width:74px;height:74px;border-radius:50%;border:3px solid var(--surface);background:#1e1e28;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.55)}
.pp-avatar img{width:100%;height:100%;object-fit:cover}
.pp-init{font-size:24px;font-weight:700;color:var(--muted)}
.pp-body{padding:40px 15px 15px;text-align:center}
.pp-name{font-family:'Playfair Display',serif;font-size:19px;font-weight:700;color:var(--gold);margin-bottom:3px}
.pp-bal{font-size:12px;color:var(--gold2);margin-bottom:13px}
.pp-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:13px}
.pp-tile{background:#1e1e28;border:1px solid var(--border);border-radius:9px;padding:9px 4px}
.pp-tv{font-size:17px;font-weight:700;color:var(--text)}
.pp-tl{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.pp-edit{width:100%;padding:9px;font-size:12px}
@media(max-width:760px){.lobby-wrap{flex-direction:column;align-items:stretch}.profile-panel{width:100%}}
.room-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s}
.room-card:hover{border-color:var(--gold)}
.room-card.tourney{border-color:#b05020}
.rc-info h3{font-size:15px;font-weight:600;color:var(--text);margin-bottom:4px}
.rc-info .rc-detail{font-size:12px;color:var(--muted)}
.rc-players{font-size:13px;color:var(--green);margin-bottom:6px;text-align:right}
.rc-join{padding:10px 20px;border-radius:10px;border:none;cursor:pointer;background:var(--gold);color:#111;font-family:'DM Sans',sans-serif;font-weight:700;font-size:14px}
.rc-join.tourney-btn{background:linear-gradient(180deg,#d05030,#b04020)}
.rc-join:disabled{opacity:.4;cursor:default}
.lobby-btns{display:flex;gap:8px;align-items:center}
.lbtn{background:var(--surface);border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:6px 12px;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:12px}

/* BUYIN MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:50;display:flex;justify-content:center;align-items:center;padding:16px}
.modal-box{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:18px;max-width:380px;width:100%}

/* GAME */
#game{position:relative;overflow:hidden;height:100dvh}
.arena{position:relative;width:100vw;height:100dvh;overflow:hidden}
/* When a room sets a theme, this layer shows the room's background image.
   It's a separate layer (not a class on .arena) so we can fade-swap between rooms cleanly. */
.arena-theme{position:absolute;inset:0;z-index:1;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity .35s ease;pointer-events:none}
.arena-theme.on{opacity:1}
/* Default arena look when a room has no custom background image */
.arena{background:radial-gradient(ellipse 90% 70% at 50% 38%,#241a12 0%,#140e08 55%,#0a0705 100%)}
.tbl{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:54vw;max-width:560px;aspect-ratio:2.2/1;z-index:5}
.rail{width:100%;height:100%;border-radius:50%;background:linear-gradient(160deg,#4a2f1c,#2e1c10 60%,#241608);padding:11px;box-shadow:0 14px 44px rgba(0,0,0,.72),inset 0 2px 5px rgba(255,255,255,.14),inset 0 -3px 8px rgba(0,0,0,.5),0 0 0 2px rgba(212,168,67,.16)}
.felt{width:100%;height:100%;border-radius:50%;background:radial-gradient(ellipse 62% 58% at 50% 42%,#2c9463 0%,#1f7a4c 52%,#155a37 82%,#0f452a 100%);box-shadow:inset 0 0 54px rgba(0,0,0,.62),inset 0 0 0 2px rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;position:relative}
.stud{position:absolute;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#e8e0d0,#888);box-shadow:0 1px 3px rgba(0,0,0,.5)}
.pot-d{font-size:13px;font-weight:700;color:var(--gold);letter-spacing:1px;background:rgba(0,0,0,.35);border-radius:10px;padding:2px 14px;z-index:1}
.pot-row{display:flex;align-items:center;gap:14px;z-index:1}
.pot-logo{width:34px;height:auto;flex-shrink:0;filter:drop-shadow(0 0 6px rgba(0,0,0,.55))}
.board{display:flex;gap:5px;z-index:1;min-height:72px;align-items:center}
.tbl-info{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:11px;color:rgba(255,255,255,.45);letter-spacing:1px;white-space:nowrap;z-index:1}
.chipstack{display:flex;align-items:flex-end;justify-content:center;gap:7px;min-height:34px;z-index:1}
.cstack{position:relative;width:30px}
.chip{position:absolute;left:0;width:30px;height:30px;border-radius:50%;
 background:radial-gradient(circle at 50% 42%,var(--cface) 0%,var(--cface) 52%,var(--cedge) 56%,var(--cface) 60%),repeating-conic-gradient(#f4f0e6 0 14deg,var(--cedge) 14deg 45deg);
 box-shadow:0 2px 0 var(--cdark),0 3px 5px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.25)}
.chip::after{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--cface);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35),inset 0 2px 3px rgba(0,0,0,.28)}
.chip-anim{animation:chipDrop .3s cubic-bezier(.2,.8,.3,1.2) backwards}
@keyframes chipDrop{from{transform:translateY(-26px);opacity:0}to{transform:translateY(0);opacity:1}}
.chip{width:26px;height:6px;border-radius:50%;margin-top:-3px;box-shadow:0 1px 1px rgba(0,0,0,.5)}.chip:first-child{margin-top:0}
.brand-over{position:absolute;left:50%;top:46px;transform:translateX(-50%);width:185px;height:auto;z-index:4;pointer-events:none;filter:drop-shadow(0 0 14px rgba(255,60,85,.35))}
.pnl{position:absolute;z-index:6;width:126px;text-align:center;pointer-events:none;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px}
/* BADGE POD — circular avatar, the player's BANNER forms the ring around it.
   Nameplate pill below; cards fan under the badge. */
.badge{position:relative;width:80px;height:80px}
.bring{position:absolute;inset:0;border-radius:50%;background:#20242e center/cover;box-shadow:0 4px 14px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.14)}
.bav{position:absolute;inset:7px;border-radius:50%;overflow:hidden;background:#1a1e28;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.bav img{width:100%;height:100%;object-fit:cover}.bav .av-i{font-size:18px;font-weight:800;color:#8a8a98}
.pnl.turn .bring{box-shadow:0 0 0 3px var(--gold),0 0 22px rgba(212,168,67,.75)}
.pnl.winner .bring{box-shadow:0 0 0 3px #4ade80,0 0 24px rgba(74,222,128,.7);animation:winGlow 1s ease-in-out infinite}
.pnl.folded .badge,.pnl.folded .nplate{opacity:.42;filter:grayscale(.75)}
.btag{position:absolute;top:-4px;right:-8px;z-index:2;display:flex;flex-direction:column;gap:2px}
.btag .ptag{font-size:9px;padding:2px 5px;border-radius:8px}
.nplate{min-width:96px;max-width:130px;background:rgba(8,10,16,.88);backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:4px 9px 5px;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.pnl.turn .nplate{border-color:rgba(212,168,67,.6)}
.pnl.mine{width:158px}
.pnl.mine .badge{width:100px;height:100px}.pnl.mine .bav{inset:10px}
.pnl.mine .nplate{min-width:126px;max-width:170px;padding:5px 11px 6px}
/* Open (empty) seat — click to move there */
.pnl-open{pointer-events:all;cursor:pointer;width:64px;height:64px;margin:0 auto;border-radius:50%;border:2px dashed rgba(255,255,255,.22);background:rgba(8,8,14,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:rgba(255,255,255,.45);font-size:9px;font-weight:600;letter-spacing:.4px;transition:all .2s}
.pnl-open:hover{border-color:var(--gold);color:var(--gold);background:rgba(212,168,67,.12);transform:scale(1.08)}
.pnl-open .plus{font-size:20px;line-height:1;font-weight:400}
.av{width:40px;height:40px;border-radius:50%;background:#1e1e28;border:2px solid var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center}
.av img{width:100%;height:100%;object-fit:cover}.av-i{font-size:14px;font-weight:700;color:var(--muted)}
.pn{font-weight:600;font-size:13px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pn.you{color:var(--gold)}
.pc{font-size:13px;color:var(--green);font-weight:600}
.ptags{display:flex;gap:4px;justify-content:center;margin-top:2px}
.ptag{font-size:11px;font-weight:800;padding:3px 8px;border-radius:5px;color:#fff;letter-spacing:.5px;box-shadow:0 2px 4px rgba(0,0,0,.4)}
.pst{font-size:10px;color:var(--muted)}.pbet{font-size:11px;color:var(--gold);font-weight:600}
.phand{font-size:10px;color:var(--gold2);font-weight:600}.phandstr{font-size:10px;color:#7fd6a3;font-weight:600;margin-top:2px}
.pcards{display:flex;gap:4px;justify-content:center;margin-top:3px}

.pnl.mine .pn{font-size:15px;max-width:160px}.pnl.mine .pc{font-size:15px}.pnl.mine .phandstr{font-size:12px}
/* Display positions — dpos0 is ALWAYS the local player (bottom center);
   others go clockwise. 7 seats total; nobody sits at 12 o'clock — the
   pot and board own the top of the view. */
.pnl.dpos0{left:50%;top:80%}
.pnl.dpos1{left:23%;top:74%}
.pnl.dpos2{left:12%;top:40%}
.pnl.dpos3{left:31%;top:14%}
.pnl.dpos4{left:69%;top:14%}
.pnl.dpos5{left:88%;top:40%}
.pnl.dpos6{left:77%;top:74%}
.cd{border-radius:5px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 2px 6px rgba(0,0,0,.5);font-family:Georgia,serif}
.cd.face{background:#faf7ec;border:1.5px solid #d6cca8}.cd.back{background:repeating-linear-gradient(135deg,#6f1622,#6f1622 4px,#8c2030 4px,#8c2030 8px);border:2px solid #efe6cf}
.cd.empty{background:rgba(255,255,255,.08);border:1.5px dashed rgba(255,255,255,.12)}
.cd .v{font-weight:700;line-height:1}.cd .vb{font-weight:700;line-height:1;align-self:flex-end;transform:rotate(180deg)}.cd .s{text-align:center}
.cd-lg{width:56px;height:80px;padding:4px 6px}.cd-lg .v,.cd-lg .vb{font-size:16px}.cd-lg .s{font-size:24px}
.cd-md{width:44px;height:62px;padding:3px 5px}.cd-md .v,.cd-md .vb{font-size:13px}.cd-md .s{font-size:18px}
.cd-sm{width:32px;height:46px;padding:2px 3px}.cd-sm .v,.cd-sm .vb{font-size:10px}.cd-sm .s{font-size:13px}
@media(min-width:700px){.cd-lg{width:64px;height:90px;padding:5px 7px}.cd-lg .v,.cd-lg .vb{font-size:18px}.cd-lg .s{font-size:28px}}
.topctrl{position:absolute;bottom:12px;right:12px;left:auto;z-index:12;padding:6px 0;display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap;max-width:46vw}
.abtn{padding:12px 18px;border-radius:10px;border:none;cursor:pointer;color:var(--text);font-family:'DM Sans',sans-serif;font-weight:700;font-size:14px;pointer-events:all}
.abtn:active{transform:translateY(1px)}
.af{background:var(--red)}.ac{background:var(--green)}.ar{background:var(--gold);color:#111}.aa{background:#b05020;color:#fff}.ax{background:var(--surface)}
.rpanel{position:absolute;bottom:12px;right:12px;z-index:13;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;width:320px;max-width:90vw}
.rpresets{display:flex;gap:5px;margin:8px 0}
.rpr{flex:1;padding:6px 0;border-radius:6px;cursor:pointer;background:#1e1e28;border:1px solid var(--border);color:var(--muted);font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600}
.corner-btns{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:13;display:flex;gap:8px}
.cbtn{background:linear-gradient(180deg,#4aa6e2,#2374c2);border:1px solid #63b3ea;color:#fff;border-radius:7px;padding:7px 15px;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;pointer-events:all;text-shadow:0 1px 2px rgba(0,18,45,.55);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.cbtn:active{transform:translateY(1px)}
.logbox{padding:8px 12px;max-height:200px;min-height:64px;overflow-y:auto;font-size:12.5px;line-height:1.55;color:#cfc9ba;scrollbar-width:thin}.logbox .lg{color:var(--gold)}
.logbox .chatm{color:var(--text)}.logbox .chatm b{color:var(--gold2)}
/* CHAT PANEL — docked top-left, click header to collapse */
.chatpanel{position:absolute;top:12px;left:12px;z-index:15;width:310px;max-width:32vw;background:rgba(8,10,16,.82);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;pointer-events:all;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.cp-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;font-size:13px;font-weight:700;color:var(--gold);cursor:pointer;user-select:none;background:rgba(255,255,255,.04)}
.cp-caret{transition:transform .2s;font-size:12px;color:var(--muted)}
.chatpanel.min .cp-caret{transform:rotate(-90deg)}
.chatpanel.min .cp-body{display:none}
.cp-body{display:flex;flex-direction:column}
.chat-input{display:flex;gap:5px;padding:8px;border-top:1px solid rgba(255,255,255,.08)}
.chat-fab{display:none;position:absolute;bottom:10px;left:10px;z-index:21;width:44px;height:44px;border-radius:50%;background:rgba(12,14,22,.92);border:1px solid rgba(212,168,67,.5);color:var(--gold);font-size:19px;align-items:center;justify-content:center;pointer-events:all;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.chat-input input{flex:1;padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:'DM Sans',sans-serif;font-size:11px}
.chat-input button{padding:6px 12px;border-radius:8px;border:none;background:var(--gold);color:#111;font-weight:700;font-family:'DM Sans',sans-serif;font-size:11px;cursor:pointer}
/* turn timer bar */
.timer-bar{width:100%;height:4px;border-radius:2px;background:rgba(255,255,255,.1);margin-top:4px;overflow:hidden}
.timer-fill{height:100%;background:var(--gold);border-radius:2px;transition:width .2s linear}
.timer-fill.urgent{background:var(--red)}
@keyframes hbpulse{0%{transform:scale(1)}12%{transform:scale(1.09)}24%{transform:scale(1)}38%{transform:scale(1.055)}52%{transform:scale(1)}100%{transform:scale(1)}}
.badge.hb{animation:hbpulse 1s ease-in-out infinite}
.badge.hb .bring{box-shadow:0 0 0 2px var(--red),0 0 20px 5px rgba(224,90,90,.6)!important}
/* table activity toast */
.tbl-toast{position:absolute;left:50%;top:48%;transform:translate(-50%,0);z-index:7;
font-size:12px;color:#d9cda5;text-align:center;white-space:nowrap;pointer-events:none;
background:rgba(0,0,0,.5);padding:3px 14px;border-radius:8px;
animation:toastFade 3s ease-out forwards}
@keyframes toastFade{0%{opacity:1;transform:translate(-50%,0)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-10px)}}
/* profile card */
.profile-card{text-align:center}
.profile-card .pfc-name{font-size:18px;font-weight:700;color:var(--gold);margin:8px 0 4px}
.profile-card .pfc-bio{font-size:13px;color:var(--muted);margin:8px 0;min-height:20px;font-style:italic}
.profile-card .pfc-stats{display:flex;gap:16px;justify-content:center;font-size:12px;color:var(--text)}
.banner{position:absolute;bottom:76px;left:50%;transform:translateX(-50%);z-index:10;text-align:center;padding:6px 18px;background:linear-gradient(180deg,#2a2418,#1b1810);border:1px solid var(--gold);border-radius:10px;color:var(--gold);font-size:13px;font-weight:600;white-space:nowrap;pointer-events:none;animation:bannerPop .4s ease-out both}
.tbl-msg{position:absolute;left:50%;top:66.5%;transform:translateX(-50%);z-index:5;font-size:11px;color:#c5bfa0;text-align:center;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.9)}
/* ACTION CALLOUT — prominent banner for the most recent player action */
.action-callout{position:absolute;left:50%;top:21%;transform:translateX(-50%) translateY(-8px);z-index:14;display:flex;align-items:center;gap:9px;background:rgba(8,10,16,.92);backdrop-filter:blur(4px);border:1px solid rgba(212,168,67,.5);border-radius:999px;padding:7px 17px 7px 8px;box-shadow:0 8px 24px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;white-space:nowrap;max-width:90vw}
.action-callout.on{opacity:1;transform:translateX(-50%) translateY(0)}
.action-callout .ac-av{width:28px;height:28px;border-radius:50%;overflow:hidden;background:#1e1e28;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#8a8a98;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.action-callout .ac-av img{width:100%;height:100%;object-fit:cover}
.action-callout .ac-name{font-weight:800;color:var(--gold2);font-size:14.5px}
.action-callout .ac-act{font-weight:600;font-size:14.5px;margin-left:3px}
.buyin-float{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:15;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:center}
.psec{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px}
.plbl{font-weight:600;font-size:13px;color:var(--gold);margin-bottom:8px}
.avrow{display:flex;align-items:center;gap:14px}
.avpre{width:70px;height:70px;border-radius:50%;background:#1e1e28;border:3px solid var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}.avpre img{width:100%;height:100%;object-fit:cover}
.avinit{font-size:24px;font-weight:700;color:var(--muted)}
.fbtn{padding:7px 14px;border-radius:7px;border:1px solid var(--border);background:#1e1e28;color:var(--text);cursor:pointer;font-family:'DM Sans',sans-serif;font-size:12px}
.bggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:208px;overflow-y:auto;padding-right:3px}
.bgs{position:relative;aspect-ratio:16/10;border-radius:7px;cursor:pointer;border:3px solid transparent;overflow:hidden}.bgs.sel{border-color:var(--gold)}
.bgs-cap{position:absolute;left:0;right:0;bottom:0;font-size:8px;line-height:1.4;background:rgba(0,0,0,.62);color:#fff;text-align:center;padding:1px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnl-banner{width:100%;height:34px;border-radius:8px;margin-bottom:2px;overflow:hidden;flex-shrink:0;background-repeat:no-repeat;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.14);box-shadow:0 3px 10px rgba(0,0,0,.5)}
.pnl.mine .pnl-banner{height:42px}
.bnrg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:170px;overflow-y:auto}
.bns{aspect-ratio:3/1;border-radius:6px;cursor:pointer;border:3px solid transparent;overflow:hidden;background-color:#0d1019;background-repeat:no-repeat}.bns.sel{border-color:var(--gold)}
@keyframes cardFlip{0%{transform:rotateY(90deg) scale(.7);opacity:0}100%{transform:none;opacity:1}}
@keyframes cardSlide{0%{transform:translateY(-30px) scale(.8);opacity:0}100%{transform:none;opacity:1}}
@keyframes pulse{0%,100%{box-shadow:0 0 14px rgba(212,168,67,.4)}50%{box-shadow:0 0 24px rgba(212,168,67,.8)}}
@keyframes winGlow{0%,100%{box-shadow:0 0 18px rgba(240,204,107,.4)}50%{box-shadow:0 0 32px rgba(240,204,107,.9)}}
@keyframes bannerPop{0%{transform:translateX(-50%) scale(.8);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}
.cd.anim{animation:cardFlip .4s ease-out both}.cd.anim-s{animation:cardSlide .35s ease-out both}
@media(max-width:640px){
.logo{font-size:26px}.abox{width:95%}
.tbl{width:56vw;max-width:320px;top:40%;aspect-ratio:.82/1}.rail{padding:7px}.stud{width:5px;height:5px}
.pot-d{font-size:11px;padding:2px 10px}.tbl-info{font-size:9px}.tbl-msg{font-size:10px;top:64.5%}
.action-callout{top:18%;padding:5px 13px 5px 6px;gap:7px}.action-callout .ac-name,.action-callout .ac-act{font-size:12.5px}.action-callout .ac-av{width:24px;height:24px}
.brand-over{top:8px;width:120px}
.cd-lg{width:42px;height:60px;padding:3px 4px}.cd-lg .v,.cd-lg .vb{font-size:13px}.cd-lg .s{font-size:18px}
.cd-md{width:34px;height:48px;padding:2px 3px}.cd-md .v,.cd-md .vb{font-size:10px}.cd-md .s{font-size:14px}
.cd-sm{width:26px;height:37px;padding:1px 2px}.cd-sm .v,.cd-sm .vb{font-size:8px}.cd-sm .s{font-size:11px}
.board{gap:3px;min-height:56px}
.pnl{width:120px;gap:3px}.badge{width:76px;height:76px}.bav{inset:8px}.bav .av-i{font-size:18px}.nplate{min-width:96px;max-width:120px;padding:3px 8px 4px}.pnl.mine{width:148px}.pnl.mine .badge{width:92px;height:92px}.pnl.mine .bav{inset:10px}.pnl.mine .nplate{min-width:116px;max-width:146px}.pnl-open{width:56px;height:56px;font-size:8px}.pnl-open .plus{font-size:17px}.pnl-banner{height:30px;margin-bottom:2px;border-radius:6px}
.av{width:28px;height:28px}.pn{font-size:10px;max-width:80px}.pc{font-size:10px}
.ptag{font-size:8px;padding:2px 5px}.pcards{gap:2px}
.pnl.mine .pn{font-size:12px}
.pnl.dpos0{left:50%;top:73%}.pnl.dpos1{left:19%;top:62%}.pnl.dpos2{left:15%;top:38%}.pnl.dpos3{left:25%;top:12%}.pnl.dpos4{left:75%;top:12%}.pnl.dpos5{left:85%;top:38%}.pnl.dpos6{left:81%;top:62%}
.topctrl{left:0;right:0;bottom:0;padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:6px;max-width:none;justify-content:stretch;background:linear-gradient(0deg,rgba(6,8,14,.95) 55%,rgba(6,8,14,.5) 85%,transparent)}.chatpanel{display:none;top:auto;bottom:70px;left:8px;right:8px;width:auto;max-width:none;z-index:22}.logbox{max-height:150px}
.arena.chat-open .chatpanel{display:block}
.arena.chat-open .chat-fab{display:none}
.chat-fab{display:flex}
.abtn{padding:14px 12px;font-size:13px;flex:1}.rpanel{top:auto;bottom:70px;left:8px;right:8px;width:auto;transform:none}.chat-fab{bottom:76px;left:8px}
.corner-btns{top:4px}.cbtn{font-size:10px;padding:5px 10px}.pot-logo{width:24px}
}
/* Landscape phones: nudge to portrait — chat + thumb reach are designed for it */
.rotate-note{display:none;position:absolute;inset:0;z-index:99;background:rgba(5,6,10,.94);color:var(--text);flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;font-size:15px;font-weight:600;padding:20px}
.rotate-note .ric{font-size:44px;animation:rockit 1.6s ease-in-out infinite}
@keyframes rockit{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}
@media (max-height:520px) and (orientation:landscape) and (pointer:coarse){.rotate-note{display:flex}


.banner{bottom:68px;font-size:11px;padding:5px 12px}
}

/* shoutouts on auth screen */
.shoutbox{margin-top:16px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:rgba(0,0,0,.28);text-align:left}
.sho-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:6px 0;align-items:center}
.sho-row + .sho-row{border-top:1px dashed var(--border)}
.sho-lbl{color:var(--muted);flex-shrink:0}
.sho-val{color:var(--text);font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* admin modal */
.adm-row{display:flex;flex-direction:column;gap:6px;padding:10px;background:#0d1019;border:1px solid var(--border);border-radius:8px}
.adm-top{display:flex;align-items:center;gap:8px}
/* A row marked for deletion should be obvious at a glance while you scroll
   past forty of them, not just a ticked box you have to hunt for. */
.adm-row.picked{border-color:#b91c1c;background:#150d10}
.adm-pick{width:18px;height:18px;flex:none;accent-color:#ef4444;cursor:pointer}
.adm-av{width:32px;height:32px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;overflow:hidden;flex-shrink:0}
.adm-av img{width:100%;height:100%;object-fit:cover}
.adm-info{flex:1;min-width:0}
.adm-name{font-weight:600;font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-email{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-bal{font-size:11px;color:var(--muted);display:flex;gap:8px;flex-shrink:0}
.adm-bal b{color:var(--gold)}
.adm-grant{display:flex;gap:4px;align-items:center}
.adm-grant input{flex:1;padding:5px 8px;background:#1a1f2e;color:var(--text);border:1px solid var(--border);border-radius:6px;font-size:12px;font-family:inherit;min-width:0}
.adm-grant button{padding:5px 10px;font-size:11px;font-weight:600;border-radius:6px;border:none;cursor:pointer;background:var(--gold);color:#111;font-family:inherit}
.adm-grant button.chips-btn{background:#16a34a;color:#fff}
/* photo strip in Edit Look */
.photo-strip{display:flex;gap:6px;flex-wrap:wrap}
.photo-thumb{position:relative;width:54px;height:54px;border-radius:8px;overflow:hidden;background:var(--surface);border:1px solid var(--border)}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-x{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;font-size:13px;line-height:18px;text-align:center;cursor:pointer;border:none;font-family:inherit;padding:0}
.photo-add{width:54px;height:54px;border-radius:8px;background:var(--surface);border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--muted);cursor:pointer}
/* photo gallery in viewProfile */
.pv-gallery{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;justify-content:center}
.pv-gallery img{width:60px;height:60px;border-radius:8px;object-fit:cover;cursor:pointer;border:1px solid var(--border)}

/* lobby glowing back-wall */
#lobby{position:relative}
.lobby-wall{position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(rgba(8,8,14,.82),rgba(8,8,14,.88)),var(--room-bg);background-size:cover;background-position:var(--room-bg-pos);background-repeat:no-repeat;}
.lobby-footer{position:relative;z-index:1;text-align:center;padding:48px 0 28px;opacity:.92}
.lobby-footer img{width:92px;filter:drop-shadow(0 0 30px rgba(212,36,74,.7))}
.lobby-footer .ww{font-family:'Playfair Display',serif;font-weight:800;font-size:36px;letter-spacing:3px;color:var(--gold);text-shadow:0 0 28px rgba(212,168,67,.6);margin-top:4px}
.lobby-wrap{position:relative;z-index:1}
/* profile wall */
#profview .modal-box{max-width:440px;max-height:88vh;overflow-y:auto}
.pv-wall-sec{margin-top:14px;border-top:1px solid var(--border);padding-top:12px;text-align:left}
.pv-wall-title{font-weight:700;font-size:14px;color:var(--gold);margin-bottom:8px}
.pv-composer{background:#0d1019;border:1px solid var(--border);border-radius:10px;padding:8px;margin-bottom:12px}
.pv-composer textarea{width:100%;min-height:50px;resize:vertical;background:transparent;border:none;color:var(--text);font-family:inherit;font-size:13px;outline:none;box-sizing:border-box}
.pv-composer-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.pv-photo-btn{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:4px 10px;cursor:pointer;font-size:14px;color:var(--text)}
.pv-img-name{flex:1;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-post-btn{background:var(--gold);color:#111;border:none;border-radius:8px;padding:6px 16px;font-weight:700;cursor:pointer;font-family:inherit;font-size:13px}
.pv-post-btn:disabled{opacity:.5;cursor:default}
.pv-posts{display:flex;flex-direction:column;gap:10px}
.pv-post{background:#0d1019;border:1px solid var(--border);border-radius:10px;padding:10px;text-align:left}
.pv-post-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;position:relative}
.pv-post-del{position:absolute;right:-2px;top:-2px;background:transparent;border:none;color:var(--muted);font-size:18px;line-height:1;padding:2px 6px;cursor:pointer;border-radius:6px;font-weight:700;opacity:.55;transition:opacity .15s,background .15s}
.pv-post-del:hover{opacity:1;background:rgba(196,64,64,.18);color:#f87171}
.pv-post-av{width:28px;height:28px;border-radius:50%;background:var(--surface);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;color:var(--text)}
.pv-post-av img{width:100%;height:100%;object-fit:cover}
.pv-post-author{font-weight:600;font-size:13px;color:var(--text)}
.pv-post-time{font-size:11px;color:var(--muted);margin-left:auto}
.pv-post-text{font-size:13px;color:var(--text);white-space:pre-wrap;word-break:break-word}
.pv-post-img{max-width:100%;border-radius:8px;margin-top:6px;display:block;cursor:pointer}
.pv-empty{font-size:12px;color:var(--muted);text-align:center;padding:10px}

.bgg-prev{height:66px;border-radius:10px;border:1px solid var(--border);margin-bottom:10px;background-size:cover;background-position:center}
.shop-h{font-weight:700;font-size:12px;color:var(--gold);margin:12px 0 8px;letter-spacing:.4px}
.pv-cover{height:120px;border-radius:14px 14px 0 0;margin:-18px -18px 14px;background-size:cover;background-position:center;border-bottom:1px solid var(--border);background-color:#12141d;position:relative}
.pv-avatar{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);width:82px;height:82px;border-radius:50%;border:3px solid var(--bg);background:#1e1e28;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 16px rgba(0,0,0,.6);z-index:2}
.pv-avatar img{width:100%;height:100%;object-fit:cover}
.pv-avatar .av-i{font-size:28px;font-weight:800;color:#8a8a98}
#profview .profile-card{padding-top:32px}
/* ---- MAINTENANCE BANNER (admin-toggled, shown to all users) ---- */
.maint-banner{position:fixed;top:0;left:0;right:0;z-index:9999;background:linear-gradient(90deg,#7c2d12,#b45309,#7c2d12);color:#fff;text-align:center;padding:9px 36px;font-size:13px;font-weight:600;box-shadow:0 2px 10px rgba(0,0,0,.4);letter-spacing:.2px;display:none}
.maint-banner.on{display:block}
.maint-banner-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.25);color:#fff;border:none;border-radius:6px;width:24px;height:24px;font-size:14px;cursor:pointer;line-height:1}


/* ============================================================
   SIDE-VIEW TABLE  (v2)

   Opt in with ?table=new  ·  back out with ?table=old
   The old top-down table stays in the DOM and keeps rendering; we just hide
   it and paint this over the top. That way the flag is a pure CSS switch and
   nothing can half-apply.
   ============================================================ */
#game.v2 .tbl,
#game.v2 .rotate-note,
#game.v2 .brand-over,
#game.v2 .arena-theme,
#game.v2 .tbl-msg,
#game.v2 .pnl { display:none !important; }
#game.v2 .v2 { display:block; }

.v2{display:none;position:absolute;inset:0;overflow:hidden;z-index:2}
.v2 .v2bg{position:absolute;left:0;width:100%;height:auto;display:block}
.v2 .v2tbl{position:absolute;left:0;width:100%;height:auto;display:block;z-index:50;pointer-events:none}
.v2seats{position:absolute;inset:0;z-index:20}
/* Above the bottom scrim (z-index 65). On a short window the board sits low
   enough that the scrim was washing over the community cards. */
.v2felt{position:absolute;inset:0;z-index:66;pointer-events:none}
.v2felt .mid{position:absolute;left:50%;transform:translateX(-50%);text-align:center}

.v2seat{position:absolute;transform-origin:bottom center;transition:filter .25s}
.v2seat .fig{position:relative;display:block}
.v2seat .fig img,.v2seat .fig svg{display:block;width:100%;height:auto;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.75))}
.v2seat.folded .fig{opacity:.38;filter:grayscale(.85)}
.v2seat.away  .fig{opacity:.45}
.v2seat.acting .v2plate{border-color:var(--gold);box-shadow:0 0 0 2px rgba(224,182,74,.35),0 6px 18px #000a}

.v2plate{position:absolute;left:50%;transform:translateX(-50%);bottom:-5%;z-index:5;
  min-width:92%;max-width:120%;background:#12121cE6;border:1px solid var(--border);
  border-radius:9px;overflow:hidden;box-shadow:0 6px 18px #0009;text-align:center}
.v2plate .ban{height:13px;background-size:cover;background-position:center}
.v2plate .nm{font-size:11.5px;font-weight:700;padding:3px 6px 0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.v2plate .ch{font-size:10.5px;font-weight:600;color:var(--gold2);padding:0 6px 4px}
.v2plate .ch small{color:var(--muted);font-weight:500}
.v2plate .st{font-size:9.5px;font-weight:700;letter-spacing:.4px;padding:0 6px 4px;color:var(--muted)}
.v2plate .st.allin{color:var(--red)}
.v2bet{position:absolute;top:-11px;right:-8px;background:var(--gold);color:#1a1508;
  font-size:10px;font-weight:800;border-radius:99px;padding:2px 7px;box-shadow:0 2px 6px #000a;z-index:6}
.v2seat .cards{position:absolute;left:50%;transform:translateX(-50%);bottom:19%;display:flex;gap:2px;z-index:3}
.v2seat .cards .cd2{width:21px;height:29px;border-radius:3px;background:#f6f4ee;
  border:1px solid #0004;box-shadow:0 3px 7px #000a;display:grid;place-items:center;
  font-weight:800;font-size:11px;line-height:1}
.v2seat .cards .cd2.back{background:linear-gradient(140deg,#7d2020,#4a1010)}
.v2seat .cards .cd2:first-child{transform:rotate(-7deg)}
.v2seat .cards .cd2:last-child{transform:rotate(7deg)}
.v2seat .dlr{position:absolute;right:-6%;bottom:9%;width:19px;height:19px;border-radius:50%;
  background:#eee;color:#111;font-size:10px;font-weight:800;display:grid;place-items:center;
  box-shadow:0 2px 6px #000a;z-index:6}
.v2open{position:absolute;transform-origin:bottom center;display:grid;place-items:center;
  border:1.5px dashed rgba(255,255,255,.2);border-radius:12px;background:rgba(255,255,255,.04);
  color:#8b8a9c;font-size:10px;font-weight:700;letter-spacing:.5px;cursor:pointer}
.v2open:active{border-color:var(--gold);color:var(--gold2)}

.v2pot{display:inline-block;background:#0b0b12cc;border:1px solid var(--border);border-radius:99px;
  padding:3px 12px;font-size:12px;font-weight:800;color:var(--gold2);box-shadow:0 4px 14px #0008}
.v2board{display:flex;gap:5px;justify-content:center;margin-top:5px}
.v2board .cd2{width:var(--v2cd-w,34px);height:var(--v2cd-h,48px);
  font-size:var(--v2cd-f,19px);border-radius:6px;background:#f7f5ef;box-shadow:0 5px 14px #0009;
  display:grid;place-items:center;font-weight:800;line-height:1;border:1px solid #0003}
.v2board .cd2.slot{background:#ffffff10;border:1px dashed #ffffff28;box-shadow:none}
.v2board .cd2 .s{font-size:.68em;margin-top:1px}

/* you, bottom-left, over the near skirt */
.v2me{position:absolute;left:8px;bottom:4px;width:var(--v2me-w,74px);z-index:70;pointer-events:none}
.v2me img,.v2me svg{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 12px #000b)}

/* the flag banner, so you always know which table you are looking at */
.v2flag{position:absolute;right:8px;top:8px;z-index:95;font-size:10px;font-weight:700;
  letter-spacing:.5px;padding:4px 9px;border-radius:99px;background:#0b0b12cc;
  border:1px solid var(--gold);color:var(--gold2);text-decoration:none}

/* portrait can't fit five nameplates side by side, so ask for landscape here */
.v2rot{position:absolute;inset:0;z-index:150;display:none;place-items:center;text-align:center;
  background:#05050aee;padding:26px}
#game.v2 .v2rot.on{display:grid}
.v2rot b{color:var(--gold2);display:block;font-size:17px;margin-bottom:6px}
.v2rot span{color:var(--muted);font-size:13px}
.v2rot .ric2{font-size:42px;display:block;margin-bottom:12px;animation:rockit 1.6s ease-in-out infinite}

/* ---- v2 chrome ----
   The old table put chat top-left and the action bar bottom-right, which works
   over an empty oval. Over a photographic room the same positions cover the
   players, so v2 re-homes them: chat centre-bottom, actions bottom-right,
   both floating on a scrim over the near skirt. */
/* Chat lives in the gap between your cards (left) and the action buttons
   (right). Narrower than the space so Fold can never land on top of it. */
#game.v2 .chatpanel{
  display:block !important; top:auto; bottom:6px; left:50%; right:auto;
  transform:translateX(-50%); width:min(300px,30vw); max-width:none; z-index:92;
  background:rgba(8,10,16,.72); border-color:rgba(255,255,255,.10);
}
#game.v2 .chatpanel .cp-head{display:none}
#game.v2 .logbox{max-height:86px}
#game.v2 .chat-fab{display:none}

#game.v2 .topctrl{
  bottom:8px; right:10px; left:auto; z-index:95; max-width:32vw;
  background:none; padding:0; justify-content:flex-end;
}
#game.v2 .rpanel{bottom:8px; right:10px; left:auto; z-index:94; width:300px}
#game.v2 .corner-btns{top:6px; z-index:96}
#game.v2 .action-callout{top:auto; bottom:120px; z-index:91}
#game.v2 #tbl-toasts{z-index:91}

/* a scrim so the controls always read against a busy photograph */
#game.v2 .v2::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:120px;z-index:65;
  background:linear-gradient(180deg,transparent,rgba(6,8,14,.82));pointer-events:none;
}
#game.v2 .v2me{z-index:70}

/* Your own hole cards, bottom-left, beside your figure. Everything in this
   column is driven off --v2col-x / --v2my-h so the stack and any staked items
   ride up when the cards grow instead of landing on top of them. */
#game.v2 .v2mycards{position:absolute;left:var(--v2col-x,96px);bottom:10px;z-index:93;display:flex;gap:6px}
#game.v2 .v2mycards .cd2{width:var(--v2my-w,42px);height:var(--v2my-h,58px);
  font-size:var(--v2my-f,24px);border-radius:7px;background:#f7f5ef;
  box-shadow:0 6px 18px #000b;display:grid;place-items:center;font-weight:800;
  line-height:1;border:1px solid #0003}
#game.v2 .v2mycards .cd2 .s{font-size:.66em;margin-top:1px}
#game.v2 .v2mystack{position:absolute;left:var(--v2col-x,96px);bottom:var(--v2stack-y,72px);
  z-index:93;font-size:12px;font-weight:700;color:var(--gold2);text-shadow:0 1px 3px #000}

@media (max-width:820px){
  #game.v2 .chatpanel{width:min(230px,28vw)}
}
/* A phone held sideways has almost no felt between the rail and the chat box.
   Give the board that space back rather than shrinking the cards. */
@media (max-height:540px){
  #game.v2 .logbox{max-height:42px}
  #game.v2 .chatpanel{width:min(240px,26vw)}
}

/* ---- the action callout, pinned to whoever acted ---- */
#game.v2 .action-callout.anchored{
  top:0; bottom:auto; transform:translate(-50%,-50%) translateY(-7px);
}
#game.v2 .action-callout.anchored.on{transform:translate(-50%,-50%)}

/* ---- items put up as bets, drawn on the player who put them up ---- */
.v2stk-seat{position:absolute;right:-16%;top:0;z-index:7;display:flex;flex-direction:column;gap:4px}
#game.v2 .v2mystk{position:absolute;left:var(--v2col-x,96px);bottom:var(--v2stk-y,96px);
  z-index:93;display:flex;flex-direction:row;gap:5px}
.v2stk-one{display:flex;flex-direction:column;align-items:center;gap:2px}
.v2stk-art{width:38px;height:38px;border-radius:9px;overflow:hidden;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#252a36,#14161d);
  border:1px solid rgba(255,215,106,.75);box-shadow:0 4px 12px #000a}
.v2stk-img{width:100%;height:100%;object-fit:cover}
.v2stk-img-fb{font-size:21px;line-height:1}
.v2stk-v{font-size:9.5px;font-weight:800;color:#ffd76a;line-height:1;
  background:rgba(8,10,16,.88);border:1px solid rgba(255,215,106,.35);
  border-radius:99px;padding:2px 6px;white-space:nowrap}
@media (max-height:540px){ .v2stk-art{width:30px;height:30px} .v2stk-img-fb{font-size:17px} }

/* The old top strip is now only a net for stakes we could not place on a
   seat. It used to sit under the corner buttons, which is why an item put up
   mid-hand looked like it had vanished. */
#game.v2 .stakestrip{top:46px;z-index:88}

/* When it's your turn the buttons grow; give chat the rest and never overlap. */
#game.v2 .rpanel{z-index:96}
#game.v2 .chatpanel .logbox{padding-bottom:2px}

/* ---- admin: photos waiting ---- */
#cutq{display:grid;gap:8px;margin-top:8px}
.cutq-row{display:flex;gap:10px;align-items:center;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;padding:8px}
.cutq-row img{width:52px;height:65px;object-fit:contain;border-radius:6px;flex:none;
  background:repeating-conic-gradient(#20202c 0 25%,#2a2a38 0 50%) 0 0/12px 12px}
.cutq-row .who{flex:1;min-width:0}
.cutq-row .who b{display:block;font-size:13px}
.cutq-row .who span{font-size:11px;color:var(--muted)}
.cutq-row .acts{display:flex;gap:6px;flex:none}
.cutq-row button{padding:8px 11px;border-radius:9px;border:1px solid var(--border);
  font:700 12px inherit;cursor:pointer;background:#1b1b28;color:var(--text)}
.cutq-row button.ok{background:var(--green,#3ea76a);border-color:var(--green,#3ea76a);color:#06210f}
.cutq-row button.no{border-color:#5a2a2a;color:#e79b9b}
.adm-badge{position:absolute;top:-6px;right:-6px;background:#d9534f;color:#fff;font-size:10px;
  font-weight:800;min-width:18px;height:18px;border-radius:99px;display:grid;place-items:center;
  padding:0 5px;box-shadow:0 2px 6px #0008}
#admin-btn{position:relative}

/* ---- "Are you still there?" idle prompt ---- */
.st-wrap{position:fixed;inset:0;background:rgba(4,6,10,.82);backdrop-filter:blur(3px);
  z-index:400;display:flex;align-items:center;justify-content:center;padding:20px}
.st-box{background:linear-gradient(180deg,#1b2030,#12151f);border:1px solid #3a4258;
  border-radius:16px;padding:26px 24px;max-width:380px;width:100%;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.6)}
.st-title{font-size:22px;font-weight:800;color:#ffd76a;margin-bottom:10px}
.st-detail{font-size:14px;line-height:1.45;color:#c8cede;margin-bottom:18px}
.st-btn{display:block;width:100%;padding:14px 0;border:0;border-radius:12px;cursor:pointer;
  font-size:17px;font-weight:800;color:#1a1205;background:linear-gradient(180deg,#ffd76a,#e5ad2a)}
.st-btn:active{transform:translateY(1px)}
.st-count-wrap{margin-top:12px;font-size:13px;color:#8e97ab}
#st-count{color:#ff8a6a;font-weight:800}
.st-foot{margin-top:14px;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:#6d7488}

/* ============ HOME / SOCIAL LAYER ============ */
.home-wrap{max-width:860px;margin:0 auto;padding:0 0 60px;min-height:100%}
.home-cover{position:relative;height:210px;border-radius:0 0 18px 18px;overflow:hidden;
  background:linear-gradient(135deg,#232a3a,#12151d);background-size:cover;background-position:center}
.h-cover-btn{position:absolute;top:10px;right:10px;z-index:2;border:1px solid rgba(255,255,255,.25);
  background:rgba(10,12,18,.6);color:#e8ecf5;border-radius:9px;padding:6px 10px;font:inherit;
  font-size:12px;cursor:pointer;backdrop-filter:blur(4px)}
.home-av{position:absolute;left:24px;bottom:-34px;width:104px;height:104px;border-radius:50%;
  overflow:hidden;border:3px solid #12151d;background:#1c2130;display:grid;place-items:center;z-index:2}
.home-av img{width:100%;height:100%;object-fit:cover}
.home-id{padding:44px 24px 0}
.home-nm{display:flex;align-items:center;gap:8px;font-size:26px;font-weight:800;color:#f2f5fb}
.h-dot{width:9px;height:9px;border-radius:50%;background:#4a5162;flex:none;display:inline-block}
.h-dot.on{background:#3ecf7a;box-shadow:0 0 8px #3ecf7a99}
.home-bio{margin-top:5px;font-size:14px;color:#aab2c4;line-height:1.5;max-width:60ch}
.home-since{margin-top:4px;font-size:11.5px;color:#6d7488}
.home-nums{display:flex;gap:26px;padding:16px 24px 0;flex-wrap:wrap}
.home-nums div{display:flex;flex-direction:column}
.home-nums b{font-size:19px;color:#ffd76a;font-weight:800}
.home-nums span{font-size:11px;color:#79819a;text-transform:uppercase;letter-spacing:.5px}
.home-tools{display:flex;gap:8px;flex-wrap:wrap;padding:16px 24px 0}
.home-back{padding:12px 24px 0}
.h-btn{position:relative;border:1px solid #333c50;background:#1b2130;color:#dfe5f0;border-radius:10px;
  padding:9px 14px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.h-btn:hover{border-color:#4a5670;background:#222941}
.h-btn.gold{background:linear-gradient(180deg,#ffd76a,#e5ad2a);color:#1a1205;border-color:#c9971f}
.h-btn.ghost{background:transparent;color:#98a1b5}
.h-btn.sm{padding:6px 10px;font-size:12px}
.h-btn:disabled{opacity:.55;cursor:default}
.h-badge{position:absolute;top:-6px;right:-6px;background:#d9534f;color:#fff;font-size:10px;
  font-weight:800;min-width:17px;height:17px;border-radius:99px;display:grid;place-items:center;padding:0 4px}
.home-sec{padding:22px 24px 0}
.h-sec-t{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#8b93a8;
  margin-bottom:10px;display:flex;align-items:center;gap:8px}
.h-sub{font-weight:600;letter-spacing:0;text-transform:none;color:#5f677c;font-size:11.5px}
.h-priv{background:#2a3144;color:#98a1b5;border-radius:5px;padding:2px 6px;font-size:10px;letter-spacing:.3px}
.h-empty{color:#6d7488;font-size:13px;padding:6px 0;line-height:1.5}
.h-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px}
.h-tile{background:#161b27;border:1px solid #262e40;border-radius:11px;padding:11px 12px}
.h-tv{font-size:18px;font-weight:800;color:#e8ecf5}
.h-tv.h-up{color:#3ecf7a} .h-tv.h-down{color:#e2725b}
.h-up{color:#3ecf7a} .h-down{color:#e2725b}
.h-tl{font-size:10.5px;color:#79819a;text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
.h-week{margin-top:9px;font-size:12.5px;color:#8b93a8}
.h-toggle{display:flex;align-items:center;gap:9px;margin:12px 24px 0;font-size:12.5px;color:#98a1b5;cursor:pointer}
.h-toggle input{width:16px;height:16px;accent-color:#ffd76a;flex:none}
.h-case{display:flex;flex-wrap:wrap;gap:9px}
.h-tr{width:96px;background:#161b27;border:1px solid #2c3448;border-radius:11px;padding:10px 6px;text-align:center}
.h-tricon{font-size:28px;line-height:1.1;display:block}
.h-trimg{width:52px;height:52px;object-fit:cover;border-radius:8px}
.h-trn{font-size:10.5px;color:#c3cad9;margin-top:5px;line-height:1.25}
.h-trv{font-size:10px;color:#ffd76a;margin-top:2px}
.h-gal{display:flex;gap:8px;flex-wrap:wrap}
.h-gal img{width:96px;height:96px;object-fit:cover;border-radius:9px;cursor:pointer;border:1px solid #2c3448}
.h-friends{display:flex;gap:12px;flex-wrap:wrap}
.h-fr{width:64px;text-align:center;cursor:pointer}
.h-fr-av{position:relative;width:52px;height:52px;margin:0 auto;border-radius:50%;overflow:hidden;
  background:#1c2130;display:grid;place-items:center;border:1px solid #2c3448}
.h-fr-av img{width:100%;height:100%;object-fit:cover}
.h-fr-av .h-dot{position:absolute;right:1px;bottom:1px;border:2px solid #12151d;width:12px;height:12px}
.h-fr-n{font-size:10.5px;color:#aab2c4;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-composer{background:#141924;border:1px solid #262e40;border-radius:12px;padding:10px;margin-bottom:12px}
.h-composer textarea{width:100%;min-height:56px;background:transparent;border:0;color:#e8ecf5;
  font:inherit;font-size:13.5px;resize:vertical;outline:none;box-sizing:border-box}
.h-composer-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.h-img-name{flex:1;font-size:11px;color:#79819a}
.h-post{background:#141924;border:1px solid #232b3c;border-radius:12px;padding:11px 12px;margin-bottom:9px}
.h-post-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.h-post-av{width:28px;height:28px;border-radius:50%;overflow:hidden;background:#232b3c;
  display:grid;place-items:center;font-size:11px;color:#aab2c4;cursor:pointer;flex:none}
.h-post-av img{width:100%;height:100%;object-fit:cover}
.h-post-a{font-size:12.5px;font-weight:700;color:#dfe5f0}
.h-post-t{font-size:11px;color:#6d7488;flex:1}
.h-post-x{background:none;border:0;color:#5f677c;font-size:17px;cursor:pointer;line-height:1}
.h-post-tx{font-size:13.5px;color:#c8cede;line-height:1.5;white-space:pre-wrap}
.h-post-img{max-width:100%;border-radius:9px;margin-top:8px;cursor:pointer}

/* ---- overlays: messages, friends, challenges ---- */
.ov{position:fixed;inset:0;background:rgba(4,6,10,.78);backdrop-filter:blur(3px);z-index:120;
  display:flex;align-items:center;justify-content:center;padding:16px}
.ov-box{background:#12161f;border:1px solid #2a3244;border-radius:16px;width:100%;max-width:440px;
  max-height:86vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px #0009}
.ov-head{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid #222a3a;
  font-size:15px;font-weight:800;color:#f2f5fb;flex:none}
.ov-x{margin-left:auto;background:none;border:0;color:#79819a;font-size:22px;cursor:pointer;line-height:1}
.ov-body{overflow-y:auto;padding:12px 16px 16px}
.fr-search{display:flex;gap:8px;padding:12px 16px 0}
.fr-search input{flex:1;background:#0d1019;border:1px solid #2a3244;border-radius:9px;padding:9px 11px;
  color:#e8ecf5;font:inherit;font-size:13px;outline:none}
.fr-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #1c2331}
.fr-av{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#1c2130;
  display:grid;place-items:center;cursor:pointer;flex:none;border:1px solid #2c3448}
.fr-av img{width:100%;height:100%;object-fit:cover}
.fr-av .h-dot{position:absolute;right:0;bottom:0;border:2px solid #12161f;width:12px;height:12px}
.fr-n{flex:1;font-size:13.5px;font-weight:600;color:#dfe5f0;display:flex;flex-direction:column}
.fr-s{font-size:10.5px;color:#6d7488;font-weight:500}
.fr-b{display:flex;gap:6px}

/* ---- messages ---- */
.dm-box{max-width:480px;height:min(640px,86vh)}
.dm-pane{display:flex;flex-direction:column;flex:1;min-height:0}
.dm-list-body{overflow-y:auto;padding:6px 10px 12px}
.dm-row{display:flex;align-items:center;gap:10px;padding:10px 6px;border-bottom:1px solid #1c2331;cursor:pointer;border-radius:9px}
.dm-row:hover{background:#171d2a}
.dm-row.unread .dm-row-n{color:#ffd76a}
.dm-row-av{position:relative;width:42px;height:42px;border-radius:50%;overflow:hidden;background:#1c2130;
  display:grid;place-items:center;flex:none;border:1px solid #2c3448}
.dm-row-av img{width:100%;height:100%;object-fit:cover}
.dm-row-av .h-dot{position:absolute;right:0;bottom:0;border:2px solid #12161f;width:12px;height:12px}
.dm-row-mid{flex:1;min-width:0}
.dm-row-n{font-size:13.5px;font-weight:700;color:#dfe5f0}
.dm-row-p{font-size:12px;color:#79819a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-row-r{text-align:right;flex:none}
.dm-row-t{font-size:10.5px;color:#5f677c}
.dm-badge{background:#d9534f;color:#fff;font-size:10px;font-weight:800;border-radius:99px;
  min-width:18px;padding:1px 5px;display:inline-block;margin-top:3px}
.dm-head{gap:9px}
.dm-back{background:none;border:0;color:#98a1b5;font-size:19px;cursor:pointer;line-height:1;padding:0 2px}
.dm-who-av{width:30px;height:30px;border-radius:50%;overflow:hidden;background:#1c2130;
  display:grid;place-items:center;flex:none;font-size:11px;color:#aab2c4}
.dm-who-av img{width:100%;height:100%;object-fit:cover}
.dm-msgs{flex:1;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:7px}
.dm-m{max-width:78%;align-self:flex-start}
.dm-m.mine{align-self:flex-end;text-align:right}
.dm-b{background:#1e2536;color:#dfe5f0;padding:9px 12px;border-radius:14px 14px 14px 4px;
  font-size:13.5px;line-height:1.45;word-wrap:break-word;text-align:left}
.dm-m.mine .dm-b{background:#2f3a52;border-radius:14px 14px 4px 14px}
.dm-ts{font-size:10px;color:#5f677c;margin-top:2px;padding:0 4px}
.dm-input{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #222a3a;flex:none}
.dm-input input{flex:1;background:#0d1019;border:1px solid #2a3244;border-radius:10px;padding:10px 12px;
  color:#e8ecf5;font:inherit;font-size:13.5px;outline:none}
.dm-input button{background:linear-gradient(180deg,#ffd76a,#e5ad2a);color:#1a1205;border:0;
  border-radius:10px;padding:0 16px;font:inherit;font-weight:800;font-size:13px;cursor:pointer}

/* ---- weekly challenges ---- */
.ch-prize{display:flex;gap:12px;align-items:center;background:#171d2a;border:1px solid #34405a;
  border-radius:12px;padding:12px;margin-bottom:12px}
.ch-przicon{font-size:40px;line-height:1}
.ch-przimg{width:64px;height:64px;object-fit:cover;border-radius:9px}
.ch-prz-n{font-size:15px;font-weight:800;color:#ffd76a}
.ch-prz-d{font-size:12px;color:#98a1b5;line-height:1.4;margin-top:2px}
.ch-prz-v{font-size:11px;color:#6d7488;margin-top:4px}
.ch-pool{font-size:12.5px;color:#98a1b5;margin-bottom:12px}
.ch-pool b{color:#ffd76a}
.ch-row{background:#141924;border:1px solid #232b3c;border-radius:11px;padding:11px 12px;margin-bottom:8px}
.ch-row.done{border-color:#2f6b46;background:#141f1a}
.ch-top{display:flex;align-items:baseline;gap:8px}
.ch-l{font-size:13.5px;font-weight:800;color:#e8ecf5;flex:1}
.ch-r{font-size:11.5px;color:#8b93a8;font-weight:700}
.ch-row.done .ch-r{color:#3ecf7a}
.ch-d{font-size:12px;color:#79819a;margin-top:2px}
.ch-bar{height:6px;background:#1e2536;border-radius:99px;overflow:hidden;margin-top:8px}
.ch-bar i{display:block;height:100%;background:linear-gradient(90deg,#e5ad2a,#ffd76a);border-radius:99px}
.ch-row.done .ch-bar i{background:linear-gradient(90deg,#2f9d63,#3ecf7a)}
.ch-rw{font-size:11px;color:#ffd76a;margin-top:6px}
.ch-sweep{background:#152a1e;border:1px solid #2f6b46;color:#8ee0ac;border-radius:11px;
  padding:11px 12px;font-size:13px;font-weight:700;text-align:center}
.ch-sweep.paid{background:#161b27;border-color:#2c3448;color:#8b93a8}
.ch-note{font-size:12px;color:#6d7488;text-align:center;padding:6px}

/* ---- tournament cards in the lobby ---- */
.mtt-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-bottom:18px}
.mtt-grid .h-sec-t{grid-column:1/-1;margin-bottom:0}
.mtt-card{background:linear-gradient(180deg,#1a2130,#12161f);border:1px solid #2f3a52;
  border-radius:14px;padding:14px}
.mtt-card.live{border-color:#c9971f;box-shadow:0 0 0 1px #c9971f33}
.mtt-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.mtt-n{font-size:16px;font-weight:800;color:#ffd76a;flex:1}
.mtt-w{font-size:11.5px;color:#98a1b5;text-align:right}
.mtt-in{display:block;font-size:10.5px;color:#6d7488}
.mtt-tag{font-size:12px;color:#79819a;margin-top:3px;font-style:italic}
.mtt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:11px}
.mtt-stats div{text-align:center}
.mtt-stats b{display:block;font-size:14px;color:#e8ecf5;font-weight:800}
.mtt-stats span{font-size:9.5px;color:#6d7488;text-transform:uppercase;letter-spacing:.4px}
.mtt-pay{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.mtt-pay span{font-size:10.5px;background:#1e2536;border-radius:6px;padding:3px 7px;color:#aab2c4}
.mtt-pay.dim{font-size:11px;color:#6d7488}
.mtt-b{margin-top:12px}
.mtt-b .h-btn{width:100%}

@media(max-width:640px){
  .home-cover{height:150px;border-radius:0}
  .home-av{width:82px;height:82px;left:16px;bottom:-28px}
  .home-id,.home-nums,.home-tools,.home-sec{padding-left:16px;padding-right:16px}
  .home-nm{font-size:22px}
  .home-nums{gap:18px}
  .ov{padding:0;align-items:flex-end}
  .ov-box{max-width:none;border-radius:16px 16px 0 0;max-height:92vh}
  .dm-box{height:92vh}
}
.pv-social{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:8px 0 4px}
.rc-tables{font-size:10.5px;color:var(--muted);text-align:center;margin-top:2px}
.shoutbox .champ-row{border-top:1px solid rgba(212,168,67,.25);margin-top:6px;padding-top:8px}
.shoutbox .champ-row .sho-val{color:var(--gold)}

/* ---- profile page: banner, cutout, page picture, friends gate ---- */
#home{background-size:cover;background-position:center;background-attachment:fixed}
#home.has-pagebg .home-cover{border-radius:0 0 18px 18px}
.h-cover-tools{position:absolute;top:10px;right:10px;z-index:3;display:flex;gap:6px}
.home-cover .h-cover-btn{position:static}
.home-av{left:50%;transform:translateX(-50%);width:132px;height:132px;bottom:-46px;
  border-width:4px;box-shadow:0 8px 28px rgba(0,0,0,.55)}
.home-cut{position:absolute;right:16px;bottom:0;height:104%;width:auto;z-index:2;
  pointer-events:none;display:flex;align-items:flex-end}
.home-cut img{height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,0,0,.6))}
.home-id{padding-top:58px;text-align:center}
.home-nm{justify-content:center}
.home-interests{margin-top:5px;font-size:13.5px;color:#ffd76a;font-style:italic}
.home-bio{margin-left:auto;margin-right:auto}
.home-nums{justify-content:center}
.home-tools{justify-content:center}
.home-locked{margin:20px 24px 0;padding:22px 18px;text-align:center;
  background:rgba(20,25,36,.85);border:1px solid #2c3448;border-radius:14px}
.h-lock-t{font-size:15px;font-weight:800;color:#e8ecf5}
.h-lock-d{font-size:13px;color:#8b93a8;margin-top:6px;line-height:1.5}
#home-interest-tools{gap:14px;flex-wrap:wrap}
#home.has-pagebg .home-sec .h-tile,
#home.has-pagebg .h-post,
#home.has-pagebg .h-composer{background:rgba(20,25,36,.86)}
@media(max-width:640px){
  .home-av{width:100px;height:100px;bottom:-36px}
  .home-cut{right:6px;height:96%}
  .home-id{padding-top:46px}
  #home{background-attachment:scroll}
}

/* ---- hero: the avatar must not be clipped by the banner ----
   The cover art needs overflow:hidden to keep its rounded corners. The avatar
   and the cutout sit OUTSIDE that box, in a non-clipping wrapper, so a circle
   centered on the banner shows as a whole circle instead of a half one. */
.home-hero{position:relative;overflow:visible}
.home-hero .home-cover{height:230px;overflow:hidden}
.home-hero .h-cover-tools{position:absolute;top:10px;right:10px}
.home-hero .home-av{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:150px;height:150px;bottom:auto;
  border:4px solid rgba(10,12,18,.85);box-shadow:0 10px 32px rgba(0,0,0,.6);z-index:4}
.home-hero .home-cut{position:absolute;right:18px;bottom:0;top:auto;height:130%;z-index:3;
  display:flex;align-items:flex-end;pointer-events:none}
.home-hero .home-cut img{height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.65))}
.home-id{padding-top:18px}
@media(max-width:640px){
  .home-hero .home-cover{height:172px}
  .home-hero .home-av{width:112px;height:112px;border-width:3px}
  .home-hero .home-cut{right:6px;height:124%}
  .home-id{padding-top:14px}
}

/* ---- image cropper ---- */
.crop-wrap{position:fixed;inset:0;background:rgba(4,6,10,.93);z-index:500;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;gap:12px}
.crop-title{font-size:15px;font-weight:800;color:#f2f5fb;text-align:center}
.crop-sub{font-size:12px;color:#8b93a8;text-align:center;margin-top:-6px;max-width:340px;line-height:1.45}
.crop-stage{position:relative;background:#0b0d14;border:1px solid #2a3244;border-radius:12px;
  overflow:hidden;touch-action:none;cursor:grab;max-width:92vw}
.crop-stage:active{cursor:grabbing}
.crop-stage canvas{display:block;width:100%;height:100%}
.crop-grid{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,transparent 33.33%,rgba(255,255,255,.16) 33.33% 33.5%,transparent 33.5% 66.5%,rgba(255,255,255,.16) 66.5% 66.66%,transparent 66.66%),
             linear-gradient(to bottom,transparent 33.33%,rgba(255,255,255,.16) 33.33% 33.5%,transparent 33.5% 66.5%,rgba(255,255,255,.16) 66.5% 66.66%,transparent 66.66%)}
.crop-zoom{display:flex;align-items:center;gap:10px;width:min(420px,92vw);color:#8b93a8;font-size:12px}
.crop-zoom input{flex:1;accent-color:#ffd76a}
.crop-btns{display:flex;gap:8px}

/* ---- signup: the terms agreement ----
   Given as its own bordered block rather than fine print. Somebody who cannot
   find this cannot create an account at all, so it gets to look important. */
.terms-agree{display:flex;gap:10px;align-items:flex-start;text-align:left;
  margin:14px 0 14px;padding:12px 13px;font-size:12.5px;line-height:1.5;
  color:var(--text);background:rgba(212,168,67,.07);
  border:1px solid rgba(212,168,67,.38);border-radius:11px;cursor:pointer}
.terms-agree input[type=checkbox]{
  -webkit-appearance:none;appearance:none;flex:none;
  width:20px;height:20px;margin:1px 0 0;border-radius:5px;
  border:2px solid var(--gold);background:transparent;cursor:pointer;position:relative}
.terms-agree input[type=checkbox]:checked{background:var(--gold);border-color:var(--gold)}
.terms-agree input[type=checkbox]:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #17130a;border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}
.terms-agree a{color:var(--gold2);text-decoration:underline}
.terms-agree.needed{border-color:#e0645a;background:rgba(224,100,90,.10);
  animation:termsNudge .45s ease}
@keyframes termsNudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.home-seated{text-align:center;margin-top:8px;font-size:12px;color:#ffd76a}

/* ============================================================
   ACTION BAR — the buttons you actually press
   ============================================================
   Glassy, lit from within, and big enough for a thumb. Each button carries the
   NUMBER underneath the verb, because at the moment of deciding, "Call 1,250"
   is a different question from "Call". */
.topctrl{display:flex;gap:10px;justify-content:center;align-items:stretch}
.abtn{position:relative;overflow:hidden;flex:1 1 0;min-width:88px;max-width:170px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:12px 10px;border-radius:14px;cursor:pointer;font:inherit;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.02));
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .09s ease, box-shadow .16s ease, filter .16s ease}
.abtn b{font-size:15px;font-weight:800;letter-spacing:.3px;line-height:1.1}
.abtn span{font-size:11.5px;font-weight:700;opacity:.82;letter-spacing:.2px}
.abtn::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:radial-gradient(120% 70% at 50% -20%,rgba(255,255,255,.30),transparent 60%)}
.abtn:hover{transform:translateY(-1px);filter:brightness(1.10)}
.abtn:active{transform:translateY(1px) scale(.985);box-shadow:0 3px 10px rgba(0,0,0,.5)}
.abtn.af{color:#ffd9d3;border-color:rgba(226,114,91,.55);
  background:linear-gradient(180deg,rgba(196,66,48,.55),rgba(120,30,20,.42))}
.abtn.ac{color:#d8ffe9;border-color:rgba(62,207,122,.5);
  background:linear-gradient(180deg,rgba(30,140,84,.55),rgba(14,74,46,.42))}
.abtn.ar{color:#1a1205;border-color:rgba(255,215,106,.85);
  background:linear-gradient(180deg,#ffe08a,#e0a824)}
.abtn.ar span{opacity:.7}
.abtn.aa{color:#f0e2ff;border-color:rgba(160,110,235,.6);
  background:linear-gradient(180deg,rgba(104,60,190,.62),rgba(52,26,104,.45))}
.abtn.ax{color:#c3cad9;border-color:rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02))}

/* ---- the raise panel ---- */
.rpanel{background:linear-gradient(180deg,rgba(22,27,39,.94),rgba(12,15,22,.96));
  border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:14px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 44px rgba(0,0,0,.6)}
.rp-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.rp-lbl{font-size:11px;font-weight:800;letter-spacing:1.4px;color:#8b93a8}
.rp-val{font-size:28px;font-weight:800;color:#ffd76a;line-height:1;
  text-shadow:0 0 18px rgba(255,215,106,.35)}
.rp-sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:11px}
.szbtn{display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 4px;
  border-radius:11px;cursor:pointer;font:inherit;color:#dfe5f0;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  transition:all .13s ease}
.szbtn b{font-size:13.5px;font-weight:800}
.szbtn span{font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;opacity:.65}
.szbtn:hover{border-color:rgba(255,215,106,.55)}
.szbtn.on{border-color:#ffd76a;color:#1a1205;
  background:linear-gradient(180deg,#ffe08a,#e0a824)}
.szbtn.on span{opacity:.72}
.rp-slide{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.rp-slide input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:8px;
  border-radius:99px;background:linear-gradient(90deg,#e0a824,#ffd76a);outline:none}
.rp-slide input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ffd76a 55%,#c9971f);
  border:2px solid #17130a;cursor:grab;box-shadow:0 3px 10px rgba(0,0,0,.55)}
.rp-slide input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;
  background:#ffd76a;border:2px solid #17130a;cursor:grab}
.nudge{width:38px;height:38px;flex:none;border-radius:11px;cursor:pointer;font:inherit;
  font-size:20px;font-weight:800;color:#dfe5f0;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02))}
.nudge:active{transform:scale(.94)}
.rp-btns{display:flex;gap:8px}
.rp-btns .abtn{flex:1;padding:13px 10px}

/* ============================================================
   THE CELEBRATION
   ============================================================ */
.celebrate{position:fixed;inset:0;z-index:300;pointer-events:none;
  display:flex;align-items:center;justify-content:center}
.cel-word{font-size:clamp(34px,9vw,86px);font-weight:900;letter-spacing:-1px;
  text-align:center;padding:0 18px;line-height:1.05;
  background:linear-gradient(180deg,#fff6d5,#ffd76a 45%,#e0a824);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 26px rgba(255,215,106,.55));
  animation:celPop 2s cubic-bezier(.2,1.4,.35,1) forwards}
.cel-word.lose{background:linear-gradient(180deg,#e8ecf5,#98a1b5 50%,#5f677c);
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.6))}
.cel-sub{display:block;font-size:clamp(13px,3vw,20px);font-weight:700;letter-spacing:2px;
  margin-top:8px;-webkit-text-fill-color:#c8cede;opacity:.9}
@keyframes celPop{
  0%{transform:scale(.55) rotate(-4deg);opacity:0}
  14%{transform:scale(1.12) rotate(1.5deg);opacity:1}
  26%{transform:scale(1) rotate(0)}
  78%{transform:scale(1);opacity:1}
  100%{transform:scale(1.06) translateY(-14px);opacity:0}
}
.cel-spark{position:absolute;width:11px;height:11px;border-radius:50%;
  animation:celFly 2s ease-out forwards}
@keyframes celFly{
  0%{transform:translate(0,0) scale(.4);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}
}
@media(max-width:640px){
  .abtn{padding:10px 8px;min-width:70px;border-radius:12px}
  .abtn b{font-size:13.5px}
  .abtn span{font-size:10.5px}
  .rp-val{font-size:24px}
  .szbtn b{font-size:12px}
}

/* ---- vault item artwork on the profile ---- */
.h-trart{width:56px;height:56px;margin:0 auto;border-radius:9px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#252a36,#14161d);
  border:1px solid rgba(255,255,255,.10)}
.h-trimg{width:100%;height:100%;object-fit:cover}
.h-trimg-fb{font-size:28px;line-height:1}

/* ---- a way out of every panel, without scrolling to find it ----
   Long panels (the Vault runs to seventy-odd items) put their close button at
   the bottom, which means the way out is only reachable by reading everything
   first. This one rides at the top of the box and stays there. */
.modal-x{position:absolute;top:10px;right:10px;z-index:12;
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;font-family:inherit;color:#dfe5f0;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(14,17,24,.86);backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(0,0,0,.5)}
.modal-x:hover{border-color:rgba(255,215,106,.6);color:#ffd76a}
.modal-x:active{transform:scale(.93)}
.modal-box{position:relative}
/* Keep the button clear of the first line of content. */
.modal-box.has-x{padding-top:52px}
.ov-box .ov-x{position:sticky}

/* ---- items in play ---- */
.stakestrip{position:absolute;left:50%;transform:translateX(-50%);top:8px;z-index:8;
  display:flex;gap:7px;flex-wrap:wrap;justify-content:center;max-width:min(560px,88vw);pointer-events:none}
.stk-chip{display:flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;border-radius:12px;
  background:rgba(12,15,22,.82);border:1px solid rgba(255,215,106,.55);
  backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(0,0,0,.5)}
.stk-chip-art{width:34px;height:34px;border-radius:8px;overflow:hidden;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#252a36,#14161d)}
.stk-chip-img{width:100%;height:100%;object-fit:cover}
.stk-chip-img-fb{font-size:19px;line-height:1}
.stk-chip-t{display:flex;flex-direction:column;line-height:1.2}
.stk-chip-t b{font-size:11.5px;color:#ffd76a;font-weight:800}
.stk-chip-t span{font-size:10px;color:#98a1b5}
.stk-note{padding:10px 16px 0;font-size:12px;color:#8b93a8;line-height:1.5}
.stk-row{display:flex;align-items:center;gap:11px;padding:9px 4px;
  border-bottom:1px solid #1c2331;cursor:pointer;border-radius:9px}
.stk-row:hover{background:#171d2a}
.stk-art{width:52px;height:52px;border-radius:9px;overflow:hidden;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#252a36,#14161d);
  border:1px solid rgba(255,255,255,.10)}
.stk-img{width:100%;height:100%;object-fit:cover}
.stk-img-fb{font-size:26px;line-height:1}
.stk-mid{flex:1;min-width:0}
.stk-n{font-size:13.5px;font-weight:700;color:#dfe5f0}
.stk-v{font-size:11.5px;color:#ffd76a}
@media(max-width:640px){.stakestrip{top:4px;gap:5px}.stk-chip-t b{font-size:10.5px}}

/* ---- Terms shown inside the app ----
   Opening the Terms in a new tab left people stranded: no back button, no way
   to accept, nothing to do but close the tab and start again. It opens here
   instead, with the way out and the way forward both in reach. */
.terms-wrap{position:fixed;inset:0;z-index:600;background:#08080f;display:flex;flex-direction:column}
.terms-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;flex:none;
  border-bottom:1px solid #2a2a3d;background:#12121c;
  padding-top:max(10px,env(safe-area-inset-top))}
.terms-title{flex:1;text-align:center;font-size:14px;font-weight:800;color:#e0b64a}
.terms-wrap iframe{flex:1;width:100%;border:0;background:#08080f}
.linkbtn{display:block;width:100%;margin-top:10px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--muted);text-decoration:underline;padding:6px}
.linkbtn:hover{color:var(--gold2)}

/* ============================================================
   TRASH TALK
   ============================================================
   A line somebody bought and chose to send, hanging off their own seat. It
   replaced the automatic end-of-hand celebration — a jab you aimed lands
   better than an animation the game plays at you. */
.tauntlayer{position:absolute;inset:0;z-index:14;pointer-events:none;overflow:hidden}
.tt-banner{position:absolute;transform:translate(-50%,-100%);
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:7px 14px;border-radius:13px;white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,.55);
  animation:ttIn .22s cubic-bezier(.2,1.5,.4,1), ttOut .5s 3.7s forwards}
.tt-banner b{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;opacity:.72}
.tt-banner span{font-size:14px;font-weight:800;letter-spacing:.2px}
.tt-banner.floating{left:50%;top:26%}
.tt-banner::after{content:"";position:absolute;bottom:-6px;left:50%;margin-left:-6px;
  border:6px solid transparent;border-top-color:inherit}
@keyframes ttIn{from{opacity:0;transform:translate(-50%,-70%) scale(.8)}
                to{opacity:1;transform:translate(-50%,-100%) scale(1)}}
@keyframes ttOut{to{opacity:0;transform:translate(-50%,-130%)}}
.tt-plain{background:#232b3c;border:1px solid #3a4458;color:#dfe5f0;border-top-color:#232b3c}
.tt-gold {background:linear-gradient(180deg,#ffe08a,#e0a824);border:1px solid #c9971f;color:#1a1205;border-top-color:#e0a824}
.tt-green{background:linear-gradient(180deg,#2f9d63,#1c6b41);border:1px solid #3ecf7a;color:#eafff2;border-top-color:#1c6b41}
.tt-red  {background:linear-gradient(180deg,#c44230,#7a2418);border:1px solid #e2725b;color:#ffe9e4;border-top-color:#7a2418}
.tt-neon {background:#0d0f18;border:1px solid #b06aff;color:#e9d5ff;border-top-color:#0d0f18;
  box-shadow:0 0 18px rgba(176,106,255,.55),0 8px 22px rgba(0,0,0,.55)}

/* the picker */
.tt-pick{display:block;width:100%;margin-bottom:7px;padding:11px 14px;border-radius:11px;
  cursor:pointer;font:inherit;font-size:14px;font-weight:700;text-align:left}
.tt-pick:active{transform:scale(.985)}
.tt-shop-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid #1c2331}
.tt-shop-txt{flex:1;font-size:13.5px;font-weight:700}
@media(max-width:640px){.tt-banner span{font-size:12.5px}.tt-banner{padding:6px 11px}}

/* ---- nemeses ---- */
.nem-row{display:flex;align-items:center;gap:11px;padding:10px 12px;margin-bottom:7px;
  border-radius:12px;cursor:pointer;border:1px solid #2a3244;background:#141924;
  transition:border-color .15s ease}
.nem-row:hover{border-color:#4a5670}
.nem-bad{border-left:3px solid #e2725b}
.nem-good{border-left:3px solid #3ecf7a}
.nem-rank{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;background:#232b3c;color:#8b93a8}
.nem-bad .nem-rank{background:rgba(226,114,91,.18);color:#e2725b}
.nem-good .nem-rank{background:rgba(62,207,122,.16);color:#3ecf7a}
.nem-mid{flex:1;min-width:0}
.nem-n{font-size:14px;font-weight:800;color:#e8ecf5}
.nem-sub{font-size:11px;color:#79819a;margin-top:1px}
.nem-net{font-size:16px;font-weight:800;white-space:nowrap}
.nem-bad .nem-net{color:#e2725b}
.nem-good .nem-net{color:#3ecf7a}

/* ---- serial numbers ----
   Printed on the copy, the way a numbered card is. Drawn here rather than
   baked into the artwork: one picture per item, any number of copies, and
   replacing a picture never invalidates the copies already in vaults. */
.ser{display:inline-flex;align-items:center;gap:5px;margin-top:5px;
  padding:3px 9px;border-radius:5px;
  background:linear-gradient(180deg,#191d27,#0d1016);
  border:1px solid rgba(255,215,106,.30);
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:11px;font-weight:700;letter-spacing:1.2px;color:#ffd76a;line-height:1.1}
.ser small{color:#98a1b5;font-weight:600;letter-spacing:.6px;font-size:9.5px}
.ser.dim{color:#98a1b5;border-color:rgba(255,255,255,.10)}
.ser.out{color:#e08585;border-color:rgba(224,133,133,.35);letter-spacing:1px}
.ser.one{flex-direction:column;gap:0;align-items:center;color:#fff;letter-spacing:2px;
  background:linear-gradient(180deg,#7a5a12,#4a3608);border-color:rgba(255,215,106,.55)}
.ser.one b{font-size:11px;letter-spacing:2px}
.ser.one i{font-style:normal;font-size:9px;color:#ffd76a;letter-spacing:1.6px}
/* on a seat badge and a trophy tile the stamp has to shrink */
.v2stk-one .ser,.h-tr .ser{font-size:9px;padding:2px 6px;margin-top:3px;letter-spacing:.8px}

/* ---- titles ----
   A belt is held by one person and can be taken off them. It reads differently
   from a trophy on purpose: no gold plate, just the name, the number behind it,
   and how long the holder has got before somebody comes for it. */
.tt-belts{display:flex;flex-direction:column;gap:7px}
.tt-belt{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:10px;
  background:linear-gradient(135deg,rgba(212,168,67,.10),rgba(20,22,30,.92));
  border:1px solid rgba(212,168,67,.34)}
.tt-ic{font-size:21px;line-height:1;flex:none;width:26px;text-align:center}
.tt-ic.big{font-size:26px;width:34px}
.tt-mid{flex:1;min-width:0}
.tt-n{font-size:13px;font-weight:800;color:var(--gold2)}
.tt-s{font-size:11px;color:var(--muted)}
.tt-b{font-size:11px;color:var(--muted);line-height:1.45}
.tt-p{font-size:9.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--border);border-radius:99px;padding:3px 8px;flex:none}
.tt-tabs{display:flex;gap:6px;margin-bottom:4px;flex-wrap:wrap}
.tt-tabs .fbtn.on{background:var(--gold);color:#1a1508;border-color:var(--gold);font-weight:700}
.tt-row{display:flex;align-items:center;gap:11px;padding:10px 4px;border-bottom:1px solid #1c2331}
.tt-row.vacant{opacity:.55}
.tt-who{text-align:right;flex:none;max-width:44%}
.tt-who a{display:block;font-size:12.5px;font-weight:800;color:var(--gold2);cursor:pointer}
.tt-who a:hover{text-decoration:underline}
.tt-who span{display:block;font-size:10.5px;color:var(--muted)}
.tt-who i{font-size:11px;color:var(--muted);font-style:normal}

/* ---- add to home screen ----
   Two platforms, one bar. Android gets a button that installs; iOS gets an
   instruction, because Safari has no install prompt and a button that did
   nothing would be worse than no button. */
.pwa-bar{position:fixed;left:10px;right:10px;bottom:10px;z-index:200;
  display:flex;align-items:center;gap:11px;padding:11px 12px;
  background:rgba(13,16,25,.96);border:1px solid rgba(212,168,67,.42);
  border-radius:14px;box-shadow:0 12px 34px rgba(0,0,0,.62);
  backdrop-filter:blur(10px);
  transform:translateY(140%);opacity:0;transition:transform .28s ease,opacity .28s ease;
  padding-bottom:calc(11px + env(safe-area-inset-bottom))}
.pwa-bar.on{transform:none;opacity:1}
.pwa-bar img{width:40px;height:40px;border-radius:9px;flex:none}
.pwa-t{flex:1;min-width:0;line-height:1.35}
.pwa-t b{display:block;font-size:13px;color:#ffd76a}
.pwa-t span{display:block;font-size:11.5px;color:#98a1b5}
.pwa-share{width:13px;height:13px;vertical-align:-2px;color:#cfd6e4}
.pwa-go{background:linear-gradient(180deg,#e0b64a,#c99b2f);border:1px solid #ffd76a;
  color:#1a1508;border-radius:9px;padding:9px 15px;font-family:inherit;font-size:12.5px;
  font-weight:800;cursor:pointer;flex:none}
.pwa-go:active{transform:translateY(1px)}
.pwa-x{background:none;border:none;color:#6d7488;font-size:21px;line-height:1;
  cursor:pointer;padding:2px 4px;flex:none}
@media(max-width:420px){ .pwa-t span{font-size:11px} .pwa-bar img{width:34px;height:34px} }
/* Installed already: never offer it again, whatever the script thinks. */
html.installed .pwa-bar{display:none}

/* ---- something you just earned ----
   Deliberately not a modal. A feat lands in the middle of a hand and must not
   take the table away from you to say so. */
.feat-layer{position:fixed;right:12px;top:12px;z-index:210;display:flex;
  flex-direction:column;gap:9px;pointer-events:none;max-width:min(330px,86vw)}
.feat-card{background:linear-gradient(160deg,rgba(30,24,10,.97),rgba(13,16,25,.97));
  border:1px solid rgba(255,215,106,.55);border-radius:13px;padding:11px 13px;
  box-shadow:0 14px 38px rgba(0,0,0,.66);
  transform:translateX(120%);opacity:0;transition:transform .34s cubic-bezier(.2,.9,.3,1),opacity .34s}
.feat-card.on{transform:none;opacity:1}
.feat-top{font-size:10.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:#ffd76a;margin-bottom:7px}
.feat-mid{display:flex;gap:10px;align-items:center}
.feat-art{width:46px;height:46px;border-radius:10px;overflow:hidden;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#252a36,#14161d);
  border:1px solid rgba(255,215,106,.35)}
.feat-img{width:100%;height:100%;object-fit:cover}
.feat-img-fb{font-size:24px;line-height:1}
.feat-txt{flex:1;min-width:0;line-height:1.35}
.feat-txt b{display:block;font-size:13px;color:#fff}
.feat-txt span{display:block;font-size:11px;color:#98a1b5}
.feat-ser{display:inline-block;margin-top:5px;padding:2px 7px;border-radius:5px;
  background:rgba(8,10,16,.8);border:1px solid rgba(255,215,106,.3);
  font-family:"SFMono-Regular",Consolas,monospace;font-size:10px;font-weight:700;
  letter-spacing:1px;color:#ffd76a}
.feat-ser small{color:#98a1b5;font-size:8.5px}