/* ==========================================================================
   Teen Patti — one stylesheet, no build step (matching the aviator frontend).
   Prefix: tp-
   ========================================================================== */
:root{
  --bg:#0d1418; --bg2:#131e23; --panel:#16232a; --line:#22343d; --ink:#e8f1f3; --muted:#8fa3ab;
  --gold:#f0b73f; --green:#2f8f5b; --red:#d8492f; --blue:#3b82f6;
  --felt:#14503c; --felt2:#0d3a2b;
  --r:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit;color:inherit}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;word-break:break-all}
.tp-muted{color:var(--muted)}
.tp-app{height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* ---- top bar ---- */
.tp-topbar{
  display:flex;align-items:center;gap:14px;padding:10px 16px;
  background:linear-gradient(180deg,#16242b,#111b21);border-bottom:1px solid var(--line);
}
.tp-brand{font-weight:800;letter-spacing:.3px}
.tp-brand span{color:var(--gold)}
.tp-who{color:var(--muted);margin-left:auto}
.tp-balance{background:#0e1a20;border:1px solid var(--line);border-radius:999px;padding:5px 14px;font-weight:700;color:var(--gold)}
.tp-conn{color:var(--green);font-size:11px}
.tp-conn.off{color:var(--red)}

/* ---- buttons ---- */
.tp-btn{
  background:#1e2f38;border:1px solid #2c4250;color:var(--ink);
  padding:9px 14px;border-radius:10px;cursor:pointer;font-weight:600;
  transition:background .12s,border-color .12s,transform .05s;
}
.tp-btn:hover{background:#263d48}
.tp-btn:active{transform:translateY(1px)}
.tp-btn:disabled{opacity:.45;cursor:not-allowed}
.tp-btn.primary{background:var(--green);border-color:#3ba86c}
.tp-btn.primary:hover{background:#37a067}
.tp-btn.danger{color:#ff9b86;border-color:#5a2f27}
.tp-btn.ghost{background:transparent}
.tp-btn.wide{flex:1}

/* ---- lobby ---- */
.tp-lobby{padding:18px;max-width:1180px;margin:0 auto;width:100%;flex:1;min-height:0;overflow:auto}
.tp-lobby-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.tp-lobby-head h1{font-size:20px;margin:0}
.tp-tiers{display:flex;gap:6px;margin-left:auto}
.tp-tiers button{background:#16232a;border:1px solid var(--line);color:var(--muted);padding:6px 14px;border-radius:999px;cursor:pointer}
.tp-tiers button.on{background:var(--gold);border-color:var(--gold);color:#20160a;font-weight:700}
.tp-lobby-grid{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.tp-tablelist{display:grid;gap:10px}
.tp-tablecard{
  display:grid;grid-template-columns:1fr auto auto auto;gap:16px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
}
.tp-tablecard h3{margin:0 0 3px;font-size:15px}
.tp-tablecard .meta{color:var(--muted);font-size:12.5px}
.tp-pill{background:#0e1a20;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--gold);font-weight:700}
.tp-seatcount{color:var(--muted);font-variant-numeric:tabular-nums}
.tp-empty{color:var(--muted);text-align:center;padding:40px;border:1px dashed var(--line);border-radius:var(--r)}
.tp-side{display:grid;gap:12px}
.tp-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.tp-panel h2{font-size:13px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin:0 0 10px}
.tp-panel label,.tp-modal-box label{display:block;margin-bottom:10px;font-size:12.5px;color:var(--muted)}
.tp-panel input,.tp-panel select,.tp-modal-box input:not([type=checkbox]){
  display:block;width:100%;margin-top:4px;background:#0e1a20;border:1px solid var(--line);
  color:var(--ink);padding:9px 10px;border-radius:9px;
}
.tp-check{display:flex!important;align-items:center;gap:8px;color:var(--ink)}
.tp-check input{width:auto;margin:0}
.tp-row{display:flex;gap:8px;align-items:center}
.tp-code{text-transform:uppercase;letter-spacing:2px;text-align:center;font-weight:700}
.tp-rules p{margin:0 0 8px;font-size:12.5px;color:#c3d2d7}

/* ---- table ---- */
.tp-table{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.tp-table-head{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line)}
.tp-table-title{font-weight:700}
.tp-table-title small{color:var(--muted);font-weight:400;margin-left:6px}
.tp-table-tools{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tp-invite{color:var(--muted);font-size:12px}
.tp-invite b{color:var(--gold);letter-spacing:2px}

.tp-felt-wrap{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:34px 18px;min-height:0;container-type:size;
}
.tp-felt{
  position:relative;aspect-ratio:16/10;
  width:min(980px, 100cqw, calc(100cqh * 1.6));
  --rx:43; --ry:44;   /* seat ring radii, in % — read by game.js */
  background:radial-gradient(ellipse at 50% 45%,var(--felt) 0%,var(--felt2) 70%,#08251b 100%);
  border:10px solid #3b2416;border-radius:48% / 42%;
  box-shadow:inset 0 0 90px rgba(0,0,0,.55),0 18px 50px rgba(0,0,0,.5);
}
.tp-centre{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.tp-pot small{display:block;font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.45)}
.tp-pot b{font-size:30px;color:var(--gold);font-variant-numeric:tabular-nums}
.tp-stake{color:rgba(255,255,255,.6);font-size:12px;margin-top:2px}
.tp-stake b{color:#fff}
.tp-status{margin-top:8px;font-size:12px;color:rgba(255,255,255,.75);min-height:16px}

/* seats — pos0 is always the viewer, bottom centre */
.tp-seat{position:absolute;transform:translate(-50%,-50%);width:132px;text-align:center;transition:opacity .2s}
.tp-seat.packed{opacity:.34}
.tp-seat.empty .tp-plate{border-style:dashed;background:transparent;color:var(--muted)}
.tp-plate{
  background:#0f1b20;border:1px solid #2b4250;border-radius:12px;padding:6px 8px;
  box-shadow:0 6px 18px rgba(0,0,0,.45);position:relative;
}
.tp-seat.turn .tp-plate{border-color:var(--gold);box-shadow:0 0 0 2px rgba(240,183,63,.35),0 6px 18px rgba(0,0,0,.45)}
.tp-seat.me .tp-plate{border-color:#3f6f8a}
.tp-name{font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-stack{color:var(--gold);font-size:12px;font-variant-numeric:tabular-nums}
.tp-badge{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  font-size:9px;letter-spacing:1px;padding:1px 7px;border-radius:999px;text-transform:uppercase;font-weight:800;
  white-space:nowrap;   /* a wrapping badge pushes the player's name out of the plate */
}
.tp-badge.blind{background:#334d5c;color:#cfe6f2}
.tp-badge.seen{background:var(--gold);color:#241a06}
.tp-badge.out{background:#3a2a28;color:#e0a99c}
.tp-badge.wait{background:#25353d;color:#9fb6c0}
.tp-dealer{
  position:absolute;right:-8px;bottom:-8px;width:20px;height:20px;border-radius:50%;
  background:#f2f2f2;color:#111;font-size:11px;font-weight:800;line-height:20px;
}
.tp-bet{margin-top:4px;font-size:11px;color:#bfe6cd;min-height:14px}
.tp-timer{height:3px;background:rgba(255,255,255,.12);border-radius:2px;margin-top:5px;overflow:hidden}
.tp-timer span{display:block;height:100%;background:var(--gold);transition:width .1s linear}

/* cards */
.tp-hand{display:flex;gap:3px;justify-content:center;margin-bottom:5px}
.tp-hand-empty{height:42px}
.tp-seat.me .tp-hand-empty{height:62px}
.tp-card{
  width:30px;height:42px;border-radius:5px;background:#fdfdf8;color:#111;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:800;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.tp-card .r{font-size:13px}
.tp-card .s{font-size:12px}
.tp-card.red{color:#c62828}
.tp-card.back{
  background:repeating-linear-gradient(45deg,#2d4a7a,#2d4a7a 4px,#24406c 4px,#24406c 8px);
  border:1px solid #16294a;
}
.tp-seat.me .tp-card{width:44px;height:62px}
.tp-seat.me .tp-card .r{font-size:19px}
.tp-seat.me .tp-card .s{font-size:16px}
.tp-seat.seatable{cursor:pointer}
.tp-seat.seatable:hover .tp-plate{border-color:var(--gold);color:var(--gold)}

/* ---- action bar ---- */
.tp-actions{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  padding:12px 16px 18px;border-top:1px solid var(--line);background:#0f1a1f;min-height:66px;
}
.tp-actions .tp-btn{min-width:104px}
.tp-actions .hint{color:var(--muted);align-self:center}
.tp-act-see{background:#2c5a7a;border-color:#3d7ba5}
.tp-act-show{background:#6b3fa0;border-color:#8355c4}
.tp-act-side{background:#7a5a2c;border-color:#a5813d}
.tp-act-pack{background:#3a2422;border-color:#5c3a35;color:#ffb6a6}
.tp-btn small{display:block;font-weight:400;font-size:10.5px;opacity:.75}

/* ---- modals / result / toast ---- */
.tp-modal{position:fixed;inset:0;background:rgba(4,10,12,.72);display:flex;align-items:center;justify-content:center;z-index:40;padding:16px}
.tp-modal-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;max-width:420px;width:100%}
.tp-modal-box.wide{max-width:620px}
.tp-modal-box h2{margin:0 0 8px;font-size:17px}
.tp-modal-box p{color:#c3d2d7;font-size:13px}
.tp-modal-cards{display:flex;justify-content:center;margin:12px 0}
#buyinQuick .tp-btn{flex:1;font-variant-numeric:tabular-nums}
.tp-timerbar{height:4px;background:rgba(255,255,255,.12);border-radius:2px;margin-top:12px;overflow:hidden}
.tp-timerbar span{display:block;height:100%;width:100%;background:var(--gold)}
.tp-kv{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;margin:14px 0;font-size:12.5px}
.tp-kv dt{color:var(--muted)}
.tp-kv dd{margin:0}
.tp-hr{border:0;border-top:1px solid var(--line);margin:14px 0}
.tp-verify{margin-top:12px;font-size:13px}
.tp-verify.ok{color:#6fd39b}
.tp-verify.bad{color:#ff8f7a}

.tp-result{
  position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);z-index:30;
  background:rgba(10,20,24,.96);border:1px solid var(--gold);border-radius:14px;
  padding:14px 20px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.6);max-width:92vw;
}
.tp-result h3{margin:0 0 8px;color:var(--gold);font-size:15px}
.tp-reveal{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.tp-reveal .who{font-size:12px;margin-bottom:4px}
.tp-reveal .rank{font-size:11px;color:var(--muted);margin-top:3px}
.tp-reveal.win .who{color:var(--gold);font-weight:700}
.tp-rake{margin-top:8px;font-size:11.5px;color:var(--muted)}

.tp-toast{
  position:fixed;left:50%;top:64px;transform:translateX(-50%);
  background:#22333c;border:1px solid #3a5563;border-radius:10px;padding:9px 16px;
  opacity:0;pointer-events:none;transition:opacity .18s;z-index:60;
}
.tp-toast.on{opacity:1}
.tp-toast.bad{border-color:#6b3229;background:#3a2320}

/* ---- the dealer -------------------------------------------------------- */
.tp-croupier{
  position:absolute;left:50%;top:22%;transform:translate(-50%,-50%);
  width:clamp(70px,10.5%,112px);pointer-events:none;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));
  animation:tp-breathe 5s ease-in-out infinite;
}
.tp-croupier svg{display:block;width:100%;height:auto;overflow:visible}
.tp-croupier .d-eye{fill:#2a1d1a;animation:tp-blink 6s infinite}
.tp-croupier .d-hands{transform-origin:60px 104px}
@keyframes tp-breathe{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-3px)}}
@keyframes tp-blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.tp-eye-wrap{transform-box:fill-box;transform-origin:center}
/* while cards are going out she works the deck */
.tp-felt.dealing .tp-croupier .d-hands{animation:tp-dealhands .42s ease-in-out infinite}
@keyframes tp-dealhands{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-4deg)}}

/* ---- the animation overlay --------------------------------------------- */
/* Its own layer: the seats are re-rendered on every state update, so anything
   in flight would otherwise be destroyed mid-animation. */
.tp-fx{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:6}
.tp-fly-card{
  position:absolute;left:0;top:0;width:26px;height:36px;border-radius:4px;
  background:repeating-linear-gradient(45deg,#2d4a7a,#2d4a7a 4px,#24406c 4px,#24406c 8px);
  border:1px solid #16294a;box-shadow:0 3px 8px rgba(0,0,0,.5);will-change:transform;
}
.tp-coin{
  position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ffe9a8,#f0b73f 58%,#b9821c);
  box-shadow:0 2px 5px rgba(0,0,0,.45),inset 0 0 0 2px rgba(255,255,255,.28);
  will-change:transform;
}
.tp-coin.win{width:19px;height:19px}

/* the pot reacting to money arriving */
.tp-pot.bump b{animation:tp-bump .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes tp-bump{0%{transform:scale(1)}40%{transform:scale(1.22);color:#fff}100%{transform:scale(1)}}
.tp-pot b{display:inline-block}

/* the seat that just won */
.tp-seat.won .tp-plate{
  border-color:var(--gold);
  animation:tp-winglow 1.5s ease-out 2;
}
@keyframes tp-winglow{
  0%{box-shadow:0 0 0 0 rgba(240,183,63,.6)}
  70%{box-shadow:0 0 0 14px rgba(240,183,63,0)}
  100%{box-shadow:0 0 0 0 rgba(240,183,63,0)}
}

/* ---- turn timer -------------------------------------------------------- */
.tp-seat.turn .tp-plate{animation:tp-turnpulse 1.6s ease-in-out infinite}
@keyframes tp-turnpulse{
  0%,100%{box-shadow:0 0 0 2px rgba(240,183,63,.30),0 6px 18px rgba(0,0,0,.45)}
  50%{box-shadow:0 0 0 5px rgba(240,183,63,.14),0 6px 18px rgba(0,0,0,.45)}
}
.tp-timer{height:4px}
.tp-timer span{transition:width .12s linear}  /* smooths the 100ms sampling */
.tp-timer.low span{animation:tp-lowblink .5s steps(2) infinite}
@keyframes tp-lowblink{0%{opacity:1}100%{opacity:.45}}

@media (prefers-reduced-motion: reduce){
  .tp-croupier,.tp-felt.dealing .tp-croupier .d-hands,.tp-croupier .d-eye,
  .tp-seat.turn .tp-plate,.tp-timer.low span,.tp-pot.bump b{animation:none}
}

/* ---- orientation ------------------------------------------------------- */
/* A phone held upright cannot show a six-seat table at a readable size, so we
   ask for the long edge. `Rotate for me` tries the Screen Orientation API,
   which only works from fullscreen and not at all on iOS — hence the prompt
   as well, rather than instead. */
.tp-rotate{display:none}
@media (max-width:700px) and (orientation:portrait){
  .tp-rotate{
    display:flex;position:fixed;inset:0;z-index:100;
    align-items:center;justify-content:center;text-align:center;padding:24px;
    background:var(--bg);
  }
  .tp-app{display:none}
}
.tp-rotate-inner h2{margin:16px 0 6px;font-size:17px}
.tp-rotate-inner p{color:var(--muted);margin:0 0 18px;font-size:13px}
.tp-rotate svg .ph{fill:none;stroke:var(--gold);stroke-width:5;animation:tp-tilt 2.4s ease-in-out infinite;transform-origin:60px 60px}
.tp-rotate svg circle{fill:var(--gold)}
.tp-rotate svg .arr{stroke:var(--muted);fill:var(--muted)}
@keyframes tp-tilt{0%,55%{transform:rotate(0)}80%,100%{transform:rotate(-90deg)}}

/* ---- narrow screens ---- */
@media (max-width:900px){
  .tp-lobby-grid{grid-template-columns:1fr}
  .tp-tablecard{grid-template-columns:1fr auto;gap:10px}
  /* the table tools must stay on one line rather than eating the felt */
  .tp-table-head{padding:8px 10px;gap:8px}
  .tp-table-tools{gap:6px;overflow-x:auto;flex-wrap:nowrap}
  .tp-table-tools .tp-btn{padding:6px 9px;font-size:12px;white-space:nowrap}
  .tp-table-title{font-size:13px}
  .tp-table-title small{display:none}
  .tp-seat{width:96px}
  .tp-plate{padding:4px 5px}
  .tp-name{font-size:11px}
  .tp-stack{font-size:11px}
  .tp-bet{font-size:10px}
  .tp-card{width:24px;height:34px}
  .tp-card .r{font-size:11px}.tp-card .s{font-size:10px}
  .tp-actions{gap:6px;padding:10px 8px 14px}
  .tp-actions .tp-btn{min-width:88px;padding:8px 10px}
}

/* a tablet held upright still gets a usable table, just a taller one */
@media (max-width:900px) and (orientation:portrait){
  .tp-felt-wrap{padding:26px 6px}
  .tp-felt{
    aspect-ratio:3/4;border-radius:38% / 26%;
    width:min(100cqw, calc(100cqh * 0.75));
    --rx:33; --ry:42;   /* pull the ring in so plates stay on the felt */
  }
  .tp-croupier{top:18%;width:clamp(60px,12%,92px)}
}

/* a phone on its side: very little height, so every bit of chrome shrinks and
   the table widens out to use the long edge */
@media (orientation:landscape) and (max-height:520px){
  .tp-topbar{padding:3px 10px;font-size:11.5px}
  .tp-balance{padding:3px 10px}
  .tp-table-head{padding:3px 8px;gap:6px}
  .tp-table-head .tp-btn{padding:5px 8px;font-size:11.5px}
  .tp-felt-wrap{padding:12px 8px}
  .tp-felt{
    aspect-ratio:2.15/1;                      /* use the width we actually have */
    width:min(100cqw, calc(100cqh * 2.15));
    border-width:7px;border-radius:44% / 40%;
    --rx:38; --ry:40;                          /* keep the plates on the felt */
  }
  .tp-actions{padding:5px 8px 7px;min-height:0;gap:5px;border-top:none}
  .tp-actions .tp-btn{padding:5px 10px;min-width:70px;font-size:12px}
  .tp-actions .tp-btn small{display:none}
  .tp-actions .hint{font-size:11.5px}
  .tp-seat{width:78px}
  .tp-plate{padding:3px 4px;border-radius:9px}
  .tp-name{font-size:10.5px}
  .tp-stack{font-size:10.5px}
  .tp-bet{font-size:9.5px;min-height:11px}
  .tp-hand{margin-bottom:3px;gap:2px}
  .tp-card{width:19px;height:27px}
  .tp-card .r{font-size:10px}.tp-card .s{font-size:9px}
  .tp-seat.me .tp-card{width:29px;height:41px}
  .tp-seat.me .tp-card .r{font-size:13px}
  .tp-seat.me .tp-card .s{font-size:11px}
  .tp-pot small{font-size:9px}
  .tp-pot b{font-size:20px}
  .tp-stake,.tp-status{font-size:10.5px}
  .tp-centre{top:53%}                          /* clear of the dealer above and the cards below */
  .tp-croupier{top:26%;width:clamp(40px,6.5%,58px)}
  .tp-fly-card{width:19px;height:27px}
  .tp-coin{width:12px;height:12px}
  .tp-result{padding:9px 14px;top:52%}
  .tp-result h3{font-size:13px;margin-bottom:5px}
  .tp-reveal .rank{font-size:10px}
}