/* 공통 모바일 게임 셸 (Game Shell)
   - 모든 게임이 같은 위치·크기의 HUD/메뉴 버튼/메뉴 시트/결과 창을 쓰도록 하는 마지막 스타일 계층이다.
   - 특정 기종 해상도에 맞춘 px 분기 대신 화면의 짧은 변(vmin)에 비례하는 토큰과 방향(orientation)만 사용한다.
   - 규칙과 새 게임 적용 방법: docs/MOBILE_GAME_UI_STANDARD.md
   - 이 파일은 index.html에서 가장 마지막 스타일로 불러와야 한다. */

/* ── 1. 토큰 ─────────────────────────────────────────────── */
html.mobile-layout{
  --gs-safe-t:env(safe-area-inset-top,0px);
  --gs-safe-r:env(safe-area-inset-right,0px);
  --gs-safe-b:env(safe-area-inset-bottom,0px);
  --gs-safe-l:env(safe-area-inset-left,0px);
  --gs-vh:var(--game-viewport-height,100dvh);
  /* 짧은 변 기준 비례 단위: 320px 폰에서 최소값, 430px 이상에서 최대값 */
  --gs-gap:clamp(4px,1.5vmin,8px);
  --gs-pad:clamp(6px,2.2vmin,12px);
  --gs-tap:clamp(44px,11vmin,48px);
  --gs-hud-h:calc(var(--gs-tap) + var(--gs-gap));
  --gs-radius:clamp(8px,2.6vmin,12px);
  --gs-font-xs:clamp(11px,2.9vmin,12px);
  --gs-font-sm:clamp(12px,3.3vmin,13.5px);
  --gs-font-md:clamp(14px,3.8vmin,16px);
  --gs-font-lg:clamp(16px,4.6vmin,20px);
  /* 메뉴 버튼이 차지하는 오른쪽 위 모서리 영역. 자체 HUD를 그리는 게임은 이 영역을 비워 둔다. */
  --gs-menu-reserve:calc(var(--gs-tap) + var(--gs-gap)*2);
  --gs-surface:#15171c;
  --gs-surface-2:#22242c;
  --gs-line:#ffffff1a;
  --gs-text:#eaf2ff;
  --gs-text-dim:#aebcd2;
  --gs-accent:#7a6cff;
  --gs-danger:#ff6478;
}

/* ── 2. 프레임: 게임 중에는 안전 영역만 남기고 화면 전체를 쓴다 ── */
html.mobile-layout body.game-active .shell{padding:var(--gs-safe-t) var(--gs-safe-r) var(--gs-safe-b) var(--gs-safe-l)!important}
/* backdrop-filter가 남아 있으면 이 패널이 고정 위치 요소(메뉴 버튼)의 기준이 되어 노치 여백이 두 번 더해진다. */
html.mobile-layout body.game-active #room>.panel.grow{margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* 방 제목 줄은 게임 중에 숨기고 메뉴 시트 머리글에서 보여 준다. */
html.mobile-layout body.game-active #room>.panel.grow>.section-title{display:none!important}
html.mobile-layout body.game-active #game{gap:0}
/* 화면 아래에 숨어 있는 사이트 바닥글이 남아 있으면 본문에 스크롤할 높이가 생겨, 입력 칸 포커스 같은 일로 게임 화면 전체가 위로 밀릴 수 있다. */
html.mobile-layout body.game-active>.public-site-footer{display:none}
/* 키보드가 올라올 때 브라우저가 보이는 영역을 아래로 밀면(iOS) 화면 위쪽이 잘린다. 게임 화면과 메뉴 버튼(4)이 보이는 영역을 따라가게 한다. */
html.mobile-layout body.game-active{top:var(--chat-viewport-top,0px);bottom:auto}

/* ── 3. HUD 막대: 타이머 · 점수 · 관전자, 오른쪽은 메뉴 버튼 자리 ── */
html.mobile-layout body.game-active #game>.game-head{display:flex;flex:0 0 var(--gs-hud-h)!important;flex-wrap:nowrap!important;align-items:center!important;gap:var(--gs-gap);height:var(--gs-hud-h);min-height:0!important;margin:0!important;padding:0 var(--gs-menu-reserve) 0 var(--gs-pad)!important;border:0;border-radius:0;background:var(--gs-surface);box-shadow:0 1px 0 var(--gs-line)}
html.mobile-layout body.game-active #game>.game-head #timer{flex:0 1 auto;min-width:0;max-width:52%;overflow:hidden;padding:5px 10px;border-radius:999px;background:#2c2e39;color:#d7d1ff;font:800 var(--gs-font-sm)/1.15 ui-monospace,Consolas,"Courier New",monospace;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body.game-active #game>.game-head #timer:empty{display:none}
html.mobile-layout body.game-active #game>.game-head #scores{display:block;flex:1 1 0;width:auto;min-width:0;order:0;overflow:hidden;color:var(--gs-text-dim);font-size:var(--gs-font-xs)!important;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body.game-active #game>.game-head .game-spectator-count{flex:0 0 auto;min-width:var(--gs-tap);min-height:40px;margin-left:0!important;padding:0 10px;border-radius:var(--gs-radius);font-size:var(--gs-font-xs)!important}
/* 좁은 HUD에서는 관전자가 있을 때만 숫자로 보여 준다. */
html.mobile-layout body.game-active #game>.game-head .game-spectator-count[data-count="0"]{display:none}
html.mobile-layout body.game-active #game>.game-head .game-spectator-count>span{display:none}
html.mobile-layout body.game-active #game>.game-head #spectator-box{flex:0 0 auto;font-size:var(--gs-font-xs)}

/* ── 4. 메뉴 버튼: 모든 게임·방향에서 오른쪽 위 같은 자리, 같은 크기 ── */
html.mobile-layout body.game-active #mobile-game-chat-toggle{position:fixed!important;z-index:150!important;top:calc(var(--chat-viewport-top,0px) + var(--gs-safe-t) + (var(--gs-hud-h) - var(--gs-tap))/2)!important;right:calc(var(--gs-safe-r) + var(--gs-gap))!important;bottom:auto!important;left:auto!important;display:flex!important;align-items:center;justify-content:center;width:var(--gs-tap)!important;min-width:var(--gs-tap)!important;height:var(--gs-tap)!important;min-height:var(--gs-tap)!important;padding:0!important;border-radius:var(--gs-radius)!important}
html.mobile-layout body.game-active #mobile-game-chat-toggle b{display:none!important}
html.mobile-layout body.game-active #mobile-game-chat-toggle>span{font-size:calc(var(--gs-tap)*.5)!important;line-height:1}
html.mobile-layout body.game-active #mobile-game-chat-toggle em{top:-4px!important;right:-4px!important;min-width:20px;height:20px;font-size:11px!important}

/* ── 5. 메뉴 시트: 세로는 아래에서 올라오는 시트, 가로는 오른쪽 시트(왼쪽 메뉴 · 오른쪽 채팅) ── */
html.mobile-layout body.game-active #room>#room-mobile-sidebar{top:calc(var(--gs-safe-t) + var(--gs-hud-h) + var(--gs-gap))!important;right:calc(var(--gs-safe-r) + var(--gs-gap))!important;bottom:calc(var(--gs-safe-b) + var(--gs-gap))!important;left:calc(var(--gs-safe-l) + var(--gs-gap))!important;border-radius:calc(var(--gs-radius) + 4px)!important}
html.mobile-layout body.game-active #room-mobile-sidebar>.room-chat-panel{padding:var(--gs-pad)!important;gap:var(--gs-gap)}
html.mobile-layout body.mobile-room-active.game-active.mobile-game-chat-open #room-mobile-sidebar .room-chat-panel h3{flex:0 0 auto;display:flex;align-items:center;min-height:var(--gs-tap);margin:0!important;padding:0 calc(var(--gs-tap) + var(--gs-gap)) 0 2px!important;font-size:var(--gs-font-md)!important;line-height:1.2}
html.mobile-layout body.mobile-room-active.game-active.mobile-game-chat-open #room-mobile-sidebar #room-chat-close{position:absolute;top:var(--gs-pad)!important;right:var(--gs-pad)!important;width:var(--gs-tap)!important;min-width:var(--gs-tap)!important;height:var(--gs-tap)!important;min-height:var(--gs-tap)!important;padding:0;border-radius:var(--gs-radius)!important;font-size:22px!important}
#mobile-game-menu-room,#mobile-game-menu-chat-label{margin:0}
#mobile-game-menu-room[hidden],#mobile-game-menu-chat-label[hidden]{display:none!important}
html.mobile-layout body.game-active #mobile-game-menu-room{flex:0 0 auto;overflow:hidden;margin-top:calc(var(--gs-gap)*-1);color:var(--gs-text-dim);font-size:var(--gs-font-xs);text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body.game-active #mobile-game-menu-chat-label{flex:0 0 auto;color:var(--gs-text-dim);font-size:var(--gs-font-xs);font-weight:800}
html.mobile-layout body.mobile-room-active.game-active.mobile-game-chat-open #mobile-game-menu-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,124px),1fr));gap:var(--gs-gap);flex:0 0 auto;margin:0}
html.mobile-layout body.mobile-room-active.game-active.mobile-game-chat-open #mobile-game-menu-actions button{min-width:0;min-height:var(--gs-tap);padding:6px 10px;border-radius:var(--gs-radius);font-size:var(--gs-font-sm);font-weight:800;line-height:1.25}
html.mobile-layout body.mobile-room-active.game-active.mobile-game-chat-open #room-chat{font-size:var(--gs-font-sm)}
html.mobile-layout body.mobile-room-active.game-active.mobile-game-chat-open #room-mobile-sidebar .send{display:flex;gap:var(--gs-gap);margin:0}
html.mobile-layout body.mobile-room-active.game-active.mobile-game-chat-open #room-mobile-sidebar .send input{flex:1;min-width:0;height:var(--gs-tap);min-height:0;font-size:16px}
html.mobile-layout body.mobile-room-active.game-active.mobile-game-chat-open #room-mobile-sidebar .send button{min-width:calc(var(--gs-tap)*1.4);height:var(--gs-tap);min-height:0;font-size:var(--gs-font-sm)}
@media (orientation:landscape){
  html.mobile-layout body.game-active #room>#room-mobile-sidebar{top:calc(var(--gs-safe-t) + var(--gs-gap))!important;left:auto!important;width:min(calc(100vw - var(--gs-safe-l) - var(--gs-safe-r) - var(--gs-gap)*2),520px)!important;transform:translateX(calc(100% + 24px))}
  html.mobile-layout body.mobile-room-active.game-active.mobile-game-chat-open #room>#room-mobile-sidebar{transform:none}
  html.mobile-layout body.mobile-room-active.game-active.mobile-game-chat-open #room-mobile-sidebar>.room-chat-panel{grid-template-columns:clamp(132px,30%,176px) minmax(0,1fr)!important;grid-template-rows:var(--gs-tap) minmax(0,1fr) auto var(--gs-tap)!important;gap:var(--gs-gap) var(--gs-pad)!important;padding:var(--gs-pad)!important}
  html.mobile-layout body.mobile-room-active.game-active.mobile-game-chat-open #room-mobile-sidebar .room-chat-panel h3{grid-column:1;grid-row:1;padding:0 2px!important}
  html.mobile-layout body.game-active #mobile-game-menu-room{display:none}
  html.mobile-layout body.mobile-room-active.game-active.mobile-game-chat-open #mobile-game-menu-actions{display:flex;grid-column:1;grid-row:2/5;gap:var(--gs-gap);padding:0 var(--gs-gap) 0 0}
  html.mobile-layout body.mobile-room-active.game-active.mobile-game-chat-open #mobile-game-menu-actions button{min-height:var(--gs-tap);padding:6px 8px;font-size:var(--gs-font-sm);border-radius:var(--gs-radius)}
  html.mobile-layout body.mobile-room-active.game-active.mobile-game-chat-open #mobile-game-menu-chat-label{grid-column:2;grid-row:1;align-self:center;padding-right:calc(var(--gs-tap) + var(--gs-gap))}
  html.mobile-layout body.mobile-room-active.game-active.mobile-game-chat-open #room-chat{font-size:var(--gs-font-sm)}
  html.mobile-layout body.mobile-room-active.game-active.mobile-game-chat-open #room-mobile-sidebar .send input,html.mobile-layout body.mobile-room-active.game-active.mobile-game-chat-open #room-mobile-sidebar .send button{height:var(--gs-tap)}
  html.mobile-layout body.mobile-room-active.game-active.mobile-game-chat-open #room-mobile-sidebar .send button{font-size:var(--gs-font-sm)}
  html.mobile-layout body.mobile-room-active.game-active.mobile-game-chat-open #room-chat-close{top:var(--gs-pad)!important;right:var(--gs-pad)!important}
}

/* ── 6. 창 공통 · 결과 창 ── */
/* 기본 dialog의 min-width:360px 때문에 360px 이하 화면에서 창이 화면 밖으로 나가던 문제를 막는다. */
html.mobile-layout dialog{min-width:min(360px,calc(100vw - var(--gs-safe-l) - var(--gs-safe-r) - var(--gs-pad)*2))}
html.mobile-layout #result-dialog{box-sizing:border-box;min-width:0;width:min(calc(100vw - var(--gs-safe-l) - var(--gs-safe-r) - var(--gs-pad)*2),520px);max-width:none;max-height:calc(var(--gs-vh) - var(--gs-safe-t) - var(--gs-safe-b) - var(--gs-pad)*2);padding:var(--gs-pad) calc(var(--gs-pad) + 2px);overflow:auto;overscroll-behavior:contain}
html.mobile-layout #result-dialog h2{margin:0 0 var(--gs-gap);font-size:var(--gs-font-lg)}
html.mobile-layout #result-dialog table{width:100%;table-layout:auto;font-size:var(--gs-font-sm)}
html.mobile-layout #result-dialog th{font-size:var(--gs-font-xs);white-space:nowrap}
html.mobile-layout #result-dialog th,html.mobile-layout #result-dialog td{padding:8px 6px;word-break:keep-all;overflow-wrap:anywhere}
html.mobile-layout #result-dialog td:first-child,html.mobile-layout #result-dialog th:first-child{width:2.6em;text-align:center}
html.mobile-layout #result-dialog td:first-child,html.mobile-layout #result-dialog td:last-child{white-space:nowrap}
html.mobile-layout #result-dialog .result-auto-return{margin:var(--gs-gap) 0 0;font-size:var(--gs-font-xs)}
html.mobile-layout #result-dialog button{min-height:var(--gs-tap);font-size:var(--gs-font-md)}
html.mobile-layout #result-dialog[open]>button{margin-top:var(--gs-gap)}
/* 낮은 가로 화면: 두 버튼을 한 줄에 놓아 순위 표에 줄을 더 준다. 표는 남는 높이 안에서 스크롤한다. */
@media (orientation:landscape){
  html.mobile-layout #result-dialog[open]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr) auto auto;column-gap:var(--gs-gap)}
  html.mobile-layout #result-dialog[open]>:not(button),html.mobile-layout #result-dialog[open]>button:only-of-type{grid-column:1/-1}
  html.mobile-layout #result-dialog[open]>#results{min-height:0}
}

/* ── 7. 터치 기본기: 게임 화면에서 확대·선택·당겨서 새로고침이 끼어들지 않게 한다 ── */
html.mobile-layout body.game-active #game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:manipulation}
html.mobile-layout body.game-active #game :is(input,textarea){-webkit-user-select:text;user-select:text}
/* 버튼마다 touch-action을 다시 정하지 않는다. 타일·말처럼 끌어 옮기는 버튼은 게임이 정한 none을 유지해야 드래그가 스크롤로 넘어가지 않는다. */

