/* Phaser 캔버스 아래에 레이스 인벤·여백(민트 그리드) */
.pyo-app-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100vh;
    /* 100vw 는 모바일에서 스크롤바 포함 폭이라 레이아웃보다 커져 초기 ‘확대’처럼 보일 수 있음 → 100% */
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.pyo-race-hud {
    flex: 0 0 auto;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 10px 16px 12px;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid rgba(147, 197, 253, 0.55);
    box-shadow: 0 -2px 14px rgba(30, 64, 175, 0.06);
}

.pyo-race-hud-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.pyo-race-hud-line1 {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.45;
}

.pyo-race-hud-line2 {
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
    font-family: ui-monospace, monospace;
}

.pyo-race-hud-grace {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 800;
    color: #c2410c;
}

.pyo-race-hud-reverse {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 800;
    color: #6d28d9;
}

/* 반전 잔여 시간은 RaceScene 중앙 오버레이로만 표시(자동 중력 카운트와 겹침 방지) */
body.pyo-phase-racing .pyo-race-hud-reverse {
    display: none !important;
}

.pyo-race-hud-lockon {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #0e7490;
}

.pyo-race-inventory {
    flex: 0 0 auto;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 10px 16px 14px;
    background: rgba(255, 255, 255, 0.94);
    border-top: 1px solid rgba(34, 197, 94, 0.22);
    box-shadow: 0 -4px 18px rgba(15, 118, 110, 0.06);
}

.pyo-race-inv-inner {
    max-width: 960px;
    margin: 0 auto;
}

/* 레이스 중: 캔버스(#game-root)와 동일 가로로 인벤·HUD 본문 폭 맞춤 */
body.pyo-phase-racing .pyo-race-inv-inner {
    max-width: 100%;
    width: 100%;
}

body.pyo-phase-racing .pyo-race-hud-inner {
    max-width: 100%;
    width: 100%;
}

.pyo-race-inv-head {
    font-size: 12px;
    font-weight: 800;
    color: #14532d;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.pyo-race-inv-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px 10px;
}

@media (max-width: 1200px) {
    .pyo-race-inv-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .pyo-race-inv-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .pyo-race-inv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pyo-race-inv-slot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.pyo-race-inv-slot--tap {
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.pyo-race-inv-slot--tap:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.pyo-race-inv-slot--tap:active {
    background: #e2e8f0;
}

.pyo-race-inv-slot--tap.pyo-race-inv-slot--empty {
    cursor: default;
    opacity: 0.72;
}

.pyo-race-inv-slot--tap.pyo-race-inv-slot--empty:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.pyo-race-inv-key {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    background: #dcfce7;
    color: #166534;
    font-family: ui-monospace, monospace;
}

.pyo-race-inv-label {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
}

.pyo-race-inv-count {
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
}

.pyo-race-inv-hint {
    margin-top: 8px;
    font-size: 11px;
    color: #64748b;
}

/* 인벤 바로 아래에 채팅 붙임 (긴 한 줄) */
.pyo-race-chat-host {
    flex: 0 0 auto;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 16px 10px;
    background: rgba(255, 255, 255, 0.94);
}

.pyo-race-inventory:has(+ .pyo-race-chat-host:not([hidden])) {
    padding-bottom: 6px;
    box-shadow: none;
}

.pyo-chat-dock.pyo-chat-dock--race-below-inv {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin: 0;
    max-height: min(32vh, 300px);
    border-radius: 0 0 14px 14px;
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-top: none;
    box-shadow: 0 6px 20px rgba(15, 118, 110, 0.07);
}

/* 인벤 숨김(결과 등)일 때는 채팅 블록을 단독 카드처럼 */
.pyo-race-inventory[hidden] + .pyo-race-chat-host:not([hidden]) {
    padding-top: 10px;
    border-top: 1px solid rgba(147, 197, 253, 0.45);
}

.pyo-race-inventory[hidden] + .pyo-race-chat-host:not([hidden]) .pyo-chat-dock.pyo-chat-dock--race-below-inv {
    border-top: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: 14px;
}

body.pyo-phase-racing .pyo-chat-dock:not(.pyo-chat-dock--embedded):not(.pyo-chat-dock--race-below-inv) {
    bottom: 220px;
}

html {
    overflow-x: hidden;
    /* iOS Safari 글자 자동 확대(레이아웃이 살짝 확대된 것처럼 보이는 현상) 완화 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    height: 100%;
    background: #d8f5e6;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.55) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.45) 1px, transparent 1px);
    background-size: 32px 32px;
    color: #0f172a;
    font-family: "Pretendard", "Noto Sans KR", sans-serif;
}

#game-root {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: min(1280px, 100%);
    overflow-x: hidden;
    margin: 0 auto;
    /* Phaser.Scale.FIT 기준: 논리 1280×720이 이 박스 안에 비율 유지로 들어감 */
    aspect-ratio: 16 / 9;
    position: relative;
    z-index: 0;
    pointer-events: none;
}

#game-root canvas,
#game-root > * {
    pointer-events: none;
}

#game-root canvas {
    max-width: 100%;
    vertical-align: top;
}

