/* ------------------------------------------------------------------ */
/*  카메라 변수: 등록된 커스텀 속성이라 transition 으로 부드럽게 회전  */
/* ------------------------------------------------------------------ */
@property --ang  { syntax: '<angle>';  inherits: true; initial-value: 0deg; }
@property --tilt { syntax: '<angle>';  inherits: true; initial-value: 0deg; }
@property --tx   { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --ty   { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --lift { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --dz   { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --k    { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --zoom { syntax: '<number>'; inherits: true; initial-value: 1; }

:root {
  --bg: #0f1422;
  --bg2: #171e31;
  --card: #1d2640;
  --line: #2c3758;
  --text: #e8ecf8;
  --muted: #95a0bf;
  --accent: #ffcc4d;
  --ok: #3ddc84;
  --bad: #ff5d6c;
  --light-sq: #ecdab4;
  --dark-sq: #b68a5e;
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(circle at 30% 0%, #1c2748 0%, var(--bg) 60%);
  color: var(--text);
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  overflow: hidden;
}
button {
  font: inherit; color: inherit; cursor: pointer;
  border: 1px solid var(--line); background: var(--card);
  border-radius: 10px; padding: 8px 12px;
  transition: transform .1s, background .15s, border-color .15s, opacity .15s;
}
button:hover:not(:disabled) { border-color: #4a5a8c; background: #243056; }
button:active:not(:disabled) { transform: scale(.97); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.primary { background: linear-gradient(135deg, #ffcc4d, #ff9f43); color: #22190a; border: 0; font-weight: 700; }
button.primary:hover:not(:disabled) { background: linear-gradient(135deg, #ffd76e, #ffb266); }
button.ghost { background: transparent; }
button.big { font-size: 1.15rem; padding: 12px 22px; }
.muted { color: var(--muted); }
.hidden, [hidden] { display: none !important; }

#app { display: flex; flex-direction: column; height: 100%; }

/* ---------------- 상단 바 ---------------- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; border-bottom: 1px solid var(--line);
  background: rgba(15, 20, 34, .7); backdrop-filter: blur(6px);
}
.brand { font-weight: 800; font-size: 1.2rem; letter-spacing: .5px; }
.brand small { color: var(--accent); font-weight: 600; font-size: .75rem; margin-left: 6px; }
.round { flex: 1; text-align: center; color: var(--muted); font-size: .9rem; }
.top-actions { display: flex; gap: 6px; }

/* ---------------- 레이아웃 ---------------- */
.layout { flex: 1; display: flex; min-height: 0; }
.stage {
  position: relative; flex: 1; min-width: 0; overflow: hidden;
  perspective: 1100px; perspective-origin: 50% 35%;
}
.panel {
  width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px;
  padding: 12px; border-left: 1px solid var(--line); background: rgba(23, 30, 49, .6);
  overflow-y: auto;
}

/* ---------------- 보드 ---------------- */
.board {
  --cell: 60px;
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--cell) * var(--n, 8)); height: calc(var(--cell) * var(--n, 8));
  margin-left: calc(var(--cell) * var(--n, 8) / -2); margin-top: calc(var(--cell) * var(--n, 8) / -2);
  transform-style: preserve-3d;
  transform: translateY(var(--lift)) translateZ(var(--dz)) rotateX(var(--tilt)) rotateZ(var(--ang)) translate(var(--tx), var(--ty));
  transition: --ang .9s cubic-bezier(.4, .1, .2, 1), --tilt .9s ease, --tx .9s ease, --ty .9s ease, --lift .9s ease, --dz .9s ease;
}
.cells {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  border-radius: 6px;
  box-shadow: 0 0 0 calc(var(--cell) * .12) #5b3b22, 0 0 0 calc(var(--cell) * .16) #2d1d10, 0 30px 60px rgba(0, 0, 0, .6);
}
.cell { position: relative; background: var(--light-sq); }
.cell.dark { background: var(--dark-sq); }
.cell .coord {
  position: absolute; font-size: calc(var(--cell) * .17); font-weight: 700;
  color: rgba(60, 35, 15, .55); pointer-events: none;
}
.cell .coord.file { right: 3px; bottom: 1px; }
.cell .coord.rank { left: 3px; top: 1px; }
.cell.target { box-shadow: inset 0 0 0 3px #ff3b3b; }
.cell.void { visibility: hidden; pointer-events: none; }
.cell.pit { background: radial-gradient(circle at 50% 40%, #07080d 30%, #1b1e2b 75%, #2e2a33); box-shadow: inset 0 calc(var(--cell) * .12) calc(var(--cell) * .18) #000; pointer-events: none; }
.cell.warp { background-image: radial-gradient(circle, rgba(181, 123, 255, .55), rgba(181, 123, 255, .12) 65%, transparent 72%); }
.cell.pad { background-image: radial-gradient(circle, rgba(255, 203, 61, .55), rgba(255, 203, 61, .1) 65%, transparent 72%); }
.sp-badge { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cell) * .42); pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.sp-badge b { position: absolute; right: 8%; bottom: 4%; font-size: calc(var(--cell) * .2); color: #fff; -webkit-text-stroke: 1px #3a1d6e; paint-order: stroke fill; }
.warp-badge i { font-style: normal; animation: warpSpin 6s linear infinite; }
@keyframes warpSpin { to { transform: rotate(360deg); } }
.map-row .map-desc { flex-basis: 100%; color: var(--muted); font-size: .78rem; }
.board.pentagon .cells { box-shadow: none; border-radius: 0; }
.fx .board-frame { fill: none; stroke: #5b3b22; stroke-width: .16; stroke-linejoin: round; filter: drop-shadow(0 .3px .6px rgba(0, 0, 0, .6)); }

.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transform: translateZ(1px); overflow: visible; }
.fx .guide { stroke-width: .06; stroke-dasharray: .18 .12; fill: none; opacity: .85; }
.fx .preview { stroke-width: .12; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .75; stroke-dasharray: .25 .15; }
.fx .preview-dot { opacity: .8; }
.fx .shot { stroke-width: .1; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 .08px #fff); }
.fx .shot.fade { transition: opacity .6s; opacity: 0; }
.fx .bullet { stroke: #fff; stroke-width: .04; }
.fx .burst { fill: none; stroke-width: .08; animation: burst .6s ease-out forwards; }
/* 직업별 궤적 */
.fx .shot.t-thin { stroke-width: .035; }
.fx .shot.t-none { display: none; }
.fx .shot.t-dash { stroke-width: .05; stroke-dasharray: .12 .12; opacity: .8; }
.fx .shot.t-glow { stroke-width: .2; opacity: .4; }
.fx .shot.t-rope { stroke-width: .05; filter: none; }
.fx .shot.t-blood { stroke-width: .08; stroke-dasharray: .04 .12; }
.fx .shot.t-beam { stroke-width: .24; opacity: .85; filter: drop-shadow(0 0 .15px #fff); }
.fx .shot.t-core { stroke-width: .08; filter: none; }
.fx .shot.t-bolt { stroke-width: .07; filter: drop-shadow(0 0 .12px #fff27a); }
.fx .shot.t-beam.fade, .fx .shot.t-core.fade, .fx .shot.t-bolt.fade { transition: opacity .35s; }
/* 맞은 자리 이펙트 */
.fx .imp-in { transform-box: fill-box; transform-origin: center; animation: imp .6s ease-out forwards; }
@keyframes imp { 0% { transform: scale(.3); opacity: 1; } 55% { opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.fx .imp-wind .imp-in { animation: impSpin .65s ease-out forwards; }
@keyframes impSpin { 0% { transform: scale(.4) rotate(0); opacity: 1; } 100% { transform: scale(1.2) rotate(320deg); opacity: 0; } }
.fx .imp-zap .imp-in { animation: impZap .5s steps(1) forwards; }
@keyframes impZap { 0% { opacity: 1; } 20% { opacity: .15; } 40% { opacity: 1; } 60% { opacity: .2; } 80% { opacity: 1; } 100% { opacity: 0; } }
.fx .imp-boom .imp-in { animation: imp .7s cubic-bezier(.2, .8, .3, 1) forwards; }
.imp-pop { position: absolute; inset: auto; left: 50%; bottom: 4%; width: calc(var(--cell) * 1.3); height: calc(var(--cell) * 1.3); margin-left: calc(var(--cell) * -.65); transform: none; pointer-events: none; z-index: 3; }
/* 판 흔들림 (transform 과 겹치지 않게 translate 속성으로) */
.board.shake-1 { animation: bshake1 .3s; }
.board.shake-2 { animation: bshake2 .45s; }
@keyframes bshake1 { 25% { translate: 3px -2px; } 50% { translate: -3px 2px; } 75% { translate: 2px 1px; } }
@keyframes bshake2 { 15% { translate: 8px -4px; } 35% { translate: -7px 4px; } 55% { translate: 5px -3px; } 75% { translate: -3px 2px; } }
.fx .crosshair { fill: none; stroke: #ff3b3b; stroke-width: .06; animation: pulse .5s ease-in-out infinite alternate; }
@keyframes burst { from { r: .1; opacity: 1; } to { r: .9; opacity: 0; } }
@keyframes pulse { from { opacity: .4; } to { opacity: 1; } }

/* ---------------- 말(플레이어) ---------------- */
#pieces { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.piece {
  position: absolute;
  left: calc(var(--x) * var(--cell)); top: calc(var(--y) * var(--cell));
  width: var(--cell); height: var(--cell);
  transform-style: preserve-3d;
  transition: left .25s ease, top .25s ease, opacity .5s;
}
.piece .facing {
  position: absolute; inset: 0; transform: translateZ(1px) rotate(var(--face, 0deg));
  transition: transform .3s;
}
.piece .facing::before {
  content: ''; position: absolute; left: 50%; top: 2%;
  border: calc(var(--cell) * .14) solid transparent; border-bottom: calc(var(--cell) * .22) solid var(--pc);
  border-top: 0; transform: translateX(-50%);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5));
}
.piece .facing::after {
  content: ''; position: absolute; inset: 18%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--pc) 45%, transparent) 0%, transparent 70%);
}
.piece .stand {
  position: absolute; left: -20%; right: -20%; bottom: 50%; height: calc(var(--cell) * 1.25);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px;
  transform-origin: 50% 100%;
  transform: rotateZ(calc(var(--ang) * -1)) rotateX(calc(var(--tilt) * -1));
  pointer-events: none;
}
.piece .avatar {
  width: calc(var(--cell) * .72); height: calc(var(--cell) * .72); border-radius: 50%;
  display: grid; place-items: center; font-size: calc(var(--cell) * .42);
  background: radial-gradient(circle at 35% 30%, #fff 0%, color-mix(in srgb, var(--pc) 35%, #fff) 45%, var(--pc) 100%);
  border: 3px solid var(--pc);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
}
.piece .mini-hp {
  width: calc(var(--cell) * .8); height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .55); overflow: hidden;
}
.piece .mini-hp i { display: block; height: 100%; background: var(--pc); transition: width .4s; }
.piece .badges { font-size: calc(var(--cell) * .2); height: calc(var(--cell) * .24); line-height: 1; }
.piece.current .avatar { box-shadow: 0 0 0 3px #fff, 0 0 18px 4px var(--pc); animation: bob 1.4s ease-in-out infinite; }
.piece.dead { opacity: 0; pointer-events: none; }
.piece.hit .avatar { animation: shake .45s; }
/* 직업 캐릭터 (js/chars.js) */
.piece.chared { transition: left .25s ease, top .25s ease, opacity .5s 1s; }
.piece .avatar.char {
  width: calc(var(--cell) * 1.12); height: calc(var(--cell) * 1.12); border: 0; border-radius: 0;
  background: none; box-shadow: none; font-size: 0; overflow: visible; margin-bottom: calc(var(--cell) * -.12);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35));
}
.piece .avatar.char .flip { width: 100%; height: 100%; transform: scaleX(var(--flip, 1)); transition: transform .2s; }
.piece .avatar.char svg { width: 100%; height: 100%; display: block; }
.piece.current .avatar.char { box-shadow: none; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 6px var(--pc)); }
.piece.hit .avatar.char { animation: none; }
.mini-ch { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; }
.mini-ch svg { width: 100%; height: 100%; display: block; transform: scale(1.25); transform-origin: 50% 70%; }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes shake {
  0%, 100% { transform: translateX(0); background: #fff; }
  20% { transform: translateX(-6px); background: #ff5d6c; }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); background: #ff5d6c; }
  80% { transform: translateX(4px); }
}
.float {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  font-weight: 900; font-size: calc(var(--cell) * .38); white-space: nowrap;
  text-shadow: 0 2px 0 #000, 0 0 6px #000;
  animation: floatUp 1.3s ease-out forwards;
}
.float.dmg { color: #ff5d6c; }
.float.heal { color: #3ddc84; }
.float.info { color: #ffcc4d; }
@keyframes floatUp { from { opacity: 1; transform: translate(-50%, 0) scale(1.2); } to { opacity: 0; transform: translate(-50%, -60px) scale(1); } }

.compass {
  position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line); display: grid; place-items: center;
}
.compass .needle {
  font-weight: 800; font-size: .8rem; color: var(--bad);
  width: 100%; height: 100%; display: flex; justify-content: center; padding-top: 2px;
  transition: transform .9s cubic-bezier(.4, .1, .2, 1);
}
.toast {
  z-index: 6;
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%) translateY(-20px);
  background: rgba(0, 0, 0, .75); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 18px; font-weight: 700; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
  white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------- 패널 ---------------- */
.players { display: flex; flex-direction: column; gap: 6px; }
.pcard {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 12px; background: var(--card); border: 2px solid transparent;
}
.pcard.active { border-color: var(--pc); box-shadow: 0 0 16px -4px var(--pc); }
.pcard.dead { opacity: .4; filter: grayscale(1); }
.pemoji { font-size: 1.6rem; }
.pinfo { flex: 1; min-width: 0; }
.pname { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp { height: 8px; border-radius: 4px; background: #0b0f1a; overflow: hidden; margin-top: 4px; }
.hp-fill { height: 100%; background: var(--pc); transition: width .4s; }
.hpnum { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 34px; text-align: right; }
.pnums { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.score { font-size: .72rem; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bonus { font-size: 1rem; }
.bonus b { color: var(--accent); }
.fast { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: #3a3217; color: #ffe38a; font-weight: 700; font-size: .9rem; }

.turn { background: var(--card); border-radius: var(--radius); padding: 12px; }
.turn-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.turn-head .big { font-size: 2rem; }
.turn-head b { color: var(--pc); }
.turn-head small { color: var(--muted); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.act {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px;
}
.act .ai { font-size: 1.3rem; }
.act b { font-size: .95rem; }
.act small { color: var(--muted); font-size: .75rem; }
.act.free { border-style: dashed; }
.act.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; }
.hint { color: var(--muted); font-size: .78rem; margin: 10px 0 0; line-height: 1.45; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.chip.easy { background: #1f5f3f; color: #b9f5d3; }
.chip.hard { background: #6b2140; color: #ffc2d6; }
.chip.extra { background: #5a4a10; color: #ffe38a; }
.rotate-box p { margin: 0 0 8px; font-size: .9rem; }
.rot-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.rotate-box .primary { width: 100%; }

.log { flex: 1; min-height: 120px; display: flex; flex-direction: column; }
.log h3 { margin: 0 0 6px; font-size: .85rem; color: var(--muted); }
.log ol { list-style: none; margin: 0; padding: 0; overflow-y: auto; font-size: .82rem; line-height: 1.45; }
.log li { padding: 4px 0; border-bottom: 1px dashed var(--line); }
.log li:first-child { animation: fadeIn .4s; }
.log .who { font-weight: 700; color: var(--pc); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } }

/* ---------------- 오버레이 & 모달 ---------------- */
.overlay {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px;
  background: rgba(6, 9, 18, .72); backdrop-filter: blur(3px);
}
.overlay.dock { background: transparent; backdrop-filter: none; place-items: end end; pointer-events: none; }
.overlay.dock .card { width: min(380px, 100%); }
.overlay.dock .card { pointer-events: auto; box-shadow: 0 -10px 40px rgba(0, 0, 0, .5); }
.card {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px; width: min(620px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5); animation: pop .22s ease-out;
}
.card.small { width: min(440px, 100%); }
.card h2 { margin: 0 0 6px; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }

.setup-card { text-align: center; display: flex; flex-direction: column; gap: 14px; }
.setup-card h1 { margin: 0; font-size: 2.2rem; }
.setup-card p { margin: 0; }
.setup-players { display: flex; flex-direction: column; gap: 8px; }
.setup-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--card); border-radius: 12px; border-left: 5px solid var(--pc); }
.setup-row span { font-size: 1.6rem; }
.setup-row input {
  flex: 1; font: inherit; color: var(--text); background: #0f1528; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px;
}
.check { display: flex; gap: 8px; justify-content: center; align-items: center; color: var(--muted); font-size: .9rem; }

.handover-card { text-align: center; border-top: 6px solid var(--pc); }
.handover-card .ho-emoji { font-size: 4rem; animation: bob 1.4s ease-in-out infinite; }
.handover-card h2 { font-size: 1.8rem; color: var(--pc); }
.handover-card p { color: var(--muted); }

.levels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 10px; }
.level { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; text-align: center; }
.level b { font-size: 1.2rem; }
.level span { font-size: .82rem; color: var(--muted); }
.level em { font-style: normal; font-weight: 800; color: var(--accent); }
.level small { color: var(--muted); }
.level.easy { border-color: #2f7a52; }
.level.hard { border-color: #8c2c52; }
.level.killer { border-color: #d9480f; background: linear-gradient(180deg, #3a1c10 0%, var(--card) 100%); }
.level-card .levels { grid-template-columns: repeat(3, 1fr); }
.chip.killer { background: #7a2e0e; color: #ffd0b0; }
.card .ghost.wide { width: 100%; }

.quiz-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.quiz-head .topic { font-weight: 700; }
.quiz-head .who { margin-left: auto; color: var(--pc); font-weight: 700; }
.timer { position: relative; height: 10px; background: #0b0f1a; border-radius: 5px; overflow: hidden; margin-bottom: 14px; }
.timer-fill { position: absolute; inset: 0; background: linear-gradient(90deg, #3ddc84, #ffcc4d); transform-origin: left; transition: transform .1s linear; }
.timer-fill.warn { background: linear-gradient(90deg, #ff5d6c, #ff9f43); }
.timer-num { position: absolute; right: 6px; top: -3px; font-size: .7rem; font-weight: 700; text-shadow: 0 0 3px #000; }
.question { font-size: 1.15rem; line-height: 1.9; padding: 14px; background: var(--card); border-radius: 12px; margin-bottom: 14px; overflow-x: auto; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px; min-height: 58px; font-size: 1.05rem; }
.choice .key {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: #0f1528; font-size: .8rem; font-weight: 800; color: var(--muted);
}
.choice .ctext { overflow-x: auto; }
.choice.correct { border-color: var(--ok); background: rgba(61, 220, 132, .15); opacity: 1 !important; }
.choice.wrong { border-color: var(--bad); background: rgba(255, 93, 108, .15); opacity: 1 !important; }
.feedback { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.verdict { font-size: 1.3rem; font-weight: 800; }
.verdict.ok { color: var(--ok); }
.verdict.bad { color: var(--bad); }
.explain { background: var(--card); border-radius: 10px; padding: 10px 12px; line-height: 1.9; color: #cfd6ea; overflow-x: auto; }

.dist { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.dist-btn { flex: 1; font-weight: 800; font-size: 1.1rem; padding: 12px 0; min-width: 56px; }
.dist-btn.sel { border-color: var(--accent); background: #3a3217; }

.roulette { text-align: center; padding: 10px 0; }
.slot {
  font-size: 4rem; width: 110px; height: 110px; margin: 0 auto; display: grid; place-items: center;
  background: var(--card); border-radius: 22px; border: 2px solid var(--line);
}
.slot.done { border-color: var(--accent); animation: pop .3s; }
.slot-name { font-size: 1.3rem; font-weight: 800; margin-top: 10px; min-height: 1.6em; }
.box-desc { text-align: center; color: var(--muted); margin-bottom: 12px; }
.card .primary.full { width: 100%; }

.rules h3 { margin: 16px 0 6px; color: var(--accent); font-size: 1rem; }
.rules ul { margin: 0; padding-left: 20px; line-height: 1.7; }
.rules table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rules td, .rules th { border-bottom: 1px solid var(--line); padding: 6px; text-align: left; }

.victory { text-align: center; }
.victory .crown { font-size: 4.5rem; }
.victory h2 { font-size: 2rem; color: var(--pc); }

/* ---------------- 온라인 ---------------- */
.mode { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; text-align: left; }
.mode-title { margin: 0; font-size: 1.05rem; }
.small { font-size: .85rem; margin: 0; }
.field-label { font-size: .8rem; color: var(--muted); }
.online-form { display: flex; flex-direction: column; gap: 8px; }
.online-form input, .copy-row input, .join-row input, .pub-make input {
  font: inherit; color: var(--text); background: #0f1528; border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 10px; min-width: 0;
}
.online-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.join-row { display: flex; gap: 6px; }
.join-row input { flex: 1; text-transform: uppercase; letter-spacing: .2em; font-weight: 700; text-align: center; }
#btnRestore { border-style: dashed; }
.chip.me { background: #2b3f7a; color: #cfe0ff; }
.chip.host { background: #5a4a10; color: #ffe38a; }
.chip.off { background: #4a2330; color: #ffb3c0; }
.chip.bot { background: #213f3a; color: #9ff0d8; }
.bot-btn { flex: none; padding: 6px 10px; font-size: .82rem; border-radius: 999px; white-space: nowrap; }
.setup-row input { min-width: 0; }
.bot-btn.on { background: #213f3a; border-color: #3fbf9a; color: #9ff0d8; }
.seat-x { flex: none; padding: 2px 9px; font-size: .8rem; border-radius: 999px; }
.seat-add { flex: none; padding: 4px 10px; font-size: .8rem; border-radius: 999px; background: #213f3a; border-color: #3fbf9a; color: #9ff0d8; }

.lobby-card { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.eyebrow { margin: 0; font-size: .75rem; letter-spacing: .12em; color: var(--muted); }
.room-code { display: flex; justify-content: center; gap: 8px; }
.room-code span {
  width: 54px; height: 64px; display: grid; place-items: center; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); font-size: 2rem; font-weight: 900; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.copy-row { display: flex; gap: 6px; }
.copy-row input { flex: 1; font-size: .8rem; }
.seats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.seat { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--card); border-left: 4px solid var(--line); color: var(--muted); }
.seat.filled { border-left-color: var(--pc); color: var(--text); }
.seat-emoji { font-size: 1.4rem; width: 1.6em; text-align: center; }
.seat-name { flex: 1; font-weight: 700; }
.lobby-msg { margin: 0; color: var(--muted); font-size: .9rem; }

.waiting { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; background: #151c31; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dots i, .piece.current .avatar, .handover-card .ho-emoji { animation: none; } }

.version-link { color: var(--accent); font-size: .9rem; text-decoration: none; font-weight: 700; }
.version-link:hover { text-decoration: underline; }
.beta-tag { font-size: .9rem; vertical-align: super; color: #22190a; background: var(--accent); border-radius: 6px; padding: 0 6px; }

/* ---------------- 베타: 조준 · 칸 선택 · 증강 ---------------- */
.cells.aimable .cell { cursor: crosshair; }
.cell.pickable { cursor: pointer; box-shadow: inset 0 0 0 3px var(--pick); }
.cell.pickable::after {
  content: ''; position: absolute; inset: 32%; border-radius: 50%;
  background: var(--pick); opacity: .6; animation: pulse .7s ease-in-out infinite alternate;
}
.fx .guide.faint { opacity: .45; stroke-dasharray: none; stroke-width: .05; }
.fx .guide-cell { fill: rgba(255, 255, 255, .12); stroke-width: .05; stroke-dasharray: .12 .08; }
.fx .guide-hit { fill: none; stroke: #ff3b3b; stroke-width: .07; animation: pulse .6s ease-in-out infinite alternate; }
.aim-box { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; background: #151c31; margin-bottom: 10px; }
.aim-row { display: flex; align-items: center; justify-content: space-between; font-variant-numeric: tabular-nums; }
.rot-btns.four { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }
.rot-btns.four button { padding: 8px 4px; font-size: .85rem; }
.chip.free-chip { background: #1f5f3f; color: #b9f5d3; }
.augment-card { width: min(720px, 100%); }
.augments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.augment {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 18px 12px 14px; border-radius: 14px; border: 2px solid #4a3f8c;
  background: linear-gradient(180deg, #252049 0%, var(--card) 100%);
}
.augment:hover:not(:disabled) { border-color: var(--accent); background: linear-gradient(180deg, #2f2860 0%, #243056 100%); }
.aug-key { position: absolute; top: 8px; left: 10px; font-size: .75rem; color: var(--muted); font-weight: 800; }
.aug-icon { font-size: 2.4rem; }
.augment b { font-size: 1.15rem; }
.aug-desc { font-size: .82rem; color: var(--muted); line-height: 1.45; }
.augment em { font-style: normal; font-weight: 800; color: var(--accent); font-size: .85rem; }
@media (max-width: 560px) { .augments { grid-template-columns: 1fr; } .augment { flex-direction: row; text-align: left; } .aug-icon { font-size: 2rem; } }

.count-row { display: flex; align-items: center; gap: 6px; }
.hp-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
#bgmRow { margin-top: 6px; }
.hp-row span { color: var(--muted); font-size: .85rem; margin-right: 4px; }
.hp-btn { min-width: 58px; font-weight: 800; padding: 7px 0; font-variant-numeric: tabular-nums; }
.hp-btn.sel { border-color: var(--accent); background: #3a3217; }
.count-row span { color: var(--muted); font-size: .85rem; margin-right: 4px; }
.count-btn { flex: 1; font-weight: 800; padding: 8px 0; }
.count-btn.sel { border-color: var(--accent); background: #3a3217; }

.cell.coin::before {
  content: '🪙'; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: calc(var(--cell) * .5); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
  animation: coinSpin 2.4s ease-in-out infinite;
}
.sword-mark { position: absolute; inset: 8%; display: grid; place-items: center; pointer-events: none; border-radius: 50%; background: radial-gradient(color-mix(in srgb, var(--sc) 45%, transparent), transparent 70%); animation: swordGlow 1.6s ease-in-out infinite; }
.sword-mark::before { content: '🗡️'; font-size: calc(var(--cell) * .5); transform: rotate(-35deg); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); }
@keyframes swordGlow { 50% { transform: scale(1.12); opacity: .75; } }
@keyframes coinSpin { 0%, 70%, 100% { transform: scaleX(1); } 80% { transform: scaleX(-1); } 90% { transform: scaleX(1); } }
.brawl-state { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: #3a1f1f; color: #ffc9b0; font-weight: 700; font-size: .88rem; }
.pdoing { font-size: .72rem; color: var(--accent); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-pick button { display: flex; flex-direction: column; gap: 2px; padding: 10px; }
.mode-pick small { color: var(--muted); font-size: .75rem; }
.mode-pick button.sel { border-color: var(--accent); background: #3a3217; }
.lobby-mode { margin: 0; }
@media (prefers-reduced-motion: reduce) { .cell.coin::before { animation: none; } }

/* ---------------- 과목 선택 ---------------- */
.step-label { margin: 12px 0 6px; font-weight: 800; font-size: .9rem; }
.level-card .levels { margin-top: 0; }
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; text-align: center; }
.cat .cat-icon { font-size: 1.4rem; line-height: 1.2; font-weight: 800; }
.cat b { font-size: .9rem; }
.cat small { color: var(--muted); font-size: .7rem; }
.cat.sel { border-color: var(--accent); background: #3a3217; box-shadow: 0 0 0 1px var(--accent) inset; }
.chip.cat-chip { background: #2b3f7a; color: #cfe0ff; }

/* ---------------- 관전 카드 ---------------- */
.spectate {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 5;
  width: min(560px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto;
  background: rgba(23, 30, 49, .94); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); pointer-events: none;
  display: flex; flex-direction: column; gap: 8px; animation: fadeIn .25s;
}
.spec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spec-head b { color: var(--pc); }
.spec-toggle { margin-left: auto; pointer-events: auto; font: inherit; font-size: .78rem; color: var(--text); background: #26304f; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; cursor: pointer; }
.spec-time { font-weight: 800; color: var(--accent); background: rgba(0, 0, 0, .3); border-radius: 8px; padding: 2px 8px; }
.spec-time b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.spec-time.warn { color: #ff5d6c; animation: pulse .5s ease-in-out infinite alternate; }
.spectate.min { width: auto; max-width: calc(100% - 130px); padding: 6px 10px; border-radius: 999px; }
.spectate.min .spec-head { flex-wrap: nowrap; white-space: nowrap; }
.spec-eye { font-size: 1.1rem; }
.spec-wait { margin: 0; color: var(--muted); }
.spec-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.spectate .question { margin: 0; font-size: 1rem; padding: 10px; }
.spectate .timer { margin: 0; }
.spec-choices { gap: 6px; }
.spec-choices .choice { min-height: 44px; padding: 8px; font-size: .95rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.spectate .verdict { font-size: 1.05rem; }
.spec-choices .choice.correct { border-color: var(--ok); background: rgba(61, 220, 132, .18); }
button.choice[data-side] { pointer-events: auto; cursor: pointer; color: inherit; font: inherit; text-align: left; width: 100%; }
button.choice[data-side]:not(:disabled):hover { border-color: var(--accent, #7fd1ff); }
button.choice[data-side]:disabled { opacity: .55; cursor: default; }
.spec-choices .choice.mine { opacity: 1 !important; border-color: #ffcb3d; box-shadow: 0 0 0 2px #ffcb3d55; }
.side-note { margin: 8px 0 0; font-size: .82rem; color: var(--muted, #9aa3b5); line-height: 1.45; }
.side-note.ok { color: var(--ok); font-weight: 700; } .side-note.bad { color: #ff8a8a; }
.spec-choices .choice.wrong { border-color: var(--bad); background: rgba(255, 93, 108, .18); }

/* ---------------- 메뉴 (휴대폰) ---------------- */
.menu-btn { display: none; font-size: 1.2rem; padding: 4px 10px; }
.sound-btn { font-size: 1.05rem; padding: 4px 10px; }
.drawer { position: fixed; inset: 0; z-index: 30; background: rgba(6, 9, 18, .6); display: flex; justify-content: flex-end; }
.drawer-card {
  width: min(340px, 86vw); height: 100%; background: var(--bg2); border-left: 1px solid var(--line);
  padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 14px; display: flex; flex-direction: column; gap: 10px;
  animation: slideIn .2s ease-out;
}
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-actions { display: flex; flex-direction: column; gap: 6px; }
.drawer-actions button { text-align: left; padding: 10px 12px; }
.drawer-card h3 { margin: 6px 0 0; font-size: .85rem; color: var(--muted); }
.drawer-log { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; font-size: .82rem; line-height: 1.45; }
.drawer-log li { padding: 4px 0; border-bottom: 1px dashed var(--line); }
.drawer-log .who { font-weight: 700; color: var(--pc); }

/* ---------------- 반응형 ---------------- */
@media (max-width: 860px) {
  /* 한 화면: 얇은 상단 바 · 남는 공간은 보드 · 아래는 플레이어 칩 + 행동 버튼 */
  #app { height: 100%; }
  .topbar { padding: 4px 8px; gap: 6px; min-height: 40px; }
  .brand { font-size: .95rem; white-space: nowrap; }
  .brand small { display: none; }
  .round { font-size: .7rem; line-height: 1.3; }
  .round .order { display: none; }
  #btnRules, #btnView, #btnLeave, #btnBgm { display: none !important; }
  .menu-btn { display: inline-flex; }
  .layout { flex-direction: column; min-height: 0; }
  .stage { flex: 1 1 auto; min-height: 200px; }
  .compass { width: 30px; height: 30px; top: 6px; right: 6px; }
  .compass .needle { font-size: .65rem; }
  .toast { top: 6px; font-size: .82rem; padding: 6px 12px; }
  .panel {
    width: 100%; flex: 0 0 auto; border-left: 0; border-top: 1px solid var(--line); overflow: visible;
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 6px;
  }
  .panel .log { display: none; }
  .players { flex-direction: row; gap: 4px; }
  .pcard { flex: 1 1 0; min-width: 0; padding: 4px 6px; gap: 4px; border-radius: 9px; border-width: 1.5px; }
  .pemoji { font-size: 1.05rem; }
  .pname { font-size: .7rem; }
  .pname .chip { display: none; }
  .hp { height: 5px; margin-top: 2px; }
  .hpnum { font-size: .72rem; min-width: 0; }
  .score, .pdoing { display: none; }
  .turn { padding: 8px; border-radius: 12px; }
  .turn-head { margin-bottom: 6px; gap: 8px; }
  .turn-head .big { font-size: 1.3rem; }
  .turn-head small { font-size: .7rem; }
  .aim-box { flex-direction: row; align-items: center; gap: 6px; padding: 5px 6px; margin-bottom: 6px; }
  .aim-box small, .aim-row .chip { display: none; }
  .aim-row { font-size: .8rem; white-space: nowrap; }
  .aim-box .rot-btns.four { flex: 1; gap: 4px; }
  .rot-btns.four button { padding: 6px 2px; font-size: .78rem; }
  .actions { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .act, .act.wide { grid-column: auto; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; padding: 8px 4px; min-height: 56px; }
  .act .ai { font-size: 1.25rem; }
  .act b { font-size: .78rem; }
  .act small { display: none; }
  .act br { display: none; }
  .hint { display: none; }
  .brawl-state { margin-top: 6px; padding: 5px 8px; font-size: .78rem; }
  .waiting { padding: 8px 10px; font-size: .85rem; }
  .spectate { top: 6px; padding: 8px 10px; gap: 6px; }
  .spectate .question { font-size: .9rem; padding: 8px; }
  .card { padding: 16px; }
}
@media (max-width: 480px) {
  .choices, .levels, .online-actions, .level-card .levels { grid-template-columns: 1fr; }
  .cats { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 16px; }
  .question { font-size: 1rem; }
}

/* 소리 설정 패널 (🔊) */
.sound-panel {
  position: fixed; top: 58px; right: 12px; z-index: 60; width: min(340px, calc(100vw - 24px));
  background: #151c33; border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5); display: flex; flex-direction: column; gap: 10px;
}
.sp-head { display: flex; align-items: center; justify-content: space-between; }
.sp-close { padding: 2px 10px; }
.sp-master { width: 100%; padding: 9px; border-radius: 10px; font-weight: 700; }
.sp-master.on { background: #4a2330; border-color: #ff8fa3; color: #ffd0da; }
.sp-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--card); }
.sp-row.off { opacity: .55; }
.sp-mute { flex: none; width: 42px; height: 42px; padding: 0; font-size: 1.25rem; border-radius: 12px; }
.sp-body { flex: 1; min-width: 0; }
.sp-label { display: flex; align-items: baseline; gap: 6px; }
.sp-label small { color: var(--muted); font-size: .72rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-val { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .85rem; }
.sp-body input[type=range] { width: 100%; accent-color: #ffc53d; margin: 4px 0 0; }
.sound-panel .small { margin: 0; text-align: center; }
@media (max-width: 860px) { .sound-panel { top: 50px; right: 8px; } }

.fx .guide-times { font-size: .34px; font-weight: 800; fill: #ff5d6c; stroke: #0b1020; stroke-width: .06px; paint-order: stroke; }
.fx .guide.limit { stroke-dasharray: .12 .12; opacity: .55; }
.chip.limit-chip { background: #3d2a14; color: #ffcf8a; }

/* 🧪 실험 모드: 장애물 · 자기장 */
.piece.obst .avatar.ob {
  width: calc(var(--cell) * .92); height: calc(var(--cell) * .92); border: 0; border-radius: 0; background: none; box-shadow: none;
  margin-bottom: 0; font-size: 0; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3));
}
.piece.obst .avatar.ob svg { width: 100%; height: 100%; display: block; }
.cell.zone { box-shadow: inset 0 0 0 999px rgba(255, 40, 80, .38); }
.cell.zone::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255, 80, 110, .35) 0 6%, transparent 6% 12%); animation: zonePulse 1.6s ease-in-out infinite; pointer-events: none; }
.cell.zone-warn { box-shadow: inset 0 0 0 999px rgba(255, 170, 40, .28); }
.cell.zone-warn::after { content: ''; position: absolute; inset: 8%; border: 2px dashed rgba(255, 150, 30, .85); border-radius: 4px; pointer-events: none; }
@keyframes zonePulse { 50% { opacity: .45; } }
.fx .guide-cell.crate-hit { stroke-dasharray: none; stroke-width: .06; fill: rgba(255, 210, 120, .18); }
.exp-check small { color: var(--muted); margin-left: 4px; }
.piece.poisoned .avatar.char { filter: drop-shadow(0 0 3px #7dff6a) drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }
.piece.poisoned .avatar:not(.char) { box-shadow: 0 0 0 3px #7dff6a, 0 4px 10px rgba(0, 0, 0, .45); }
.fx .guide-cell.blink { stroke-dasharray: none; stroke-width: .07; fill: rgba(255, 255, 255, .12); }
.fx .shot.t-drip { stroke-width: .06; stroke-dasharray: .03 .14; }
.fx .imp-smoke .imp-in { animation: impSmoke .6s ease-out forwards; }
@keyframes impSmoke { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.fx .imp-poison .imp-in { animation: impSmoke .7s ease-out forwards; }
.fx .guide-cell.lock { stroke-dasharray: .1 .08; stroke-width: .05; fill: rgba(255, 203, 61, .12); }
.fx .guide-cell.slide { fill: rgba(255, 255, 255, .08); stroke-width: .04; stroke-dasharray: .08 .08; }
.fx .guide-hit.faint { stroke-dasharray: .12 .1; opacity: .6; animation: none; }
.stand .guide-label { position: absolute; top: 0; left: 50%; transform: translate(-50%, -85%); font-weight: 800; font-size: calc(var(--cell) * .3); color: #ff5d6c; text-shadow: 0 0 3px #0b1020, 0 0 3px #0b1020, 0 1px 2px #0b1020; white-space: nowrap; pointer-events: none; }
.nick-row { margin: 6px 0 2px; }
.spectate.min .spec-head .muted { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* 🎮 미니게임 */
.cell .mini-badge { position: absolute; inset: 12%; display: grid; place-items: center; font-size: calc(var(--cell) * .5); border-radius: 22%;
  background: radial-gradient(circle, rgba(181, 123, 255, .55), rgba(77, 141, 255, .25)); box-shadow: 0 0 0 2px rgba(181, 123, 255, .8) inset; pointer-events: none; animation: miniGlow 1.6s ease-in-out infinite; }
@keyframes miniGlow { 50% { box-shadow: 0 0 0 2px rgba(181, 123, 255, .8) inset, 0 0 12px 2px rgba(181, 123, 255, .6); } }
.mini-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(8, 11, 22, .72); backdrop-filter: blur(3px); padding: 16px; }
.mini-overlay[hidden] { display: none; }
.mini-card { width: min(440px, 100%); background: var(--card, #1d2640); border: 1px solid var(--line, #2c3758); border-radius: 18px; padding: 18px; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.mini-card h2 { margin: 4px 0 8px; }
.mini-count { font-size: 4rem; font-weight: 900; color: var(--accent, #ffcc4d); animation: pop .7s ease-out infinite; }
@keyframes pop { from { transform: scale(1.4); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.mini-area { margin: 10px 0; min-height: 190px; display: grid; place-items: center; }
.mini-pad { width: 100%; height: 190px; border-radius: 16px; border: 0; font: inherit; font-size: 1.6rem; font-weight: 900; color: #fff; cursor: pointer; touch-action: manipulation; }
.mini-pad.wait { background: #b8324a; }
.mini-pad.go { background: #22a55b; }
.mini-pad.bad { background: #555b70; }
.mini-q { font-size: 2.2rem; font-weight: 900; margin-bottom: 12px; }
.mini-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.mini-opts button, .mini-grid button, .mini-stop { font: inherit; font-size: 1.4rem; font-weight: 800; padding: 16px 0; border-radius: 12px; border: 1px solid var(--line, #2c3758); background: #26304f; color: var(--text, #e8ecf8); cursor: pointer; touch-action: manipulation; }
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(280px, 100%); }
.mini-grid button.done { background: #1f6b43; color: #b9f5cf; }
.mini-grid button.miss { background: #8a2434; }
.mini-bar { position: relative; width: 100%; height: 44px; border-radius: 22px; background: #26304f; overflow: hidden; margin-bottom: 14px; }
.mini-target { position: absolute; left: 45%; width: 10%; top: 0; bottom: 0; background: rgba(61, 220, 132, .45); }
.mini-marker { position: absolute; top: 4px; bottom: 4px; width: 8px; margin-left: -4px; border-radius: 4px; background: #ffcc4d; left: 0; }
.mini-stop { width: 100%; background: var(--accent, #ffcc4d); color: #1a1a1a; }
.mini-rank { list-style: none; padding: 0; margin: 10px 0 0; text-align: left; display: grid; gap: 6px; }
.mini-rank li { display: grid; grid-template-columns: 28px 1fr auto; gap: 4px 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #222b47; border-left: 4px solid var(--pc); }
.mini-rank li small { grid-column: 2 / 4; color: #3ddc84; }
.mini-rank li:first-child { background: #3a3217; }

/* 직업별 이펙트 구분 */
.fx .shot.t-holy { stroke-width: .16; opacity: .55; filter: drop-shadow(0 0 .12px #ffe07a); }
.fx .shot.t-dust { stroke-width: .14; stroke-dasharray: .06 .16; stroke-linecap: round; opacity: .55; }
.fx .imp-scope .imp-in { animation: impScope .65s ease-out forwards; }
@keyframes impScope { 0% { transform: scale(1.6); opacity: 0; } 35% { transform: scale(.9); opacity: 1; } 75% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
.fx .imp-holy .imp-in { animation: impHoly .7s ease-out forwards; transform-origin: 50% 80%; }
@keyframes impHoly { 0% { transform: scaleY(.2); opacity: 1; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1.05); opacity: 0; } }
.fx .imp-rubble .imp-in, .fx .imp-pellets .imp-in { animation: impSmoke .6s ease-out forwards; }
.fx .imp-sparkle .imp-in { animation: impSpin .7s ease-out forwards; }
.fx .imp-coins .imp-in { animation: impUp .7s ease-out forwards; }
@keyframes impUp { 0% { transform: translateY(.2px) scale(.5); opacity: 1; } 60% { opacity: 1; } 100% { transform: translateY(-.35px) scale(1.15); opacity: 0; } }
.fx .shot.t-chalk { stroke-width: .07; stroke-dasharray: .1 .05 .02 .05; opacity: .85; }
.fx .imp-whoosh .imp-in, .fx .imp-chainwrap .imp-in { animation: impTwirl .65s ease-out forwards; }
@keyframes impTwirl { 0% { transform: scale(.5) rotate(0); opacity: 1; } 65% { opacity: 1; } 100% { transform: scale(1.15) rotate(240deg); opacity: 0; } }
.fx .imp-hoof .imp-in { animation: impHoof .7s ease-out forwards; }
@keyframes impHoof { 0% { transform: scale(1.4); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 75% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.fx .imp-dirt .imp-in { animation: impDirt .75s ease-out forwards; transform-origin: 50% 100%; }
@keyframes impDirt { 0% { transform: scaleY(.2); opacity: 1; } 45% { transform: scaleY(1.1); opacity: 1; } 100% { transform: scaleY(1) translateY(.1px); opacity: 0; } }
.fx .warn { fill: rgba(255, 70, 90, .25); stroke: #ff465a; stroke-width: .05; stroke-dasharray: .12 .08; animation: warnBlink .3s steps(1) infinite; }
@keyframes warnBlink { 50% { opacity: .35; } }

/* 🗺️ 맵 미니게임 */
.mini-card.wide { width: min(720px, 100%); max-height: calc(100vh - 24px); overflow-y: auto; }
.sc { display: inline-block; width: 44px; height: 52px; vertical-align: bottom; position: relative; }
.sc svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sc .emo { font-style: normal; font-size: 30px; line-height: 52px; }
.choice-cast { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; margin-top: 8px; min-height: 52px; }
.choice-cast.big .sc { width: 58px; height: 68px; }
/* 🏁 장애물 달리기 */
.race-hud { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.race-time { font-variant-numeric: tabular-nums; font-weight: 800; }
.race-combo { color: #ffb35c; font-weight: 900; }
.race { display: grid; gap: 4px; user-select: none; -webkit-user-select: none; touch-action: manipulation; cursor: pointer; }
.lane { position: relative; height: 76px; overflow: hidden; border-radius: 10px; background: linear-gradient(#2b3a63, #1f2a48); }
.lane.me { box-shadow: 0 0 0 2px var(--accent, #ffcc4d) inset; background: linear-gradient(#34457a, #26335a); }
.lane.idle .sc { opacity: .45; }
.lane .track { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: repeating-linear-gradient(90deg, #b8643c 0 36px, #c9744a 36px 72px); }
.lane-tag { position: absolute; left: 6px; top: 3px; font-size: .72rem; font-weight: 800; z-index: 3; text-shadow: 0 1px 2px #000; pointer-events: none; }
.lane .ob { position: absolute; left: 0; bottom: 14px; will-change: transform; }
.lane .ob-hurdle { height: 22px; border: 3px solid #f4f1e0; border-bottom: 0; border-radius: 3px 3px 0 0; box-sizing: border-box; background: linear-gradient(#ff5d6c 0 6px, transparent 6px); transition: height .15s, opacity .15s; }
.lane .ob-hurdle.down { height: 7px; opacity: .55; }
.lane .ob-pit { bottom: 0; height: 15px; background: #0b1020; border-radius: 5px 5px 0 0; box-shadow: inset 0 3px 0 #05070f; }
.lane .ob-boost { height: 5px; bottom: 14px; background: #3ddc84; border-radius: 3px; box-shadow: 0 0 8px #3ddc84; }
.lane .ob-boost::after { content: '⚡'; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font-size: 12px; }
.lane .ob.finish { top: 0; bottom: 14px; width: 8px; background: repeating-linear-gradient(#fff 0 8px, #151827 8px 16px); }
.lane .sc { position: absolute; left: 0; bottom: 10px; z-index: 2; width: 40px; height: 48px; will-change: transform; }
.lane .sc.running svg { animation: runBob .28s ease-in-out infinite; }
@keyframes runBob { 50% { transform: translateY(-3px) rotate(4deg); } }
.race-pop { position: absolute; left: 30%; top: 4px; z-index: 4; font-weight: 900; color: #fff; text-shadow: 0 1px 3px #000; animation: impUp .7s ease-out forwards; pointer-events: none; }
.race-bar { height: 6px; background: #26304f; border-radius: 3px; margin: 8px 0; overflow: hidden; }
.race-bar i { display: block; height: 100%; width: 0; background: var(--accent, #ffcc4d); }
.race-jump { width: 100%; font: inherit; font-size: 1.3rem; font-weight: 900; padding: 18px 0; border-radius: 14px; border: 0; background: var(--accent, #ffcc4d); color: #1a1a1a; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.race-jump:active { transform: translateY(2px); }
/* 🙈 🌉 🧠 동시에 고르기 */
.choice-card .eyebrow { margin-bottom: 4px; }
.choice-who { font-weight: 800; margin: 10px 0 8px; }
.choice-msg { font-weight: 900; font-size: 1.05rem; margin: 8px 0 4px; }
.choice-btns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.choice-btns.two { grid-template-columns: 1fr 1fr; }
.choice-btns button, .tt-step button { font: inherit; font-size: 1.4rem; font-weight: 900; padding: 14px 0; border-radius: 12px; border: 1px solid var(--line, #2c3758); background: #26304f; color: var(--text, #e8ecf8); cursor: pointer; touch-action: manipulation; }
.choice-btns.two button { font-size: 1.1rem; }
.choice-btns button.sel { background: var(--accent, #ffcc4d); color: #1a1a1a; }
.choice-btns button:disabled:not(.sel) { opacity: .35; }
.choice-timer { height: 6px; background: #26304f; border-radius: 3px; overflow: hidden; margin-top: 10px; }
.choice-timer i { display: block; height: 100%; width: 100%; background: var(--accent, #ffcc4d); animation: timerBar var(--t) linear forwards; }
@keyframes timerBar { to { width: 0; } }
.choice-scores { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }

.choice-scores > span { display: inline-flex; align-items: center; gap: 4px; background: #222b47; border-radius: 999px; padding: 2px 10px 2px 4px; border-left: 3px solid var(--pc); font-size: .85rem; }
.choice-scores > span.picked::after { content: '✔'; color: #3ddc84; font-weight: 900; }
.nunchi { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 8px 0; }
.pad { min-height: 118px; border-radius: 12px; background: #26304f; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 6px 2px; }
.pad b { font-size: 1.6rem; font-weight: 900; }
.pad em { font-style: normal; font-weight: 900; font-size: .85rem; }
.pad.ok { background: #1f5a3a; }
.pad.ok em { color: #9dffc4; }
.pad.clash { background: #6b2231; animation: padShake .45s; }
.pad.clash em { color: #ffb3bd; }
@keyframes padShake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.pad-chars { display: flex; flex-wrap: wrap; justify-content: center; }
.pad-chars .sc { width: 32px; height: 38px; }
.bridge { display: grid; grid-template-columns: 1.3fr repeat(6, 1fr) 1.3fr; grid-template-rows: 60px 60px 40px; gap: 4px; margin: 8px 0; }
.bridge .plat { grid-row: 1 / span 2; background: #3b4466; border-radius: 10px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-size: 1.2rem; }
.bridge .glass { background: linear-gradient(135deg, rgba(170, 225, 255, .6), rgba(90, 150, 220, .3)); border: 1px solid rgba(200, 240, 255, .75); border-radius: 6px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; }
.bridge .glass.now { box-shadow: 0 0 0 2px var(--accent, #ffcc4d), 0 0 12px rgba(255, 204, 77, .5); }
.bridge .glass.broken { background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(200, 240, 255, .18) 6px 8px); border-style: dashed; border-color: rgba(200, 240, 255, .35); }
.bridge .water { grid-row: 3; background: linear-gradient(#2a6fb0, #173e68); border-radius: 6px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; overflow: hidden; }
.bridge .sc { width: 26px; height: 32px; }
.bridge .water .sc { width: 20px; height: 26px; margin: 0 -3px; }
.bridge .plat .sc { width: 30px; height: 36px; }
.tt-line { position: relative; height: 150px; margin: 22px 12px 26px; border-bottom: 3px solid #8d95a6; }
.tt-lab { position: absolute; bottom: -22px; transform: translateX(-50%); font-size: .75rem; color: #8d95a6; }
.tt-mark { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; line-height: 1; }
.tt-mark .sc { width: 32px; height: 38px; }
.tt-mark small { font-weight: 900; font-size: .78rem; background: #151827; border-radius: 6px; padding: 1px 4px; }
.tt-mark em { font-style: normal; color: #3ddc84; font-weight: 900; font-size: .8rem; }
.tt-target { position: absolute; top: 0; bottom: -6px; width: 3px; background: #3ddc84; transform: translateX(-50%); box-shadow: 0 0 8px #3ddc84; }
.tt-target span { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #3ddc84; font-weight: 900; font-size: .85rem; }
.tt-old { position: absolute; bottom: 0; height: 24px; width: 2px; background: rgba(61, 220, 132, .45); transform: translateX(-50%); }
.tt-old span { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: .65rem; color: rgba(61, 220, 132, .8); font-style: normal; }
.tt-pick { display: grid; gap: 8px; }
.tt-val { font-size: 2.4rem; font-weight: 900; }
.tt-range { width: 100%; accent-color: var(--accent, #ffcc4d); }
.tt-step { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tt-step button { font-size: 1.05rem; padding: 10px 0; }

/* 시작(타이틀) 화면 */
.setup-card { gap: 16px; }
.title-hero { display: grid; justify-items: center; gap: 6px; padding-top: 4px; }
.setup-card h1.logo { font-size: clamp(2.6rem, 9vw, 3.6rem); font-weight: 900; letter-spacing: -.02em; line-height: 1;
  background: linear-gradient(180deg, #fff 30%, #ffcc4d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #0b1020); }
.tagline { color: var(--muted, #9aa3bd); font-weight: 700; }
.hero-cast { display: flex; justify-content: center; align-items: flex-end; gap: 2px; height: 96px; margin-top: 4px; padding: 0 8px;
  background: linear-gradient(transparent 70%, rgba(255, 255, 255, .04) 70%); border-bottom: 3px solid rgba(255, 255, 255, .08); }
.hero-ch { width: 68px; height: 84px; cursor: pointer; transform: translateY(calc(var(--i) * 0px)); }
.hero-ch:nth-child(odd) { height: 90px; }
.hero-ch svg { width: 100%; height: 100%; display: block; overflow: visible; }
.title-menu { display: grid; gap: 10px; }
.menu-btn { display: grid; gap: 2px; padding: 16px 12px; font-size: 1.2rem; font-weight: 900; }
.menu-btn small { font-size: .8rem; font-weight: 600; opacity: .75; }
.title-panel .panel-head { display: flex; align-items: center; gap: 8px; }
.back-btn { padding: 6px 10px; font-size: .9rem; }
.setup.in-panel .title-hero, #setup.in-panel .hero-cast { display: none; }
#setup.in-panel .title-hero { display: grid; }
#setup.in-panel .title-hero .logo { font-size: 1.8rem; }
#setup.in-panel .tagline { display: none; }
.opts { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; text-align: left; }
.opts summary { cursor: pointer; font-weight: 800; list-style: none; display: flex; gap: 8px; align-items: baseline; }
.opts summary::before { content: '⚙'; }
.opts summary::-webkit-details-marker { display: none; }
.opts summary small { color: var(--muted, #9aa3bd); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.opts[open] summary { margin-bottom: 10px; }
.opts-body { display: grid; gap: 8px; }
.opts-body .check small { display: block; color: var(--muted, #9aa3bd); margin-left: 26px; }
.title-foot { font-size: .8rem; color: var(--muted, #9aa3bd); }
.title-foot a { color: inherit; }
.opts-body .check { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; text-align: left; }
.opts-body .check small { grid-column: 2; margin-left: 0; }
.opts-body .hp-row { justify-content: flex-start; flex-wrap: wrap; }
@media (max-width: 480px) { .hero-ch { width: 54px; height: 70px; } .hero-ch:nth-child(odd) { height: 76px; } .hero-cast { height: 80px; } }
.aug-ch { width: 72px; height: 84px; display: block; flex: none; }
.aug-ch svg { width: 100%; height: 100%; display: block; overflow: visible; }
@media (max-width: 560px) { .aug-ch { width: 56px; height: 66px; } }

/* 🏠 공방 목록 */
#btnPublic { display: grid; gap: 2px; padding: 12px; font-weight: 900; font-size: 1.05rem; }
#btnPublic small { font-size: .78rem; font-weight: 600; opacity: .75; }
.panel-head .small { margin-left: auto; }
.pub-list { display: grid; gap: 6px; max-height: min(46vh, 360px); overflow-y: auto; }
.pub-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #222b47; color: var(--text); font: inherit; cursor: pointer; }
.pub-row:hover:not(:disabled) { border-color: var(--accent, #ffcc4d); }
.pub-row:disabled { opacity: .55; cursor: default; }
.pub-main { display: grid; min-width: 0; }
.pub-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-main small { color: var(--muted, #9aa3bd); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-n { font-weight: 900; font-variant-numeric: tabular-nums; }
.pub-st { font-size: .8rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--accent, #ffcc4d); color: #1a1a1a; }
.pub-st.off { background: #3b4466; color: var(--muted, #9aa3bd); }
.pub-empty { text-align: center; padding: 18px 0; }
.pub-make { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.pub-make input { min-width: 0; }
.pub-make { grid-template-columns: 1fr; }
.pub-opts { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.pub-opts select, .pub-opts input { min-width: 0; font: inherit; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: #151b30; color: var(--text); }
.seat-x.kick { width: auto; padding: 2px 8px; font-size: .75rem; }
.lobby-card .exp-check { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; text-align: left; }
.lobby-card .exp-check small { grid-column: 2; }

/* 💥 피니시 컷인 */
/* ---------- 컷인 ---------- */
  .cutin { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
  .cutin.on { pointer-events: auto; cursor: pointer; }
  .ci-dim { position: absolute; inset: 0; background: rgba(5, 7, 14, .78); opacity: 0; }
  .ci-band { position: absolute; left: -10%; right: -10%; top: 50%; height: min(58vh, 460px); transform: translate(-130%, -50%) skewY(-9deg);
    background: linear-gradient(100deg, var(--ci2) 0 18%, var(--ci) 18% 19.5%, var(--ci2) 19.5% 100%); overflow: hidden; box-shadow: 0 0 0 6px #fff, 0 0 0 10px #151827; }
  .ci-lines { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg at 30% 50%, rgba(255,255,255,.14) 0 1.2deg, transparent 1.2deg 7deg); animation: spin 6s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .ci-motif { position: absolute; right: 14%; top: 50%; width: min(52vh, 420px); aspect-ratio: 1; transform: translateY(-50%) skewY(9deg); opacity: .5; }
  .ci-char { position: absolute; left: 13%; bottom: -14%; z-index: 1; height: 128%; aspect-ratio: .86; transform: skewY(9deg) rotate(-7deg) scale(1.5); transform-origin: 50% 90%; filter: drop-shadow(10px 10px 0 rgba(0,0,0,.45)); opacity: 0; }
  .ci-char svg { width: 100%; height: 100%; overflow: visible; display: block; }
  .ci-text { position: absolute; right: 15%; top: 50%; z-index: 2; transform: translateY(-50%) skewY(9deg); text-align: right; }
  .ci-text small { display: block; font-weight: 900; font-size: clamp(.9rem, 2.6vw, 1.2rem); color: #fff; opacity: 0; letter-spacing: .08em; }
  .ci-text b { display: block; font-size: clamp(2.4rem, 10vw, 5.6rem); font-weight: 1000; font-style: italic; letter-spacing: -.05em; line-height: 1; color: #fff;
    -webkit-text-stroke: 2px #151827; text-shadow: 5px 5px 0 var(--ci), 10px 10px 0 #151827; opacity: 0; transform: scale(2.2); }
  .ci-text em { display: inline-block; margin-top: 8px; padding: 4px 14px; font-style: normal; font-weight: 1000; font-size: clamp(1rem, 3.2vw, 1.6rem); background: #fff; color: var(--ci2); transform: rotate(-4deg) scale(0); }
  .ci-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }

  .cutin.on .ci-dim { animation: dimIn 1.35s forwards; }
  @keyframes dimIn { 0% { opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
  .cutin.on .ci-band { animation: bandIn 1.35s cubic-bezier(.2, .9, .2, 1) forwards; }
  @keyframes bandIn { 0% { transform: translate(-130%, -50%) skewY(-9deg); } 16% { transform: translate(0, -50%) skewY(-9deg); } 80% { transform: translate(2%, -50%) skewY(-9deg); } 100% { transform: translate(130%, -50%) skewY(-9deg); } }
  .cutin.on .ci-char { animation: charIn 1.35s cubic-bezier(.2, 1.2, .3, 1) forwards; }
  @keyframes charIn { 0% { opacity: 0; transform: skewY(9deg) rotate(-7deg) scale(1.9) translateX(-30%); filter: blur(6px) drop-shadow(10px 10px 0 rgba(0,0,0,.45)); }
    22% { opacity: 1; transform: skewY(9deg) rotate(-7deg) scale(1.12); filter: blur(0) drop-shadow(10px 10px 0 rgba(0,0,0,.45)); }
    80% { opacity: 1; transform: skewY(9deg) rotate(-5deg) scale(1.18); } 100% { opacity: 1; transform: skewY(9deg) rotate(-5deg) scale(1.18); } }
  .cutin.on .ci-text small { animation: fadeIn .2s .22s forwards; }
  .cutin.on .ci-text b { animation: slam .35s .28s cubic-bezier(.2, 1.5, .4, 1) forwards; }
  @keyframes slam { to { opacity: 1; transform: scale(1); } }
  .cutin.on .ci-text em { animation: stamp .25s .62s cubic-bezier(.2, 1.8, .4, 1) forwards; }
  @keyframes stamp { to { transform: rotate(-4deg) scale(1); } }
  @keyframes fadeIn { to { opacity: 1; } }
  .cutin.on .ci-flash { animation: flash 1.35s forwards; }
  @keyframes flash { 0%, 76% { opacity: 0; } 80% { opacity: .9; } 100% { opacity: 0; } }
  .cutin.on .ci-motif { animation: motif 1.35s forwards; }
  @keyframes motif { 0% { transform: translateY(-50%) skewY(9deg) scale(1.6) rotate(-30deg); opacity: 0; } 25% { transform: translateY(-50%) skewY(9deg) scale(1) rotate(0); opacity: .5; } 100% { transform: translateY(-50%) skewY(9deg) scale(.95) rotate(8deg); opacity: .5; } }

  /* 세로 화면: 캐릭터는 왼쪽 아래로 조금 잘리게, 기술 이름은 오른쪽 아래에 겹쳐서 */
  @media (max-aspect-ratio: 1/1) {
    .ci-band { height: min(62vh, 520px); }
    .ci-char { height: 96vw; left: 4%; bottom: -10%; }
    .ci-text { top: auto; bottom: 12%; transform: skewY(9deg); right: 19%; }
    .ci-text b { font-size: 10.5vw; }
    .ci-motif { width: 70vw; right: 6%; top: 36%; }
  }
  .ko-text { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(2.4); font-size: clamp(3rem, 14vw, 7rem); font-weight: 1000; font-style: italic; letter-spacing: -.04em; color: #fff;
    -webkit-text-stroke: 3px #151827; text-shadow: 6px 6px 0 var(--ci); opacity: 0; pointer-events: none; z-index: 79; }
  .ko-text.on { animation: koPop 1.3s cubic-bezier(.2, 1.4, .4, 1) forwards; }
  @keyframes koPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.4) rotate(-8deg); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-8deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05) rotate(-8deg); } }

.cutin { --ci: #ff5a5f; --ci2: #2a0d14; }
.ci-emo { font-size: 30vh; display: grid; place-items: center; height: 100%; }

/* 공방 목록: 화면 전체 */
#setup.in-public { padding: 0; }
#setup.in-public .setup-card { width: 100%; max-width: 1100px; height: 100dvh; max-height: none; border-radius: 0; border-width: 0 1px; padding: 14px 16px 16px; gap: 10px; overflow: hidden; }
#setup.in-public .title-hero, #setup.in-public .opts, #setup.in-public .title-foot { display: none; }
#setup.in-public #panelPublic { flex: 1; min-height: 0; border: 0; padding: 0; }
#setup.in-public #panelPublic .mode-title { font-size: 1.3rem; }
#setup.in-public .pub-list { flex: 1; max-height: none; min-height: 0; align-content: start; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 8px; padding-right: 2px; }
#setup.in-public .pub-row { padding: 14px 14px; }
#setup.in-public .pub-main b { font-size: 1.05rem; }
#setup.in-public .pub-make { border-top: 1px solid var(--line); padding-top: 10px; grid-template-columns: 1fr; }
@media (min-width: 720px) { #setup.in-public .pub-make { grid-template-columns: 1fr auto auto; align-items: center; } #setup.in-public .pub-opts { grid-template-columns: auto 180px; } }

/* 📱 UI 다듬기 */
.handover-card .ho-emoji .mini-ch { width: 72px; height: 72px; }
.handover-card p { margin: 4px 0; }
.handover-card .ho-round { color: var(--muted); font-size: .9rem; }
.handover-card .ho-pass { font-size: 1.05rem; }
.handover-card .ho-stats { color: var(--muted); font-size: .85rem; margin-bottom: 12px; }
@media (max-width: 560px) {
  /* 직업 고르기: 왼쪽 그림, 오른쪽에 이름 · 설명 · 피해 */
  .augment { display: grid; grid-template-columns: 58px 1fr; grid-template-areas: "ch name" "ch desc" "ch dmg"; column-gap: 12px; row-gap: 2px; align-items: start; text-align: left; padding: 12px; }
  .augment .aug-ch, .augment .aug-icon { grid-area: ch; align-self: center; width: 58px; height: 68px; }
  .augment b { grid-area: name; font-size: 1.05rem; }
  .augment .aug-desc { grid-area: desc; font-size: .8rem; }
  .augment em { grid-area: dmg; font-size: .8rem; }
  .augment .aug-key { left: 8px; top: 6px; }
  /* 난이도: 세 개를 한 줄에, 긴 설명은 줄인다 */
  .level-card .levels { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .level-card .level { padding: 10px 4px; gap: 2px; }
  .level-card .level b { font-size: 1.05rem; }
  .level-card .level span { font-size: .72rem; }
  .level-card .level em { font-size: .8rem; }
  .level-card .level small { display: none; }
  .level-card .level small:last-child { display: block; font-size: .7rem; }
  .level-card .cats { gap: 6px; }
  #roundInfo .prep, #roundInfo .order { display: none; }
}
.rules .tldr { background: #1f2a4a; border: 1px solid var(--accent, #ffcc4d); border-radius: 12px; padding: 12px 14px; margin: 8px 0 14px; }
.rules .tldr b:first-child { color: var(--accent, #ffcc4d); }
.rules .tldr ol { margin: 6px 0 0; padding-left: 1.2em; display: grid; gap: 4px; }
.logo-en { margin: -2px 0 0 !important; font-weight: 900; letter-spacing: .5em; font-size: .8rem; color: var(--accent, #ffcc4d); opacity: .8; padding-left: .5em; }
#setup.in-panel .logo-en { display: none; }

/* ================================================================== */
/*  디자인 정리 (정식 출시 준비): 한 가지 규칙으로 통일                   */
/*  - 면은 단색, 테두리 1px + 안쪽 금색 선. 그라데이션·흐림·네온은 뺀다   */
/*  - 강조색(금색)은 선택 상태·주 버튼·중요한 수치에만                     */
/*  - 라운드 6px / 10px 두 가지, 간격 4의 배수                            */
/* ================================================================== */
:root {
  --bg: #0b1016;
  --bg2: #111922;
  --card: #16202b;
  --line: #273443;
  --frame: #c9a45c;          /* 금색 테두리 */
  --frame-dim: #5a4a2c;
  --text: #ebe4d2;
  --muted: #8c96a5;
  --accent: #c9a45c;
  --radius: 8px;
  --r-s: 4px;
  --head: 'Gowun Batang', 'Noto Serif KR', serif;
  --gold-hi: #ecd08f;
}
body { font-family: 'Noto Sans KR', 'Pretendard', 'Apple SD Gothic Neo', system-ui, sans-serif; }
.count-btn.sel, .hp-btn.sel { color: var(--gold-hi); }
body { background: var(--bg); }
button { border-radius: var(--r-s); border-color: var(--line); background: var(--card); }
button:hover:not(:disabled) { border-color: var(--frame); background: #1d2938; }
button:active:not(:disabled) { transform: translateY(1px); }
button.primary { background: var(--accent); color: #1a1307; border: 1px solid #ecd08f; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
button.primary:hover:not(:disabled) { background: #d8b36a; border-color: #fff0c4; }
button.ghost { background: transparent; border-color: var(--line); color: var(--muted); }
button.ghost:hover:not(:disabled) { color: var(--text); background: transparent; }

.topbar { background: var(--bg2); backdrop-filter: none; border-bottom: 1px solid var(--frame-dim); }
.brand { font-family: var(--head); letter-spacing: 0; }
.panel { background: var(--bg2); border-left: 1px solid var(--frame-dim); }

/* 모달: 판은 확실히 뒤로 물러나고, 한 번에 결정 하나 */
.overlay { background: rgba(5, 8, 12, .82); backdrop-filter: none; }
.card {
  background: var(--bg2); border: 1px solid var(--frame); border-radius: var(--radius);
  box-shadow: 0 0 0 4px var(--bg2), 0 0 0 5px var(--frame-dim), 0 24px 60px rgba(0, 0, 0, .6);
  animation: rise .18s ease-out;
}
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }
.card h2 { font-family: var(--head); font-weight: 700; letter-spacing: 0; }
.overlay.dock .card { box-shadow: 0 0 0 1px var(--frame-dim), 0 -8px 30px rgba(0, 0, 0, .5); }

/* 타이틀 */
.setup-card h1.logo { background: none; -webkit-background-clip: initial; background-clip: initial; color: #ecd08f; filter: none;
  font-family: var(--head); font-weight: 700; text-shadow: 0 2px 0 #3a2c0f; }
.tagline { font-weight: 600; }
.hero-cast { background: none; border-bottom: 1px solid var(--frame-dim); }
.menu-btn { font-family: var(--head); font-weight: 700; font-size: 1.15rem; padding: 14px 12px; }
.menu-btn small { font-family: inherit; font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; font-weight: 500; opacity: .7; }
.opts { border-radius: var(--r-s); background: var(--card); }
.setup-row { border-radius: var(--r-s); border-left-width: 3px; }
.setup-row input { background: var(--bg); border-radius: var(--r-s); }
.count-btn.sel, .hp-btn.sel { background: rgba(226, 184, 87, .14); border-color: var(--accent); color: var(--accent); }

/* 차례 넘기기: 색 띠는 얇게, 캐릭터가 주인공 */
.handover-card { border-top: 1px solid var(--frame); box-shadow: 0 0 0 4px var(--bg2), 0 0 0 5px var(--pc), 0 24px 60px rgba(0, 0, 0, .6); }
.handover-card .ho-emoji { animation: none; }
.handover-card h2 { font-size: 1.7rem; }

/* 선택 카드 (증강 · 난이도): 아이콘 → 제목 → 짧은 설명, 모두 같은 높이 */
.augments { gap: 14px; }
.augment {
  border: 1px solid var(--frame-dim); border-radius: var(--radius); background: var(--card);
  box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px rgba(184, 151, 90, .25); padding: 20px 14px 16px; gap: 8px;
}
.augment:hover:not(:disabled) { border-color: var(--accent); background: #1d2938; box-shadow: inset 0 0 0 3px #1d2938, inset 0 0 0 4px rgba(226, 184, 87, .6); }
.aug-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1px solid var(--frame); font-size: 2rem; }
.augment b { font-family: var(--head); font-weight: 700; }
.level { border-radius: var(--radius); }
.level.easy, .level.hard { border-color: var(--line); }
.level.killer { background: var(--card); border-color: #8a3a1c; }
.level:hover:not(:disabled) { border-color: var(--accent); }
.level b { font-family: var(--head); }

/* 기록 · 로그 */
.log li { border-bottom: 1px solid rgba(42, 55, 71, .6); }
.timer { background: var(--bg); border: 1px solid var(--line); }
.timer-fill { background: var(--accent); }
.timer-fill.warn { background: var(--bad); }
.mini-overlay { background: rgba(5, 8, 12, .82); backdrop-filter: none; }
@media (max-width: 560px) { .aug-icon { width: 48px; height: 48px; font-size: 1.6rem; flex-shrink: 0; } }

/* 패널: 플레이어 카드 · 내 차례 (시안 규칙) */
.pcard { border-radius: var(--r-s); border: 1px solid transparent; background: transparent; }
.pcard.active { border-color: var(--frame-dim); background: var(--card); box-shadow: inset 3px 0 0 var(--pc); }
.pemoji { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--pc); background: var(--bg); overflow: hidden; font-size: 1.2rem; flex-shrink: 0; }
.hp { height: 6px; border-radius: 3px; background: #0a0f15; }
.score { color: var(--muted); }
.turn { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.act { border-radius: var(--r-s); }
.act.free { border-style: solid; border-color: var(--frame-dim); }
.fast { background: rgba(201, 164, 92, .12); color: var(--gold-hi); border-radius: var(--r-s); }
.chip { border-radius: var(--r-s); font-weight: 700; background: transparent; border: 1px solid var(--line); color: var(--muted); }
.chip.easy, .chip.free-chip { background: transparent; border-color: #2f6a4a; color: #8fd9ad; }
.chip.hard { background: transparent; border-color: #6b2c44; color: #f0a9c0; }
.chip.killer { background: transparent; border-color: #7a3a1c; color: #f0a07a; }
.chip.extra, .chip.host { background: transparent; border-color: var(--frame-dim); color: var(--gold-hi); }
.chip.cat-chip, .chip.me { background: transparent; border-color: #2c4470; color: #a9c2ee; }
.topbar button { background: transparent; border-color: transparent; color: var(--muted); }
.topbar button:hover:not(:disabled) { color: var(--text); border-color: var(--line); background: transparent; }

/* 선 아이콘 (이모지 대신) */
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -4px; }
.ico.sm { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.act .ai { display: grid; place-items: center; color: var(--frame); }
.act .ai .ico { width: 22px; height: 22px; }
.act:disabled .ai { color: var(--muted); }
.cat-icon { display: grid; place-items: center; color: var(--frame); }
.cat-icon .ico { width: 24px; height: 24px; }
.cat.sel .cat-icon, .cat:hover .cat-icon { color: var(--gold-hi); }
h2.with-ico { display: flex; align-items: center; gap: 10px; }
h2.with-ico .ico { width: 26px; height: 26px; color: var(--frame); }
.topbar .ico { width: 20px; height: 20px; }

/* 직업 고르기 카드 (시안): 초상 → 이름 → 역할 → 규칙 → 피해 수치 */
.augment-card { text-align: center; width: min(760px, 100%); }
.augment-card .eyebrow { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: var(--frame); }
.augment-card .pick-title { margin: 4px 0 2px; font-size: 1.5rem; }
.augment-card .pick-sub { margin: 0; font-size: .85rem; }
.augment { justify-content: flex-start; gap: 4px; }
.augment .aug-ch { width: 92px; height: 92px; border-radius: 50%; border: 1px solid var(--frame); background: var(--bg); overflow: hidden; margin-bottom: 8px; }
.augment .aug-ch svg { width: 88%; height: 88%; margin: 8% auto 0; }
.augment b { font-size: 1.2rem; }
.aug-role { font-size: .75rem; font-weight: 700; color: var(--frame); letter-spacing: .04em; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--frame-dim); width: 70%; }
.aug-desc { font-size: .8rem; line-height: 1.55; flex: 1; }
.aug-stat { display: flex; justify-content: center; gap: 14px; margin-top: 10px; font-size: .72rem; color: var(--muted); }
.aug-stat span { display: flex; flex-direction: column; align-items: center; }
.aug-stat strong { font-size: 1rem; font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .augment { grid-template-areas: "ch name" "ch role" "ch desc" "ch dmg"; }
  .augment .aug-ch { width: 58px; height: 58px; margin: 0; align-self: start; }
  .aug-role { grid-area: role; width: auto; border: 0; padding: 0; margin: 0; }
  .aug-stat { grid-area: dmg; justify-content: flex-start; margin-top: 6px; }
  .aug-stat span { flex-direction: row; gap: 4px; align-items: baseline; }
}
.aug-stat strong { white-space: nowrap; }
.aug-stat span { white-space: nowrap; }
@media (max-width: 560px) {
  .augment { grid-template-columns: 58px minmax(0, 1fr); }
  .augment > * { min-width: 0; }
  .aug-stat { flex-wrap: wrap; gap: 2px 12px; }
}

/* 문제 화면 (시안): 태그 줄 → 얇은 시간 막대 → 큰 문제 → 보기 4개 */
.quiz-head { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.quiz-head .topic { font-family: var(--head); }
.timer { height: 4px; border: 0; border-radius: 2px; margin: 0 0 16px; }
.timer-label, .timer span { font-size: .7rem; }
.question { background: transparent; border: 0; padding: 6px 2px 4px; font-size: 1.2rem; }
.choice { background: var(--card); border-radius: var(--r-s); min-height: 56px; }
.choice .key { border-radius: 50%; background: transparent; border: 1px solid var(--line); color: var(--muted); }
.choice:hover:not(:disabled) .key { border-color: var(--frame); color: var(--gold-hi); }
.choice.correct { background: #14261c; border-color: #4fb37a; }
.choice.wrong { background: #2a1519; border-color: #c2505a; }
.choice-btns button, .tt-step button { border-radius: var(--r-s); background: var(--card); }
.choice-btns button.sel { background: var(--accent); color: #1a1307; }
.choice-scores > span { background: var(--card); border-radius: var(--r-s); }
.timer { overflow: visible; margin-top: 14px; }
.timer-fill { border-radius: 2px; }
.timer-num { top: -16px; right: 0; color: var(--muted); text-shadow: none; font-variant-numeric: tabular-nums; }

/* 게임 화면 배치 (시안, 넓은 화면): 왼쪽 플레이어 · 가운데 판 · 오른쪽 내 차례 + 기록 */
@media (min-width: 1100px), (min-width: 900px) and (orientation: landscape) {
  .layout { display: grid; grid-template-columns: 230px minmax(0, 1fr) 320px; grid-template-rows: auto minmax(0, 1fr); }
  .layout > .stage { grid-column: 2; grid-row: 1 / span 2; }
  .layout > .panel { display: contents; }
  #playerList { grid-column: 1; grid-row: 1 / span 2; padding: 12px 10px; gap: 4px; overflow-y: auto; background: var(--bg2); border-right: 1px solid var(--line); }
  #turnPanel { grid-column: 3; grid-row: 1; margin: 12px 12px 0; }
  .layout .log { grid-column: 3; grid-row: 2; min-height: 0; margin: 12px 0 0; padding: 0 12px 12px; border-top: 1px solid var(--line); }
  #turnPanel, .layout .log { border-left: 0; }
  .layout::after { content: ''; grid-column: 3; grid-row: 1 / span 2; background: var(--bg2); border-left: 1px solid var(--line); z-index: -1; }
  .layout { position: relative; isolation: isolate; }
  .layout .log ol { flex: 1; min-height: 0; }
}
#playerList::before { content: '플레이어'; display: block; padding: 2px 6px 8px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--frame); }
.log h3 { padding-top: 10px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--frame); }
@media (max-width: 1099px) and (orientation: portrait), (max-width: 899px) { #playerList::before { display: none; } }
/* 관전 카드도 같은 규칙 */
.spectate { background: var(--bg2); border: 1px solid var(--frame-dim); border-radius: var(--radius); backdrop-filter: none; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.spectate.min { border-radius: 999px; }
.spectate .timer { margin-top: 12px; }
/* 규칙 · 소리 설정: 이모지 대신 선 아이콘, 직업표엔 초상 */
.rules .ico.sm, .sound-panel .ico.sm { color: var(--frame); }
.rule-ch { display: inline-block; width: 26px; height: 30px; vertical-align: middle; margin-right: 6px; }
.rule-ch svg { width: 100%; height: 100%; display: block; }
.sound-panel { background: var(--bg2); border: 1px solid var(--frame-dim); border-radius: var(--radius); }
.sp-mute { display: grid; place-items: center; color: var(--frame); }
.sp-row.off .sp-mute { color: var(--muted); }
.sp-close { display: grid; place-items: center; }

/* 타이틀 (시안): 넓은 화면은 왼쪽 캐릭터 무대 · 오른쪽 로고와 메뉴 */
.menu-btn .mb-t { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.menu-btn .ico { width: 20px; height: 20px; }
.menu-btn:not(.primary) .ico { color: var(--frame); }
@media (min-width: 900px) and (min-height: 560px) {
  #setup:not(.in-panel) .setup-card { width: min(940px, 100%); padding: 0; display: grid; grid-template-columns: 1.05fr .95fr; grid-auto-rows: min-content; column-gap: 0; row-gap: 14px; align-content: center; overflow: hidden; text-align: left; }
  #setup:not(.in-panel) .title-hero { display: contents; }
  #setup:not(.in-panel) .hero-cast { grid-column: 1; grid-row: 1 / span 20; align-self: stretch; height: auto; min-height: 440px; margin: 0; padding: 0 24px 70px; gap: 0; align-items: flex-end;
    border: 0; border-right: 1px solid var(--frame-dim);
    background: radial-gradient(ellipse at 50% 115%, #2a2016, transparent 62%),
      conic-gradient(#2b2219 25%, #1d1712 0 50%, #2b2219 0 75%, #1d1712 0) 0 100% / 56px 56px no-repeat, var(--bg); background-size: auto, 100% 70px, auto; background-position: 0 0, 0 100%, 0 0; background-repeat: no-repeat; }
  #setup:not(.in-panel) .hero-ch { width: 19%; height: auto; aspect-ratio: .82; }
  #setup:not(.in-panel) .hero-ch:nth-child(3) { width: 25%; }
  #setup:not(.in-panel) .logo { grid-column: 2; margin: 56px 44px 0; font-size: 3.2rem; text-align: left; }
  #setup:not(.in-panel) .logo-en { grid-column: 2; margin: -6px 44px 0 !important; padding-left: 0; text-align: left; }
  #setup:not(.in-panel) .tagline { grid-column: 2; margin: 0 44px 8px; text-align: left; }
  #setup:not(.in-panel) .title-menu { grid-column: 2; margin: 0 44px; }
  #setup:not(.in-panel) .menu-btn { text-align: left; justify-items: start; }
  #setup:not(.in-panel) .menu-btn .mb-t { justify-content: flex-start; }
  #setup:not(.in-panel) .title-foot { grid-column: 2; margin: 0 44px 44px; text-align: left; }
}
@media (min-width: 900px) and (min-height: 560px) {
  #setup:not(.in-panel) .setup-card { grid-template-rows: 1fr auto auto auto auto auto 1fr; row-gap: 0; height: min(560px, calc(100dvh - 40px)); }
  #setup:not(.in-panel) .hero-cast { grid-row: 1 / -1; min-height: 0; padding: 0 10px 64px; justify-content: center; }
  #setup:not(.in-panel) .hero-ch { width: 23%; margin: 0 -2%; }
  #setup:not(.in-panel) .hero-ch:nth-child(3) { width: 30%; z-index: 1; }
  #setup:not(.in-panel) .logo { grid-row: 2; margin-top: 0; }
  #setup:not(.in-panel) .logo-en { grid-row: 3; margin-top: 8px !important; }
  #setup:not(.in-panel) .tagline { grid-row: 4; margin-top: 10px; margin-bottom: 26px; }
  #setup:not(.in-panel) .title-menu { grid-row: 5; }
  #setup:not(.in-panel) .title-foot { grid-row: 6; margin: 18px 44px 0; }
}
/* 좁은 폰에서 온라인 버튼이 카드 밖으로 넘치던 문제: 칸이 글자 길이에 밀려 늘어나지 않게 */
.online-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.online-actions > *, .online-form > * { min-width: 0; }
#btnPublic small { white-space: normal; }
.join-row input { min-width: 0; letter-spacing: .12em; }
.join-row button { flex-shrink: 0; }
@media (max-width: 480px) { .online-actions { grid-template-columns: minmax(0, 1fr); } }

/* 이번 판 규칙: 재미 요소를 접지 않고 바로 보이게 */
.rules-box { display: grid; gap: 12px; padding: 14px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.rb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rb-head > b { font-family: var(--head); font-size: 1.05rem; }
.presets { display: flex; gap: 4px; }
.presets button { padding: 5px 12px; font-size: .82rem; font-weight: 700; color: var(--muted); background: transparent; }
.presets button.sel { color: var(--gold-hi); border-color: var(--frame); background: rgba(201, 164, 92, .12); }
.mode-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mtile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 12px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--bg2); cursor: pointer; transition: border-color .15s, background .15s; }
.mtile input { position: absolute; opacity: 0; pointer-events: none; }
.mtile .ico { width: 22px; height: 22px; color: var(--muted); }
.mtile b { font-size: .92rem; }
.mtile small { font-size: .74rem; color: var(--muted); line-height: 1.35; }
.mtile::after { content: '꺼짐'; position: absolute; top: 10px; right: 10px; font-size: .68rem; font-weight: 700; color: var(--muted); }
.mtile:has(input:checked) { border-color: var(--frame); background: rgba(201, 164, 92, .1); }
.mtile:has(input:checked) .ico { color: var(--gold-hi); }
.mtile:has(input:checked)::after { content: '켜짐'; color: var(--gold-hi); }
.mtile:has(input:focus-visible) { outline: 2px solid var(--frame); outline-offset: 2px; }
.rules-box .map-row { justify-content: flex-start; }
.more-opts { border-top: 1px solid var(--line); padding-top: 10px; }
.more-opts summary { cursor: pointer; font-weight: 700; font-size: .88rem; color: var(--muted); list-style: none; display: flex; gap: 8px; align-items: baseline; }
.more-opts summary::-webkit-details-marker { display: none; }
.more-opts summary::before { content: '▸'; }
.more-opts[open] summary::before { content: '▾'; }
.more-opts[open] summary { margin-bottom: 10px; }
.opts summary::before { content: none; }
@media (max-width: 560px) {
  .mode-tiles { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .mtile { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; align-items: center; padding: 10px 12px; }
  .mtile .ico { grid-row: 1 / span 2; }
  .mtile::after { top: 50%; transform: translateY(-50%); }
}
.map-btn { padding: 7px 10px; white-space: nowrap; min-width: 0; }
.mtile { text-align: left; }

/* 🌑 등대지기 소등: 시야 밖은 어둡게, 안 보이는 말은 숨기고 흐린 잔상 */
.cell.fog::after { content: ''; position: absolute; inset: 0; background: rgba(3, 6, 14, .78); pointer-events: none; transition: opacity .4s; }
body.dark-on .cells { filter: saturate(.75); }
.piece.fogged { visibility: hidden; }
.piece.fog-ghost { pointer-events: none; }
.piece.fog-ghost .stand { opacity: .55; }
.piece.fog-ghost .avatar { display: grid; place-items: center; font-weight: 900; color: #fff; background: color-mix(in srgb, var(--pc) 35%, #0b1016); border: 2px dashed var(--pc); border-radius: 50%; }
.piece.fog-ghost .ghost-ago { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap; font-size: calc(var(--cell) * .16); font-weight: 700; color: #cfd6e4; background: rgba(0, 0, 0, .6); padding: 1px 5px; border-radius: 4px; }
.piece.beacon .avatar { filter: drop-shadow(0 0 calc(var(--cell) * .25) #ffe07a); }
.piece.lit .avatar { filter: drop-shadow(0 0 calc(var(--cell) * .18) #fff2b0); }

/* 🌑 등대지기 소등: 시야 밖은 어둡게, 안 보이는 말은 숨기고 흐린 잔상 */
.cell.fog::after { content: ''; position: absolute; inset: 0; background: rgba(3, 6, 14, .78); pointer-events: none; }
body.dark-on .cells { filter: saturate(.75); }
.piece.fogged { visibility: hidden; }
.piece.fog-ghost { pointer-events: none; }
.piece.fog-ghost .stand { opacity: .55; }
.piece.fog-ghost .avatar { display: grid; place-items: center; font-weight: 900; color: #fff; background: color-mix(in srgb, var(--pc) 35%, #0b1016); border: 2px dashed var(--pc); border-radius: 50%; }
.piece.fog-ghost .ghost-ago { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap; font-size: calc(var(--cell) * .16); font-weight: 700; color: #cfd6e4; background: rgba(0, 0, 0, .6); padding: 1px 5px; border-radius: 4px; }
.piece.beacon .avatar { filter: drop-shadow(0 0 calc(var(--cell) * .25) #ffe07a); }
.piece.lit .avatar { filter: drop-shadow(0 0 calc(var(--cell) * .18) #fff2b0); }

.piece.fog-beacon { opacity: 1; z-index: 0; }
.piece.fog-beacon .halo { position: absolute; left: 50%; top: 50%; width: calc(var(--cell) * 3); height: calc(var(--cell) * 3); transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 150, .55), rgba(255, 224, 122, .22) 45%, transparent 70%); animation: beaconPulse 1.6s ease-in-out infinite alternate; pointer-events: none; }
@keyframes beaconPulse { to { opacity: .6; transform: translate(-50%, -50%) scale(.9); } }
/* 관전 카드: 문제가 길어 카드 높이를 넘으면 문제 칸이 납작하게 눌려 안 보이던 문제 — 줄이지 말고 카드 안에서 스크롤 */
.spectate > * { flex-shrink: 0; }

/* ================= 🎪 미니게임 무대 (전체 화면) ================= */
.mini-overlay.stage { padding: 0; place-items: stretch; background: radial-gradient(ellipse at 50% 30%, #1d2b48, #070b14 75%); animation: stageIn .45s ease-out; overflow: hidden; }
.mini-overlay.stage > * { min-height: 0; }
@keyframes stageIn { from { opacity: 0; transform: scale(1.08); filter: blur(6px); } }
.mini-overlay.stage[data-game="race"] { background: linear-gradient(#5fb4ff 0%, #a8dcff 55%, #f6e6b8 100%); }
.mini-overlay.stage .mini-card { align-self: center; justify-self: center; margin: 16px; }
.ms-kicker { margin: 0; font-family: var(--head, serif); font-weight: 700; font-size: clamp(1.3rem, 5vw, 2.2rem); color: #ffe07a; text-shadow: 0 3px 0 #3a2305; letter-spacing: .06em; }
/* 룰렛 */
.ms-roulette { display: grid; place-content: center; justify-items: center; gap: 22px; height: 100%; padding: 16px; }
.ms-reel { position: relative; width: min(760px, 94vw); overflow: hidden; border: 1px solid var(--frame, #c9a45c); border-radius: 12px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .3); }
.ms-strip { display: flex; will-change: transform; }
.ms-cell { flex: 0 0 clamp(120px, 30vw, 170px); display: grid; justify-items: center; gap: 6px; padding: 18px 6px; opacity: .55; transition: opacity .2s, transform .3s; }
.ms-cell span { font-size: clamp(2.4rem, 11vw, 3.6rem); }
.ms-cell b { font-size: .95rem; color: #fff; white-space: nowrap; }
.ms-cell.hit { opacity: 1; transform: scale(1.15); }
.ms-pointer { position: absolute; left: 50%; top: 0; bottom: 0; width: clamp(120px, 30vw, 170px); transform: translateX(-50%); border: 3px solid #ffe07a; border-radius: 10px; box-shadow: 0 0 24px rgba(255, 224, 122, .5); pointer-events: none; }
/* 소개 */
.ms-intro { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100%; padding: 20px 16px; text-align: center; color: #fff; }
.ms-title { display: flex; align-items: center; gap: 14px; animation: rise .4s ease-out; }
.ms-icon { font-size: clamp(3rem, 14vw, 5rem); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.ms-title h2 { margin: 0; font-family: var(--head, serif); font-size: clamp(2rem, 9vw, 3.4rem); color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
.ms-rule { margin: 0; max-width: 560px; font-size: clamp(.95rem, 3.6vw, 1.1rem); line-height: 1.55; background: rgba(0, 0, 0, .35); padding: 10px 16px; border-radius: 10px; }
.ms-hint { margin: 0; font-weight: 800; color: #ffe07a; }
.ms-line { display: flex; justify-content: center; align-items: flex-end; gap: clamp(6px, 3vw, 22px); flex-wrap: wrap; margin-top: 10px; }
.ms-who { display: grid; justify-items: center; gap: 4px; }
.ms-who .sc { width: clamp(56px, 16vw, 96px); height: clamp(66px, 19vw, 112px); display: block; }
.ms-who .sc svg { width: 100%; height: 100%; }
.ms-who b { font-size: .85rem; text-shadow: 0 1px 2px #000; background: rgba(0, 0, 0, .4); padding: 1px 8px; border-radius: 6px; }
.ms-who.me .sc { filter: drop-shadow(0 0 10px #ffe07a); }
.ms-turn { margin: 6px 0 0; font-weight: 900; font-size: 1.1rem; text-shadow: 0 1px 3px #000; }
.ms-go { min-width: 220px; }
/* 3·2·1 */
.ms-count { position: absolute; inset: 0; display: grid; place-items: center; font: 900 clamp(5rem, 30vw, 12rem)/1 var(--head, serif); color: #fff; text-shadow: 0 8px 0 rgba(0, 0, 0, .35), 0 0 40px rgba(255, 224, 122, .6); pointer-events: none; z-index: 5; background: rgba(0, 0, 0, .25); }
.ms-count.pop { animation: countPop .6s ease-out; }
@keyframes countPop { from { transform: scale(1.8); opacity: 0; } 40% { opacity: 1; } }
/* 시상대 */
.ms-result { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; height: 100%; padding: 16px; }
.ms-podium { display: flex; align-items: flex-end; justify-content: center; gap: clamp(6px, 3vw, 20px); width: min(720px, 100%); }
.ms-step { flex: 1; max-width: 220px; display: grid; justify-items: center; gap: 4px; color: #fff; text-align: center; animation: rise .5s ease-out backwards; }
.ms-step.s1 { animation-delay: .35s; } .ms-step.s2 { animation-delay: .15s; } .ms-step.s3 { animation-delay: 0s; }
.ms-podchar .sc { width: clamp(60px, 18vw, 110px); height: clamp(70px, 21vw, 128px); display: block; }
.ms-podchar .sc svg { width: 100%; height: 100%; }
.ms-step b { font-size: .95rem; text-shadow: 0 1px 2px #000; }
.ms-step em { font-style: normal; font-weight: 900; color: #ffe07a; font-variant-numeric: tabular-nums; }
.ms-prize { font-size: .72rem; font-weight: 800; color: #b9f5d3; background: rgba(0, 0, 0, .45); padding: 2px 8px; border-radius: 6px; }
.ms-block { width: 100%; display: grid; place-items: start center; padding-top: 8px; font-size: 1.6rem; background: linear-gradient(color-mix(in srgb, var(--pc) 55%, #1a2233), #121a26); border: 1px solid rgba(255, 255, 255, .15); border-radius: 8px 8px 0 0; }
.ms-step.s1 .ms-block { height: clamp(90px, 20vh, 150px); } .ms-step.s2 .ms-block { height: clamp(60px, 13vh, 100px); } .ms-step.s3 .ms-block { height: clamp(40px, 9vh, 70px); }
.ms-rest { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ms-rest li { display: flex; gap: 6px; align-items: center; background: rgba(0, 0, 0, .4); color: #fff; padding: 4px 12px; border-radius: 8px; border-left: 3px solid var(--pc); }
.ms-rest em { font-style: normal; color: #cfd6e4; }
/* 🏁 달리기 — 전체 화면 */
.race-stage { display: flex; flex-direction: column; height: 100%; padding: 10px clamp(8px, 2vw, 20px) 12px; gap: 8px; }
.race-stage .race-hud { margin: 0; padding: 8px 14px; border-radius: 10px; background: rgba(8, 14, 26, .7); color: #fff; font-size: clamp(.95rem, 3.4vw, 1.15rem); }
.race-stage .race { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.race-stage .lane { flex: 1; height: auto; min-height: 76px; max-height: 190px; border-radius: 12px; background: linear-gradient(#8fd0ff, #d5efff 70%); border: 2px solid rgba(255, 255, 255, .5); }
.race-stage .lane.me { background: linear-gradient(#6fc0ff, #cdeaff 70%); box-shadow: 0 0 0 3px #ffe07a; border-color: #ffe07a; }
.race-stage .lane .hills { position: absolute; left: 0; right: 0; bottom: calc(14px * var(--u, 1)); height: 45%; background: radial-gradient(ellipse 60px 40px at 50% 100%, #7cc47a 98%, transparent) 0 100% / 160px 100% repeat-x, radial-gradient(ellipse 110px 60px at 50% 100%, #5fae66 98%, transparent) 60px 100% / 260px 100% repeat-x; opacity: .9; }
.race-stage .lane .track { height: calc(14px * var(--u, 1)); }
.race-stage .lane .ob { bottom: calc(14px * var(--u, 1)); }
.race-stage .lane .ob-hurdle { height: calc(22px * var(--u, 1)); border-width: calc(3px * var(--u, 1)); }
.race-stage .lane .ob-hurdle.down { height: calc(7px * var(--u, 1)); }
.race-stage .lane .ob-pit { bottom: 0; height: calc(15px * var(--u, 1)); }
.race-stage .lane .ob-boost { height: calc(5px * var(--u, 1)); }
.race-stage .lane .ob-boost::after { font-size: calc(12px * var(--u, 1)); }
.race-stage .lane .ob.finish { bottom: calc(14px * var(--u, 1)); }
.race-stage .lane .sc { bottom: calc(10px * var(--u, 1)); width: calc(40px * var(--u, 1)); height: calc(48px * var(--u, 1)); }
.race-stage .lane-tag { font-size: calc(.72rem * var(--u, 1)); color: inherit; background: rgba(0, 0, 0, .45); padding: 1px 8px; border-radius: 6px; top: 6px; left: 8px; }
.race-stage .race-pop { font-size: calc(1rem * var(--u, 1)); }
.race-stage .race-bar { margin: 0; height: 8px; background: rgba(0, 0, 0, .25); }
.race-stage .race-jump { padding: 20px 0; font-size: 1.4rem; box-shadow: 0 5px 0 #a8801f; }
.race-stage .mini-note { margin: 0; text-align: center; color: #1a2233; font-weight: 700; }
@media (min-width: 900px) { .race-stage .race-jump { display: none; } }

.ms-cell { min-width: 0; overflow: hidden; }
.ms-cell b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mini-overlay.stage[data-game="race"] .ms-roulette, .mini-overlay.stage[data-game="race"] .ms-intro, .mini-overlay.stage[data-game="race"] .ms-result { background: rgba(8, 14, 26, .5); }
.ms-turn.muted { color: #cfd6e4; }

/* ---------- 🤠 서부 결투 무대 ---------- */
.mini-overlay.stage[data-game="duel"] { background: linear-gradient(#3b1d3f 0%, #b8452c 45%, #f2a24a 70%, #e7c07a 100%); }
.mini-overlay.stage[data-game="duel"] .ms-roulette, .mini-overlay.stage[data-game="duel"] .ms-intro, .mini-overlay.stage[data-game="duel"] .ms-result { background: rgba(20, 8, 6, .45); }
.duel-stage { position: relative; height: 100%; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; cursor: crosshair; --gy: 30%; }
.duel-stage > i { position: absolute; display: block; pointer-events: none; }
.dz-sun { width: min(34vmin, 260px); aspect-ratio: 1; border-radius: 50%; left: 50%; bottom: calc(var(--gy) + 4%); transform: translateX(-50%); background: radial-gradient(circle, #ffe7a0 0 55%, #ffb55a 70%, transparent 72%); box-shadow: 0 0 80px 30px rgba(255, 170, 80, .35); }
.dz-mesa { bottom: var(--gy); background: #6d2a24; }
.dz-mesa.a { left: -4%; width: 42%; height: 26%; clip-path: polygon(0 100%, 6% 30%, 14% 18%, 52% 14%, 62% 34%, 78% 40%, 88% 100%); }
.dz-mesa.b { right: -6%; width: 46%; height: 20%; background: #7d3328; clip-path: polygon(8% 100%, 18% 40%, 30% 26%, 70% 22%, 82% 46%, 100% 60%, 100% 100%); }
.dz-ground { left: 0; right: 0; bottom: 0; height: var(--gy); background: linear-gradient(#c98a4b, #a8683a 60%, #8c5430); box-shadow: inset 0 3px 0 rgba(255, 220, 160, .35); }
.dz-weed { width: 38px; height: 38px; bottom: calc(var(--gy) - 14px); left: -60px; border-radius: 50%; border: 3px dotted #6b4a26; background: radial-gradient(circle, transparent 40%, rgba(107, 74, 38, .5) 42%, transparent 60%); animation: dzWeed 7s linear infinite 1s; }
@keyframes dzWeed { 0% { transform: translateX(0) rotate(0); } 12% { transform: translateX(15vw) translateY(-10px) rotate(200deg); } 24% { transform: translateX(30vw) rotate(400deg); } 100% { transform: translateX(calc(100vw + 120px)) rotate(1600deg); } }
.duel-hud { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 10px; background: rgba(20, 8, 6, .6); color: #fff3dc; font-size: clamp(.95rem, 3.4vw, 1.15rem); }
.duel-hud .duel-rd { opacity: .8; }
.duel-hud .duel-sum { margin-left: auto; font-weight: 700; color: #ffd98a; }
.duel-shots { display: flex; gap: 6px; }
.duel-shots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ffd98a; font-style: normal; font-size: 11px; line-height: 14px; text-align: center; color: #fff; }
.duel-shots i.ok { background: #ffd98a; }
.duel-shots i.miss { border-color: #e0604a; background: #7a2218; }
.duel-me, .duel-foe { position: absolute; bottom: calc(var(--gy) - 6%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.duel-me { left: 8%; }
.duel-foe { right: 12%; }
.duel-me b, .duel-foe b { font-size: .9rem; padding: 1px 8px; border-radius: 6px; background: rgba(20, 8, 6, .55); color: #fff3dc; }
.duel-me .sc { display: block; width: min(30vmin, 220px); }
.duel-me .sc svg { width: 100%; height: auto; display: block; }
.duel-foe .bandit { width: min(22vmin, 160px); height: auto; overflow: visible; transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.duel-foe .bd-arm { transform-origin: 18px 64px; transition: transform .12s; }
.duel-foe.aim .bd-arm { transform: rotate(-12deg) translateX(-4px); }
.duel-foe.twitch .bandit { animation: dzTwitch .3s; }
@keyframes dzTwitch { 30% { transform: translateX(-4px) rotate(-3deg); } 60% { transform: translateX(2px); } }
.duel-foe.down .bandit { transform: translateX(-45%) rotate(78deg); }
.duel-foe.down b { opacity: 0; transition: opacity .3s; }
.duel-cue { position: absolute; left: 50%; top: 22%; z-index: 3; transform: translateX(-50%); font-family: var(--head, serif); font-weight: 800; font-size: clamp(3rem, 16vmin, 8rem); color: #fff3dc; text-shadow: 0 4px 0 #3b1d3f, 0 0 30px rgba(0, 0, 0, .4); white-space: nowrap; pointer-events: none; }
.duel-cue.pop { animation: dzPop .25s ease-out; }
@keyframes dzPop { from { transform: translateX(-50%) scale(1.5); opacity: .3; } }
.duel-cue.round { font-size: clamp(2rem, 9vmin, 4.5rem); color: #ffd98a; }
.duel-cue.wait { opacity: .6; }
.duel-cue.real { color: #ff3b2a; text-shadow: 0 4px 0 #fff3dc, 0 0 40px rgba(255, 60, 40, .7); }
.duel-cue.good { color: #ffd98a; }
.duel-cue.bad { color: #ff7a64; }
.duel-flash { inset: 0; z-index: 4; opacity: 0; background: #fff; }
.duel-flash.on { opacity: .75; }
.duel-flash.on.foe { background: #ff5a3a; }
.duel-stage .mini-note { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 3; margin: 0; text-align: center; color: #fff3dc; opacity: .85; font-size: .9rem; }
@media (max-width: 560px) { .duel-stage { --gy: 34%; } .duel-me { left: 3%; } .duel-foe { right: 4%; } .duel-me .sc { width: 38vmin; } .duel-foe .bandit { width: 28vmin; } }

/* ---------- 💣 숫자 폭탄 무대 ---------- */
.mini-overlay.stage[data-game="bomb"] { background: radial-gradient(ellipse at 50% 40%, #2c3440, #0c1016 75%); }
.bomb-stage { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; padding: 10px clamp(10px, 3vw, 28px) 12px; gap: 10px; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; background: repeating-linear-gradient(45deg, transparent 0 22px, rgba(255, 255, 255, .025) 22px 44px); }
.bomb-stage.shake { animation: bombShake .5s; }
@keyframes bombShake { 20% { transform: translate(-8px, 4px); } 40% { transform: translate(7px, -5px); } 60% { transform: translate(-5px, 3px); } 80% { transform: translate(3px, -2px); } }
.bomb-hud { align-self: stretch; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 10px; background: rgba(0, 0, 0, .45); color: #fff; font-size: clamp(.95rem, 3.4vw, 1.15rem); }
.bomb-hud .bomb-n { color: #8fe3a0; font-weight: 700; }
.bomb-fuse { flex: 1; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.bomb-fuse i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff4a2a, #ffb13b); }
.bomb-wrap { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; }
.bomb { position: relative; width: min(62vmin, 440px); aspect-ratio: 1; }
.bomb.in { animation: bombIn .35s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes bombIn { from { transform: translateX(-60vw) rotate(-160deg) scale(.6); } }
.bomb.toss { transition: transform .38s ease-in; transform: translateX(70vw) translateY(-20vh) rotate(200deg) scale(.6); }
.bomb-svg { width: 100%; height: 100%; display: block; }
.bomb-spark { position: absolute; left: 83%; top: 8%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: radial-gradient(#fff, #ffd24a 40%, #ff5a1a 70%, transparent 72%); box-shadow: 0 0 20px 6px rgba(255, 150, 40, .7); animation: bombSpark .12s infinite alternate; }
@keyframes bombSpark { to { transform: scale(1.4) rotate(40deg); } }
.bomb-q { position: absolute; left: 14%; right: 14%; top: 36%; bottom: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: var(--head, serif); font-weight: 800; color: #fff; font-size: clamp(1.7rem, 8.5vmin, 3.6rem); line-height: 1.1; text-shadow: 0 2px 0 #000; white-space: nowrap; }
.bomb-q small { display: block; font-size: .45em; opacity: .8; margin-top: 6px; font-family: inherit; }
.bomb-led { position: absolute; left: 50%; top: 27%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #ff3b2a; box-shadow: 0 0 12px #ff3b2a; animation: bombLed var(--fuse, 3s) steps(1) infinite; }
@keyframes bombLed { 50% { opacity: .25; } }
.bomb.safe .bomb-led { background: #4dff7a; box-shadow: 0 0 14px #4dff7a; animation: none; }
.bomb.safe .bomb-spark, .bomb.boom .bomb-spark { display: none; }
.bomb.boom .bomb-svg { animation: bombBoom .5s forwards; }
@keyframes bombBoom { 40% { transform: scale(1.25); filter: brightness(3) sepia(1) saturate(6) hue-rotate(-20deg); } 100% { transform: scale(1.1); filter: brightness(.4); } }
.bomb.boom .bomb-q { color: #ffb13b; }
.bomb-wires { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vw, 18px); width: min(760px, 100%); }
.wire { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 0 10px; border: 0; border-radius: 12px; background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer; overflow: hidden; }
.wire i { display: block; width: 100%; height: 16px; background: var(--wc); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .3), inset 0 3px 0 rgba(255, 255, 255, .35); transition: clip-path .15s; }
.wire.red { --wc: #e0463a; } .wire.blue { --wc: #3a7de0; } .wire.yellow { --wc: #e8c23a; }
.wire b { font-size: clamp(1.6rem, 7vmin, 2.6rem); font-weight: 800; line-height: 1.1; }
.wire kbd { font: inherit; font-size: .75rem; opacity: .5; }
.wire:active { transform: translateY(2px); }
.wire.cut i { background: linear-gradient(90deg, var(--wc) 0 40%, transparent 40% 60%, var(--wc) 60%); }
.wire.right { box-shadow: 0 0 0 3px #4dff7a; }
.wire.cut:not(.right) { opacity: .7; }
.bomb-me { position: absolute; left: 2%; bottom: 20%; width: min(22vmin, 150px); pointer-events: none; }
.bomb-me .sc, .bomb-me svg { display: block; width: 100%; height: auto; }
.bomb-flash { position: absolute; inset: 0; background: #ffb13b; opacity: 0; pointer-events: none; transition: opacity .3s; }
.bomb-flash.on { opacity: .8; transition: none; }
.bomb-stage .mini-note { margin: 0; color: #fff; opacity: .6; font-size: .88rem; }
@media (max-width: 560px) { .bomb-me { bottom: 26%; width: 22vw; } }

/* ---------- 🎭 🧊 동시에 고르는 게임: 카드 대신 무대 전체 ---------- */
.mini-overlay.stage .choice-card { align-self: stretch; justify-self: stretch; width: auto; max-width: none; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px clamp(12px, 4vw, 48px); overflow-y: auto; }
.mini-overlay.stage .choice-card > *, .mini-overlay.stage .choice-foot { width: 100%; max-width: 1000px; margin-left: auto; margin-right: auto; }
.mini-overlay.stage .choice-card .eyebrow { font-size: .95rem; letter-spacing: .08em; color: var(--gold-hi, #ecd08f); opacity: .9; }
.mini-overlay.stage .choice-who, .mini-overlay.stage .choice-msg { font-size: clamp(1.05rem, 3.6vw, 1.4rem); }
.mini-overlay.stage .choice-btns button { padding: clamp(14px, 3vh, 24px) 0; font-size: clamp(1.4rem, 5vw, 2rem); }
.psy-rule { margin: 4px 0 8px; padding: 8px 14px; border-radius: var(--r-s, 4px); background: rgba(0, 0, 0, .35); border-left: 3px solid var(--gold-hi, #ecd08f); font-size: clamp(.95rem, 3.2vw, 1.15rem); }
.psy-rule b { color: var(--gold-hi, #ecd08f); margin-right: 6px; }
/* 심리전: 커튼 걸린 무대 + 스포트라이트, 캐릭터는 크게 */
.mini-overlay.stage[data-game="psych"] { background:
  linear-gradient(90deg, #5a0f1c 0, #8a1a2a 3%, #5a0f1c 6%, transparent 9%, transparent 91%, #5a0f1c 94%, #8a1a2a 97%, #5a0f1c 100%),
  radial-gradient(ellipse 35% 55% at 30% 100%, rgba(255, 230, 160, .16), transparent 70%),
  radial-gradient(ellipse 35% 55% at 70% 100%, rgba(255, 230, 160, .16), transparent 70%),
  linear-gradient(#1a0d1c, #2a1224 60%, #3a1d16 100%); }
.mini-overlay.stage[data-game="psych"] .nunchi { gap: clamp(6px, 1.5vw, 14px); }
.mini-overlay.stage[data-game="psych"] .pad { min-height: clamp(130px, 26vh, 240px); background: linear-gradient(#3a2a1c, #2a1d14); border: 2px solid rgba(236, 208, 143, .35); border-radius: 8px; }
.mini-overlay.stage[data-game="psych"] .pad b { font-family: var(--head, serif); font-size: clamp(1.8rem, 6vw, 3rem); color: #ecd08f; }
.mini-overlay.stage[data-game="psych"] .pad.ok { background: linear-gradient(#2d5a34, #1f3f26); border-color: #9dffc4; }
.mini-overlay.stage[data-game="psych"] .pad.clash { background: linear-gradient(#6b2231, #45121d); border-color: #ffb3bd; }
.mini-overlay.stage[data-game="psych"] .pad-chars .sc { width: clamp(36px, 8vw, 64px); height: clamp(42px, 9.5vw, 76px); }
.mini-overlay.stage[data-game="psych"] .choice-cast .sc { width: clamp(48px, 11vw, 84px); height: clamp(56px, 13vw, 100px); }
.mini-overlay.stage[data-game="psych"] .tt-line { height: clamp(170px, 32vh, 300px); }
.mini-overlay.stage[data-game="psych"] .tt-mark .sc { width: clamp(34px, 7vw, 56px); height: clamp(40px, 8.4vw, 66px); }
/* 얼음 호수 */
.mini-overlay.stage[data-game="bridge"] { background: radial-gradient(ellipse at 50% 0%, #cfe9ff 0, #7fb4e0 35%, #2c5a86 75%, #173150 100%); }
.mini-overlay.stage[data-game="bridge"] .ms-roulette, .mini-overlay.stage[data-game="bridge"] .ms-intro, .mini-overlay.stage[data-game="bridge"] .ms-result { background: rgba(10, 24, 44, .45); }
.mini-overlay.stage[data-game="bridge"] .choice-card { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.mini-overlay.stage[data-game="bridge"] .bridge { grid-template-rows: clamp(60px, 14vh, 120px) clamp(60px, 14vh, 120px) clamp(40px, 9vh, 80px); gap: clamp(4px, 1vw, 10px); }
.mini-overlay.stage[data-game="bridge"] .bridge .plat { background: linear-gradient(#f4f1e6, #d9d2bc); color: #173150; border-radius: 40% 40% 14px 14px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12); }
.mini-overlay.stage[data-game="bridge"] .bridge .glass { background: linear-gradient(160deg, #ffffff 0%, #e2f3ff 40%, #b9dcf5 100%); border: 0; border-radius: 30% 24% 34% 22%; box-shadow: inset 0 -5px 0 rgba(60, 120, 170, .35), 0 3px 0 rgba(10, 40, 70, .35); }
.mini-overlay.stage[data-game="bridge"] .bridge .glass.now { box-shadow: 0 0 0 3px #ffe07a, 0 0 16px rgba(255, 224, 122, .7); }
.mini-overlay.stage[data-game="bridge"] .bridge .glass.broken { background: radial-gradient(circle at 50% 50%, #0f2a48 0 40%, transparent 42%), repeating-conic-gradient(from 10deg, rgba(220, 240, 255, .5) 0 12deg, transparent 12deg 45deg); box-shadow: none; }
.mini-overlay.stage[data-game="bridge"] .bridge .water { background: linear-gradient(#10365c, #0a2340); border-radius: 10px; }
.mini-overlay.stage[data-game="bridge"] .bridge .sc { width: clamp(26px, 5.5vw, 52px); height: clamp(32px, 6.5vw, 62px); }
.mini-overlay.stage[data-game="bridge"] .bridge .plat .sc { width: clamp(28px, 6vw, 56px); height: clamp(34px, 7vw, 66px); }
.mini-overlay.stage[data-game="bridge"] .bridge .water .sc { width: clamp(20px, 4vw, 38px); height: clamp(26px, 5vw, 46px); filter: hue-rotate(160deg) saturate(.6) brightness(1.1); }
.mini-overlay.stage[data-game="bridge"] .choice-scores > span { background: rgba(10, 30, 55, .6); }
.mini-overlay.stage[data-game="bridge"] .choice-card .eyebrow { color: #fff; opacity: 1; }

/* ---------- 🎪 미니게임 UI 통일 (디자인 기준: 짙은 남색 판 · 금색 얇은 테두리 · 4px 모서리 · 고운바탕 제목 · 선 아이콘) ---------- */
.mini-overlay.stage { --mg-panel: rgba(11, 16, 22, .8); --mg-line: rgba(201, 164, 92, .45); }
.mini-overlay.stage .ico.sm { width: 1em; height: 1em; vertical-align: -.14em; margin-right: .25em; }
/* 룰렛 · 소개 */
.ms-kicker { color: var(--gold-hi, #ecd08f); text-shadow: 0 2px 0 rgba(0, 0, 0, .5); letter-spacing: .14em; }
.ms-reel { border-radius: var(--r-s, 4px); background: var(--mg-panel); border-color: var(--mg-line); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .35); }
.ms-pointer { border: 2px solid var(--frame, #c9a45c); border-radius: var(--r-s, 4px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 18px rgba(201, 164, 92, .35); }
.ms-cell span { display: grid; place-items: center; width: clamp(56px, 14vw, 78px); aspect-ratio: 1; border: 1px solid var(--mg-line); border-radius: var(--r-s, 4px); color: var(--gold-hi, #ecd08f); background: rgba(201, 164, 92, .06); }
.ms-cell span .ico { width: 62%; height: 62%; stroke-width: 1.5; }
.ms-cell b { font-family: var(--head, serif); font-weight: 700; color: #e8e2d0; }
.ms-icon { display: grid; place-items: center; width: clamp(64px, 16vw, 92px); aspect-ratio: 1; border: 1px solid var(--mg-line); border-radius: var(--r-s, 4px); background: var(--mg-panel); color: var(--gold-hi, #ecd08f); filter: none; }
.ms-icon .ico { width: 60%; height: 60%; stroke-width: 1.4; }
.ms-title h2 { text-shadow: 0 2px 0 rgba(0, 0, 0, .5); letter-spacing: .02em; }
.ms-rule { background: var(--mg-panel); border: 1px solid var(--mg-line); border-radius: var(--r-s, 4px); color: #e8e2d0; }
.ms-hint { color: var(--gold-hi, #ecd08f); font-weight: 700; }
.ms-hint .ico { color: var(--frame, #c9a45c); }
.ms-turn { font-family: var(--head, serif); }
.ms-count { color: var(--gold-hi, #ecd08f); text-shadow: 0 6px 0 rgba(0, 0, 0, .45), 0 0 34px rgba(201, 164, 92, .45); }
/* 게임 상단 바 */
.race-stage .race-hud, .duel-hud, .bomb-hud { background: var(--mg-panel); border: 1px solid var(--mg-line); border-radius: var(--r-s, 4px); color: #e8e2d0; }
.race-stage .race-hud b, .duel-hud > b, .bomb-hud > b { font-family: var(--head, serif); font-weight: 700; color: var(--gold-hi, #ecd08f); }
.race-stage .race-hud .ico, .duel-hud .ico, .bomb-hud .ico { color: var(--frame, #c9a45c); }
.race-combo { display: inline-flex; align-items: center; color: #ffb45a; font-weight: 800; }
.race-stage .lane { border-radius: var(--r-s, 4px); }
.race-stage .lane.me { box-shadow: 0 0 0 2px var(--frame, #c9a45c); border-color: var(--frame, #c9a45c); }
.race-stage .race-jump { border-radius: var(--r-s, 4px); background: var(--frame, #c9a45c); color: #1a1307; font-family: var(--head, serif); font-weight: 700; box-shadow: 0 3px 0 #6f5527; }
.race-stage .mini-note { color: #fff; }
.duel-shots i { border-color: var(--gold-hi, #ecd08f); }
.duel-shots i.ok { background: var(--gold-hi, #ecd08f); }
.duel-me b, .duel-foe b { border-radius: var(--r-s, 4px); border: 1px solid rgba(236, 208, 143, .3); }
.bomb-hud .bomb-n { color: #9fe0ae; }
.bomb-fuse { border-radius: 2px; }
.wire { border-radius: var(--r-s, 4px); background: var(--mg-panel); border: 1px solid var(--mg-line); }
.wire b { font-family: var(--head, serif); }
.wire.right { box-shadow: 0 0 0 2px #7fdc92; }
.bomb-q .boom-ico { width: 1.3em; height: 1.3em; color: #ffb13b; stroke-width: 1.6; }
/* 동시에 고르는 게임 */
.mini-overlay.stage .choice-card .eyebrow { font-family: var(--head, serif); font-weight: 700; letter-spacing: .1em; }
.mini-overlay.stage .choice-scores > span { background: var(--mg-panel); border: 1px solid var(--mg-line); border-left: 3px solid var(--pc); border-radius: var(--r-s, 4px); color: #e8e2d0; }
.mini-overlay.stage .choice-timer { border-radius: 2px; }
.mini-overlay.stage .choice-msg { font-family: var(--head, serif); color: #fff; }
.mini-overlay.stage .choice-msg .ico, .mini-overlay.stage .pad em .ico, .mini-overlay.stage .tt-target .ico { color: currentColor; }
.mini-overlay.stage .psy-rule { background: var(--mg-panel); border: 1px solid var(--mg-line); border-left: 3px solid var(--frame, #c9a45c); }
.mini-overlay.stage .tt-step button, .mini-overlay.stage[data-game="psych"] .tt-step button { border-radius: var(--r-s, 4px); }
.mini-overlay.stage .mini-card:not(.choice-card) { border: 1px solid var(--mg-line); border-radius: var(--radius, 8px); background: var(--card, #16202b); }
.mini-overlay.stage .mini-card h2 .ico { color: var(--frame, #c9a45c); }
/* 시상대 */
.ms-step b { font-family: var(--head, serif); }
.ms-step em { color: var(--gold-hi, #ecd08f); }
.ms-step em .ico, .ms-rest em .ico { color: currentColor; }
.ms-prize { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 2px; color: #cfe8d2; background: var(--mg-panel); border: 1px solid var(--mg-line); border-radius: var(--r-s, 4px); font-weight: 700; }
.ms-prize .ico { color: var(--frame, #c9a45c); margin-right: 2px; }
.ms-block { place-items: start center; padding-top: 10px; background: linear-gradient(#1c2733, #111922); border: 1px solid var(--mg-line); border-top: 3px solid var(--pc); border-radius: var(--r-s, 4px) var(--r-s, 4px) 0 0; }
.ms-rank { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-s, 4px); font: 700 1.15rem/1 var(--head, serif); color: #e8e2d0; background: #273443; border: 1px solid rgba(255, 255, 255, .15); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3); }
.ms-rank.r1 { color: #3a2a08; background: linear-gradient(#f3dc9c, #c9a45c); border-color: #f7e7b8; }
.ms-rank.r2 { color: #25303b; background: linear-gradient(#e6ebf0, #a9b4bf); border-color: #f2f5f8; }
.ms-rank.r3 { color: #fff1e0; background: linear-gradient(#d49a66, #9a6334); border-color: #e7b98f; }
.ms-step.s1 .ms-rank { width: 44px; height: 44px; font-size: 1.5rem; }
.ms-rest li { background: var(--mg-panel); border: 1px solid var(--mg-line); border-left: 3px solid var(--pc); border-radius: var(--r-s, 4px); }
.ms-rest .ms-rank { width: 24px; height: 24px; font-size: .9rem; }

/* ---------- 🎪 미니게임 공통 뼈대: 상단 HUD · 턴 배지 · 플레이어 카드 · 소개 카드 ---------- */
.mini-overlay.stage { --mg-accent: var(--frame, #c9a45c); --mg-hi: var(--gold-hi, #ecd08f); --mg-panel: rgba(11, 16, 22, .86); --mg-line: rgba(201, 164, 92, .4); --mg-text: #e6e1d3; --mg-dim: #9aa6b4; }
.mini-overlay.stage .tnum, .mg-hud .mg-round em, .mg-hud .race-time, .duel-sum, .bomb-n, .choice-scores b, .ms-cd, .ms-step em { font-variant-numeric: tabular-nums; }
/* 상단 HUD: 한 줄 · 작게 · 모든 게임 같은 자리 */
.mg-hud { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--mg-line); border-radius: var(--r-s, 4px); background: var(--mg-panel); color: var(--mg-text); font-size: .95rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 18px rgba(0, 0, 0, .25); }
.mg-hud > b { display: inline-flex; align-items: center; gap: 6px; font-family: var(--head, serif); font-weight: 700; letter-spacing: .06em; color: var(--mg-hi); white-space: nowrap; }
.mg-hud > b .ico { color: var(--mg-accent); margin: 0; }
.mg-hud .mg-round { margin-left: auto; color: var(--mg-dim); font-size: .85rem; white-space: nowrap; }
.mg-hud .mg-round em { font-style: normal; color: var(--mg-hi); font-weight: 800; font-size: 1rem; }
.mini-overlay.stage .choice-card > .mg-hud { position: sticky; top: 0; z-index: 2; flex: none; margin-bottom: 6px; }
.mini-overlay.stage .choice-card { justify-content: flex-start; padding-top: 10px; }
.mini-overlay.stage .choice-main { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
/* 턴 배지 */
.mg-turn { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0; padding: 0; font-size: .95rem; color: var(--mg-text); text-shadow: none; }
.mg-turn .mg-badge { padding: 2px 8px; border-radius: 2px; background: var(--mg-accent); color: #1a1307; font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.mg-turn > b { padding: 1px 8px; border: 1px solid var(--pc, var(--mg-line)); border-radius: 2px; color: var(--mg-text); font-weight: 800; }
.mg-turn .mg-ask, .mg-turn > span:last-child:not(.mg-badge) { color: var(--mg-dim); }
.mini-overlay.stage .choice-who { font-size: .95rem; font-weight: 400; }
/* 선택 버튼: 작게 · 짙은 판 + 금색 테두리 */
.mini-overlay.stage .choice-btns { gap: 8px; }
.mini-overlay.stage .choice-btns button { padding: 12px 0; font-size: clamp(1.1rem, 4vw, 1.4rem); font-family: var(--head, serif); font-weight: 700; border: 1px solid var(--mg-line); border-radius: var(--r-s, 4px); background: var(--mg-panel); color: var(--mg-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.mini-overlay.stage .choice-btns button:hover:not(:disabled) { border-color: var(--mg-accent); color: var(--mg-hi); }
.mini-overlay.stage .choice-btns button.sel { background: var(--mg-accent); color: #1a1307; border-color: var(--mg-hi); }
.mini-overlay.stage .choice-btns button:disabled:not(.sel) { opacity: .4; }
.mini-overlay.stage .choice-btns.two { max-width: 460px; margin: 0 auto; width: 100%; }
.mini-overlay.stage .choice-btns.two button { font-size: 1rem; padding: 10px 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.mini-overlay.stage .choice-btns.two .ico { width: .9em; height: .9em; margin: 0; color: var(--mg-accent); }
.mini-overlay.stage .tt-pick [data-go] { font-size: 1rem; padding: 10px 0; }
.mini-overlay.stage .choice-timer { height: 3px; margin: 8px 0 4px; }
/* 플레이어 카드: 초상 프레임 · 이름 · 점수 배지 */
.mini-overlay.stage .choice-scores { gap: 6px; margin-top: 8px; }
.mini-overlay.stage .choice-scores > span { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 7px; align-items: center; padding: 4px 10px 4px 4px; border: 1px solid var(--mg-line); border-left: 1px solid var(--mg-line); border-radius: var(--r-s, 4px); background: var(--mg-panel); font-size: .8rem; color: var(--mg-dim); position: relative; }
.mini-overlay.stage .choice-scores .mg-por { grid-row: 1 / span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 3px; border: 2px solid var(--pc); background: #0e141b; overflow: hidden; font-style: normal; }
.mini-overlay.stage .choice-scores .mg-por .mini-ch { transform: scale(.9); }
.mini-overlay.stage .choice-scores small { font-size: .72rem; line-height: 1.1; }
.mini-overlay.stage .choice-scores b { color: var(--mg-text); font-size: .9rem; line-height: 1.1; }
.mini-overlay.stage .choice-scores > span.cur { border-color: var(--mg-accent); box-shadow: 0 0 0 1px var(--mg-accent), 0 0 10px rgba(201, 164, 92, .25); }
.mini-overlay.stage .choice-scores > span.picked::after { content: '✓'; position: absolute; top: -6px; right: -5px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: #3f8f5a; color: #fff; font-size: 10px; font-weight: 900; }
/* 이번 라운드 목표 (심리전) */
.mini-overlay.stage .psy-rule { display: grid; gap: 2px; padding: 8px 12px; }
.mini-overlay.stage .psy-rule small { color: var(--mg-dim); font-size: .7rem; letter-spacing: .12em; }
/* 소개: 모드 헤더 · 규칙 카드(번호 3줄) · 참가자 슬롯 · 하단 상태 바 */
.ms-intro { gap: 14px; justify-content: center; max-width: 620px; margin: 0 auto; width: 100%; }
.ms-head { display: flex; align-items: center; gap: 14px; align-self: stretch; text-align: left; animation: rise .4s ease-out; }
.ms-head .ms-icon { width: 64px; flex: none; }
.ms-head h2 { margin: 0; font-family: var(--head, serif); font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.1; color: #fff; letter-spacing: .04em; }
.ms-mode { margin: 0 0 2px; font-size: .7rem; letter-spacing: .2em; color: var(--mg-accent); }
.ms-sub { margin: 4px 0 0; color: var(--mg-dim); font-size: .92rem; }
.ms-card { align-self: stretch; padding: 12px 14px; border: 1px solid var(--mg-line); border-radius: var(--r-s, 4px); background: var(--mg-panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 0 0 3px rgba(0, 0, 0, .25); text-align: left; }
.ms-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ms-rows li { display: grid; grid-template-columns: 22px auto 1fr; align-items: baseline; gap: 8px; font-size: .93rem; line-height: 1.45; color: var(--mg-text); }
.ms-no { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--mg-accent); border-radius: 2px; color: var(--mg-hi); font-size: .75rem; font-weight: 800; align-self: center; }
.ms-rows b { color: var(--mg-hi); font-weight: 700; white-space: nowrap; }
.ms-rows-txt { margin: 0; color: var(--mg-text); line-height: 1.5; }
.ms-card .ms-hint { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid rgba(201, 164, 92, .18); display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 400; color: var(--mg-dim); }
.ms-tag { padding: 1px 6px; border: 1px solid var(--mg-line); border-radius: 2px; font-size: .7rem; color: var(--mg-hi); letter-spacing: .1em; }
.ms-line { gap: 8px; }
.ms-who { padding: 6px 6px 0; border: 1px solid rgba(255, 255, 255, .08); border-bottom: 3px solid var(--pc); border-radius: var(--r-s, 4px); background: #141b24; display: grid; justify-items: center; gap: 2px; }
.ms-who .sc { width: clamp(48px, 13vw, 76px); height: clamp(56px, 15vw, 90px); }
.ms-who b { margin: 0 0 4px; padding: 0 6px; border-radius: 2px; background: var(--pc); color: #0b1016; font-size: .72rem; font-weight: 800; text-shadow: none; }
.ms-who.me { border-color: var(--mg-accent); border-bottom-color: var(--pc); box-shadow: 0 0 0 1px var(--mg-accent); }
.ms-who.me .sc { filter: none; }
.ms-foot { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ms-foot .mg-turn { margin: 0; }
.ms-foot .ms-go { min-width: 140px; }
.ms-status { position: relative; padding: 6px 2px 10px; color: var(--mg-dim); font-size: .85rem; }
.ms-status .ms-cd { color: var(--mg-hi); font-size: 1.05rem; }
.ms-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .1); }
.ms-bar i { display: block; height: 100%; width: 100%; background: var(--mg-accent); transform-origin: left; animation: msBar 2.8s linear forwards; }
@keyframes msBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mini-overlay.stage .mini-card:not(.choice-card) .mg-hud { margin: -4px -4px 10px; }
.mini-overlay.stage .mini-card:not(.choice-card) #choiceGo { margin-top: 10px; min-width: 160px; }
.ms-intro { max-width: none; }
.ms-intro > .ms-head, .ms-intro > .ms-card, .ms-intro > .ms-foot { width: 100%; max-width: 620px; align-self: center; }
.race-stage .lane-tag { font-size: min(calc(.68rem * var(--u, 1)), .95rem); font-weight: 800; padding: 1px 6px; border-radius: 2px; background: rgba(11, 16, 22, .75); border-left: 3px solid currentColor; line-height: 1.4; }
.race-stage .race-jump { padding: 12px 0; font-size: 1.05rem; }
.race-stage .race-jump .ico { color: currentColor; }
.race-stage .mini-note { font-size: .8rem; opacity: .8; }

/* ================= 🎨 미니게임 테마: 같은 부품 · 게임마다 색·재질·문양 하나씩 ================= */
.mini-overlay.stage::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mini-overlay.stage[data-game] .ms-roulette, .mini-overlay.stage[data-game] .ms-intro, .mini-overlay.stage[data-game] .ms-result { background: transparent; }

/* 🏁 장애물 달리기 — 차분한 경기장 (재질: 트랙 · 강조: 금색) */
.mini-overlay.stage[data-game="race"] { background: radial-gradient(ellipse at 50% 0%, #1b2a3a 0%, #0e1620 55%, #080d13 100%); }
.mini-overlay.stage[data-game="race"]::before { background: repeating-linear-gradient(90deg, transparent 0 79px, rgba(255, 255, 255, .025) 79px 80px); }
.race-stage .lane { background: linear-gradient(#5d7f98, #a5bccb 72%); border: 1px solid rgba(255, 255, 255, .18); }
.race-stage .lane.me { background: linear-gradient(#6a8fab, #b4cad8 72%); }
.race-stage .lane .hills { filter: saturate(.55) brightness(.9); opacity: .8; }
.race-stage .mini-note { color: #c9d3de; opacity: 1; text-shadow: none; }

/* 🧊 얼음 호수 — 겨울밤 얼음판 (재질: 반투명 얼음 · 강조: 청백색 + 작은 금색 점) */
.mini-overlay.stage[data-game="bridge"] { --mg-accent: #cfe6f5; --mg-hi: #eef8ff; --frame: #cfe6f5; --gold-hi: #eef8ff; --accent: #cfe6f5; --mg-line: rgba(190, 225, 250, .32); --mg-panel: rgba(8, 20, 32, .86);
  background: radial-gradient(ellipse 70% 60% at 50% 48%, #173049 0%, #0c1c2c 55%, #050b12 100%); color: #e6eef5; }
.mini-overlay.stage[data-game="bridge"]::before { background: radial-gradient(circle, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px) 0 0 / 97px 83px, radial-gradient(circle, rgba(255, 255, 255, .35) 0 1px, transparent 1.5px) 40px 30px / 131px 109px; opacity: .35; }
.mini-overlay.stage[data-game="bridge"] .choice-card { text-shadow: none; }
.mini-overlay.stage[data-game="bridge"] .bridge { position: relative; }
.mini-overlay.stage[data-game="bridge"] .bridge::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 47.9%, rgba(225, 242, 255, .22) 48%, transparent 48.25%), linear-gradient(96deg, transparent 61%, rgba(225, 242, 255, .14) 61.1%, transparent 61.3%); }
.mini-overlay.stage[data-game="bridge"] .bridge .glass { position: relative; border-radius: 3px; border: 1px solid rgba(215, 238, 255, .32);
  background: linear-gradient(158deg, rgba(225, 242, 255, .5) 0%, rgba(160, 205, 235, .26) 45%, rgba(90, 140, 185, .2) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -10px 18px rgba(8, 30, 60, .45); filter: saturate(.7) brightness(.78); transition: filter .2s; }
.mini-overlay.stage[data-game="bridge"] .bridge .glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, .22) 41%, transparent 43%), linear-gradient(60deg, transparent 62%, rgba(255, 255, 255, .14) 63%, transparent 64.5%); }
.mini-overlay.stage[data-game="bridge"] .bridge .glass:nth-child(3n) { background-color: rgba(200, 230, 250, .06); }
.mini-overlay.stage[data-game="bridge"] .bridge .glass:nth-child(4n+1)::before { transform: scaleX(-1); }
.mini-overlay.stage[data-game="bridge"] .bridge .glass.now { filter: none; border-color: rgba(240, 250, 255, .9); box-shadow: inset 0 1px 0 #fff, inset 0 -10px 18px rgba(8, 30, 60, .35), 0 0 0 1px rgba(240, 250, 255, .5), 0 0 16px rgba(190, 230, 255, .3); }
.mini-overlay.stage[data-game="bridge"] .bridge .glass.now::after { content: ''; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); background: var(--gold-hi-real, #ecd08f); box-shadow: 0 0 6px rgba(236, 208, 143, .7); }
.mini-overlay.stage[data-game="bridge"] .bridge .glass:has(.sc) { filter: saturate(.85) brightness(.95); }
.mini-overlay.stage[data-game="bridge"] .bridge .glass.broken { filter: none; border: 1px dashed rgba(200, 230, 255, .28); box-shadow: none;
  background: radial-gradient(ellipse at 50% 55%, #04101c 0 38%, transparent 40%), repeating-conic-gradient(from 12deg at 50% 55%, rgba(210, 235, 255, .32) 0 8deg, transparent 8deg 40deg); }
.mini-overlay.stage[data-game="bridge"] .bridge .glass.broken::after { content: ''; position: absolute; left: 50%; top: 55%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #d9534f; }
.mini-overlay.stage[data-game="bridge"] .bridge .water { border-radius: 3px; background: linear-gradient(#081a2d, #040d18); border: 1px solid rgba(120, 170, 210, .12); }
.mini-overlay.stage[data-game="bridge"] .bridge .plat { border-radius: 3px; background: linear-gradient(#22354a, #16243a); color: var(--mg-hi); border: 1px solid rgba(215, 238, 255, .22); box-shadow: inset 0 2px 0 rgba(235, 245, 255, .25); }

/* 🤠 서부 결투 — 먹색 · 가죽 (재질: 가죽 + 황동 모서리 · 강조: 황동) */
.mini-overlay.stage[data-game="duel"] { --mg-accent: #b8894a; --mg-hi: #e3c48e; --frame: #b8894a; --gold-hi: #e3c48e; --accent: #b8894a; --mg-line: rgba(184, 137, 74, .45); --mg-panel: rgba(30, 21, 16, .9);
  background: radial-gradient(ellipse at 50% 30%, #2b2019 0%, #17110d 60%, #0c0907 100%); }
.mini-overlay.stage[data-game="duel"]::before { background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 235, 200, .018) 3px 4px); }
.mini-overlay.stage[data-game="duel"] .mg-hud, .mini-overlay.stage[data-game="duel"] .ms-card, .mini-overlay.stage[data-game="duel"] .ms-icon {
  background-image: linear-gradient(135deg, var(--mg-accent) 0 6px, transparent 6px), linear-gradient(225deg, var(--mg-accent) 0 6px, transparent 6px), linear-gradient(45deg, var(--mg-accent) 0 6px, transparent 6px), linear-gradient(315deg, var(--mg-accent) 0 6px, transparent 6px);
  background-repeat: no-repeat; background-size: 8px 8px; background-position: 0 0, 100% 0, 0 100%, 100% 100%; background-color: var(--mg-panel); }
.duel-stage { background: linear-gradient(#17110f 0%, #2a1f1a 38%, #4a3627 62%, #6b5540 100%); }
.dz-sun { width: min(22vmin, 170px); background: radial-gradient(circle, #e9c89a 0 52%, #c68f58 68%, transparent 71%); box-shadow: 0 0 60px 18px rgba(198, 143, 88, .22); opacity: .85; }
.dz-mesa { background: #241913; }
.dz-mesa.b { background: #2c1e17; }
.dz-ground { background: linear-gradient(#7c6450, #5f4b3b 60%, #4a3a2e); box-shadow: inset 0 2px 0 rgba(230, 205, 170, .25); }
.dz-weed { border-color: #3d2d1f; }
.duel-cue { color: #eadbc2; text-shadow: 0 3px 0 #0c0907, 0 0 24px rgba(0, 0, 0, .5); }
.duel-cue.round, .duel-cue.good { color: #e3c48e; }
.duel-cue.real { color: #e0463a; text-shadow: 0 3px 0 #0c0907, 0 0 30px rgba(224, 70, 58, .45); }
.duel-cue.bad { color: #e0806a; }
.duel-shots i { border-color: #b8894a; }
.duel-shots i.ok { background: #b8894a; }
.duel-me b, .duel-foe b { background: rgba(30, 21, 16, .85); color: #eadbc2; border-color: rgba(184, 137, 74, .45); }
.duel-stage .mini-note { color: #cdbca3; }

/* 💣 숫자 폭탄 — 건메탈 · 올리브 (재질: 금속 + LED · 강조: 청록 / 경고 호박 / 긴급만 적색) */
.mini-overlay.stage[data-game="bomb"] { --mg-accent: #4fb3a5; --mg-hi: #a6e3da; --frame: #4fb3a5; --gold-hi: #a6e3da; --accent: #4fb3a5; --mg-line: rgba(120, 150, 140, .35); --mg-panel: rgba(16, 19, 18, .92);
  background: radial-gradient(ellipse at 50% 42%, #22281f 0%, #121512 58%, #080908 100%); }
.mini-overlay.stage[data-game="bomb"]::before { background: linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px) 0 0 / 100% 48px, linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px) 0 0 / 96px 100%; }
.bomb-stage { background: none; }
.bomb-hud .bomb-n { color: var(--mg-text); font-weight: 400; }
.bomb-hud .bomb-n em { font-style: normal; font-weight: 800; color: var(--mg-hi); }
.bomb-time { min-width: 3.2em; text-align: right; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-weight: 700; font-size: 1.05rem; color: #e0a030; font-variant-numeric: tabular-nums; }
.bomb-stage.urgent .bomb-time { color: #e0463a; animation: bombUrg .5s steps(1) infinite; }
@keyframes bombUrg { 50% { opacity: .45; } }
.bomb-fuse { height: 4px; background: rgba(255, 255, 255, .08); }
.bomb-fuse i { background: #4fb3a5; animation: bombFuseCol var(--fuse, 4s) linear forwards; }
@keyframes bombFuseCol { 0%, 55% { background: #4fb3a5; } 65%, 80% { background: #e0a030; } 90%, 100% { background: #e0463a; } }
.bomb-svg circle:first-of-type { fill: #23292a; }
.bomb-led { background: #e0a030; box-shadow: 0 0 10px #e0a030; animation: bombLed .5s steps(1) infinite, bombLedCol var(--fuse, 4s) linear forwards; }
@keyframes bombLedCol { 0%, 64% { background: #e0a030; box-shadow: 0 0 10px #e0a030; } 65%, 100% { background: #e0463a; box-shadow: 0 0 14px #e0463a; } }
.bomb.safe .bomb-led { background: #4fb3a5; box-shadow: 0 0 12px #4fb3a5; animation: none; }
.bomb-q { color: #e8ece8; }
.bomb.boom .bomb-q { color: #e0a030; }
.wire { background: linear-gradient(#1b201f, #121615); border-color: rgba(120, 150, 140, .3); }
.wire i { height: 12px; }
.wire b { color: #e8ece8; }
.wire:hover { border-color: var(--mg-accent); }
.wire.right { box-shadow: 0 0 0 2px #4fb3a5; }
.bomb-flash { background: #e0a030; }
.bomb-stage .mini-note { color: #aab3ad; opacity: 1; }

/* 🎭 심리전 — 검은 보라 · 희미한 체스판과 원 (재질: 차콜 카드 · 강조: 금색) */
.mini-overlay.stage[data-game="psych"] { background: radial-gradient(ellipse at 50% 45%, #1e1628 0%, #120d19 55%, #08060c 100%); }
.mini-overlay.stage[data-game="psych"]::before { background: radial-gradient(circle at 50% 46%, transparent 0 calc(30vmin - 1px), rgba(201, 164, 92, .12) 30vmin, transparent calc(30vmin + 1px)), repeating-conic-gradient(rgba(255, 255, 255, .03) 0 25%, transparent 0 50%) 50% 46% / 72px 72px;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 0, transparent 62%); mask-image: radial-gradient(circle at 50% 46%, #000 0, transparent 62%); }
.mini-overlay.stage[data-game="psych"] .pad { background: #17131d; border: 1px solid rgba(201, 164, 92, .25); border-radius: var(--r-s, 4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.mini-overlay.stage[data-game="psych"] .pad b { color: var(--mg-hi); font-family: var(--head, serif); }
.mini-overlay.stage[data-game="psych"] .pad.ok { background: linear-gradient(#17221d, #131a17); border-color: #6fbf8f; }
.mini-overlay.stage[data-game="psych"] .pad.ok em { color: #9fe0b8; }
.mini-overlay.stage[data-game="psych"] .pad.clash { background: linear-gradient(#24151a, #1a1115); border-color: #c0504a; }
.mini-overlay.stage[data-game="psych"] .pad.clash em { color: #e8938c; }
.mini-overlay.stage[data-game="psych"] .tt-line { border-bottom-color: rgba(201, 164, 92, .5); }

/* 🍎 2D 기울기 모드 (iPad·iPhone·Safari): 3D 변환 없이 판을 세로로 눌러 기울어진 것처럼, 말은 반대로 펴서 똑바로 */
.flat3d .stage { perspective: none; }
.flat3d .board { transform-style: flat; transform: translateY(var(--lift)) scale(var(--zoom, 1)) scaleY(var(--k, 1)) rotate(var(--ang)) translate(var(--tx), var(--ty));
  transition: --ang .9s cubic-bezier(.4, .1, .2, 1), --k .9s ease, --zoom .9s ease, --tx .9s ease, --ty .9s ease, --lift .9s ease; }
.flat3d #pieces, .flat3d .piece { transform-style: flat; }
.flat3d .fx { transform: none; }
.flat3d .piece .facing { transform: rotate(var(--face, 0deg)); }
.flat3d .piece .stand { transform: rotate(calc(var(--ang) * -1)) scaleY(calc(1 / var(--k, 1))); }

/* 🌑 어둠 상태 칩 · 숨은 등대지기 표시 */
.dark-chip { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 5px 12px; border: 1px solid rgba(201, 164, 92, .45); border-radius: var(--r-s, 4px); background: rgba(11, 16, 22, .88); color: #cfd6e4; font-size: .82rem; white-space: nowrap; pointer-events: none; }
.dark-chip b { color: var(--gold-hi, #ecd08f); }
.dark-chip span { overflow: hidden; text-overflow: ellipsis; }
.dark-chip em { font-style: normal; font-weight: 800; color: var(--gold-hi, #ecd08f); font-variant-numeric: tabular-nums; }
.dark-chip .ico { color: var(--frame, #c9a45c); }
.dark-chip.mine { border-color: var(--frame, #c9a45c); box-shadow: 0 0 0 1px var(--frame, #c9a45c), 0 0 14px rgba(201, 164, 92, .3); }
.piece.hiding .avatar, .piece.hiding .stand > svg, .piece.hiding .stand .sc { opacity: .62; filter: drop-shadow(0 0 4px #ecd08f); }
.piece.hiding .stand::before { content: '은신'; order: -1; flex-shrink: 0; margin-bottom: 2px; padding: 1px 8px 2px; border: 1px solid #c9a45c; border-radius: 2px; background: rgba(11, 16, 22, .92); color: #ecd08f; font-family: var(--head, serif); font-size: max(13px, calc(var(--cell) * .26)); font-weight: 700; letter-spacing: .18em; line-height: 1.25; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); -webkit-font-smoothing: antialiased; }
@media (max-width: 560px) { .dark-chip { left: 10px; right: 10px; transform: none; margin: 0 auto; width: fit-content; max-width: none; top: 44px; flex-wrap: wrap; justify-content: center; white-space: normal; text-align: center; row-gap: 2px; font-size: .78rem; } .dark-chip span { flex-basis: 100%; order: 3; } }
/* 가로 태블릿(폭 900~1099): 3단 레이아웃을 좁게 — 행동 버튼이 화면 아래로 밀려나지 않게 */
@media (min-width: 900px) and (max-width: 1099px) and (orientation: landscape) {
  .layout { grid-template-columns: 176px minmax(0, 1fr) 292px; }
  #turnPanel { margin: 8px 8px 0; }
}
/* 높이가 낮은 가로 화면: 도움말을 접고 버튼을 줄여 행동 버튼이 한 화면에 들어오게 (넘치면 패널만 스크롤) */
@media (orientation: landscape) and (max-height: 700px) and (min-width: 900px) {
  .layout { grid-template-rows: auto minmax(0, 1fr); }
  #playerList { grid-row: 1; }
  .layout .log { grid-column: 1; grid-row: 2; margin: 0; padding: 0 10px 10px; background: var(--bg2); border-right: 1px solid var(--line); border-top: 1px solid var(--line); font-size: .8rem; }
  #turnPanel { grid-row: 1 / span 2; overflow-y: auto; min-height: 0; margin-bottom: 8px; }
  #turnPanel .hint, #turnPanel .aim-box > small { display: none; }
  #turnPanel .act { padding: 8px 10px; }
  #turnPanel .act small { font-size: .72rem; line-height: 1.3; }
}
.piece.hiding .stand { height: calc(var(--cell) * 1.25 + max(13px, calc(var(--cell) * .26)) * 1.25 + 8px); }
/* 가로 휴대폰처럼 아주 낮은 화면: 버튼 설명을 접고 조준 영역을 줄여 네 버튼이 한 화면에 */
@media (orientation: landscape) and (max-height: 480px) and (min-width: 900px) {
  .topbar { min-height: 0; padding-top: 4px; padding-bottom: 4px; }
  #turnPanel .turn-head { margin-bottom: 6px; }
  #turnPanel .turn-head .mini-ch, #turnPanel .turn-head .big { display: none; }
  #turnPanel .aim-box { padding: 6px 8px; }
  #turnPanel .rot-btns button { padding: 4px 0; }
  #turnPanel .act { min-height: 0; padding: 6px 8px; }
  #turnPanel .act small { display: none; }
  #turnPanel .act br { display: none; }
}
.mini-overlay.stage .mini-card:not(.choice-card) { margin: 16px; width: calc(100% - 32px); max-width: 440px; }
.copyright { display: block; margin: 6px 0 0; font-size: .72rem; letter-spacing: .04em; color: var(--muted, #9aa3bd); opacity: .75; }