/* 서커스의 왕: 공용 /common/nin.css(토큰·카드·알약·입력칸·모달) 다음에 읽는다.
   메뉴 화면은 다른 Gamepio 게임과 같은 클래스·배치(.screen.nin · .tile · .card · #lobby-players …)에 색 토큰만 서커스 팔레트
   (천막 빨강 #d92b3a · 노랑 #f4c542 · 파랑 #2a5db8 · 크림 #fff4dc, 글씨 테두리 짙은 버건디 #5a1018)로 바꾸고, 로비의 모드·스타일 고르기(.opts)를 더한다.
   게임 화면(#hud)은 화면 가득 WebGL 캔버스(#stage) 위에 위 가운데 막·타이머, 오른쪽 위 옵션, 네 구석 버튼(.corner-zone), 연출 층(#fx) */
:root {
  --red: #d92b3a; --red-d: #8e1622;          /* 주 버튼(다음 ▶ · 혼자 하기 · 시작) = 천막 빨강 */
  --blue: #2a5db8; --blue-d: #183a7a;        /* 보조(온라인 · 방 만들기) = 서커스 파랑 */
  --yellow: #f4c542; --yellow-d: #c8962a;    /* 노랑 (왕관 · 알약) */
  --sky1: #d92b3a; --sky2: #7a0f1c;          /* 메뉴 배경 (천막 줄무늬 빨강 → 짙은 빨강) */
  --shade: #2a050940; --shade-far: #1a030630;
  --txt-sh: #5a1018;
  --card-sh: 0 4px 0 var(--shade), 0 10px 18px var(--shade-far);
  --cream: #fff4dc; --gold: #f4c542; --gold-d: #c8962a; --velvet: #5a1018;
}
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: #2a0710; color: var(--cream);
  font-family: ui-rounded, "Arial Rounded MT Bold", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  -webkit-user-select: none; user-select: none; touch-action: none;
}
.hidden { display: none !important; }

/* ---------- 게임 화면 ---------- */
#hud { position: fixed; inset: 0; overflow: hidden; background: #140610; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hud-top {
  position: absolute; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 12px; padding: 4px 16px; border-radius: 999px; pointer-events: none;
  background: #2a0a14d0; border: 2px solid var(--gold-d); color: var(--cream); font-family: var(--ui); font-size: 14px; white-space: nowrap;
}
.hud-top strong { font-family: "Rye", var(--ui); font-size: 24px; color: var(--gold); min-width: 40px; text-align: center; }
#hud-act { font-family: "Rye", var(--ui); letter-spacing: 1px; }
#hud-gm { color: #f5d9a8; }
#hud-mode { font-size: 11px; opacity: .75; }
.hud-opts { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 4; display: flex; gap: 6px; }
.hud-opts .opt {
  font: inherit; font-family: var(--ui); font-size: 15px; min-width: 40px; height: 34px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--gold-d); background: #2a0a14d0; color: var(--cream);
}