/* 모바일 크롬 등: flex 안 aspect-ratio 높이가 0으로 떨어지는 경우 캔버스 영역 확보 */
@media (max-width: 1023px) {
    #game-root {
        min-height: calc(100vw * 9 / 16);
    }
}

/* Phaser ENVELOP: 캔버스가 부모보다 커질 수 있음 — max-width 100% 가 막으면 위·아래 띠만 계속 보임 */
body.pyo-phase-racing #game-root canvas,
body.pyo-phase-result #game-root canvas {
    max-width: none !important;
    max-height: none !important;
}

body.pyo-phase-racing #game-root,
body.pyo-phase-racing #game-root canvas,
body.pyo-phase-racing #game-root > * {
    pointer-events: auto;
}

/* 레이스 중 터치 스크롤 방지(폭은 뷰포트별 미디어쿼리) */
body.pyo-phase-racing #game-root {
    touch-action: none;
    /* Phaser 카메라 하늘색과 맞춰 남는 1~2px 띠가 민트로 보이지 않게 */
    background: #dbe8f5;
}

body.pyo-phase-result #game-root,
body.pyo-phase-result #game-root canvas {
    pointer-events: auto;
}

/* 결과(리더보드): 모바일에서도 #game-root가 세로를 먹고 ENVELOP이 실제로 먹도록 */
@media (max-width: 1023px) {
    body.pyo-phase-result {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    body.pyo-phase-result .pyo-app-stack {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    body.pyo-phase-result #game-root {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        max-width: 100%;
        aspect-ratio: unset;
        overflow: hidden;
    }
}

/*
 * PC 레이스: 월드 논리 폭(960)과 Phaser setGameSize(960,720)에 맞춰 캔버스·하단 UI 동일 폭
 * (1280 고정 시 캔버스 안만 좁고 바깥 UI는 넓어져 빈 공간처럼 보이던 문제 방지)
 */
@media (min-width: 1024px) {
    body.pyo-phase-racing #game-root {
        max-width: 960px;
        width: min(100%, 960px);
        /* Phaser 레이스 논리 960×720 과 동일 비율 — 16:9 박스면 좌우 빈 여백 발생 */
        aspect-ratio: 4 / 3;
        margin-left: auto;
        margin-right: auto;
    }

    body.pyo-phase-racing .pyo-race-hud,
    body.pyo-phase-racing .pyo-race-inventory,
    body.pyo-phase-racing .pyo-race-chat-host {
        max-width: 960px;
        width: min(100%, 960px);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    body.pyo-phase-racing .pyo-race-hud-inner {
        max-width: 100%;
    }
}

/* 좁은 화면(태블릿·폰): 남는 세로를 게임에 할당, HUD·인벤·채팅은 하단에 붙여 한 덩어리 */
@media (max-width: 1023px) {
    body.pyo-phase-racing {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    body.pyo-phase-racing .pyo-app-stack {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
    }

    /*
     * 가로는 그대로(100% / max 960), 세로는 flex로 남는 공간까지 확장 → Phaser FIT이 더 크게 스케일
     */
    body.pyo-phase-racing #game-root {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        max-width: min(960px, 100%);
        margin-left: auto;
        margin-right: auto;
        aspect-ratio: unset;
        height: auto;
        max-height: none;
        overflow: hidden;
    }

    body.pyo-phase-racing .pyo-race-hud {
        flex: 0 0 auto;
        /* 캔버스와 HUD 사이 빈 느낌 줄이기 */
        margin-top: -8px;
        padding: 4px 8px 4px;
    }

    body.pyo-phase-racing .pyo-race-inventory:has(+ .pyo-race-chat-host:not([hidden])) {
        padding-bottom: 0;
    }

    body.pyo-phase-racing .pyo-race-inventory {
        margin-top: -4px;
        padding: 3px 8px 4px;
    }

    body.pyo-phase-racing .pyo-race-chat-host {
        flex: 0 0 auto;
        margin-top: 0;
        padding: 0 8px max(6px, env(safe-area-inset-bottom, 0px));
    }

    body.pyo-phase-racing .pyo-chat-dock.pyo-chat-dock--race-below-inv {
        border-radius: 0;
        box-shadow: none;
        border-left: none;
        border-right: none;
        border-bottom: none;
        max-height: min(32vh, 248px);
        min-height: 0;
    }

    /* 좁은 max-height 안에서 .pyo-chat-log min-height:80px 가 flex를 밀어 첫 줄(닉·시간)이 잘림 → 0으로 스크롤 영역 확보 */
    body.pyo-phase-racing .pyo-chat-dock.pyo-chat-dock--race-below-inv .pyo-chat-log {
        min-height: 0;
        flex: 1 1 auto;
        padding-top: 10px;
        scroll-padding-top: 8px;
    }

    body.pyo-phase-racing .pyo-chat-dock.pyo-chat-dock--race-below-inv .pyo-chat-head {
        padding: 5px 10px;
        flex-shrink: 0;
    }

    body.pyo-phase-racing .pyo-chat-dock.pyo-chat-dock--race-below-inv .pyo-chat-inputrow {
        padding: 6px 8px;
        flex-shrink: 0;
    }

    body.pyo-phase-racing .pyo-chat-dock.pyo-chat-dock--race-below-inv .pyo-chat-input {
        min-height: 40px;
        padding: 8px 10px;
        font-size: 16px;
    }

    body.pyo-phase-racing .pyo-race-hud,
    body.pyo-phase-racing .pyo-race-inventory,
    body.pyo-phase-racing .pyo-race-chat-host {
        max-width: min(960px, 100%);
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    body.pyo-phase-racing .pyo-race-hud-inner {
        max-width: 100%;
        text-align: center;
    }

    body.pyo-phase-racing .pyo-race-hud-line1 {
        font-size: 11px;
        line-height: 1.35;
    }

    body.pyo-phase-racing .pyo-race-hud-line2 {
        font-size: 9px;
        margin-top: 2px;
    }

    body.pyo-phase-racing .pyo-race-hud-grace,
    body.pyo-phase-racing .pyo-race-hud-reverse,
    body.pyo-phase-racing .pyo-race-hud-lockon {
        font-size: 10px;
        margin-top: 3px;
    }

    body.pyo-phase-racing .pyo-race-inv-head {
        font-size: 9px;
        margin-bottom: 3px;
    }

    /* 폰에서 2열 대형 카드 방지: 7슬롯 한 줄 + 컴팩트 */
    body.pyo-phase-racing .pyo-race-inv-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 3px 4px;
    }

    body.pyo-phase-racing .pyo-race-inv-slot {
        padding: 3px 4px;
        gap: 1px;
        border-radius: 6px;
    }

    body.pyo-phase-racing .pyo-race-inv-key {
        font-size: 7px;
        padding: 1px 3px;
        border-radius: 4px;
    }

    body.pyo-phase-racing .pyo-race-inv-label {
        font-size: 8px;
        line-height: 1.15;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.pyo-phase-racing .pyo-race-inv-count {
        font-size: 10px;
    }

    body.pyo-phase-racing .pyo-race-inv-hint {
        font-size: 8px;
        margin-top: 3px;
        line-height: 1.3;
    }
}

@supports (height: 1dvh) {
    @media (max-width: 1023px) {
        body.pyo-phase-racing {
            min-height: 100dvh;
        }

        body.pyo-phase-result {
            min-height: 100dvh;
        }

        body.pyo-phase-racing .pyo-chat-dock.pyo-chat-dock--race-below-inv {
            max-height: min(32dvh, 248px);
        }
    }
}

@media (max-width: 420px) {
    body.pyo-phase-racing .pyo-race-hud-line2 {
        display: none;
    }

    /* 초소형 폭: 인벤 힌트 숨김으로 게임 영역 확보 */
    body.pyo-phase-racing .pyo-race-inv-hint {
        display: none;
    }
}

canvas {
    display: block;
    margin: 0 auto;
}

/* —— 로비 (밝은 톤 · 끄투형 구조) —— */
.pyo-lobby-shell {
    position: fixed;
    inset: 0;
    z-index: 55;
    pointer-events: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-x: hidden;
    max-width: 100%;
    touch-action: manipulation;
}

.pyo-lobby-shell--in-room .pyo-lobby-vignette {
    box-shadow: inset 0 0 100px rgba(74, 222, 128, 0.12);
}

/* 풀 화면 전환: 메인 로비 ↔ 방 (끄투처럼 다른 화면) */
.fs-page-stack {
    position: relative;
    flex: 1;
    min-height: 0;
    z-index: 1;
    pointer-events: none;
}

.fs-page {
    position: absolute;
    inset: 0;
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 100%;
    padding-bottom: 100px;
    box-sizing: border-box;
    pointer-events: auto;
    transition:
        opacity 0.38s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.35s ease;
}

.fs-page--home {
    z-index: 1;
    opacity: 1;
    transform: translateX(0) scale(1);
}

.fs-page--room {
    z-index: 2;
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    pointer-events: none;
    filter: saturate(0.85);
}

.fs-shell--room .fs-page--home {
    opacity: 0;
    transform: translateX(-6%) scale(0.98);
    pointer-events: none;
    filter: blur(1px);
}

.fs-shell--room .fs-page--room {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    filter: none;
}

.fs-room-page-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 55% at 50% -10%, rgba(254, 249, 195, 0.9) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 90% 80%, rgba(186, 230, 253, 0.5) 0%, transparent 45%),
        linear-gradient(165deg, #ecfdf5 0%, #d1fae5 38%, #fef9c3 100%);
    pointer-events: none;
}

.fs-room-page-inner {
    position: relative;
    z-index: 1;
    max-width: 920px;
    margin: 0 auto;
    padding: 12px 14px 24px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.fs-room-page-decor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.fs-room-logo {
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 118, 110, 0.15);
    border: 3px solid #fff;
}

.fs-room-intro {
    text-align: center;
}

.fs-room-intro-title {
    font-size: 24px;
    font-weight: 900;
    color: #15803d;
    letter-spacing: -0.02em;
}

.fs-room-intro-sub {
    margin: 6px 0 0;
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

.fs-transition-curtain {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
    opacity: 0;
    background: #fff;
}

.fs-transition-curtain.fs-curtain--enter {
    animation: fsCurtainEnter 0.34s ease-in-out forwards;
}

.fs-transition-curtain.fs-curtain--leave {
    animation: fsCurtainLeave 0.26s ease-in-out forwards;
}

@keyframes fsCurtainEnter {
    0% {
        opacity: 0;
    }

    42% {
        opacity: 0.92;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fsCurtainLeave {
    0% {
        opacity: 0;
        background: #ecfdf5;
    }

    35% {
        opacity: 0.55;
    }

    100% {
        opacity: 0;
    }
}

/* 로비 상태: 카드 안(가운데 또는 방 화면) — 채팅과 겹치지 않음 */
.fs-status-in-card {
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    flex-shrink: 0;
    max-height: 88px;
    overflow-y: auto;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-line;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    min-height: auto;
}

/* 방 화면: 상태 안내를 준비 버튼 바로 위에 두고 가독성 강화 */
#fs-lobby-inroom > .fs-status-in-card {
    margin-top: 0;
    margin-bottom: 12px;
    max-height: 140px;
    min-height: 48px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #0f172a;
    background: linear-gradient(180deg, #fef3c7 0%, #fde68a 55%, #fcd34d 100%);
    border: 2px solid #f59e0b;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}

.fs-room-page-inner > .fs-status-in-card {
    margin-top: 14px;
}

.fs-nav-brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}

.fs-nav-brand--solo {
    flex-direction: row;
    align-items: baseline;
    font-size: 19px;
    font-weight: 900;
    color: #166534;
    letter-spacing: -0.03em;
}

.pyo-lobby-topbar {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    padding: 20px 16px 10px;
    pointer-events: none;
}

.pyo-lobby-brand {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px 12px 14px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(34, 197, 94, 0.22);
    box-shadow:
        0 4px 6px rgba(15, 118, 110, 0.06),
        0 14px 32px rgba(15, 118, 110, 0.1);
}

.pyo-lobby-brand__mark {
    display: block;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 14px;
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.pyo-lobby-brand__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.pyo-lobby-brand__title {
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: #166534;
}

.pyo-lobby-brand__tag {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.01em;
}

.pyo-lobby-brand__room {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0f766e;
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ccfbf1 0%, #99f6e4 100%);
    border: 1px solid rgba(13, 148, 136, 0.35);
}

.pyo-lobby-brand__room[hidden] {
    display: none !important;
}

.pyo-lobby-shell--in-room .pyo-lobby-brand {
    border-color: rgba(34, 197, 94, 0.35);
    box-shadow:
        0 4px 8px rgba(22, 101, 52, 0.08),
        0 16px 36px rgba(34, 197, 94, 0.12);
}

.pyo-lobby-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(255, 255, 255, 0.35) 0%, transparent 65%);
}

.pyo-lobby-layout {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 8px 16px 28px;
    box-sizing: border-box;
    flex: 1;
    min-height: 0;
    display: block;
    pointer-events: none;
}

.pyo-lobby-card {
    pointer-events: auto;
    border-radius: 16px;
    padding: 18px 18px;
    background: #ffffff;
    border: 1px solid rgba(34, 197, 94, 0.18);
    box-shadow: 0 10px 36px rgba(15, 118, 110, 0.08);
}

.pyo-card-title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 800;
    color: #14532d;
}

.pyo-field-label {
    font-size: 12px;
    font-weight: 600;
    color: #3f6212;
}

.pyo-input--hero {
    font-size: 15px;
    padding: 11px 12px;
    border-radius: 12px;
}

.fs-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fs-nav-item {
    text-align: left;
    border: none;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    background: #f0fdf4;
    color: #365314;
    border: 1px solid rgba(34, 197, 94, 0.2);
    transition: background 0.12s, box-shadow 0.12s;
}

.fs-nav-item:hover {
    background: #ecfccb;
}

.fs-nav-item--active {
    background: linear-gradient(180deg, #fef9c3 0%, #fde68a 100%);
    border-color: rgba(234, 179, 8, 0.45);
    box-shadow: 0 2px 10px rgba(234, 179, 8, 0.2);
}

.fs-tip-box {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.55;
    color: #4d7c0f;
}

.fs-tip-box p {
    margin: 0 0 8px;
}

.fs-tip-box kbd {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-family: ui-monospace, monospace;
    background: #ecfdf5;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.fs-center-wrap {
    min-width: 0;
}

.fs-center-panel.fs-lobby-main-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: min(82vh, 760px);
}

.fs-center-panel.fs-lobby-main-card .fs-lobby-browser {
    flex: 1 1 auto;
    min-height: 0;
}

.fs-center-panel.fs-lobby-main-card .fs-lobby-chat-section {
    flex-shrink: 0;
}

.fs-lobby-help-strip {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1.55;
    color: #475569;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}

.fs-lobby-help-strip p {
    margin: 0 0 6px;
}

.fs-lobby-help-strip__sub {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 0 !important;
}

.fs-lobby-help-strip kbd {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-family: ui-monospace, monospace;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
}

.fs-nick-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 14px;
}

.pyo-lobby-nick-hint {
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    color: #9a3412;
    letter-spacing: -0.01em;
    background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid rgba(251, 146, 60, 0.55);
    box-shadow: 0 4px 14px rgba(251, 146, 60, 0.12);
}

.pyo-lobby-nick-hint[hidden] {
    display: none !important;
}

.pyo-input.pyo-input--nick-error {
    border-color: #fb923c !important;
    box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.2);
}

.fs-nick-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 12px 14px;
    margin: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
}