/* ── 8. 가로 전용 게임의 회전 안내 ── */
#gs-rotate-overlay{position:fixed;z-index:400;inset:0;display:grid;place-items:center;padding:calc(var(--gs-safe-t,0px) + 16px) 16px calc(var(--gs-safe-b,0px) + 16px);background:#0c0c0ff2;backdrop-filter:blur(6px)}
#gs-rotate-overlay[hidden]{display:none}
#gs-rotate-overlay .gs-rotate-card{display:grid;justify-items:center;gap:12px;width:min(100%,340px);padding:22px 18px;border:1px solid #ffffff24;border-radius:18px;background:#1d1e25;color:#eaf2ff;text-align:center;box-shadow:0 24px 70px #000b}
#gs-rotate-overlay b{font-size:18px}
#gs-rotate-overlay p{margin:0;color:#c6d3e8;font-size:14px}
#gs-rotate-overlay small{color:#93a4bd;font-size:12px;line-height:1.5}
#gs-rotate-overlay button{width:100%;min-height:46px;border-radius:12px;font-size:15px;font-weight:800}
#gs-rotate-overlay .gs-rotate-icon{width:74px;height:74px;display:grid;place-items:center}
#gs-rotate-overlay .gs-rotate-icon i{display:block;width:34px;height:58px;border:3px solid #9fb4ff;border-radius:8px;animation:gs-rotate-hint 2.2s ease-in-out infinite}
@keyframes gs-rotate-hint{0%,20%{transform:rotate(0)}55%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){#gs-rotate-overlay .gs-rotate-icon i{animation:none;transform:rotate(-90deg)}}

/* ── 9. 연결 끊김 안내(모든 게임 · 로비 · PC 공통, app.js syncConnectionStatus) ──
   로비 · PC는 화면 위 가운데의 작은 띠. 모바일 게임 중에는 짧은 한 줄('다시 연결 중…')을 메뉴 버튼 옆에 붙인다:
   세로는 HUD 줄 안에서 메뉴 버튼 왼쪽, 가로는 메뉴 버튼 바로 아래(오른쪽 HUD 열). 게임판은 가리지 않는다.
   누르는 동작을 막지 않고, 아주 짧은 끊김에 깜빡이지 않게 조금 늦게 나타난다. 테트리스는 게임판 위에 자체 안내를 띄우므로 게임 중에는 겹쳐 띄우지 않는다. */
#connection-status{position:fixed;z-index:300;top:calc(env(safe-area-inset-top,0px) + 8px);left:50%;display:flex;align-items:center;justify-content:center;gap:8px;max-width:calc(100vw - 32px);min-height:32px;padding:5px 14px;border:1px solid #ff8a9a80;border-radius:999px;background:#2a0f18f0;color:#ffe6ea;font-size:13px;font-weight:800;line-height:1.2;text-align:center;word-break:keep-all;text-wrap:balance;box-shadow:0 8px 24px #0009;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .2s,transform .2s,visibility 0s .2s}
#connection-status>i{flex:none;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:gs-connection-spin .9s linear infinite}
#connection-status:is([data-state="lost"],[data-state="restored"]){opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s .4s,transform .2s .4s,visibility 0s .4s}
#connection-status[data-state="restored"]{border-color:#5ee0a680;background:#0d2a1ef0;color:#dcffee;transition-delay:0s}
#connection-status[data-state="restored"]>i{width:8px;height:8px;border:0;background:currentColor;animation:none}
#connection-status>b{display:none;font:inherit}
html.mobile-layout body.game-active #connection-status{top:calc(var(--gs-safe-t) + (var(--gs-hud-h) - var(--gs-tap)*.7)/2);right:calc(var(--gs-safe-r) + var(--gs-menu-reserve) - var(--gs-gap));left:auto;gap:6px;max-width:none;min-height:calc(var(--gs-tap)*.7);padding:0 10px;font-size:var(--gs-font-xs);line-height:1;white-space:nowrap;transform:translateY(-6px)}
html.mobile-layout body.game-active #connection-status:is([data-state="lost"],[data-state="restored"]){transform:none}
html.mobile-layout body.game-active #connection-status>span{display:none}
html.mobile-layout body.game-active #connection-status>b{display:inline}
html.mobile-layout body.game-active #connection-status>i{width:10px;height:10px}
@media (orientation:landscape){html.mobile-layout body.game-active #connection-status{top:calc(var(--gs-safe-t) + var(--gs-hud-h));right:calc(var(--gs-safe-r) + var(--gs-gap))}}
body.tetris-active #connection-status,body.has-auth:not(#_) #connection-status{display:none}
@keyframes gs-connection-spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){#connection-status>i{animation:none}}

/* ══════════════════════════════════════════════════════════════
   아래부터는 구역별 규칙이다. 각 구역은 BEGIN/END 표시 안에서만 고친다.
   게임 규칙은 body[data-gs-game="<게임 id>"] 로 범위를 제한한다.
   ══════════════════════════════════════════════════════════════ */


/* ── BEGIN lobby ─────────────────────────────── */
/* ── END lobby ───────────────────────────────── */



/* ── BEGIN hub-dialogs ─────────────────────────────── */
/* ── END hub-dialogs ───────────────────────────────── */



/* ── BEGIN room-create ─────────────────────────────── */
/* ── END room-create ───────────────────────────────── */



/* ── BEGIN waiting-room ─────────────────────────────── */
/* ── END waiting-room ───────────────────────────────── */



/* ── BEGIN minesweeper ─────────────────────────────── */
/* 상단 줄(시간 · 점수 줄)을 없애고 판이 화면을 쓴다. 칸 크기는 app.js가 .mine-board-frame의 실제 크기로 계산한다.
   세로: [지뢰 수 · 표정 · 시간][≡] / 참가자 이름표(혼자가 아닐 때) / 판 / 안내 한 줄 / [열기 | 깃발][전체·확대]
   가로: 왼쪽 열(표정 · 지뢰 수 · 시간 · 참가자 이름표 · 안내) | 판 | 오른쪽 열(≡ 자리 · 전체·확대 · 열기/깃발) */
html.mobile-layout body[data-gs-game="minesweeper"].game-active #game>.game-head,html.mobile-layout body[data-gs-game="minesweeper"].game-active #spectator-help{display:none}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area{--mine-tool-h:calc(var(--gs-tap) + 6px);--mine-hud-item:calc(var(--gs-hud-h) - var(--gs-gap)*2);display:grid;align-items:stretch;justify-content:stretch;gap:var(--gs-gap);padding:0 var(--gs-gap) var(--gs-gap);overflow:hidden;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--gs-hud-h) auto minmax(0,1fr) auto minmax(var(--mine-tool-h),auto);grid-template-areas:"hud" "players" "board" "legend" "tools"}
/* 내 판이 끝나 조작 줄이 비어도 판이 움직이지 않게 자리를 남긴다. 처음부터 관전자인 화면은 그 자리까지 판에 준다. */
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area.watch-only{grid-template-rows:var(--gs-hud-h) auto minmax(0,1fr) auto auto}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-console{display:contents}
/* 지뢰 수 · 표정 · 시간 */
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-hud{grid-area:hud;display:flex;align-items:center;gap:var(--gs-gap);min-width:0;min-height:0;margin:0;padding:0 var(--gs-menu-reserve) 0 0;border:0;border-radius:0;background:none;box-shadow:none}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-led{flex:0 1 auto;flex-direction:row;align-items:center;gap:6px;min-width:0;height:var(--mine-hud-item);padding:0 10px;border-radius:var(--gs-radius)}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-led::before{content:"💣";font-size:var(--gs-font-md);line-height:1}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-led:last-child::before{content:"⏱\FE0F"}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-led span{display:none}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-led strong{font-size:var(--gs-font-lg);letter-spacing:.06em}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-face{flex:0 0 auto;width:var(--mine-hud-item);height:var(--mine-hud-item);border-radius:var(--gs-radius);font-size:var(--gs-font-lg)}
/* 참가자 이름표: 이름 · 연 칸 수(끝났으면 결과 표시) · 진행 막대 */
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-players{grid-area:players;display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:var(--gs-gap);min-width:0;max-height:calc(var(--gs-tap)*3 + var(--gs-gap)*2);overflow:hidden auto;scrollbar-width:none}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-chip{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;min-width:0;height:calc(var(--gs-tap) - 4px);min-height:0;margin:0;padding:0 9px;border:1px solid var(--gs-line);border-radius:var(--gs-radius);color:var(--gs-text-dim);background:linear-gradient(#49c4f0,#49c4f0) left bottom/var(--mine-progress,0%) 3px no-repeat,var(--gs-surface-2);font-size:var(--gs-font-xs);font-weight:700;line-height:1.2;text-align:left;opacity:1;transform:none}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-chip:disabled{cursor:default}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-chip b{overflow:hidden;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-chip span{font-variant-numeric:tabular-nums;white-space:nowrap}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-chip.me{border-color:#8f84ff8c;color:var(--gs-text)}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-chip[data-state="failed"]{background:linear-gradient(#ff6478,#ff6478) left bottom/var(--mine-progress,0%) 3px no-repeat,#3a1b27}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-chip[data-state="cleared"]{background:linear-gradient(#65d6a0,#65d6a0) left bottom/100% 3px no-repeat,#16332b}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-chip[aria-pressed="true"]{border-color:#69d4ff;box-shadow:inset 0 0 0 1px #69d4ff;color:#fff}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-watchers{order:99;align-self:center;padding:0 6px;color:var(--gs-text-dim);font-size:var(--gs-font-xs);white-space:nowrap}
/* 판: 자리 전체가 터치 영역이고 캔버스는 가운데. 확대한 큰 판은 끌어서 옮긴다(스크롤 막대 대신 가장자리 빛으로 더 있음을 알린다). */
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-board-frame{grid-area:board;display:flex;min-width:0;min-height:0;max-width:none;padding:0;overflow:hidden;border:0;border-radius:var(--gs-radius);background:none;box-shadow:none;overscroll-behavior:contain}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-board{margin:auto;box-shadow:0 0 0 1px #3b4f68}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area.flag-mode #mine-board{box-shadow:0 0 0 2px #ffc857}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area.spectating #mine-board{box-shadow:0 0 0 2px #57bdd8}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area.cleared #mine-board{box-shadow:0 0 0 2px #65d6a0,0 0 22px #43d49166}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area.failed #mine-board{box-shadow:0 0 0 2px #d65b67,0 0 22px #ff405566}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-edge{grid-area:board;display:block;z-index:3;border-radius:var(--gs-radius);pointer-events:none;background:linear-gradient(90deg,#a99bffb3,#a99bff00) left center/calc(var(--edge-l,0)*10px) 100% no-repeat,linear-gradient(270deg,#a99bffb3,#a99bff00) right center/calc(var(--edge-r,0)*10px) 100% no-repeat,linear-gradient(180deg,#a99bffb3,#a99bff00) center top/100% calc(var(--edge-t,0)*10px) no-repeat,linear-gradient(0deg,#a99bffb3,#a99bff00) center bottom/100% calc(var(--edge-b,0)*10px) no-repeat}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-pause{grid-area:board;position:static;place-self:center;z-index:5;font-size:var(--gs-font-sm);transform:none}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-legend{grid-area:legend;display:block;margin:0;padding:0 4px;overflow:hidden;color:var(--gs-text-dim);font-size:var(--gs-font-xs);line-height:1.35;text-align:center;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-legend span::before{content:none}
/* 조작: 탭 동작 전환(열기 · 깃발)과 큰 판의 전체 보기 전환은 엄지가 닿는 자리에 둔다 */
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-tools{grid-area:tools;display:flex;gap:var(--gs-gap);min-width:0;margin:0}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-tools button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:var(--mine-tool-h);margin:0;padding:0 12px;border-radius:var(--gs-radius);font-size:var(--gs-font-md);font-weight:800;line-height:1.2;white-space:nowrap;transform:none}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-tools i{font-size:1.15em;font-style:normal;line-height:1}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-mode{flex:1 1 0;min-width:0;overflow:hidden;border:1px solid var(--gs-line);border-radius:var(--gs-radius)}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-mode button{flex:1 1 0;border:0;border-radius:0;color:var(--gs-text-dim);background:var(--gs-surface-2)}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-mode button+button{border-left:1px solid var(--gs-line)}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-mode button[aria-pressed="true"]{color:#fff;background:linear-gradient(135deg,#7a6cff,#5b4de0)}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-mode button[data-mine-mode="flag"][aria-pressed="true"]{color:#221300;background:linear-gradient(135deg,#ffc857,#f09a2b)}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-zoom{flex:0 0 auto;border:1px solid var(--gs-line);color:var(--gs-text);background:var(--gs-surface-2)}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-results{flex:1 1 0}
/* 종료 카드: 판을 덮지 않게 아래쪽(가로는 왼쪽 아래)에 붙인 작은 카드. 카드 밖은 그대로 누를 수 있다. */
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-finish-overlay{inset:var(--gs-gap);display:flex;align-items:flex-end;justify-content:center;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-finish-overlay article{grid-template-columns:auto minmax(0,1fr);align-items:center;justify-items:start;gap:2px 10px;width:100%;max-height:100%;padding:var(--gs-pad);border-radius:calc(var(--gs-radius) + 4px);background:linear-gradient(150deg,#202229,#111216);text-align:left;pointer-events:auto}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-finish-burst{display:none}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-finish-icon{grid-row:1/3;width:calc(var(--gs-tap) - 4px);height:calc(var(--gs-tap) - 4px);font-size:var(--gs-font-lg);box-shadow:none}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-finish-overlay small{font-size:var(--gs-font-xs);letter-spacing:.12em}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-finish-overlay h2{font-size:var(--gs-font-lg);line-height:1.2}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-finish-overlay p{grid-column:1/-1;margin:4px 0 0;font-size:var(--gs-font-sm);line-height:1.4}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-finish-overlay strong{grid-column:1/-1;justify-self:stretch;min-height:0;padding:6px 10px;font-size:var(--gs-font-xs);line-height:1.45}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-finish-actions{grid-column:1/-1;justify-self:stretch;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--gs-gap);margin-top:6px}
html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-finish-overlay button{min-width:0;min-height:var(--gs-tap);margin:0;padding:0 8px;font-size:var(--gs-font-sm);font-weight:800;transform:none}
@media (orientation:landscape){
  html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area{padding:var(--gs-gap);grid-template-columns:clamp(124px,24%,216px) minmax(0,1fr) var(--gs-menu-reserve);grid-template-rows:minmax(var(--gs-hud-h),auto) minmax(0,1fr) auto;grid-template-areas:"hud board ." "players board tools" "legend board tools"}
  html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area.watch-only{grid-template-rows:minmax(var(--gs-hud-h),auto) minmax(0,1fr) auto}
  html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-hud{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;align-items:stretch;padding:0}
  html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-face{grid-column:1;grid-row:1/3;width:calc(var(--gs-tap) - 4px);height:auto}
  html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-led{grid-column:2;grid-row:1;justify-content:space-between;height:calc(var(--gs-tap)*.7)}
  html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-led:last-child{grid-row:2}
  html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-players{grid-template-columns:minmax(0,1fr);align-content:start;max-height:none}
  /* 5명부터는 두 줄로 나눠 스크롤 없이 모두 보이게 한다. */
  html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-players.many{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-players.many .mine-chip{gap:3px;padding:0 5px}
  html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-legend{align-self:end;padding:0;line-height:1.3;text-align:left;white-space:normal;word-break:keep-all}
  html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-tools{flex-direction:column;justify-content:flex-end;align-self:end}
  html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-tools button{flex-direction:column;gap:2px;min-height:calc(var(--gs-tap) + 12px);padding:4px 2px;font-size:var(--gs-font-xs);white-space:normal;word-break:keep-all}
  html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-mode{flex:0 0 auto;flex-direction:column}
  html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-mode button{flex:0 0 auto}
  html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-mode button+button{border-top:1px solid var(--gs-line);border-left:0}
  html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-zoom{order:-1}
  html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area #mine-results{flex:0 0 auto}
  html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-finish-overlay{justify-content:flex-start}
  html.mobile-layout body[data-gs-game="minesweeper"] #mine-play-area .mine-finish-overlay article{width:min(300px,56%)}
}
/* ── END minesweeper ───────────────────────────────── */



/* ── BEGIN applegame ─────────────────────────────── */
/* 상단 줄(방 제목 · HUD 막대)을 없애고 화면 전체를 사과판에 쓴다. 판 전체가 항상 한 화면에 들어오고 스크롤이 없다.
   칸 크기는 app.js의 layoutAppleBoard가 #apple-board-viewport의 실제 크기에서 계산한다(세로로 긴 화면은 행·열을 바꿔 그린다).
   세로: [남은 시간][내 점수 · 순위] …… [≡] / 점수 순위 줄 / 사과판
   가로: 사과판 | 오른쪽 열(≡ 자리 · 남은 시간 · 내 점수 · 점수 순위) */
html.mobile-layout body[data-gs-game="applegame"].game-active #game>.game-head,html.mobile-layout body[data-gs-game="applegame"].game-active #spectator-help,html.mobile-layout body[data-gs-game="applegame"].game-active #apple-drag-info{display:none}
html.mobile-layout body[data-gs-game="applegame"].game-active #apple-play-area{--apple-side:calc(var(--gs-tap)*2 + var(--gs-gap));position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:0;min-height:0;padding:0;overflow:hidden}
/* 자체 HUD: 남은 시간 · 내 점수와 순위 · 점수 순위(조작 요소 없음) */
html.mobile-layout body[data-gs-game="applegame"].game-active #apple-hud{position:relative;grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:var(--gs-gap);min-width:0;padding:0 var(--gs-pad) var(--gs-gap);background:var(--gs-surface);box-shadow:0 1px 0 var(--gs-line);color:var(--gs-text)}
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-status{display:flex;align-items:center;gap:var(--gs-pad);min-width:0;height:var(--gs-hud-h);padding-right:calc(var(--gs-menu-reserve) - var(--gs-pad))}
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-timer{flex:0 0 auto;min-width:3.6em;padding:7px 10px;border-radius:999px;background:#2c2e39;color:#d7d1ff;font:800 var(--gs-font-md)/1 ui-monospace,Consolas,"Courier New",monospace;font-variant-numeric:tabular-nums;text-align:center}
/* 마지막 10초: 글자는 그대로 두고 배경만 깜빡인다(숫자가 흐려지면 안 된다). */
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-timer.urgent{background:#b3243f;color:#fff;animation:gs-apple-urgent 1s steps(2,jump-none) infinite}
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-me{display:flex;flex:1 1 auto;align-items:baseline;gap:6px;min-width:0;overflow:hidden;white-space:nowrap}
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-me small{color:var(--gs-text-dim);font-size:var(--gs-font-xs)}
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-me b{color:#fff;font-size:var(--gs-font-lg);font-weight:900;font-variant-numeric:tabular-nums;line-height:1}
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-me i{color:#ffd08a;font-size:var(--gs-font-sm);font-style:normal;font-weight:800}
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-me.spectating small{font-size:var(--gs-font-sm);font-weight:800}
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-watch{flex:0 0 auto;color:var(--gs-text-dim);font-size:var(--gs-font-xs);white-space:nowrap}
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-watch[hidden],html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-ranks[hidden]{display:none}
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-ranks{display:grid;grid-template-columns:repeat(var(--apple-rank-cols,2),minmax(0,1fr));gap:3px var(--gs-gap);margin:0;padding:0;list-style:none}
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-ranks li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px;min-width:0;height:24px;padding:0 7px;border:1px solid transparent;border-radius:8px;background:var(--gs-surface-2);color:var(--gs-text-dim);font-size:var(--gs-font-xs);line-height:1}
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-ranks li.me{border-color:#ffd08a8c;background:#ffb4572e;color:#fff}
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-ranks i{color:#8fa0bb;font-style:normal;font-weight:800}
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-ranks li.me i{color:#ffd08a}
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-ranks span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-ranks b{color:#fff;font-variant-numeric:tabular-nums}
/* 남은 시간 막대: 세로 화면은 HUD 아래 가로줄, 가로 화면은 판과 오른쪽 열 사이 세로줄 */
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-bar{position:absolute;right:0;bottom:0;left:0;height:3px;background:linear-gradient(90deg,#ff8a5b,#ffd08a);transform:scaleX(var(--apple-time,1));transform-origin:left center;transition:transform 1s linear;pointer-events:none}
/* 사과판: 판 바깥 여백까지 드래그 표면이다(스크롤 없음). */
html.mobile-layout body[data-gs-game="applegame"].game-active #apple-board-viewport{grid-column:1;grid-row:2;display:grid;place-items:center;width:auto;min-width:0;min-height:0;padding:8px 4px 5px;overflow:visible;touch-action:none}
html.mobile-layout body[data-gs-game="applegame"].game-active #apple-board{flex:none;max-width:none;margin:0}
html.mobile-layout body[data-gs-game="applegame"].game-active #apple-board .apple{--a:var(--apple-cell,34px);min-width:0;font-size:clamp(11px,calc(var(--a)*.52),30px);transition:none;box-shadow:inset calc(var(--a)*-.15) calc(var(--a)*-.2) calc(var(--a)*.28) #a92e2f66,inset calc(var(--a)*.1) calc(var(--a)*.1) calc(var(--a)*.2) #fff8,0 calc(var(--a)*.08) calc(var(--a)*.2) #0005}
html.mobile-layout body[data-gs-game="applegame"].game-active #apple-board .apple::before{top:max(-7px,calc(var(--a)*-.13));width:min(12px,calc(var(--a)*.19));height:min(17px,calc(var(--a)*.27))}
html.mobile-layout body[data-gs-game="applegame"].game-active #apple-board .apple.selected{box-shadow:0 0 0 2px #fff,0 0 0 4px #ff914dcc}
html.mobile-layout body[data-gs-game="applegame"].game-active #apple-selection-box{border-radius:8px}
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-particle{font-size:clamp(12px,calc(var(--apple-cell,34px)*.5),18px)}
html.mobile-layout body[data-gs-game="applegame"].game-active .apple-score-pop{font-size:clamp(20px,calc(var(--apple-cell,34px)*.7),28px)}
/* 선택 중인 합계: 선택 상자 바로 옆(손가락 위)에 뜬다. 위치는 app.js가 transform으로 옮긴다. */
html.mobile-layout body[data-gs-game="applegame"].game-active #apple-sum{position:absolute;z-index:12;top:0;left:0;display:grid;place-items:center;min-width:46px;height:32px;padding:0 10px;border:2px solid #ffc590;border-radius:999px;background:#fff4e8;color:#9a4b12;box-shadow:0 6px 16px #0009;font-size:var(--gs-font-lg);font-weight:900;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;pointer-events:none;will-change:transform}
html.mobile-layout body[data-gs-game="applegame"].game-active #apple-sum[hidden]{display:none}
html.mobile-layout body[data-gs-game="applegame"].game-active #apple-sum.ok{border-color:#38c778;background:#d8ffe8;color:#075f2c}
html.mobile-layout body[data-gs-game="applegame"].game-active #apple-sum:is(.over,.miss){border-color:#ff8a8a;background:#ffe3e3;color:#a11d2c}
html.mobile-layout body[data-gs-game="applegame"].game-active #apple-sum.miss{font-size:var(--gs-font-md)}
@keyframes gs-apple-urgent{0%{background:#b3243f}100%{background:#6f1c30}}
@media (orientation:landscape){
  html.mobile-layout body[data-gs-game="applegame"].game-active #apple-play-area{grid-template-columns:minmax(0,1fr) var(--apple-side);grid-template-rows:minmax(0,1fr)}
  html.mobile-layout body[data-gs-game="applegame"].game-active #apple-hud{grid-column:2;grid-row:1;padding:var(--gs-hud-h) var(--gs-gap) var(--gs-gap) calc(var(--gs-gap) + 3px);overflow:hidden;background:none;box-shadow:none}
  html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-status{flex-direction:column;align-items:stretch;gap:var(--gs-gap);height:auto;padding:0}
  html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-timer{padding:8px 4px;font-size:var(--gs-font-lg)}
  html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-me{flex:0 0 auto;flex-wrap:wrap;justify-content:center;gap:2px 6px;padding:6px 4px;border-radius:var(--gs-radius);background:var(--gs-surface-2);white-space:normal;text-align:center}
  html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-me small{flex:1 0 100%}
  /* 관전자 수는 메뉴 버튼 왼쪽 빈자리에 둔다. */
  html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-watch{position:absolute;top:0;left:calc(var(--gs-gap) + 3px);display:flex;align-items:center;height:var(--gs-hud-h)}
  /* 참가자가 많으면 내 점수 제목을 접고 순위 줄 높이를 줄여 열 안에 모두 넣는다. */
  html.mobile-layout body[data-gs-game="applegame"].game-active #apple-hud.crowded .apple-hud-me small{display:none}
  html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-ranks{display:flex;flex:0 1 auto;flex-direction:column;gap:2px;min-height:0}
  html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-ranks li{flex:0 1 22px;height:auto;min-height:15px;padding:0 6px}
  html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-bar{top:var(--gs-gap);right:auto;bottom:var(--gs-gap);width:3px;height:auto;border-radius:2px;background:linear-gradient(0deg,#ff8a5b,#ffd08a);transform:scaleY(var(--apple-time,1));transform-origin:center bottom}
  html.mobile-layout body[data-gs-game="applegame"].game-active #apple-board-viewport{grid-row:1;padding:8px 4px 5px}
}
@media (prefers-reduced-motion:reduce){
  html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-timer.urgent{animation:none}
  html.mobile-layout body[data-gs-game="applegame"].game-active .apple-hud-bar{transition:none}
}
/* ── END applegame ───────────────────────────────── */



/* ── BEGIN tetris ─────────────────────────────── */
/* 상단 줄(시간 · 점수 줄)을 없애고 게임 화면 전체를 테트리스가 쓴다. 위치·크기는 tetris-layout.js가 #tetris-play-area의 실제 크기로
   계산해 각 요소의 --tt-x/y/w/h에 넣는다(기기별 분기 없음).
   세로: 상태 줄(시간 · 생존 · 대기 방해줄) [≡] / HOLD · 점수 · NEXT / 상대 미니보드 | 게임판 | 상대 미니보드(한 명이면 게임판 | 상대) / 왼손 ← → ↓ · 오른손 ↶ 180° ↷ HOLD DROP
   가로: 왼손(상태 · ← → ↓ · 카드) | HOLD · 점수 | 게임판 | NEXT · 상대 | 오른손(≡ 자리 · 회전 · HOLD · DROP)
   html[data-tetris-layout="legacy"]는 편집기로 직접 배치를 저장한 방향이다. 그때는 screen.css의 예전 % 좌표 배치를 쓴다. */
html.mobile-layout body[data-gs-game="tetris"].game-active #game>.game-head,html.mobile-layout body[data-gs-game="tetris"].game-active #spectator-help{display:none}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-play-area{position:relative;display:block;flex:1 1 auto;width:100%;max-width:none;min-height:0;margin:0;padding:0;overflow:hidden;border-radius:0;box-shadow:none;background:radial-gradient(circle at 50% 28%,#333642,#181a20 62%,#101114)}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-play-area>:is(.tetris-stage,#tetris-hud,#tetris-hud-stats,#tetris-touch-hint,#tetris-items),html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active .tetris-stage>:is(.tetris-box,.tetris-main){position:absolute;left:var(--tt-x,0);top:var(--tt-y,0);width:var(--tt-w,0);height:var(--tt-h,0);min-width:0;min-height:0;max-width:none;max-height:none;margin:0;box-sizing:border-box;transform:none}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active .tetris-stage{display:block;padding:0;overflow:visible;gap:0}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active .tetris-main{z-index:2;aspect-ratio:auto;align-self:auto}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-board{display:block;width:100%;height:100%;max-width:none;margin:0;box-sizing:border-box;border-width:2px;border-radius:4px;aspect-ratio:auto}
/* 대기 방해줄 막대는 게임판 오른쪽 바깥에 붙인다. */
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active .tetris-garbage-meter{top:2px;right:auto;bottom:auto;left:calc(100% + 3px);width:6px;height:calc(100% - 4px)}
/* 전투 문구(SINGLE · 공격 등)는 점수 칸 위에 잠깐 띄운다. 블록이 나오는 맨 위 줄과 조작 버튼을 가리지 않는다. */
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-combat-effects{display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;pointer-events:none}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active .tetris-combat-text{max-width:100%;margin:0;padding:5px 9px;font-size:var(--gs-font-sm);line-height:1.2;white-space:normal;word-break:keep-all}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active .tetris-combat-text.danger{font-size:var(--gs-font-lg)}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active .tetris-combat-text:not(:last-child){display:none}
/* HOLD · NEXT */
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active .tetris-stage>.tetris-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:3px;overflow:hidden;border-radius:var(--gs-radius);text-align:center}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active .tetris-stage>.tetris-box>b{flex:0 0 auto;margin:0;font-size:var(--gs-font-xs);line-height:12px;letter-spacing:.1em}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active :is(#tetris-hold,#tetris-next){display:block;flex:none;width:var(--tt-cw,48px);height:var(--tt-ch,48px);max-width:none;max-height:none;margin:0;border-radius:4px;object-fit:fill}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active :is(#tetris-status,#tetris-stats,#tetris-help){display:none}
/* 상태 줄: 시간 · 생존 인원 · 대기 방해줄 · 관전 대상 · 관전자 수(누르는 요소 없음) */
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud{z-index:5;display:flex;flex-wrap:nowrap;align-items:center;gap:var(--gs-gap);padding:0;overflow:hidden;color:var(--gs-text);pointer-events:none}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud[data-dir="column"]{flex-direction:column;align-items:stretch;justify-content:flex-start}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud[data-dir="wrap"]{flex-wrap:wrap;align-content:flex-start}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud>span{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:0;min-height:30px;padding:0 10px;overflow:hidden;border-radius:999px;background:#2c2e39;color:#d7d1ff;font:800 var(--gs-font-sm)/1.1 ui-monospace,Consolas,"Courier New",monospace;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud>span[hidden]{display:none}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud>.tt-garbage{background:#7a2b1f;color:#ffe3b0}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud>.tt-watch{flex:0 1 auto;display:block;line-height:30px;background:#282b35;color:#bff3ff;font-family:inherit}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud>.tt-viewers{flex:0 1 auto;padding:0 4px;background:none;color:var(--gs-text-dim);font-family:inherit;font-size:var(--gs-font-xs);font-weight:700}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud[data-dir="column"]>span{flex:0 0 auto;padding:0 6px;border-radius:var(--gs-radius)}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud[data-dir="column"]>.tt-watch{white-space:normal;line-height:1.2;padding:5px 6px;text-align:center;word-break:keep-all}
/* 점수 · 줄 · 레벨 · 공격(대전만): 점수는 맨 위 한 줄 전체, 나머지는 아래 칸(좁은 가로 열에서는 한 줄씩). 값 글자 크기는 tetris-layout.js가 칸 폭에 맞춘다. */
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud-stats{z-index:1;display:grid;grid-template-columns:repeat(var(--tt-stat-cols,2),minmax(0,1fr));grid-template-rows:auto;grid-auto-rows:minmax(0,1fr);gap:2px;padding:2px;overflow:hidden;border:1px solid #ffffff18;border-radius:var(--gs-radius);background:#141519bb;color:#dce5ff}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud-stats[hidden],html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud-stats>span[hidden]{display:none}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud-stats>span{display:flex;flex-direction:column;align-items:stretch;justify-content:center;min-width:0;overflow:hidden;line-height:1.05;text-align:center}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud-stats>span[data-k="score"]{grid-column:1/-1}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud-stats[data-cols="1"]>span:not([data-k="score"]){flex-direction:row;align-items:center;justify-content:space-between;gap:3px;padding:0 3px;text-align:right}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud-stats small{flex:none;overflow:hidden;color:#9fb1ff;font-size:var(--gs-font-xs);font-weight:800;white-space:nowrap}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud-stats b{display:block;min-width:0;max-width:100%;overflow:hidden;color:#fff;font:900 var(--gs-font-md)/1.05 ui-monospace,Consolas,"Courier New",monospace;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud-stats[data-cols="1"]>span:not([data-k="score"]) b{flex:1 1 0;font-size:var(--gs-font-sm)}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-hud-stats>.tt-measure{position:absolute;top:0;left:0;visibility:hidden;font:900 var(--gs-font-md)/1.05 ui-monospace,Consolas,"Courier New",monospace;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
/* 상대: 자리가 있으면 미니보드, 좁으면 이름 · 쌓인 높이 막대만 있는 줄 목록. 관전자 · K.O.된 참가자는 눌러서 그 판을 본다. */
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-opponents{position:absolute;inset:0;z-index:3;display:block;width:auto;height:auto;margin:0;padding:0;overflow:visible;border:0;background:none;pointer-events:none}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-opponents>.tetris-opponent{position:absolute;left:var(--tt-x,0);top:var(--tt-y,0);display:flex;flex:none;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;width:var(--tt-w,0);height:var(--tt-h,0);min-width:0;margin:0;padding:2px;overflow:hidden;box-sizing:border-box;border:1px solid #ffffff14;border-radius:8px;background:#141519a8;text-align:center;pointer-events:auto;transform:none}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-opponents>.tetris-opponent[hidden]{display:none}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-opponents .tetris-opponent b{width:100%;overflow:hidden;color:#dce5ff;font-size:var(--gs-font-xs);line-height:13px;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-opponents .tetris-opponent canvas{display:block;flex:none;width:var(--tt-cw,24px);height:var(--tt-ch,48px);margin:0;border-radius:3px}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-opponents .tetris-opponent :is(.opponent-stats,.opponent-height){display:none}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-opponents[data-kind="chip"]>.tetris-opponent{flex-direction:row;align-items:center;justify-content:space-between;gap:5px;padding:0 6px}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-opponents[data-kind="chip"] .tetris-opponent canvas{display:none}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-opponents[data-kind="chip"] .tetris-opponent b{width:auto;flex:1 1 auto;text-align:left}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-opponents[data-kind="chip"] .tetris-opponent .opponent-height{display:block;flex:0 0 6px;align-self:stretch;margin:4px 0;border-radius:3px;background:linear-gradient(to top,#ff6478 calc(var(--opponent-height,0)*100%),#ffffff1f 0)}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-opponents .tetris-opponent.ko{opacity:.55}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-opponents[data-kind="chip"] .tetris-opponent.ko b::after{content:" K.O.";color:#ff8a98}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-opponents .tetris-opponent.me{border-color:#8f84ff8c}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-opponents .tetris-opponent.watchable{cursor:pointer;border-color:#5f8fbf66}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-opponents .tetris-opponent.watchable:active{border-color:#8af0e5;transform:none}
/* 조작 버튼: 누르는 동안 이동이 이어지는 표면이라 touch-action:none을 버튼에만 둔다. */
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-controls{position:absolute;inset:0;z-index:7;display:block;width:auto;height:auto;margin:0;padding:0;pointer-events:none}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-controls button{position:absolute;left:var(--tt-x,0);top:var(--tt-y,0);display:flex;align-items:center;justify-content:center;width:var(--tt-w,0);height:var(--tt-h,0);min-width:0;min-height:0;margin:0;padding:0;border-radius:var(--gs-radius);font-size:var(--gs-font-lg);font-weight:800;line-height:1;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;transform:none}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-controls button[data-tt-off]{display:none}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-controls button.pressed{border-color:#a9f8ff;background:#17727d;box-shadow:0 0 0 2px #69e9f94a,0 0 20px #4ee5f35e;transform:scale(.96)}
/* 카드 버튼: 판 밖 왼손 쪽, 아이콘과 남은 횟수만. 카드가 없으면 app.js가 숨긴다. */
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-items{z-index:7;display:block}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-items:is([hidden],[data-tt-off]){display:none}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-items>button{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;height:100%;min-width:0;min-height:0;margin:0;padding:0 6px;border-radius:var(--gs-radius);font-size:var(--gs-font-sm);line-height:1.1;touch-action:manipulation}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-items .tetris-card-label{display:none}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-items .tetris-card-icon{font-size:var(--gs-font-lg);font-style:normal;line-height:1}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-items strong{font-size:var(--gs-font-sm);white-space:nowrap}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-touch-hint{z-index:7;display:flex;align-items:center;justify-content:center;padding:0 10px;border-radius:var(--gs-radius);font-size:var(--gs-font-sm);font-weight:800}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-touch-hint[hidden]{display:none}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #tetris-layout-probe{position:absolute;top:0;left:0;display:block;visibility:hidden;width:var(--gs-tap);height:var(--gs-gap);margin:0 0 0 var(--gs-pad);pointer-events:none}
/* 잠깐 뜨는 안내(토스트 · 카드 발동 알림)는 상태 줄 · 왼쪽 정보 열 위쪽에 띄운다. 조작 버튼과 블록이 나오는 줄을 가리지 않는다. */
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active #toast:not(.toast-dialog-fallback){top:var(--tt-toast-y,8px);bottom:auto;left:var(--tt-toast-x,50%);max-width:var(--tt-toast-w,calc(100vw - 120px));padding:8px 12px;font-size:var(--gs-font-sm);line-height:1.3}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active .game-card-activation-feed{top:var(--tt-notice-y,52px);left:var(--tt-notice-x,8px);width:var(--tt-notice-w,320px);transform:none}
html.mobile-layout[data-tetris-layout="auto"][data-tt-notices="1"] body[data-gs-game="tetris"].game-active .game-card-activation-notice:not(:last-child),html.mobile-layout[data-tetris-layout="auto"][data-tt-notices="2"] body[data-gs-game="tetris"].game-active .game-card-activation-notice:not(:nth-last-child(-n+2)){display:none}
html.mobile-layout[data-tetris-layout="auto"] body[data-gs-game="tetris"].game-active .game-card-activation-notice small{font-size:var(--gs-font-xs)}
/* ── END tetris ───────────────────────────────── */



/* ── BEGIN poker ─────────────────────────────── */
/* 텍사스 홀덤 · 세븐 포커. 상단 줄(방 제목 · 남은 시간)을 없애고 화면 전체를 테이블 하나로 쓴다.
   세로: [차례 시계 · 코인전/연습전 · 블라인드][≡] / 상대 자리(위 · 양옆)와 가운데 팟 · 공용 카드 / 내 자리 · 내 패 · 족보 / 안내 한 줄 / (레이즈 조절) / 폴드 · 체크 · 콜 · 레이즈 · 올인
   가로: 테이블(상대 자리 · 팟 · 공용 카드 · 아래에 내 자리와 내 패) | 오른쪽 열(차례 시계 · ≡ 자리 · 안내 · 레이즈 조절 · 행동 버튼)
   자리는 app.js가 data-pos(tl t tr ml mr bl br b me)로 정한다. 줄 높이와 카드 크기는 --gs-stage-w/h에서 계산하므로 인원이 늘어도 스크롤이 생기지 않는다.
   .poker-table의 data-ring = 내 자리를 뺀 자리 수(3 이하면 data-few), data-me = 내가 앉아 있는지, data-raise = 레이즈 조절이 열렸는지, data-seven = 세븐 포커. */
/* 계산값 등록: 줄 높이·카드 크기처럼 다른 값에서 계산하는 길이는 등록해 두면 테이블에서 한 번만 계산되어 px로 내려간다.
   등록하지 않으면 자리와 카드마다 긴 계산식을 통째로 다시 풀어, 화면 전체 스타일을 다시 계산할 때마다 수십 ms가 더 든다. 등록을 지원하지 않는 브라우저에서도 결과는 같다. */
@property --pk-w{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-h{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-short{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-gap{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-line{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-pot-h{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-inner-w{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-col{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-top-h{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-act-h{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-info-h{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-raise-h{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-potrow{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-strip-h{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-hole-max{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-hole-w{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-hole-h{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-me-h{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-ring-h{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-row-h{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-seat-text{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-mini-cap{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-mini-x{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-fit{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-mini-h{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-center-w{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-board-h{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-side{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-side-top{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-side-act{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-seat-max{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-seat-w{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-cw1{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-cw2{syntax:"<length>";inherits:true;initial-value:0px}@property --pk-cw{syntax:"<length>";inherits:true;initial-value:0px}
@property --pk-rows{syntax:"<number>";inherits:true;initial-value:3}@property --pk-info-lines{syntax:"<number>";inherits:true;initial-value:2}@property --pk-seat-cols{syntax:"<number>";inherits:true;initial-value:4}
html.mobile-layout body[data-gs-game$="poker"].game-active #game>.game-head{display:none}
html.mobile-layout body[data-gs-game$="poker"] #poker-play-area{position:relative;display:block;width:100%;max-width:none;height:100%;min-height:0;max-height:none;margin:0;padding:0;overflow:hidden}
html.mobile-layout body[data-gs-game$="poker"] .poker-table{
  --pk-w:var(--gs-stage-w,100vw);--pk-h:var(--gs-stage-h,var(--gs-vh));--pk-short:min(var(--pk-w),var(--pk-h));--pk-gap:var(--gs-gap);--pk-line:calc(var(--gs-font-xs)*1.3);--pk-pot-h:28px;
  --pk-col:calc(var(--pk-inner-w)/12);--pk-row-h:calc(var(--pk-ring-h)/var(--pk-rows));
  --pk-hole-w:calc(var(--pk-hole-max)*.7);--pk-hole-h:calc(var(--pk-hole-w)/.7);
  --pk-info-lines:2;--pk-seat-text:calc(var(--pk-line)*(1 + var(--pk-info-lines)) + 24px);
  --pk-mini-cap:min(84px,calc(var(--pk-short)*.2));--pk-mini-x:calc(var(--pk-row-h) - var(--pk-seat-text));--pk-mini-h:min(clamp(24px,var(--pk-mini-x),var(--pk-mini-cap)),max(0px,calc((var(--pk-mini-x) - 23.5px)*999)));--pk-fit-need:0px;--pk-fit:calc(var(--pk-mini-x) - var(--pk-fit-need));
  --pk-center-w:calc(var(--pk-col)*6 - 8px);
  display:grid;gap:0;align-items:center;justify-items:center;width:100%;height:100%;min-height:0;max-height:none;box-sizing:border-box;margin:0;
  border:0;border-radius:0;animation:none;box-shadow:inset 0 0 0 1px #b98d3855,inset 0 0 60px #0006;background:radial-gradient(ellipse at 50% 42%,#2f6f4a 0,#17503a 46%,#0b241c 100%);overflow:hidden;touch-action:manipulation}
/* 상대가 3명 이하면 가운데를 넓게 쓰고 상대 카드도 크게 그려 테이블이 비어 보이지 않게 한다. 그래도 공용 카드보다 크게 그리지는 않는다. */
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-few="true"]{--pk-center-w:calc(var(--pk-inner-w) - 16px);--pk-mini-cap:min(120px,calc(var(--pk-short)*.3),var(--pk-board-h))}
/* 상대 카드 높이(--pk-mini-h)는 자리 줄에서 글자를 뺀 나머지(--pk-mini-x)다. 홀덤의 뒷면 카드는 24px도 들어가지 않으면 그리지 않는다(이름 · 칩 · 베팅은 남는다).
   --pk-fit은 평소 배치가 지금 화면에 들어가는지 나타내는 여유 높이로, 0보다 작으면 금액 입력 중에 조작부를 위로 모은다(아래 data-typing).
   세븐 포커는 카드를 두 줄로 놓을 수 있어 카드 칸을 더 높게 쓰고, 공개 카드는 정보이므로 지우지 않는다. */
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"]{--pk-mini-cap:min(140px,calc(var(--pk-short)*.36));--pk-mini-h:clamp(24px,var(--pk-mini-x),var(--pk-mini-cap));--pk-fit-need:24px}
/* 글자 무늬는 카드와 겹쳐 읽기 어려워 모바일에서는 빼고, 상대 자리가 둘러앉는 타원 선만 남긴다. */
html.mobile-layout body[data-gs-game$="poker"] .poker-table::before{content:none}
html.mobile-layout body[data-gs-game$="poker"] .poker-table::after{border:2px solid #ffe9aa24;border-radius:999px;box-shadow:inset 0 0 40px #0000002e}
html.mobile-layout body[data-gs-game$="poker"] .poker-table .poker-table-head,html.mobile-layout body[data-gs-game$="poker"] .poker-table #poker-round-hud,html.mobile-layout body[data-gs-game$="poker"] .poker-table #poker-players{display:contents}
/* 보이지 않는 측정용 칸. 높이 = 평소 배치의 여유(--pk-fit, 모자라면 0), 폭 = 한 줄에 조작 아홉 개를 놓고 남는 폭(모자라면 0). app.js의 syncPokerTyping이 읽는다. */
html.mobile-layout body[data-gs-game$="poker"] .poker-fit-probe{position:absolute;z-index:-1;top:0;left:0;display:block;width:max(0px,calc(var(--pk-w) - var(--gs-tap)*11 - var(--gs-menu-reserve) + 1px));height:max(0px,calc(var(--pk-fit) + 1px));visibility:hidden;pointer-events:none}
html.mobile-layout body[data-gs-game$="poker"] .poker-table #poker-mode,html.mobile-layout body[data-gs-game$="poker"] .poker-table #poker-blinds,html.mobile-layout body[data-gs-game$="poker"] .poker-table .poker-hand>span{display:none}

/* 차례 시계: 남은 초와 누구 차례인지, 그 옆에 코인전/연습전과 블라인드. */
html.mobile-layout body[data-gs-game$="poker"] .poker-status{justify-self:stretch;z-index:3;display:flex;align-items:center;gap:var(--pk-gap);min-width:0;box-sizing:border-box;padding:0 10px 0 4px;border:1px solid var(--gs-line);border-radius:999px;background:#07140fcc;color:var(--gs-text);font-size:var(--gs-font-sm);line-height:1.2;white-space:nowrap}
html.mobile-layout body[data-gs-game$="poker"] #poker-clock{flex:0 0 auto;min-width:3.4em;padding:5px 8px;border-radius:999px;background:#2c2e39;color:#d7d1ff;font:800 var(--gs-font-sm)/1.15 ui-monospace,Consolas,"Courier New",monospace;text-align:center}
html.mobile-layout body[data-gs-game$="poker"] #poker-clock:empty{display:none}
html.mobile-layout body[data-gs-game$="poker"] #poker-turn-label{flex:0 1 auto;min-width:0;overflow:hidden;font-weight:800;text-overflow:ellipsis}
html.mobile-layout body[data-gs-game$="poker"] #poker-table-meta{flex:1 1 0;min-width:0;overflow:hidden;color:var(--gs-text-dim);font-size:var(--gs-font-xs);text-align:right;text-overflow:ellipsis}
html.mobile-layout body[data-gs-game$="poker"] .poker-meta-sep{display:none}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-myturn="true"] .poker-status{border-color:#ffe28a;background:#3a2f08e6;color:#fff6cf}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-myturn="true"] #poker-clock{background:#ffd75e;color:#2b2104}
html.mobile-layout body[data-gs-game$="poker"] .poker-status.urgent #poker-clock{background:#ff6478;color:#fff;animation:gs-poker-blink .5s steps(2,jump-none) infinite}

/* 가운데: 단계 · 팟 · 공용 카드 */
html.mobile-layout body[data-gs-game$="poker"] #poker-pot{z-index:2;display:flex;align-items:center;height:var(--pk-pot-h);box-sizing:border-box;margin:0;padding:0 12px;font-size:var(--gs-font-sm);white-space:nowrap}
html.mobile-layout body[data-gs-game$="poker"] #poker-street{z-index:2;min-height:0;margin:0;padding:2px 9px;font-size:var(--gs-font-xs);line-height:1.3}
html.mobile-layout body[data-gs-game$="poker"] #poker-street:empty{display:none}
html.mobile-layout body[data-gs-game$="poker"] #poker-community{z-index:2;display:flex;flex-wrap:nowrap;justify-content:center;gap:3px;min-height:0;margin:0}
html.mobile-layout body[data-gs-game$="poker"] #poker-community .poker-card{flex:0 0 auto;width:calc(var(--pk-board-h)*.7);height:var(--pk-board-h);margin:0;border-radius:5px;font-size:max(12px,calc(var(--pk-board-h)*.34))}
html.mobile-layout body[data-gs-game$="poker"] .poker-card.poker-card-slot{display:block;border:1px dashed #ffe9aa40;background:#0000001f;box-shadow:none}
html.mobile-layout body[data-gs-game$="poker"] .poker-table .poker-card:hover{transform:none}

/* 자리: 이름 / 칩 · 베팅(또는 폴드 · 올인) / 카드 / 쇼다운 족보. 차례는 테두리와 ▶, 폴드와 올인은 글자로도 알린다. */
html.mobile-layout body[data-gs-game$="poker"] .poker-player{--pk-seat-cols:4;--pk-seat-max:184px;--pk-seat-w:min(calc(var(--pk-col)*var(--pk-seat-cols) - 4px),var(--pk-seat-max));z-index:1;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:2px;box-sizing:border-box;width:var(--pk-seat-w);min-width:0;min-height:0;max-height:calc(100% - 4px);margin:0;padding:5px 5px 6px;border-radius:var(--gs-radius);overflow:hidden;text-align:center}
html.mobile-layout body[data-gs-game$="poker"] .poker-player::after,html.mobile-layout body[data-gs-game$="poker"] .poker-player.all-in::before{content:none}
html.mobile-layout body[data-gs-game$="poker"] .poker-player>b{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;height:var(--pk-line);overflow:visible;font-size:var(--gs-font-xs);line-height:var(--pk-line);white-space:nowrap}
html.mobile-layout body[data-gs-game$="poker"] .poker-seat-name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
html.mobile-layout body[data-gs-game$="poker"] .poker-player.turn>b::before{content:"▶";flex:0 0 auto;color:#ffe28a}
/* 딜러: 이름 옆의 둥근 D. PC의 모서리 원판과 " · D" 글자를 대신한다. */
html.mobile-layout body[data-gs-game$="poker"] .poker-dealer-mark{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:#f1ecdb;color:#364037;font:800 11px/1 Georgia,serif}
html.mobile-layout body[data-gs-game$="poker"] .poker-dealer-sep,html.mobile-layout body[data-gs-game$="poker"] #poker-play-area .poker-player>.poker-dealer-disc{display:none}
html.mobile-layout body[data-gs-game$="poker"] .poker-player>b .admin-nameplate{flex:0 0 auto}
html.mobile-layout body[data-gs-game$="poker"] .poker-player>span{flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:0 6px;max-height:calc(var(--pk-line)*var(--pk-info-lines));overflow:hidden;font-size:var(--gs-font-xs);line-height:var(--pk-line);white-space:nowrap}
html.mobile-layout body[data-gs-game$="poker"] .poker-seat-sep{display:none}
html.mobile-layout body[data-gs-game$="poker"] .poker-player.folded>span{color:#ffb4bd;font-weight:800}
html.mobile-layout body[data-gs-game$="poker"] .poker-player.all-in>span{color:#ffe28a;font-weight:800}
html.mobile-layout body[data-gs-game$="poker"] .poker-seat-win{display:block;color:#ffe28a;font-style:normal;font-weight:900}
html.mobile-layout body[data-gs-game$="poker"] .poker-player.winner .poker-seat-bet{display:none}
html.mobile-layout body[data-gs-game$="poker"] .poker-mini-cards{--pk-cw1:min(calc((var(--pk-seat-w) - 12px - (var(--poker-card-count,2) - 1)*2px)/var(--poker-card-count,2)),calc(var(--pk-mini-h)*.7));--pk-cw2:min(calc((var(--pk-seat-w) - 12px - (var(--pk-half,2) - 1)*2px)/var(--pk-half,2)),calc((var(--pk-mini-h) - 2px)*.35));--pk-cw:max(var(--pk-cw1),var(--pk-cw2));flex:0 0 auto;align-self:center;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:2px;width:100%;margin:1px 0 0;
  /* 두 줄이 더 크게 보이면(cw2 > cw1) 한 줄에 --pk-half 장만 들어가게 폭을 묶고, 아니면 한 줄에 모두 놓는다. */
  max-width:max(calc(var(--pk-half,2)*var(--pk-cw) + (var(--pk-half,2) - 1)*2px + 1px),calc(var(--poker-card-count,2)*var(--pk-cw1) + (var(--poker-card-count,2) - 1)*2px + 1px - (var(--pk-cw) - var(--pk-cw1))*1000));
  /* 카드 높이가 0이면(줄이 모자라 그리지 않을 때) 테두리와 그림자까지 통째로 가린다. 높이가 있으면 가리는 범위가 화면 밖이라 아무것도 잘리지 않는다. */
  clip-path:inset(calc(50% - var(--pk-mini-h)*999))}
html.mobile-layout body[data-gs-game$="poker"] .poker-mini-cards .poker-card{flex:0 0 auto;width:var(--pk-cw);min-width:0;max-width:none;height:calc(var(--pk-cw)/.7);min-height:0;margin:0;padding:0;border-width:min(1px,var(--pk-mini-h));border-radius:4px;font-size:max(11px,calc(var(--pk-cw)*.46));line-height:1}
html.mobile-layout body[data-gs-game$="poker"] .poker-mini-cards .poker-card-face{display:flex;flex-direction:column;align-items:center;line-height:1}
/* 쇼다운: 패가 공개된 자리는 칩 · 베팅 줄 대신 족보와 딴 칩을 같은 높이(글자 줄 수)로 보여 준다. 공개된 카드가 줄어들지 않는다. */
html.mobile-layout body[data-gs-game$="poker"] .poker-table.poker-showdown .poker-player:not(.folded):not(.me)>span{display:none}
html.mobile-layout body[data-gs-game$="poker"] .poker-player .poker-showdown-hand{flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:0 6px;width:auto;max-height:calc(var(--pk-line)*var(--pk-info-lines));margin:0;overflow:hidden;font-size:var(--gs-font-xs);line-height:var(--pk-line);white-space:nowrap}
html.mobile-layout body[data-gs-game$="poker"] .poker-hand-main{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
html.mobile-layout body[data-gs-game$="poker"] .poker-showdown-hand .poker-seat-win{flex:0 0 auto}
html.mobile-layout body[data-gs-game$="poker"] .poker-showdown-hand .poker-hand-prefix,html.mobile-layout body[data-gs-game$="poker"] .poker-showdown-hand .poker-hand-rest{display:none}
html.mobile-layout body[data-gs-game$="poker"] .poker-player:is([data-pos="ml"],[data-pos="mr"],[data-pos="bl"],[data-pos="br"]){--pk-seat-cols:3}
html.mobile-layout body[data-gs-game$="poker"] .poker-table:is([data-ring="2"],[data-ring="4"],[data-ring="6"]) .poker-player:is([data-pos="tl"],[data-pos="tr"]){--pk-seat-cols:6}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-ring="1"] .poker-player[data-pos="t"]{--pk-seat-cols:8}
html.mobile-layout body[data-gs-game$="poker"] .poker-player[data-pos="b"]{--pk-seat-cols:6}
html.mobile-layout body[data-gs-game$="poker"] .poker-player.me .poker-mini-cards,html.mobile-layout body[data-gs-game$="poker"] .poker-player.me .poker-showdown-hand{display:none}

/* 내 패와 족보 버튼 */
html.mobile-layout body[data-gs-game$="poker"] .poker-hand{justify-self:stretch;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:0 var(--pk-gap);min-width:0;margin:0}
html.mobile-layout body[data-gs-game$="poker"] #poker-hole-cards{grid-column:2;display:flex;flex-wrap:nowrap;justify-content:center;gap:3px;min-height:0;margin:0}
html.mobile-layout body[data-gs-game$="poker"] #poker-hole-cards .poker-card{flex:0 0 auto;width:var(--pk-hole-w);height:var(--pk-hole-h);margin:0;border-radius:6px;font-size:max(13px,calc(var(--pk-hole-w)*.42))}
/* 세븐 포커: 상대가 볼 수 있는 내 공개 카드는 아래 금색 줄로 구분한다. */
html.mobile-layout body[data-gs-game$="poker"] #poker-hole-cards .poker-open-card{box-shadow:inset 0 -4px 0 #e0a92e,0 4px 10px #0007}
html.mobile-layout body[data-gs-game$="poker"] .poker-hand-chip{grid-column:3;justify-self:end;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:var(--gs-tap);max-width:100%;min-height:var(--gs-tap);padding:3px 8px;border:1px solid #d9af5c70;border-radius:var(--gs-radius);background:#12251ee6;color:#fff0bd;line-height:1.2}
html.mobile-layout body[data-gs-game$="poker"] .poker-hand-chip small{color:#e9bf5b;font-size:var(--gs-font-xs);font-weight:700}
html.mobile-layout body[data-gs-game$="poker"] .poker-hand-chip b{max-width:100%;overflow:hidden;font-size:var(--gs-font-xs);text-overflow:ellipsis;white-space:nowrap}

/* 안내 글과 남은 시간 막대 */
html.mobile-layout body[data-gs-game$="poker"] #poker-action-info{justify-self:stretch;min-height:0;margin:0;overflow:hidden;font-size:var(--gs-font-xs);line-height:var(--pk-line)}
html.mobile-layout body[data-gs-game$="poker"] .poker-turn-bar{justify-self:stretch;display:block;height:3px;border-radius:2px;background:#ffffff1f;overflow:hidden}
html.mobile-layout body[data-gs-game$="poker"] .poker-turn-bar::after{content:"";display:block;width:100%;height:100%;border-radius:inherit;background:#9fb4ff;transform:scaleX(var(--pk-turn,0));transform-origin:left;transition:transform 1s linear}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-myturn="true"] .poker-turn-bar::after{background:#ffd75e}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-phase="ended"] .poker-turn-bar{visibility:hidden}

/* 행동 버튼과 레이즈 조절. 레이즈 조절은 내 패와 행동 버튼을 가리지 않는 자리에 열린다. */
html.mobile-layout body[data-gs-game$="poker"] #poker-actions{justify-self:stretch;display:grid;gap:var(--pk-gap);width:auto;margin:0}
html.mobile-layout body[data-gs-game$="poker"] #poker-actions button{min-width:0;min-height:0;padding:2px;border-radius:var(--gs-radius);font-size:var(--gs-font-sm);font-weight:800;line-height:1.15;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
html.mobile-layout body[data-gs-game$="poker"] #poker-actions button:hover{transform:none}
html.mobile-layout body[data-gs-game$="poker"] #poker-actions button:disabled{opacity:.45}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-myturn="true"] #poker-actions button:not(:disabled){box-shadow:0 0 0 1px #ffe28a99,0 4px 12px #0006}
html.mobile-layout body[data-gs-game$="poker"] #poker-open-results{min-height:0;margin:0;padding:0 16px;border-radius:var(--gs-radius)}
html.mobile-layout body[data-gs-game$="poker"] #poker-raise-row{justify-self:stretch;z-index:3;display:grid;gap:var(--pk-gap);max-width:none;margin:0}
html.mobile-layout body[data-gs-game$="poker"] .poker-raise-presets{grid-row:1;grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--pk-gap)}
html.mobile-layout body[data-gs-game$="poker"] #poker-raise-row button{min-width:0;min-height:0;height:var(--gs-tap);padding:0 4px;border-radius:var(--gs-radius);font-size:var(--gs-font-sm);font-weight:800;line-height:1.15;white-space:nowrap}
html.mobile-layout body[data-gs-game$="poker"] .poker-raise-presets button[aria-pressed="true"]{border-color:#ffe28a;background:#4a3a0c;color:#fff6cf}
html.mobile-layout body[data-gs-game$="poker"] #poker-raise-row .poker-raise-step{grid-row:2;display:block;font-size:22px}
html.mobile-layout body[data-gs-game$="poker"] #poker-raise-amount{grid-row:2;box-sizing:border-box;width:100%;min-width:0;height:var(--gs-tap);min-height:0;padding:0 6px;border-radius:var(--gs-radius);font-size:16px;font-weight:800;text-align:center}
html.mobile-layout body[data-gs-game$="poker"] #poker-raise-confirm{overflow:hidden;text-overflow:ellipsis}

/* 족보 표: 내 족보 버튼을 누르면 상대 자리 위에 겹쳐 연다. 내 패와 행동 버튼은 가리지 않는다. */
html.mobile-layout body[data-gs-game$="poker"] #poker-hand-guide{position:absolute;z-index:40;top:calc(var(--gs-hud-h) + var(--gs-gap));right:var(--gs-gap);bottom:auto;left:var(--gs-gap);display:none;box-sizing:border-box;width:auto;min-width:0;max-width:none;max-height:calc(var(--gs-stage-h,60vh)*.56);margin:0;padding:10px 12px;overflow:auto;overscroll-behavior:contain;border-radius:var(--gs-radius)}
html.mobile-layout body[data-gs-game$="poker"] #poker-hand-guide.open{display:flex}
html.mobile-layout body[data-gs-game$="poker"] #poker-hand-guide .poker-guide-head{padding:0 calc(var(--gs-tap) + 20px) 8px 0}
html.mobile-layout body[data-gs-game$="poker"] #poker-hand-guide .poker-guide-head span{font-size:var(--gs-font-xs)}
html.mobile-layout body[data-gs-game$="poker"] #poker-hand-guide ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px;margin:8px 0 6px}
html.mobile-layout body[data-gs-game$="poker"] #poker-hand-guide li{padding:5px 22px 5px 6px;font-size:var(--gs-font-sm)}
html.mobile-layout body[data-gs-game$="poker"] #poker-hand-guide li::before{font-size:var(--gs-font-xs)}
html.mobile-layout body[data-gs-game$="poker"] #poker-hand-guide p{font-size:var(--gs-font-xs)}
html.mobile-layout body[data-gs-game$="poker"] .poker-guide-close{position:absolute;z-index:3;top:6px;right:6px;display:block;min-width:calc(var(--gs-tap) + 12px);height:var(--gs-tap);min-height:0;padding:0 10px;border-radius:var(--gs-radius);font-size:var(--gs-font-sm);font-weight:800}

/* 효과: 화면을 덮는 글자는 작은 화면에 맞게 줄인다. */
html.mobile-layout body[data-gs-game$="poker"] .poker-allin-flare strong{font-size:clamp(30px,10vmin,56px)}
html.mobile-layout body[data-gs-game$="poker"] .poker-allin-flare span{font-size:var(--gs-font-sm)}
html.mobile-layout body[data-gs-game$="poker"] .poker-showdown-flare span{font-size:clamp(22px,7vmin,40px)}

/* 관전: 내 패와 행동 버튼이 없으므로 그만큼 테이블을 키운다. */
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-me="false"] .poker-hand,html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-me="false"] #poker-actions,html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-me="false"] #poker-raise-row{display:none}

/* 메뉴 · 채팅 창이 열려 있는 동안 내 차례가 오면 창 위에 알림을 띄운다. */
html.mobile-layout body[data-gs-game$="poker"].game-active.mobile-game-chat-open #poker-turn-pill[data-active="true"]{position:fixed;z-index:160;top:calc(var(--gs-safe-t) + (var(--gs-hud-h) - var(--gs-tap))/2);left:calc(var(--gs-safe-l) + var(--gs-gap));display:flex;align-items:center;max-width:calc(100vw - var(--gs-safe-l) - var(--gs-safe-r) - var(--gs-menu-reserve) - var(--gs-gap)*2);height:var(--gs-tap);min-height:0;padding:0 14px;overflow:hidden;border:1px solid #ffe28a;border-radius:999px;background:#3a2f08;color:#fff6cf;font-size:var(--gs-font-sm);font-weight:800;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 6px 18px #000a}

@media (orientation:portrait){
  /* 세로 줄: 1 차례 시계 · 2~3 상대 자리 · 4 공용 카드 줄(홀덤, 상대 4명 이상) 또는 팟(세븐 포커) · 5~6 상대 자리 · 7 내 자리 한 줄(세븐 포커) · 8 내 패 · 9 안내 · 10 레이즈 조절 · 11 행동 버튼 */
  html.mobile-layout body[data-gs-game$="poker"] .poker-table{--pk-inner-w:calc(var(--pk-w) - var(--pk-gap)*2);
    --pk-top-h:var(--gs-hud-h);--pk-act-h:calc(var(--gs-tap) + 4px + var(--pk-gap));--pk-info-h:calc(var(--pk-line) + 8px);--pk-raise-h:0px;--pk-potrow:0px;--pk-strip-h:0px;
    --pk-hole-max:clamp(50px,calc(var(--pk-h)*.105),104px);--pk-me-h:calc(var(--pk-hole-h) + var(--pk-gap));
    --pk-ra:minmax(0,1fr);--pk-rb:minmax(0,1fr);--pk-rc:minmax(0,1fr);--pk-rd:0px;--pk-rows:3;
    --pk-ring-h:calc(var(--pk-h) - var(--pk-top-h) - var(--pk-potrow) - var(--pk-strip-h) - var(--pk-me-h) - var(--pk-info-h) - var(--pk-raise-h) - var(--pk-act-h) - var(--pk-gap));
    --pk-board-h:max(34px,min(calc(var(--pk-center-w)/5*1.36 - 6px),calc(var(--pk-h)*.12),112px));
    grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:var(--pk-top-h) var(--pk-ra) var(--pk-rb) var(--pk-potrow) var(--pk-rc) var(--pk-rd) var(--pk-strip-h) var(--pk-me-h) var(--pk-info-h) var(--pk-raise-h) var(--pk-act-h);padding:0 var(--pk-gap) var(--pk-gap)}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-raise="open"]{--pk-raise-h:calc(var(--gs-tap)*2 + var(--pk-gap)*2)}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table::after{inset:calc(var(--pk-top-h) + var(--pk-row-h)*.34) 7% calc(var(--pk-act-h) + var(--pk-info-h) + var(--pk-raise-h) + var(--pk-me-h)*.5) 7%}
  html.mobile-layout body[data-gs-game$="poker"] .poker-status{grid-row:1;grid-column:1/-1;height:calc(var(--gs-tap) - 8px);margin-right:var(--gs-menu-reserve)}
  html.mobile-layout body[data-gs-game$="poker"] #poker-pot{grid-row:3;grid-column:4/10;align-self:end;margin-bottom:4px}
  html.mobile-layout body[data-gs-game$="poker"] #poker-street{grid-row:3;grid-column:4/10;align-self:end;margin-bottom:calc(var(--pk-pot-h) + 8px)}
  html.mobile-layout body[data-gs-game$="poker"] #poker-community{grid-row:4;grid-column:1/-1;align-self:center;margin:0}
  html.mobile-layout body[data-gs-game$="poker"] .poker-player[data-pos="tl"]{grid-row:2;grid-column:1/5}
  html.mobile-layout body[data-gs-game$="poker"] .poker-player[data-pos="t"]{grid-row:2;grid-column:5/9}
  html.mobile-layout body[data-gs-game$="poker"] .poker-player[data-pos="tr"]{grid-row:2;grid-column:9/13}
  html.mobile-layout body[data-gs-game$="poker"] .poker-player[data-pos="ml"]{grid-row:3;grid-column:1/4}
  html.mobile-layout body[data-gs-game$="poker"] .poker-player[data-pos="mr"]{grid-row:3;grid-column:10/13}
  html.mobile-layout body[data-gs-game$="poker"] .poker-player[data-pos="bl"]{grid-row:5;grid-column:1/7}
  html.mobile-layout body[data-gs-game$="poker"] .poker-player[data-pos="br"]{grid-row:5;grid-column:7/13}
  html.mobile-layout body[data-gs-game$="poker"] .poker-player[data-pos="b"]{grid-row:5;grid-column:5/9}
  /* 홀덤(세로): 공용 카드는 화면 폭 전체를 쓰는 줄(4번 줄)에 따로 놓는다. 양옆 자리 사이(화면 폭의 절반)에 끼우면 테이블에서 가장 작은 카드가 된다.
     그 높이는 상대의 뒷면 카드에서 가져온다(뒷면 카드는 공용 카드보다 크지 않게 하고, 레이즈 조절을 열어 줄이 모자라면 그리지 않는다).
     줄 순서: 위 자리 / 양옆 자리와 그 사이의 팟 / 공용 카드 / (상대 6명 이상) 아래 자리. 아래 두 자리는 가운데가 비지 않게 반씩 쓰고, 관전 중인 8명 테이블은 아래 줄에 세 자리를 놓는다. */
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"]){--pk-center-w:calc(var(--pk-inner-w) - 16px);--pk-potrow:calc(var(--pk-board-h) + 8px);--pk-mini-cap:min(84px,calc(var(--pk-short)*.2),calc(var(--pk-board-h)*.86))}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"]):is([data-ring="6"],[data-ring="7"],[data-ring="8"]){--pk-board-h:max(34px,min(calc(var(--pk-center-w)/5*1.36 - 6px),calc(var(--pk-h)*.1),112px))}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"]):is([data-ring="4"],[data-ring="5"]){--pk-rc:0px;--pk-rows:2}
  /* 상대 3명 이하: 양옆 자리가 없다. 단계 · 팟을 공용 카드 줄의 위쪽에 함께 두고, 그 아래에 빈 줄을 조금 남겨 가운데 묶음이 내 패에 붙지 않게 한다. */
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-few="true"]{--pk-potrow:calc(var(--pk-board-h) + var(--pk-pot-h) + var(--pk-line) + 22px);--pk-rb:0px;--pk-rc:minmax(0,.35fr);--pk-rows:1.35;--pk-mini-cap:min(120px,calc(var(--pk-short)*.3),var(--pk-board-h))}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-few="true"] #poker-street{grid-row:4;grid-column:1/-1;align-self:start;margin:2px 0 0}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-few="true"] #poker-pot{grid-row:4;grid-column:1/-1;align-self:start;margin:calc(var(--pk-line) + 8px) 0 0}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-few="true"] #poker-community{align-self:end;margin:0 0 4px}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"]) .poker-player:is([data-pos="bl"],[data-pos="br"]){--pk-seat-cols:6}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-ring="8"] .poker-player:is([data-pos="bl"],[data-pos="br"],[data-pos="b"]){--pk-seat-cols:4}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-ring="8"] .poker-player[data-pos="bl"]{grid-column:1/5}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-ring="8"] .poker-player[data-pos="br"]{grid-column:9/13}
  /* 위쪽 가운데 자리가 없으면 위 두 자리를 반씩 쓴다. */
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:is([data-ring="2"],[data-ring="4"],[data-ring="6"]) .poker-player[data-pos="tl"]{grid-column:1/7}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:is([data-ring="2"],[data-ring="4"],[data-ring="6"]) .poker-player[data-pos="tr"]{grid-column:7/13}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-ring="1"] .poker-player[data-pos="t"]{grid-column:3/11}
  html.mobile-layout body[data-gs-game$="poker"] .poker-player.me{grid-row:8;grid-column:1/4;justify-self:start;align-self:end;--pk-seat-cols:3;max-height:var(--pk-hole-h);text-align:left}
  html.mobile-layout body[data-gs-game$="poker"] .poker-player.me>b,html.mobile-layout body[data-gs-game$="poker"] .poker-player.me>span{justify-content:flex-start}
  html.mobile-layout body[data-gs-game$="poker"] .poker-hand{grid-row:8;grid-column:1/-1;align-self:end;height:var(--pk-hole-h)}
  html.mobile-layout body[data-gs-game$="poker"] #poker-action-info{grid-row:9;grid-column:1/-1;align-self:start;margin-top:3px;padding:0 4px;text-overflow:ellipsis;white-space:nowrap}
  html.mobile-layout body[data-gs-game$="poker"] .poker-turn-bar{grid-row:9;grid-column:1/-1;align-self:end}
  html.mobile-layout body[data-gs-game$="poker"] #poker-raise-row{grid-row:10;grid-column:1/-1;align-self:end;grid-template-columns:var(--gs-tap) minmax(0,1fr) var(--gs-tap) minmax(0,1.3fr);grid-template-rows:var(--gs-tap) var(--gs-tap)}
  html.mobile-layout body[data-gs-game$="poker"] #poker-raise-confirm{grid-row:2}
  html.mobile-layout body[data-gs-game$="poker"] #poker-actions{grid-row:11;grid-column:1/-1;align-self:end;grid-template-columns:repeat(5,minmax(0,1fr))}
  html.mobile-layout body[data-gs-game$="poker"] #poker-actions button{height:calc(var(--gs-tap) + 4px)}
  html.mobile-layout body[data-gs-game$="poker"] #poker-open-results{grid-row:11;grid-column:1/-1;align-self:end;justify-self:center;width:min(100%,360px);height:calc(var(--gs-tap) + 4px);font-size:var(--gs-font-md)}
  /* 관전: 끝난 판에서는 대기방 화면으로 가는 버튼만 둔다. */
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-me="false"]{--pk-me-h:0px;--pk-strip-h:0px;--pk-act-h:0px}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-me="false"][data-phase="ended"]{--pk-act-h:calc(var(--gs-tap) + 4px + var(--pk-gap))}
  /* 세븐 포커(세로): 공개 카드가 최대 7장이라 자리를 두 칸으로 넓게 쓴다. 팟은 자리 줄 사이의 가운데 줄, 내 자리는 한 줄로 눕힌다. */
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"]{--pk-info-lines:1;--pk-potrow:calc(var(--pk-pot-h) + 8px);--pk-strip-h:calc(var(--pk-line) + 8px);--pk-hole-w:min(calc(var(--pk-hole-max)*.7),calc((var(--pk-inner-w) - var(--gs-tap) - 36px)/7));--pk-ra:0px;--pk-rb:0px;--pk-rc:0px;--pk-rd:0px;--pk-rows:1}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"]:is([data-ring="1"],[data-ring="3"],[data-ring="5"]){--pk-ra:minmax(0,1fr)}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"]:is([data-ring="2"],[data-ring="3"],[data-ring="4"],[data-ring="5"],[data-ring="6"]){--pk-rb:minmax(0,1fr)}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"]:is([data-ring="4"],[data-ring="5"],[data-ring="6"]){--pk-rc:minmax(0,1fr)}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-ring="6"]{--pk-rd:minmax(0,1fr)}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"]:is([data-ring="3"],[data-ring="4"]){--pk-rows:2}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"]:is([data-ring="5"],[data-ring="6"]){--pk-rows:3}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-me="false"]{--pk-strip-h:0px}
  /* 상대가 1~2명이면 자리 한 줄을 위쪽에 두고 팟을 테이블 가운데쯤에 놓는다(팟 아래는 빈 줄). */
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-ring="1"],html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-ring="2"]{--pk-rc:minmax(0,.55fr);--pk-rows:1.55}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"]::after{display:none}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-few="true"]::after{display:block}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] #poker-pot{grid-row:4;grid-column:1/-1;align-self:center;margin:0}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] #poker-street{grid-row:4;grid-column:1/4;align-self:center;justify-self:end;margin:0}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] .poker-player{--pk-seat-cols:6;--pk-seat-max:420px}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] .poker-player>span,html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] .poker-player .poker-showdown-hand{flex-wrap:nowrap}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] .poker-player[data-pos="t"]{grid-row:2;grid-column:1/-1}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] .poker-player[data-pos="tl"]{grid-row:3;grid-column:1/7}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] .poker-player[data-pos="tr"]{grid-row:3;grid-column:7/13}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] .poker-player[data-pos="ml"]{grid-row:5;grid-column:1/7}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] .poker-player[data-pos="mr"]{grid-row:5;grid-column:7/13}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] .poker-player[data-pos="bl"]{grid-row:6;grid-column:1/7}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] .poker-player[data-pos="br"]{grid-row:6;grid-column:7/13}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] .poker-player.me{grid-row:7;grid-column:1/-1;justify-self:stretch;align-self:end;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;width:auto;height:calc(var(--pk-strip-h) - 2px);max-height:none;padding:0 8px}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] .poker-player.me>b{flex:0 1 auto}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] .poker-hand{grid-template-columns:minmax(0,1fr) auto}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] #poker-hole-cards{grid-column:1;justify-content:flex-start}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] .poker-hand-chip{grid-column:2}
}

@media (orientation:landscape){
  /* 가로 줄: 1 위 자리 · 2 양옆 자리와 가운데 · 3 내 자리 줄(상대가 6명 이상이면 아래 양옆 자리와 함께 쓴다). 13번째 칸은 오른쪽 조작 열. */
  html.mobile-layout body[data-gs-game$="poker"] .poker-table{--pk-side:calc(var(--gs-tap)*4 + var(--pk-gap)*3);--pk-side-top:calc(var(--gs-tap) + var(--pk-line) + 4px);--pk-side-act:calc(var(--gs-tap)*2 + var(--pk-gap));
    --pk-inner-w:calc(var(--pk-w) - var(--pk-side) - var(--pk-gap)*3);
    --pk-hole-max:clamp(44px,calc(var(--pk-h)*.2),96px);--pk-me-h:max(var(--pk-hole-h),calc(var(--pk-line)*3 + 16px));--pk-ra:minmax(0,1fr);--pk-rb:minmax(0,1fr);--pk-rc:calc(var(--pk-me-h) + var(--pk-gap));--pk-rows:2;
    --pk-ring-h:calc(var(--pk-h) - var(--pk-gap)*2 - var(--pk-me-h) - var(--pk-gap));
    --pk-board-h:max(30px,min(calc(var(--pk-center-w)/5*1.36 - 6px),calc(var(--pk-row-h) - var(--pk-pot-h) - var(--pk-line) - 18px),calc(var(--pk-h)*.2),112px));
    --pk-fit:min(calc(var(--pk-mini-x) - var(--pk-fit-need)),calc(var(--pk-h) - var(--pk-side-top) - var(--pk-side-act) - var(--gs-tap)*3 - var(--pk-gap)*6));
    --pk-mini-cap:min(84px,calc(var(--pk-short)*.2),var(--pk-board-h));
    grid-template-columns:repeat(12,minmax(0,1fr)) var(--pk-side);grid-template-rows:var(--pk-ra) var(--pk-rb) var(--pk-rc);padding:var(--pk-gap)}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:is([data-ring="6"],[data-ring="7"],[data-ring="8"]){--pk-rc:minmax(0,1fr);--pk-rows:3;--pk-ring-h:calc(var(--pk-h) - var(--pk-gap)*2);--pk-hole-max:clamp(40px,calc(var(--pk-row-h) - var(--pk-line) - 18px),96px);--pk-me-h:var(--pk-hole-h)}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-me="false"]:not([data-ring="6"]):not([data-ring="7"]):not([data-ring="8"]){--pk-rc:0px;--pk-ring-h:calc(var(--pk-h) - var(--pk-gap)*2)}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"]{--pk-hole-w:min(calc(var(--pk-hole-max)*.7),calc((var(--pk-col)*9 - var(--gs-tap) - 36px)/7))}
  /* 세븐 포커 상대 1~3명(가로): 자리가 위 한 줄뿐이다. 팟 줄은 낮게 하고 자리 줄과 자리 폭을 넓혀 상대 카드를 크게 놓는다(가운데가 비지 않게).
     다만 상대 카드는 내 카드(--pk-hole-w)보다 크게 그리지 않는다(카드가 3~4장뿐인 초반에 상대 카드만 커지지 않게). */
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-few="true"]{--pk-rb:minmax(0,.45fr);--pk-rows:1.45}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-few="true"] .poker-player{--pk-seat-max:320px}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-few="true"] .poker-mini-cards{--pk-cw:min(max(var(--pk-cw1),var(--pk-cw2)),var(--pk-hole-w))}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table::after{inset:calc(var(--pk-row-h)*.4) calc(var(--pk-side) + var(--pk-inner-w)*.08) calc(var(--pk-row-h)*.4) calc(var(--pk-inner-w)*.08)}
  /* 오른쪽 열 */
  html.mobile-layout body[data-gs-game$="poker"] .poker-status{grid-row:1/4;grid-column:13;align-self:start;flex-wrap:wrap;align-content:center;gap:1px var(--pk-gap);height:var(--pk-side-top);margin:0 calc(var(--gs-menu-reserve) - var(--pk-gap)) 0 var(--pk-gap);padding:0 6px;border-radius:var(--gs-radius)}
  /* 오른쪽 열은 좁다. 블라인드는 숫자만 남긴다(코인전 · 5/10). */
  html.mobile-layout body[data-gs-game$="poker"] #poker-table-meta{flex:1 0 100%;text-align:left}
  html.mobile-layout body[data-gs-game$="poker"] .poker-meta-label{display:none}
  html.mobile-layout body[data-gs-game$="poker"] .poker-meta-sep{display:inline}
  html.mobile-layout body[data-gs-game$="poker"] #poker-turn-label{flex:1 1 0}
  html.mobile-layout body[data-gs-game$="poker"] #poker-action-info{grid-row:1/4;grid-column:13;align-self:start;margin:calc(var(--pk-side-top) + var(--pk-gap)) 0 0 var(--pk-gap);padding:0 2px;max-height:calc(var(--pk-line)*3);text-align:left;white-space:normal;word-break:keep-all}
  html.mobile-layout body[data-gs-game$="poker"] .poker-turn-bar{grid-row:1/4;grid-column:13;align-self:end;margin:0 0 calc(var(--pk-side-act) + var(--pk-gap)) var(--pk-gap)}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-raise="open"] #poker-action-info,html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-raise="open"] .poker-turn-bar{display:none}
  html.mobile-layout body[data-gs-game$="poker"] #poker-actions{grid-row:1/4;grid-column:13;align-self:end;grid-template-columns:repeat(6,minmax(0,1fr));margin-left:var(--pk-gap)}
  html.mobile-layout body[data-gs-game$="poker"] #poker-actions button{grid-column:span 2;height:var(--gs-tap)}
  html.mobile-layout body[data-gs-game$="poker"] #poker-actions button:nth-child(n+4){grid-column:span 3}
  html.mobile-layout body[data-gs-game$="poker"] #poker-open-results{grid-row:1/4;grid-column:13;align-self:end;justify-self:stretch;width:auto;height:var(--pk-side-act);margin-left:var(--pk-gap);padding:0 6px;font-size:var(--gs-font-sm)}
  /* 레이즈 조절(가로): 행동 버튼 바로 위에 세 줄(빠른 금액 / − 금액 + / 확정). 열려 있는 동안 안내 글은 접는다. */
  html.mobile-layout body[data-gs-game$="poker"] #poker-raise-row{grid-row:1/4;grid-column:13;align-self:end;grid-template-columns:var(--gs-tap) minmax(0,1fr) var(--gs-tap);grid-template-rows:repeat(3,var(--gs-tap));margin:0 0 calc(var(--pk-side-act) + var(--pk-gap)) var(--pk-gap)}
  html.mobile-layout body[data-gs-game$="poker"] #poker-raise-confirm{grid-row:3;grid-column:1/-1}
  /* 관전(가로): 조작 버튼이 없으므로 오른쪽 열을 메뉴 버튼 아래의 좁은 안내 칸으로 줄이고, 남는 폭은 자리와 공용 카드가 쓴다.
     안내 칸: 메뉴 버튼 아래에 남은 초 / 누구 차례 / 코인전 · 블라인드, 바로 밑에 남은 시간 막대와 안내 글. 끝난 판의 "대기방 화면으로" 버튼은 칸 아래쪽에 둔다. */
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-me="false"]{--pk-side:calc(var(--gs-tap)*2 + var(--pk-gap)*2);--pk-side-top:calc(var(--gs-menu-reserve) + var(--pk-line)*5 + 34px);--pk-side-act:calc(var(--gs-tap) + var(--pk-line))}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-me="false"] .poker-status{align-content:flex-start;gap:2px var(--pk-gap);height:calc(var(--pk-side-top) - var(--gs-menu-reserve) + var(--pk-gap));margin:calc(var(--gs-menu-reserve) - var(--pk-gap)) 0 0 var(--pk-gap);padding:0;border:0;border-radius:0;background:none;white-space:normal;text-shadow:0 1px 2px #000c}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-me="false"] #poker-clock{text-shadow:none}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-me="false"] #poker-turn-label{flex:1 0 100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;max-height:3.6em;padding:0 2px;word-break:keep-all;overflow-wrap:anywhere}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-me="false"] #poker-table-meta{max-height:2.4em;padding:0 2px;word-break:keep-all}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-me="false"] .poker-turn-bar{align-self:start;margin:calc(var(--pk-side-top) + 2px) 0 0 var(--pk-gap)}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-me="false"] #poker-action-info{margin-top:calc(var(--pk-side-top) + 5px + var(--pk-gap));max-height:calc(var(--pk-line)*4);text-shadow:0 1px 2px #000c}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-me="false"] #poker-open-results{padding:0 4px;line-height:1.25;white-space:normal;word-break:keep-all}
  /* 가운데와 자리 */
  html.mobile-layout body[data-gs-game$="poker"] #poker-street{grid-row:2;grid-column:4/10;align-self:start;margin-top:2px}
  html.mobile-layout body[data-gs-game$="poker"] #poker-pot{grid-row:2;grid-column:4/10;align-self:start;margin-top:calc(var(--pk-line) + 10px)}
  html.mobile-layout body[data-gs-game$="poker"] #poker-community{grid-row:2;grid-column:4/10;align-self:end;margin-bottom:3px}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-few="true"] #poker-pot,html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-few="true"] #poker-street,html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-few="true"] #poker-community{grid-column:1/13}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] #poker-street{align-self:center;margin:0 0 calc(var(--pk-pot-h) + 6px)}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] #poker-pot{align-self:center;margin:calc(var(--pk-line) + 6px) 0 0}
  html.mobile-layout body[data-gs-game$="poker"] .poker-player[data-pos="tl"]{grid-row:1;grid-column:1/5}
  html.mobile-layout body[data-gs-game$="poker"] .poker-player[data-pos="t"]{grid-row:1;grid-column:5/9}
  html.mobile-layout body[data-gs-game$="poker"] .poker-player[data-pos="tr"]{grid-row:1;grid-column:9/13}
  html.mobile-layout body[data-gs-game$="poker"] .poker-player[data-pos="ml"]{grid-row:2;grid-column:1/4}
  html.mobile-layout body[data-gs-game$="poker"] .poker-player[data-pos="mr"]{grid-row:2;grid-column:10/13}
  html.mobile-layout body[data-gs-game$="poker"] .poker-player[data-pos="bl"]{grid-row:3;grid-column:1/4}
  html.mobile-layout body[data-gs-game$="poker"] .poker-player[data-pos="br"]{grid-row:3;grid-column:10/13}
  html.mobile-layout body[data-gs-game$="poker"] .poker-player[data-pos="b"]{grid-row:3;grid-column:4/10}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:is([data-ring="2"],[data-ring="4"],[data-ring="6"]) .poker-player[data-pos="tl"]{grid-column:1/7}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:is([data-ring="2"],[data-ring="4"],[data-ring="6"]) .poker-player[data-pos="tr"]{grid-column:7/13}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-ring="1"] .poker-player[data-pos="t"]{grid-column:3/11}
  /* 내 자리 줄: 왼쪽에 내 정보, 가운데 내 패, 오른쪽에 족보 버튼. */
  html.mobile-layout body[data-gs-game$="poker"] .poker-player.me{grid-row:3;grid-column:1/4;align-self:end;justify-self:center;--pk-seat-cols:3;max-height:var(--pk-me-h);text-align:center}
  html.mobile-layout body[data-gs-game$="poker"] .poker-hand{grid-row:3;grid-column:4/13;align-self:end;height:var(--pk-me-h);grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  html.mobile-layout body[data-gs-game$="poker"] #poker-hole-cards{grid-column:1}
  html.mobile-layout body[data-gs-game$="poker"] .poker-hand-chip{grid-column:2;justify-self:center}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"] .poker-hand{grid-template-columns:minmax(0,1fr) auto}
  /* 상대 6~7명: 아래 양옆에도 자리가 있어 내 정보는 한 줄로 눕혀 내 패 위에 둔다. */
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:is([data-ring="6"],[data-ring="7"]) .poker-player.me{grid-column:4/10;align-self:start;justify-self:stretch;flex-direction:row;align-items:center;justify-content:center;gap:8px;width:auto;height:calc(var(--pk-line) + 8px);max-height:none;padding:0 8px}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:is([data-ring="6"],[data-ring="7"]) .poker-player.me>b{flex:0 1 auto}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:is([data-ring="6"],[data-ring="7"]) .poker-player.me>span{flex-wrap:nowrap}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:is([data-ring="6"],[data-ring="7"]) .poker-hand{grid-column:4/10;grid-template-columns:minmax(0,1fr) auto}
  /* 홀덤 6~8명 테이블의 관전(가로): 세 줄로 나누면 줄이 낮아 카드가 작다. 위 자리 줄 / 단계 · 팟 · 공용 카드 한 줄 / 아래 자리 줄로 놓는다(시계 방향 순서는 그대로). */
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"]){--pk-board-h:max(30px,min(calc(var(--pk-center-w)/5*1.36 - 6px),calc(var(--pk-h)*.17),112px));--pk-potrow:calc(var(--pk-board-h) + 8px);--pk-rb:var(--pk-potrow);--pk-rows:2;--pk-ring-h:calc(var(--pk-h) - var(--pk-gap)*2 - var(--pk-potrow));--pk-mini-cap:min(84px,calc(var(--pk-short)*.2),var(--pk-board-h))}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"])::after{display:none}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"]) .poker-player{grid-row:1;--pk-seat-cols:3}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"]) .poker-player:is([data-pos="bl"],[data-pos="b"],[data-pos="br"],[data-pos="mr"]){grid-row:3}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"]) .poker-player[data-pos="ml"]{grid-column:1/4}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"]) .poker-player[data-pos="tl"]{grid-column:4/7}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"]) .poker-player[data-pos="t"]{grid-column:7/10}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"]) .poker-player[data-pos="tr"]{grid-column:10/13}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"]) .poker-player[data-pos="bl"]{grid-column:1/4}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"]) .poker-player[data-pos="b"]{grid-column:4/7}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"]) .poker-player[data-pos="br"]{grid-column:7/10}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"]) .poker-player[data-pos="mr"]{grid-column:10/13}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"])[data-ring="6"] .poker-player,html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"])[data-ring="7"] .poker-player:is([data-pos="bl"],[data-pos="br"],[data-pos="mr"]){--pk-seat-cols:4}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"])[data-ring="6"] .poker-player[data-pos="ml"],html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"]):is([data-ring="6"],[data-ring="7"]) .poker-player[data-pos="bl"]{grid-column:1/5}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"])[data-ring="6"] .poker-player[data-pos="tl"],html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"]):is([data-ring="6"],[data-ring="7"]) .poker-player[data-pos="br"]{grid-column:5/9}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"])[data-ring="6"] .poker-player[data-pos="tr"],html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"]):is([data-ring="6"],[data-ring="7"]) .poker-player[data-pos="mr"]{grid-column:9/13}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"]) #poker-street{grid-row:2;grid-column:1/3;align-self:center;justify-self:end;margin:0}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"]) #poker-pot{grid-row:2;grid-column:3/7;align-self:center;margin:0}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table:not([data-seven="true"])[data-me="false"]:is([data-ring="6"],[data-ring="7"],[data-ring="8"]) #poker-community{grid-row:2;grid-column:7/13;align-self:center;justify-self:start;margin:0}
  /* 세븐 포커를 6명이 할 때의 관전(가로): 세 줄로 나누면 7장이 너무 작아진다. 위 3자리 / 팟 / 아래 3자리로 놓는다(시계 방향 순서는 그대로). 자리가 넓어 칩 · 베팅을 한 줄에 쓰고 그만큼 카드를 키운다. */
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-me="false"][data-ring="6"]{--pk-potrow:calc(var(--pk-pot-h) + 8px);--pk-rb:var(--pk-potrow);--pk-rows:2;--pk-ring-h:calc(var(--pk-h) - var(--pk-gap)*2 - var(--pk-potrow));--pk-info-lines:1}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-me="false"][data-ring="6"] .poker-player>span,html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-me="false"][data-ring="6"] .poker-player .poker-showdown-hand{flex-wrap:nowrap}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-me="false"][data-ring="6"]::after{display:none}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-me="false"][data-ring="6"] .poker-player{--pk-seat-cols:4}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-me="false"][data-ring="6"] .poker-player[data-pos="ml"]{grid-row:1;grid-column:1/5}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-me="false"][data-ring="6"] .poker-player[data-pos="tl"]{grid-row:1;grid-column:5/9}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-me="false"][data-ring="6"] .poker-player[data-pos="tr"]{grid-row:1;grid-column:9/13}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-me="false"][data-ring="6"] .poker-player[data-pos="mr"]{grid-row:3;grid-column:9/13}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-me="false"][data-ring="6"] .poker-player[data-pos="br"]{grid-row:3;grid-column:5/9}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-me="false"][data-ring="6"] .poker-player[data-pos="bl"]{grid-row:3;grid-column:1/5}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-me="false"][data-ring="6"] #poker-pot{grid-row:2;grid-column:5/9;align-self:center;margin:0}
  html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-seven="true"][data-me="false"][data-ring="6"] #poker-street{grid-row:2;grid-column:1/5;align-self:center;justify-self:end;margin:0 8px 0 0}
  html.mobile-layout body[data-gs-game$="poker"] #poker-hand-guide{top:var(--gs-gap);right:calc(var(--gs-tap)*4 + var(--gs-gap)*5);max-height:calc(var(--gs-stage-h,90vh) - var(--gs-gap)*2)}
  /* 가로에서는 메뉴 창이 화면 왼쪽 위까지 덮는다. 내 차례 알림은 창 머리글의 닫기 버튼 왼쪽(방 채팅 줄)에 두어 "게임 메뉴" 제목을 가리지 않는다. */
  html.mobile-layout body[data-gs-game$="poker"].game-active.mobile-game-chat-open #poker-turn-pill[data-active="true"]{top:calc(var(--gs-safe-t) + var(--gs-gap) + var(--gs-pad));right:calc(var(--gs-safe-r) + var(--gs-gap)*2 + var(--gs-pad) + var(--gs-tap));left:auto;display:block;max-width:calc(min(100vw - var(--gs-safe-l) - var(--gs-safe-r) - var(--gs-gap)*2,520px)*.7 - var(--gs-tap) - var(--gs-pad)*3 - 56px);line-height:calc(var(--gs-tap) - 2px)}
}
/* 금액을 직접 입력하는 동안(data-typing — app.js의 syncPokerTyping이 붙인다): 화면 키보드가 테이블 아래쪽을 가리므로 조작부를 위로 모은다.
   위에서부터 차례 시계 · 금액 조절 · 행동 버튼, 그 아래에 팟 · 공용 카드 · 내 자리와 내 패, 맨 아래에 상대 자리를 놓는다. 보이는 높이가 모자라면 아래쪽부터 잘린다(키보드 밑).
   narrow(세로 폭): 시계 / 빠른 금액 / − 금액 + 확정 / 행동 버튼을 한 줄씩 쌓고 상대 자리는 세 자리씩 놓는다. 키보드 없이 포커스만 남아도 모든 자리가 보인다.
   wide(가로 폭): 아홉 칸으로 나눠 시계 · − 금액 + 확정을 첫 줄, 빠른 금액 · 행동 버튼을 둘째 줄에 놓는다(가로 화면은 키보드 위로 두 줄 남짓만 보인다). 남는 높이가 적어 상대 자리는 숨긴다.
   줄 높이 같은 계산값(--pk-*)은 건드리지 않는다. 평소 배치가 들어가는지 재는 값이 이 배치 때문에 달라지면 안 된다. 입력 중에는 레이즈 조절이 늘 열려 있으므로 선택자에 data-raise="open"을 함께 써서 인원별 규칙보다 앞서게 한다. */
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"]{--pk-typing-card:clamp(var(--gs-tap),calc((var(--pk-h) - var(--gs-tap)*4 - var(--pk-gap)*7)/2),max(var(--gs-tap),calc((var(--pk-w) - var(--gs-tap)*3.6)/3.5)));grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(4,var(--gs-tap));grid-auto-rows:max-content;align-content:start;gap:var(--pk-gap);padding:var(--pk-gap)}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"]::after{display:none}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"]>#poker-action-info,html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"] #poker-street,html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"] .poker-hand-chip,html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing="wide"][data-raise="open"] .poker-player:not(.me){display:none}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"] .poker-player:not(.me){grid-row:auto;grid-column:span 4;align-self:start;--pk-seat-cols:4;--pk-info-lines:2;max-height:none}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"] .poker-player:not(.me)>span{flex-wrap:wrap}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"]>.poker-status{grid-row:1;grid-column:1/-1;align-self:center;flex-wrap:nowrap;gap:var(--pk-gap);height:calc(var(--gs-tap) - 8px);margin:0 var(--gs-menu-reserve) 0 0;padding:0 10px 0 4px;border-radius:999px}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"] #poker-turn-label{flex:0 1 auto}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"] #poker-table-meta{flex:1 1 0;text-align:right}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"]>.poker-turn-bar{grid-row:1;grid-column:1/-1;align-self:end;display:block;margin:0 var(--gs-menu-reserve) 0 0}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"]>#poker-raise-row{grid-row:2/4;grid-column:1/-1;align-self:start;grid-template-columns:var(--gs-tap) minmax(0,1fr) var(--gs-tap) minmax(0,1.3fr);grid-template-rows:var(--gs-tap) var(--gs-tap);margin:0}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"] #poker-raise-confirm{grid-row:2;grid-column:4}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"]>#poker-actions{grid-row:4;grid-column:1/-1;align-self:start;grid-template-columns:repeat(5,minmax(0,1fr));margin:0}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"]>#poker-actions button{grid-column:auto;height:var(--gs-tap)}
/* 팟(왼쪽)과 공용 카드(오른쪽) 한 줄, 그 아래 내 자리(왼쪽)와 내 패(오른쪽) */
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"] #poker-pot{grid-row:5;grid-column:1/-1;align-self:center;justify-self:start;max-width:calc(100% - var(--pk-typing-card)*3.5 - 12px - var(--pk-gap));margin:0;overflow:hidden}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"]>#poker-community{grid-row:5;grid-column:1/-1;align-self:center;justify-self:end;margin:0}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"] #poker-community .poker-card,html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"] #poker-hole-cards .poker-card{width:calc(var(--pk-typing-card)*.7);height:var(--pk-typing-card);font-size:max(12px,calc(var(--pk-typing-card)*.3))}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"] .poker-player.me{grid-row:6;grid-column:1/-1;align-self:center;justify-self:start;flex-direction:column;align-items:stretch;justify-content:center;gap:2px;width:calc(var(--gs-tap)*2.5);height:auto;max-height:var(--pk-typing-card);padding:2px 6px;text-align:left}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"] .poker-player.me>b,html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"] .poker-player.me>span{flex:0 0 auto;justify-content:flex-start}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"]>.poker-hand{grid-row:6;grid-column:1/-1;align-self:center;justify-self:end;display:block;height:auto}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing][data-raise="open"] #poker-hole-cards{justify-content:flex-end}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing="narrow"][data-raise="open"][data-seven="true"] #poker-pot{max-width:100%}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing="narrow"][data-raise="open"][data-seven="true"]>.poker-hand{grid-row:7;justify-self:start}
/* wide */
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing="wide"][data-raise="open"]{--pk-typing-card:clamp(var(--gs-tap),calc(var(--pk-h) - var(--gs-tap)*2 - var(--pk-gap)*5),calc(var(--gs-tap) + 6px));grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(2,var(--gs-tap))}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing="wide"][data-raise="open"]>.poker-status{grid-column:1/3;margin:0}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing="wide"][data-raise="open"] #poker-table-meta{display:none}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing="wide"][data-raise="open"]>.poker-turn-bar{grid-column:1/3;margin:0}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing="wide"][data-raise="open"]>#poker-raise-row{display:contents}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing="wide"][data-raise="open"] .poker-raise-presets{grid-row:2;grid-column:1/5;justify-self:stretch}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing="wide"][data-raise="open"] #poker-raise-minus{grid-row:1;grid-column:3;justify-self:stretch}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing="wide"][data-raise="open"] #poker-raise-amount{grid-row:1;grid-column:4/6}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing="wide"][data-raise="open"] #poker-raise-plus{grid-row:1;grid-column:6;justify-self:stretch}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing="wide"][data-raise="open"] #poker-raise-confirm{grid-row:1;grid-column:7/9;justify-self:stretch}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing="wide"][data-raise="open"]>#poker-actions{grid-row:2;grid-column:5/-1}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing="wide"][data-raise="open"] #poker-pot{grid-row:3;justify-self:end;max-width:none;margin:0 calc(var(--pk-typing-card)*3.5 + 12px + var(--pk-gap)) 0 0}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing="wide"][data-raise="open"]>#poker-community{grid-row:3}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing="wide"][data-raise="open"] .poker-player.me{grid-row:3}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing="wide"][data-raise="open"]>.poker-hand{grid-row:3;justify-self:start;margin-left:calc(var(--gs-tap)*2.5 + var(--pk-gap))}
html.mobile-layout body[data-gs-game$="poker"] .poker-table[data-typing="wide"][data-raise="open"][data-seven="true"] #poker-pot{margin-right:0}
@keyframes gs-poker-blink{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){html.mobile-layout body[data-gs-game$="poker"] .poker-status.urgent #poker-clock{animation:none}html.mobile-layout body[data-gs-game$="poker"] .poker-turn-bar::after{transition:none}}
/* ── END poker ───────────────────────────────── */



/* ── BEGIN wordchain ─────────────────────────────── */
/* 상단 줄(방 제목 · 공용 HUD)을 없애고 화면 전체를 하나의 격자로 쓴다. 판 수는 왼쪽 위, 메뉴 버튼은 오른쪽 위, 입력창 · 힌트 · 제출은 맨 아래(키보드 바로 위).
   세로(tall): [판 수][전체 시간][≡] / 참가자(차례 순서 · 점수) / 현재 단어 / 이을 글자 / 차례 / 턴 시간 / 기록 / [입력창][힌트][제출]
   가로(wide): [판 수][참가자][≡] / 왼쪽(현재 단어 · 이을 글자 · 차례 · 턴 · 전체 시간) | 오른쪽(기록) / [입력창][힌트][제출]
   배치는 app.js의 fitWordChain()이 실제 플레이 영역을 재서 고른다. 기종별 분기는 없다.
   - data-wc-shape: tall | wide (넓이 480px 이상이고 가로가 더 길 때 wide)
   - data-wc-fit: full → compact(화면 키보드가 올라온 높이: 단어+이을 글자 한 줄, 차례+시간 한 줄) → mini(참가자 줄과 기록도 숨김)
   줄 높이는 내용에 따라 변하지 않게 고정한다(잠깐 뜨는 요소는 격자 칸 위에 겹쳐 띄운다). 줄이 늘어나면 입력창이 화면 밖으로 밀린다. */
html.mobile-layout body[data-gs-game="wordchain"].game-active #game>.game-head{display:none}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area{--wc-control-h:calc(var(--gs-tap) + 4px);position:relative;display:grid;flex:1 1 0;width:100%;height:auto;min-height:0;max-height:none;margin:0;padding:0 var(--gs-pad) var(--gs-pad);gap:var(--gs-gap);overflow:hidden;border:0;border-radius:0;background:none;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-rows:var(--gs-hud-h) min-content min-content min-content min-content min-content minmax(calc(var(--gs-tap)*1.6),1fr) min-content;grid-template-areas:"status round round round" "players players players players" "word word word word" "req req req req" "turn turn turn turn" "time time time time" "history history history history" "input input hint submit"}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area :is(.wordchain-hud,.wordchain-prompt,.wordchain-form,.wordchain-item-row){display:contents}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area.spectating{grid-template-rows:var(--gs-hud-h) min-content min-content min-content min-content min-content minmax(calc(var(--gs-tap)*1.6),1fr);grid-template-areas:"status round round round" "players players players players" "word word word word" "req req req req" "turn turn turn turn" "time time time time" "history history history history"}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area.spectating :is(.wordchain-form,.wordchain-item-row){display:none}
/* 단어 · 이을 글자 · 차례 · 턴 시간을 묶는 카드 배경 */
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area::before{content:"";grid-row:word-start/time-end;grid-column:1/-1;border:1px solid #6856a4;border-radius:var(--gs-radius);background:radial-gradient(circle at top,#7660bc35,transparent 62%),#181a20;pointer-events:none}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area.my-turn::before{border-color:#a795ff;box-shadow:0 0 0 1px #a795ff66}
/* 판 수(관전자 수) */
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-status{grid-area:status;align-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:var(--gs-tap);height:calc(var(--gs-hud-h) - var(--gs-gap)*2);padding:0 8px;border:1px solid var(--gs-line);border-radius:var(--gs-radius);background:var(--gs-surface-2);color:var(--gs-text);line-height:1.1;white-space:nowrap}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-status b{font-size:var(--gs-font-sm)}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-status small{color:var(--gs-text-dim);font-size:var(--gs-font-xs)}
/* 판 전체 시간: 메뉴 버튼 자리를 비운다 */
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-round-time{grid-area:round;align-self:center;display:grid;gap:5px;min-width:0;margin:0 var(--gs-menu-reserve) 0 0;color:var(--gs-text-dim);font-size:var(--gs-font-xs);font-weight:800;line-height:1.1}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-round-time>span{color:inherit;font-variant-numeric:tabular-nums;text-align:left;white-space:nowrap}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area.sudden-death .wordchain-round-time>span{color:#ffb4bf}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-round-time-track{height:8px}
/* 참가자: 차례 순서대로, 지금 차례는 ▶ 표시, 나는 '나' 표시 */
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-players{grid-area:players;display:grid;grid-template-columns:repeat(var(--wc-cols,2),minmax(0,1fr));gap:4px;min-width:0;margin:0;padding:0;list-style:none}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-players li{display:flex;align-items:center;gap:4px;min-width:0;height:24px;padding:0 8px;border:1px solid var(--gs-line);border-radius:999px;background:var(--gs-surface-2);color:var(--gs-text-dim);font-size:var(--gs-font-xs);line-height:1.2;white-space:nowrap}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-players li b{flex:1 1 auto;min-width:0;overflow:hidden;font-weight:700;text-overflow:ellipsis}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-players li span{flex:0 0 auto;color:var(--gs-text);font-variant-numeric:tabular-nums;font-weight:800}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-players li i{flex:0 0 auto;color:#ffe08a;font-size:var(--gs-font-xs);font-style:normal}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-players li em{flex:0 0 auto;padding:0 4px;border-radius:6px;background:#5ee6be2e;color:#8ff5d6;font-size:var(--gs-font-xs);font-style:normal;font-weight:900}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-players li span small{font-size:inherit}
/* 5명 이상이면 이름 자리를 넓히기 위해 여백과 단위(점)를 줄인다 */
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-players[data-wc-dense] li{gap:3px;padding:0 6px}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-players[data-wc-dense] li span small{display:none}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-players li.me{border-color:#5ee6be80}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-players li.turn{border-color:#a795ff;background:#7b65cf4d;color:#fff}
/* 현재 단어: 글자 수와 화면 크기에 맞춰 한 줄에 들어오게 줄인다 */
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area #wordchain-current{grid-area:word;z-index:1;display:block;min-width:0;min-height:auto;margin:0;padding:10px 10px 0;overflow:hidden;font-size:clamp(12px,min(calc(var(--gs-stage-h,600px)*.08),calc((var(--gs-stage-w,320px) - 44px)/(var(--wc-len,3)*1.1))),50px);line-height:1.15;text-align:center;text-overflow:ellipsis;white-space:nowrap}
/* 잠깐 뜨는 요소(거절된 단어 · 안내 · 놓친 단어)는 격자 칸 위에 겹쳐 띄워 줄 높이를 바꾸지 않는다 */
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-invalid-flash{position:absolute;grid-area:word;z-index:2;inset:0;display:flex;align-items:center;justify-content:center;min-height:0;padding:10px 10px 0;overflow:hidden;font-size:clamp(12px,min(calc(var(--gs-stage-h,600px)*.08),calc((var(--gs-stage-w,320px) - 44px)/(var(--wc-len,3)*1.1))),50px);line-height:1.15;text-decoration-thickness:3px;white-space:nowrap}
/* 이을 글자 */
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area #wordchain-required{position:static;grid-area:req;z-index:1;justify-self:center;max-width:calc(100% - 20px);padding:3px 12px;overflow:hidden;border:1px solid #a795ff66;border-radius:999px;background:#7b65cf2e;color:#e9e2ff;font-size:var(--gs-font-md);font-weight:800;line-height:1.3;text-align:center;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area #wordchain-required:empty{display:none}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area #wordchain-required b{color:#fff;font-weight:900}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area #wordchain-required small{display:inline;color:#c6bbf7;font-size:inherit}
/* 차례 표시와 그 자리에 잠깐 뜨는 안내(거절 이유 · 힌트) */
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area #wordchain-turn{grid-area:turn;z-index:1;margin:0 10px;padding:6px 10px;overflow:hidden;border-radius:var(--gs-radius);background:#131418;color:#dbeafe;font-size:var(--gs-font-sm);font-weight:800;line-height:1.3;text-align:center;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area.my-turn #wordchain-turn{background:#6c5ce7;color:#fff}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-notice{position:absolute;grid-area:turn;z-index:3;top:50%;right:10px;left:10px;display:flex;align-items:center;justify-content:center;min-height:100%;padding:4px 10px;border:1px solid #ff9aa8b3;border-radius:var(--gs-radius);background:#4a1422;color:#ffe1e6;font-size:var(--gs-font-sm);font-weight:800;line-height:1.25;text-align:center;word-break:keep-all;transform:translateY(-50%)}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-notice[data-kind="info"]{border-color:#ffd86b99;background:#3a2a0a;color:#fff0a8}
/* 턴 시간 */
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-time{grid-area:time;z-index:1;display:flex;flex-direction:row-reverse;align-items:center;gap:8px;min-width:0;margin:0 10px 10px;color:#dbeafe;font-size:var(--gs-font-sm);font-weight:800;line-height:1}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-time>span{flex:0 0 auto;min-width:4.4em;color:inherit;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-time-track{flex:1 1 auto;height:10px}
/* 시간이 얼마 남지 않으면 막대 색과 함께 남은 초도 강조한다 */
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area :is(.wordchain-time,.wordchain-round-time).low>span{color:#ffb4bf}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-dictionary{display:none}
/* 기록: 이 영역만 스크롤한다 */
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-history{grid-area:history;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;gap:4px;min-width:0;min-height:0;max-height:none;margin:0;padding:0;overflow:auto;overscroll-behavior:contain;list-style:none;scrollbar-width:none;touch-action:pan-y}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-history li{align-items:center;gap:6px;min-width:0;padding:6px 9px;border-radius:8px}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-history b{min-width:0;overflow:hidden;font-size:var(--gs-font-sm);text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-history span{flex:0 0 auto;max-width:58%;overflow:hidden;font-size:var(--gs-font-xs);text-overflow:ellipsis}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-history="off"] .wordchain-history{visibility:hidden}
/* 판이 끝났을 때의 놓친 단어 안내는 기록 영역 아래쪽에 겹쳐 띄운다(입력창을 밀지 않는다) */
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-answer{position:absolute;grid-area:history;z-index:2;right:0;bottom:0;left:0;max-height:100%;margin:0;padding:7px 10px;overflow:hidden;border-radius:var(--gs-radius);background:#3a260af5;font-size:var(--gs-font-xs);line-height:1.4}
/* 입력창 · 힌트 · 제출: 엄지가 닿는 맨 아래, 키보드가 올라오면 바로 그 위 */
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area #wordchain-input{grid-area:input;flex:none;width:auto;min-width:0;height:var(--wc-control-h);min-height:0;padding:0 12px;border-radius:var(--gs-radius);font-size:max(16px,var(--gs-font-lg))}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area.my-turn #wordchain-input{border-color:#a795ff}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area #wordchain-submit{grid-area:submit;min-width:calc(var(--gs-tap)*1.4);height:var(--wc-control-h);min-height:0;padding:0 12px;border-radius:var(--gs-radius);font-size:var(--gs-font-md);font-weight:900}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area :is(#use-wordchain-hint,#wordchain-hint){grid-area:hint;flex:none;display:grid;grid-template-columns:auto auto;align-content:center;justify-content:center;align-items:center;gap:1px 3px;min-width:var(--gs-tap);max-width:36vw;height:var(--wc-control-h);min-height:0;padding:0 8px;border-radius:var(--gs-radius);font-size:var(--gs-font-sm);line-height:1.1;white-space:nowrap}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area .wordchain-hint-label{display:none}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area #use-wordchain-hint b{font-weight:800}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area #use-wordchain-hint small{grid-column:1/-1;justify-self:center;color:var(--gs-text-dim);font-size:var(--gs-font-xs)}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area.has-hint #use-wordchain-hint{display:none}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area #wordchain-hint{border-color:#ffd86b;background:#3a2a0a}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area #wordchain-hint::before{content:"💡"}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area #wordchain-hint b{min-width:0;overflow:hidden;font-size:var(--gs-font-md);text-overflow:ellipsis}
/* 키보드가 올라온 낮은 높이(data-wc-fit="compact"): 단어+이을 글자를 한 줄, 차례+턴 시간을 한 줄로 줄인다. 그래도 넘치면 mini로 참가자 줄과 기록을 숨긴다 */
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area:is([data-wc-fit="compact"],[data-wc-fit="mini"]){grid-template-rows:var(--gs-hud-h) min-content min-content min-content minmax(0,1fr) min-content;grid-template-areas:"status round round round" "word word word word" "turn turn time time" "players players players players" "history history history history" "input input hint submit"}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-fit="mini"]{grid-template-rows:minmax(0,var(--gs-hud-h)) minmax(0,min-content) minmax(0,min-content) minmax(0,1fr) min-content;grid-template-areas:"status round round round" "word word word word" "turn turn time time" ". . . ." "input input hint submit"}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-fit="mini"] :is(.wordchain-players,.wordchain-history){display:none}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area:is([data-wc-fit="compact"],[data-wc-fit="mini"]).spectating{grid-template-rows:var(--gs-hud-h) min-content min-content min-content minmax(0,1fr);grid-template-areas:"status round round round" "word word word word" "turn turn time time" "players players players players" "history history history history"}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area:is([data-wc-fit="compact"],[data-wc-fit="mini"])::before{display:none}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area:is([data-wc-fit="compact"],[data-wc-fit="mini"]) .wordchain-prompt{grid-area:word;display:flex;align-items:center;gap:8px;min-width:0}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area:is([data-wc-fit="compact"],[data-wc-fit="mini"]) #wordchain-current{flex:0 1 auto;padding:0 2px;font-size:clamp(20px,calc(var(--gs-stage-h,260px)*.1),30px);line-height:1.2;text-align:left}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area:is([data-wc-fit="compact"],[data-wc-fit="mini"]) #wordchain-required{flex:0 0 auto;max-width:70%}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area:is([data-wc-fit="compact"],[data-wc-fit="mini"]) .wordchain-invalid-flash{right:auto;justify-content:flex-start;max-width:62%;padding:0 6px 0 2px;border-radius:6px;background:var(--gs-surface);font-size:clamp(20px,calc(var(--gs-stage-h,260px)*.1),30px);line-height:1.2}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area:is([data-wc-fit="compact"],[data-wc-fit="mini"]) #wordchain-turn{align-self:center;margin:0;padding:4px 10px}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area:is([data-wc-fit="compact"],[data-wc-fit="mini"]) .wordchain-time{align-self:center;margin:0}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area:is([data-wc-fit="compact"],[data-wc-fit="mini"]) .wordchain-notice{right:0;left:0;padding:1px 8px;font-size:var(--gs-font-xs);line-height:1.15}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area:is([data-wc-fit="compact"],[data-wc-fit="mini"]) .wordchain-answer{grid-area:turn;grid-column:1/-1;top:50%;bottom:auto;transform:translateY(-50%)}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area:is([data-wc-fit="compact"],[data-wc-fit="mini"]) .wordchain-answer{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:100%;max-height:none;padding:4px 10px}
/* 넓은 화면(가로로 든 휴대폰 · 태블릿 가로): 왼쪽에 단어와 시간, 오른쪽에 기록.
   방향 미디어 쿼리 대신 app.js가 실제 플레이 영역의 가로·세로를 재서 data-wc-shape="wide"를 붙인다.
   키보드가 화면 높이를 줄이는 브라우저에서는 세로로 든 휴대폰도 "가로"로 판정되어 좁은 폭에 두 열 배치가 적용되기 때문이다. */
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"]{grid-template-columns:auto minmax(0,1.5fr) minmax(0,1fr) auto auto;grid-template-rows:var(--gs-hud-h) minmax(0,1fr) min-content min-content minmax(0,1fr) min-content min-content min-content min-content;grid-template-areas:"status players players players players" "cardtop cardtop history history history" "word word history history history" "req req history history history" "cardmid cardmid history history history" "turn turn history history history" "time time history history history" "round round history history history" "input input input hint submit"}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"].spectating{grid-template-rows:var(--gs-hud-h) minmax(0,1fr) min-content min-content minmax(0,1fr) min-content min-content min-content;grid-template-areas:"status players players players players" "cardtop cardtop history history history" "word word history history history" "req req history history history" "cardmid cardmid history history history" "turn turn history history history" "time time history history history" "round round history history history"}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"]::before{grid-row:cardtop-start/round-end;grid-column:word-start/word-end}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"] .wordchain-players{align-self:center;margin-right:var(--gs-menu-reserve)}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"] .wordchain-players li{height:min(26px,calc((var(--gs-hud-h) - var(--gs-gap) - 4px*(var(--wc-rows,1) - 1))/var(--wc-rows,1)))}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"] :is(#wordchain-current,.wordchain-invalid-flash){padding-top:0;font-size:clamp(12px,min(calc(var(--gs-stage-h,320px)*.11),calc((var(--gs-stage-w,568px)*.5 - 40px)/(var(--wc-len,3)*1.1))),50px)}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"] .wordchain-time{margin-bottom:0}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"] .wordchain-round-time{z-index:1;display:flex;flex-direction:row-reverse;align-items:center;gap:8px;margin:0 10px 10px;line-height:1}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"] .wordchain-round-time>span{flex:0 0 auto;min-width:4.4em;font-size:var(--gs-font-sm);text-align:right}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"] .wordchain-round-time-track{flex:1 1 auto}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"] .wordchain-history{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
/* 가로에서 키보드가 올라오면 두 줄짜리 HUD와 입력 줄만 남는다 */
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"]:is([data-wc-fit="compact"],[data-wc-fit="mini"]){--wc-line:calc((var(--gs-hud-h) - var(--gs-gap))/2);grid-template-columns:auto minmax(0,1.3fr) minmax(0,1fr) auto auto;grid-template-rows:var(--wc-line) var(--wc-line) min-content minmax(0,1fr) min-content;grid-template-areas:"status word time time time" "status turn round round round" "players players players players players" ". . . . ." "input input input hint submit"}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"][data-wc-fit="mini"]{grid-template-rows:minmax(0,var(--wc-line)) minmax(0,var(--wc-line)) minmax(0,1fr) min-content;grid-template-areas:"status word time time time" "status turn round round round" ". . . . ." "input input input hint submit"}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"]:is([data-wc-fit="compact"],[data-wc-fit="mini"]).spectating{grid-template-rows:var(--wc-line) var(--wc-line) min-content minmax(0,1fr);grid-template-areas:"status word time time time" "status turn round round round" "players players players players players" ". . . . ."}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"]:is([data-wc-fit="compact"],[data-wc-fit="mini"]) .wordchain-status{align-self:stretch;height:auto;min-height:0}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"]:is([data-wc-fit="compact"],[data-wc-fit="mini"]) .wordchain-players{grid-template-columns:repeat(var(--wc-count,2),minmax(0,1fr));margin-right:0}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"]:is([data-wc-fit="compact"],[data-wc-fit="mini"]) .wordchain-players li{height:24px}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"]:is([data-wc-fit="compact"],[data-wc-fit="mini"]) :is(#wordchain-current,.wordchain-invalid-flash){font-size:clamp(18px,calc(var(--wc-line) - 4px),24px);line-height:var(--wc-line)}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"]:is([data-wc-fit="compact"],[data-wc-fit="mini"]) #wordchain-required{padding:0 10px;font-size:var(--gs-font-sm)}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"]:is([data-wc-fit="compact"],[data-wc-fit="mini"]) #wordchain-turn{padding:2px 10px}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"]:is([data-wc-fit="compact"],[data-wc-fit="mini"]) :is(.wordchain-time,.wordchain-round-time){align-self:center;margin:0 var(--gs-menu-reserve) 0 0}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"]:is([data-wc-fit="compact"],[data-wc-fit="mini"]) .wordchain-history{display:none}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"]:is([data-wc-fit="compact"],[data-wc-fit="mini"]) .wordchain-notice{grid-area:2/2/3/-1;right:var(--gs-menu-reserve);display:block;padding:0 10px;overflow:hidden;font-size:var(--gs-font-sm);line-height:var(--wc-line);text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="wordchain"] #wordchain-play-area[data-wc-shape="wide"]:is([data-wc-fit="compact"],[data-wc-fit="mini"]) .wordchain-answer{grid-area:1/2/3/-1;right:var(--gs-menu-reserve)}
/* 메뉴 시트가 열린 동안 내 차례가 왔을 때의 알림(시트 머리글 자리) */
html.mobile-layout body[data-gs-game="wordchain"].game-active.mobile-game-chat-open #room-mobile-sidebar .wordchain-menu-turn{position:absolute;z-index:3;top:var(--gs-pad);right:calc(var(--gs-pad) + var(--gs-tap) + var(--gs-gap));left:var(--gs-pad);display:flex;align-items:center;justify-content:center;height:var(--gs-tap);min-height:0;padding:0 12px;overflow:hidden;border:1px solid #c9bcff;border-radius:var(--gs-radius);background:#6c5ce7;color:#fff;font-size:var(--gs-font-sm);font-weight:900;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 6px 18px #0009}
/* ── END wordchain ───────────────────────────────── */



/* ── BEGIN yutnori ─────────────────────────────── */
/* 상단 줄(방 제목 · 진행 시간 줄)을 없애고 화면 전체를 하나의 격자로 쓴다. 메뉴 버튼은 오른쪽 위 그대로다.
   세로: [참가자 … ≡] / 윷판 / 상태 줄 / [윷 던지는 자리 | 누적 결과] / [대기 말 | 윷 던지기]
   가로: 윷판 | [참가자 … ≡] / 상태 줄 / [윷 던지는 자리 | 누적 결과] / [대기 말 | 윷 던지기]
   윷판은 남는 공간에 맞춰 가장 큰 정사각형으로 놓고, 말 · 도착 표시 · 글자는 판 크기(cqw)에 비례한다(yutnori.css).
   .yut-layout 아래의 묶음 상자들은 display:contents로 풀어 한 격자에 다시 놓는다. */
html.mobile-layout body[data-gs-game="yutnori"].game-active #game>.game-head{display:none}
html.mobile-layout body[data-gs-game="yutnori"] #yut-play-area:not([hidden]){--yut-queue-min:clamp(57px,14vmin,112px);--yut-board-max:min(calc(var(--gs-stage-w,100vw) - var(--gs-gap)*2),calc(var(--gs-stage-h,var(--gs-vh))*.66));--yut-board-fallback:min(var(--yut-board-max),calc(var(--gs-stage-h,var(--gs-vh))*.5));display:grid;flex:1 1 0;width:100%;min-width:0;min-height:0;margin:0;padding:0 var(--gs-gap) var(--gs-gap);gap:var(--gs-gap);overflow:hidden;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,var(--yut-board-max)) auto auto minmax(var(--yut-queue-min),1fr) auto;grid-template-areas:"legend legend legend" "board board board" "status status status" "toss toss qhead" "toss toss queue" "reserve throw throw"}
html.mobile-layout body[data-gs-game="yutnori"] #yut-play-area :is(.yut-layout,.yut-controls,.yut-throw-stage,.yut-move-panel,.yut-reserve-dock){display:contents}
html.mobile-layout body[data-gs-game="yutnori"] #yut-play-area .yut-reserve-dock[hidden]{display:none}
html.mobile-layout body[data-gs-game="yutnori"] #yut-play-area .yut-throw-stage::before{content:none}
html.mobile-layout body[data-gs-game="yutnori"] #yut-play-area :is(.yut-roster,.yut-reserve-head,.yut-direct-guide,.yut-turn-card>small,.yut-turn-card>strong){display:none}
/* 참가자: 자리 번호(말 색) · 이름 · 완주한 말 수, 지금 차례인 사람은 테두리와 ▶ 표시 */
html.mobile-layout body[data-gs-game="yutnori"] #yut-legend{grid-area:legend;display:flex;align-items:stretch;gap:var(--gs-gap);min-width:0;min-height:var(--gs-hud-h);padding:calc(var(--gs-gap)/2) calc(var(--gs-tap) + var(--gs-gap)) calc(var(--gs-gap)/2) 0}
html.mobile-layout body[data-gs-game="yutnori"] .yut-legend-chip{display:grid;flex:1 1 0;grid-template-columns:auto minmax(0,1fr);align-content:center;align-items:center;gap:1px 6px;min-width:0;padding:0 8px;border:1px solid var(--gs-line);border-radius:var(--gs-radius);background:var(--gs-surface-2);color:var(--gs-text-dim)}
html.mobile-layout body[data-gs-game="yutnori"] .yut-legend-chip>i{grid-row:1/3;display:grid;width:22px;aspect-ratio:1;place-items:center;border:2px solid #fff9ea;border-radius:50%;background:var(--piece-color);color:#fff;font-size:12px;font-style:normal;font-weight:1000;line-height:1;text-shadow:0 1px 2px #0009}
html.mobile-layout body[data-gs-game="yutnori"] .yut-legend-chip>b{overflow:hidden;color:var(--gs-text);font-size:var(--gs-font-sm);line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="yutnori"] .yut-legend-chip>em{overflow:hidden;font-size:var(--gs-font-xs);font-style:normal;line-height:1.2;white-space:nowrap}
html.mobile-layout body[data-gs-game="yutnori"] .yut-legend-chip>em::before{content:"완주 "}
html.mobile-layout body[data-gs-game="yutnori"] .yut-legend-chip.turn{border-color:var(--piece-color);background:color-mix(in srgb,var(--piece-color) 24%,var(--gs-surface-2));box-shadow:inset 0 0 0 1px var(--piece-color)}
html.mobile-layout body[data-gs-game="yutnori"] .yut-legend-chip.turn>b::before{content:"▶ ";font-size:.8em}
html.mobile-layout body[data-gs-game="yutnori"] .yut-legend-chip.me>i{box-shadow:0 0 0 2px #fff}
/* 4명 이상이면 한 줄짜리 칸을 두 줄로 나눠 놓는다. */
html.mobile-layout body[data-gs-game="yutnori"] #yut-legend:is([data-count="4"],[data-count="5"],[data-count="6"]){display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));grid-auto-rows:minmax(20px,1fr);gap:3px var(--gs-gap)}
html.mobile-layout body[data-gs-game="yutnori"] #yut-legend[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
html.mobile-layout body[data-gs-game="yutnori"] #yut-legend:is([data-count="4"],[data-count="5"],[data-count="6"]) .yut-legend-chip{display:flex;gap:3px;padding:0 4px;border-radius:calc(var(--gs-radius)*.6)}
html.mobile-layout body[data-gs-game="yutnori"] #yut-legend:is([data-count="4"],[data-count="5"],[data-count="6"]) .yut-legend-chip>i{flex:0 0 auto;width:16px;border-width:1px;font-size:11px}
html.mobile-layout body[data-gs-game="yutnori"] #yut-legend:is([data-count="4"],[data-count="5"],[data-count="6"]) .yut-legend-chip>b{flex:1 1 0;min-width:0;font-size:var(--gs-font-xs)}
html.mobile-layout body[data-gs-game="yutnori"] #yut-legend:is([data-count="4"],[data-count="5"],[data-count="6"]) .yut-legend-chip>em{flex:0 0 auto}
html.mobile-layout body[data-gs-game="yutnori"] #yut-legend:is([data-count="4"],[data-count="5"],[data-count="6"]) .yut-legend-chip>em::before{content:none}
/* 칸이 좁으므로 차례 표시(▶)는 이름 앞 글자 대신 칸 왼쪽 여백에 삼각형으로 그린다. 이름이 차지할 자리를 줄이지 않는다. */
html.mobile-layout body[data-gs-game="yutnori"] #yut-legend:is([data-count="4"],[data-count="5"],[data-count="6"]) .yut-legend-chip{position:relative}
html.mobile-layout body[data-gs-game="yutnori"] #yut-legend:is([data-count="4"],[data-count="5"],[data-count="6"]) .yut-legend-chip.turn>b::before{content:none}
html.mobile-layout body[data-gs-game="yutnori"] #yut-legend:is([data-count="4"],[data-count="5"],[data-count="6"]) .yut-legend-chip.turn::before{content:"";position:absolute;top:50%;left:0;transform:translateY(-50%);border:6px solid transparent;border-right:0;border-left-color:#ffd76a}
/* 윷판: 주어진 칸 안에서 가장 큰 정사각형. cqw/cqh를 모르는 오래된 브라우저는 앞에 적은 값(화면 크기 기준)을 쓴다. */
html.mobile-layout body[data-gs-game="yutnori"] .yut-board-shell{grid-area:board;container-type:size;display:grid;place-items:center;min-width:0;min-height:0}
html.mobile-layout body[data-gs-game="yutnori"] .yut-board{width:var(--yut-board-fallback);height:var(--yut-board-fallback);width:min(100cqw,100cqh);height:min(100cqw,100cqh);min-width:0;max-width:none;border-width:clamp(4px,1.7vmin,9px);border-radius:clamp(12px,4.4vmin,22px);box-shadow:inset 0 0 0 3px #99603a,inset 0 0 40px #6a351d70,0 1px 0 #bd7b48,0 4px 12px #0007}
html.mobile-layout body[data-gs-game="yutnori"] :is(.yut-piece,.yut-moving-piece){width:14.5vmin;width:15.5cqw}
html.mobile-layout body[data-gs-game="yutnori"] .yut-piece-disc{width:10vmin;width:10.8cqw}
html.mobile-layout body[data-gs-game="yutnori"] .yut-piece-disc em{font-size:14px;font-size:clamp(12px,4.6cqw,18px)}
html.mobile-layout body[data-gs-game="yutnori"] :is(.yut-piece,.yut-moving-piece)>b{right:1.3vmin;right:1.3cqw;bottom:.9vmin;bottom:.9cqw;min-width:20px;min-width:clamp(18px,5.6cqw,30px);height:20px;height:clamp(18px,5.6cqw,30px);font-size:11px;font-size:clamp(11px,3.2cqw,16px)}
html.mobile-layout body[data-gs-game="yutnori"] #yut-board .yut-target{width:15vmin;width:16cqw}
html.mobile-layout body[data-gs-game="yutnori"] .yut-node-label{font-size:11px;font-size:clamp(11px,3cqw,14px)}
/* 상태 줄: 누구 차례인지 · 지금 할 일 · 진행 시간 */
html.mobile-layout body[data-gs-game="yutnori"] .yut-turn-card{grid-area:status;display:flex;align-items:center;gap:var(--gs-gap);min-width:0;min-height:calc(var(--gs-font-sm)*2.5 + 10px);padding:3px var(--gs-pad) 3px 4px;border:1px solid var(--gs-line);border-radius:var(--gs-radius);background:var(--gs-surface);box-shadow:none}
html.mobile-layout body[data-gs-game="yutnori"] .yut-turn-card.mine{border-color:#a795ff8c;background:#7b65cf2e}
/* 차례 표시: 이름이 길면 이름만 줄이고 '차례'는 남긴다. */
html.mobile-layout body[data-gs-game="yutnori"] #yut-turn-badge{display:flex;flex:0 1 auto;gap:.3em;max-width:40%;overflow:hidden;padding:5px 9px;border-left:5px solid var(--piece-color);border-radius:calc(var(--gs-radius) - 2px);background:var(--gs-surface-2);color:var(--gs-text);font-size:var(--gs-font-sm);font-weight:900;line-height:1.2;white-space:nowrap}
html.mobile-layout body[data-gs-game="yutnori"] #yut-turn-badge>bdi{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
html.mobile-layout body[data-gs-game="yutnori"] .yut-turn-card.mine #yut-turn-badge{background:var(--gs-accent);color:#fff}
html.mobile-layout body[data-gs-game="yutnori"] #yut-status{display:-webkit-box;flex:1 1 0;min-width:0;min-height:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:var(--gs-text);font-size:var(--gs-font-sm);line-height:1.25;white-space:normal;word-break:keep-all}
html.mobile-layout body[data-gs-game="yutnori"] .yut-turn-card.hint #yut-status{color:#ffd98a;font-weight:800}
html.mobile-layout body[data-gs-game="yutnori"] #yut-elapsed{display:block;flex:0 0 auto;color:var(--gs-text-dim);font:700 var(--gs-font-xs)/1 ui-monospace,Consolas,"Courier New",monospace;font-style:normal;white-space:nowrap}
/* 윷 던지는 자리: 윷가락 크기와 던지는 높이를 이 칸의 높이에서 계산해 윷이 칸 밖으로 나가지 않는다. */
html.mobile-layout body[data-gs-game="yutnori"] .yut-toss{grid-area:toss;container:yut-toss/size;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-content:center;align-items:center;justify-content:center;justify-items:center;gap:var(--gs-gap) var(--gs-pad);min-width:0;min-height:0;padding:var(--gs-gap);overflow:hidden;border:1px solid #d5a15870;border-radius:var(--gs-radius);background:radial-gradient(ellipse at 50% 35%,#9d603f45,transparent 55%),linear-gradient(160deg,#231714,#17181e 66%)}
/* 윷가락 크기는 사용자 정의 속성으로 계산한다. 오래된 브라우저는 이 값을 걸러 내지 못하므로 고정 크기를 먼저 두고, 지원하는 브라우저에서만 비례 크기로 바꾼다. */
html.mobile-layout body[data-gs-game="yutnori"] .yut-sticks{grid-column:1/-1;grid-row:1;width:auto;height:56px;gap:6px;--toss-h:8px}
html.mobile-layout body[data-gs-game="yutnori"] .yut-stick{width:19px;height:52px;border-width:1px}
@supports (width:1cqw){
  html.mobile-layout body[data-gs-game="yutnori"] .yut-sticks{--yut-toss-area:calc(100cqh - var(--gs-font-md)*1.3 - var(--gs-gap)*3);--stick-h:clamp(22px,min(calc(var(--yut-toss-area)*.62),54cqw),94px);--toss-h:clamp(4px,calc((var(--yut-toss-area) - var(--stick-h))/2 - 2px),112px);grid-column:1/-1;grid-row:1;width:auto;height:var(--stick-h);gap:calc(var(--stick-h)*.12)}
  html.mobile-layout body[data-gs-game="yutnori"] .yut-stick{width:calc(var(--stick-h)*.34);height:var(--stick-h);border-width:1px}
  html.mobile-layout body[data-gs-game="yutnori"] .yut-stick>span{inset:10% 18% 16%}
  html.mobile-layout body[data-gs-game="yutnori"] .yut-stick>span>em{width:calc(var(--stick-h)*.075)}
  html.mobile-layout body[data-gs-game="yutnori"] .yut-stick::after{height:11%}
  html.mobile-layout body[data-gs-game="yutnori"] .yut-stick.backdo-stick.flat>span::after{width:calc(var(--stick-h)*.24);font-size:calc(var(--stick-h)*.12)}
  html.mobile-layout body[data-gs-game="yutnori"] .yut-sticks::after{height:calc(var(--stick-h)*.18);filter:blur(5px)}
}
html.mobile-layout body[data-gs-game="yutnori"] #yut-result{grid-column:1/-1;grid-row:2;max-width:100%;min-height:0;overflow:hidden;font-size:var(--gs-font-md);line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
/* 칸이 낮고 넓으면 윷가락 옆에 결과를 적어 윷가락을 키운다. */
@container yut-toss (max-height:150px) and (min-width:176px){
  html.mobile-layout body[data-gs-game="yutnori"] .yut-sticks{--yut-toss-area:calc(100cqh - var(--gs-gap)*2);--stick-h:clamp(22px,min(calc(var(--yut-toss-area)*.7),24cqw),94px);grid-column:1;grid-row:1/-1}
  html.mobile-layout body[data-gs-game="yutnori"] #yut-result{grid-column:2;grid-row:1/-1;align-self:center;max-width:9em;white-space:normal;word-break:keep-all;text-align:left}
}
/* 누적 결과: 어떤 결과가 쌓였는지 이름과 칸 수로 보여 준다. */
html.mobile-layout body[data-gs-game="yutnori"] .yut-section-head{grid-area:qhead;display:block;min-width:0;padding:0 2px;color:var(--gs-text-dim);font-size:var(--gs-font-xs);font-weight:800;line-height:1.3;text-align:center;white-space:nowrap}
html.mobile-layout body[data-gs-game="yutnori"] .yut-section-head>*{display:none}
html.mobile-layout body[data-gs-game="yutnori"] .yut-section-head::before{content:"누적 결과"}
/* 몇 개가 쌓였는지 제목 옆에 적는다(칸이 낮아 다 보이지 않을 때도 개수는 알 수 있다). */
html.mobile-layout body[data-gs-game="yutnori"] .yut-section-head>#yut-queue-count{display:inline;min-width:0;height:auto;margin-left:.35em;padding:0;border:0;background:none;color:var(--gs-text);font-size:inherit}
html.mobile-layout body[data-gs-game="yutnori"] .yut-move-panel[data-queue="none"] #yut-queue-count{display:none}
html.mobile-layout body[data-gs-game="yutnori"] #yut-move-options{grid-area:queue;container:yut-queue/size;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-content:start;gap:var(--gs-gap);min-width:calc(var(--gs-tap)*2 + var(--gs-gap));min-height:0;max-height:none;overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:none}
html.mobile-layout body[data-gs-game="yutnori"] .yut-move-card{display:grid;grid-column:span 3;grid-template-columns:none;justify-items:center;align-content:center;gap:1px;min-height:auto;padding:4px 2px;border-radius:var(--gs-radius)}
html.mobile-layout body[data-gs-game="yutnori"] .yut-roll-seal{width:auto;min-width:26px;aspect-ratio:auto;padding:2px 5px;border-radius:999px;font-size:var(--gs-font-sm);line-height:1.25;white-space:nowrap}
html.mobile-layout body[data-gs-game="yutnori"] :is(.yut-roll-copy small,.yut-roll-order){display:none}
html.mobile-layout body[data-gs-game="yutnori"] .yut-roll-copy b{font-size:var(--gs-font-xs);line-height:1.2;white-space:nowrap}
/* 백도는 칸이 좁아 '뒤로 1칸'이 넘치므로 '-1칸'으로 적는다. */
html.mobile-layout body[data-gs-game="yutnori"] .yut-move-card.backdo .yut-roll-copy b>span{display:none}
html.mobile-layout body[data-gs-game="yutnori"] .yut-move-card.backdo .yut-roll-copy b::before{content:"-"}
/* 여섯 칸 격자에 한 줄 2개(3칸씩)로 놓는다. 결과가 5개 이상인데 칸이 낮아 세 줄이 들어가지 않으면 한 줄 3개(2칸씩)로 줄여 가려지는 결과가 없게 한다. */
@container yut-queue (max-height:160px){
  html.mobile-layout body[data-gs-game="yutnori"] .yut-move-panel[data-queue="many"] .yut-move-card{grid-column:span 2;padding-right:0;padding-left:0}
  html.mobile-layout body[data-gs-game="yutnori"] .yut-move-panel[data-queue="many"] .yut-roll-seal{min-width:0;padding-right:1px;padding-left:1px;font-size:var(--gs-font-xs)}
}
/* 칸이 낮으면 이름만 남겨 두 줄이 들어가게 한다. 가장 낮은 칸(--yut-queue-min)에서도 둘째 줄이 잘리지 않는 높이다. */
@container yut-queue (max-height:92px){
  html.mobile-layout body[data-gs-game="yutnori"] .yut-roll-copy{display:none}
  html.mobile-layout body[data-gs-game="yutnori"] .yut-move-card{padding-top:1px;padding-bottom:1px}
}
html.mobile-layout body[data-gs-game="yutnori"] .yut-queue-empty{display:grid;grid-column:1/-1;grid-template-columns:none;place-items:center;align-self:stretch;min-height:var(--gs-tap);padding:4px;border-radius:var(--gs-radius)}
html.mobile-layout body[data-gs-game="yutnori"] .yut-queue-empty>:is(span,b,small){display:none}
html.mobile-layout body[data-gs-game="yutnori"] .yut-queue-empty>em{display:block;color:var(--gs-text-dim);font-size:var(--gs-font-xs);font-style:normal;white-space:nowrap}
/* 출발 대기 말과 윷 던지기: 엄지가 닿는 아래쪽 */
html.mobile-layout body[data-gs-game="yutnori"] #yut-reserve{grid-area:reserve;justify-content:center;gap:var(--gs-gap);min-height:calc(var(--gs-tap) + var(--gs-gap)*2);padding:var(--gs-gap) var(--gs-pad);border-radius:var(--gs-radius)}
html.mobile-layout body[data-gs-game="yutnori"] .yut-reserve-piece{flex:0 0 auto;width:var(--gs-tap);min-height:0;font-size:var(--gs-font-md)}
html.mobile-layout body[data-gs-game="yutnori"] .yut-reserve-empty{max-width:8em;font-size:var(--gs-font-xs);line-height:1.3;text-align:center;word-break:keep-all}
html.mobile-layout body[data-gs-game="yutnori"] #yut-throw{grid-area:throw;min-width:0;min-height:calc(var(--gs-tap) + var(--gs-gap)*2);margin:0;padding:4px var(--gs-pad);border-radius:var(--gs-radius);font-size:var(--gs-font-md);font-weight:1000;line-height:1.25;word-break:keep-all}
html.mobile-layout body[data-gs-game="yutnori"] #yut-throw:disabled{opacity:.66}
/* 관전자는 대기 말과 던지기 버튼이 없다. */
html.mobile-layout body[data-gs-game="yutnori"] #yut-play-area.yut-spectating:not([hidden]){grid-template-rows:auto minmax(0,var(--yut-board-max)) auto auto minmax(var(--yut-queue-min),1fr);grid-template-areas:"legend legend legend" "board board board" "status status status" "toss toss qhead" "toss toss queue"}
html.mobile-layout body[data-gs-game="yutnori"] #yut-play-area.yut-spectating #yut-throw{display:none}
/* 결과 선택 창 */
html.mobile-layout body[data-gs-game="yutnori"] .yut-choice-panel p{font-size:var(--gs-font-md)}
html.mobile-layout body[data-gs-game="yutnori"] #yut-board button.yut-choice-option{min-width:calc(var(--gs-tap) + 12px);min-height:calc(var(--gs-tap) + 12px)}
/* 참가자 · 규칙 창(메뉴의 게임 정보) */
html.mobile-layout body[data-gs-game="yutnori"] .yut-mobile-info-backdrop{position:fixed;z-index:120;inset:0;display:block;width:100%;height:100%;min-height:0;padding:0;border:0;border-radius:0;background:#08090bb8}
html.mobile-layout body[data-gs-game="yutnori"] .yut-mobile-info-backdrop[hidden]{display:none}
html.mobile-layout body[data-gs-game="yutnori"].yut-mobile-info-open #yut-play-area .yut-roster{position:fixed;z-index:123;top:auto;right:calc(var(--gs-safe-r) + var(--gs-gap));bottom:calc(var(--gs-safe-b) + var(--gs-gap));left:calc(var(--gs-safe-l) + var(--gs-gap));display:flex;flex-direction:column;gap:var(--gs-gap);width:auto;max-height:calc(var(--gs-vh) - var(--gs-safe-t) - var(--gs-safe-b) - var(--gs-hud-h) - var(--gs-gap)*2);margin:0;padding:var(--gs-pad);overflow:hidden auto;overscroll-behavior:contain;border:1px solid #4f7b78;border-radius:calc(var(--gs-radius) + 4px);background:linear-gradient(160deg,#10262d,#101115 72%);box-shadow:0 24px 70px #000e}
html.mobile-layout body[data-gs-game="yutnori"] .yut-info-close{position:sticky;z-index:1;top:0;display:grid;flex:0 0 auto;align-self:flex-end;width:var(--gs-tap);height:var(--gs-tap);min-height:0;margin-bottom:calc((var(--gs-tap) + var(--gs-gap))*-1);padding:0;place-items:center;border-radius:var(--gs-radius);font-size:22px;line-height:1}
html.mobile-layout body[data-gs-game="yutnori"] .yut-roster-head{flex:0 0 auto;align-content:center;min-height:var(--gs-tap);padding-right:calc(var(--gs-tap) + var(--gs-gap))}
html.mobile-layout body[data-gs-game="yutnori"] .yut-roster-head small{font-size:var(--gs-font-xs)}
html.mobile-layout body[data-gs-game="yutnori"] .yut-roster-head b{font-size:var(--gs-font-md)}
html.mobile-layout body[data-gs-game="yutnori"] .yut-player-status{flex:0 0 auto}
html.mobile-layout body[data-gs-game="yutnori"] .yut-player-status b{font-size:var(--gs-font-sm)}
html.mobile-layout body[data-gs-game="yutnori"] .yut-player-status span{font-size:var(--gs-font-xs)}
html.mobile-layout body[data-gs-game="yutnori"] .yut-rules{flex:0 0 auto;font-size:var(--gs-font-sm)}
html.mobile-layout body[data-gs-game="yutnori"] .yut-rules summary{display:flex;align-items:center;min-height:var(--gs-tap)}
@media (orientation:landscape){
  html.mobile-layout body[data-gs-game="yutnori"] #yut-play-area:not([hidden]){--yut-board-max:min(calc(var(--gs-stage-h,var(--gs-vh)) - var(--gs-gap)*2),calc(var(--gs-stage-w,100vw)*.68));--yut-board-fallback:min(var(--yut-board-max),calc(var(--gs-stage-w,100vw)*.5));padding:var(--gs-gap);grid-template-columns:minmax(0,var(--yut-board-max)) auto minmax(0,1fr) auto;grid-template-rows:auto auto auto minmax(var(--yut-queue-min),1fr) auto;grid-template-areas:"board legend legend legend" "board status status status" "board toss toss qhead" "board toss toss queue" "board reserve throw throw"}
  html.mobile-layout body[data-gs-game="yutnori"] #yut-legend{min-height:var(--gs-tap);padding-top:0;padding-bottom:0}
  /* 오른쪽 열이 좁으므로 대기 말은 두 줄로 놓고, 그 높이만큼 던지기 버튼을 크게 쓴다. */
  html.mobile-layout body[data-gs-game="yutnori"] #yut-reserve{display:grid;grid-template-columns:repeat(2,var(--gs-tap));align-content:center}
  html.mobile-layout body[data-gs-game="yutnori"] .yut-reserve-empty{grid-column:1/-1}
  html.mobile-layout body[data-gs-game="yutnori"] #yut-play-area.yut-spectating:not([hidden]){grid-template-rows:auto auto auto minmax(var(--yut-queue-min),1fr);grid-template-areas:"board legend legend legend" "board status status status" "board toss toss qhead" "board toss toss queue"}
}
/* ── END yutnori ───────────────────────────────── */



/* ── BEGIN worldmarble ─────────────────────────────── */
/* 가로 전용(세로에서는 셸의 회전 안내가 뜬다). 상단 줄을 없애고 화면 전체를 [판 | 오른쪽 조작 열]로 쓴다.
   판 가운데: 참가자 현금 · 주사위 · 진행 안내 · 칸 안내 / 오른쪽 열: [차례 시계][≡ 자리] · 선택 버튼 · [자산·순위][카드함]
   말은 칸 이름을 가리지 않도록 칸의 안쪽 가장자리에 선다. 크기는 --gs-* 토큰과 실제 플레이 영역(--gs-stage-w/h)에서만 계산한다. */
html.mobile-layout body[data-gs-game="worldmarble"].game-active #game>.game-head{display:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #game{overflow:hidden}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area{--wm-rail:clamp(calc(var(--gs-tap)*3 + var(--gs-gap)*2),calc(var(--gs-stage-w,100vw)*.24),240px);--wm-token:clamp(18px,calc(var(--gs-stage-h,360px)*.055),28px);--wm-token-overlap:4px;--wm-edge:calc(var(--wm-token-overlap) + 1px);--wm-ring:calc(var(--wm-token) - var(--wm-token-overlap) + 2px);--wm-cell-font:clamp(11px,calc(var(--gs-stage-h,360px)*.032),15px);--wm-corner-w:calc(var(--wm-cell-font)*4.4 + var(--wm-edge) + 2px);--wm-mark-inset:clamp(0px,calc(var(--gs-stage-h,360px)*.05 - 16px),2px);--wm-corner-h:calc(var(--wm-cell-font)*3.35 + var(--wm-edge) + var(--wm-mark-inset) + .5px);--wm-die:clamp(30px,calc(var(--gs-stage-h,360px)*.1),56px);--wm-fs:clamp(11px,calc(var(--gs-stage-h,360px)*.031),16px);--wm-btn:clamp(var(--gs-tap),calc(var(--gs-stage-h,360px)*.13),64px);position:relative;display:block;flex:1 1 auto;width:100%;height:100%;min-height:0;box-sizing:border-box;margin:0;padding:var(--gs-gap);overflow:hidden;background:#14161b}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area[hidden]{display:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area[data-role="watch"]{--wm-rail:var(--gs-tap)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--wm-rail);grid-template-rows:minmax(0,1fr);grid-template-areas:"board rail";align-items:stretch;gap:var(--gs-gap);width:100%;height:100%;min-height:0;max-width:none;overflow:visible}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-controls{display:none}
/* 판 */
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-board-shell{grid-area:board;display:block;width:100%;height:100%;min-width:0;min-height:0;padding:0;border-radius:var(--gs-radius);background:none;box-shadow:none;overflow:visible}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board{display:grid;grid-template-columns:minmax(var(--wm-corner-w),1.5fr) repeat(9,minmax(0,1fr)) minmax(var(--wm-corner-w),1.5fr);grid-template-rows:minmax(var(--wm-corner-h),1.3fr) repeat(9,minmax(0,1fr)) minmax(var(--wm-corner-h),1.3fr);width:100%;height:100%;min-width:0;min-height:0;max-width:none;max-height:none;aspect-ratio:auto;margin:0;box-sizing:border-box;border:1px solid #101115;border-radius:var(--gs-radius);background:radial-gradient(ellipse at 50% 40%,#174554 0,#21232b 55%,#1a1c22 100%)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board::before,html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-space-stars{display:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-cells,html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-tokens{display:contents}
/* 칸: 이름과 표식(건물 · 관광지 ★ · 페스티벌 ×n)을 겹치지 않게 칸 안에 나란히 둔다.
   표식은 바깥쪽 가장자리, 무리 색 띠는 말이 걸치는 안쪽 가장자리에 온다. 모서리 줄 · 칸의 최소 크기(--wm-corner-w/h)는
   두 줄 이름 + 표식이 들어가도록 글자 크기에서 계산한다(세로: 이름 두 줄 2.1 + 사이 0.25 + 표식 1 글자 높이, 가로: 이름 3 + 표식 1.4 글자 폭).
   화면 높이에 여유가 생기면(--wm-mark-inset) 표식을 바깥 가장자리에서 2px까지 띄운다. */
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell{align-items:center;justify-content:center;gap:calc(var(--wm-cell-font)*.25) 1px;min-width:0;min-height:0;padding:0;border:0;border-radius:2px;background:linear-gradient(160deg,#414554,#2b2e38);box-shadow:inset 0 0 0 1px #191b21;overflow:hidden;filter:none;animation:none;transform:none;touch-action:manipulation}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell[data-side="top"]{padding:var(--wm-mark-inset) 0 var(--wm-edge)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell[data-side="bottom"]{padding:var(--wm-edge) 0 var(--wm-mark-inset)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell[data-side="left"]{flex-direction:row;padding-right:var(--wm-edge)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell[data-side="right"]{flex-direction:row;padding-left:var(--wm-edge)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell>b{display:block;flex:0 1 auto;width:100%;min-width:0;margin:0;color:#ecf6f6;font-size:var(--wm-cell-font);font-weight:800;line-height:1.05;white-space:normal;word-break:keep-all;overflow-wrap:normal;text-shadow:0 1px 2px #0c0c0f;z-index:4}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell:is([data-side="left"],[data-side="right"])>b{flex:1 1 0;width:auto}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell>small,html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-owner,html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-building{display:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell-band{inset:0 0 auto;width:auto;height:3px;opacity:.95}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell:is([data-side="top"],[data-side="tl"],[data-side="tr"]) .worldmarble-cell-band{inset:auto 0 0}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell[data-side="left"] .worldmarble-cell-band{inset:0 0 0 auto;width:3px;height:auto}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell[data-side="right"] .worldmarble-cell-band{inset:0 auto 0 0;width:3px;height:auto}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell.chance{background:linear-gradient(145deg,#634786,#393c4a)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell.tax{background:linear-gradient(145deg,#73515e,#443146)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell.bonus{background:linear-gradient(145deg,#426d62,#214e49)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell:is(.start,.island,.travel,.festival){background:linear-gradient(145deg,#356a77,#383b48)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell.owned{background:linear-gradient(145deg,color-mix(in srgb,var(--owner-color) 46%,#2b2d37),color-mix(in srgb,var(--owner-color) 30%,#1a1c22));box-shadow:inset 0 0 0 2px var(--owner-color)}
/* 표식: 건물 단계는 한 글자(🏠🏢🏨🏰), 관광지는 ★, 페스티벌 배율은 ×n. 위 · 아래 칸은 이름 바깥쪽에 한 줄로,
   왼쪽 · 오른쪽 칸은 이름 바깥쪽에 세로로 둔다. 이름 위에 겹쳐 그리지 않는다. 그림 글자는 글자 상자보다 크게 그려져
   칸 가장자리에서 잘리므로 조금 줄여 그린다(글자 크기는 그대로). */
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-buildings{position:static;z-index:4;flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:1px;max-height:none;transform:none;filter:none;pointer-events:none;color:#ffe9a8;font-size:var(--wm-cell-font);font-weight:900;line-height:1;letter-spacing:0;text-shadow:0 1px 2px #0c0c0f}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-buildings:empty{display:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell:is([data-side="top"],[data-side="left"]) .worldmarble-buildings{order:-1}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell:is([data-side="left"],[data-side="right"]) .worldmarble-buildings{flex-direction:column;width:calc(var(--wm-cell-font)*1.4)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-buildings:not([data-mark=""])::before{content:attr(data-mark);transform:scale(.86)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-tourist-star{font-size:inherit;line-height:1;text-shadow:0 1px 2px #0c0c0f}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-festival-badge{position:static;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#ffc4fb;font-size:inherit;font-style:normal;font-weight:900;line-height:1}
/* 고를 수 있는 칸: 필터 · 그림자 애니메이션 없이 테두리로만 표시한다(40칸이 동시에 깜빡이면 매 프레임 판 전체를 다시 그린다). */
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell.selectable{z-index:6;overflow:hidden;outline:2px solid #7cf5ff;outline-offset:-2px;box-shadow:inset 0 0 0 1px #191b21,inset 0 0 12px #4ce8ff70;cursor:pointer}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell.festival-selectable{outline-color:#ff8cf0;box-shadow:inset 0 0 0 1px #191b21,inset 0 0 14px #ff4be380;opacity:1!important;filter:none!important}
/* PC의 "🎆 개최" 알약은 작은 칸에서 도시 이름을 가린다. 모바일은 테두리와 나머지 칸을 어둡게 하는 것으로 표시하고, 확인 버튼이 도시 이름을 말해 준다. */
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell.festival-selectable::after{content:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board.festival-picking .worldmarble-cell:not(.festival-selectable){opacity:.55;filter:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell.picked{z-index:7;outline:3px solid #fff;outline-offset:-3px;background:linear-gradient(145deg,#2aa7b8,#176a86);box-shadow:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-cell:is(.victory-highlight,.win-threat-target){z-index:8;overflow:hidden;outline:3px solid #ffdc62;outline-offset:-3px;filter:none;transform:none;animation:none}
/* 말: 칸의 안쪽 가장자리에 걸쳐 세운다. 같은 칸의 말은 가장자리를 따라 나란히 둔다. */
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-token{--wm-step:.8;--wm-scale:1;--wm-base:calc(100% - var(--wm-token-overlap) - var(--wm-token)*(1 - var(--wm-scale))/2);--wm-reach:calc(var(--wm-base) + var(--wm-zig,0px));--wm-shift:calc(var(--token-slot,0)*var(--wm-token)*var(--wm-step));position:relative;z-index:18;width:var(--wm-token);height:var(--wm-token);min-width:0;box-sizing:border-box;border:2px solid #f0faff;font-size:calc(var(--wm-token)*.5);box-shadow:0 2px 5px #000a;isolation:auto;animation:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-token[data-side="bottom"]{align-self:start;justify-self:center;transform:translate(var(--wm-shift),calc(var(--wm-reach)*-1)) scale(var(--wm-scale))}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-token[data-side="top"]{align-self:end;justify-self:center;transform:translate(var(--wm-shift),var(--wm-reach)) scale(var(--wm-scale))}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-token[data-side="left"]{align-self:center;justify-self:end;transform:translate(var(--wm-reach),var(--wm-shift)) scale(var(--wm-scale))}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-token[data-side="right"]{align-self:center;justify-self:start;transform:translate(calc(var(--wm-reach)*-1),var(--wm-shift)) scale(var(--wm-scale))}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-token[data-side="br"]{align-self:start;justify-self:start;transform:translate(calc(var(--wm-base)*-1 + var(--wm-shift)),calc(var(--wm-reach)*-1)) scale(var(--wm-scale))}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-token[data-side="bl"]{align-self:start;justify-self:end;transform:translate(calc(var(--wm-base) + var(--wm-shift)),calc(var(--wm-reach)*-1)) scale(var(--wm-scale))}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-token[data-side="tl"]{align-self:end;justify-self:end;transform:translate(calc(var(--wm-base) + var(--wm-shift)),var(--wm-reach)) scale(var(--wm-scale))}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-token[data-side="tr"]{align-self:end;justify-self:start;transform:translate(calc(var(--wm-base)*-1 + var(--wm-shift)),var(--wm-reach)) scale(var(--wm-scale))}
/* 한 칸에 말이 3~4개면 조금 작게 그려 두 줄로 엇갈려 세운다. 한 줄로 길게 늘어서면 옆 칸의 말처럼 보였다. 번호는 서로 가리지 않는다. */
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-token[data-crowd]{--wm-step:.42;--wm-scale:.8}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-token[data-zig]{--wm-zig:calc(var(--wm-token)*.5)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-token.turn{z-index:20;box-shadow:0 0 0 2px #ffe55c,0 2px 6px #000a}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-token.turn::before{display:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-token.turn::after{inset:-5px;border-width:2px;box-shadow:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-moving-token{width:calc(var(--wm-token) + 4px);height:calc(var(--wm-token) + 4px);border-width:2px;font-size:calc(var(--wm-token)*.55);box-shadow:0 0 0 3px #ffffff30,0 0 12px var(--token-color,#35d0f0)}
/* 판 가운데 */
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-center{position:relative;inset:auto;z-index:1;grid-row:2/11;grid-column:2/11;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:var(--gs-gap);min-width:0;min-height:0;margin:var(--wm-ring);padding:0;overflow:hidden;text-align:left;pointer-events:auto}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-center>small,html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-center-status,html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-turn-info{display:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-mobile-hud{order:1;flex:0 0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gs-gap);min-width:0}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-mobile-player{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:1px 6px;min-width:0;min-height:max(40px,calc(var(--wm-fs)*3.6));margin:0;padding:3px 8px 3px 6px;border:1px solid #82bfc028;border-radius:var(--gs-radius);background:#16171ccc;box-shadow:none;color:#d9e8ee;font:inherit;text-align:left;touch-action:manipulation}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-mobile-player.turn{border-color:var(--player-color);background:#282a33;box-shadow:inset 3px 0 var(--player-color)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-mobile-player.bankrupt{opacity:.45}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-mobile-player>i{grid-row:1/3;display:grid;place-items:center;width:calc(var(--wm-fs)*2);height:calc(var(--wm-fs)*2);border-radius:7px;background:var(--player-color);color:#fff;font-size:calc(var(--wm-fs)*1.1);font-style:normal;font-weight:900}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-mobile-player>b{grid-column:2;grid-row:1;min-width:0;overflow:hidden;color:#b9d2da;font-size:var(--wm-fs);font-weight:700;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-mobile-player>small{grid-column:3;grid-row:1;color:#9fc2cc;font-size:var(--wm-fs);line-height:1.2;white-space:nowrap}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-mobile-player>strong{grid-column:2/4;grid-row:2;min-width:0;overflow:hidden;color:#f2fbff;font-size:calc(var(--wm-fs)*1.3);font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-mobile-player:is(.money-in,.money-out){animation:none;border-color:#55eea4}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-mobile-player.money-out{border-color:#ff5a70}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-mobile-table{order:2;flex:0 0 auto;display:flex;align-items:center;gap:var(--gs-pad);min-width:0;padding:0 2px}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-dice{flex:0 0 auto;display:flex;gap:6px;margin:0;padding:1px 0 5px;pointer-events:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-dice i{--wm-pip:calc(var(--wm-die)*.22);position:relative;width:var(--wm-die);height:var(--wm-die);border:1px solid #fff9;border-radius:calc(var(--wm-die)*.24);background:linear-gradient(135deg,#fff,#c9e1e3);color:#2e303b;font-size:calc(var(--wm-die)*.55);box-shadow:inset -2px -2px 0 #8baeb642,0 4px 0 #557c8a,0 8px 12px #0004}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-dice i[data-face]:not([data-face="0"]){font-size:0}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-dice i[data-face]:not([data-face="0"])::after{content:"";position:absolute;top:calc(var(--wm-die)*.2);left:calc(var(--wm-die)*.2);width:calc(var(--wm-die)*.16);height:calc(var(--wm-die)*.16);border-radius:50%;background:#2e303b}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-dice i[data-face="1"]::after{transform:translate(var(--wm-pip),var(--wm-pip))}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-dice i[data-face="2"]::after{box-shadow:calc(var(--wm-pip)*2) calc(var(--wm-pip)*2) #2e303b}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-dice i[data-face="3"]::after{box-shadow:var(--wm-pip) var(--wm-pip) #2e303b,calc(var(--wm-pip)*2) calc(var(--wm-pip)*2) #2e303b}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-dice i[data-face="4"]::after{box-shadow:calc(var(--wm-pip)*2) 0 #2e303b,0 calc(var(--wm-pip)*2) #2e303b,calc(var(--wm-pip)*2) calc(var(--wm-pip)*2) #2e303b}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-dice i[data-face="5"]::after{box-shadow:calc(var(--wm-pip)*2) 0 #2e303b,var(--wm-pip) var(--wm-pip) #2e303b,0 calc(var(--wm-pip)*2) #2e303b,calc(var(--wm-pip)*2) calc(var(--wm-pip)*2) #2e303b}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-dice i[data-face="6"]::after{box-shadow:calc(var(--wm-pip)*2) 0 #2e303b,0 var(--wm-pip) #2e303b,calc(var(--wm-pip)*2) var(--wm-pip) #2e303b,0 calc(var(--wm-pip)*2) #2e303b,calc(var(--wm-pip)*2) calc(var(--wm-pip)*2) #2e303b}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-mobile-status{flex:1 1 0;display:grid;gap:2px;min-width:0}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-mobile-status b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:#e7f4f6;font-size:calc(var(--wm-fs)*1.1);font-weight:700;line-height:1.2}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board .worldmarble-mobile-status small{overflow:hidden;color:#8fb2bf;font-size:var(--wm-fs);line-height:1.2;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-special-guide{order:3;flex:0 1 auto;display:flex;align-items:center;gap:8px;width:auto;min-width:0;min-height:0;margin:0;padding:6px 8px;border:1px solid #67dffb3a;border-radius:var(--gs-radius);background:#141519cc;box-shadow:inset 3px 0 #4adcf4;overflow:hidden;color:#dff9ff;text-align:left;animation:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-special-guide[hidden]{display:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-special-guide>i{flex:0 0 26px;display:grid;place-items:center;width:26px;height:26px;font-size:17px;font-style:normal}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-special-guide>div{display:grid;gap:2px;min-width:0}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-special-guide b{overflow:hidden;color:#fff;font-size:var(--wm-fs);line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-special-guide span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:#b9dbe4;font-size:var(--wm-fs);line-height:1.25}
/* 오른쪽 조작 열: 엄지가 닿는 자리. 맨 위 오른쪽은 메뉴 버튼 자리다. */
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-mobile-rail{grid-area:rail;display:flex;flex-direction:column;gap:var(--gs-gap);width:auto;min-width:0;max-width:none;min-height:0}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-mobile-clock{flex:0 0 auto;display:grid;align-content:center;justify-items:center;gap:1px;height:var(--gs-tap);box-sizing:border-box;margin:calc(var(--gs-gap)/-2) calc(var(--gs-tap) + var(--gs-gap)) 0 0;padding:0 6px;border:1px solid var(--gs-line);border-radius:var(--gs-radius);background:var(--gs-surface-2);color:var(--gs-text);overflow:hidden}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-mobile-clock small{max-width:100%;overflow:hidden;color:var(--gs-text-dim);font-size:var(--gs-font-xs);font-weight:700;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-mobile-clock b{font-size:var(--gs-font-md);line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-mobile-clock.mine{border-color:#96ded2;background:#16453f}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-mobile-clock.mine small{color:#a5f0d6}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-mobile-clock.urgent b{color:#ff9d9d}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-mobile-slot{flex:1 1 0;display:flex;flex-direction:column;justify-content:center;gap:var(--gs-gap);min-width:0;min-height:0;overflow:hidden}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-mobile-slot #worldmarble-actions{position:static;display:flex;flex-direction:column;justify-content:safe center;gap:var(--gs-gap);width:100%;height:auto;min-height:0;max-height:100%;box-sizing:border-box;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-actions::after{display:none}
/* 안내 문구는 판 가운데에 있으므로 이 열에는 버튼만 둔다. */
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-mobile-slot :is(.worldmarble-action-title,.worldmarble-win-opportunity,.worldmarble-equipped-card,.worldmarble-card-use-note,.worldmarble-gold-redraw-prompt,.worldmarble-map-pick span){display:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-action-buttons{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gs-gap);width:100%!important;margin:0!important}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-action-buttons button{width:auto;min-width:0;height:auto;min-height:var(--wm-btn);box-sizing:border-box;margin:0;padding:4px 8px;border:1px solid #56738185;border-radius:var(--gs-radius);background:#31343f;color:#e6f1f5;box-shadow:none;font-size:calc(var(--wm-fs)*1.1);font-weight:800;line-height:1.25;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;touch-action:manipulation}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-action-buttons :is(.primary,.worldmarble-roll-main,.worldmarble-landmark){border-color:#96ded2!important;background:linear-gradient(135deg,#a5f0d6,#5fcac4)!important;color:#103b3f!important;box-shadow:0 3px 0 #1a716f!important}
/* PC의 마우스 올림 효과(위로 3px 뜨고 커짐)는 터치에서 누른 뒤에도 남아 버튼이 자리에서 밀려 보인다. 누르는 동안만 밝게 한다. */
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-action-buttons button:not(:disabled):hover{transform:none;filter:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-action-buttons button:not(:disabled):active{filter:brightness(1.12)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-action-buttons .danger{border-color:#b9686d;background:#572c39;color:#ffd8da}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-action-buttons button:disabled{opacity:.4;box-shadow:none!important}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-roll-console{grid-template-columns:repeat(2,minmax(0,1fr))}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-roll-console .worldmarble-roll-main{grid-column:1/-1;grid-row:1;min-height:calc(var(--wm-btn)*1.4);font-size:calc(var(--wm-fs)*1.3);white-space:pre-line}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-roll-console>small{grid-column:1/-1;color:#8aacba;font-size:var(--gs-font-xs);line-height:1.25;text-align:center}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-action-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:0;padding:0;color:#b8d0d9;font-size:var(--gs-font-sm);text-align:center}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-action-empty>span{color:#72d1c9;font-size:20px;line-height:1}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-action-empty>b{max-width:100%;overflow:hidden;font-size:var(--gs-font-sm);text-overflow:ellipsis}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-action-empty>small{font-size:var(--gs-font-xs);line-height:1.3}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-rail-me{display:grid;justify-items:center;gap:2px;padding:8px 6px;border:1px solid var(--gs-line);border-radius:var(--gs-radius);background:#191b21cb;color:var(--gs-text)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-rail-me small,html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-rail-me span{color:var(--gs-text-dim);font-size:var(--gs-font-xs);line-height:1.2;white-space:nowrap}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-rail-me strong{font-size:var(--gs-font-lg);line-height:1.1;font-variant-numeric:tabular-nums}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-mobile-slot .worldmarble-map-pick{flex:0 0 auto;display:flex;align-items:center;gap:6px;min-height:0;padding:6px 8px;border-radius:var(--gs-radius)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-mobile-slot .worldmarble-map-pick i{font-size:20px;font-style:normal}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-mobile-slot .worldmarble-map-pick b{font-size:var(--gs-font-sm);line-height:1.25}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-mobile-debt{display:grid;gap:6px;padding:8px;border:1px solid #b9686d;border-radius:var(--gs-radius);background:#3a1f2a;color:#eed6c7;text-align:center}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-mobile-debt b{font-size:var(--gs-font-sm);line-height:1.25}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-mobile-debt span{color:#ffb7a1;font-size:var(--gs-font-sm)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-mobile-debt button{min-height:var(--gs-tap);padding:4px 8px;border:1px solid #b7f3e6;border-radius:var(--gs-radius);background:#a5e4d4;color:#163b40;font-size:var(--gs-font-sm);font-weight:800;line-height:1.25}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-mobile-footer{flex:0 0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gs-gap)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-mobile-footer button{min-width:0;min-height:var(--gs-tap);margin:0;padding:0 2px;border:1px solid #739aab48;border-radius:var(--gs-radius);background:#262932;color:#cfe4ea;box-shadow:none;font-size:var(--gs-font-xs);font-weight:800;line-height:1.2;word-break:keep-all;touch-action:manipulation}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-mobile-footer button b{margin-left:2px;color:#ffd67d}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-mobile-footer .card-received{border-color:#ffe36a;box-shadow:0 0 14px #ffd43f}
/* 관전자 · 파산한 참가자: 조작이 없으므로 오른쪽 열을 메뉴 버튼 폭으로 줄이고 판을 넓힌다. */
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area[data-role="watch"] #worldmarble-mobile-clock{height:auto;min-height:var(--gs-tap);margin:calc(var(--gs-tap) + var(--gs-gap)/2) 0 0;padding:4px 1px}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area[data-role="watch"] .worldmarble-mobile-slot{visibility:hidden}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area[data-role="watch"] .worldmarble-mobile-footer{grid-template-columns:minmax(0,1fr)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area[data-role="watch"] [data-world-info="cards"]{display:none}
/* 정보창(자산 · 순위 · 카드함 · 매각): 오른쪽에서 여는 시트. 열려 있는 동안 메뉴 버튼은 감춘다(시트의 닫기 버튼이 그 자리에 온다). */
html.mobile-layout body[data-gs-game="worldmarble"].game-active.worldmarble-mobile-info-open #mobile-game-chat-toggle{visibility:hidden!important;pointer-events:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-mobile-info-backdrop{position:fixed;z-index:160;inset:0;display:block;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:#08090bb8;box-shadow:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-mobile-info-panel{position:fixed;z-index:161;top:calc(var(--gs-safe-t) + var(--gs-gap));right:calc(var(--gs-safe-r) + var(--gs-gap));bottom:calc(var(--gs-safe-b) + var(--gs-gap));left:auto;display:flex;flex-direction:column;width:min(calc(100vw - var(--gs-safe-l) - var(--gs-safe-r) - var(--gs-gap)*2),460px);height:auto;min-height:0;max-height:none;box-sizing:border-box;padding:0;overflow:hidden;border:1px solid #4a8394;border-radius:calc(var(--gs-radius) + 4px);background:linear-gradient(155deg,#20222a,#111215 72%) #111215;box-shadow:0 24px 70px #000e}
html.mobile-layout body[data-gs-game="worldmarble"].game-active :is(.worldmarble-mobile-info-backdrop,.worldmarble-mobile-info-panel)[hidden]{display:none!important}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-mobile-info-panel>header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--gs-gap);min-height:var(--gs-tap);padding:var(--gs-gap) var(--gs-gap) var(--gs-gap) var(--gs-pad);border-bottom:1px solid #ffffff12}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-mobile-info-panel>header>div{display:grid;gap:1px;min-width:0}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-mobile-info-panel>header small{color:#61e9ef;font-size:var(--gs-font-xs);font-weight:800;letter-spacing:0}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-mobile-info-panel>header b{color:#eefcff;font-size:var(--gs-font-md)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-mobile-info-panel>header button{flex:0 0 auto;display:grid;place-items:center;width:var(--gs-tap);height:var(--gs-tap);min-height:0;padding:0;border-radius:var(--gs-radius);font-size:22px;line-height:1}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-mobile-info-content{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--gs-pad);min-height:0;padding:var(--gs-pad);overflow:hidden auto;overscroll-behavior:contain;scroll-padding:var(--gs-pad)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-mobile-info-content>*{flex:none;width:100%;height:auto;min-height:0;max-height:none;box-sizing:border-box;margin:0;overflow:visible}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-mobile-info-content :is(button,.worldmarble-inventory-card){min-height:var(--gs-tap);touch-action:manipulation}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-mobile-info-content :is(small,span,b,p,em,strong,button){font-size:max(var(--gs-font-xs),1em);letter-spacing:0}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-mobile-info-content #worldmarble-actions{order:-1;padding:var(--gs-pad)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-mobile-info-content .worldmarble-my-assets-list{display:grid;grid-template-columns:minmax(0,1fr);max-height:none;overflow:visible}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-mobile-info-content :is(.worldmarble-liquidate-list,.worldmarble-choice-list){display:flex;flex-direction:column;max-height:none;overflow:visible}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-mobile-info-content .worldmarble-players{display:grid}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-mobile-info-content .worldmarble-mobile-spectators{order:5;padding:10px 12px;border:1px solid #8dc5ca22;border-radius:var(--gs-radius);background:#1b1d23}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-mobile-info-content .worldmarble-mobile-spectators b{color:#c2e0e6;font-size:var(--gs-font-sm)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-mobile-info-content .worldmarble-mobile-spectators p{margin:6px 0 0;color:#91b2c0;font-size:var(--gs-font-xs)}
/* 연출: 화면 높이에 맞춰 줄인다. 황금 카드는 320px 높이에서도 전부 보인다. 화면 전체 흐림 효과는 쓰지 않는다. */
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-gold-card-stage{background:radial-gradient(circle,#ffd84c30,#08090bb0 62%);-webkit-backdrop-filter:none;backdrop-filter:none;animation-name:worldCinematicIn}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-gold-card{width:min(240px,calc(var(--gs-vh)*.56))}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-gold-card-stage.opponent-card .worldmarble-gold-card{width:min(150px,calc(var(--gs-vh)*.34))}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-gold-card-stage.opponent-card .worldmarble-gold-card section strong{font-size:var(--gs-font-lg)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-gold-card-stage.opponent-card .worldmarble-gold-card section{padding:8px 6px}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-gold-card-stage.opponent-card .worldmarble-gold-card section small{display:none}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-gold-card-stage.opponent-card .worldmarble-gold-card section em{max-width:none;margin-top:6px;padding:4px 6px;border-radius:10px;word-break:keep-all}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-gold-card-stage.opponent-card>span{width:min(260px,calc(var(--gs-vh)*.6));height:min(260px,calc(var(--gs-vh)*.6))}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-gold-card section{padding:calc(var(--gs-vh)*.035) 12px;border-width:3px;border-radius:16px}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-gold-card section :is(small,p,em){font-size:var(--gs-font-xs);line-height:1.3;letter-spacing:0}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-gold-card section strong{font-size:clamp(17px,calc(var(--gs-vh)*.06),28px);line-height:1.15}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-gold-card section i{font-size:clamp(22px,calc(var(--gs-vh)*.08),44px)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-gold-card-stage>span{width:min(440px,calc(var(--gs-vh)*.9));height:min(440px,calc(var(--gs-vh)*.9))}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-cinematic strong{font-size:clamp(30px,13vmin,68px)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-cinematic :is(small,b){max-width:92vw;font-size:var(--gs-font-sm);letter-spacing:0}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-burst>b{font-size:var(--gs-font-xs)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-balance-change{top:50%;min-width:0;width:max-content;max-width:calc(100vw - var(--wm-rail,150px) - 24px);padding:8px 14px}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-balance-change :is(small,span,em){font-size:var(--gs-font-xs);letter-spacing:0}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-balance-change strong{font-size:var(--gs-font-lg)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active :is(.worldmarble-victory-reveal,.worldmarble-win-threat-reveal){padding:var(--gs-pad)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active :is(.worldmarble-victory-content,.worldmarble-win-threat-content){max-height:100%;box-sizing:border-box;overflow:hidden}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-win-threat-content{padding:14px 16px}
html.mobile-layout body[data-gs-game="worldmarble"].game-active :is(.worldmarble-victory-content,.worldmarble-win-threat-content)>strong{font-size:clamp(24px,10vmin,40px);line-height:1.1}
html.mobile-layout body[data-gs-game="worldmarble"].game-active :is(.worldmarble-victory-content,.worldmarble-win-threat-content) :is(small,span,p){font-size:var(--gs-font-xs);letter-spacing:0}
html.mobile-layout body[data-gs-game="worldmarble"].game-active :is(.worldmarble-victory-content,.worldmarble-win-threat-content)>b{font-size:var(--gs-font-md)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-victory-properties{margin-top:10px;gap:6px}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-victory-properties article{width:auto;min-width:104px;max-width:150px;min-height:0;padding:6px 8px;grid-template-columns:auto minmax(0,1fr);gap:6px}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-victory-properties article>i{font-size:20px;line-height:1}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-victory-properties article b{font-size:var(--gs-font-xs)}
html.mobile-layout body[data-gs-game="worldmarble"].game-active .worldmarble-victory-properties article small{margin-top:2px;font-size:var(--gs-font-xs);white-space:nowrap}
/* 결과 창의 종료 사유 띠: 낮은 가로 화면에서 "대기방으로 이동" 버튼이 밀려나지 않게 한 줄로 줄인다. */
html.mobile-layout body[data-gs-game="worldmarble"] #result-dialog .worldmarble-result-reason{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 10px;margin:0 0 var(--gs-gap);padding:6px 10px;border-radius:var(--gs-radius)}
html.mobile-layout body[data-gs-game="worldmarble"] #result-dialog .worldmarble-result-reason small{font-size:var(--gs-font-xs);letter-spacing:0}
html.mobile-layout body[data-gs-game="worldmarble"] #result-dialog .worldmarble-result-reason strong{font-size:var(--gs-font-lg);line-height:1.2}
html.mobile-layout body[data-gs-game="worldmarble"] #result-dialog .worldmarble-result-reason span{font-size:var(--gs-font-sm)}
/* 대기방의 게임 이름 줄에 적는 "가로 화면 전용" 안내는 읽을 수 있는 크기로 보여 준다(기본 8px). */
html.mobile-layout body[data-gs-game="worldmarble"]:not(.game-active) #room #game-label{font-size:var(--gs-font-xs);letter-spacing:.02em}
/* 세로로 든 경우(회전 안내 아래): 판 위, 조작 열 아래로 쌓아 내용이 넘치지 않게만 한다. */
@media (orientation:portrait){
  html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"board" "rail"}
  html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-board{grid-template-columns:minmax(44px,1.5fr) repeat(9,minmax(0,1fr)) minmax(44px,1.5fr)}
  html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-mobile-clock{margin:0}
  html.mobile-layout body[data-gs-game="worldmarble"].game-active #worldmarble-play-area .worldmarble-mobile-slot{flex:0 0 auto}
}
/* ── END worldmarble ───────────────────────────────── */



/* ── BEGIN territory ─────────────────────────────── */
/* 상단 줄(방 제목 · HUD 막대)을 없애고 화면 전체를 경기장과 자체 HUD에 쓴다. 조작은 경기 화면 어디든 누른 자리에서 시작하는 조이스틱이다(.territory-stage 전체가 터치 표면).
   칸 크기는 territory.js가 .territory-board-box의 실제 크기에서 계산하고, 내 위치는 항상 경기장 가운데에 둔다.
   세로: [남은 시간][내 땅 % · 목표 막대][순위] …… [≡] / 참가자 순위 줄 / 경기장(왼쪽 아래 미니맵)
   가로: 경기장(왼쪽 아래 미니맵) | 오른쪽 열(남은 시간 · ≡ 자리 / 내 땅 / 순위 / 참가자 순위 목록) */
html.mobile-layout body[data-gs-game="territory"].game-active #game>.game-head,html.mobile-layout body[data-gs-game="territory"].game-active #spectator-help,html.mobile-layout body[data-gs-game="territory"].game-active #territory-play-area :is(.territory-hud,.territory-footer){display:none}
html.mobile-layout body[data-gs-game="territory"].game-active #territory-play-area{--territory-side:clamp(132px,calc(var(--gs-stage-w,640px)*.2),180px);--territory-dock-h:calc(var(--gs-tap) + 12px);position:relative;display:block;flex:1 1 auto;width:100%;min-width:0;min-height:0;margin:0;padding:0;overflow:hidden;background:#0a0b0d}
html.mobile-layout body[data-gs-game="territory"].game-active #territory-play-area .territory-stage{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"hud" "board";width:auto;height:auto;min-height:0;border:0;border-radius:0;background:#0a0b0d;box-shadow:none;touch-action:none;overscroll-behavior:none}
html.mobile-layout body[data-gs-game="territory"].game-active #territory-play-area .territory-stage:before{display:none}
html.mobile-layout body[data-gs-game="territory"].game-active #territory-play-area .territory-board-box{grid-area:board;position:relative;inset:auto;min-width:0;min-height:0}
/* 자체 HUD: 남은 시간 · 내 땅(목표까지 막대) · 순위, 아래 줄은 참가자 순위. 누르는 요소가 없어 터치는 경기장 조이스틱으로 간다. */
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud{grid-area:hud;z-index:5;display:flex;flex-direction:column;gap:var(--gs-gap);min-width:0;min-height:0;padding:0 var(--gs-pad) var(--gs-gap);background:var(--gs-surface);box-shadow:0 1px 0 var(--gs-line);color:var(--gs-text);pointer-events:none}
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-status{display:flex;align-items:center;gap:var(--gs-pad);min-width:0;height:var(--gs-hud-h);padding-right:calc(var(--gs-menu-reserve) - var(--gs-pad))}
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-timer{flex:0 0 auto;padding:7px 10px;border-radius:999px;background:#282a33;color:#bff6ff;font:800 var(--gs-font-md)/1 ui-monospace,Consolas,"Courier New",monospace;font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-timer.urgent{background:#b3243f;color:#fff}
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-me{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"label pct pct" "goal goal target";align-items:center;gap:3px 6px;flex:1 1 auto;min-width:0}
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-me small{grid-area:label;align-self:baseline;overflow:hidden;color:var(--gs-text-dim);font-size:var(--gs-font-xs);font-weight:700;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-me b{grid-area:pct;align-self:baseline;font-size:var(--gs-font-lg);font-weight:900;font-variant-numeric:tabular-nums;line-height:1}
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-me i{grid-area:target;color:#75e7d7;font-size:var(--gs-font-xs);font-style:normal;font-weight:800;line-height:1;white-space:nowrap}
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-goal{grid-area:goal;display:block;height:4px;overflow:hidden;border-radius:2px;background:#ffffff1f}
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-goal em{display:block;height:100%;border-radius:inherit}
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-rank{flex:0 0 auto;color:var(--gs-text-dim);font-size:var(--gs-font-xs);font-weight:800;white-space:nowrap}
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-rank b{color:#fff;font-size:var(--gs-font-lg);font-weight:900}
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-rank small{font-size:var(--gs-font-xs)}
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-ranks{display:grid;grid-template-columns:repeat(var(--territory-rank-cols,2),minmax(0,1fr));gap:3px var(--gs-gap);min-width:0;margin:0;padding:0;list-style:none}
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-ranks li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px;min-width:0;height:24px;padding:0 6px 0 5px;border-left:3px solid var(--territory-color);border-radius:6px;background:var(--gs-surface-2);color:var(--gs-text-dim);font-size:var(--gs-font-xs);line-height:1}
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-ranks li.me{background:#2f323e;color:#fff;box-shadow:inset 0 0 0 1px #8ff3ff70}
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-ranks li.down{opacity:.55}
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-ranks i{color:#8fa0bb;font-style:normal;font-weight:800}
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-ranks span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-ranks b{color:#fff;font-variant-numeric:tabular-nums}
/* 경기장 위에 겹치는 것: 미니맵(왼쪽 아래), 부활 안내(가운데 위), 선 차단 알림(위 가운데). 모두 경기장 칸(grid-area:board) 기준이다. */
html.mobile-layout body[data-gs-game="territory"].game-active #territory-play-area .territory-minimap{grid-area:board;top:auto;right:auto;bottom:var(--gs-gap);left:var(--gs-gap);width:auto;padding:4px;border-radius:var(--gs-radius);box-shadow:0 6px 18px #0009;-webkit-backdrop-filter:none;backdrop-filter:none}
html.mobile-layout body[data-gs-game="territory"].game-active #territory-play-area .territory-minimap header{display:none}
html.mobile-layout body[data-gs-game="territory"].game-active #territory-play-area .territory-minimap canvas{border-radius:calc(var(--gs-radius) - 4px)}
html.mobile-layout body[data-gs-game="territory"].game-active #territory-respawn{grid-area:board;top:34%;left:50%;padding:12px 20px;transform:translate(-50%,-50%);-webkit-backdrop-filter:none;backdrop-filter:none}
html.mobile-layout body[data-gs-game="territory"].game-active #territory-respawn b{font-size:var(--gs-font-md)}
html.mobile-layout body[data-gs-game="territory"].game-active #territory-respawn span{font-size:var(--gs-font-sm);font-variant-numeric:tabular-nums}
html.mobile-layout body[data-gs-game="territory"].game-active #territory-event{grid-area:board;top:var(--gs-gap);max-width:calc(100% - var(--gs-gap)*2);overflow:hidden;font-size:var(--gs-font-xs);text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="territory"].game-active #territory-event.winner{top:50%;font-size:var(--gs-font-lg);white-space:normal}
/* 관전: 아래쪽에 관전 대상 선택 줄, 미니맵은 그 위. 미니맵·경기장을 누르면 그 지역이나 참가자를 따라간다. */
html.mobile-layout body[data-gs-game="territory"].game-active #territory-play-area.territory-spectating #territory-watch-controls{position:absolute;z-index:6;right:var(--gs-gap);bottom:var(--gs-gap);left:var(--gs-gap);display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:0 var(--gs-pad);height:var(--territory-dock-h);box-sizing:border-box;padding:4px var(--gs-pad);border-radius:var(--gs-radius);background:#16181df2}
html.mobile-layout body[data-gs-game="territory"].game-active #territory-play-area.territory-spectating #territory-watch-controls label{grid-column:1;grid-row:1;font-size:var(--gs-font-sm)}
html.mobile-layout body[data-gs-game="territory"].game-active #territory-play-area.territory-spectating .territory-watch-hint{grid-column:1;grid-row:2;margin:0;font-size:var(--gs-font-xs);white-space:nowrap}
html.mobile-layout body[data-gs-game="territory"].game-active #territory-play-area.territory-spectating #territory-watch-target{grid-column:2;grid-row:1/3;width:100%;min-height:var(--gs-tap);font-size:16px}
html.mobile-layout body[data-gs-game="territory"].game-active #territory-play-area.territory-spectating .territory-minimap{bottom:calc(var(--territory-dock-h) + var(--gs-gap)*2)}
@media (orientation:landscape){
  html.mobile-layout body[data-gs-game="territory"].game-active #territory-play-area .territory-stage{grid-template-columns:minmax(0,1fr) var(--territory-side);grid-template-rows:minmax(0,1fr);grid-template-areas:"board hud"}
  html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud{padding:0 var(--gs-gap) var(--gs-gap);overflow:hidden;box-shadow:-1px 0 0 var(--gs-line)}
  html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-status{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--gs-menu-reserve) - var(--gs-gap));grid-template-rows:var(--gs-hud-h) auto auto;grid-template-areas:"timer ." "me me" "rank rank";align-items:center;gap:0 var(--gs-gap);height:auto;padding:0}
  html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-timer{grid-area:timer;min-width:0;padding:7px 6px;overflow:hidden;font-size:var(--gs-font-sm);text-overflow:ellipsis}
  html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-me{grid-area:me;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label label" "pct target" "goal goal";padding:6px 7px;border-radius:var(--gs-radius);background:var(--gs-surface-2)}
  html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-rank{grid-area:rank;padding:4px 2px 0}
  html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-ranks{display:flex;flex:0 1 auto;flex-direction:column;gap:2px;min-height:0}
  html.mobile-layout body[data-gs-game="territory"].game-active .territory-mhud-ranks li{flex:0 1 24px;height:auto;min-height:18px}
  html.mobile-layout body[data-gs-game="territory"].game-active #territory-play-area.territory-spectating #territory-watch-controls{right:calc(var(--territory-side) + var(--gs-gap))}
}
/* ── END territory ───────────────────────────────── */



/* ── BEGIN skybattle ─────────────────────────────── */
/* 전장(캔버스)이 화면 전체를 쓰는 실시간 게임. 공용 HUD 줄은 숨기고 오른쪽 위 메뉴 버튼 자리를 비운다.
   위 왼쪽: 참가자 칩(이름 · 피해율 / 목숨 · 처치), 그 아래 처치 기록(4초). 위 오른쪽: [≡] 아래 남은 시간, 그 아래 미니맵.
   가로: 왼쪽 아래 조이스틱, 오른쪽 아래 [칼 점프 / 폭탄 사격]. 세로: 전장 아래 조작 띠(--sky-band)에 같은 배치.
   버튼 크기·위치, 띠 높이, 미니맵 위치는 skybattle.js가 #sky-area의 실제 크기로 계산한다(기종별 분기 없음). */
html.mobile-layout body[data-gs-game="skybattle"].game-active #game>.game-head,html.mobile-layout body[data-gs-game="skybattle"].game-active #spectator-help{display:none!important}
html.mobile-layout body[data-gs-game="skybattle"] #sky-area{--sky-map-w:clamp(84px,24vmin,120px);--sky-chip-h:calc(var(--gs-tap) - 6px)}
html.mobile-layout body[data-gs-game="skybattle"] #sky-area::before{content:"";position:absolute;right:0;bottom:0;left:0;height:var(--sky-band,0px);border-top:1px solid #ffffff14;background:linear-gradient(#1d1e25,#101115);pointer-events:none}
html.mobile-layout body[data-gs-game="skybattle"] #sky-canvas{height:calc(100% - var(--sky-band,0px))}
html.mobile-layout body[data-gs-game="skybattle"] #sky-area .sky-hud,html.mobile-layout body[data-gs-game="skybattle"] #sky-watch-control{display:none!important}
html.mobile-layout body[data-gs-game="skybattle"] #sky-time{position:absolute;z-index:3;top:calc(var(--gs-safe-t) + var(--gs-hud-h));right:calc(var(--gs-safe-r) + clamp(4px,1.5vmin,8px));display:flex;align-items:center;justify-content:center;width:var(--sky-map-w);height:calc(var(--gs-tap)*.62);box-sizing:border-box;border:1px solid #ffffff1f;border-radius:var(--gs-radius);background:#111217d9;color:#e8f4ff;font:800 var(--gs-font-md)/1 ui-monospace,Consolas,"Courier New",monospace;letter-spacing:.04em;pointer-events:none}
html.mobile-layout body[data-gs-game="skybattle"] #sky-time:empty{display:none}
html.mobile-layout body[data-gs-game="skybattle"] #sky-time.critical{border-color:#ff8a8a66;background:#46242bd9;color:#ffc2bb}
html.mobile-layout body[data-gs-game="skybattle"] #sky-roster{position:absolute;z-index:3;top:calc(var(--gs-safe-t) + (var(--gs-hud-h) - var(--sky-chip-h))/2);right:calc(var(--gs-safe-r) + var(--sky-map-w) + var(--gs-gap)*2);left:calc(var(--gs-safe-l) + var(--gs-gap));display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;gap:4px;padding:0;overflow:visible;pointer-events:none}
html.mobile-layout body[data-gs-game="skybattle"] #sky-roster button{flex:0 1 var(--sky-chip-basis,25%);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr 1fr;align-items:center;column-gap:4px;row-gap:0;min-width:64px;max-width:132px;height:var(--sky-chip-h);min-height:0;margin:0;padding:2px 7px;box-sizing:border-box;border:1px solid #5a72934a;border-top:2px solid var(--sky-color);border-radius:var(--gs-radius);background:#141519e0;color:#eaf5ff;text-align:left;opacity:1;transform:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html.mobile-layout body[data-gs-game="skybattle"] #sky-roster button.me{box-shadow:inset 0 0 0 1px var(--sky-color)}
html.mobile-layout body[data-gs-game="skybattle"] #sky-roster small{grid-column:1;grid-row:1;min-width:0;overflow:hidden;font-size:var(--gs-font-xs);line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="skybattle"] #sky-roster .sky-bot-tag,html.mobile-layout body[data-gs-game="skybattle"] #sky-roster .sky-ammo{display:none!important}
html.mobile-layout body[data-gs-game="skybattle"] #sky-roster b{grid-column:2;grid-row:1;color:var(--sky-color);font-size:var(--gs-font-sm);line-height:1.15;font-variant-numeric:tabular-nums}
html.mobile-layout body[data-gs-game="skybattle"] #sky-roster span{grid-column:1/3;grid-row:2;min-width:0;overflow:hidden;color:#b8cde2;font:600 var(--gs-font-xs)/1.25 system-ui,sans-serif;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="skybattle"] #sky-feed{position:absolute;z-index:3;top:calc(var(--sky-hud-b,48px) + var(--gs-gap));left:calc(var(--gs-safe-l) + var(--gs-gap));display:grid;justify-items:start;gap:3px;max-width:min(60%,300px);margin:0;padding:0;list-style:none;pointer-events:none}
html.mobile-layout body[data-gs-game="skybattle"] #sky-feed:empty{display:none}
html.mobile-layout body[data-gs-game="skybattle"] #sky-feed li{max-width:100%;overflow:hidden;padding:3px 9px;border-radius:999px;background:#111217cc;color:#d9e8f6;font:700 var(--gs-font-xs)/1.35 system-ui,sans-serif;text-overflow:ellipsis;white-space:nowrap;animation:sky-feed-in .18s ease-out}
@keyframes sky-feed-in{from{opacity:0;transform:translateX(-6px)}}
html.mobile-layout body[data-gs-game="skybattle"] #sky-status{top:calc((100% - var(--sky-band,0px))*.42)}
html.mobile-layout body[data-gs-game="skybattle"] #sky-watch-nav{position:absolute;z-index:4;bottom:calc(var(--gs-safe-b) + clamp(8px,2.6vmin,14px));left:50%;display:flex;align-items:center;gap:var(--gs-gap);max-width:calc(100% - var(--gs-gap)*2);transform:translateX(-50%)}
html.mobile-layout body[data-gs-game="skybattle"] #sky-watch-nav button{flex:0 0 auto;width:var(--gs-tap);height:var(--gs-tap);min-width:0;min-height:0;margin:0;padding:0;border-radius:var(--gs-radius);font-size:var(--gs-font-md);touch-action:manipulation}
html.mobile-layout body[data-gs-game="skybattle"] #sky-watch-nav span{min-width:0;overflow:hidden;padding:0 14px;border-radius:999px;background:#111217e0;color:#e8f4ff;font-size:var(--gs-font-sm);font-weight:800;line-height:var(--gs-tap);text-overflow:ellipsis;white-space:nowrap}
/* 메뉴 시트가 열린 동안 시트 뒤의 조작 버튼은 숨긴다(입력은 셸이 이미 초기화한다). */
html.mobile-layout body[data-gs-game="skybattle"].mobile-game-chat-open #sky-controls,html.mobile-layout body[data-gs-game="skybattle"].mobile-game-chat-open #sky-watch-nav{visibility:hidden}
/* 조작 배치 편집 창은 오른쪽 위 메뉴 버튼과 겹치지 않게 가운데 폭을 줄인다. */
html.mobile-layout body[data-gs-game="skybattle"] #sky-editor{width:min(620px,calc(100% - var(--gs-menu-reserve)*2))}
html.mobile-layout body[data-gs-game="skybattle"] #sky-lobby-tools{flex-direction:column;align-items:stretch;gap:var(--gs-gap);padding:var(--gs-pad)}
html.mobile-layout body[data-gs-game="skybattle"] #sky-lobby-tools p{font-size:var(--gs-font-xs);line-height:1.5}
html.mobile-layout body[data-gs-game="skybattle"] #sky-lobby-tools button{min-height:var(--gs-tap);font-size:var(--gs-font-sm)}
@media (orientation:landscape){
  html.mobile-layout body[data-gs-game="skybattle"] #sky-lobby-tools{flex-direction:row;align-items:center}
}
/* ── END skybattle ───────────────────────────────── */



/* ── BEGIN rummikub ─────────────────────────────── */
/* 상단 줄(방 제목 · 남은 시간 · 차례 줄)을 없애고 화면 전체를 하나의 격자로 쓴다. 시계는 왼쪽 위, 메뉴 버튼은 오른쪽 위.
   세로: [차례 시계][참가자 …][≡] / 공용 판 / 안내 한 줄 / [정렬][내 타일 · 선택 배치 · 내 패로] / 받침대 / [↶ ↺][가져오기][턴 마치기]
   가로: 왼쪽 열(차례 시계 · 참가자 · 정렬 · 보조) | 공용 판 · 받침대 | 오른쪽 열(≡ 자리 · ↶ ↺ · 가져오기 · 턴 마치기) */
html.mobile-layout body[data-gs-game="rummikub"].game-active #game>.game-head{display:none}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area{--rk-tile-h:58px;--rk-row-gap:16px;--rk-side:calc(var(--gs-tap)*2 + var(--gs-gap));display:grid;gap:var(--gs-gap);padding:0 var(--gs-gap) var(--gs-gap);border:0;border-radius:0;box-shadow:none;grid-template-columns:var(--rk-side) minmax(0,1fr) minmax(0,1fr);grid-template-rows:var(--gs-hud-h) minmax(0,1fr) auto auto auto auto;grid-template-areas:"clock players players" "board board board" "help help help" "sorts tools tools" "rack rack rack" "history draw submit"}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area :is(.rk-header,.rk-arena,.rk-actions,.rk-rack-section){display:contents}
/* 차례 시계: 누구 차례인지(위)와 남은 초 · 전체 남은 시간(아래) */
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area #rk-turn{grid-area:clock;align-self:start;z-index:1;display:flex;justify-content:center;max-width:none;margin:calc(var(--gs-gap) + 3px) 6px 0;padding:0;border:0;border-radius:0;background:none;overflow:hidden;color:var(--gs-text-dim);font-size:var(--gs-font-xs);font-weight:700;line-height:1.2;text-align:center;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area #rk-turn::before{content:none}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-turn-name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area.rk-my-turn #rk-turn{color:#dcd0ff}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-clock{grid-area:clock;align-self:center;display:flex;align-items:baseline;justify-content:center;gap:1px;min-width:0;overflow:hidden;white-space:nowrap;height:calc(var(--gs-hud-h) - var(--gs-gap)*2);padding:calc(var(--gs-font-xs) + 6px) 4px 0;border:1px solid var(--gs-line);border-radius:var(--gs-radius);background:var(--gs-surface-2);color:var(--gs-text)}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area.rk-my-turn .rk-clock{border-color:#a795ff8c;background:#7b65cf2e;color:#fff}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-clock b{font-size:var(--gs-font-md);line-height:1}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-clock span{font-size:var(--gs-font-xs)}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-clock[data-remaining]:not([data-remaining=""])::after{content:"· " attr(data-remaining);margin-left:4px;color:var(--gs-text-dim);font-size:var(--gs-font-xs);white-space:nowrap}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area #rk-guide{display:none}
/* 참가자: 이름 / 남은 타일 수 · 상태 */
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area #rk-players{grid-area:players;display:flex;flex-direction:row;align-items:center;gap:var(--gs-gap);min-width:0;max-height:none;padding:0 calc(var(--gs-tap) + var(--gs-gap)) 0 0;overflow:hidden}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-player{display:grid;flex:1 1 0;grid-template-columns:auto minmax(0,1fr);align-content:center;gap:1px 5px;min-width:0;max-width:none;height:calc(var(--gs-hud-h) - var(--gs-gap)*2);padding:0 8px;border-radius:var(--gs-radius);text-align:left}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-player b{grid-column:1/-1;font-size:var(--gs-font-xs);line-height:1.2}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-player small,html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-player-state{overflow:hidden;font-size:var(--gs-font-xs);line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-count-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* 3명 이상이면 이름과 남은 타일 수만 남긴다. */
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-player:first-child:nth-last-child(n+3),html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-player:first-child:nth-last-child(n+3)~.rk-player{padding:0 5px}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-player:first-child:nth-last-child(n+3) .rk-player-state,html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-player:first-child:nth-last-child(n+3)~.rk-player .rk-player-state{display:none}
/* 공용 판 */
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-board-wrap{grid-area:board;display:flex;flex-direction:column;min-width:0;min-height:0}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-table-head{flex:0 0 auto;padding:0 4px 3px;font-size:var(--gs-font-xs);line-height:1.3}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-table-head>*{overflow:hidden;font-size:inherit;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area #rk-table{flex:1 1 auto;height:auto;min-height:0;border-radius:var(--gs-radius)}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-feedback{grid-area:help;display:block;min-height:0;padding:0 4px}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-feedback p{overflow:hidden;font-size:var(--gs-font-xs);line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area #rk-status{display:none}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area #rk-help{max-width:none;text-align:left}
/* 받침대와 받침대 도구 */
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-sorts{grid-area:sorts;display:flex;flex-direction:row;gap:0;width:auto;min-width:0;border-radius:var(--gs-radius);overflow:hidden}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-sorts button{flex:1 1 0;width:auto;min-width:0;min-height:var(--gs-tap);padding:0;border-radius:0}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-sorts button+button{border-top:0;border-left:1px solid var(--gs-line)}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-sorts b{font-size:var(--gs-font-md)}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-sorts span{display:none}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-rack-head{grid-area:tools;display:flex;align-items:center;justify-content:space-between;gap:var(--gs-gap);min-width:0;min-height:var(--gs-tap);padding:0 0 0 4px}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-rack-head>b{min-width:0;overflow:hidden;font-size:var(--gs-font-sm);text-overflow:ellipsis;white-space:nowrap}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-assist{display:flex;flex:0 0 auto;gap:var(--gs-gap)}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-assist button{min-height:var(--gs-tap);padding:0 10px;border:1px solid var(--gs-line);border-radius:var(--gs-radius);font-size:var(--gs-font-sm);white-space:nowrap}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area #rk-rack{--rk-rh:var(--rk-rack-tile-h,var(--rk-tile-h));grid-area:rack;justify-content:center;gap:var(--rk-row-gap) 3px;height:auto;min-height:0;max-height:none;padding:8px 6px 6px;overflow:hidden;border-radius:var(--gs-radius);background:linear-gradient(180deg,#272933 0,#272933 calc(var(--rk-rh) + 3px),#3a4356 calc(var(--rk-rh) + 4px),#1a1c22 calc(var(--rk-rh) + 8px),#1a1c22 100%) 0 8px/100% calc(var(--rk-rh) + var(--rk-row-gap)) repeat-y,#1a1c22}
/* 관전자는 손패와 조작이 없으므로 판을 넓힌다. */
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area.rk-spectating{grid-template-rows:var(--gs-hud-h) minmax(0,1fr) auto;grid-template-areas:"clock players players" "board board board" "help help help"}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area.rk-spectating :is(.rk-sorts,.rk-rack-head,#rk-rack,.rk-history,#rk-draw,#rk-submit){display:none}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area #rk-rack .rk-tile b{font-size:min(32px,calc(var(--rk-rack-tile-w,44px)*.72))}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-tile[data-color="joker"] span{display:none}
/* 조작: 되돌리기 · 가져오기 · 턴 마치기는 엄지가 닿는 아래쪽 */
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-history{grid-area:history;display:flex;gap:var(--gs-gap)}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-history button{flex:1 1 0;min-width:0;min-height:calc(var(--gs-tap) + 6px);padding:0}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area #rk-draw,html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area #rk-submit{flex-direction:row;gap:6px;min-width:0;min-height:calc(var(--gs-tap) + 6px);margin:0;padding:0 8px;border-radius:var(--gs-radius)}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area #rk-draw{grid-area:draw;align-self:end;height:100%;max-height:calc(var(--gs-tap)*3)}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area #rk-submit{grid-area:submit}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area :is(#rk-draw,#rk-submit)>b{font-size:22px}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area :is(#rk-draw,#rk-submit) :is(span,small){font-size:var(--gs-font-sm);font-weight:700;white-space:nowrap}
/* 알림 */
/* 미완성 안내는 타일을 가리지 않게 판 아래 안내 줄 자리에 둔다(가로는 판 아래쪽 가장자리). */
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-validation-message{grid-area:help;position:static;transform:none;width:auto;max-width:none;margin:0;padding:6px 10px;font-size:var(--gs-font-sm);line-height:1.35}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-validation-message:not([hidden])~.rk-feedback{display:none}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-turn-banner{width:min(300px,100%);padding:14px 14px;gap:5px}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-turn-banner strong{font-size:clamp(24px,7.5vmin,34px)}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-turn-kicker{font-size:var(--gs-font-xs)}
html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area #rk-turn-hint{font-size:var(--gs-font-sm)}
@media (orientation:landscape){
  html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area{--rk-tile-h:46px;--rk-row-gap:9px;grid-template-columns:var(--rk-side) minmax(0,1fr) var(--rk-side);grid-template-rows:var(--gs-hud-h) auto minmax(0,1fr) auto auto;grid-template-areas:"clock board ." "players board history" "players board draw" "sorts rack draw" "tools rack submit"}
  html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area #rk-players{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;overflow:auto;scrollbar-width:none}
  html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-player{flex:0 0 auto;height:auto;padding:5px 8px}
  html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-player:first-child:nth-last-child(n+3),html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-player:first-child:nth-last-child(n+3)~.rk-player{grid-template-columns:minmax(0,1fr) auto;padding:4px 6px}
  html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-player:first-child:nth-last-child(n+3) b,html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-player:first-child:nth-last-child(n+3)~.rk-player b{grid-column:1}
  html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area :is(.rk-table-head,.rk-feedback,.rk-rack-head>b){display:none}
  html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-rack-head{display:block;padding:0}
  html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-assist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:100%}
  html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-assist button{padding:0 2px;font-size:var(--gs-font-xs);line-height:1.2;white-space:normal;word-break:keep-all}
  html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area :is(#rk-draw,#rk-submit){flex-direction:column;gap:3px;padding:4px}
  /* 가로는 안내 줄이 없어 판 아래쪽에 잠깐 띄운 뒤 지운다. 빨간 표시와 턴 마치기 버튼의 표시는 남는다. */
  html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area .rk-validation-message{grid-area:board;align-self:end;justify-self:center;z-index:14;max-width:calc(100% - 16px);margin:0 0 6px;animation:gs-rk-message 3.4s forwards}
  html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area.rk-spectating{grid-template-columns:var(--rk-side) minmax(0,1fr) var(--gs-tap);grid-template-rows:var(--gs-hud-h) minmax(0,1fr);grid-template-areas:"clock help ." "players board board"}
  html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area.rk-spectating .rk-feedback{display:block;align-self:center}
}
@keyframes gs-rk-message{0%,82%{opacity:1}100%{opacity:0;visibility:hidden}}
/* 세로가 넉넉한 가로 화면(태블릿·터치 노트북)은 타일을 줄이지 않는다. */
@media (orientation:landscape) and (min-height:600px){
  html.mobile-layout body[data-gs-game="rummikub"] #rummikub-play-area{--rk-tile-h:58px;--rk-row-gap:14px}
}
/* ── END rummikub ───────────────────────────────── */

/* ── BEGIN fighter ─────────────────────────────── */
/* 격투 대전: 공용 HUD 줄 대신 자체 HUD(1P 체력·히트·라운드 / 시간 / 2P)를 맨 위에 두고 오른쪽 위 메뉴 버튼 자리는 비운다.
   세로: HUD / 경기장 캔버스 / 조작 띠(왼쪽 방향 패드, 오른쪽 3×2 버튼). 가로: HUD / 경기장, 조작은 경기장 아래 양쪽 구석에 겹친다.
   캐릭터 선택은 같은 자리를 덮는다(세로 2열 × 3행, 가로 3열 × 2행). 크기는 --gs-stage-w/h 비례(기종별 분기 없음). */
html.mobile-layout body[data-gs-game="fighter"].game-active #game>.game-head,html.mobile-layout body[data-gs-game="fighter"].game-active #spectator-help{display:none!important}
html.mobile-layout body[data-gs-game="fighter"].game-active #fighter-play-area{position:relative;display:grid;grid-template-rows:var(--gs-hud-h) minmax(0,1fr) auto;gap:0;flex:1 1 auto;width:100%;height:100%;min-height:0;overflow:hidden;background:var(--ink-0)}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-hud{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--gs-gap);height:var(--gs-hud-h);box-sizing:border-box;padding:0 var(--gs-menu-reserve) 0 calc(var(--gs-pad) + var(--gs-safe-l));border:0;border-radius:0;background:var(--gs-surface);box-shadow:0 1px 0 var(--gs-line)}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-side{gap:3px}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-name{gap:4px}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-name em{padding:0 4px;font-size:var(--gs-font-xs);line-height:1.35}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-name b{font-size:var(--gs-font-xs)}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-char{display:none}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-rage{padding:0 3px;font-size:var(--gs-font-xs);line-height:1.3;letter-spacing:0}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-pips{gap:3px}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-pips i{width:8px;height:8px;border-width:1.5px}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-hp{height:clamp(8px,2.4vmin,11px);border-radius:3px}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-heat{height:5px}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-heat i{flex:1 1 auto;height:5px}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-heat span{display:none}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-clock{min-width:calc(var(--gs-tap)*.95);padding:0 4px;border-radius:var(--gs-radius)}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-clock b{font-size:var(--gs-font-lg);line-height:1.1}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-clock small{font-size:var(--gs-font-xs);letter-spacing:0}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-stage{min-height:0;border:0;border-radius:0}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-watch-badge{top:var(--gs-gap);font-size:var(--gs-font-xs)}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-keys{display:none}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-pad{display:flex;align-items:center;justify-content:space-between;gap:var(--gs-gap);padding:var(--gs-pad) calc(var(--gs-pad) + var(--gs-safe-r)) calc(var(--gs-pad) + var(--gs-safe-b)) calc(var(--gs-pad) + var(--gs-safe-l));border-top:1px solid var(--gs-line);background:var(--gs-surface);--fighter-dir:clamp(44px,calc(var(--gs-stage-w,360px)*.135),60px);--fighter-btn:clamp(48px,calc((var(--gs-stage-w,360px) - var(--fighter-dir)*3 - var(--gs-pad)*4)/3.3),70px)}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-actions{gap:var(--gs-gap);grid-template-rows:max(44px,calc(var(--fighter-btn)*.82)) var(--fighter-btn)}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-btn b{font-size:var(--gs-font-sm)}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-btn small{display:none}
html.mobile-layout body[data-gs-game="fighter"].game-active #fighter-play-area.fighter-spectating{grid-template-rows:var(--gs-hud-h) minmax(0,1fr)}
/* 메뉴 시트가 열린 동안 시트 뒤의 조작 버튼은 숨긴다(누르고 있던 입력은 fighter.js가 놓는다). */
html.mobile-layout body[data-gs-game="fighter"].mobile-game-chat-open .fighter-pad{visibility:hidden}
/* 캐릭터 선택(모바일): 화면 전체를 덮고, 메뉴 버튼 자리는 머리글에서 비운다. 세로는 2열 × 3행. */
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-select{gap:var(--gs-gap);padding:0 calc(var(--gs-pad) + var(--gs-safe-r)) calc(var(--gs-pad) + var(--gs-safe-b)) calc(var(--gs-pad) + var(--gs-safe-l));border-radius:0}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-select-head{height:var(--gs-hud-h);padding-right:calc(var(--gs-menu-reserve) - var(--gs-pad))}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-select-head b{font-size:var(--gs-font-lg)}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-select-timer{font-size:var(--gs-font-sm)}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-select-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gs-gap)}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-card{gap:var(--gs-gap);padding:var(--gs-gap);border-radius:var(--gs-radius)}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-card canvas{border-radius:8px}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-card-copy{gap:2px}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-card-title b{font-size:var(--gs-font-sm)}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-card em,html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-stats small,html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-style,html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-finisher,html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-stars{font-size:var(--gs-font-xs)}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-stats{gap:2px}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-stats>span{gap:4px}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-stats i{height:4px}
/* 세로 화면 카드는 능력치 세 개를 한 줄(이름 위, 막대 아래)로 줄여 초상 자리를 넓힌다. */
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-stats{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:4px}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-stats>span{grid-template-columns:minmax(0,1fr);gap:1px}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-select-foot{flex-direction:column;align-items:stretch;gap:var(--gs-gap)}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-picks{display:grid;grid-template-columns:1fr 1fr;gap:var(--gs-gap)}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-pick{padding:4px 6px;font-size:var(--gs-font-xs)}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-select-actions{display:grid;grid-template-columns:1fr 2fr;gap:var(--gs-gap)}
html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-select-actions button{min-height:var(--gs-tap);padding:0 8px;font-size:var(--gs-font-sm)}
@media (orientation:landscape){
  html.mobile-layout body[data-gs-game="fighter"].game-active #fighter-play-area{grid-template-rows:var(--gs-hud-h) minmax(0,1fr)}
  html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-hud{padding-left:calc(var(--gs-pad)*2 + var(--gs-safe-l));column-gap:calc(var(--gs-pad)*2)}
  html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-pad{position:absolute;z-index:3;right:0;bottom:0;left:0;align-items:flex-end;padding:0 calc(var(--gs-pad) + var(--gs-safe-r)) calc(var(--gs-pad) + var(--gs-safe-b)) calc(var(--gs-pad) + var(--gs-safe-l));border:0;background:none;pointer-events:none;--fighter-dir:clamp(44px,calc(var(--gs-stage-h,320px)*.145),58px);--fighter-btn:clamp(46px,calc(var(--gs-stage-h,320px)*.17),62px)}
  html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-pad>*{pointer-events:auto;opacity:.72}
  html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-dpad span,html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-btn{background:color-mix(in srgb,var(--ink-3) 80%,transparent)}
  /* 가로 선택 화면: 3열 × 2행, 아래 줄에 선택 상태와 버튼을 한 줄로. */
  html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-select-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-card{grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-card canvas{width:clamp(40px,calc(var(--gs-stage-h,320px)*.17),150px);height:auto}
  html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-select-foot{flex-direction:row;align-items:center}
  html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-picks{flex:1 1 auto;min-width:0}
  html.mobile-layout body[data-gs-game="fighter"].game-active .fighter-select-actions{flex:0 0 auto;min-width:min(44%,300px)}
}
/* ── END fighter ───────────────────────────────── */