/* 네 구석: 큰 둥근 버튼(플레이어 색, 안에 바라보는 쪽 화살표) + 점수 알약 · 회전 방향 · 이름. 이 기기가 조종하는 자리(.mine)만 눌린다 */
.corner-zone {
  --c: #888; --rot: 0rad; position: absolute; z-index: 3; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px;
  pointer-events: none; opacity: .6; transition: opacity .2s;
}
.corner-zone.mine { pointer-events: auto; opacity: 1; }
.corner-zone.out { filter: grayscale(1); opacity: .35; }
.corner-zone.pos-bl { left: 14px; bottom: max(14px, env(safe-area-inset-bottom)); }
.corner-zone.pos-br { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); align-items: flex-end; }
.corner-zone.pos-tl { left: 14px; top: 56px; flex-direction: column; }
.corner-zone.pos-tr { right: 14px; top: 56px; flex-direction: column; align-items: flex-end; }
.tbtn {
  width: 96px; height: 96px; border-radius: 50%; border: 5px solid #ffffffd0; cursor: pointer; padding: 0; touch-action: none;
  background: radial-gradient(circle at 35% 30%, #ffffff55, transparent 45%), var(--c);
  box-shadow: 0 6px 0 #00000070, 0 0 0 4px #00000040, 0 10px 24px #000a; transition: transform .06s, box-shadow .06s;
  display: flex; align-items: center; justify-content: center;
}
.corner-zone:not(.mine) .tbtn { width: 64px; height: 64px; border-width: 3px; }
.tbtn .arrow { display: block; color: #fff; font-size: 44px; line-height: 1; transform: rotate(var(--rot)); text-shadow: 0 2px 0 #0006; }
.corner-zone:not(.mine) .tbtn .arrow { font-size: 30px; }
/* 누르는 동안: 버튼이 커지고 빛난다 (화면 어디를 눌러도 내 버튼이 켜진다) */
.corner-zone.down .tbtn { transform: scale(1.14); box-shadow: 0 2px 0 #00000070, 0 0 0 8px #ffffffa0, 0 0 40px 10px var(--c); }
.corner-zone.down .cspin { color: var(--gold); }
/* 돌진 충전(--charge 0~1): 내 버튼 테두리가 금빛으로 점점 밝게 */
.corner-zone.mine .tbtn { border-color: color-mix(in srgb, #ffffffd0, var(--gold) calc(var(--charge, 0) * 100%)); }
.corner-zone.mine.down .tbtn { box-shadow: 0 2px 0 #00000070, 0 0 0 calc(8px + var(--charge, 0) * 6px) #ffffffa0, 0 0 calc(40px + var(--charge, 0) * 40px) calc(10px + var(--charge, 0) * 14px) var(--c); }
/* 막 시작 '나!': 내 구석 버튼이 머리 위 화살표와 같이 맥박 */
.corner-zone.you .tbtn { animation: you-pulse .5s ease-in-out infinite alternate; }
@keyframes you-pulse { from { transform: scale(1); box-shadow: 0 6px 0 #00000070, 0 0 0 4px #00000040; } to { transform: scale(1.12); box-shadow: 0 6px 0 #00000070, 0 0 0 10px var(--c), 0 0 34px 10px var(--c); } }
#you-marker { position: absolute; left: 0; top: 0; z-index: 6; /* 안내 알약(#hint) 위 */ pointer-events: none; --c: #fff; will-change: transform; }
#you-marker .ybob {
  position: absolute; left: 0; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;
  animation: you-bob .5s ease-in-out infinite alternate;
}
#you-marker .ylabel {
  font-family: "Rye", var(--ui); font-size: 26px; line-height: 1; color: #fff; white-space: nowrap; padding: 5px 14px 6px; border-radius: 999px;
  background: var(--c); border: 3px solid #fff; box-shadow: 0 4px 0 #0007, 0 0 18px var(--c);
}
#you-marker .yarrow { font-size: 34px; line-height: .9; color: var(--c); -webkit-text-stroke: 3px #fff; paint-order: stroke fill; filter: drop-shadow(0 3px 0 #0007); }
@keyframes you-bob { from { transform: translate(-50%, -14px); } to { transform: translate(-50%, 0); } }
#hint {
  position: absolute; left: 50%; top: 100px; transform: translateX(-50%); z-index: 5; pointer-events: none; max-width: calc(100% - 32px); text-align: center;
  background: var(--gold); color: var(--velvet); border: 2px solid #fff4dc; border-radius: 999px; padding: 6px 18px;
  font-family: var(--ui); font-size: 17px; box-shadow: 0 4px 16px #000a; animation: hint-pulse 1s ease-in-out infinite alternate;
}
@keyframes hint-pulse { to { transform: translateX(-50%) scale(1.06); } }
.cinfo { display: flex; align-items: center; gap: 6px; font-family: var(--ui); text-shadow: 0 1px 2px #000; }
.pos-br .cinfo, .pos-tr .cinfo { flex-direction: row-reverse; }
.cscore { background: var(--c); color: #fff; border-radius: 999px; padding: 1px 12px; font-size: 18px; border: 2px solid #ffffffb0; min-width: 52px; text-align: center; }
.cspin { font-size: 22px; color: #fff; display: inline-block; width: 24px; text-align: center; }
.cname { font-size: 14px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cream); }
.corner-zone.crowned .cname::before { content: "👑 "; }
#toast {
  position: absolute; left: 50%; top: 58px; transform: translateX(-50%); pointer-events: none; white-space: nowrap; z-index: 5;
  background: var(--cream); color: var(--velvet); border-radius: 999px; padding: 4px 16px; font-family: var(--ui); font-size: 16px; opacity: 0; transition: opacity .25s;
}
#toast.show { opacity: 1; }

/* 연출 층 (fx.js): 둥근 메달 배너 · KO! 팝업 · 왕관 번쩍임 */
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.fx-banner {
  position: absolute; left: 50%; top: 50%; width: min(70vmin, 360px); aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 30px;
  background: radial-gradient(circle at 50% 40%, #4f86e8 0, #2a5db8 55%, #142f66 100%);
  border: 10px solid var(--gold); box-shadow: 0 0 0 6px #fff4dc, 0 0 0 9px var(--gold-d), 0 20px 60px #000c;
  color: var(--cream); font-family: "Rye", var(--ui); transform: translate(-50%, -50%);
  animation: slam var(--dur, 1.8s) cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.fx-banner.red { background: radial-gradient(circle at 50% 40%, #ff5a68 0, #d92b3a 55%, #7a0f1c 100%); }
.fx-banner.gold { background: radial-gradient(circle at 50% 40%, #fff1b8 0, #f4c542 50%, #a8741a 100%); color: #5a1018; }
.fx-banner .ic { font-size: 54px; line-height: 1; }
.fx-banner .big { font-size: clamp(26px, 6.5vmin, 40px); line-height: 1.05; word-break: keep-all; letter-spacing: 1px; text-shadow: 0 3px 0 #0008; }
.fx-banner.gold .big { text-shadow: 0 2px 0 #fff8; }
.fx-banner .sub { font-size: clamp(13px, 3vmin, 17px); letter-spacing: 2px; opacity: .9; }
@keyframes slam {
  0% { transform: translate(-50%, -50%) scale(2.4) rotate(-25deg); opacity: 0; }
  14% { transform: translate(-50%, -50%) scale(.94) rotate(3deg); opacity: 1; }
  22%, 80% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(.6) rotate(10deg); opacity: 0; }
}
.fx-pop {
  position: absolute; transform: translate(-50%, -50%); font-family: "Rye", var(--ui); font-size: 40px; color: #ffe066; white-space: nowrap;
  -webkit-text-stroke: 6px #d92b3a; paint-order: stroke fill; animation: pop 1s ease-out forwards;
}
.fx-pop.small { font-size: 22px; -webkit-text-stroke-width: 4px; }
.fx-pop.pow { font-size: 64px; color: #fff; -webkit-text-stroke: 9px #ff7a1a; text-shadow: 0 0 24px #ffb347; animation: pow 1s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes pow {
  0% { transform: translate(-50%, -50%) scale(.2) rotate(-20deg); opacity: 0; }
  15% { transform: translate(-50%, -70%) scale(1.5) rotate(8deg); opacity: 1; }
  30% { transform: translate(-50%, -70%) scale(1.15) rotate(-4deg); }
  75% { opacity: 1; }
  100% { transform: translate(-50%, -140%) scale(1) rotate(0); opacity: 0; }
}
@keyframes pop {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  20% { transform: translate(-50%, -80%) scale(1.25); opacity: 1; }
  100% { transform: translate(-50%, -180%) scale(1); opacity: 0; }
}
.fx-flash { position: absolute; inset: 0; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), #ffe28acc, #ffd04a33 35%, transparent 60%); animation: flash .7s ease-out forwards; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

/* ══ 메뉴 화면: 닌텐도풍 (둥근 알약 버튼, 흰 카드, 타일) + 천막 줄무늬 배경 ══ */
.screen {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  overflow-y: auto; text-align: center; padding: 20px 16px; z-index: 10;
}
.screen.nin, .modal { font-family: var(--ui); text-shadow: none; color: #fff; line-height: 2; touch-action: manipulation; }
.screen.nin {
  background:
    radial-gradient(ellipse at 50% -10%, #ffe9a060, transparent 55%), radial-gradient(ellipse at 50% 120%, #00000060, transparent 60%),
    repeating-linear-gradient(90deg, #ffffff00 0 40px, #fff4dc1c 40px 80px),
    linear-gradient(175deg, var(--sky1), var(--sky2));
}
.modal { background: #2a050999; }

/* 로고: 천막 · 왕관 + 노란 글씨(버건디 테두리) + KING OF CIRCUS */
.logo-wrap { position: relative; margin: 4px 0 6px; max-width: 100%; animation: bob 2.4s ease-in-out infinite; }
.crown-ic { font-size: 54px; line-height: 1; filter: drop-shadow(0 4px 0 #0006); }
.logo {
  font-family: var(--logo); font-weight: 700; font-size: 86px; line-height: 1.05; letter-spacing: 2px; color: var(--gold);
  -webkit-text-stroke: 14px var(--velvet); paint-order: stroke fill; text-shadow: 0 10px 0 #5a1018, 0 18px 18px #000a;
}
.logo span { color: var(--cream); }
.logo-sub { font-family: "Rye", serif; font-size: 22px; letter-spacing: 8px; color: var(--gold); text-shadow: 0 2px 0 #000; line-height: 1.6; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.tagline { font-size: 21px; margin: 30px 0; text-shadow: 0 2px 0 var(--txt-sh); }
.tagline b { font-weight: normal; color: var(--yellow); }

.nin .card, .modal .card {
  box-shadow: 0 8px 0 var(--shade), 0 18px 30px var(--shade-far);
  display: flex; flex-direction: column; align-items: center; width: 400px; max-width: 100%;
}
.nin .card.wide { width: 640px; }
.card-title { margin-bottom: 10px; }
.nin-input { font-size: 22px; padding: 12px 16px; margin-bottom: 10px; }
.pill { margin: 14px 0; }
.pill.big { font-size: 26px; padding: 14px 0; }
.screen > .pill.big { width: 340px; max-width: 100%; }
.link { font-size: 21px; padding: 11px 30px; min-height: 50px; margin-top: 16px; box-shadow: 0 5px 0 var(--shade); }
.link:hover { box-shadow: 0 7px 0 var(--shade); }
.link:active { box-shadow: 0 1px 0 var(--shade); }
.msg { min-height: 22px; margin-top: 20px; color: #ffe7a8; font-size: 17px; }
.card .msg { color: var(--red-d); }
#name-msg { margin-top: 10px; }
#name-msg:empty { display: none; }
.controls { font-size: 15px; opacity: .9; text-shadow: 0 1px 0 var(--txt-sh); }
.controls b { font-weight: normal; color: var(--yellow); }

/* 모드 선택 타일 (세 개) */
.hello { font-size: 50px; margin-bottom: 44px; text-shadow: 0 3px 0 var(--txt-sh); }
.hello b { font-weight: normal; color: var(--yellow); }
.tiles { display: flex; gap: 22px; margin-bottom: 24px; flex-wrap: wrap; justify-content: center; }
.tile {
  font: inherit; color: #fff; cursor: pointer; border: 6px solid #fff; border-radius: 34px;
  width: 240px; height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--bg); box-shadow: 0 10px 0 var(--sh), 0 20px 30px #0008; transition: transform .1s, box-shadow .1s;
}
.tile.red { --bg: var(--red); --sh: var(--red-d); }
.tile.blue { --bg: var(--blue); --sh: var(--blue-d); }
.tile.gold { --bg: var(--yellow); --sh: var(--yellow-d); color: var(--velvet); }
.tile:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 14px 0 var(--sh), 0 26px 34px #0008; }
.tile:active { transform: translateY(6px); box-shadow: 0 3px 0 var(--sh); }
.t-ic { font-size: 66px; line-height: 1; filter: drop-shadow(0 4px 0 #00000030); }
.t-name { font-size: 30px; }
.t-sub { font-size: 16px; opacity: .9; margin-top: 6px; }
.nin h2 {
  font-family: var(--logo); font-weight: 700; font-size: 44px; line-height: 1.15; margin: 0 0 24px; color: var(--gold);
  -webkit-text-stroke: 8px var(--velvet); paint-order: stroke fill; text-shadow: 0 6px 0 #5a1018;
}

/* 모드 · 스타일 고르기 (로비). .ro = 보기만 (게스트) */
.opts { gap: 6px; line-height: 1.4; color: var(--ink); }
.opts .otitle { font-size: 17px; color: var(--sub); margin: 6px 0 2px; }
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.mcard, .spill {
  font: inherit; cursor: pointer; color: var(--ink); background: #f7f1e6; border: 3px solid #eadfcb; border-radius: 16px;
  box-shadow: 0 4px 0 #dccfb6; transition: transform .08s;
}
.mcard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; text-align: center; }
.mcard .mi { font-size: 26px; line-height: 1.1; }
.mcard .mn { font-size: 17px; }
.mcard .md { font-size: 12px; color: var(--sub); line-height: 1.25; }
.mcard.on, .spill.on { border-color: var(--gold); background: #fff3c9; box-shadow: 0 4px 0 var(--gold-d); }
.mcard:hover, .spill:hover { transform: translateY(-2px); }
.pills { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.spill { padding: 6px 18px; font-size: 18px; border-radius: 999px; }
.opts.ro .mcard, .opts.ro .spill { cursor: default; pointer-events: none; }
.opts.ro .mcard:not(.on), .opts.ro .spill:not(.on) { opacity: .45; }
.pl .dot, .rrow .dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--c); border: 2px solid #fff; vertical-align: -2px; }

/* 방 목록 */
#room-list { width: 520px; max-height: 46vh; overflow-y: auto; gap: 20px; padding: 14px; margin-bottom: 16px; }
#room-list .empty { color: #6b7280; padding: 26px 0; font-size: 18px; }
#room-list button.room {
  font: inherit; color: var(--ink); cursor: pointer; width: 100%; display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  text-align: left; font-size: 19px; padding: 12px 16px; border: 3px solid #eadfcb; border-radius: 18px; background: #f7f1e6;
  box-shadow: 0 4px 0 #dccfb6; transition: transform .08s;
}
#room-list button.room:hover { border-color: var(--red); transform: translateY(-2px); }
#room-list button.room.full { opacity: .5; cursor: default; transform: none; }
#room-list .rname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#room-list .rhost { font-size: 15px; color: #6b7280; }
#room-list .rcount { font-size: 16px; color: #fff; background: var(--blue); border-radius: 999px; padding: 3px 10px; text-align: center; }
.check { display: flex; align-items: center; gap: 8px; margin: 8px 0 28px; font-size: 19px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--red); }

/* 로비 */
.room-title { font-size: 28px; margin-bottom: 10px; text-shadow: 0 2px 0 var(--txt-sh); }
.lobby-hint { font-size: 15px; opacity: .9; }
.invite { display: flex; gap: 12px; margin: 18px 0 24px; width: 640px; max-width: 100%; }
.inv-code, .inv-link {
  font: inherit; color: var(--ink); cursor: pointer; border: 4px solid #fff; border-radius: 22px; background: #fff;
  box-shadow: 0 6px 0 var(--shade); padding: 10px 16px; display: flex; flex-direction: column; align-items: center; gap: 9px;
  transition: transform .08s, box-shadow .08s;
}
.inv-code:hover, .inv-link:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--shade); border-color: var(--yellow); }
.inv-code:active, .inv-link:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--shade); }
.inv-label { font-size: 14px; color: #6b7280; }
.inv-code b { font-family: var(--logo); font-weight: 700; font-size: 46px; letter-spacing: 8px; line-height: 1.1; color: var(--red); }
.inv-link { flex: 1; min-width: 0; }
#lobby-link-text { font-size: 20px; color: var(--blue-d); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-copy { font-size: 15px; color: #fff; background: var(--blue); border-radius: 999px; padding: 3px 14px; margin-top: 4px; }
.copied .inv-copy, .inv-code.copied .inv-label { background: var(--red); color: #fff; border-radius: 999px; padding: 3px 14px; }
/* 4칸: 자리 색(빨·파·주·초) 테두리, 연결 중 칸(깜빡임), 빈 칸은 점선(AI 광대가 채운다) */
#lobby-players { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 460px; max-width: 100%; margin-bottom: 18px; }
#lobby-players .pl {
  font-size: 20px; line-height: 1.5; padding: 8px 14px; border-radius: 18px; background: var(--c); color: #fff; border: 4px solid #fff;
  box-shadow: 0 5px 0 #00000040; text-shadow: 0 1px 0 rgba(0,0,0,.35); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#lobby-players .pl.me { outline: 3px solid var(--gold); outline-offset: 2px; }
#lobby-players .pl.empty, #lobby-players .pl.pending { background: #ffffff18; color: #ffffffb0; border: 4px dashed #ffffff70; box-shadow: none; text-shadow: none; }
#lobby-players .pl.pending { color: #fff; animation: pl-pulse 1.2s ease-in-out infinite; }
@keyframes pl-pulse { 50% { opacity: .5; } }
#lobby-status { margin: 18px 0 10px; font-size: 18px; text-shadow: 0 1px 0 var(--txt-sh); }

/* 결과: 순위표 */
.res-hero { font-size: 70px; line-height: 1.1; }
.res-title { font-family: var(--logo); font-weight: 700; font-size: 44px; line-height: 1.3; color: var(--gold); text-shadow: 0 3px 0 var(--txt-sh); }
#res-table { width: 420px; margin: 18px 0 26px; gap: 8px; line-height: 1.4; }
.rrow { display: grid; grid-template-columns: 40px 22px 1fr auto; gap: 10px; align-items: center; width: 100%; color: var(--ink); font-size: 20px; padding: 6px 12px; border-radius: 14px; background: #f7f1e6; }
.rrow.win { background: #fff3c9; outline: 3px solid var(--gold); }
.rrow.me .rn::after { content: " ✦"; color: var(--red); }
.rrow .rk { font-size: 22px; text-align: center; }
.rrow .rn { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow .rv { font-size: 18px; color: var(--red-d); }
#res-hint { font-size: 18px; margin: -12px 0 14px; text-shadow: 0 2px 0 var(--txt-sh); }
.res-row { display: flex; gap: 12px; justify-content: center; flex-wrap: nowrap; margin: 12px 0; }
.res-row .pill { margin: 0; font-size: 22px; padding: 14px 30px; }

/* 모달 */
.modal .card { animation: popin2 .25s cubic-bezier(.3, 1.5, .5, 1); }
#lang-list { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-bottom: 6px; }
#lang-list .pill { margin: 0; }
.lang-opt.on { --bg: var(--yellow); --sh: var(--yellow-d); color: var(--ink); }

/* 이용약관·개인정보처리방침: 타이틀 화면 오른쪽 아래 구석 */
.legal-links .ll { display: inline-block; white-space: nowrap; }
#title .legal-links { text-align: right; position: absolute; right: 14px; bottom: 10px; margin: 0; color: #ffffffc0; font-size: 13px; line-height: 1.5; }
#title .privacy-link { color: #ffffffc0; text-decoration: underline; }
#title .privacy-link:hover { color: #fff; }

/* 구석 버튼: 오른쪽 위 언어, 왼쪽 위 Gamepio 홈 · 계정 (포털 아래에서만) */
.corner { position: absolute; top: 14px; right: 14px; margin: 0; z-index: 3; }
.corner-l { position: absolute; top: 14px; left: 14px; z-index: 3; display: flex; gap: 8px; max-width: calc(100% - 180px); }
.corner-l .pill { margin: 0; white-space: nowrap; }
#account-btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* 낮은 화면(1280×720 등): 타이틀·로비가 스크롤 없이 */
@media (min-width: 641px) and (max-height: 799px) {
  #title { line-height: 1.5; } #title .logo { font-size: 70px; } #title .crown-ic { font-size: 40px; } #title .tagline { margin: 8px 0 12px; } #title .card { padding: 14px 20px; }
  #title .pill { margin: 8px 0; } #title .nin-input { margin-bottom: 8px; } #name-msg { line-height: 1.4; }
  .invite { margin: 10px 0 12px; } .invite .inv-code b { font-size: 34px; } #lobby-players { gap: 8px; margin-bottom: 10px; } #lobby-players .pl { font-size: 17px; padding: 4px 12px; }
  #lobby .lobby-hint { line-height: 1.5; } #lobby-status { margin: 8px 0 4px; } #lobby .pill.big { margin: 6px 0; padding: 10px 0; }
  .nin h2 { font-size: 36px; margin-bottom: 10px; } .room-title { margin-bottom: 0; } .mcard .md { font-size: 11px; } .mcard { padding: 4px 6px; }
  #lobby .lobby-hint, #lobby-opts .md, #lobby .inv-label { display: none; }
  #lobby-players { grid-template-columns: repeat(4, 1fr); width: 640px; } .inv-code, .inv-link { padding: 4px 14px; gap: 2px; justify-content: center; }
  #lobby-opts { padding: 8px 16px; } #lobby-opts .mcard { flex-direction: row; justify-content: center; gap: 6px; }
}
@media (max-width: 640px) {
  .logo { font-size: 54px; -webkit-text-stroke-width: 9px; }
  .logo-sub { font-size: 16px; letter-spacing: 5px; }
  .tagline { font-size: 17px; margin: 20px 0; }
  .tiles { gap: 14px; }
  .tile { width: 100%; max-width: 340px; height: 110px; flex-direction: row; gap: 14px; }
  .tile .t-ic { font-size: 46px; }
  .tile .t-name { font-size: 26px; }
  .tile .t-sub { display: none; }
  .hello { font-size: 34px; margin-bottom: 22px; }
  .nin h2 { font-size: 32px; }
  .link { font-size: 18px; padding: 10px 24px; min-height: 46px; }
  .mgrid { grid-template-columns: repeat(2, 1fr); }
  #room-list button.room { font-size: 15px; }
  .invite { flex-direction: column; }
  .inv-code b { font-size: 38px; }
  #lobby-link-text { font-size: 15px; }
  #lobby-players .pl { font-size: 16px; }
  #res-table { width: 100%; }
  .res-title { font-size: 32px; }
  .res-row { gap: 7px; } .res-row .pill { font-size: 17px; padding: 12px 18px; }
  .corner .pill, .corner, .corner-l .pill { font-size: 13px; padding: 7px 12px; }
  .corner { top: 10px; right: 10px; }
  .corner-l { top: 10px; left: 10px; max-width: calc(100% - 130px); }
  #title .logo-wrap { margin-top: 56px; }
  #title .legal-links { text-align: center; position: static; margin-top: 4px; font-size: 12px; }
  .tbtn { width: 80px; height: 80px; }
  .corner-zone:not(.mine) .tbtn { width: 48px; height: 48px; }
  .corner-zone:not(.mine) .tbtn .arrow { font-size: 22px; }
  .cname { max-width: 80px; font-size: 12px; }
  .cscore { font-size: 15px; min-width: 40px; padding: 0 8px; }
  .hud-top { font-size: 12px; gap: 8px; padding: 2px 12px; top: 52px; }
  .hud-top strong { font-size: 20px; }
  #hud-gm { display: none; }
  .hud-opts { right: auto; left: 50%; transform: translateX(-50%); top: 10px; }
  .corner-zone.pos-tl, .corner-zone.pos-tr { top: 92px; }
  #hint { top: 92px; font-size: 14px; max-width: calc(100% - 140px); border-radius: 18px; }
}
/* 가로 모바일: 링이 위아래에 꽉 차므로 막·타이머 알약은 왼쪽 위 빈 구석으로 */
@media (max-height: 640px) and (orientation: landscape) {
  .hud-top { left: 14px; transform: none; font-size: 12px; gap: 8px; padding: 2px 12px; }
  .hud-top strong { font-size: 20px; }
  #hud-gm { display: none; }
}