.fs-nick-bar__label {
    flex-shrink: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    color: #166534;
}

.fs-nick-bar .pyo-input--nick {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.pyo-input--nick {
    font-size: 15px;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    background: #fff;
}

.fs-nick-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fs-lobby-room-block-head {
    margin: 0 0 10px;
}

.fs-section-title {
    margin: 0;
    font-size: 17px;
    font-weight: 900;
    color: #14532d;
    letter-spacing: -0.02em;
}

.fs-lobby-toolbar-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 10px;
}

.fs-lobby-toolbar-row .fs-btn-create {
    flex-shrink: 0;
    white-space: nowrap;
}

.fs-input-code--toolbar {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
}

.fs-lobby-browser {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fs-lobby-chat-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

.fs-lobby-chat-host-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 248px;
    min-width: 0;
}

.fs-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.fs-panel-title {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    color: #14532d;
}

.fs-panel-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.fs-input-code {
    width: min(160px, 42%);
    padding: 9px 11px;
    font-family: ui-monospace, monospace;
    font-weight: 700;
}

.fs-btn-create {
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    color: #fff;
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
    box-shadow: 0 3px 0 #15803d;
    transition: transform 0.08s, filter 0.1s;
}

.fs-btn-create:hover {
    filter: brightness(1.04);
}

