/* 지구 한 바퀴 — 검정 펠트 + 금테, 명소 사진 칸, 가운데 3D 지구·주사위 */
:root{
  --bg:#0b0b0e; --felt:#121217; --navy:#0f1736; --navy2:#16224d;
  --gold1:#ffe08a; --gold2:#d9a637; --gold3:#8c6416;
  --gold:linear-gradient(180deg,var(--gold1) 0%,var(--gold2) 55%,var(--gold3) 100%);
  --text:#fff8e6; --muted:#d6cdb4; --dim:#a99f86;
  --price:#86c540; --price-ink:#10140a;
  --red:#d9302f; --ok:#3fbf6a; --bad:#ff6b5e;
  --title:"Black Han Sans","Do Hyeon",system-ui,sans-serif;
  --label:"Do Hyeon","Malgun Gothic",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:linear-gradient(180deg,#15151c 0%,var(--bg) 420px);
  background-attachment:fixed;color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  -webkit-tap-highlight-color:transparent;overflow-x:hidden;
}
button{
  font-family:var(--label);font-size:17px;cursor:pointer;border:1.5px solid var(--gold3);border-radius:10px;
  padding:9px 15px;background:var(--gold);color:#1b1404;box-shadow:0 3px 0 #5a3f0b,0 6px 14px rgba(0,0,0,.45);
  transition:transform .08s,box-shadow .08s;
}
button:active{transform:translateY(2px);box-shadow:0 1px 0 #5a3f0b,0 3px 8px rgba(0,0,0,.45)}
button:disabled{opacity:.4;cursor:default;transform:none}
button.red{background:linear-gradient(180deg,#ff5c4d,#c4211c 60%,#8d1310);color:#fff;border-color:#6e0d0b;box-shadow:0 3px 0 #5c0b09,0 6px 14px rgba(0,0,0,.45)}
button.blue{background:linear-gradient(180deg,#4d8dff,#1d4fc4 60%,#123282);color:#fff;border-color:#0d2461;box-shadow:0 3px 0 #0b1d4f,0 6px 14px rgba(0,0,0,.45)}
button.ghost{background:#1b1b24;color:var(--text);border-color:#4a432f;box-shadow:0 3px 0 #000}
button.big{font-size:21px;padding:12px 22px}
button.mini{font-size:13px;padding:4px 9px;border-radius:7px;box-shadow:0 2px 0 #000}

/* 위 띠 */
.top{display:flex;justify-content:space-between;align-items:center;padding:10px 16px}
.brand{font-family:var(--title);font-size:26px;display:flex;gap:10px;align-items:center;letter-spacing:1px;
  background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #000)}
.brand-mark{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#7fd0ff,#1a5fc9 55%,#0a2463);
  box-shadow:0 0 0 2px var(--gold2),0 0 12px rgba(120,190,255,.6)}
.top-right{display:flex;gap:8px;align-items:center}
.pill{font-family:var(--label);background:var(--gold);color:#1b1404;padding:3px 11px;border-radius:99px;font-size:15px}
.icon-btn{background:#1b1b24;color:var(--text);border-color:#4a432f;box-shadow:none;padding:5px 10px;font-size:16px}
.conn{width:11px;height:11px;border-radius:50%;background:#e74c3c;box-shadow:0 0 0 2px #2a2a33}
.conn.on{background:#3ad16b;box-shadow:0 0 0 2px #2a2a33,0 0 8px #3ad16b}

/* 배치 */
.layout{display:flex;gap:18px;padding:0 16px 24px;align-items:flex-start;justify-content:center}
.board-wrap{width:min(calc(100vw - 410px),calc(100vh - 76px));min-width:340px}
.side{width:360px;flex:none;display:flex;flex-direction:column;gap:12px}
@media (max-width:920px){
  .layout{flex-direction:column;align-items:stretch;padding:0 6px 28px}
  .board-wrap{width:100%;max-width:720px;min-width:0;margin:0 auto}
  .side{width:100%;max-width:720px;margin:0 auto}
  .brand{font-size:19px;gap:7px}
  .brand-mark{width:19px;height:19px}
  .top{padding:8px 10px}
  .pill{font-size:13px;padding:2px 8px}
}
.brand,.pill{white-space:nowrap}

/* 판 */
.board-wrap{overflow:hidden;padding:7px;border-radius:14px}
.board{transform-origin:0 0;transition:transform .55s cubic-bezier(.3,.8,.3,1);will-change:transform;
  --u:4px;position:relative;display:grid;
  grid-template-columns:1.4fr repeat(7,1fr) 1.4fr;grid-template-rows:1.4fr repeat(7,1fr) 1.4fr;
  aspect-ratio:1/1;width:100%;gap:calc(var(--u)*.45);padding:calc(var(--u)*.9);
  background:linear-gradient(#141419,#0e0e12);border-radius:calc(var(--u)*1.6);
  box-shadow:0 0 0 calc(var(--u)*.35) var(--gold2),0 0 0 calc(var(--u)*.7) #000,0 0 0 calc(var(--u)*.95) var(--gold3),0 18px 50px rgba(0,0,0,.7);
}
.cell{
  position:relative;overflow:hidden;cursor:pointer;user-select:none;min-width:0;min-height:0;
  display:flex;flex-direction:column;background:var(--navy);border-radius:calc(var(--u)*.7);
  box-shadow:inset 0 0 0 calc(var(--u)*.28) var(--gold2),inset 0 0 0 calc(var(--u)*.5) rgba(0,0,0,.55);
}
.cell .ttl{flex:none;height:calc(var(--u)*2.7);display:flex;align-items:center;justify-content:center;padding:0 calc(var(--u)*.3);
  font-family:var(--label);color:#fff;font-size:calc(var(--u)*7.2/var(--len));white-space:nowrap;letter-spacing:-.03em;
  text-shadow:0 1px 1px rgba(0,0,0,.8);border-bottom:calc(var(--u)*.22) solid var(--gold2);margin:calc(var(--u)*.28) calc(var(--u)*.28) 0}
.cell .ph{flex:1;min-height:0;background-size:cover;background-position:center;margin:0 calc(var(--u)*.28);position:relative}
.cell .pr{flex:none;height:calc(var(--u)*2.4);display:flex;align-items:center;justify-content:center;margin:0 calc(var(--u)*.28) calc(var(--u)*.28);
  font-family:var(--title);font-size:calc(var(--u)*1.75);background:var(--price);color:var(--price-ink);border-top:calc(var(--u)*.22) solid var(--gold2);white-space:nowrap}
.cell .pr:empty{display:none}
.cell.owned .pr{background:var(--own);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.7)}
.cell .bld{position:absolute;left:4%;bottom:3%;height:46%;display:flex;align-items:flex-end;gap:2%}
.cell .bld img{height:100%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.7))}
.cell .bld img.pop{animation:pop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:translateY(60%) scale(.2);opacity:0}100%{transform:none;opacity:1}}
.cell .expo{display:none;position:absolute;right:4%;top:4%;font-size:calc(var(--u)*2.2);filter:drop-shadow(0 1px 2px #000)}
.cell.expo-on .expo{display:block;animation:spark 1.6s ease-in-out infinite}
@keyframes spark{50%{transform:scale(1.25) rotate(8deg)}}
.cell.owned::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 calc(var(--u)*.45) var(--own);pointer-events:none}
.cell.flash::before{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(circle,rgba(255,240,180,.85),transparent 70%);animation:flash .9s ease-out forwards;pointer-events:none}
@keyframes flash{from{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.4)}}
/* 특수 칸 */
.cell.k-card .ttl,.cell.k-tax .ttl,.cell.k-ride .ttl{background:#0b0b0e;color:var(--gold1)}
.cell.corner .ttl{height:calc(var(--u)*3.6);font-family:var(--title);font-size:calc(var(--u)*2.9);background:linear-gradient(#1a2550,#0f1736);color:var(--gold1)}
.cell.k-start{background:radial-gradient(circle at 50% 60%,#1c2a63,#0b1230)}
.cell.k-start .ph{display:flex;align-items:center;justify-content:center;background:none}
/* 말은 출발(오른쪽 아래)에서 왼쪽으로 돌므로 화살표도 왼쪽 */
.start-arrow{width:62%;aspect-ratio:1.5;background:var(--gold);clip-path:polygon(100% 30%,45% 30%,45% 0,0 50%,45% 100%,45% 70%,100% 70%);
  filter:drop-shadow(0 2px 0 #000);animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(-12%)}}
.cell.k-start .pr{background:var(--gold);color:#1b1404}
.cell,.center{transition:filter .45s}
.board.focusing .cell:not(.focus){filter:brightness(.42) saturate(.6)}
.board.focusing .center{filter:brightness(.55)}
.board-wrap{position:relative}
.board-wrap > .toast{position:absolute;left:50%;top:40%;transform:translate(-50%,20%);z-index:20;max-width:78%;text-align:center;pointer-events:none;
  font-size:clamp(13px,calc(var(--bu,4px)*2.6),20px);padding:7px 16px;box-shadow:0 8px 24px rgba(0,0,0,.6)}
.board-wrap > .toast.show{transform:translate(-50%,0)}
.cell.focus{z-index:3;box-shadow:inset 0 0 0 calc(var(--u)*.5) var(--gold1),0 0 0 calc(var(--u)*.3) #000,0 calc(var(--u)*1.2) calc(var(--u)*3) rgba(0,0,0,.8)}
.cell.pickable{animation:pick 1s ease-in-out infinite}
@keyframes pick{50%{box-shadow:inset 0 0 0 calc(var(--u)*.6) var(--gold1),0 0 calc(var(--u)*2) var(--gold1)}}
.cell.sel{z-index:3;box-shadow:inset 0 0 0 calc(var(--u)*.8) #fff,0 0 calc(var(--u)*2.5) var(--gold1)}

/* 판 가운데 */
.center{
  grid-row:2/9;grid-column:2/9;position:relative;overflow:hidden;border-radius:calc(var(--u)*1.2);
  background:radial-gradient(circle at 50% 45%,#1a2148 0%,#0b0f25 55%,#06070d 100%);
  box-shadow:inset 0 0 0 calc(var(--u)*.3) var(--gold3),inset 0 0 calc(var(--u)*6) #000;
}
.center canvas.three{position:absolute;inset:0;width:100%;height:100%;display:block}
.c-hud{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(var(--u)*2.2) calc(var(--u)*2);pointer-events:none;text-align:center}
.c-hud > *{pointer-events:auto}
.c-title{font-family:var(--title);font-size:calc(var(--u)*6);line-height:1;letter-spacing:.04em;
  background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 calc(var(--u)*.35) 0 #000)}
.c-sub{font-family:var(--label);font-size:calc(var(--u)*2);color:var(--muted);margin-top:calc(var(--u)*.6);letter-spacing:.2em}
.c-mid{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1.2)}
.turn-banner{font-family:var(--label);font-size:calc(var(--u)*2.8);display:flex;align-items:center;gap:calc(var(--u)*1);color:var(--text);
  background:rgba(8,10,24,.78);border:calc(var(--u)*.25) solid var(--gold2);border-radius:99px;padding:calc(var(--u)*.5) calc(var(--u)*2.2) calc(var(--u)*.5) calc(var(--u)*.6)}
.turn-banner:empty{display:none}
.turn-banner.enter{animation:slidein .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes slidein{from{transform:translateY(-60%) scale(.8);opacity:0}}
.turn-banner .chip{width:calc(var(--u)*4.6);height:calc(var(--u)*4.6);font-size:calc(var(--u)*2.7)}
.dice2d{display:flex;gap:calc(var(--u)*2.5)}
.has3d .dice2d{display:none}
.die{width:calc(var(--u)*9);height:calc(var(--u)*9);background:linear-gradient(145deg,#3d7bff,#1335a8);border-radius:calc(var(--u)*1.8);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:calc(var(--u)*1.2);box-shadow:0 0 0 calc(var(--u)*.25) var(--gold2),0 calc(var(--u)*.6) 0 #0a1a55}
.die i{display:block;margin:auto;width:calc(var(--u)*1.8);height:calc(var(--u)*1.8);border-radius:50%}
.die i.on{background:#fff}
.die.rolling{animation:shake .14s linear infinite}
@keyframes shake{25%{transform:rotate(-14deg) translateY(-3px)}75%{transform:rotate(14deg) translateY(2px)}}
.toast{font-family:var(--label);max-width:94%;font-size:calc(var(--u)*2.5);line-height:1.3;color:var(--text);
  padding:calc(var(--u)*.9) calc(var(--u)*2);border:calc(var(--u)*.22) solid var(--gold3);border-radius:calc(var(--u)*1.2);
  background:rgba(8,10,24,.82);opacity:0;transition:opacity .2s,transform .2s;transform:translateY(20%)}
.toast.show{opacity:1;transform:none}
.toast.k-pay,.toast.k-bad{border-color:#ff6b5e}
.toast.k-gain{border-color:#3fbf6a}
.toast.k-card{border-color:#b48cff}
.toast.k-buy,.toast.k-win{border-color:var(--gold1)}
.center-act{min-height:calc(var(--u)*7)}
.center-act button{font-size:calc(var(--u)*3);padding:calc(var(--u)*1.1) calc(var(--u)*3.2);animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.06)}}

/* 말 */
.tokens{position:absolute;inset:0;pointer-events:none}
.token{position:absolute;left:0;top:0;transition:transform .17s ease;z-index:5}
.token .tk{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;box-shadow:0 3px 0 rgba(0,0,0,.6),0 0 0 1px #000}
.token.noanim{transition:none}
/* 우주선 말: 머리 방향 회전(.ship), 꼬리 불꽃(.flame, 움직일 때 .thrust), 동물 표시(.badge) */
.token .tk{border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;position:relative}
.token .ship{position:absolute;inset:0;transition:transform .25s ease}
.token .ship img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(0,0,0,.75))}
.token .flame{position:absolute;left:50%;top:80%;width:34%;height:62%;margin-left:-17%;z-index:0;transform-origin:50% 0;opacity:0;transform:scaleY(.2);
  border-radius:45% 45% 50% 50%/25% 25% 75% 75%;background:radial-gradient(ellipse at 50% 18%,#fffbe0 0 16%,#ffc23a 36%,#ff6a1a 62%,rgba(255,40,10,0) 76%);
  transition:opacity .15s,transform .15s;filter:blur(.4px)}
.token.thrust .flame{opacity:1;animation:flame .08s ease-in-out infinite alternate}
@keyframes flame{from{transform:scaleY(.8) scaleX(.88)}to{transform:scaleY(1.3) scaleX(1.06)}}
.token .badge{position:absolute;z-index:2;right:-14%;top:-10%;width:46%;height:46%;border-radius:50%;background:var(--pc);border:1.5px solid #fff;
  display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.6)}
.token.active .ship img{filter:drop-shadow(0 0 4px var(--gold1)) drop-shadow(0 3px 2px rgba(0,0,0,.75))}
.token.flying{position:absolute;z-index:46}
.token.flying .ship{transition:none}
.token.flying .flame{height:90%}
.qr-card{text-align:center}
.qr-card #qr3{display:flex;justify-content:center;margin:6px 0}
.qr-card #qr3 img,.qr-card #qr3 canvas{border:6px solid #fff;border-radius:4px}
.qr-card .addr{display:block;font-family:var(--label);font-size:14px;color:var(--gold1);word-break:break-all}
.tv .qr-card #qr3 img,.tv .qr-card #qr3 canvas{width:180px;height:180px}
.token.active .tk{box-shadow:0 0 0 2px var(--gold1),0 0 12px var(--gold1),0 3px 0 rgba(0,0,0,.6)}
.token.out{display:none}

/* 연출 */
.fx{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.float-num{position:absolute;font-family:var(--title);font-size:22px;white-space:nowrap;transform:translate(-50%,-50%);text-shadow:0 2px 0 #000,0 0 8px rgba(0,0,0,.8)}
.float-num.plus{color:#7dff9a}.float-num.minus{color:#ff8a7d}
.coin{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#e2ae35 55%,#8c6416);box-shadow:0 0 6px rgba(255,210,90,.8)}
.confetti{position:absolute;width:9px;height:14px;top:-20px}
.stamp{position:absolute;font-family:var(--title);font-size:26px;padding:4px 14px;border:4px solid;border-radius:8px;white-space:nowrap;
  background:rgba(8,8,12,.55);text-shadow:0 2px 0 #000;letter-spacing:.08em}
.pop-text{position:absolute;font-family:var(--title);font-size:30px;color:#fff8e6;white-space:nowrap;text-shadow:0 3px 0 #000,0 0 2px #000}
.pop-text.big{font-size:64px}
.pop-text.gold{color:var(--gold1)}
.pop-text.bad{color:#ff8a7d;font-size:34px}
.victory{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);animation:vin .5s ease-out;pointer-events:none}
.victory.out{opacity:0;transition:opacity .5s}
.victory .rays{position:absolute;width:160vmax;height:160vmax;background:repeating-conic-gradient(from 0deg,rgba(255,224,138,.16) 0 8deg,transparent 8deg 20deg);animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes vin{from{opacity:0}}
.vbox{position:relative;text-align:center;animation:vpop .8s cubic-bezier(.2,1.5,.4,1)}
@keyframes vpop{from{transform:scale(.3);opacity:0}}
.vchip{width:120px;height:120px;margin:0 auto;border-radius:50%;border:5px solid #fff;display:flex;align-items:center;justify-content:center;font-size:66px;box-shadow:0 10px 30px rgba(0,0,0,.7)}
.vt{font-family:var(--title);font-size:72px;line-height:1;margin-top:14px;color:var(--gold1);text-shadow:0 4px 0 #000}
.vn{font-family:var(--label);font-size:30px;color:#fff8e6;margin-top:6px;text-shadow:0 2px 0 #000}
.cardflip{position:fixed;left:50%;top:50%;width:min(300px,72vw);aspect-ratio:3/4;z-index:45;perspective:1000px;pointer-events:none;transform:translate(-50%,-50%)}
.cardflip .in{position:absolute;inset:0;transform-style:preserve-3d;animation:flip 1.9s cubic-bezier(.3,1.2,.4,1) forwards}
.cardflip .f,.cardflip .b{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 0 0 3px var(--gold2),0 20px 50px rgba(0,0,0,.7)}
.cardflip .b{background:center/cover url(art/special/card.jpg)}
.cardflip .f{transform:rotateY(180deg);background:linear-gradient(160deg,#1d2a5e,#0b1230);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;text-align:center;gap:14px}
.cardflip .f .ct{font-family:var(--title);font-size:22px;color:var(--gold1);letter-spacing:.1em}
.cardflip .f .cx{font-family:var(--label);font-size:23px;color:var(--text);line-height:1.4}
@keyframes flip{0%{transform:scale(.3) rotateY(0) rotateZ(-20deg);opacity:0}18%{transform:scale(1) rotateY(0) rotateZ(0);opacity:1}45%{transform:rotateY(180deg)}85%{transform:rotateY(180deg);opacity:1}100%{transform:rotateY(180deg) scale(.9);opacity:0}}

/* 오른쪽 */
.card{background:linear-gradient(180deg,#171a2c,#10121e);border:1.5px solid var(--gold3);border-radius:14px;padding:14px;box-shadow:0 10px 28px rgba(0,0,0,.5)}
.card h3{margin:0 0 8px;font-family:var(--label);font-size:18px;font-weight:400;color:var(--gold1)}
.action{min-height:90px}
.action .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.action p{margin:10px 0 0;line-height:1.5}
.sub{color:var(--muted);font-size:13px}
.me-line,.wait{display:flex;align-items:center;gap:8px;font-family:var(--label);font-size:19px}
.chip{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-size:18px;border:2px solid #fff;flex:none}
.money{font-family:var(--title);display:inline-flex;align-items:center;gap:4px;color:#1b1404;background:var(--gold);border-radius:5px;padding:2px 8px;font-size:14px}
.players{display:flex;flex-direction:column;gap:9px}
.pcard{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#171a2c,#10121e);border:1.5px solid #3a3424;border-radius:12px;padding:9px 11px}
.pcard.cur{border-color:var(--gold1);box-shadow:0 0 0 1px var(--gold1),0 0 16px rgba(255,224,138,.25)}
.pcard.out{opacity:.45}
.pcard.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.04)}}
.pinfo{flex:1;min-width:0}
.pname{font-family:var(--label);font-size:18px}
.pmoney{font-size:14px;margin-top:3px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.me{background:var(--red);color:#fff;border-radius:5px;padding:0 5px;font-size:12px;font-family:var(--label)}
.tag{background:#262a3e;border:1px solid #4a432f;border-radius:5px;padding:0 5px;font-size:12px;font-family:var(--label);color:var(--text)}
.tag.loan{background:#13234d;border-color:#3d6bd6;color:#cfe0ff}
.action button small{font-size:13px;opacity:.9}
.repay{margin-top:10px;background:#0b0d17;border:1px solid #2c3c6e;border-radius:10px;padding:12px}
.repay input[type=range]{width:100%;accent-color:#4d8dff}
.repay-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.repay-val{margin-left:auto;font-family:var(--title);font-size:22px;color:var(--gold1)}
.rounds{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.rounds button.mini{font-size:15px;padding:6px 12px}
.rounds-in{font-family:var(--label);font-size:15px;color:var(--muted);display:flex;align-items:center;gap:6px}
.rounds-in input{width:64px;font-family:var(--label);font-size:16px;padding:5px 8px;border-radius:8px;border:1.5px solid var(--gold3);background:#0b0d17;color:var(--text)}
.tag.bad{background:#3a1616;color:var(--bad);border-color:#6b2a24}
.log-card{max-height:280px;overflow:auto}
.log{list-style:none;margin:0;padding:0;font-size:13.5px}
.log li{padding:5px 0;border-bottom:1px solid #2a2a36;color:var(--text)}
.log li span{color:var(--dim);margin-right:6px;font-size:11px}

/* 대기실·결과 */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50;overflow:auto}
.hidden{display:none!important}
.ov-card{background:linear-gradient(180deg,#191c30,#0d0f1a);border:2px solid var(--gold2);border-radius:18px;padding:22px;width:min(470px,100%);
  box-shadow:0 0 0 5px #000,0 0 0 6px var(--gold3),0 30px 70px rgba(0,0,0,.7);max-height:calc(100vh - 32px);overflow:auto}
.ov-title{font-family:var(--title);font-size:42px;text-align:center;line-height:1.05;margin:4px 0 6px;
  background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #000)}
.ov-sub{text-align:center;color:var(--muted);margin:6px 0 14px;font-size:14px;line-height:1.5}
.ov-card h4{margin:16px 0 8px;font-family:var(--label);font-size:19px;font-weight:400;color:var(--gold1)}
.lobby-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.lobby-list li{display:flex;align-items:center;gap:8px;background:#141726;border:1px solid #3a3424;border-radius:10px;padding:6px 10px;font-family:var(--label);font-size:18px}
.lobby-list li .grow{flex:1}
.lobby-list .empty{color:var(--dim);border-style:dashed;font-size:15px}
.x{background:transparent;border:0;box-shadow:none;padding:2px 8px;color:var(--muted);font-size:18px}
.join input{width:100%;font-family:var(--label);font-size:20px;padding:9px 12px;border-radius:10px;border:1.5px solid var(--gold3);background:#0b0d17;color:var(--text)}
.join input::placeholder{color:var(--dim)}
.emojis{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
.emojis button{background:#1b1b24;font-size:24px;padding:4px 8px;border-color:#4a432f;box-shadow:0 2px 0 #000}
.emojis button.on{background:var(--gold);border-color:var(--gold1)}
.emojis button:disabled{opacity:.25}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.row label{font-family:var(--label);font-size:16px}
select{font-family:var(--label);font-size:16px;padding:6px 8px;border-radius:8px;border:1.5px solid var(--gold3);background:#0b0d17;color:var(--text)}
.join-addr{margin-top:18px;padding:12px;background:#0b0d17;border:1px solid var(--gold3);border-radius:12px;text-align:center;font-size:14px;color:var(--muted)}
.join-addr b{font-family:var(--label);font-size:22px;font-weight:400;display:block;margin:4px 0;user-select:all;word-break:break-all;color:var(--gold1)}
#qr,#qr2{display:flex;justify-content:center;margin:8px 0}
.join-addr .addr{display:block;font-family:var(--label);font-size:16px;color:var(--gold1);word-break:break-all;margin-bottom:4px}
#qr img,#qr canvas,#qr2 img,#qr2 canvas{border:6px solid #fff;border-radius:4px}
.ov-foot{display:flex;justify-content:space-between;gap:8px;margin-top:16px;flex-wrap:wrap}
.rank{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:8px}
.rank li{display:flex;align-items:center;gap:10px;background:#141726;border:1px solid #3a3424;border-radius:10px;padding:8px 12px;font-family:var(--label);font-size:19px}
.rank li:first-child{border-color:var(--gold1);box-shadow:0 0 14px rgba(255,224,138,.3)}
.rank .grow{flex:1}

/* 칸 설명·메뉴 */
.sheet{position:fixed;inset:0;z-index:60;display:flex;justify-content:center;align-items:flex-end;padding:12px;background:rgba(0,0,0,.5)}
.sheet-card{background:linear-gradient(180deg,#191c30,#0d0f1a);border:2px solid var(--gold2);border-radius:16px;padding:18px;width:min(480px,100%);max-height:82vh;overflow:auto;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.7)}
.sheet-card .x{position:absolute;right:6px;top:6px;font-size:22px}
.sheet-card h3{font-family:var(--title);font-size:28px;font-weight:400;margin:4px 0;color:var(--gold1)}
.sh-img{width:100%;aspect-ratio:16/10;background-size:cover;background-position:center;border-radius:10px;box-shadow:0 0 0 2px var(--gold2)}
.sh-band{height:10px;border-radius:4px;margin:8px 0 10px}
table.tolls{width:100%;border-collapse:collapse;margin-top:8px;font-size:15px}
table.tolls td{padding:6px;border-bottom:1px solid #2a2a36}
table.tolls td img{height:20px;vertical-align:middle;margin-right:4px}
table.tolls tr.now td{background:rgba(255,224,138,.14);color:var(--gold1)}
.menu-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.rules p,.rules li{line-height:1.6;font-size:14.5px}
.rules h4{margin:14px 0 4px;font-family:var(--label);font-size:18px;font-weight:400;color:var(--gold1)}
#flash{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#000;border:1px solid var(--gold2);color:var(--text);padding:10px 16px;border-radius:10px;z-index:80;
  opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw;font-family:var(--label);font-size:17px}
#flash.show{opacity:.95}
/* TV 화면 (?tv): 판은 화면 높이 가득, 오른쪽에 큰 상황판·참가자, 버튼 없음 */
body.tv{overflow:hidden;cursor:none}
.tv .top{padding:8px 24px}
.tv .top .icon-btn{display:none}
.tv .layout{height:calc(100vh - 54px);padding:0 24px 16px;gap:26px;align-items:stretch}
.tv .board-wrap{width:min(calc(100vh - 70px),calc(100vw - 520px));min-width:0}
.tv .side{width:440px;gap:14px}
.tv .action{min-height:0;padding:18px}
.tv-now{display:flex;align-items:center;gap:14px}
.tv-now .chip{width:58px;height:58px;font-size:32px}
.tv-who{font-family:var(--title);font-size:30px;color:var(--gold1)}
.tv-doing{font-family:var(--label);font-size:21px;margin-top:2px}
.tv .pcard{padding:14px 16px}
.tv .pcard .chip{width:46px;height:46px;font-size:26px}
.tv .pname{font-size:24px}
.tv .pmoney{font-size:17px}
.tv .money{font-size:19px;padding:2px 10px}
.tv .pcard button,.tv .me{display:none}
.tv .log-card{flex:1;min-height:0;max-height:none;font-size:16px}
.tv .log li{font-size:15px}
.tv .center-act{display:none}
.tv-lobby{width:min(900px,94vw)}
.tv-lobby .ov-title{font-size:64px}
.tv-lobby-grid{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start;margin-top:10px}
.tv-lobby .lobby-list li{font-size:24px;padding:10px 14px}
.tv-lobby .join-addr{margin-top:0}
.tv-lobby .join-addr b{font-size:28px}
.tv-hint{font-family:var(--label);font-size:22px;color:var(--text);margin-top:18px}
.tv-sound{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:90;background:#000;border:1.5px solid var(--gold2);color:var(--text);
  padding:10px 18px;border-radius:12px;font-family:var(--label);font-size:20px;cursor:pointer}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}.token{transition:none}}