:root{
    --bg:#050506; --panel:#121214; --panel2:#19191c; --line:#2a2a2e;
    --txt:#ececee; --muted:#8b8b92;
    --gold:#d4af37; --gold-hi:#f0d67a; --gold-dim:rgba(212,175,55,.35);
    --win:#2ecc71; --lose:#e5484d;
    --side-l:#4a90e2; --side-r:#e5484d;
    /* 본문·숫자는 OS에 이미 있는 글꼴만 쓴다. 웹폰트로 Noto Sans KR(400/500/700)을 받던 때는
       구글 폰트 CSS 하나가 340KB(서브셋 조각 216개, 합계 4MB)였고 그게 렌더를 막아
       페이지 본문(gzip 15KB)보다 20배 무거웠다. 브랜드용 Black Han Sans만 비동기로 받는다. */
    --display:"Black Han Sans","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
    --mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,"Noto Sans Mono",monospace;
  }
  *{box-sizing:border-box}
  *{scrollbar-width:thin;scrollbar-color:#333338 transparent}
  *::-webkit-scrollbar{width:10px;height:10px}
  *::-webkit-scrollbar-track{background:transparent}
  *::-webkit-scrollbar-thumb{background:#2c2c31;border-radius:8px;border:2px solid transparent;background-clip:content-box}
  body{margin:0;background:var(--bg);color:var(--txt);
    background-image:radial-gradient(1000px 460px at 50% -60px, rgba(212,175,55,.10) 0%, rgba(212,175,55,0) 60%);
    font-family:"Malgun Gothic","Apple SD Gothic Neo",-apple-system,"Segoe UI",Roboto,"Noto Sans CJK KR",sans-serif;
    font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
  .num,.mono{font-family:var(--mono);font-feature-settings:"tnum"}
  a{color:inherit;text-decoration:none}
  header{position:sticky;top:0;z-index:300;background:rgba(5,5,6,.92);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
    box-shadow:0 1px 0 var(--gold-dim), 0 8px 24px rgba(0,0,0,.4)}
  .wrap{max-width:1000px;margin:0 auto;padding:0 16px}
  .brand{display:flex;align-items:center;gap:10px;padding:16px 0 10px}
  .brand .logo{border-radius:8px;display:block;box-shadow:0 2px 8px rgba(0,0,0,.5)}
  .brand b{font-family:var(--display);font-weight:400;font-size:21px;color:var(--gold);letter-spacing:1px}
  header nav{display:flex;gap:4px;padding-bottom:0}
  /* 탭은 밑줄로만 활성을 표시한다 (discord-lol과 같은 결) */
  .tab{font-size:14px;font-weight:600;color:var(--muted);padding:10px 16px;
    border-bottom:2px solid transparent;white-space:nowrap;transition:color .12s,border-color .12s}
  .tab:hover{color:var(--txt)}
  .tab.active{color:var(--gold);border-bottom-color:var(--gold)}

  /* 프로필 — 디스코드 아바타 + 닉네임 + 보유 포인트, 눌러서 펼치는 메뉴 */
  .profwrap{margin-left:auto;position:relative;display:flex;align-items:center;gap:8px}
  /* 효과음 스위치 — 프로필 옆에 그대로 둔다. 아이콘 모양이 곧 현재 상태다.
     꺼져 있을 때만 색이 죽어서, 멀리서 봐도 소리가 나가는 중인지 알 수 있다. */
  .sfxbtn{display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:34px;height:34px;padding:0;cursor:pointer;
    background:var(--panel2);border:1px solid var(--line);border-radius:10px;
    /* 색에는 transition을 걸지 않는다 — 켜짐/꺼짐은 hover 같은 장식이 아니라 상태 표시라
       즉시 바뀌어야 하고, 페이드가 끼면 눌렀는데 안 바뀐 것처럼 보이는 순간이 생긴다 */
    color:var(--gold);transition:border-color .12s}
  .sfxbtn:hover{border-color:var(--gold)}
  .sfxbtn .off{display:none}
  html.sfx-off .sfxbtn{color:var(--muted)}
  html.sfx-off .sfxbtn .on{display:none}
  html.sfx-off .sfxbtn .off{display:block}
  @media(max-width:400px){.sfxbtn{display:none}}
  .prof{display:inline-flex;align-items:center;gap:8px;background:var(--panel2);
    border:1px solid var(--line);border-radius:10px;padding:6px 10px 6px 7px;
    cursor:pointer;font-family:inherit;color:var(--txt);white-space:nowrap;transition:border-color .12s}
  .prof:hover,.prof.open{border-color:var(--gold)}
  .prof .ava{width:24px;height:24px;border-radius:7px;flex:none;object-fit:cover;
    background:#5865f2;color:#fff;display:inline-flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:800}
  .prof .pname{font-size:13px;font-weight:700;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .prof .adm{font-size:10px;font-weight:800;color:var(--gold);
    border:1px solid var(--gold-dim);border-radius:4px;padding:1px 5px;letter-spacing:.5px}
  .prof .pbal{font-family:var(--mono);font-size:13px;color:var(--gold);font-weight:600}
  .prof .caret{color:var(--muted);transition:transform .18s}
  .prof.open .caret{transform:rotate(180deg)}
  .profmenu{position:absolute;top:calc(100% + 8px);right:0;min-width:150px;z-index:400;
    background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;
    box-shadow:0 16px 40px rgba(0,0,0,.6);animation:menuIn .16s cubic-bezier(.16,1,.3,1) both}
  .profmenu[hidden]{display:none}
  .pm-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;
    font-size:13.5px;font-weight:600;color:var(--muted)}
  .pm-item:hover{background:rgba(212,175,55,.1);color:var(--txt)}
  .pm-item.danger:hover{background:rgba(229,72,77,.12);color:var(--lose)}
  @keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
  @media(max-width:520px){.prof .pname,.prof .adm{display:none}}

  .loginbtn{margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:#5865f2;color:#fff;
    font-size:13px;font-weight:700;line-height:1;padding:8px 13px;border-radius:10px;white-space:nowrap}
  .loginbtn:hover{background:#4752e0}
  /* ── 페이지 전환 ────────────────────────────────────────────────────
     게임을 오갈 때 화면이 뚝 끊기지 않게 부드럽게 넘긴다.
     크로스 도큐먼트 뷰 트랜지션이라 SSR 다중 페이지 구조에 그대로 쓸 수 있고,
     지원하지 않는 브라우저는 아래 mainIn 페이드로 대체된다(둘 다 없어도 화면은 정상).
     헤더는 페이지마다 같으니 고정해 두고 본문만 교차 페이드시킨다. */
  @view-transition{navigation:auto}
  header{view-transition-name:od-header}
  main{view-transition-name:od-main}
  ::view-transition-old(od-main){animation:vtOut .16s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(od-main){animation:vtIn .22s cubic-bezier(0,0,.2,1) both}
  ::view-transition-old(od-header),::view-transition-new(od-header){animation:none;mix-blend-mode:normal}
  @keyframes vtOut{to{opacity:0;transform:translateY(-4px)}}
  @keyframes vtIn{from{opacity:0;transform:translateY(6px)}}
  /* 뷰 트랜지션 미지원 브라우저용 대체.
     @supports로 막지 않으면 지원 브라우저에서 뷰 트랜지션과 겹쳐 두 번 페이드된다. */
  @supports not (view-transition-name:none){
    @media(prefers-reduced-motion:no-preference){
      main{animation:mainIn .2s cubic-bezier(0,0,.2,1) both}
    }
  }
  @keyframes mainIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  main{max-width:1000px;margin:0 auto;padding:16px 16px 40px}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;
    box-shadow:inset 0 1px 0 rgba(212,175,55,.14)}
  .card + .card{margin-top:16px}
  .card h2{margin:0 0 14px;font-family:var(--display);font-weight:400;font-size:17px;color:var(--gold);
    letter-spacing:.3px;display:flex;align-items:center;gap:8px}
  .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px}
  .stat{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
  .stat .lbl{font-size:12px;color:var(--muted);font-weight:600}
  .stat .val{font-family:var(--mono);font-size:22px;font-weight:600;margin-top:4px}
  .stat .val.gold{color:var(--gold)}
  .stat .val.hi{color:var(--win)}
  table{width:100%;border-collapse:collapse;font-size:13.5px}
  th{text-align:left;color:var(--muted);font-weight:700;font-size:12px;text-transform:uppercase;
    letter-spacing:.3px;padding:8px 10px;border-bottom:1px solid var(--line)}
  td{padding:10px;border-bottom:1px solid var(--line)}
  tr:last-child td{border-bottom:none}
  .rank{font-family:var(--mono);color:var(--muted);width:36px}
  .rank.top1{color:var(--gold);font-weight:700}
  .delta.pos{color:var(--win)}
  .delta.neg{color:var(--lose)}
  .empty{color:var(--muted);font-size:13.5px;text-align:center;padding:24px 0}
  .btn{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);
    border-radius:10px;padding:10px 16px;font-size:13.5px;font-weight:700;color:var(--txt);cursor:pointer;
    transition:transform .08s,border-color .12s,color .12s}
  .btn:hover{border-color:var(--gold);color:var(--gold)}
  .btn:active:not(:disabled){transform:scale(.95)}
  .btn:disabled{opacity:.4;cursor:default;border-color:var(--line);color:var(--muted)}
  .btn-gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold));border-color:var(--gold);color:#211a04;
    box-shadow:0 2px 10px rgba(212,175,55,.25)}
  .btn-gold:hover{background:linear-gradient(180deg,#f7e199,var(--gold-hi));color:#211a04;border-color:var(--gold-hi)}
  .btn-gold:disabled{background:var(--panel2);box-shadow:none}
  .notice{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;border-radius:11px;
    padding:11px 14px;margin-bottom:14px}
  .notice.ok{background:rgba(46,204,113,.1);border:1px solid rgba(46,204,113,.35);color:#5fdc8b}
  .notice.err{background:rgba(229,72,77,.1);border:1px solid rgba(229,72,77,.35);color:#f0868a}
  .game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
  .game-card{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:18px;
    display:flex;flex-direction:column;gap:6px;box-shadow:inset 0 1px 0 rgba(212,175,55,.1);
    transition:border-color .15s,transform .15s,background .15s,box-shadow .15s}
  /* 출시된 게임은 카드 전체가 링크다. 반응을 확실히 보이게 테두리·배경·그림자를 함께 바꾼다 —
     예전에는 2px 떠오르고 테두리만 옅게 밝아져서 마우스를 올려도 반응을 알아채기 어려웠다 */
  .game-card.ready{cursor:pointer}
  .game-card.ready:hover{border-color:var(--gold);background:#1f1f23;transform:translateY(-3px);
    box-shadow:0 10px 26px rgba(0,0,0,.5),inset 0 1px 0 rgba(212,175,55,.22)}
  .game-card.ready:active{transform:translateY(-1px)}
  .game-card.ready:hover .btn{background:var(--gold-hi);border-color:var(--gold-hi)}
  .game-card.ready:hover .icon{color:var(--gold-hi)}
  .game-card .icon{width:30px;height:30px;color:var(--gold)}
  .game-card .icon svg{width:100%;height:100%}
  .game-card h3{margin:2px 0 0;font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:.3px}
  /* 설명이 남는 공간을 모두 차지하게 해서, 설명 길이가 달라도 버튼은 항상 카드 맨 아래에 정렬된다 */
  .game-card p{margin:0 0 4px;color:var(--muted);font-size:13px;flex:1}
  .game-card .btn{justify-content:center}
  .game-card .soon{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
    color:var(--muted);border:1px dashed #3a3a40;border-radius:10px;padding:10px 0}
  .footer{margin-top:32px;text-align:center;color:var(--muted);font-size:12px}

  @keyframes tilePop{0%{transform:scale(.5);opacity:0}55%{transform:scale(1.16)}100%{transform:scale(1);opacity:1}}
  @keyframes gridShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}
    30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
  @keyframes statBump{0%{text-shadow:0 0 0 rgba(212,175,55,0)}35%{text-shadow:0 0 16px currentColor}100%{text-shadow:0 0 0 rgba(212,175,55,0)}}
  @keyframes goldFlash{0%{box-shadow:0 0 0 0 rgba(212,175,55,.55)}100%{box-shadow:0 0 0 22px rgba(212,175,55,0)}}
  @keyframes nodePulse{0%{r:16}45%{r:21}100%{r:16}}

  /* 게임 전환 바 (게임 화면 상단) */
  .game-switch{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
  .gs-pill{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);
    border-radius:10px;padding:8px 14px;font-size:13px;font-weight:700;color:var(--muted);
    transition:border-color .12s,color .12s}
  .gs-pill:hover{border-color:var(--gold-dim);color:var(--txt)}
  .gs-pill.active{border-color:var(--gold);color:var(--gold);background:rgba(212,175,55,.08)}
  .gs-ic{width:16px;height:16px;display:flex;flex:none}
  .gs-ic svg{width:100%;height:100%}

  /* 게임 공통 레이아웃 (베팅 패널 + 게임판) */
  .game-layout{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
  .game-panel{width:230px;flex:none;display:flex;flex-direction:column;gap:12px}
  .game-panel .field label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px}
  .game-panel .bet-row{display:flex;gap:6px}
  .game-panel .bet-row input{flex:1;min-width:0}
  .game-panel .stat{padding:12px 14px}
  .game-board{flex:1;min-width:280px;display:flex;justify-content:center}
  .game-input{background:#0d0d0f;border:1px solid var(--line);border-radius:8px;color:var(--txt);
    padding:9px 11px;font-family:inherit;font-size:13.5px;outline:none}
  .game-input:focus{border-color:var(--gold)}
  .game-input:disabled{opacity:.5}
  .chip-btn{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:0 10px;height:38px;
    font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;transition:transform .08s,border-color .12s,color .12s}
  .chip-btn:hover{border-color:var(--gold);color:var(--gold)}
  .chip-btn:active{transform:scale(.93)}
  .chip-btn:disabled{opacity:.35;cursor:default;transform:none;border-color:var(--line);color:var(--muted)}
  /* 게임판을 작게 유지해 베팅 컨트롤이 스크롤 없이 한 화면에 들어오게 한다 */
  .mines-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;max-width:290px;width:100%}
  @media (max-width:640px){.game-panel{width:100%}.game-board{min-width:0}}

  /* 지뢰찾기 */
  .mines-grid.shake{animation:gridShake .4s}
  .mines-tile{aspect-ratio:1;border-radius:10px;background:var(--panel2);border:1px solid var(--line);
    cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
    transition:border-color .12s,background .12s,transform .1s}
  .mines-tile svg{width:52%;height:52%}
  .mines-tile .mark{color:var(--gold-dim);width:30%;height:30%}
  .mines-tile:hover:not(:disabled){border-color:var(--gold);background:#1f1a10;transform:translateY(-1px)}
  .mines-tile:active:not(:disabled){transform:scale(.93)}
  .mines-tile:disabled{cursor:default}
  /* 안전 칸은 금화 — 초록 보석보다 "돈을 벌었다"는 신호가 직관적이다 */
  .mines-tile.safe{background:rgba(212,175,55,.14);border-color:var(--gold);color:var(--gold-hi);
    animation:tilePop .3s cubic-bezier(.34,1.56,.64,1)}
  .mines-tile.mine{background:rgba(229,72,77,.16);border-color:var(--lose);color:var(--lose);
    animation:tilePop .3s cubic-bezier(.34,1.56,.64,1)}

  /* 사다리게임 */
  .ladder-board{width:100%;display:flex;justify-content:center}
  .ladder-svg{max-width:100%}
  .ladder-svg.shake{animation:gridShake .4s}
  .ladder-line{stroke:var(--line);stroke-width:2}
  .ladder-rung{stroke:var(--gold-dim);stroke-width:3;stroke-linecap:round}
  .ladder-node{fill:var(--panel2);stroke-width:1.5;transition:fill .2s,stroke-width .2s}
  .ladder-node.side-l{stroke:var(--side-l)}
  .ladder-node.side-r{stroke:var(--side-r)}
  .ladder-node.parity-odd{stroke:var(--gold)}
  .ladder-node.parity-even{stroke:#c77dff}
  .ladder-node.side-l.hit{fill:rgba(74,144,226,.9);stroke-width:3;animation:nodePulse .5s ease-out}
  .ladder-node.side-r.hit{fill:rgba(229,72,77,.9);stroke-width:3;animation:nodePulse .5s ease-out}
  .ladder-node.parity-odd.hit{fill:rgba(212,175,55,.9);stroke-width:3;animation:nodePulse .5s ease-out}
  .ladder-node.parity-even.hit{fill:rgba(199,125,255,.85);stroke-width:3;animation:nodePulse .5s ease-out}
  .ladder-label{font-size:12px;font-weight:700;pointer-events:none;user-select:none}
  .ladder-label.side-l{fill:var(--side-l)}
  .ladder-label.side-r{fill:var(--side-r)}
  .ladder-label.parity-odd{fill:var(--gold)}
  .ladder-label.parity-even{fill:#c77dff}
  .ladder-cap{fill:var(--muted);font-size:11px;font-weight:700;letter-spacing:2px;
    pointer-events:none;user-select:none}
  .ladder-trail{stroke:var(--gold);stroke-width:4;stroke-linecap:round;opacity:.55}
  .ladder-token{fill:var(--gold);stroke:#000;stroke-width:1;transition:cx .28s ease,cy .28s ease;
    filter:drop-shadow(0 0 5px rgba(212,175,55,.8))}
  .ladder-token.win{fill:var(--win)}
  .ladder-token.lose{fill:var(--lose)}
  .side-l-text{color:var(--side-l);font-weight:700}
  .side-r-text{color:var(--side-r);font-weight:700}

  /* 보드 무대 위에 겹쳐 표시하는 상태 배지 (카운트다운 등). 게임판 요소와 겹치지 않게 우측 상단에 둔다. */
  .stage-status{position:absolute;top:10px;right:10px;font-family:var(--mono);font-size:12px;
    color:var(--muted);background:rgba(20,20,24,.85);border:1px solid var(--line);
    border-radius:8px;padding:5px 10px;pointer-events:none}
  .predict-row{display:flex;gap:6px;align-items:center}
  .predict-lbl{width:34px;flex:none;font-size:12px;color:var(--muted);font-weight:600}
  .toggle-row{display:flex;gap:6px}
  .toggle-btn{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 0;
    font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .12s}
  .toggle-btn:hover{border-color:var(--gold);color:var(--gold)}
  .toggle-btn.side-l.active{background:var(--side-l);border-color:var(--side-l);color:#fff}
  .toggle-btn.side-r.active{background:var(--side-r);border-color:var(--side-r);color:#fff}
  .toggle-btn:disabled{opacity:.4;cursor:default}

  /* 사다리 출목표 — 출발/도착 2행으로 나눠 각 칸에 좌·우를 글자로 표기 (칩이 작아 비어 보이던 문제 해결) */
  .bead{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
  .bead-row{display:flex;align-items:center;gap:5px;overflow-x:auto;scrollbar-width:none}
  .bead-row::-webkit-scrollbar{display:none}
  .bead-lbl{width:30px;flex:none;font-size:11px;font-weight:700;color:var(--muted)}
  .bead-cell{width:24px;height:24px;flex:none;border-radius:6px;display:flex;align-items:center;
    justify-content:center;font-size:11px;font-weight:700;border:1px solid var(--line)}
  .bead-cell.l{background:rgba(74,144,226,.18);border-color:rgba(74,144,226,.5);color:var(--side-l)}
  .bead-cell.r{background:rgba(229,72,77,.18);border-color:rgba(229,72,77,.5);color:var(--side-r)}
  /* 홀짝은 좌우(파랑/빨강)와 구분되도록 골드/보라 계열로 */
  .bead-cell.odd{background:rgba(212,175,55,.18);border-color:var(--gold-dim);color:var(--gold)}
  .bead-cell.even{background:rgba(199,125,255,.16);border-color:rgba(199,125,255,.45);color:#c77dff}
  /* 홀/짝 글자색은 출목표 셀과 같게 — 홀은 골드, 짝은 보라 */
  .parity-text{font-weight:700}
  .parity-text.odd{color:var(--gold)}
  .parity-text.even{color:#c77dff}
  .toggle-btn.parity-odd:hover,.toggle-btn.parity-even:hover{border-color:var(--gold);color:var(--gold)}
  .toggle-btn.parity-odd.active{background:var(--gold);border-color:var(--gold);color:#211a04}
  .toggle-btn.parity-even.active{background:#c77dff;border-color:#c77dff;color:#1e0a2e}

  .bet-feed{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}

  /* 게임 화면 공통 셸 — [히스토리 → 보드] + 하단 베팅 컨트롤, 우측 사이드 패널 (모든 게임 동일 구조) */
  .game-shell{display:flex;gap:16px;align-items:flex-start}
  .game-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
  .game-side{width:290px;flex:none;padding:0;overflow:hidden}
  /* 사이드 패널이 없는 1인 게임(지뢰찾기)은 가운데 정렬로 폭을 제한해 허전해 보이지 않게 한다 */
  .game-shell.solo{max-width:620px;margin:0 auto}
  /* 참가자 패널은 되도록 오른쪽에 붙여 둔다 — 아래로 내려가면 보드를 보면서 남의 베팅을
     같이 볼 수 없어서 "다 같이 한 판" 하는 느낌이 사라진다.
     좁은 창(에디터에 붙은 미리보기 창 등)에서는 패널만 줄이고 배치는 유지하다가,
     정말 좁아지는 700px 아래에서만 세로로 쌓는다. */
  @media (max-width:1000px){.game-side{width:240px}}
  /* 세로로 쌓을 때는 align-items를 stretch로 되돌려야 한다.
     .game-shell은 가로 배치 기준으로 flex-start를 쓰는데, 방향이 column이 되면 교차축이 가로로
     바뀌어 그 값이 "가로로 늘리지 말라"는 뜻이 된다. 그러면 본문이 내용 최대폭까지 커져서
     700px 창에서 864px이 되고 화면 밖으로 174px 밀려 나갔다(실측). */
  @media (max-width:700px){
    .game-shell{flex-direction:column;align-items:stretch}
    .game-side{width:100%}
  }
  /* 포커도 다른 게임과 같은 기준(700px)으로 쌓는다.
     다만 카드가 가로로 9장 들어가야 해서 좁은 구간에서는 카드를 줄여야 하는데,
     그 규칙은 아래 .poker-table 기본값보다 뒤에 있어야 덮이지 않는다 —
     "좁은 창의 포커 테이블" 항목으로 파일 뒤쪽에 모아 두었다. */

  .hist-row{display:flex;gap:5px;overflow-x:auto;padding-bottom:5px;margin-bottom:10px;
    scrollbar-width:none}
  .hist-row::-webkit-scrollbar{display:none}
  .ch-chip{flex:none;font-family:var(--mono);font-size:11.5px;font-weight:600;padding:3px 7px;
    border-radius:6px;border:1px solid var(--line);white-space:nowrap}
  .ch-chip.low{color:#7f8794;background:rgba(127,135,148,.1)}
  .ch-chip.mid{color:var(--gold);background:rgba(212,175,55,.1);border-color:var(--gold-dim)}
  .ch-chip.high{color:#c77dff;background:rgba(199,125,255,.12);border-color:rgba(199,125,255,.4)}
  .ch-chip.bust{color:var(--lose);background:rgba(229,72,77,.12);border-color:rgba(229,72,77,.4)}
  /* 포커 플립 전적 칩 — 보드의 MASTER(파랑)·SHARK(빨강) 색을 그대로 따라간다.
     예전에는 그래프게임용 low/bust 색을 빌려 써서 MASTER가 회색으로 보였다 */
  .ch-chip.w-master{color:var(--side-l);background:rgba(74,144,226,.14);border-color:rgba(74,144,226,.45)}
  .ch-chip.w-shark{color:var(--lose);background:rgba(229,72,77,.12);border-color:rgba(229,72,77,.4)}
  .ch-chip.w-tie{color:var(--gold);background:rgba(212,175,55,.1);border-color:var(--gold-dim)}

  /* 보드 무대 (게임판이 놓이는 어두운 영역) — 크래시/사다리 공용 */
  .board-stage{position:relative;width:100%;background:#0c0c0e;border:1px solid var(--line);
    border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;
    min-height:216px;padding:10px 0}
  .crash-stage{position:relative;width:100%;background:#0c0c0e;border:1px solid var(--line);
    border-radius:12px;overflow:hidden}
  .crash-stage.crashed{border-color:rgba(229,72,77,.45)}
  .crash-graph{display:block;width:100%;height:auto}
  .cg-line{stroke:#1e1e22;stroke-width:1}
  .cg-lbl{fill:#6f6f77;font-size:11px;font-family:var(--mono)}
  .crash-curve{fill:none;stroke:var(--win);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
  .crash-area{fill:rgba(46,204,113,.13);stroke:none}
  .crash-stage.crashed .crash-curve{stroke:var(--lose)}
  .crash-stage.crashed .crash-area{fill:rgba(229,72,77,.13)}
  .crash-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
    text-align:center;pointer-events:none}
  .crash-label{display:none;font-size:12px;font-weight:800;letter-spacing:2px;color:var(--lose);margin-bottom:2px}
  .crash-betlabel{display:none;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:2px}
  .crash-multi{font-family:var(--mono);font-size:52px;font-weight:600;color:var(--txt);line-height:1.1;
    text-shadow:0 2px 14px rgba(0,0,0,.85)}
  .crash-multi.running{color:var(--win)}
  .crash-multi.betting{color:var(--win)}
  .crash-multi.crashed{color:var(--lose);animation:statBump .4s ease}
  .crash-tip{fill:var(--win)}
  .crash-stage.crashed .crash-tip{fill:var(--lose)}
  .crash-status{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:4px}
  @media (max-width:640px){.crash-multi{font-size:38px}}

  .game-controls{display:flex;flex-direction:column;gap:11px}
  .mode-tabs{display:flex;gap:8px}
  .mode-tab{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 0;
    font-size:13.5px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .12s}
  .mode-tab:hover:not(:disabled){color:var(--txt)}
  .mode-tab.active{background:#0d0d0f;border-color:var(--gold);color:var(--gold)}
  .mode-tab:disabled{opacity:.5;cursor:default}
  .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  /* 그리드 항목은 기본값이 min-width:auto라 내용보다 작아지지 못한다.
     0으로 풀어두지 않으면 좁은 폭에서 칸이 상자 밖으로 밀려 나간다. */
  .field-grid .field{min-width:0}
  @media (max-width:640px){.field-grid{grid-template-columns:1fr}}
  .field-grid .field label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px}
  .field-grid .bet-row{display:flex;gap:6px}
  .field-grid .bet-row input{flex:1;min-width:0}
  .quick-row{display:flex;gap:6px;margin-top:6px}
  .chip-btn.wide{flex:1;padding:0}
  .btn-primary{background:var(--win);border-color:var(--win);color:#06240f;font-size:15px;padding:14px 0}
  .btn-primary:hover{background:#42d886;border-color:#42d886;color:#06240f}
  .btn-primary:disabled{background:var(--panel2);border-color:var(--line);color:var(--muted)}
  .game-action{width:100%;justify-content:center}
  /* 배당·예상획득을 큰 카드 대신 한 줄로 압축 (베팅 버튼이 스크롤 없이 보이도록) */
  .payout-line{display:flex;justify-content:space-between;gap:12px;background:var(--panel2);
    border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:12.5px;color:var(--muted)}
  .payout-line b{font-family:var(--mono);font-size:15px;font-weight:600;margin-left:6px}
  .payout-line .gold{color:var(--gold)}
  .payout-line .hi{color:var(--win)}
  .game-msg{color:var(--muted);font-size:13.5px;margin:0;min-height:20px}

  .side-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;
    border-bottom:1px solid var(--line);font-size:13px;font-weight:700}
  .side-head .num{font-family:var(--mono);color:var(--gold)}
  .cash-out{color:var(--win);font-weight:700}
  .cash-pending{color:var(--muted)}
  .cash-bust{color:var(--lose)}

  /* 포커 플립 */
  /* 카드 폭은 고정이라 자리 배치가 줄어들지 않는다. 예상 못 한 폭에서 상자 밖으로 삐져나오는 대신
     테이블 안에서 가로 스크롤되도록 막아 둔다(들어맞는 폭에서는 아무 차이가 없다) */
  .poker-table{background:radial-gradient(120% 100% at 50% 0%, #143024 0%, #0c1a14 70%);
    border:1px solid var(--line);border-radius:14px;padding:18px 16px;margin-bottom:10px;
    overflow-x:auto}
  .poker-seats{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
  .seat{text-align:center;min-width:104px}
  .seat-name{font-size:11.5px;font-weight:800;letter-spacing:1.2px;margin-bottom:8px}
  .seat-name.master{color:#5fb0ff}
  .seat-name.shark{color:#ff8f6b}
  .seat-cat{font-size:11.5px;color:var(--muted);margin-top:9px;min-height:16px}
  .seat-cat.win{color:var(--win);font-weight:700}
  .hand,.board{display:flex;gap:7px;justify-content:center}
  .board-wrap{text-align:center}
  .poker-status{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-bottom:11px}
  /* 카드 그림은 미리 만들어 둔 SVG(public/cards)를 그대로 쓴다 — 크기와 상관없이 선명하다 */
  .pcard{display:block;width:48px;height:72px;border-radius:6px;flex:none;
    box-shadow:0 3px 8px rgba(0,0,0,.5);animation:cardFlip .32s cubic-bezier(.3,.8,.35,1)}
  /* 뒷면은 back.svg 이미지지만, 이미지가 아직 안 왔거나 실패해도 투명하게 비지 않도록
     back.svg와 같은 남색 그라디언트를 배경으로 깔아 둔다.
     border 대신 background만 쓴다 — box-sizing:border-box라 border를 주면 이미지가 2px 줄어
     앞면 카드와 크기가 미묘하게 달라진다. */
  .pcard.back{animation:none;background:linear-gradient(160deg,#2a3a63,#141b30)}
  @keyframes cardFlip{
    from{transform:rotateY(-88deg) scale(.92);opacity:.25}
    to{transform:none;opacity:1}
  }
  /* 새 라운드 딜링 — 딜러 자리(테이블 상단 중앙)에서 각 자리로 날아와 놓인다 */
  @keyframes cardDealIn{
    from{transform:translate(var(--dfx),var(--dfy)) rotate(-12deg) scale(.8);opacity:0}
    30%{opacity:1}
    to{transform:none;opacity:1}
  }
  .pcard.deal-in{animation:cardDealIn .3s cubic-bezier(.3,.85,.35,1) forwards}
  @media (max-width:640px){
    .poker-table{padding:16px 10px}
    .poker-seats{grid-template-columns:auto 1fr auto;gap:8px}
    .seat{min-width:78px}
    .hand,.board{gap:4px}
    .pcard{width:34px;height:51px;border-radius:5px}
  }

  .market-grid{display:flex;flex-direction:column;gap:9px}
  .market-row{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
  .market-row.bucket-row{grid-template-columns:repeat(5,1fr)}
  @media (max-width:760px){.market-row.bucket-row{grid-template-columns:repeat(2,1fr)}}
  .market{position:relative;background:#12281d;border:1px solid #1f4230;border-radius:11px;
    padding:0 0 8px;cursor:pointer;text-align:center;transition:border-color .12s,transform .08s;
    display:flex;flex-direction:column;overflow:hidden}
  .market:hover:not(.disabled){border-color:var(--gold);transform:translateY(-1px)}
  .market:active:not(.disabled){transform:scale(.985)}
  .market.disabled{opacity:.5;cursor:default}
  /* 상단 띠 — 왼쪽에 이 시장에 걸린 총액, 오른쪽에 배당 */
  .m-top{display:flex;align-items:center;justify-content:space-between;gap:6px;
    padding:4px 7px;background:rgba(0,0,0,.34);border-bottom:1px solid rgba(255,255,255,.06)}
  .m-total{font-family:var(--mono);font-size:11px;font-weight:700;color:#cfe3d6;
    background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1);border-radius:5px;
    padding:0 5px;min-width:34px;text-align:center}
  .m-top .m-odds{font-family:var(--mono);font-size:19px;font-weight:600;color:var(--gold);line-height:1.15}
  .market-row.bucket-row .m-top .m-odds{font-size:16.5px}
  /* 중앙 코인 더미 — 칩이 쌓일 자리. 세로로 넉넉해야 칩이 여러 줄 쌓여도 잘리지 않는다 */
  .m-pile{position:relative;height:78px;flex:none}
  .market-row.bucket-row .m-pile{height:66px}
  .m-body{padding:6px 8px 0;display:flex;flex-direction:column;gap:6px;flex:1;justify-content:flex-end}
  .market .m-label{font-size:12px;color:#cfe3d6;line-height:1.25;font-weight:600}
  .market-row.bucket-row .m-label{font-size:11px;color:#a9c4b5;font-weight:500}
  .market .m-sub{font-size:10.5px;color:#7f9a8b}
  .m-dots{display:flex;gap:3px;justify-content:center}
  .m-dots .dot{width:8px;height:8px;border-radius:50%;background:#20362a;
    border:1px solid rgba(255,255,255,.1)}
  .m-dots .dot.hit{background:radial-gradient(circle at 35% 30%,#ff7b7b,#d0202a);
    border-color:#ff9a9a;box-shadow:0 0 5px rgba(229,72,77,.75)}
  .m-drought{font-family:var(--mono);font-size:10px;color:var(--gold-dim)}
  .market.m-master{background:#12233a;border-color:#22406b}
  .market.m-shark{background:#33201a;border-color:#5e3527}
  .market.hit{border-color:var(--win);box-shadow:0 0 0 1px var(--win) inset}
  .market.miss{opacity:.42}

  /* 칩 스프라이트 — 동전은 찌그러지지 않은 정원(正圓), 골드바는 그보다 확실히 크게.
     (width/height를 같은 값으로 고정하고 min-width를 명시해, 버튼 쪽 .coin 규칙 같은 게
      섞여 들어와도 타원으로 눌리지 않게 한다) */
  .pchip{position:absolute;display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-weight:700;color:#4a3608;
    text-shadow:0 1px 0 rgba(255,255,255,.4);pointer-events:none;flex:none}
  .pchip.c-coin{width:21px;height:21px;min-width:21px;margin-left:-10.5px;border-radius:50%;font-size:8px;
    background:radial-gradient(circle at 36% 28%,#fff6d8 0%,#f0cf74 42%,#c79a2c 78%,#9a7420 100%);
    border:1px solid #f7dd96;
    box-shadow:0 2px 3px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.22),inset 0 -2px 2px rgba(120,88,20,.35)}
  .pchip.c-bar{width:40px;height:24px;min-width:40px;margin-left:-20px;border-radius:4px;font-size:11px;
    background:linear-gradient(165deg,#fff4c8 0%,#f2d074 36%,#c99b2c 72%,#8f6a18 100%);
    border:1px solid #ffe9a0;
    box-shadow:0 3px 0 #7a5c14,0 5px 6px rgba(0,0,0,.55),inset 0 1.5px 0 rgba(255,255,255,.55)}
  .pchip.mine.c-coin{box-shadow:0 2px 0 #8a6a1e,0 3px 4px rgba(0,0,0,.5),0 0 0 1.5px var(--gold),0 0 8px rgba(212,175,55,.7)}
  .pchip.mine.c-bar{box-shadow:0 3px 0 #7a5c14,0 5px 6px rgba(0,0,0,.55),0 0 0 1.5px var(--gold),0 0 9px rgba(212,175,55,.7)}
  /* 다른 사람 칩 — 아래에서 스윽 올라온다 */
  @keyframes chipDrop{
    from{transform:translate(0,30px) scale(.55);opacity:0}
    60%{opacity:1}
    to{transform:none;opacity:1}
  }
  .pchip.drop{animation:chipDrop .3s cubic-bezier(.22,.9,.3,1.25)}
  /* 내가 누른 칩 — 눌린 코인 버튼 자리에서 출발해 상자 안으로 밀려 들어온다.
     상자에 overflow:hidden이 걸려 있어 상자 밖 구간이 잘려 보이지 않으므로,
     회수 연출과 마찬가지로 화면 전체 레이어에 복제본을 띄워 날린다.
     날아가는 동안 원본은 pending으로 숨겨 두고, 도착하면 드러낸다 */
  @keyframes chipToss{
    from{transform:translate(var(--fx),var(--fy)) scale(var(--fs));opacity:.85}
    30%{opacity:1}
    to{transform:none;opacity:1}
  }
  .pchip.pending{opacity:0}
  .pchip.toss{animation:chipToss .36s cubic-bezier(.25,.8,.3,1.02) forwards}
  /* 적중 시 — 이긴 상자의 칩들이 화면 아래 중앙으로 빨려 들어간다.
     상자에 overflow:hidden이 걸려 있어 원본은 밖으로 못 나가므로,
     화면 전체를 덮는 레이어에 복제본을 띄워 날린다 */
  /* 포커 플립만 참가자 패널이 붙어서 폭이 더 필요하다 — 보드 폭을 지키기 위해 이 화면만 넓게 쓴다 */
  .poker-wide main{max-width:1320px}
  .poker-wide header .wrap{max-width:1320px}

  /* 참가자 패널 — 디스코드 아바타 · 닉네임 · 보유 포인트. 칩이 여기서 출발하고 여기로 돌아온다 */
  .roster{display:flex;flex-direction:column;gap:6px;max-height:520px;overflow-y:auto}
  .rw{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px;
    background:var(--panel2);border:1px solid var(--line);transition:border-color .15s}
  .rw.me{border-color:var(--gold-dim);background:rgba(212,175,55,.06)}
  .rw.won{border-color:var(--win)}
  .rw-av{width:34px;height:34px;border-radius:50%;flex:none;object-fit:cover;
    background:var(--panel);border:1px solid var(--line);display:flex;align-items:center;
    justify-content:center;font-weight:700;font-size:14px;color:var(--gold);overflow:hidden}
  /* 닉네임과 보유 포인트를 위아래로 분리 — 한 줄에 붙어 있으면 읽기 어렵다 */
  .rw-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .rw-name{display:block;font-size:13px;font-weight:600;line-height:1.15;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rw-bal{display:block;font-family:var(--mono);font-size:12px;color:var(--gold);line-height:1.15}
  .rw-bet{display:flex;flex-direction:column;align-items:flex-end;gap:3px;
    font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;flex:none}
  .rw-bet .pos{color:var(--win);font-weight:700}
  /* 게임별 정보(사다리 예측 / 크래시 캐시아웃 배율)와 베팅액을 위아래로 */
  .rw-tag{font-size:12px;line-height:1.15}
  .rw-amt{font-size:11.5px;line-height:1.15}
  .rw-bal.up{animation:balUp .5s ease}
  .rw-bal.down{animation:balDown .5s ease}
  @keyframes balUp{0%{transform:scale(1)}30%{transform:scale(1.18);color:var(--win)}100%{transform:scale(1)}}
  @keyframes balDown{0%{transform:scale(1)}30%{transform:scale(.9);color:var(--lose)}100%{transform:scale(1)}}

  .chip-fly-layer{position:fixed;inset:0;pointer-events:none;z-index:500}
  @keyframes chipFly{
    0%{transform:none;opacity:1}
    18%{transform:translate(0,-10px) scale(1.12);opacity:1}
    70%{opacity:1}
    100%{transform:translate(var(--tx),var(--ty)) scale(.5);opacity:0}
  }
  .pchip.fly{animation:chipFly .66s cubic-bezier(.45,.02,.3,1) forwards}

  /* 칩과 Clear Screen을 한 줄에 둔다 (.game-controls는 네 게임이 공유하는 세로 배치라
     포커에서만 가로로 뒤집는다). 칩은 남는 폭에 고르게 퍼지고 오른쪽에 Clear 자리만 남긴다.
     안내 문구는 넣지 않는다 — 떴다 사라질 때마다 칩 위치가 밀린다. */
  .poker-controls{flex-direction:row;align-items:center;gap:14px;padding:12px 16px}
  .poker-controls .coin-row{flex:1 1 auto}
  .poker-controls .btn{flex:none}
  /* 폭이 좁으면 칩 6개 + 버튼이 한 줄에 안 들어가므로 접히게 둔다 */
  @media (max-width:720px){
    .poker-controls{flex-wrap:wrap}
    .poker-controls .game-msg{order:3;flex-basis:100%;text-align:left}
  }

  /* 세로가 짧은 화면(720p 노트북 등)에서만 한 단계 축소 — 베팅 버튼이 접히지 않도록.
     넓은 화면에서는 위의 큰 사이즈를 그대로 쓴다 */
  @media (max-height:820px){
    .card{padding:11px}
    .poker-controls{padding:9px 13px;gap:10px}
    .poker-table{padding:9px 14px}
    .pcard{width:42px;height:63px}
    .pcard .pr{font-size:17px}
    .pcard .ps{font-size:15px}
    .hist-row{padding-bottom:3px;margin-bottom:7px}
    .market-grid,.market-row{gap:7px}
    .market{padding-bottom:5px}
    .m-top{padding:2px 6px}
    .m-top .m-odds{font-size:17px}
    .market-row.bucket-row .m-top .m-odds{font-size:15px}
    .m-pile{height:40px}
    .market-row.bucket-row .m-pile{height:36px}
    .m-body{padding-top:2px;gap:2px}
    .coin{height:36px}
    .coin .face{font-size:11px}
    .coin.kind-coin .face{width:34px;height:34px}
    .coin.kind-bar .face{width:44px;height:24px}
  }

  .coin-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  /* 하위 3단은 동전, 상위 2단은 골드바 — 실물 칩을 집어 올리는 느낌 */
  .coin{flex:1;min-width:56px;height:46px;border:none;background:none;padding:0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:transform .1s}
  .coin:hover{transform:translateY(-2px)}
  .coin:active{transform:scale(.94)}
  .coin .face{display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-weight:700;font-size:12.5px;color:#4a3608;
    text-shadow:0 1px 0 rgba(255,255,255,.4);filter:saturate(.35) brightness(.62);transition:filter .12s}
  .coin.active .face{filter:none}
  .coin.kind-coin .face{width:42px;height:42px;border-radius:50%;
    background:radial-gradient(circle at 34% 28%,#ffe9a3 0%,#e6bd52 45%,#a9812a 100%);
    border:2.5px solid #f5d98a;box-shadow:0 2px 5px rgba(0,0,0,.55),inset 0 0 0 3px rgba(255,255,255,.18)}
  .coin.kind-bar .face{width:52px;height:30px;border-radius:4px;
    background:linear-gradient(160deg,#fff0b8 0%,#f0cd66 38%,#c99b2c 70%,#8f6a18 100%);
    border:1.5px solid #ffe9a0;box-shadow:0 3px 6px rgba(0,0,0,.6),inset 0 1.5px 0 rgba(255,255,255,.5)}
  .coin.active .face{box-shadow:0 2px 6px rgba(0,0,0,.55),0 0 0 3px var(--gold),0 0 14px rgba(212,175,55,.55)}

  /* ── 로그인 화면 ─────────────────────────────────────────────
     로그인 전에는 보여줄 콘텐츠가 없어서, 카드 하나를 위에 붙여두면 아래가 텅 빈다.
     화면 높이를 다 써서 가운데에 세로로 세운다. login-page 클래스가 붙은 페이지에서만 적용. */
  .login-page main{display:flex;align-items:center;justify-content:center;
    min-height:calc(100vh - 190px);padding-top:0}
  .login-page .tabs{display:none}          /* 로그인 전에는 탭 이동이 의미가 없다 */
  .login-page .loginbtn{display:none}      /* 화면 가운데 버튼과 중복이라 헤더 쪽은 감춘다 */
  .login-hero{text-align:center;max-width:460px;width:100%}
  .login-mark{width:64px;height:64px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
    background:var(--panel);border:1px solid var(--line);border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.55)}
  .login-mark svg{width:38px;height:38px}
  .login-title{font-family:'Black Han Sans',sans-serif;font-weight:400;
    font-size:40px;line-height:1.15;letter-spacing:.5px;margin:0 0 10px;color:var(--gold)}
  .login-title span{color:var(--txt)}
  .login-sub{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 26px}
  /* 디스코드 브랜드 색(blurple) — 어느 서비스로 로그인하는지 한눈에 보이게 */
  .login-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;
    width:100%;max-width:300px;padding:15px 22px;border-radius:12px;
    background:#5865f2;color:#fff;font-weight:700;font-size:15.5px;text-decoration:none;
    box-shadow:0 8px 22px rgba(88,101,242,.34);transition:transform .12s,background .12s,box-shadow .12s}
  .login-cta:hover{background:#4752e0;transform:translateY(-2px);box-shadow:0 12px 28px rgba(88,101,242,.44)}
  .login-cta:active{transform:translateY(0) scale(.99)}
  .login-note{color:var(--muted);font-size:12.5px;margin:14px 0 0}
  .login-games{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:30px}
  .login-game{display:inline-flex;align-items:center;gap:6px;
    padding:7px 12px;border:1px solid var(--line);border-radius:999px;
    background:var(--panel);color:var(--muted);font-size:12.5px}
  .login-game svg{width:14px;height:14px;color:var(--gold)}
  @media (max-width:640px){
    .login-title{font-size:32px}
    .login-page main{min-height:calc(100vh - 160px)}
  }

  .bump{animation:statBump .3s ease}
  .gold-flash{animation:goldFlash .6s ease-out}

  /* ── 바카라 ──────────────────────────────────────────────────
     색은 실제 바카라 테이블 관례를 그대로 따른다: 플레이어=파랑, 뱅커=빨강, 타이=초록.
     이 배색은 바카라를 아는 사람에게는 설명 없이 읽히고, 모르는 사람에게도 세 갈래가 구분된다. */
  .bacc-bead-head{display:flex;justify-content:space-between;align-items:center;
    font-size:11px;color:var(--muted);margin-bottom:7px}
  .bacc-bead-legend{display:flex;align-items:center;gap:4px;font-size:10.5px}
  .bacc-bead-legend .bacc-bead{width:14px;height:14px;font-size:0;margin-left:4px}
  .bacc-bead-row{display:flex;gap:4px;overflow-x:auto;padding-bottom:5px;margin-bottom:10px;
    scrollbar-width:none}
  .bacc-bead-row::-webkit-scrollbar{display:none}
  .bacc-bead-empty{font-size:12px;color:var(--muted)}
  /* 구슬판 — 실제 테이블에 붙어 있는 그 판. 최신이 왼쪽.
     광택 있는 원색 구체로 그렸더니 이 사이트의 절제된 톤에서 혼자 튀었다.
     그래서 베팅 상자(.m-player/.m-banker)와 같은 언어로 맞춘다:
     어두운 틴트 배경 + 같은 계열의 테두리 + 그 색의 밝은 글자. 그라디언트도 그림자도 쓰지 않는다. */
  .bacc-bead{display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:19px;height:19px;border-radius:50%;font-size:10px;font-weight:700;
    font-family:var(--mono);letter-spacing:0;border:1px solid transparent}
  .bacc-bead.p{background:#12233a;border-color:#2c4f80;color:#7fb8ff}
  .bacc-bead.b{background:#33201a;border-color:#6b3d2c;color:#ffa287}
  .bacc-bead.t{background:#14291f;border-color:#2c5a41;color:#6fce9d}

  .bacc-table{background:radial-gradient(120% 100% at 50% 0%, #143024 0%, #0c1a14 70%);
    border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:10px}
  .bacc-status{font-family:var(--mono);font-size:12.5px;color:var(--muted);
    text-align:center;margin-bottom:14px;min-height:16px}
  .bacc-status.live{color:var(--gold)}
  .bacc-seats{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:start}
  .bacc-vs{align-self:center;font-family:var(--mono);font-size:12px;color:#4c6659;font-weight:700}
  /* 두 자리는 좌우 대칭이다. 이긴 쪽만 테두리가 살아나고 진 쪽은 흐려진다 */
  .bacc-seat{text-align:center;padding:12px 10px;border-radius:12px;
    border:1px solid transparent;transition:border-color .2s,opacity .2s,background .2s}
  .bacc-seat.side-player{background:rgba(28,86,184,.10)}
  .bacc-seat.side-banker{background:rgba(192,31,38,.10)}
  .bacc-seat.win{border-color:var(--win);box-shadow:0 0 0 1px var(--win) inset}
  .bacc-seat.lose{opacity:.45}
  .bacc-name{font-size:11.5px;font-weight:800;letter-spacing:1.4px;margin-bottom:9px}
  .side-player .bacc-name{color:#5fb0ff}
  .side-banker .bacc-name{color:#ff8f6b}
  /* 세 번째 카드가 붙어도 자리가 흔들리지 않도록 최소 높이를 카드 높이로 잡는다 */
  .bacc-hand{display:flex;gap:7px;justify-content:center;min-height:72px}
  /* 끗수는 이 게임의 결론이라 가장 크게 — 카드보다 먼저 눈에 들어와야 한다 */
  .bacc-total{font-family:var(--mono);font-size:30px;font-weight:700;line-height:1.1;
    margin-top:10px;color:var(--txt)}
  .side-player .bacc-total{color:#8cc6ff}
  .side-banker .bacc-total{color:#ffab8f}

  /* 플레이어·타이·뱅커는 "한 판에 하나 고르는" 배타적 선택이라 반드시 한 줄에 나란히 둔다.
     세로로 쌓이면 세 개를 한눈에 비교할 수 없고 화면만 길어진다.
     칩 더미를 낮게 잡아 좁은 창에서도 세 칸이 들어간다. */
  .market-row.bacc-main{grid-template-columns:1fr 1fr 1fr}
  .market-row.bacc-pair{grid-template-columns:1fr 1fr}
  .market-row.bacc-main .m-pile{height:56px}
  .market-row.bacc-main .m-body{padding:5px 6px 0}
  .market.m-player{background:#12233a;border-color:#22406b}
  .market.m-banker{background:#33201a;border-color:#5e3527}
  .market.m-tie{background:#123024;border-color:#1f5e3c}
  .market.m-pair{background:#1a1a22;border-color:#33333f}
  .market.m-pair .m-pile{height:58px}
  .market.m-pair .m-label{font-size:11.5px}

  /* 세 칸 배치는 끝까지 지키고, 좁아지면 글자와 칩만 줄인다 */
  @media (max-width:620px){
    .bacc-seats{gap:8px}
    .bacc-total{font-size:24px}
    .market-row.bacc-main .m-label{font-size:11px}
    .market-row.bacc-main .m-sub{font-size:9.5px}
    .market-row.bacc-main .m-top .m-odds{font-size:15px}
    .market-row.bacc-main .m-pile{height:44px}
  }

  /* 승자 상자(MASTER·SHARK)의 점등 전적 — 상단 전적 띠를 없애고 각 상자 안으로 옮겼다.
     등급 상자의 붉은 점을 그대로 쓰면 어느 쪽 승인지 구분이 안 되므로,
     자리 이름과 같은 색으로 켜 준다(파랑=MASTER, 주황=SHARK). 무승부는 초록. */
  .m-dots.w-master .dot.hit{background:radial-gradient(circle at 35% 30%,#8cc6ff,#2f6fc4);
    border-color:#a8d5ff;box-shadow:0 0 5px rgba(95,176,255,.6)}
  .m-dots.w-shark .dot.hit{background:radial-gradient(circle at 35% 30%,#ffb094,#c25a34);
    border-color:#ffc7b2;box-shadow:0 0 5px rgba(255,143,107,.6)}
  .m-dots .dot.tie{background:#1d3b2c;border-color:#356b4e}

  /* ── 좁은 창의 칩 줄 ──────────────────────────────────────────
     참가자 패널이 옆에 남아 있는 구간에서는 본문이 450px 안팎이라,
     기본 크기(코인 56px + 간격 10px)로는 코인 6개와 Clear Screen이 한 줄에 못 들어가
     칩이 둘째 줄로 접힌다. 접히면 칩 위치가 게임마다 달라 보이고 아래 여백도 늘어난다.
     칩을 집는 느낌은 유지하면서 한 줄에 들어가도록 지름만 줄인다. */
  @media (max-width:1000px){
    .coin-row{gap:6px}
    .coin{min-width:42px;height:40px}
    .coin .face{font-size:11px}
    .coin.kind-coin .face{width:36px;height:36px;border-width:2px}
    .coin.kind-bar .face{width:44px;height:26px}
    .game-controls .btn{padding:9px 12px;font-size:12.5px}
  }
  @media (max-width:820px){
    .coin-row{gap:4px}
    .coin{min-width:36px;height:36px}
    .coin .face{font-size:10px}
    .coin.kind-coin .face{width:32px;height:32px}
    .coin.kind-bar .face{width:38px;height:23px}
    .game-controls .btn{padding:8px 10px;font-size:12px}
  }

  /* ── 좁은 창의 포커 테이블 ────────────────────────────────────
     참가자 패널이 옆에 남아 있는 구간(700~1000px)에서는 본문이 450px 안팎인데
     카드가 가로로 9장(홀 2 + 보드 5 + 홀 2) 들어가야 한다.
     기본 크기(48px)로는 52px 넘쳐서 자리와 보드가 상자 밖으로 삐져나온다(실측).
     자리 최소폭·간격·카드 크기를 함께 줄여 한 화면에 담는다.
     (이 블록은 .poker-table/.seat 기본값보다 반드시 뒤에 있어야 한다 —
      앞에 두면 같은 명시도라 뒤의 기본값에 덮인다) */
  @media (min-width:701px) and (max-width:1000px){
    .poker-table{padding:14px 8px}
    .poker-seats{gap:6px}
    .seat{min-width:0}
    .seat-name{font-size:10px;letter-spacing:.6px}
    .seat-cat{font-size:10.5px}
    .hand,.board{gap:4px}
    .pcard{width:32px;height:48px;border-radius:5px}
  }

  /* ── 좁은 창의 그래프게임 컨트롤 ──────────────────────────────
     베팅 수량과 자동 캐시아웃을 두 열로 두면, 참가자 패널이 옆에 남는 폭(본문 450px 안팎)에서
     한 열이 197px까지 좁아진다. 자동 캐시아웃 칩은 "10.00x"까지 들어가야 해서 4개가 200px을
     넘고, 그만큼 상자 밖으로 밀려 나간다(실측 13px).
     칸을 억지로 줄이면 숫자가 잘리므로 이 구간에서는 위아래로 쌓아 각 칸에 폭을 다 준다. */
  @media (max-width:820px){
    .field-grid{grid-template-columns:1fr;gap:11px}
  }