.fs-btn-create:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #15803d;
}

.fs-btn-join-code {
    width: 100%;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid rgba(59, 130, 246, 0.35);
    background: #eff6ff;
    color: #1d4ed8;
}

.fs-btn-join-code:hover {
    background: #dbeafe;
}

.pyo-room-list {
    flex: 1;
    min-height: 140px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 2px 8px 0;
}

.fs-room-table {
    margin-top: 4px;
}

.pyo-room-empty {
    font-size: 13px;
    color: #64748b;
    padding: 28px 12px;
    text-align: center;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
}

.fs-room-row {
    display: grid;
    grid-template-columns: 88px 1fr auto auto auto 28px;
    align-items: center;
    gap: 8px 10px;
    text-align: left;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 12px;
    background: #fafafa;
    color: #0f172a;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.fs-room-row:hover {
    background: #fff;
    border-color: #86efac;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.12);
}

.fs-room-row-id {
    font-family: ui-monospace, monospace;
    font-weight: 800;
    font-size: 15px;
    color: #0f172a;
}

.fs-room-row-name {
    font-weight: 600;
    font-size: 14px;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fs-tag {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.fs-tag--mode {
    background: #dbeafe;
    color: #1e40af;
}

.fs-tag--rule {
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 8px;
}

.fs-room-row-rule {
    font-size: 12px;
    color: #64748b;
}

.fs-room-row-cap {
    font-size: 13px;
    font-weight: 700;
    color: #15803d;
}

.fs-room-row-lock {
    font-size: 14px;
    text-align: center;
}

@media (max-width: 900px) {
    .fs-room-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .fs-room-row-id {
        grid-column: 1;
    }

    .fs-room-row-name {
        grid-column: 1 / -1;
    }
}

.fs-lobby-inroom {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 방 대기 화면 하단: 채팅 도크가 들어갈 앵커(홈 카드와 분리되어 클릭 가능) */
.fs-room-chat-anchor {
    flex: 1 1 auto;
    min-height: 200px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
}

.fs-room-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
}

.fs-room-head-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fs-room-head-id {
    font-family: ui-monospace, monospace;
    font-weight: 900;
    font-size: 17px;
    color: #0f172a;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.fs-room-head-title {
    font-size: 14px;
    font-weight: 700;
    color: #475569;
}

.fs-room-head-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
}

.fs-room-head-cap {
    font-size: 13px;
    font-weight: 800;
    color: #15803d;
}

.fs-btn-leave {
    margin-left: auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
    box-shadow: 0 2px 0 #b91c1c;
    font-family: inherit;
}

.fs-btn-leave:hover {
    filter: brightness(1.05);
}

.fs-ready-bar {
    display: flex;
    justify-content: center;
    padding: 4px 0;
}

.fs-ready-bar--split {
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.fs-btn-howto {
    min-width: 120px;
    border: 2px solid #0ea5e9;
    border-radius: 14px;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    color: #0c4a6e;
    background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%);
    box-shadow: 0 3px 0 #0369a1;
    transition: transform 0.08s, filter 0.1s;
}

.fs-btn-howto:hover {
    filter: brightness(1.04);
}

.fs-btn-howto:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #0369a1;
}

