:root{
  --gold:#f3c45a; --orange:#ff7a18; --line:rgba(243,196,90,.6); --panel:rgba(20,8,3,.82); --turn:#7bf06a;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{font-family:"Arial Narrow",Arial,"Helvetica Neue",sans-serif;color:#fff;background:#160600;overflow:hidden;}
.app{position:relative;width:100vw;height:100dvh;max-width:820px;margin:0 auto;display:flex;flex-direction:column;overflow:hidden;
  background:
    radial-gradient(120% 46% at 50% 46%, #c95a1c 0%, #7a2e0c 32%, transparent 64%),
    linear-gradient(180deg,#1a0800 0%,#3a1404 14%,#8a3410 42%,#e0791f 64%,#ff9a3a 82%,#ffb84a 100%);}
.app::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(60% 30% at 0% 60%,rgba(255,120,20,.5),transparent 70%),
    radial-gradient(60% 30% at 100% 60%,rgba(255,120,20,.5),transparent 70%),
    radial-gradient(80% 20% at 50% 100%,rgba(255,160,30,.55),transparent 70%);}

/* dealer video — full-width top, 16:9 (앱바 영역까지 확대), cover */
.stage{position:relative;z-index:5;width:100%;aspect-ratio:16/9;overflow:hidden;background:#0c0400;flex:0 0 auto;}
.dealer-embed{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100%,calc(100% * 16 / 9 * 9 / 16));height:max(100%,177.78%);border:0;}
/* 로고 오버레이 (좌상단, 흰 glow) */
.brand{font-family:"Arial Black",Impact,sans-serif;letter-spacing:1px;}
.brand.ov{position:absolute;top:7px;left:12px;z-index:7;font-size:19px;color:rgba(255,255,255,.92);
  text-shadow:0 0 10px rgba(255,255,255,.85),0 0 20px rgba(255,255,255,.5),0 2px 4px rgba(0,0,0,.7);pointer-events:none;}
.brand .z{font-size:23px;display:inline-block;transform:skewX(-8deg);
  text-shadow:0 0 12px #fff,0 0 22px rgba(255,200,120,.8);}
.brand .sub{font-size:9px;letter-spacing:4px;font-weight:400;opacity:.9;}
/* 아이디 + 골드아이콘 + 잔액 (우상단) */
.acct{font-size:13px;color:#f1e6d6;}
.acct.ov{position:absolute;top:7px;right:12px;z-index:7;text-align:right;text-shadow:0 1px 4px rgba(0,0,0,.85);pointer-events:none;}
.acct .id b{color:#fff;}
.acct .bal{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:1px;}
.acct .bal b{color:var(--gold);font-size:15px;}
.coin{display:inline-block;width:15px;height:15px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%,#ffe98a,#e0a52a 70%,#b8860b);
  border:1px solid #8a6508;box-shadow:0 0 5px rgba(255,210,90,.75);}
/* 턴/남은시간 = 로고 옆 텍스트(흰 glow), 뱃지 없음 */
.statusbar{position:absolute;top:13px;left:152px;z-index:8;transform:none;white-space:nowrap;text-align:left;
  background:none;border:none;padding:0;box-shadow:none;color:#fff;font-size:12px;font-weight:700;
  text-shadow:0 0 8px rgba(255,255,255,.85),0 0 16px rgba(255,255,255,.5),0 1px 3px #000;}
.statusbar:empty{display:none;}

/* table */
.tablewrap{position:relative;z-index:4;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:30px 4px 8px;}
.table-img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:100%;width:auto;max-width:100%;
  object-fit:contain;z-index:1;filter:drop-shadow(0 12px 24px rgba(0,0,0,.5));pointer-events:none;}
/* felt = positioning layer aligned to the table image bounds */
.felt{position:relative;z-index:2;height:100%;aspect-ratio:3/4;max-width:100%;}
/* 플랍: 6시 히어로 바로 위, 2배 크게 */
.flop-label{position:absolute;left:50%;top:60%;transform:translateX(-50%);z-index:6;
  background:rgba(20,8,3,.6);border:1px solid var(--line);border-radius:999px;padding:2px 12px;font-size:11px;font-weight:700;color:#ffe7a8;letter-spacing:1px;}
.board{position:absolute;left:50%;top:71%;transform:translate(-50%,-50%);z-index:7;display:flex;gap:4px;justify-content:center;width:100%;}
.board img{width:58px;height:82px;border-radius:6px;box-shadow:0 4px 9px rgba(0,0,0,.55);object-fit:cover;}

/* seats around the oval */
.seat{position:absolute;z-index:8;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;width:72px;}
.seat .av-wrap{position:relative;display:flex;flex-direction:column;align-items:center;}
.timer{position:absolute;top:-3px;right:-12px;width:22px;height:22px;border-radius:50%;z-index:4;
  background:rgba(0,0,0,.82);border:2px solid var(--turn);color:#eaffea;font-size:11px;font-weight:800;
  display:grid;place-items:center;box-shadow:0 0 8px var(--turn);}
.timer.urgent{border-color:#ff4a3a;color:#ffb0a0;box-shadow:0 0 10px #ff4a3a;animation:tpulse .5s infinite alternate;}
@keyframes tpulse{from{transform:scale(1)}to{transform:scale(1.18)}}
.avatar{width:42px;height:42px;border-radius:50%;border:2px solid var(--gold);overflow:hidden;background:#2c3a4d;
  display:grid;place-items:center;box-shadow:0 2px 7px rgba(0,0,0,.55);}
.avatar .face{width:100%;height:100%;object-fit:cover;object-position:center 22%;}
.avatar svg{width:27px;height:27px;fill:rgba(255,255,255,.85);margin-top:6px;}
.avatar.turn{box-shadow:0 0 0 3px var(--turn),0 0 14px var(--turn);}
.seat .hole{display:flex;gap:2px;margin-top:-5px;}
.seat .hole img{width:22px;height:31px;border-radius:3px;box-shadow:0 2px 4px rgba(0,0,0,.5);object-fit:cover;}
.betchip{margin-top:3px;background:rgba(10,4,2,.85);border:1px solid var(--line);border-radius:7px;padding:1px 7px;font-size:11px;font-weight:700;color:#ffe7a8;white-space:nowrap;}
.betchip:empty{display:none;}
.seat.folded{opacity:.42;filter:grayscale(.6);}
.seat.empty .avatar{border-style:dashed;opacity:.5;}
.seat.sit{cursor:pointer;} .seat.sit .avatar{animation:sitpulse 1.6s ease-in-out infinite;}
.seat.sit:hover .avatar{box-shadow:0 0 0 3px var(--gold),0 0 14px var(--gold);}
@keyframes sitpulse{0%,100%{opacity:.55}50%{opacity:1}}

/* hero seat (6 o'clock) — bigger */
.seat.hero{width:150px;z-index:9;}
.seat.hero .avatar{width:62px;height:62px;border-width:3px;}
.seat.hero .hole{margin-top:-7px;gap:4px;}
.seat.hero .hole img{width:42px;height:60px;}
.seat.hero .nm{font-size:13px;color:#f0e2c8;}
.seat.hero .bal{font-size:15px;font-weight:800;color:var(--gold);}
.seat.hero .plate{margin-top:2px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:2px 12px;}

.status-pill{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:12;font-size:10px;color:#ffe7a8;
  background:rgba(0,0,0,.5);border:1px solid var(--line);border-radius:999px;padding:2px 10px;}

/* 1행 컨트롤: 칩(좌 40%) + 배팅버튼(우 60%) */
.controls{position:relative;z-index:10;display:flex;align-items:stretch;gap:8px;
  padding:6px 10px calc(8px + env(safe-area-inset-bottom));flex:0 0 auto;}
.chipsel{flex:0 0 40%;display:flex;align-items:center;gap:3px;}
.chip-nav{flex:0 0 auto;width:20px;height:50px;border-radius:8px;border:1px solid var(--line);background:rgba(30,10,2,.7);
  color:var(--gold);font-size:15px;font-weight:800;cursor:pointer;padding:0;}
.chips{flex:1;display:flex;gap:4px;justify-content:space-between;overflow:hidden;}
.chip{width:100%;max-width:38px;aspect-ratio:1;border-radius:50%;cursor:pointer;flex:1 1 0;display:grid;place-items:center;position:relative;
  background:none;border:none;padding:0;transition:transform .1s;}
.chip img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));}
.chip:active{transform:scale(.92);}
.chip.sel{transform:translateY(-3px);} .chip.sel::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--gold);box-shadow:0 0 8px var(--gold);}
.chip .lab{position:absolute;bottom:-3px;font-size:9px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000;}

.actions{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.btn{height:50px;border-radius:11px;border:none;color:#fff;font-family:"Arial Black",Impact,sans-serif;font-size:14px;
  box-shadow:0 4px 9px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25);cursor:pointer;transition:transform .06s,filter .12s;}
.btn:active{transform:translateY(2px);filter:brightness(1.12);}
.btn:disabled{opacity:.45;filter:grayscale(.4);cursor:default;}
.btn small{display:block;font-size:8px;font-weight:600;opacity:.9;font-family:Arial;}
.btn.fold{background:linear-gradient(180deg,#f6a23a,#d97a16);}
.btn.call{background:linear-gradient(180deg,#f08a2a,#c85e12);}
.btn.raise{background:linear-gradient(180deg,#f0631c,#b8390c);}
.btn.allin{background:linear-gradient(180deg,#e23b2a,#a11208);}

/* ================= 가로(landscape): 영상 배경 cover + arc 좌석 ================= */
@media (orientation: landscape){
  .app{background:#000;}
  .app::before{display:none;}
  /* 딜러 영상 = 전체 배경, cover(16:9) */
  .stage{position:fixed;inset:0;z-index:0;width:100%;height:100%;min-height:0;aspect-ratio:auto;}
  .dealer-embed{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:max(100vw,177.78vh);height:max(100vh,56.25vw);}
  .brand.ov{top:6px;left:14px;} .acct.ov{top:6px;right:14px;}
  .table-img{display:none;}
  .tablewrap{position:fixed;inset:0;z-index:2;padding:0;}
  .felt{height:100%;width:100%;max-width:none;aspect-ratio:auto;}
  /* 플랍은 세로와 동일하게 화면 하단(히어로 쪽). 위치는 base(.board top:71%) 상속 */
  /* hero(1번/7시) 카드 크게, 나머지는 작게 유지 */
  .seat.hero{width:120px;}
  .seat.hero .hole img{width:50px;height:70px;}
  /* 컨트롤(1행) 하단 오버레이 */
  .controls{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:6;
    width:min(98vw,760px);background:linear-gradient(0deg,rgba(0,0,0,.5),transparent);
    padding:6px 10px calc(6px + env(safe-area-inset-bottom));}
  .chipsel{flex:0 0 38%;} .actions .btn{height:46px;}
}

/* login */
.login{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(10,4,2,.92);}
.login .card{background:#1a0a05;border:1px solid var(--line);border-radius:16px;padding:26px 24px;width:300px;}
.login h2{font-size:22px;margin-bottom:4px;} .login p{font-size:12px;color:#b89;margin-bottom:16px;}
.login label{display:block;font-size:11px;color:#caa;letter-spacing:1px;margin:10px 0 4px;}
.login input{width:100%;height:42px;border-radius:8px;border:1px solid var(--line);background:#2a0d04;color:#fff;padding:0 12px;font-size:15px;}
.login button{width:100%;height:46px;margin-top:18px;border-radius:10px;border:2px solid var(--gold);background:linear-gradient(180deg,#f0631c,#b8390c);color:#fff;font-weight:800;font-size:16px;cursor:pointer;}
.login .err{color:#ff8a6a;font-size:12px;margin-top:10px;min-height:16px;}
.hidden{display:none!important;}