@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@700;800&display=swap');
:root{font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;color:#f5f3e9;background:#101713;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible,input:focus-visible{outline:3px solid #e5ff80;outline-offset:3px}#app{width:min(100%,1080px);margin:0 auto;padding:26px 24px 42px}[hidden]{display:none!important}
.eyebrow{font:500 11px/1.4 'DM Mono',monospace;letter-spacing:.16em;color:#c6e66f;margin:0}.title-dot{color:#c8e96d}.panel{border:1px solid #33463b;background:#18241d;border-radius:20px}h1,h2,p{margin-top:0}h1{font:800 clamp(32px,5vw,48px)/1 'Syne',sans-serif;letter-spacing:-.075em;margin:4px 0 0}
.primary{border:0;border-radius:12px;background:#c8e96d;color:#122015;font-weight:800;min-height:44px;padding:10px 20px;box-shadow:0 5px 0 #849e40}.primary:hover:not(:disabled){background:#dcf493}.primary:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #849e40}
.lobby{width:min(100%,460px);margin:clamp(30px,10vh,100px) auto 0;padding:40px}.lobby h1{font-size:56px;margin:8px 0 14px}.lobby-copy{color:#c5d3c6;line-height:1.6;margin-bottom:32px}.lobby label{display:block;font-size:13px;font-weight:700;margin:18px 0 8px}.lobby input{width:100%;height:52px;padding:0 16px;border:1px solid #67766a;border-radius:11px;background:#f7f5ed;color:#14231a;font-size:16px}.wide{width:100%;margin-top:28px;display:flex;justify-content:space-between;align-items:center}.lobby-tip{color:#aebbae;font-size:13px;line-height:1.5;margin:20px 0 0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}.topbar-actions{display:flex;align-items:center;gap:10px}.room-button{min-height:44px;padding:10px 14px;border:1px solid #41594a;border-radius:11px;background:#1c2b22;color:#d8e8d4;font-size:13px}.room-button strong{color:#fff;letter-spacing:.1em;margin-left:4px}
.overview{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 22px;margin-bottom:22px}.overview-main{display:flex;align-items:center;gap:14px}.overview-main strong{display:block;font-size:19px}.overview-main p{color:#bacbb9;font-size:13px;line-height:1.5;margin:3px 0 0}.state-dot{flex:none;width:12px;height:12px;border-radius:50%;background:#687b69;box-shadow:0 0 0 6px #334538}.state-dot.active{background:#c8e96d;box-shadow:0 0 0 6px #415532}.rounds{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.rounds span{padding:7px 10px;border-radius:7px;background:#25352a;color:#9cb09e;font-size:11px;white-space:nowrap}.rounds span.active{background:#d4eb8f;color:#1b2c1b;font-weight:800}.rounds span.passed{color:#d5e4ca}
.table-wrap{padding:0 12px}.felt{position:relative;min-height:510px;display:flex;flex-direction:column;justify-content:space-between;padding:30px 48px;border:13px solid #946b43;outline:3px solid #bc8e5d;border-radius:230px;background:radial-gradient(ellipse at 50% 42%,#2d8058 0%,#206444 48%,#12412d 100%);box-shadow:inset 0 0 0 2px #49906a,inset 0 0 75px #0c2b1c,0 24px 50px #0008}
.player{display:flex;align-items:center;gap:11px;width:max-content;max-width:100%;padding:10px 13px;border-radius:14px;background:#11251cde;z-index:1;border:1px solid #ffffff24}.player.is-turn{border-color:#d4ef7a;box-shadow:0 0 0 3px #d4ef7a33}.me{align-self:flex-end}.avatar{width:43px;height:43px;flex:none;display:grid;place-items:center;border-radius:50%;background:#d2eb90;color:#21351e;font:800 12px 'DM Mono',monospace}.opponent .avatar{background:#d8cab0;color:#3a2e1e}.player-info strong,.player-info span{display:block;max-width:135px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-info strong{font-size:15px}.player-info span{font-size:12px;color:#d2e49d;margin-top:3px}.role,.bet{font-size:11px;font-weight:800;white-space:nowrap;border-radius:99px;padding:6px 8px}.role{background:#3b5642;color:#e5f3d7}.role:empty{display:none}.bet{background:#b4d967;color:#182c1c}.hand{margin-left:10px}
.cards{display:flex;gap:7px;align-items:center}.card,.card-slot{width:68px;height:94px;flex:none;border-radius:9px}.card{position:relative;display:flex;align-items:center;justify-content:center;background:#faf9f4;color:#18221b;border:2px solid #fff;box-shadow:0 4px 7px #0d241c80;font-family:Georgia,serif;font-style:normal}.card.red{color:#c73444}.card .corner{position:absolute;top:6px;left:7px;display:flex;flex-direction:column;align-items:center;font-size:18px;font-weight:800;line-height:.9}.card .corner .small-suit{font-size:15px;margin-top:3px}.card .big-suit{font-size:43px;line-height:1}.card .bottom-rank{position:absolute;right:7px;bottom:5px;font-size:17px;font-weight:800;transform:rotate(180deg)}.card.back{border-color:#f5f1de;background:repeating-linear-gradient(45deg,#a3c45e 0 7px,#31573b 7px 14px);box-shadow:inset 0 0 0 5px #31573b,inset 0 0 0 7px #c8e96d,0 4px 7px #0d241c80}.card.back:after{content:'♠';display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#f4f0dd;color:#31573b;font-size:22px}.card-slot{border:2px dashed #d1e6c277;background:#103c2b77}
.table-center{display:flex;flex-direction:column;align-items:center;gap:17px;align-self:center;margin:auto 0;text-align:center}.pot{display:flex;align-items:baseline;gap:7px;background:#102b20e6;border:1px solid #91b99766;border-radius:99px;padding:9px 18px;color:#c4d8c5;font-size:12px}.pot strong{font:800 21px 'DM Mono',monospace;color:#f6ffe0}.board-hint{color:#d0e0ca;font-size:12px;margin:0}
.action-panel{padding:22px 26px;margin-top:23px}.action-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px}.action-heading h2{font-size:23px;margin:4px 0 4px}.action-heading p:not(.eyebrow){font-size:13px;color:#b8cdbb;margin:0}.blind-note{font-size:12px;color:#aabcaa;white-space:nowrap}.blind-note strong{color:#e8f5d4}.action-row{display:grid;grid-template-columns:1fr 1.5fr;gap:10px}.action-row button{min-height:66px;border:0;border-radius:12px;font-size:16px;font-weight:800}.action-row button small{display:block;font-weight:400;font-size:11px;margin-top:4px}.fold{background:#29372f;color:#ebefe9}.fold:hover:not(:disabled){background:#394c3f}.call{background:#e8f1dd;color:#18271d}.call:hover:not(:disabled){background:#fff}
.raise-box{margin-top:13px;padding:16px;border:1px solid #405b45;background:#203328;border-radius:13px}.raise-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;gap:10px}.raise-top label{font-size:13px;font-weight:800}.raise-top span{font-size:11px;color:#b3cbb7}.raise-controls{display:flex;gap:9px}.raise-controls input{height:46px;min-width:0;flex:1;border:1px solid #adbfad;border-radius:9px;background:#f9f9f3;color:#17271a;padding:0 13px;font:800 18px 'DM Mono',monospace}.raise-controls button{min-width:160px}.presets{display:flex;gap:7px;margin-top:10px}.presets button{border:1px solid #4c6950;background:#2b4533;color:#e2f0da;border-radius:8px;padding:8px 13px;font-size:12px}.presets button:hover:not(:disabled){background:#426347}.raise-tip{font-size:11px;color:#b6cbb9;margin:11px 0 0}.raise-tip strong{color:#e8f2d8}.last-action{text-align:center;color:#aabfab;font-size:12px;margin:15px 0 0;min-height:18px}
@media(max-width:780px){#app{padding:18px 14px 30px}.overview{align-items:flex-start;flex-direction:column;gap:15px}.felt{padding:22px;min-height:480px;border-width:10px}.card,.card-slot{width:50px;height:70px}.card .corner{font-size:14px;top:4px;left:5px}.card .corner .small-suit{font-size:12px}.card .big-suit{font-size:32px}.card .bottom-rank{font-size:12px;right:5px}.card.back:after{width:22px;height:22px;font-size:16px}.cards{gap:4px}.hand{margin-left:0}.player{flex-wrap:wrap;max-width:250px}.player .hand{width:100%;margin-top:3px}.table-center{gap:11px}}
@media(max-width:520px){.topbar{align-items:flex-start}.topbar h1{font-size:30px}.topbar-actions{flex-direction:column;align-items:stretch}.topbar-actions button{font-size:11px;min-height:36px;padding:6px 9px}.overview{padding:15px}.overview-main strong{font-size:17px}.rounds span{padding:6px 7px;font-size:10px}.table-wrap{padding:0 5px}.felt{min-height:455px;padding:18px 13px;border-width:8px;border-radius:120px}.player{gap:6px;padding:7px 9px;max-width:180px}.avatar{width:32px;height:32px;font-size:10px}.player-info strong{font-size:12px}.player-info span{font-size:10px}.role,.bet{font-size:9px;padding:4px 6px}.card,.card-slot{width:45px;height:63px;border-radius:6px}.card .big-suit{font-size:29px}.board{gap:3px}.action-panel{padding:17px;margin-top:19px}.action-heading h2{font-size:20px}.blind-note{display:none}.raise-controls button{min-width:120px;padding:9px}.presets button{padding:8px 9px}.lobby{padding:29px}}

/* Keep the table and controls together within the viewport. */
#app{height:100dvh;padding:12px 18px 14px}
#table{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px}
.topbar,.overview,.last-action{margin:0}
.topbar h1{font-size:32px}
.overview{padding:10px 16px}
.overview-main strong{font-size:17px}
.game-area{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,330px);gap:12px;min-height:0}
.table-wrap{padding:0;min-height:0}
.felt{height:100%;min-height:0;padding:20px 28px;border-width:10px;border-radius:190px}
.action-panel{min-height:0;overflow:auto;margin:0;padding:15px;display:flex;flex-direction:column;justify-content:center}
.action-heading{margin-bottom:12px}
.action-heading h2{font-size:19px}
.action-row button{min-height:58px}
.raise-box{margin-top:11px;padding:12px}
.raise-controls button{min-width:120px;padding:8px}
.presets button{padding:7px 9px}
.last-action{min-height:16px}
.inline-error{margin:9px 0 0;color:#ffc3b7;font-size:12px;line-height:1.4}

/* Crisp card faces, printed borders, and a distinct woven back. */
.card,.card-slot{width:clamp(44px,5.3vw,64px);height:auto;aspect-ratio:5/7;border-radius:8px}
.card{isolation:isolate;background:linear-gradient(142deg,#fffefa 0%,#f6f4ed 55%,#e6e4db 100%);border:1px solid #fff;box-shadow:inset 0 0 0 3px #fffefa,inset 0 0 0 4px #d3d1c5,0 5px 11px #05211780;color:#202923}
.card::before{content:'';position:absolute;inset:6px;border:1px solid #d5d3c9;border-radius:3px;pointer-events:none}
.card.red{color:#c32b3c}
.card .corner{z-index:1;top:8px;left:9px;font-size:19px;letter-spacing:-.08em;line-height:.88}
.card .big-suit{font-size:36px;transform:translateY(3px);filter:drop-shadow(0 1px 0 #fff)}
.card .bottom-rank{z-index:1;right:8px;bottom:7px;font-size:16px}
.card.back{background:repeating-linear-gradient(45deg,#244733 0 3px,#83a95b 3px 6px,#244733 6px 9px);border:1px solid #f5efd7;box-shadow:inset 0 0 0 5px #f1e9cd,inset 0 0 0 7px #315642,inset 0 0 0 9px #d9eab3,0 5px 11px #05211780}
.card.back::before{inset:10px;border:1px solid #e8efce80;border-radius:4px}
.card.back::after{z-index:1;width:30px;height:30px;background:#f6f2dc;border:2px solid #56754a;color:#244733;font-size:20px}
.card-slot{border:1px dashed #b7dac09c;background:#103d2c65}
.felt{background:radial-gradient(ellipse at 50% 45%,#2e865a 0%,#1d6645 54%,#103e2b 100%);box-shadow:inset 0 0 0 2px #6da17b,inset 0 0 0 7px #143d2ca0,inset 0 0 65px #08271b,0 18px 35px #0007}

@media(max-width:800px){
  #app{padding:8px 10px;height:100dvh}
  #table{gap:6px}
  .topbar h1{font-size:27px}
  .topbar .eyebrow{display:none}
  .topbar-actions button{min-height:36px;padding:6px 10px;font-size:11px}
  .overview{padding:8px 11px;gap:7px}
  .overview-main strong{font-size:15px}
  .overview-main p{font-size:11px}
  .rounds span{padding:4px 6px;font-size:9px}
  .game-area{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:7px}
  .felt{padding:12px 16px;border-width:7px;border-radius:130px}
  .player{padding:5px 8px;gap:6px;max-width:220px}
  .player .hand{width:auto;margin-top:0}
  .table-center{gap:6px}
  .pot{padding:5px 12px}
  .pot strong{font-size:17px}
  .board-hint{font-size:10px}
  .card,.card-slot{width:clamp(40px,10.5vw,50px)}
  .card .corner{top:6px;left:6px;font-size:15px}
  .card .big-suit{font-size:26px;transform:translateY(2px)}
  .card .bottom-rank{right:5px;bottom:4px;font-size:12px}
  .card.back::after{width:22px;height:22px;font-size:16px}
  .action-panel{padding:10px 12px}
  .action-heading{margin-bottom:7px}
  .action-heading .eyebrow,.action-heading p:not(.eyebrow),.blind-note,.raise-tip{display:none}
  .action-heading h2{font-size:16px;margin:0}
  .action-row button{min-height:42px;font-size:14px}
  .action-row button small{display:none}
  .raise-box{padding:8px;margin-top:6px}
  .raise-top{margin-bottom:4px}
  .raise-top label,.raise-top span{font-size:11px}
  .raise-controls input{height:36px;font-size:15px}
  .raise-controls button{min-height:36px;min-width:115px;font-size:12px}
  .presets{margin-top:5px}
  .presets button{padding:5px 8px;font-size:10px}
  .last-action{font-size:10px}
}
@media(max-width:520px){.player{max-width:165px;flex-wrap:wrap}.player .hand{width:100%}.card,.card-slot{width:clamp(39px,10.5vw,45px)}.felt{padding:12px 11px}.lobby{margin:5vh auto 0}}
@media(max-height:620px){#app{height:auto;min-height:100dvh}#table{height:auto;min-height:calc(100dvh - 20px)}.game-area{grid-template-rows:minmax(260px,1fr) auto}.felt{min-height:260px}.action-panel{overflow:visible}}