.fs-btn-ready {
    min-width: 200px;
    border: none;
    border-radius: 14px;
    padding: 14px 28px;
    font-size: 17px;
    font-weight: 900;
    cursor: pointer;
    font-family: inherit;
    color: #fff;
    background: linear-gradient(180deg, #fb923c 0%, #f97316 100%);
    box-shadow: 0 4px 0 #c2410c, 0 10px 28px rgba(249, 115, 22, 0.25);
    transition: transform 0.08s, filter 0.1s;
}

.fs-btn-ready:hover {
    filter: brightness(1.03);
}

.fs-btn-ready:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #c2410c;
}

.fs-btn-ready--active {
    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
    box-shadow: 0 4px 0 #475569;
}

.fs-game-help-body {
    max-height: min(72vh, 560px);
    overflow-y: auto;
    padding-right: 6px;
    font-size: 14px;
    line-height: 1.55;
    color: #1e293b;
    text-align: left;
}

.fs-game-help-h3 {
    margin: 16px 0 8px;
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}

.fs-game-help-h3:first-child {
    margin-top: 0;
}

.fs-game-help-p {
    margin: 0 0 8px;
}

.fs-game-help-ul {
    margin: 0 0 8px;
    padding-left: 1.2rem;
}

.fs-game-help-ul li {
    margin-bottom: 4px;
}

.fs-game-help-ul kbd,
.fs-game-help-body kbd {
    display: inline-block;
    padding: 1px 5px;
    margin: 0 1px;
    border-radius: 5px;
    border: 1px solid #94a3b8;
    background: #fff;
    font-size: 11px;
    font-family: ui-monospace, monospace;
}

.fs-game-help-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0;
}

.fs-help-item {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    align-items: start;
}

.fs-help-swatch {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 2px solid rgba(15, 23, 42, 0.2);
    margin-top: 2px;
}

.fs-help-swatch--plat {
    background: #7eb8e0;
}

.fs-help-swatch--spike {
    background: #b91c1c;
}

.fs-help-swatch--trap {
    background: #c084fc;
}

.fs-help-swatch--slow {
    background: #fde68a;
}

.fs-help-key {
    display: block;
    font-size: 11px;
    font-family: ui-monospace, monospace;
    color: #64748b;
    margin-top: 2px;
}

.fs-game-help-note {
    margin: 12px 0 0;
    font-size: 12px;
    color: #475569;
}

.fs-slot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    flex: 1;
    min-height: 200px;
    align-content: start;
}

@media (max-width: 900px) {
    .fs-slot-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.fs-player-slot {
    border-radius: 14px;
    min-height: 118px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.fs-player-slot--empty {
    background: repeating-linear-gradient(
        45deg,
        #f8fafc,
        #f8fafc 8px,
        #f1f5f9 8px,
        #f1f5f9 16px
    );
    border-style: dashed;
    opacity: 0.85;
}

.fs-slot-placeholder {
    width: 100%;
    height: 100%;
    min-height: 100px;
    position: relative;
}

.fs-slot-placeholder::after {
    content: "+";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 300;
    color: #cbd5e1;
}

.fs-slot-inner {
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.fs-slot-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
}

.fs-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
}

.fs-badge--host {
    background: #ede9fe;
    color: #5b21b6;
}

.fs-ready-dot {
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
}

.fs-ready-dot--on {
    color: #dc2626;
}

.fs-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e0f2fe;
    border: 2px solid #bae6fd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #0369a1;
}

.fs-slot-name {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fs-slot-lv {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* 로비 메인 / 방 대기 — 모바일·태블릿 (이 파일 뒤쪽에 두어 기본 로비 스타일을 덮어씀) */
@media (max-width: 1023px) {
    .pyo-lobby-layout {
        max-width: 100%;
        padding: 6px 10px 18px;
    }

    .pyo-lobby-topbar {
        padding: 12px 10px 6px;
    }

    .pyo-lobby-brand {
        flex-wrap: wrap;
        max-width: calc(100% - 20px);
        padding: 10px 12px;
        gap: 10px;
    }

    .pyo-lobby-brand__title {
        font-size: 1.12rem;
    }

    .pyo-lobby-brand__mark {
        width: 44px;
        height: 44px;
    }

    .pyo-lobby-card {
        padding: 12px 12px 14px;
    }

    .fs-page {
        padding-bottom: max(72px, calc(env(safe-area-inset-bottom, 0px) + 56px));
    }

    .fs-room-page-inner {
        max-width: 100%;
        padding: 8px 10px 18px;
    }

    .fs-room-intro-title {
        font-size: 1.25rem;
    }

    .fs-room-intro-sub {
        font-size: 12px;
    }

    .fs-center-panel.fs-lobby-main-card {
        min-height: 0;
    }

    .fs-lobby-chat-section {
        min-height: min(38vh, 260px);
        flex: 1 1 auto;
        margin-top: 10px;
        padding-top: 10px;
    }

    .fs-lobby-chat-host-inner {
        min-height: 160px;
    }

    .fs-room-chat-anchor {
        min-height: min(32vh, 220px);
    }

    /* 메인에서만 계정 바 쓸 때 브랜드와 겹치지 않게 */
    body.pyo-show-auth-bar .pyo-lobby-topbar {
        padding-top: 58px;
    }

    .fs-lobby-toolbar-row {
        flex-direction: column;
    }

    .fs-lobby-toolbar-row .fs-btn-create {
        width: 100%;
        box-sizing: border-box;
    }

    .fs-panel-title {
        font-size: 17px;
    }

    .fs-btn-ready {
        min-width: 0;
        width: 100%;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        padding: 12px 20px;
        font-size: 15px;
    }

    .fs-btn-howto {
        min-width: 0;
        width: 100%;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        padding: 10px 14px;
        font-size: 14px;
    }

    .fs-ready-bar--split {
        flex-direction: column;
        align-items: stretch;
    }

    .fs-player-slot {
        min-height: 92px;
    }

    .fs-slot-inner {
        padding: 8px 6px 10px;
    }

    .fs-avatar {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }

    .fs-slot-name {
        font-size: 12px;
    }

    #fs-lobby-inroom > .fs-status-in-card {
        max-height: 100px;
        padding: 8px 10px;
        font-size: 13px;
    }

    .fs-room-head {
        padding: 8px 10px;
    }

    .fs-room-head-id {
        font-size: 15px;
    }

    .fs-room-head-title {
        font-size: 13px;
    }

    .fs-nick-bar {
        flex-wrap: wrap;
        padding: 10px 10px;
        gap: 8px;
    }

    .fs-nick-bar__label {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .fs-room-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 8px 10px;
    }

    .fs-room-row-id,
    .fs-room-row-name {
        grid-column: auto;
    }

    .fs-room-row-name {
        white-space: normal;
    }
}

.fs-aside-chat-host {
    flex: 1;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fs-aside-ribbon {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #16a34a;
    margin-bottom: 6px;
}

.fs-aside-body {
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #475569;
}

.fs-aside-body p {
    margin: 0 0 10px;
}

.fs-aside-muted {
    font-size: 12px;
    color: #94a3b8;
}

.pyo-btn {
    border: none;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.pyo-btn-primary {
    background: linear-gradient(135deg, #5b7cff 0%, #3d52d4 100%);
    color: #fff;
}

.pyo-btn-primary:hover {
    filter: brightness(1.06);
}

.pyo-btn-ghost {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
}

.pyo-btn-ghost:hover {
    background: #e2e8f0;
}

.pyo-modal-backdrop {
    position: fixed;
    inset: 0;
    /* 로비 셸(50)·계정 바(60)보다 위 — 모달이 다른 레이어에 가려지지 않도록 */
    z-index: 300;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.pyo-modal-panel {
    pointer-events: auto;
    width: min(400px, 100%);
    max-width: 100%;
    max-height: min(88vh, 720px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: 16px;
    padding: 22px 22px 18px;
    box-shadow: 0 24px 64px rgba(15, 118, 110, 0.15);
}

.pyo-modal-title {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 800;
    color: #14532d;
}

/* 모바일: 모달·게임 설명이 화면을 덜 덮고, 입력 16px 미만 자동 확대(iOS) 방지 */
@media (max-width: 1023px) {
    .pyo-modal-backdrop {
        align-items: flex-start;
        justify-content: center;
        padding: max(10px, env(safe-area-inset-top, 0px)) 12px 16px;
    }

    .pyo-modal-panel {
        width: 100%;
        max-width: min(360px, calc(100% - 16px));
        max-height: min(82dvh, 86vh);
        margin: 0 auto;
        padding: 14px 14px 12px;
    }

    .pyo-modal-title {
        font-size: 17px;
        margin-bottom: 10px;
    }

    .fs-game-help-body {
        max-height: min(48dvh, 340px);
        font-size: 13px;
        line-height: 1.5;
    }

    .fs-game-help-h3 {
        font-size: 14px;
        margin: 12px 0 6px;
    }

    .pyo-lobby-shell input[type="text"],
    .pyo-lobby-shell input[type="password"],
    .pyo-lobby-shell input[type="search"],
    .pyo-modal-backdrop input[type="text"],
    .pyo-modal-backdrop input[type="password"],
    .pyo-modal-backdrop textarea,
    .pyo-chat-input {
        font-size: 16px;
    }
}

.pyo-modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pyo-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
    font-size: 14px;
    font-family: inherit;
}

.pyo-input:focus {
    outline: 2px solid rgba(34, 197, 94, 0.45);
    outline-offset: 1px;
}

.pyo-field-hint {
    margin: 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
}

.pyo-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

/* 레이스·결과 화면에서는 계정 바 숨김 (게스트 플레이 시 로그인 UI 방해 방지) */
body.pyo-phase-racing .pyo-auth-bar,
body.pyo-phase-result .pyo-auth-bar {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}

/*
 * 메인 로비에서만 표시(syncAuthBarLobbyContext가 body.pyo-show-auth-bar 부여).
 * .pyo-auth-bar { display:flex } 가 [hidden] 보다 나중에 적용되면 방 안에서도 남는 경우가 있어 분리함.
 */
body:not(.pyo-show-auth-bar) .pyo-auth-bar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.pyo-show-auth-bar .pyo-auth-bar {
    display: flex !important;
}

/* —— 계정 바 (우상단 · 로비 카드와 겹치지 않게) —— */
.pyo-auth-bar {
    position: fixed;
    top: 14px;
    right: 14px;
    left: auto;
    z-index: 60;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(34, 197, 94, 0.2);
    box-shadow: 0 8px 28px rgba(15, 118, 110, 0.1);
    max-width: min(420px, 92%);
}

.pyo-auth-label {
    font-size: 13px;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pyo-auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pyo-btn-sm {
    padding: 8px 12px;
    font-size: 13px;
}

/* —— 채팅 도크 —— */
.pyo-chat-dock {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 14px;
    transform: translateX(-50%);
    /* 100vw 대신 % — 모바일 가로 오버·가짜 확대 완화 */
    width: min(400px, 92%);
    max-height: min(32vh, 280px);
    z-index: 58;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(34, 197, 94, 0.22);
    box-shadow: 0 12px 40px rgba(15, 118, 110, 0.12);
    overflow: hidden;
    pointer-events: auto;
}

.pyo-chat-dock--room {
    border-color: rgba(34, 197, 94, 0.4);
}

.pyo-chat-dock--offline .pyo-chat-badge {
    background: #fee2e2;
    color: #b91c1c;
}

/* 우측 안내 카드 안에 넣을 때: fixed 해제 */
.pyo-chat-dock.pyo-chat-dock--embedded {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-height: none;
    flex: 1;
    min-height: 0;
    align-self: stretch;
    z-index: 2;
    pointer-events: auto;
}

.pyo-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.pyo-chat-title {
    font-size: 13px;
    font-weight: 800;
    color: #14532d;
}

.pyo-chat-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1e40af;
}

.pyo-chat-dock--room .pyo-chat-badge {
    background: #dcfce7;
    color: #166534;
}

.pyo-chat-log {
    flex: 1;
    min-height: 80px;
    overflow-y: auto;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.45;
}

.pyo-chat-line {
    margin-bottom: 6px;
    word-break: break-word;
}

.pyo-chat-meta {
    display: block;
    font-size: 10px;
    color: #64748b;
    margin-bottom: 2px;
}

.pyo-chat-text {
    color: #0f172a;
}

.pyo-chat-inputrow {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    flex-shrink: 0;
}

.pyo-chat-input {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #0f172a;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    min-height: 44px;
    box-sizing: border-box;
    pointer-events: auto;
}

.pyo-chat-send {
    flex: 0 0 auto;
    border: none;
    border-radius: 10px;
    padding: 10px 28px;
    min-width: 7.5rem;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    background: linear-gradient(135deg, #5b7cff, #3d52d4);
    color: #fff;
    font-family: inherit;
    touch-action: manipulation;
    white-space: nowrap;
    pointer-events: auto;
}

.pyo-chat-send:hover {
    filter: brightness(1.05);
}