/* 오락실 전용 정적 스타일입니다. PHP HTML에서 분리해 브라우저가 탭 이동 때 정적 캐시로 재사용합니다. */
body {
    /*
     * 1990년대 대전 오락실의 네온·CRT 분위기를 페이지 전체 배경에 아주 낮은 명암으로 깔아 줍니다.
     * 생성형 이미지 원본을 그대로 밝게 노출하지 않고 여러 겹의 어두운 그라데이션을 앞에 두어
     * 사이드바와 본문 한글의 대비를 유지하며, 이미지는 한 번만 내려받는 프로젝트 로컬 WebP를 사용합니다.
     */
    background:
        linear-gradient(180deg, rgba(3,7,18,0.34) 0, rgba(5,10,25,0.78) 500px, #050814 980px),
        linear-gradient(135deg, rgba(255, 45, 137, 0.16), rgba(21, 220, 255, 0.12) 55%, rgba(255, 156, 45, 0.10)),
        /* 외부 접속의 첫 화면을 빠르게 띄우도록 1440px 경량 WebP를 사용합니다. */
        url('assets/arcade/gamecc-arcade-fighters-hero-fast.webp') center 58px / 100% auto no-repeat,
        linear-gradient(180deg, #111834 0%, #071225 58%, #050814 100%);
    /*
     * 네 개의 배경 레이어를 모두 뷰포트에 고정합니다.
     * 이전에는 그림만 fixed이고 앞쪽 암막 그라데이션은 문서와 함께 이동하여,
     * 아래로 스크롤할수록 단색 암막이 그림을 덮는 것처럼 보였습니다.
     */
    background-attachment: fixed, fixed, fixed, fixed;
}
.arcade-wrap {
    display: grid;
    /* 오락실 설명과 메뉴 사이에 자동 grid gap이 끼지 않도록 0으로 고정합니다. */
    gap: 0;
    /* Grid 컨테이너가 브라우저 남는 높이를 행에 분배하면 상단 패널이 늘어나 빈 공간처럼 보입니다.
       오락실도 콘텐츠 높이만 쓰도록 세로 정렬을 시작점으로 고정합니다. */
    align-content: start;
    align-items: start;
    grid-auto-rows: max-content;
    width: 100%;
}
.arcade-intro-strip {
    /*
     * 오락실 소개 패널을 모바일게임 카테고리 히어로와 같은 전체 크기로 통일합니다.
     * 고정 height 대신 min-height를 사용해 휴대폰에서 안내 문장이 여러 줄이 되어도 잘리지 않습니다.
     */
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 220px;
    padding: 18px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid rgba(255,245,106,0.34);
    border-radius: 15px;
    background:
        linear-gradient(135deg, rgba(255,245,106,0.14), rgba(105,255,241,0.07)),
        rgba(0,0,0,0.26);
    box-shadow: 0 10px 22px rgba(0,0,0,0.24);
    box-sizing: border-box;
}
.arcade-top-stack {
    /* 상단 설명과 메뉴를 완전히 하나의 패널로 묶습니다.
       광고가 켜지면 설명-배너-메뉴 3단이 되므로, 고정 2행 Grid가 아니라 Flex 세로 흐름으로 처리합니다. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0 0 6px;
    overflow: hidden;
    border: 1px solid rgba(255,245,106,0.34);
    border-radius: 15px;
    background:
        linear-gradient(135deg, rgba(255,245,106,0.12), rgba(105,255,241,0.06)),
        rgba(0,0,0,0.26);
    box-shadow: 0 10px 20px rgba(0,0,0,0.20);
}
.arcade-top-stack .arcade-intro-strip {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.arcade-intro-kicker {
    margin-bottom: 5px;
    color: #69fff1;
    font-family: 'Orbitron', 'IBM Plex Sans KR', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.25;
}
.arcade-intro-strip h1 {
    margin: 0;
    color: #fff56a;
    font-family: 'Orbitron', 'IBM Plex Sans KR', sans-serif;
    font-size: clamp(1.35rem, 2vw, 1.72rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-shadow: 0 0 18px rgba(255,245,106,0.28);
}
.arcade-intro-strip p {
    margin: 7px 0 0;
    max-width: 820px;
    overflow:visible;
    color: #dce8ff;
    font-size: 0.96rem;
    font-weight: 500;
    line-height: 1.6;
    text-overflow: clip;
    white-space: normal;
}
.server-launcher-cta-wrap {
    /* 런처 설치는 일반회원이 가장 먼저 눌러야 하므로 서버 상태 카드 중앙에 크게 배치합니다. */
    display: flex;
    justify-content: center;
    padding: 6px 0 4px;
}
.server-launcher-cta {
    display: inline-grid;
    gap: 3px;
    place-items: center;
    width: min(100%, 360px);
    min-height: 64px;
    padding: 9px 18px;
    border: 2px solid rgba(255,245,106,0.88);
    border-radius: 10px;
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 7px),
        linear-gradient(135deg, #fff56a 0%, #69fff1 100%);
    color: #07152d;
    box-shadow:
        0 18px 38px rgba(105,255,241,0.22),
        0 0 0 4px rgba(255,245,106,0.12),
        inset 0 -3px 0 rgba(0,0,0,0.20),
        inset 0 2px 0 rgba(255,255,255,0.46);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}
.server-launcher-cta strong {
    display: block;
    font-size: 1.08rem;
    line-height: 1.15;
}
.server-launcher-cta small {
    display: block;
    color: rgba(7,21,45,0.78);
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1.15;
}
.server-launcher-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 44px rgba(105,255,241,0.28), 0 0 0 4px rgba(255,245,106,0.18);
    text-decoration: none;
}
.arcade-intro-tags {
    /* 태그 영역이 설명 박스 높이를 키우는 원인이므로 오락실 상단에서는 숨깁니다. */
    display: none;
}
.arcade-intro-tag {
    padding: 5px 9px;
    border: 1px solid rgba(105,255,241,0.34);
    border-radius: 999px;
    background: rgba(0,0,0,0.28);
    color: #f7fbff;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}
.arcade-hero {
    position: relative;
    overflow: hidden;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255, 222, 89, 0.13), rgba(0, 255, 210, 0.07)),
        rgba(0,0,0,0.28);
    box-shadow: 0 22px 44px rgba(0,0,0,0.32);
}
.arcade-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 5px);
    pointer-events: none;
}
.arcade-hero h1 {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    color: #fff56a;
    font-family: 'Orbitron', 'IBM Plex Sans KR', sans-serif;
    font-size: clamp(2rem, 5vw, 4.2rem);
    letter-spacing: 0.08em;
    text-shadow: 0 0 22px rgba(255, 245, 106, 0.42);
}
.arcade-hero p {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0;
    color: #dce8ff;
    font-family: 'IBM Plex Sans KR', sans-serif;
    line-height: 1.7;
}
.arcade-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 18px;
    background: rgba(0,0,0,0.24);
}
.arcade-toolbar input,
.arcade-toolbar select {
    min-height: 40px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    background: rgba(0,0,0,0.48);
    color: #fff;
    padding: 0 12px;
    font-family: 'IBM Plex Sans KR', sans-serif;
}
.arcade-toolbar input {
    flex: 1;
    min-width: 220px;
}
/* 장르·인원·정렬은 서로 다른 기준이므로 행을 분리해 많은 필터도 한눈에 찾을 수 있게 합니다. */
.game-discovery {
    display: grid;
    gap: 10px;
    /* 앵커 이동 시 상단 고정 메뉴에 장르 필터 제목이 가려지지 않도록 여백을 확보합니다. */
    scroll-margin-top: 160px;
    padding: 14px;
    border: 1px solid rgba(105,255,241,0.24);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(8,28,52,0.84), rgba(1,10,25,0.78));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.game-filter-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.game-filter-label {
    color: #9fb7d4;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}
.game-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}
.game-filter-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(148,163,184,0.38);
    border-radius: 999px;
    background: rgba(4,17,36,0.88);
    color: #dbeafe;
    font-size: 0.79rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.game-filter-tab:hover,
.game-filter-tab:focus-visible {
    border-color: #69fff1;
    color: #ffffff;
    outline: none;
    text-decoration: none;
}
.game-filter-tab.is-active {
    border-color: #fff56a;
    background: linear-gradient(180deg, #695614, #3f3105);
    color: #fffbd0;
    box-shadow: inset 0 0 0 1px rgba(255,245,106,0.16), 0 0 14px rgba(255,245,106,0.12);
}
.game-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 0 2px;
}
.game-pagination-current {
    min-width: 72px;
    color: #dbeafe;
    font-size: 0.82rem;
    font-weight: 900;
    text-align: center;
}
/* 비동기 필터를 불러오는 짧은 동안 기존 크기를 유지한 채 상태만 흐리게 표시해 화면 흔들림을 막습니다. */
#arcadeGameFilterControls,
#arcadeGameResults {
    transition: opacity .14s ease;
}
#arcadeGameFilterControls.is-ajax-loading,
#arcadeGameResults.is-ajax-loading {
    opacity: .58;
    pointer-events: none;
}
@media (max-width: 640px) {
    /* 모바일은 모든 필터명이 잘리지 않도록 칩을 자연스럽게 줄바꿈하고 행 제목을 위에 배치합니다. */
    .game-filter-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .game-filter-tabs {
        flex-wrap: wrap;
        overflow: visible;
        padding: 1px;
    }
    .game-filter-tab {
        flex: 0 0 auto;
        min-height: 38px;
    }
    .arcade-toolbar input,
    .arcade-toolbar select,
    .arcade-toolbar .arcade-btn {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}
.arcade-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(148, 163, 184, 0.44);
    border-radius: 6px;
    background: linear-gradient(180deg, #1f3a5f, #10243d);
    color: #eff8ff;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease, transform .14s ease, color .14s ease;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.16), inset -2px -2px 0 rgba(0,0,0,0.32), 0 3px 0 rgba(0,0,0,0.25);
}
.arcade-btn:hover {
    border-color: rgba(125, 211, 252, 0.78);
    background: linear-gradient(180deg, #315b90, #173657);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}
/* 게임 실행만 명확한 주 색상을 사용하고, 보조 동작은 절제된 어두운 버튼으로 통일합니다. */
.arcade-btn--primary {
    border-color: rgba(103, 232, 249, 0.78);
    background: linear-gradient(180deg, #1479b8, #075183);
    color: #f0fdff;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.24), inset -2px -2px 0 rgba(0,0,0,0.28), 0 4px 0 rgba(3,30,53,0.86);
}
.arcade-btn--primary:hover {
    border-color: rgba(207, 250, 254, 0.96);
    background: linear-gradient(180deg, #209bd7, #096596);
}
.arcade-section-tabs {
    /* 오락실 주요 기능을 실제 탭 페이지처럼 나눕니다.
       각 탭은 화면 이동 앵커가 아니라 tab 파라미터가 다른 독립 본문을 출력합니다.
       스크롤 중에도 게임·열린방·랭킹·롬추가 메뉴를 바로 선택할 수 있도록 sticky로 유지하며,
       실제 상단 좌표는 공통 상단바와 공통 메인메뉴의 실측 높이를 아래 스크립트에서 전달합니다. */
    position: sticky;
    top: var(--arcade-tabs-sticky-top, 100px);
    z-index: 980;
    display: grid;
    /* 독립 랭킹 메뉴를 통합한 뒤 다섯 메뉴가 빈 칸 없이 같은 폭을 사용합니다. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255,245,106,0.38);
    border-radius: 16px;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 8px),
        linear-gradient(135deg, rgba(255,245,106,0.10), rgba(105,255,241,0.07), rgba(168,129,255,0.08)),
        rgba(1,8,20,0.66);
    box-shadow:
        0 18px 32px rgba(0,0,0,0.28),
        inset 0 0 0 1px rgba(255,255,255,0.05),
        inset 0 0 28px rgba(105,255,241,0.06);
}
.arcade-section-tabs.is-stuck {
    /* 고정된 동안에는 본문을 과도하게 가리지 않는 한 줄 메뉴로 압축합니다.
       반투명 배경과 블러를 함께 사용해 아래 카드가 비쳐도 한글 메뉴의 대비를 유지합니다. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
    border-radius: 0 0 12px 12px;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 8px),
        linear-gradient(135deg, rgba(18,31,68,0.98), rgba(3,12,39,0.98));
    box-shadow: 0 12px 26px rgba(0,0,0,0.48), inset 0 -1px 0 rgba(255,255,255,0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.arcade-section-tabs.is-stuck .arcade-section-tab {
    min-height: 46px;
    padding: 8px 6px 7px;
}
.arcade-section-tabs.is-stuck .arcade-section-tab small {
    /* 고정 메뉴에서는 기능 설명을 숨기고 핵심 탭 이름만 남겨 세로 공간을 절약합니다. */
    display: none;
}
.arcade-section-tab {
    --tab-accent: #fff56a;
    position: relative;
    display: grid;
    gap: 3px;
    min-width: 0;
    min-height: 68px;
    align-content: center;
    justify-items: center;
    padding: 12px 10px 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.20);
    border-color: color-mix(in srgb, var(--tab-accent) 42%, rgba(255,255,255,0.18));
    border-radius: 10px;
    color: #f7fbff;
    text-align: center;
    text-decoration: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.045)),
        rgba(0,0,0,0.34);
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--tab-accent) 28%, transparent) 0 28%, transparent 48%),
        linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.045)),
        rgba(0,0,0,0.34);
    box-shadow:
        0 10px 18px rgba(0,0,0,0.20),
        inset 0 -3px 0 rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(255,255,255,0.22);
}
/* 상시 랭킹대전 카드는 짧은 상태·버튼을 세로로 정렬해 좁은 화면에서도 겹침을 막습니다. */
.arcade-event-hero, .arcade-event-card, .arcade-achievement-card { border:1px solid rgba(105,255,241,.24); border-radius:14px; background:rgba(4,14,34,.78); }
.arcade-event-hero { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px; margin-bottom:16px; }
.arcade-event-hero h2, .arcade-event-card h3, .arcade-achievement-card h3 { margin:0 0 6px; color:#f8fbff; }
.arcade-event-hero p, .arcade-event-card p, .arcade-achievement-card p { margin:0; color:#adc2d8; line-height:1.55; }
.arcade-event-grid, .arcade-achievement-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.arcade-event-card, .arcade-achievement-card { min-width:0; padding:16px; }
.arcade-event-card { display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.arcade-event-card .arcade-event-meta { min-width:0; }
.arcade-event-card .arcade-btn { max-width:100%; white-space:normal; text-align:center; }
.arcade-event-meta { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0; }
.arcade-event-meta span { padding:5px 8px; border-radius:999px; background:rgba(105,255,241,.11); color:#bffdf8; font-size:.73rem; font-weight:800; }
.arcade-event-rank { width:100%; border-collapse:collapse; margin-top:10px; color:#e6eef7; font-size:.78rem; }
.arcade-event-rank th, .arcade-event-rank td { padding:7px 5px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; }
.arcade-event-rank td:last-child, .arcade-event-rank th:last-child { text-align:right; }
.arcade-achievement-progress { height:8px; margin-top:12px; overflow:hidden; border-radius:999px; background:#15263b; }
.arcade-achievement-progress i { display:block; height:100%; background:linear-gradient(90deg,#21d4fd,#b721ff); }
.arcade-achievement-card.is-unlocked { border-color:rgba(250,204,21,.58); box-shadow:inset 0 0 22px rgba(250,204,21,.07); }
.arcade-section-tab::before {
    /* 탭 상단의 작은 점등 램프로 실제 오락기 선택 버튼 같은 인상을 줍니다. */
    content: '';
    position: absolute;
    top: 8px;
    left: 10px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--tab-accent);
    box-shadow: 0 0 12px var(--tab-accent), 0 0 22px rgba(255,245,106,0.34);
    box-shadow: 0 0 12px var(--tab-accent), 0 0 22px color-mix(in srgb, var(--tab-accent) 65%, transparent);
}
.arcade-section-tab::after {
    content: '';
    position: absolute;
    inset: 0;
    border-top: 3px solid rgba(255,245,106,0.38);
    border-top-color: color-mix(in srgb, var(--tab-accent) 60%, transparent);
    background: linear-gradient(90deg, transparent, rgba(255,245,106,0.10), transparent);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tab-accent) 16%, transparent), transparent);
    opacity: 0.72;
    pointer-events: none;
}
.arcade-section-tab > * {
    position: relative;
    z-index: 1;
}
.arcade-section-tab:nth-child(1) { --tab-accent: #ff7aa8; }
.arcade-section-tab:nth-child(2) { --tab-accent: #71d6ff; }
.arcade-section-tab:nth-child(3) { --tab-accent: #fff56a; }
.arcade-section-tab:nth-child(4) { --tab-accent: #b998ff; }
.arcade-section-tab:nth-child(5) { --tab-accent: #69fff1; }
.arcade-section-tab:nth-child(6) { --tab-accent: #ffb45f; }
.arcade-section-tab strong {
    color: #ffffff;
    font-size: 0.98rem;
    line-height: 1.1;
    text-shadow: 0 0 10px rgba(255,245,106,0.42);
    text-shadow: 0 0 10px color-mix(in srgb, var(--tab-accent) 58%, transparent);
    white-space: nowrap;
}
.arcade-section-tab small {
    max-width: 100%;
    overflow: hidden;
    color: #dffcff;
    color: color-mix(in srgb, var(--tab-accent) 42%, #f2fbff);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.arcade-section-tab:hover {
    border-color: rgba(255,245,106,0.64);
    border-color: color-mix(in srgb, var(--tab-accent) 72%, rgba(255,255,255,0.24));
    text-decoration: none;
    transform: translateY(-2px);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.055)),
        rgba(0,0,0,0.34);
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--tab-accent) 38%, transparent) 0 30%, transparent 54%),
        linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.055)),
        rgba(0,0,0,0.34);
}
.arcade-section-tab.active {
    border-color: rgba(255,245,106,0.82);
    border-color: color-mix(in srgb, var(--tab-accent) 88%, #ffffff);
    background:
        linear-gradient(135deg, rgba(255,245,106,0.28), rgba(105,255,241,0.13)),
        rgba(0,0,0,0.32);
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--tab-accent) 48%, transparent) 0 32%, transparent 58%),
        linear-gradient(135deg, color-mix(in srgb, var(--tab-accent) 24%, transparent), rgba(105,255,241,0.10)),
        rgba(0,0,0,0.32);
    box-shadow:
        0 0 0 3px rgba(255,245,106,0.12),
        0 14px 26px rgba(0,0,0,0.30),
        inset 0 -2px 0 rgba(0,0,0,0.15);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--tab-accent) 16%, transparent),
        0 14px 26px rgba(0,0,0,0.30),
        0 0 24px color-mix(in srgb, var(--tab-accent) 18%, transparent),
        inset 0 -2px 0 rgba(0,0,0,0.15);
}
.arcade-section-tab.active strong {
    color: #ffffff;
}
.arcade-atmosphere-board {
    /* 오락실 첫 화면의 전광판입니다.
       실제 간판 전광판처럼 금속 프레임, LED 스크린, 발광 텍스트가 보이도록 구성합니다. */
    position: relative;
    display: grid;
    gap: 12px;
    padding: 18px;
    min-height: 250px;
    overflow: hidden;
    border: 4px solid rgba(255, 245, 106, 0.72);
    border-radius: 16px;
    background:
        /* 중앙 UI는 어둡게, 좌우의 오리지널 격투 캐릭터와 오락기 불빛은 보이도록 비네팅합니다. */
        radial-gradient(ellipse at 50% 40%, rgba(1,7,19,0.91) 0 24%, rgba(2,8,22,0.72) 52%, rgba(3,5,12,0.30) 100%),
        linear-gradient(180deg, rgba(2,7,18,0.16), rgba(2,5,14,0.68)),
        /* 같은 경량 이미지를 재사용해 추가 다운로드 없이 오락실 간판을 표시합니다. */
        url('assets/arcade/gamecc-arcade-fighters-hero-fast.webp') center center / cover no-repeat,
        linear-gradient(135deg, #27120b 0%, #0a1326 35%, #21123a 68%, #16080e 100%);
    box-shadow:
        0 22px 44px rgba(0,0,0,0.34),
        0 0 24px rgba(255,245,106,0.16),
        inset 0 0 0 2px rgba(255,255,255,0.10),
        inset 0 -10px 28px rgba(0,0,0,0.36);
}
.arcade-atmosphere-board::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 11px;
    pointer-events: none;
    box-shadow:
        inset 0 0 22px rgba(255,245,106,0.12),
        0 0 18px rgba(105,255,241,0.10);
    /* 오락기 모니터 유리처럼 가장자리를 어둡게 눌러 배경 이미지가 본문을 침범하지 않게 합니다. */
    background: radial-gradient(ellipse at center, transparent 36%, rgba(0,0,0,0.48) 100%);
}
.arcade-atmosphere-board::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 5px);
    opacity: 0.28;
    pointer-events: none;
}
.arcade-atmosphere-board > * {
    position: relative;
    z-index: 1;
}
.arcade-atmosphere-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 4px 0;
}
.arcade-atmosphere-head h2 {
    margin: 0;
    color: #fff56a;
    font-family: 'Orbitron', 'IBM Plex Sans KR', sans-serif;
    font-size: clamp(1.22rem, 2.4vw, 2rem);
    letter-spacing: 0.12em;
    text-shadow:
        0 0 7px rgba(255,245,106,0.88),
        0 0 18px rgba(255,191,105,0.50),
        0 2px 0 rgba(0,0,0,0.72);
}
.arcade-atmosphere-head p {
    margin: 3px 0 0;
    color: #c8f6ff;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.35;
    text-shadow: 0 0 8px rgba(105,255,241,0.38);
}
.arcade-era-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
    color: #ff8cba;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-shadow: 0 0 10px rgba(255,63,143,0.74);
}
.arcade-era-kicker::before {
    content: '';
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #ff3f8f;
    box-shadow: 0 0 10px #ff3f8f, 0 0 20px rgba(255,63,143,0.72);
}
.arcade-feature-lights {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}
.arcade-feature-light {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid rgba(105,255,241,0.42);
    border-radius: 999px;
    background: rgba(0,5,14,0.76);
    color: #eaffff;
    font-size: 0.72rem;
    font-weight: 900;
    box-shadow: inset 0 0 12px rgba(105,255,241,0.10), 0 0 12px rgba(0,0,0,0.28);
    backdrop-filter: blur(4px);
}
.arcade-feature-light::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #69fff1;
    box-shadow: 0 0 8px #69fff1;
}
.arcade-feature-light:nth-child(2) {
    border-color: rgba(255,245,106,0.44);
}
.arcade-feature-light:nth-child(2)::before {
    background: #fff56a;
    box-shadow: 0 0 8px #fff56a;
}
.arcade-feature-light:nth-child(3) {
    border-color: rgba(255,105,174,0.46);
}
.arcade-feature-light:nth-child(3)::before {
    background: #ff69ae;
    box-shadow: 0 0 8px #ff69ae;
}
.arcade-coin-policy {
    /* 상단 전광판에서 가격·차감 시점·부족 시 동작을 한 블록으로 보여 가격 오해를 줄입니다. */
    display: grid;
    grid-template-columns: minmax(178px, 0.78fr) minmax(0, 1.72fr);
    gap: 10px;
    align-items: stretch;
    padding: 10px;
    border: 1px solid rgba(255,245,106,0.62);
    border-radius: 12px;
    background: linear-gradient(105deg, rgba(73,42,7,0.82), rgba(4,19,33,0.86));
    box-shadow: inset 0 0 18px rgba(255,245,106,0.10), 0 0 18px rgba(255,191,105,0.10);
}
.arcade-coin-price {
    display: grid;
    align-content: center;
    justify-items: center;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 9px;
    background: rgba(0,0,0,0.42);
    text-align: center;
}
.arcade-coin-price > span {
    color: #9ffff7;
    font-family: 'Orbitron', 'IBM Plex Sans KR', sans-serif;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}
.arcade-coin-price strong {
    margin-top: 2px;
    color: #ffffff;
    font-size: clamp(1.05rem, 2.3vw, 1.48rem);
    line-height: 1.1;
    white-space: nowrap;
}
.arcade-coin-price b {
    color: #fff56a;
    font-family: 'Orbitron', 'IBM Plex Sans KR', sans-serif;
    font-size: 1.28em;
    text-shadow: 0 0 12px rgba(255,245,106,0.74);
}
.arcade-coin-price small {
    margin-top: 4px;
    color: #c8f6ff;
    font-size: 0.7rem;
    font-weight: 800;
}
.arcade-coin-guide {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    align-items: center;
    min-width: 0;
}
.arcade-coin-guide span {
    min-width: 0;
    padding: 7px 8px;
    border-left: 2px solid rgba(105,255,241,0.70);
    color: #e8f7ff;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1.45;
}
.arcade-coin-guide span:nth-child(2) { border-left-color: rgba(255,245,106,0.86); }
.arcade-coin-guide span:nth-child(3) { border-left-color: rgba(255,105,174,0.86); }
.arcade-live-marquee {
    overflow: hidden;
    min-height: 46px;
    border: 2px solid rgba(105,255,241,0.42);
    border-radius: 10px;
    background:
        repeating-linear-gradient(90deg, rgba(105,255,241,0.08) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(0deg, rgba(255,245,106,0.055) 0 1px, transparent 1px 7px),
        #020605;
    box-shadow:
        inset 0 0 22px rgba(105,255,241,0.16),
        0 0 18px rgba(105,255,241,0.16);
}
.arcade-live-marquee span {
    display: inline-block;
    min-width: 100%;
    padding: 13px 18px;
    color: #69fff1;
    font-family: 'Orbitron', 'IBM Plex Sans KR', sans-serif;
    font-size: clamp(0.86rem, 1.3vw, 1.05rem);
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1.1;
    white-space: nowrap;
    animation: arcadeMarquee 18s linear infinite;
    text-shadow:
        0 0 7px rgba(105,255,241,0.95),
        0 0 18px rgba(105,255,241,0.62),
        0 0 28px rgba(255,245,106,0.32);
}
@keyframes arcadeMarquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
.arcade-atmosphere-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px;
}
.arcade-atmosphere-stat {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255,245,106,0.28);
    border-radius: 9px;
    background:
        repeating-linear-gradient(90deg, rgba(255,245,106,0.055) 0 1px, transparent 1px 6px),
        #05070d;
    box-shadow:
        inset 0 0 14px rgba(255,245,106,0.08),
        0 0 10px rgba(0,0,0,0.22);
}
.arcade-atmosphere-stat strong {
    display: block;
    overflow: hidden;
    color: #fff56a;
    font-family: 'Orbitron', 'IBM Plex Sans KR', sans-serif;
    font-size: 1.05rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    text-shadow: 0 0 8px rgba(255,245,106,0.62);
    white-space: nowrap;
}
.arcade-atmosphere-stat small {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #69fff1;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-shadow: 0 0 7px rgba(105,255,241,0.36);
    white-space: nowrap;
}
.arcade-tab-page {
    /* 탭별 본문은 서로 섞이지 않게 하나의 페이지 패널처럼 간격을 통일합니다. */
    display: grid;
    gap: 14px;
}
/* 랭킹대전 내부 링크는 같은 높이·폭으로 정렬하고 선택한 위치를 색상과 테두리로 함께 구분합니다. */
.arcade-ranked-page { min-width: 0; scroll-margin-top: 150px; }
.arcade-ranked-hero { margin: 0; padding: 12px; border-radius: 8px; }
.arcade-ranked-hero h2 { font-size: 1rem; }
.arcade-ranked-hero p, .arcade-ranked-note { margin: 0; color: #adc2d8; font-size: .74rem; line-height: 1.5; }
.arcade-rank-subtabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; min-width: 0; }
.arcade-rank-subtabs a {
    display: flex; align-items: center; justify-content: center;
    min-height: 36px; min-width: 0; box-sizing: border-box; padding: 7px 8px;
    border: 1px solid #354b67; border-radius: 5px; background: #101c30;
    color: #cbdced; font-size: .76rem; font-weight: 700; line-height: 1.4;
    text-align: center; text-decoration: none; overflow-wrap: anywhere;
}
.arcade-rank-subtabs a:hover { border-color: #73ead6; color: #fff; text-decoration: none; }
.arcade-rank-subtabs a.active { border-color: #ffcc65; background: #3d301a; color: #ffe4a4; }
.arcade-rank-subtabs a:focus-visible { outline: 2px solid #73ead6; outline-offset: 2px; }
@media (max-width: 600px) {
    /* 작은 휴대폰에서는 두 열로 내려 최근 대전 결과 등의 한글이 잘리지 않게 합니다. */
    .arcade-rank-subtabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.arcade-board-page {
    /*
     * 게시글이 없거나 적을 때도 게시판 본문 자체를 거의 한 화면 높이로 유지합니다.
     * 상단 탭과 접속자 패널이 압축되어도 문서 하단에 충분한 이동 거리가 남으므로,
     * 브라우저가 스크롤 위치를 되돌리면서 sticky 상태를 반복 전환하는 현상이 발생하지 않습니다.
     */
    min-height: max(760px, calc(100vh - 72px));
    min-height: max(760px, calc(100svh - 72px));
    align-content: start;
}
/* 각 탭 본문의 제목을 그대로 사용하므로 중복된 현재 탭 카드 스타일은 제거합니다. */
.arcade-tab-anchor {
    /* 상단 고정바와 공통 메뉴에 가리지 않게 탭 이동 위치를 살짝 아래로 보정합니다. */
    scroll-margin-top: 92px;
}
.arcade-grid {
    display: grid;
    /* 필터 결과가 1~2개여도 빈 열을 유지해 카드가 과도하게 늘어나지 않도록 auto-fill을 사용합니다.
       게임 한 개를 평범한 카드가 아닌 독립된 업라이트 오락기로 보이게 하므로 기기 사이 간격도 넉넉히 둡니다. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    align-items: stretch;
    gap: 24px 20px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.room-lobby {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(255,245,106,0.22);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)),
        rgba(1,8,20,0.72);
    box-shadow: 0 16px 30px rgba(0,0,0,0.26), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.room-lobby-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.room-lobby-head h2 {
    margin: 0;
    color: #fff56a;
    font-family: 'Orbitron', 'IBM Plex Sans KR', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    text-shadow: 0 0 16px rgba(255,245,106,0.32), 0 0 28px rgba(105,255,241,0.16);
}
.room-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.room-card {
    display: grid;
    gap: 8px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 13px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035)),
        rgba(0,0,0,0.30);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035);
}
.room-card:hover {
    /* 열린방 카드에 실제 오락기 패널의 점등감을 주어 클릭 가능한 영역임을 명확하게 보여줍니다. */
    border-color: rgba(255,245,106,0.34);
    box-shadow:
        0 12px 28px rgba(0,0,0,0.22),
        0 0 22px rgba(105,255,241,0.12),
        inset 0 0 0 1px rgba(255,255,255,0.045);
}
.open-room-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(105,255,241,0.30);
    background:
        repeating-linear-gradient(90deg, rgba(105,255,241,0.035) 0 1px, transparent 1px 8px),
        linear-gradient(135deg, rgba(105,255,241,0.10), rgba(255,245,106,0.055)),
        rgba(0,0,0,0.36);
}
.open-room-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-top: 3px solid rgba(255,245,106,0.26);
    background: linear-gradient(90deg, transparent, rgba(255,245,106,0.10), transparent);
    pointer-events: none;
}
.open-room-card > * {
    position: relative;
    z-index: 1;
}
.room-card-title {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}
.room-card-title strong {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.room-status {
    flex-shrink: 0;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(105,255,241,0.24);
    background: rgba(105,255,241,0.075);
    color: #9ffff7;
    font-size: 0.72rem;
    font-weight: 900;
    box-shadow: inset 0 0 10px rgba(105,255,241,0.08);
}
.room-status.playing {
    border-color: rgba(255,245,106,0.26);
    background: rgba(255,245,106,0.10);
    color: #fff56a;
}
/* 등급 아이콘은 고정 크기이고 글자는 한 묶음으로 유지해 카드·휴대폰에서 서로 겹치지 않습니다. */
.arcade-rank-icon { display: block; width: 24px; height: 24px; flex: 0 0 24px; }
.arcade-rank-icon[hidden] { display: none; }
.arcade-rank-badge { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.arcade-rank-legend { display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 0 0 10px; color: #c9d8e8; font-size: .7rem; }
.arcade-rank-legend .arcade-rank-icon { width: 20px; height: 20px; flex-basis: 20px; }
@media (max-width: 420px) {
    /* 긴 닉네임과 등급이 함께 있는 랭킹 카드는 등급을 다음 줄로 내려 텍스트 잘림을 피합니다. */
    .room-card-title:has(> .arcade-rank-badge) { flex-wrap: wrap; }
    .room-card-title:has(> .arcade-rank-badge) > strong { white-space: normal; overflow-wrap: anywhere; }
}
.room-status.server {
    border-color: rgba(92,255,153,0.30);
    background: rgba(92,255,153,0.10);
    color: #9dffc4;
}
.room-status.queue {
    border-color: rgba(255,245,106,0.30);
    background: rgba(255,245,106,0.11);
    color: #fff56a;
}
.room-status.full {
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08);
    color: #c9d8ee;
}
.room-players {
    display: grid;
    gap: 4px;
    color: #c9d8ee;
    font-size: 0.86rem;
}
.room-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.room-entry-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px 9px;
    border: 1px solid rgba(105,255,241,0.20);
    border-radius: 9px;
    background:
        repeating-linear-gradient(90deg, rgba(105,255,241,0.06) 0 1px, transparent 1px 7px),
        rgba(0,0,0,0.34);
    box-shadow: inset 0 0 14px rgba(105,255,241,0.07);
}
.room-entry-strip strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 0.86rem;
}
.room-entry-strip small {
    color: #69fff1;
    font-size: 0.72rem;
    font-weight: 900;
    white-space: nowrap;
}
.room-entry-strip.is-ready {
    border-color: rgba(105,255,241,0.25);
}
.room-entry-strip.is-watch {
    border-color: rgba(255,245,106,0.24);
    background:
        linear-gradient(90deg, rgba(255,245,106,0.10), rgba(255,255,255,0.04)),
        rgba(0,0,0,0.22);
}
.room-entry-strip.is-blocked {
    border-color: rgba(255,120,120,0.35);
    background:
        linear-gradient(90deg, rgba(255,70,70,0.12), rgba(255,255,255,0.04)),
        rgba(0,0,0,0.22);
}
.room-slot-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}
.room-slot-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 8px;
    background: rgba(0,0,0,0.30);
    color: #dce8ff;
    font-size: 0.78rem;
}
.room-slot-pill.empty {
    border-color: rgba(105,255,241,0.34);
    background: rgba(105,255,241,0.08);
    color: #9ffff7;
}
.room-slot-pill strong {
    color: #fff56a;
    flex: 0 0 auto;
}
.room-slot-pill span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.room-lobby-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 작은 게임 목록 카드에서도 접속 인원과 관전/난입 버튼이 서로 밀어내지 않게 두 줄 배치를 허용합니다. */
    flex-wrap: wrap;
    gap: 8px;
}
.room-action-buttons {
    /* 관전하기/난입하기 버튼은 카드 전체 폭 안에서 같은 비율로 나눠 한글 글자가 잘리지 않게 합니다. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 7px;
    width: 100%;
    white-space: nowrap;
}
.room-action-buttons .arcade-btn {
    /* 2P 난입하기처럼 가장 긴 문구 기준으로 폭을 확보하고, 내부 텍스트는 줄바꿈하지 않습니다. */
    min-width: 0;
    justify-content: center;
    padding: 9px 14px;
    border-color: rgba(255,245,106,0.50);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255,245,106,0.24), rgba(255,245,106,0.07)),
        rgba(0,0,0,0.28);
    box-shadow:
        0 8px 16px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -2px 0 rgba(0,0,0,0.22);
    white-space: nowrap;
}
.room-action-buttons .arcade-btn.secondary {
    border-color: rgba(105,255,241,0.50);
    background:
        linear-gradient(180deg, rgba(105,255,241,0.22), rgba(105,255,241,0.07)),
        rgba(0,0,0,0.28);
}
.room-action-buttons .arcade-btn:only-child {
    /* 대기방처럼 버튼이 하나뿐인 경우에는 카드 절반이 비어 보이지 않게 전체 폭을 사용합니다. */
    grid-column: 1 / -1;
}
.room-live-counts {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
    /* 인원 카운터는 버튼과 같은 줄에서 폭을 빼앗지 않고 항상 위 줄에 표시합니다. */
    flex: 1 1 100%;
    min-width: 0;
    color: #dce8ff;
    font-size: 0.76rem;
    white-space: nowrap;
}
.room-live-counts span {
    /* 플레이어/관전자 숫자는 전광판 카운터처럼 보여야 한눈에 방 열기를 파악할 수 있습니다. */
    padding: 5px 8px;
    border: 1px solid rgba(105,255,241,0.24);
    border-radius: 8px;
    background:
        repeating-linear-gradient(90deg, rgba(105,255,241,0.08) 0 1px, transparent 1px 6px),
        rgba(0,0,0,0.36);
    color: #eaffff;
    box-shadow: inset 0 0 12px rgba(105,255,241,0.08);
    font-weight: 900;
}
.room-empty {
    padding: 16px;
    border: 1px dashed rgba(255,255,255,0.24);
    border-radius: 16px;
    color: #b9c9e2;
    text-align: center;
}
.request-board {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(105,255,241,0.16);
    border-radius: 20px;
    background:
        radial-gradient(circle at 90% 0%, rgba(105,255,241,0.12), transparent 32%),
        rgba(0,0,0,0.24);
}
.request-board-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.request-board-head h2 {
    margin: 0 0 5px;
    color: #fff56a;
    font-family: 'Orbitron', 'IBM Plex Sans KR', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
}
.request-board-head p {
    margin: 0;
    color: #c9d8ee;
    font-size: 0.88rem;
    line-height: 1.45;
}
.request-message {
    padding: 10px 12px;
    border: 1px solid rgba(255,245,106,0.26);
    border-radius: 12px;
    background: rgba(255,245,106,0.08);
    color: #fff7b0;
    font-weight: 800;
}
.request-form {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(150px, 0.8fr) minmax(220px, 1fr) auto;
    gap: 8px;
    align-items: end;
}
.request-form label {
    display: grid;
    gap: 5px;
    color: #9ffff7;
    font-size: 0.78rem;
    font-weight: 900;
}
.request-form input,
.request-form select,
.request-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    background: rgba(0,0,0,0.48);
    color: #fff;
    padding: 9px 11px;
    font-family: 'IBM Plex Sans KR', sans-serif;
}
.request-form textarea {
    grid-column: 1 / -2;
    min-height: 54px;
    resize: vertical;
}
.request-form.member-upload-form {
    grid-template-columns: repeat(3, minmax(180px, 1fr)) auto;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.request-form.member-upload-form .wide {
    grid-column: 1 / -1;
}
.request-form.member-upload-form textarea {
    grid-column: span 2;
}
.request-form.member-upload-form input[type="file"] {
    padding: 7px;
}
.copyright-check {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    color: #dce8ff;
    line-height: 1.5;
    font-size: 0.9rem;
}
.copyright-check input {
    margin-top: 3px;
    flex: 0 0 auto;
}
.request-login-guide {
    padding: 13px;
    border: 1px dashed rgba(255,255,255,0.24);
    border-radius: 14px;
    color: #dce8ff;
    background: rgba(255,255,255,0.04);
}
.request-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.request-card {
    display: grid;
    gap: 7px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    background: rgba(255,255,255,0.055);
}
.request-card-title {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}
.request-card-title strong {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.request-status {
    flex-shrink: 0;
    padding: 3px 8px;
    border: 1px solid rgba(105,255,241,0.24);
    border-radius: 999px;
    color: #9ffff7;
    background: rgba(105,255,241,0.09);
    font-size: 0.72rem;
    font-weight: 900;
}
.request-status.done {
    border-color: rgba(255,245,106,0.32);
    color: #fff56a;
    background: rgba(255,245,106,0.09);
}
.request-card small,
.request-card p {
    margin: 0;
    color: #c9d8ee;
    line-height: 1.5;
}
.request-card a {
    color: #9ffff7;
    font-weight: 800;
    word-break: break-all;
}
@media (max-width: 900px) {
    .arcade-coin-policy {
        grid-template-columns: 1fr;
    }
    .arcade-coin-guide {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    body {
        /* 모바일에서도 오락실 배경을 화면에 고정해 긴 게임 목록을 내려도 동일한 오락실 분위기를 유지합니다. */
        background-attachment: fixed, fixed, fixed, fixed;
        background-size: auto, auto, auto 620px, auto;
        background-position: center, center, 42% 54px, center;
    }
    .arcade-atmosphere-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .arcade-atmosphere-head > div {
        width: 100%;
        min-width: 0;
    }
    .arcade-atmosphere-head p {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .arcade-feature-lights {
        justify-content: flex-start;
    }
    .arcade-atmosphere-stats {
        grid-template-columns: repeat(6, minmax(112px, 1fr));
        overflow-x: auto;
        padding-bottom: 2px;
    }
    .request-form.member-upload-form,
    .request-form {
        grid-template-columns: 1fr;
    }
    .request-form textarea,
    .request-form.member-upload-form textarea,
    .request-form.member-upload-form .wide {
        grid-column: 1 / -1;
    }
}
@media (max-width: 560px) {
    .arcade-atmosphere-board {
        min-height: 0;
        padding: 13px 11px;
        border-width: 3px;
        /* 좁은 화면에서는 배경을 지나치게 확대하지 않아 오락기와 인물의 색감이 일부 남도록 합니다. */
        background-size: auto, auto, auto 72%, auto;
        background-position: center, center, 42% top, center;
    }
    .arcade-atmosphere-head h2 {
        font-size: 1.24rem;
        letter-spacing: 0.08em;
    }
    .arcade-atmosphere-head p {
        font-size: 0.78rem;
        line-height: 1.5;
    }
    .arcade-feature-lights {
        gap: 5px;
    }
    .arcade-feature-light {
        min-height: 25px;
        padding: 3px 8px;
        font-size: 0.67rem;
    }
    .arcade-atmosphere-stats {
        /* 휴대폰에서는 상태 카드를 가로로 숨기지 않고 2열로 모두 표시합니다. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        gap: 7px;
    }
    .arcade-atmosphere-stat {
        padding: 8px;
    }
    .arcade-atmosphere-stat strong {
        font-size: .93rem;
    }
    .arcade-atmosphere-stat small {
        font-size: .68rem;
    }
    .arcade-live-marquee span {
        /* 모바일 공통 CSS가 영향을 줘도 오락실 전광판의 좌측 흐름은 유지합니다. */
        animation: arcadeMarquee 14s linear infinite;
        will-change: transform;
    }
}
@media (prefers-reduced-motion: reduce) {
    /* 멀미·시각 피로 방지 설정을 사용하는 이용자에게는 전광판 흐름과 카드 확대 효과를 정지합니다. */
    .arcade-live-marquee span {
        animation: none;
        transform: none;
    }
    .game-card,
    .game-thumb img {
        transition: none;
    }
}
.talk-board {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(255,245,106,0.18);
    border-radius: 20px;
    background:
        radial-gradient(circle at 8% 0%, rgba(255,245,106,0.13), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,0.055), rgba(105,255,241,0.035)),
        rgba(0,0,0,0.24);
}
.talk-form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: 8px;
    align-items: end;
}
.talk-form label {
    display: grid;
    gap: 5px;
    color: #9ffff7;
    font-size: 0.78rem;
    font-weight: 900;
}
.talk-form input,
.talk-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    background: rgba(0,0,0,0.48);
    color: #fff;
    padding: 9px 11px;
    font-family: 'IBM Plex Sans KR', sans-serif;
}
.talk-form textarea {
    min-height: 44px;
    resize: vertical;
}
.talk-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.talk-card {
    display: grid;
    gap: 7px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    background: rgba(0,0,0,0.22);
}
.talk-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.talk-card-head strong {
    min-width: 0;
    overflow: hidden;
    margin: 0;
    color: #fff;
    font-size: 0.98rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.talk-card small {
    flex-shrink: 0;
    color: #9ffff7;
    font-size: 0.74rem;
}
.talk-card p {
    margin: 0;
    color: #c9d8ee;
    font-size: 0.9rem;
    line-height: 1.55;
}
.talk-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    justify-self: start;
}
.talk-hide-form {
    margin: 0;
}
.talk-hide-form button {
    min-height: 30px;
    padding: 0 9px;
    border-color: rgba(255,118,118,0.34);
    background: linear-gradient(135deg, #ff7676, #ffbf69);
}
/*
 * 오락실 게시판은 짧은 메모 카드 대신 일반 게시판형 행 목록을 사용합니다.
 * 제목 공간을 가장 넓게 확보하고 작성자·조회·날짜 폭을 고정해 긴 글과 닉네임도 열을 밀어내지 않게 합니다.
 */
.arcade-community-board {
    display: grid;
    gap: 16px;
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(105,255,241,.22);
    border-radius: 20px;
    background:
        radial-gradient(circle at 8% 0%, rgba(255,245,106,.11), transparent 27%),
        radial-gradient(circle at 96% 6%, rgba(69,240,255,.12), transparent 26%),
        linear-gradient(145deg, rgba(8,18,45,.97), rgba(15,7,30,.96));
    box-shadow: 0 18px 38px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
    box-sizing: border-box;
}
.arcade-community-head,
.arcade-community-panel-head,
.arcade-community-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}
.arcade-community-head > div:first-child,
.arcade-community-panel-head > div {
    min-width: 0;
}
.arcade-community-head span,
.arcade-community-panel-head span {
    color: #69fff1;
    font-family: 'Orbitron', 'IBM Plex Sans KR', sans-serif;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .12em;
}
.arcade-community-head h2 {
    margin: 4px 0 5px;
    color: #fff56a;
    font-family: 'Orbitron', 'IBM Plex Sans KR', sans-serif;
    font-size: 1.35rem;
    letter-spacing: .04em;
}
.arcade-community-head p,
.arcade-community-panel-head p {
    margin: 0;
    /* 어두운 오락실 패널에서도 자유·버그/제보 게시판 안내문이 또렷하게 읽히도록 대비를 높입니다. */
    color: #e6f0ff !important;
    font-size: .84rem;
    font-weight: 750;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.arcade-community-count {
    display: grid;
    flex: 0 0 auto;
    min-width: 76px;
    padding: 9px 12px;
    border: 1px solid rgba(255,245,106,.28);
    border-radius: 12px;
    background: rgba(255,245,106,.07);
    text-align: center;
}
.arcade-community-count strong {
    color: #fff56a;
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
}
.arcade-community-count small { color: #cbd7eb; font-size: .68rem; }
/*
 * 상위 오락실 메뉴의 "게시판" 안에서 게시판 종류를 선택하는 실제 하위 탭입니다.
 * 탭 너비를 동일하게 배분하고 긴 설명은 말줄임 처리해 작은 화면에서도 서로 밀거나 겹치지 않습니다.
 */
.arcade-board-subtabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    min-width: 0;
    padding: 5px;
    border: 1px solid rgba(105,255,241,.16);
    border-radius: 14px;
    background: rgba(0,0,0,.3);
    box-sizing: border-box;
}
.arcade-board-subtab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    min-height: 48px;
    padding: 8px 12px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #d7e5f8;
    background: rgba(255,255,255,.045);
    text-decoration: none;
    box-sizing: border-box;
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.arcade-board-subtab:hover {
    border-color: rgba(105,255,241,.32);
    background: rgba(105,255,241,.08);
    text-decoration: none;
    transform: translateY(-1px);
}
.arcade-board-subtab > span { min-width: 0; }
.arcade-board-subtab strong,
.arcade-board-subtab small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arcade-board-subtab strong { color: inherit; font-size: .84rem; }
.arcade-board-subtab small { margin-top: 2px; color: #8fa6c5; font-size: .67rem; }
.arcade-board-subtab > b {
    flex: 0 0 auto;
    color: #fff56a;
    font-family: 'Orbitron', sans-serif;
    font-size: .7rem;
}
.arcade-board-subtab.active {
    border-color: rgba(255,245,106,.46);
    color: #10142c;
    background: linear-gradient(135deg, #fff56a, #69fff1);
    box-shadow: 0 7px 18px rgba(69,240,255,.13);
}
.arcade-board-subtab.active small,
.arcade-board-subtab.active > b { color: #26334b; }
.arcade-community-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
}
.arcade-community-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(105,255,241,.18);
    border-radius: 16px;
    background: rgba(0,0,0,.27);
}
.arcade-community-panel.bug { border-color: rgba(255,119,151,.24); }
/* 공용 header 배너 스타일이 게시판 패널 헤더에 침범해 어두운 오버레이가 생기는 충돌을 제거합니다. */
header.arcade-community-panel-head {
    margin: 0;
    padding: 14px 15px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
    border-radius: 0;
    background: transparent;
    background-image: none;
    box-shadow: none;
    overflow: visible;
    text-align: left;
}
header.arcade-community-panel-head::before {
    content: none !important;
    display: none !important;
}
header.arcade-community-panel-head h3,
header.arcade-community-panel-head p {
    position: static;
    z-index: auto;
    text-shadow: none;
}
.arcade-community-panel-head h3 {
    margin: 3px 0 4px;
    color: #f7fbff;
    font-size: 1.04rem;
}
.arcade-community-panel-head > strong {
    flex: 0 0 auto;
    color: #fff56a;
    font-family: 'Orbitron', sans-serif;
    font-size: .78rem;
}
.arcade-community-table { min-width: 0; }
.arcade-community-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) minmax(120px, 160px) 64px 68px;
    align-items: center;
    min-width: 0;
    min-height: 42px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    color: #dbe7f8;
    font-size: .78rem;
}
.arcade-community-row:last-child { border-bottom: 0; }
.arcade-community-row > * {
    min-width: 0;
    padding: 8px 9px;
    box-sizing: border-box;
}
.arcade-community-row.head {
    min-height: 34px;
    background: rgba(105,255,241,.075);
    color: #9ffff7;
    font-size: .7rem;
    font-weight: 900;
    text-align: center;
}
.arcade-community-row .number,
.arcade-community-row .views,
.arcade-community-row time { color: #93a9c7; text-align: center; }
.arcade-community-row .title {
    display: block;
    overflow: hidden;
    color: #f7fbff;
    font-weight: 800;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.arcade-community-row .title:hover { color: #fff56a; text-decoration: none; }
.arcade-community-row .title b { color: #ff91ac; font-size: .7rem; }
.arcade-community-row .title em { color: #69fff1; font-size: .7rem; font-style: normal; }
.arcade-community-row .author {
    overflow: hidden;
    color: #c9d8ee;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.arcade-community-row .author small { color: #69fff1; font-size: .66rem; }
.arcade-community-empty { padding: 24px 14px; color: #9fb0c9; text-align: center; }
.arcade-community-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    width: 100%;
    padding: 11px 14px;
    overflow: visible;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.025);
    box-sizing: border-box;
}
.arcade-community-list-button,
.arcade-community-write-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    min-height: 36px;
    padding: 7px 13px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 10px;
    color: #e8f2ff;
    background: rgba(255,255,255,.07);
    font-size: .76rem;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
}
.arcade-community-write-button {
    border-color: rgba(255,245,106,.46);
    color: #10142c;
    background: linear-gradient(135deg, #fff56a, #69fff1);
}
.arcade-community-write-button.login { min-width: 122px; }
.arcade-community-list-button:hover,
.arcade-community-write-button:hover { filter: brightness(1.08); text-decoration: none; }
@media (max-width: 720px) {
    .arcade-community-board { padding: 13px; border-radius: 15px; }
    .arcade-community-head { align-items: flex-start; }
    .arcade-community-head p { font-size: .76rem; }
    .arcade-board-subtab { min-height: 44px; padding: 7px 9px; }
    .arcade-board-subtab small { font-size: .62rem; }
    .arcade-community-row { grid-template-columns: minmax(0, 1fr) minmax(86px, 112px) 58px; }
    /* 모바일은 핵심 정보인 제목·작성자·날짜를 유지하고 번호·조회 열만 숨겨 가로 잘림을 막습니다. */
    .arcade-community-row > :nth-child(1),
    .arcade-community-row > :nth-child(4) { display: none; }
    .arcade-community-row > * { padding: 8px 7px; }
    .arcade-community-panel-head { align-items: flex-start; }
    /* 두 작업 버튼을 가용 폭 안에서 정확히 반씩 배치해 글쓰기 문구와 우측 테두리가 잘리지 않게 합니다. */
    .arcade-community-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
    }
    .arcade-community-actions a {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding-inline: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
@media (max-width: 440px) {
    .arcade-community-head p,
    .arcade-community-panel-head p { display: none; }
    .arcade-community-count { min-width: 60px; padding: 7px 9px; }
    /* 매우 좁은 화면은 보조 설명을 숨기고 게시판명과 글 수만 한 줄에 유지합니다. */
    .arcade-board-subtab { gap: 4px; padding: 7px; }
    .arcade-board-subtab strong { font-size: .75rem; }
    .arcade-board-subtab small { display: none; }
    .arcade-board-subtab > b { font-size: .62rem; }
    .arcade-community-row { grid-template-columns: minmax(0, 1fr) 82px 54px; font-size: .72rem; }
    .arcade-community-row .author small { display: none; }
    .arcade-community-actions { justify-content: stretch; }
    .arcade-community-actions a { min-width: 0; }
}
/*
 * 브라우저 기본 confirm 창은 오락실 레트로 UI와 분리되어 보입니다.
 * 삭제처럼 복구할 수 없는 동작은 CRT 화면 느낌의 전용 모달에서 한 번 더 확인하게 합니다.
 */
.arcade-delete-modal[hidden] { display: none; }
.arcade-delete-modal {
    position: fixed;
    z-index: 2200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, .78);
    backdrop-filter: blur(4px);
}
.arcade-delete-modal__panel {
    width: min(100%, 460px);
    overflow: hidden;
    border: 3px double #fff56a;
    border-radius: 5px;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 5px), linear-gradient(135deg, #210a15, #071327 62%, #170b23);
    box-shadow: 0 0 0 4px rgba(255, 75, 120, .18), 10px 10px 0 rgba(0,0,0,.55), 0 0 28px rgba(255, 75, 120, .34);
}
.arcade-delete-modal__title {
    margin: 0;
    padding: 12px 16px;
    border-bottom: 2px solid rgba(255, 245, 106, .72);
    color: #fff56a;
    background: rgba(0,0,0,.48);
    font-family: 'Orbitron', 'IBM Plex Sans KR', sans-serif;
    font-size: 1rem;
    letter-spacing: .06em;
    text-shadow: 0 0 10px rgba(255,245,106,.72);
}
.arcade-delete-modal__body { padding: 20px 18px 16px; color: #f5f8ff; font-size: .94rem; font-weight: 700; line-height: 1.65; }
.arcade-delete-modal__warning { display: block; margin-top: 8px; color: #ff92ae; font-size: .82rem; }
.arcade-delete-modal__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 18px 18px; }
.arcade-delete-modal__button {
    min-width: 112px;
    min-height: 40px;
    padding: 0 14px;
    border: 2px solid #dce8ff;
    border-radius: 4px;
    background: #0c2347;
    color: #fff;
    font-family: 'IBM Plex Sans KR', sans-serif;
    font-size: .86rem;
    font-weight: 900;
    cursor: pointer;
}
.arcade-delete-modal__button:hover, .arcade-delete-modal__button:focus-visible { outline: none; transform: translateY(-1px); border-color: #fff56a; background: #173b70; }
.arcade-delete-modal__button--danger { border-color: #ff7197; background: linear-gradient(135deg, #a3123f, #5e0e31); box-shadow: inset 0 0 12px rgba(255,255,255,.12), 0 0 12px rgba(255,65,118,.22); }
@media (max-width: 480px) {
    .arcade-delete-modal__actions { flex-direction: column-reverse; }
    .arcade-delete-modal__button { width: 100%; }
}
.game-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 8px 12px;
    border: 3px solid #526d85;
    border-radius: 19px 19px 12px 12px;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 5px),
        linear-gradient(100deg, #0a111c 0 8%, #263f55 8% 14%, #101b2a 14% 86%, #263f55 86% 92%, #080f19 92%);
    box-shadow:
        inset 0 0 0 2px rgba(4,11,19,0.82),
        inset 0 5px 0 rgba(255,255,255,0.05),
        7px 9px 0 rgba(0,0,0,0.38),
        0 20px 34px rgba(0,0,0,0.30);
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.game-card::before {
    /* 캐비닛 상단 네온은 실제 오락실 기기의 간판 전원이 켜진 느낌을 줍니다. */
    content: '';
    position: absolute;
    z-index: 4;
    top: 0;
    left: 15%;
    right: 15%;
    height: 4px;
    border-radius: 0 0 7px 7px;
    background: linear-gradient(90deg, #ff4d9d, #fff56a 48%, #69fff1);
    box-shadow: 0 0 10px rgba(255,245,106,0.82), 0 0 20px rgba(105,255,241,0.42);
}
.game-card:hover {
    border-color: #69fff1;
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 2px rgba(5,15,24,0.82), 7px 11px 0 rgba(0,0,0,0.36), 0 0 0 3px rgba(82,216,232,0.12), 0 20px 38px rgba(0,0,0,0.32);
}
.game-card.is-card-focus {
    /* 추천 카드로 이동했음을 짧게 강조하되 카드 크기는 바꾸지 않아 목록 재배치를 막습니다. */
    border-color: #fff56a;
    box-shadow: inset 0 0 0 2px rgba(5,15,24,0.82), 7px 11px 0 rgba(0,0,0,0.36), 0 0 0 4px rgba(255,245,106,0.22), 0 0 28px rgba(105,255,241,0.22);
}
.cabinet-marquee {
    /* 게임 제목을 실제 오락기 상단의 백라이트 간판처럼 독립시킵니다. */
    display: grid;
    place-content: center;
    position: relative;
    z-index: 2;
    min-height: 72px;
    margin: 2px 4px 8px;
    padding: 8px 12px;
    overflow: hidden;
    border: 2px solid #f6d95b;
    border-radius: 11px 11px 5px 5px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,245,106,0.34), transparent 50%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 7px),
        linear-gradient(135deg, #50123e, #171743 52%, #063b4b);
    box-shadow: inset 0 0 18px rgba(255,77,157,0.25), 0 0 12px rgba(255,245,106,0.18);
    text-align: center;
}
.cabinet-marquee::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 7px 7px 3px 3px;
    pointer-events: none;
}
.cabinet-brand {
    color: #69fff1;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    line-height: 1;
    text-shadow: 0 0 8px rgba(105,255,241,0.75);
}
.cabinet-marquee-title {
    display: -webkit-box;
    margin: 5px 0 0;
    overflow: hidden;
    color: #fffbd0;
    font-family: 'Orbitron', 'IBM Plex Sans KR', sans-serif;
    font-size: 1.08rem;
    font-weight: 950;
    line-height: 1.22;
    letter-spacing: 0.025em;
    text-shadow: 2px 2px 0 #9a1d62, 0 0 10px rgba(255,245,106,0.66);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.cabinet-screen-bezel {
    /* 두꺼운 베젤과 안쪽 그림자로 썸네일을 평면 이미지가 아닌 CRT 모니터로 표현합니다. */
    margin: 0 4px;
    padding: 11px 11px 14px;
    border: 2px solid #394b5c;
    border-bottom-color: #07101a;
    border-radius: 5px 5px 13px 13px;
    background: linear-gradient(145deg, #172433, #03070c 62%, #101c29);
    box-shadow: inset 3px 3px 0 rgba(255,255,255,0.06), inset -4px -5px 0 rgba(0,0,0,0.48);
}
.game-thumb {
    display: grid;
    place-items: center;
    position: relative;
    height: 196px;
    margin: 0;
    overflow: hidden;
    border: 3px solid #00040a;
    border-radius: 14px 14px 22px 22px / 11px 11px 18px 18px;
    background:
        radial-gradient(circle at 72% 18%, rgba(45,212,191,0.30), transparent 38%),
        linear-gradient(135deg, #172554, #0f172a 58%, #083344);
    color: #c7f9f0;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 0 rgba(255,255,255,0.32);
    box-shadow: inset 0 0 0 1px rgba(148,163,184,0.26), inset 0 0 34px rgba(0,0,0,0.62), 0 2px 0 rgba(255,255,255,0.05);
}
.game-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    /* 게임 포스터·스크린샷의 하단이 잘리지 않도록 자르기 대신 전체 비율을 보존합니다. */
    object-fit: contain;
    object-position: center center;
    background: #07111f;
    transition: filter .22s ease;
}
.game-thumb::after {
    /* 아케이드 캐비닛의 CRT 화면 질감을 은은하게 더하되 실제 썸네일을 가리지 않습니다. */
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 4px);
    mix-blend-mode: overlay;
}
.game-card:hover .game-thumb img {
    /* 썸네일 확대는 CRT 경계에서 하단 픽셀을 자를 수 있으므로 색감만 강조하고 원본 전체 크기를 유지합니다. */
    transform: none;
    filter: saturate(1.08) contrast(1.04);
}
.cabinet-control-deck {
    /* 조이스틱·버튼은 장식 전용이며 pointer-events를 막아 실제 게임 시작 버튼 조작을 방해하지 않습니다. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    min-height: 62px;
    margin: -1px 1px 0;
    padding: 7px 15px 10px;
    border: 2px solid #4b657b;
    border-top-color: #7893a8;
    border-radius: 4px 4px 15px 15px;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, #314d63 0%, #17293a 48%, #09131f 100%);
    box-shadow: inset 0 3px 0 rgba(255,255,255,0.06), 0 5px 0 #050b12, 0 8px 14px rgba(0,0,0,0.35);
    pointer-events: none;
}
.cabinet-joystick {
    position: relative;
    width: 52px;
    height: 44px;
}
.cabinet-joystick::before {
    content: '';
    position: absolute;
    left: 4px;
    bottom: 0;
    width: 44px;
    height: 16px;
    border: 2px solid #02060b;
    border-radius: 50%;
    background: radial-gradient(circle at 46% 35%, #60788d, #172331 65%);
    box-shadow: inset 0 2px 2px rgba(255,255,255,0.16), 0 2px 3px rgba(0,0,0,0.55);
}
.cabinet-joystick::after {
    content: '';
    position: absolute;
    left: 24px;
    bottom: 9px;
    width: 6px;
    height: 24px;
    border-radius: 4px;
    background: linear-gradient(90deg, #98aabb, #243443);
    transform: rotate(-8deg);
    transform-origin: bottom;
    box-shadow: 1px 0 2px rgba(0,0,0,0.55);
}
.cabinet-joystick i {
    position: absolute;
    z-index: 2;
    left: 14px;
    top: 0;
    width: 25px;
    height: 25px;
    border: 2px solid #510b28;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #ff83ad, #e01960 45%, #7a0c34 76%);
    box-shadow: inset -3px -4px 4px rgba(0,0,0,0.28), 0 3px 5px rgba(0,0,0,0.45);
}
.cabinet-buttons {
    display: flex;
    align-items: center;
    gap: 7px;
    transform: rotate(-7deg);
}
.cabinet-buttons i {
    width: 21px;
    height: 21px;
    border: 2px solid rgba(0,0,0,0.76);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fff8a9, #ffc928 48%, #a45a00 78%);
    box-shadow: inset -2px -3px 3px rgba(0,0,0,0.22), 0 3px 3px rgba(0,0,0,0.48);
}
.cabinet-buttons i:nth-child(2) { background: radial-gradient(circle at 35% 28%, #83fff1, #16c9d1 48%, #087287 78%); }
.cabinet-buttons i:nth-child(3) { background: radial-gradient(circle at 35% 28%, #ff9abb, #f02b6b 48%, #941340 78%); }
.cabinet-coin-slot {
    min-width: 43px;
    padding: 5px 6px;
    border: 2px solid #02060a;
    border-radius: 4px;
    background: #12171d;
    color: #ffef75;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.61rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-align: center;
    box-shadow: inset 0 0 0 1px #4f5e6a, 0 0 7px rgba(255,239,117,0.24);
}
.game-body {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 10px;
    margin: 5px 4px 0;
    padding: 14px 13px 15px;
    border: 1px solid #2e465b;
    border-top: 0;
    border-radius: 0 0 9px 9px;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.035), transparent 12% 88%, rgba(255,255,255,0.025)),
        #0a1522;
    box-shadow: inset 0 -5px 0 rgba(0,0,0,0.20);
}
.game-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.game-pill {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(15,23,42,0.72);
    border: 1px solid rgba(125,211,252,0.24);
    color: #cfefff;
    font-size: 0.74rem;
    font-weight: 900;
}
.game-desc {
    min-height: 40px;
    color: #b9c8dc;
    font-size: 0.84rem;
    line-height: 1.48;
}
.game-card-actions {
    /* 즐겨찾기 제거 후 핵심 실행 버튼 한 개가 카드 폭 전체를 사용해 잘림 없이 정렬됩니다. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: auto;
    min-width: 0;
}
.game-card-actions .arcade-btn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
}
/* 보안 토큰 POST 폼이 카드 전체 폭을 차지하도록 해 앵커를 버튼으로 바꿔도 정렬을 유지합니다. */
.arcade-quick-launch-form { width: 100%; min-width: 0; margin: 0; }
.arcade-quick-launch-form .arcade-btn { cursor: pointer; }
.game-option-details { margin-top: 2px; }
.game-option-details summary { cursor: pointer; color: #93c5fd; font-size: 0.8rem; font-weight: 850; }
.game-option-form { display: grid; gap: 8px; margin-top: 9px; padding-top: 10px; border-top: 1px solid rgba(148,163,184,0.20); }
.game-option-form label { display: flex; align-items: center; gap: 6px; color: #cbd5e1; font-size: 0.8rem; }
/*
 * 오락실 로비 접속자 패널입니다.
 * 닉네임·상태·게임명을 서로 다른 열로 분리하고 긴 닉네임에는 말줄임을 적용해 등급/상태가 아래로 밀리지 않게 합니다.
 */
.arcade-presence-sticky-sentinel {
    display: block;
    width: 100%;
    height: 0;
    min-height: 0;
    pointer-events: none;
}
.arcade-presence-panel {
    /* 평상시에는 본문 카드로 보이고, 스크롤이 닿으면 고정 탭 바로 아래에 붙습니다.
       실제 상단 좌표는 공통 상단바·메인메뉴·오락실 탭 높이를 측정한 스크립트가 전달합니다. */
    position: sticky;
    top: var(--arcade-presence-sticky-top, 158px);
    z-index: 970;
    display: grid;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 16px;
    overflow: hidden;
    border: 1px solid rgba(105,255,241,0.30);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(105,255,241,0.11), transparent 30%),
        linear-gradient(135deg, rgba(20,45,78,0.84), rgba(3,13,31,0.94));
    box-shadow: 0 16px 30px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.06);
    box-sizing: border-box;
    /* Chrome에서 sticky 요소 내부 DOM이 갱신될 때 주변 화면까지 다시 합성되어 깜빡이지 않도록 독립 레이어로 고정합니다. */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}
.arcade-presence-panel.is-stuck {
    /* 고정 중에는 접속자 목록을 가로 한 줄로 압축해 게임 목록과 버튼을 가리지 않습니다. */
    gap: 7px;
    padding: 8px 10px 9px;
    border-radius: 0 0 13px 13px;
    background:
        linear-gradient(135deg, rgba(16,43,70,0.98), rgba(2,11,28,0.98));
    box-shadow: 0 12px 24px rgba(0,0,0,0.48), inset 0 -1px 0 rgba(255,255,255,0.07);
    /* 배경이 98% 불투명하므로 블러의 시각 차이는 거의 없습니다. sticky+blur 재합성으로 생기는 Chrome 깜빡임을 차단합니다. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.arcade-presence-panel.is-stuck .arcade-presence-head {
    align-items: center;
    flex-direction: row;
}
.arcade-presence-panel.is-stuck .arcade-presence-head p {
    display: none;
}
.arcade-presence-panel.is-stuck .arcade-presence-head h2 {
    font-size: .88rem;
}
.arcade-presence-panel.is-stuck .arcade-presence-count {
    min-height: 24px;
    padding: 2px 7px;
    font-size: .68rem;
}
.arcade-presence-panel.is-stuck .arcade-presence-list {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
}
.arcade-presence-panel.is-stuck .arcade-presence-member {
    flex: 0 0 clamp(190px, 24vw, 250px);
    min-height: 48px;
    padding: 6px 8px;
}
.arcade-presence-panel.is-stuck .arcade-presence-message {
    padding: 6px 8px;
    font-size: .7rem;
}
.arcade-presence-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.arcade-presence-head h2 {
    margin: 0;
    color: #ffffff;
    font-size: 1.06rem;
    line-height: 1.3;
}
.arcade-presence-head p {
    margin: 4px 0 0;
    color: #9fb5cf;
    font-size: .78rem;
    line-height: 1.5;
}
.arcade-presence-count {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 4px 9px;
    border: 1px solid rgba(105,255,241,0.36);
    border-radius: 999px;
    background: rgba(0,0,0,0.28);
    color: #bffcff;
    font-size: .74rem;
    font-weight: 900;
    white-space: nowrap;
}
.arcade-presence-count::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #69fff1;
    box-shadow: 0 0 9px #69fff1;
}
.arcade-presence-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr));
    gap: 8px;
    min-width: 0;
}
.arcade-presence-member {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-width: 0;
    min-height: 62px;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 11px;
    background: rgba(1,8,20,0.58);
    color: #eff8ff;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: default;
    box-sizing: border-box;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
/* 게임 중 회원은 관전과 난입을 동시에 선택할 수 있으므로 작은 버튼을 세로로 묶어 카드 폭을 안정적으로 유지합니다. */
.arcade-presence-actions {
    display: grid;
    gap: 4px;
    min-width: 70px;
}
.arcade-presence-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 26px;
    padding: 3px 7px;
    border: 1px solid rgba(105,255,241,0.34);
    border-radius: 7px;
    background: rgba(8,37,66,.92);
    color: #c9ffff;
    font: inherit;
    font-size: .66rem;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
}
.arcade-presence-action:hover,
.arcade-presence-action:focus-visible {
    border-color: #fff56a;
    background: #164e73;
    color: #ffffff;
    outline: none;
    text-decoration: none;
}
.arcade-presence-action.is-join {
    border-color: rgba(255,245,106,.48);
    background: rgba(90,66,7,.88);
    color: #fff9a8;
}
.arcade-presence-action[aria-busy="true"] {
    opacity: .7;
    pointer-events: none;
}
.arcade-presence-member:hover,
.arcade-presence-member:focus-visible {
    border-color: rgba(105,255,241,0.62);
    background: rgba(22,61,91,0.74);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
    outline: none;
}
.arcade-presence-member[disabled] {
    cursor: default;
    opacity: .78;
    transform: none;
}
.arcade-presence-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #69fff1;
    box-shadow: 0 0 8px rgba(105,255,241,.72);
}
.arcade-presence-member.is-playing .arcade-presence-dot {
    background: #ff7aa8;
    box-shadow: 0 0 8px rgba(255,122,168,.78);
}
.arcade-presence-member.is-watching .arcade-presence-dot,
.arcade-presence-member.is-ready .arcade-presence-dot {
    background: #fff56a;
    box-shadow: 0 0 8px rgba(255,245,106,.72);
}
.arcade-presence-copy {
    min-width: 0;
}
.arcade-presence-name,
.arcade-presence-game {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.arcade-presence-name {
    color: #f8fbff;
    font-size: .84rem;
    font-weight: 900;
}
.arcade-presence-game {
    margin-top: 3px;
    color: #8fa9c6;
    font-size: .7rem;
}
.arcade-presence-state {
    flex: 0 0 auto;
    max-width: 82px;
    overflow: hidden;
    padding: 4px 7px;
    border: 1px solid rgba(105,255,241,0.24);
    border-radius: 999px;
    color: #aefaff;
    font-size: .67rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.arcade-presence-member.is-playing .arcade-presence-state {
    border-color: rgba(255,122,168,.35);
    color: #ffb6ce;
}
.arcade-presence-message,
.arcade-presence-empty {
    margin: 0;
    padding: 11px 12px;
    border: 1px dashed rgba(255,255,255,.16);
    border-radius: 10px;
    color: #aabbd1;
    font-size: .76rem;
    line-height: 1.5;
}
/* 런처 상태·확인·설치 버튼은 내용 폭을 보존하며 모바일에서는 자연스럽게 줄바꿈합니다. */
.arcade-launcher-readiness { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; font-size: 12px; }
.arcade-launcher-readiness > span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.arcade-launcher-readiness .arcade-presence-action { flex: 0 0 auto; min-height: 30px; white-space: nowrap; }
.arcade-launcher-readiness button:disabled { opacity: .65; cursor: default; }
.arcade-presence-message[hidden] { display: none; }
.arcade-presence-message.is-success { border-style: solid; border-color: rgba(105,255,241,.30); color: #c8ffff; }
.arcade-presence-message.is-error { border-style: solid; border-color: rgba(255,122,168,.36); color: #ffc0d4; }

/* 대결 게임 선택창은 화면 중앙 고정 패널로 띄우고 긴 게임 목록은 select 내부에서만 스크롤합니다. */
.arcade-challenge-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(0,4,14,.76);
    backdrop-filter: blur(7px);
}
.arcade-challenge-modal[hidden] { display: none; }
.arcade-challenge-panel {
    width: min(460px, 100%);
    max-height: calc(100dvh - 32px);
    padding: 20px;
    overflow-y: auto;
    border: 1px solid rgba(105,255,241,.46);
    border-radius: 16px;
    background: linear-gradient(155deg, #102949, #050e20 72%);
    box-shadow: 0 28px 70px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.09);
    box-sizing: border-box;
}
.arcade-challenge-panel h2 { margin: 0; color: #fff56a; font-size: 1.16rem; }
.arcade-challenge-panel p { margin: 7px 0 16px; color: #b9cbe1; font-size: .82rem; line-height: 1.55; }
.arcade-challenge-panel label { display: block; margin-bottom: 7px; color: #eaf7ff; font-size: .8rem; font-weight: 900; }
.arcade-challenge-panel select {
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid rgba(144,204,242,.36);
    border-radius: 10px;
    background: #061326;
    color: #ffffff;
    font: inherit;
}
.arcade-challenge-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; margin-top: 16px; }
.arcade-challenge-actions .arcade-btn { width: 100%; min-width: 0; white-space: normal; }
.empty-arcade {
    padding: 28px;
    border: 1px dashed rgba(255,255,255,0.28);
    border-radius: 18px;
    color: #dce8ff;
    background: rgba(0,0,0,0.20);
    text-align: center;
}
@media (max-width: 900px) {
    .arcade-intro-strip {
        width: 100%;
        margin-bottom: 0;
        padding: 13px 14px;
        align-items: flex-start;
        flex-direction: column;
    }
    .arcade-intro-strip h1 { font-size:1.4rem; }
    .arcade-intro-strip p { margin-top:6px; font-size:.9rem; line-height:1.55; }
    .arcade-intro-tags {
        justify-content: flex-start;
    }
    .arcade-section-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .arcade-section-tab {
        min-height: 54px;
        justify-items: center;
        text-align: center;
    }
    .request-board-head,
    .request-form,
    .room-slot-row,
    .talk-form {
        grid-template-columns: 1fr;
    }
    .room-lobby-actions {
        display: grid;
        align-items: stretch;
    }
    .room-action-buttons {
        width: 100%;
        justify-content: stretch;
    }
    .room-lobby-actions .arcade-btn {
        flex: 1 1 0;
        justify-content: center;
    }
    .request-board-head {
        flex-direction: column;
    }
    .request-form textarea {
        grid-column: auto;
    }
    .container {
        flex-direction: column;
    }
    .sidebar {
        width: auto;
        margin-right: 0;
    }
    /* 태블릿에서는 기기 비율을 유지하면서 CRT 높이만 살짝 줄여 스크롤 길이를 조절합니다. */
    .game-thumb { height: 190px; }
}
@media (max-width: 700px) {
    /* 휴대폰은 800px 전용 배경만 받아 데이터 사용량과 디코딩 시간을 줄입니다. */
    body,
    .arcade-atmosphere-board {
        background-image:
            linear-gradient(180deg, rgba(3,7,18,0.34) 0, rgba(5,10,25,0.78) 500px, #050814 980px),
            linear-gradient(135deg, rgba(255,45,137,0.16), rgba(21,220,255,0.12) 55%, rgba(255,156,45,0.10)),
            url('assets/arcade/gamecc-arcade-fighters-hero-mobile.webp'),
            linear-gradient(180deg, #111834 0%, #071225 58%, #050814 100%);
    }
    /* 간판은 기존 비네팅을 유지하면서 모바일 전용 배경만 교체합니다. */
    .arcade-atmosphere-board {
        background-image:
            radial-gradient(ellipse at 50% 40%, rgba(1,7,19,0.91) 0 24%, rgba(2,8,22,0.72) 52%, rgba(3,5,12,0.30) 100%),
            linear-gradient(180deg, rgba(2,7,18,0.16), rgba(2,5,14,0.68)),
            url('assets/arcade/gamecc-arcade-fighters-hero-mobile.webp'),
            linear-gradient(135deg, #27120b 0%, #0a1326 35%, #21123a 68%, #16080e 100%);
    }
    /* 모바일 회원 기능은 공통 삼선 메뉴에 들어 있으므로 로그인/내 정보 사이드바를 본문에 중복 노출하지 않습니다. */
    .container > .sidebar {
        display: none !important;
    }
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        overflow-x: clip;
    }
    .arcade-grid {
        /* 휴대폰에서는 오락기 한 대씩 세로로 배치해 간판·조작판·버튼이 잘리거나 겹치지 않게 합니다. */
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .game-card {
        max-width: 430px;
        margin-inline: auto;
    }
    .cabinet-marquee { min-height: 66px; }
    .cabinet-marquee-title { font-size: 1rem; }
    .game-thumb { height: clamp(180px, 52vw, 220px); }
    .arcade-coin-policy {
        gap: 8px;
        padding: 8px;
    }
    .arcade-coin-price {
        min-height: 64px;
    }
    .arcade-coin-guide {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .arcade-coin-guide span {
        padding: 6px 8px;
        font-size: 0.72rem;
    }
    .content.arcade-wrap,
    .arcade-top-stack,
    .arcade-atmosphere-board,
    .arcade-section-tabs,
    .arcade-tab-page,
    .room-lobby,
    .arcade-presence-panel,
    .arcade-community-board,
    .arcade-board-subtabs,
    .arcade-community-grid,
    .arcade-community-panel {
        width: 100%;
        /* 내부의 긴 한글 메뉴가 Grid의 최소 콘텐츠 폭을 키워도 실제 휴대폰 뷰포트를 넘지 않게 고정합니다. */
        max-width: calc(100vw - 24px) !important;
        min-width: 0;
        box-sizing: border-box;
    }
    .arcade-section-tabs.is-stuck {
        /* 휴대폰에서는 다섯 탭을 3열 두 행으로 배치해 이름이 잘리지 않게 합니다. */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
        padding: 5px 4px;
    }
    .arcade-event-hero { align-items:flex-start; flex-direction:column; }
    .arcade-event-grid, .arcade-achievement-grid { grid-template-columns:1fr; }
    .arcade-section-tabs.is-stuck .arcade-section-tab {
        min-height: 44px;
        padding: 7px 2px 6px;
    }
    .arcade-section-tabs.is-stuck .arcade-section-tab::before {
        top: 5px;
        left: 5px;
        width: 5px;
        height: 5px;
    }
    .arcade-section-tabs.is-stuck .arcade-section-tab strong {
        font-size: clamp(0.68rem, 3.2vw, 0.82rem);
    }
    .arcade-presence-head {
        flex-direction: column;
    }
    .arcade-presence-list {
        grid-template-columns: minmax(0, 1fr);
    }
    .arcade-challenge-actions {
        grid-template-columns: 1fr;
    }
}

/* 빠른 대전은 한 줄 운영 패널로 구성해 게임 목록을 밀어내지 않고 작은 화면에서도 버튼이 잘리지 않게 합니다. */
.arcade-smart-match { margin:14px 0; padding:14px 16px; border:1px solid rgba(103,232,249,.3); border-radius:14px; background:linear-gradient(135deg,rgba(8,24,48,.97),rgba(20,31,58,.96)); box-shadow:0 12px 28px rgba(0,0,0,.2); }
.arcade-smart-match__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.arcade-smart-match__head h2 { margin:0; color:#f8fafc; font-size:17px; }
.arcade-smart-match__head p { margin:3px 0 0; color:#a5b4c8; font-size:12px; }
.arcade-smart-match__form { display:grid; grid-template-columns:minmax(220px,1fr) auto auto; gap:8px; align-items:center; }
.arcade-smart-match select { width:100%; min-width:0; height:38px; padding:0 10px; border:1px solid #334d70; border-radius:8px; background:#071426; color:#fff; }
.arcade-smart-match button { min-height:38px; box-sizing:border-box; white-space:nowrap; }
.arcade-smart-match__state { margin:9px 0 0; min-height:18px; color:#9fe7ff; font-size:12px; }
.arcade-smart-match__enter[hidden] { display:none; }
@media (max-width:620px) {
    .arcade-smart-match__head { align-items:flex-start; flex-direction:column; }
    .arcade-smart-match__form { grid-template-columns:1fr; }
    .arcade-smart-match button { width:100%; text-align:center; }
}
/* 오늘의 퀘스트는 이미지·큰 장식 없이 세 개의 작은 카드로 정렬하며 모바일에서도 글자를 자르지 않습니다. */
.arcade-quests { margin:0; padding:9px; border:1px solid #35526e; border-radius:7px; background:#0a1727; }
.arcade-quests__head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 10px; margin-bottom:7px; }
.arcade-quests__head h2 { margin:0; color:#fff08a; font-size:13px; }
.arcade-quests__head small { color:#9eb6cf; font-size:11px; }
.arcade-quests__balance { color:#c9e3ff; font-size:11px; white-space:nowrap; }
.arcade-quests__list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.arcade-quest { display:flex; align-items:center; justify-content:space-between; gap:7px; min-width:0; padding:8px; border:1px solid #2b4057; border-radius:5px; background:#0d1e32; }
.arcade-quest__copy { min-width:0; }
.arcade-quest__copy strong { display:block; font-size:12px; color:#eef7ff; overflow-wrap:anywhere; }
.arcade-quest__copy span { display:block; margin-top:3px; color:#9cb4cd; font-size:11px; line-height:1.45; overflow-wrap:anywhere; }
.arcade-quest__meta { flex-shrink:0; display:grid; gap:4px; text-align:right; font-size:11px; }
.arcade-quest__reward { color:#ffe27e; white-space:nowrap; }
.arcade-quest__state { color:#abc5df; white-space:nowrap; }
.arcade-quest.is-paid { border-color:#337456; }
.arcade-quest.is-paid .arcade-quest__state { color:#8ef0b6; }
.arcade-quests__notice { margin:6px 0 0; color:#91aac5; font-size:11px; line-height:1.45; overflow-wrap:anywhere; }
.arcade-quests__login { margin-top:6px; min-height:30px; padding:4px 10px; box-sizing:border-box; }
@media(max-width:900px) { .arcade-quests__list { grid-template-columns:1fr; } }
/*
 * 2026-09-27 간결한 동네 오락실 UI입니다.
 * 기존 기능은 그대로 두고 중복 정보·큰 장식·과한 여백만 줄여 게임 선택까지의 스크롤을 최소화합니다.
 */
body {
    font-family: "Malgun Gothic", "맑은 고딕", "Gulim", "굴림", sans-serif;
}
.content.arcade-wrap {
    gap: 8px;
    font-size: 13px;
}
.arcade-top-stack {
    margin-bottom: 0;
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(0,0,0,.24);
}
.arcade-atmosphere-board {
    min-height: 0;
    gap: 10px;
    padding: 13px 14px;
    border-width: 2px;
    border-radius: 7px 7px 0 0;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
        linear-gradient(135deg, rgba(36,12,45,.96), rgba(3,20,31,.98));
    box-shadow: inset 0 0 26px rgba(0,0,0,.48);
}
.arcade-atmosphere-board::before {
    inset: 4px;
    border-radius: 4px;
    background: none;
}
.arcade-atmosphere-head {
    align-items: flex-start;
    padding: 0;
}
.arcade-atmosphere-head h2 {
    font-family: "Consolas", "Gulim", monospace;
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    letter-spacing: .08em;
}
.arcade-atmosphere-head p {
    margin-top: 2px;
    font-size: .75rem;
    font-weight: 600;
}
.arcade-era-kicker {
    margin-bottom: 3px;
    font-family: "Consolas", "Gulim", monospace;
    /* 요청한 대로 '동네 오락실 ONLINE' 문구만 기존 크기에서 정확히 1px 키웁니다. */
    font-size: calc(.62rem + 1px);
}
.arcade-atmosphere-stats {
    grid-template-columns: repeat(4, minmax(72px, .7fr)) minmax(150px, 1.4fr);
    gap: 5px;
}
.arcade-atmosphere-stat {
    min-height: 44px;
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(0,0,0,.62);
}
.arcade-atmosphere-stat strong {
    font-family: "Consolas", "Gulim", monospace;
    font-size: .9rem;
}
.arcade-atmosphere-stat small {
    margin-top: 1px;
    font-size: .62rem;
}
.arcade-atmosphere-stat--coin {
    border-color: rgba(255,212,70,.54);
}
.arcade-service-bar {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 7px;
}
.arcade-service-copy {
    min-width: 0;
}
.arcade-service-copy strong,
.arcade-service-copy span {
    display: block;
}
.arcade-service-copy strong {
    color: #fff36a;
    font-size: .83rem;
}
.arcade-service-copy span {
    margin-top: 2px;
    overflow: hidden;
    color: #b9c9da;
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.arcade-admin-diagnostic {
    grid-column: 1 / -1;
    color: #8ca0b6;
    font-size: .62rem;
}
.server-launcher-cta {
    display: grid;
    width: auto;
    min-width: 124px;
    min-height: 38px;
    padding: 5px 12px;
    border-width: 1px;
    border-radius: 4px;
    box-shadow: inset 0 -2px rgba(0,0,0,.22), 0 3px 8px rgba(105,255,241,.12);
}
.server-launcher-cta strong { font-size: .8rem; }
.server-launcher-cta small { font-size: .58rem; }
.arcade-section-tabs,
.arcade-section-tabs.is-stuck {
    /* 압축 디자인에서도 상단 고정을 유지합니다. 기존 스크립트가 상단바·전체메뉴 실측 하단을 전달합니다. */
    position: sticky;
    top: var(--arcade-tabs-sticky-top, 100px);
    z-index: 980;
    /* 공통 압축 스타일에서도 메뉴 통합 후 다섯 열을 유지합니다. */
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 4px;
    padding: 5px;
    border-radius: 7px;
    background: rgba(3,10,22,.96);
    box-shadow: 0 5px 12px rgba(0,0,0,.24);
    backdrop-filter: none;
}
.arcade-section-tab,
.arcade-section-tabs.is-stuck .arcade-section-tab {
    min-height: 38px;
    padding: 7px 5px;
    border-radius: 4px;
    box-shadow: inset 0 -2px rgba(0,0,0,.3);
}
.arcade-section-tab::before {
    top: 5px;
    left: 6px;
    width: 5px;
    height: 5px;
}
.arcade-section-tab::after { border-top-width: 1px; }
.arcade-section-tab strong { font-size: .78rem; }
.arcade-section-tab small { display: none; }
.arcade-btn {
    min-height: 34px;
    padding: 5px 10px;
    font-size: .75rem;
}
.arcade-tab-page { gap: 8px; }
.room-lobby,
.arcade-presence-panel,
.arcade-smart-match,
.request-board,
.talk-board {
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
}
/* 접속자 패널이 게임 카드 위를 덮지 않도록 고정 효과를 제거하고 문서 흐름 안에서만 표시합니다. */
.arcade-presence-panel,
.arcade-presence-panel.is-stuck {
    position: relative;
    top: auto;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    box-shadow: 0 5px 14px rgba(0,0,0,.22);
}
.arcade-presence-head h2,
.room-lobby-head h2,
.arcade-smart-match__head h2 {
    font-size: .9rem;
}
.arcade-presence-head p,
.arcade-smart-match__head p {
    margin-top: 2px;
    font-size: .68rem;
}
.arcade-toolbar,
.game-discovery {
    gap: 6px;
    padding: 8px;
    border-radius: 7px;
}
.arcade-toolbar input,
.arcade-toolbar select {
    min-height: 34px;
    border-radius: 5px;
    font-size: .73rem;
}
.game-filter-row { grid-template-columns: 46px minmax(0,1fr); gap: 6px; }
.game-filter-label { font-size: .68rem; }
.game-filter-tabs { gap: 4px; }
.game-filter-tab {
    min-height: 29px;
    padding: 0 9px;
    border-radius: 4px;
    font-size: .68rem;
}
.arcade-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    gap: 12px 10px;
}
.game-card {
    padding: 5px 5px 8px;
    border-width: 2px;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(4,11,19,.82), 3px 5px 0 rgba(0,0,0,.32), 0 10px 20px rgba(0,0,0,.22);
}
.game-card:hover { transform: translateY(-2px); }
.cabinet-marquee {
    min-height: 46px;
    margin: 1px 2px 4px;
    padding: 5px 8px;
    border-width: 1px;
    border-radius: 5px;
}
.cabinet-brand { display: none; }
.cabinet-marquee-title {
    margin: 0;
    font-family: "Gulim", "굴림", sans-serif;
    font-size: .88rem;
    line-height: 1.25;
}
.cabinet-screen-bezel {
    margin: 0 2px;
    padding: 5px;
    border-width: 1px;
    border-radius: 4px;
}
.game-thumb {
    height: 150px;
    border-width: 1px;
    border-radius: 3px;
}
.cabinet-control-deck { display: none; }
.game-body {
    gap: 6px;
    margin: 3px 2px 0;
    padding: 9px;
    border-radius: 0 0 5px 5px;
}
.game-meta { gap: 3px; }
.game-pill { padding: 2px 5px; border-radius: 3px; font-size: .62rem; }
.game-desc {
    display: -webkit-box;
    min-height: 31px;
    max-height: 31px;
    overflow: hidden;
    font-size: .7rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.game-card-actions { gap: 5px; }
.game-card-actions .arcade-btn { min-height: 32px; padding: 4px 6px; font-size: .69rem; }
.game-option-details summary { font-size: .68rem; }
.game-option-form { gap: 5px; margin-top: 5px; padding-top: 6px; }
.room-card { gap: 6px; padding: 9px; border-radius: 7px; }
.room-status { padding: 3px 6px; font-size: .63rem; }

@media (max-width: 900px) {
    .arcade-atmosphere-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .arcade-atmosphere-stat--coin { grid-column: span 2; }
    .arcade-section-tabs,
    .arcade-section-tabs.is-stuck { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 700px) {
    .arcade-atmosphere-head { gap: 7px; }
    .arcade-atmosphere-head p { max-width: 72vw; }
    .arcade-atmosphere-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .arcade-atmosphere-stat--coin { grid-column: 1 / -1; }
    .arcade-service-bar { grid-template-columns: minmax(0,1fr) auto; }
    .arcade-service-copy span { white-space: normal; }
    .server-launcher-cta { min-width: 104px; }
    .game-filter-row { grid-template-columns: 1fr; }
    .arcade-grid { gap: 10px; }
    .game-card { max-width: 420px; }
    .game-thumb { height: clamp(165px, 50vw, 210px); }
}
@media (max-width: 420px) {
    .arcade-atmosphere-head { display: grid; }
    .arcade-atmosphere-head p { max-width: 100%; }
    .arcade-service-bar { grid-template-columns: 1fr; }
    .server-launcher-cta { width: 100%; box-sizing: border-box; }
}

/*
 * 게임 검색 UI를 입력 영역과 실행 영역으로 나눠 모든 컨트롤의 높이·정렬을 통일합니다.
 * 별도 아이콘이나 외부 파일을 사용하지 않아 추가 네트워크 요청과 렌더링 비용은 만들지 않습니다.
 */
.arcade-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 8px;
    padding: 9px;
    border-color: rgba(105, 255, 241, .28);
    background: linear-gradient(180deg, rgba(5, 20, 40, .94), rgba(2, 11, 26, .94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 5px 18px rgba(0, 0, 0, .16);
}
.arcade-search-fields {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(128px, 170px);
    gap: 7px;
    min-width: 0;
}
.arcade-search-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(82px, auto);
    gap: 7px;
}
.arcade-toolbar .arcade-search-fields input,
.arcade-toolbar .arcade-search-fields select,
.arcade-toolbar .arcade-search-actions .arcade-btn {
    width: 100%;
    height: 38px;
    min-width: 0;
    min-height: 38px;
    margin: 0;
    box-sizing: border-box;
    border-radius: 6px;
    font-size: .75rem;
    line-height: 1;
}
.arcade-toolbar .arcade-search-fields input,
.arcade-toolbar .arcade-search-fields select {
    padding: 0 12px;
    border-color: rgba(126, 231, 255, .32);
    background-color: rgba(0, 5, 16, .9);
}
.arcade-toolbar .arcade-search-fields input::placeholder {
    color: #7891ad;
    opacity: 1;
}
.arcade-toolbar .arcade-search-fields input:focus,
.arcade-toolbar .arcade-search-fields select:focus {
    border-color: #69fff1;
    outline: none;
    box-shadow: 0 0 0 2px rgba(105, 255, 241, .14), inset 0 0 12px rgba(105, 255, 241, .05);
}
.arcade-toolbar .arcade-search-actions .arcade-btn {
    padding: 0 13px;
    white-space: nowrap;
}
.arcade-search-submit {
    border-color: rgba(105, 255, 241, .68);
    background: linear-gradient(180deg, #174e72, #082941);
    color: #f2ffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
}
.arcade-search-reset {
    border-color: rgba(159, 183, 212, .42);
    background: linear-gradient(180deg, #172b45, #0a182b);
    color: #dcecff;
}
.arcade-search-submit:hover,
.arcade-search-submit:focus-visible,
.arcade-search-reset:hover,
.arcade-search-reset:focus-visible {
    border-color: #fff56a;
    color: #ffffff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 245, 106, .14);
}

@media (max-width: 760px) {
    /* 태블릿 이하에서는 버튼 행을 입력 행 아래로 내려 각 버튼 폭을 똑같이 맞춥니다. */
    .arcade-toolbar { grid-template-columns: minmax(0, 1fr); }
    .arcade-search-actions {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .arcade-search-admin { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    /* 작은 휴대폰에서는 검색창과 기종 선택도 세로로 배치해 글자와 화살표가 잘리지 않게 합니다. */
    .arcade-search-fields { grid-template-columns: minmax(0, 1fr); }
}

/* 검색을 먼저 보이게 하고 세부 필터는 네이티브 접힘 요소로 묶어 첫 화면의 반복 버튼을 줄입니다. */
.game-discovery { display: block; padding: 0; overflow: hidden; }
.game-discovery > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 36px;
    padding: 7px 11px;
    color: #dceeff;
    cursor: pointer;
    list-style: none;
}
.game-discovery > summary::-webkit-details-marker { display: none; }
.game-discovery > summary::marker { content: ''; }
.game-discovery > summary strong { color: #fff56a; font-size: .76rem; white-space: nowrap; }
.game-discovery > summary span { min-width: 0; overflow: hidden; color: #9fc3db; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.game-discovery > summary:focus-visible { outline: 2px solid #69fff1; outline-offset: -2px; }
.game-discovery[open] > summary { border-bottom: 1px solid rgba(105,255,241,.2); }
.game-discovery > .game-filter-row { margin: 0; padding: 7px 10px; }
.game-discovery > .game-filter-row + .game-filter-row { border-top: 1px solid rgba(255,255,255,.06); }

/* 휴대폰에서는 네 가지 상태를 한 줄에 묶고 동전 안내만 아래에 둬 게임 검색이 한 화면 빨리 나타납니다. */
@media (min-width: 361px) and (max-width: 700px) {
    .arcade-atmosphere-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .arcade-atmosphere-stat { min-height: 38px; padding: 5px 6px; }
    .arcade-atmosphere-stat--coin {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    .arcade-atmosphere-stat--coin small { margin-top: 0; }
}
/* 아주 좁은 화면은 두 열로 돌아가 숫자·한글 레이블이 잘리지 않게 합니다. */
@media (max-width: 360px) {
    .arcade-atmosphere-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .arcade-atmosphere-stat--coin { grid-column: 1 / -1; }
}
/* 랭크 요약은 최소 폭을 강제하지 않고 모바일에서 한 열로 접어 버튼과 글자 잘림을 방지합니다. */
.arcade-rank-filter { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:10px 0; font-size:12px; }
.arcade-rank-filter select { flex:1 1 190px; min-width:0; max-width:100%; height:32px; padding:4px 7px; border:1px solid #a4a4a4; background:#fff; color:#171717; font:inherit; }
.arcade-rank-filter .arcade-btn { min-height:32px; padding:5px 12px; box-sizing:border-box; }
.arcade-rank-profile { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:10px; margin:8px 0; border:1px solid #34495e; background:#0c1726; color:#d9e8ff; font-size:12px; }
.arcade-rank-profile__badge, .arcade-rank-profile__stats { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; }
.arcade-rank-profile__badge strong { font-size:14px; }
.arcade-rank-profile__stats span { overflow-wrap:anywhere; }
.arcade-rank-week { margin:10px 0; padding:10px; border:1px solid #34495e; background:#0c1726; color:#d9e8ff; font-size:12px; }
.arcade-rank-week h3 { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 7px; font-size:13px; }
.arcade-rank-week small { font-size:11px; font-weight:normal; color:#a9bfd6; }
.arcade-rank-week__row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; padding:6px 0; border-top:1px solid #34495e; overflow-wrap:anywhere; text-decoration:none; color:inherit; }
.arcade-rank-week__row strong, .arcade-rank-week__row span { min-width:0; overflow-wrap:anywhere; }
.arcade-rank-rules { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:11px; color:#a9bfd6; margin:10px 0; }
/* 랭크 진입 링크는 작은 화면에서도 정상 줄바꿈해 버튼 글자가 잘리지 않게 합니다. */
.arcade-rank-entry { margin:6px 0; box-sizing:border-box; max-width:100%; white-space:normal; }
.arcade-section-tab--secondary:not(.active) { background:rgba(10,24,42,.65); box-shadow:none; }
.game-pill--ranked { border-color:#66e0a2; color:#a6ffd0; }
.game-pill--blocked { border-color:#d88471; color:#ffd1c6; }
.arcade-match-detail { margin-top:8px; padding-top:7px; border-top:1px solid rgba(133,181,220,.25); font-size:12px; }
.arcade-match-detail summary { cursor:pointer; color:#bfe4ff; }
.arcade-match-detail p { margin:6px 0; overflow-wrap:anywhere; }
@media (max-width:480px) { .arcade-rank-profile { align-items:flex-start; } .arcade-rank-filter label { flex:0 0 100%; } .arcade-rank-profile__stats { flex:1 1 100%; } }

/* 검색 우선 로비: 기존 남색·청록 레트로 간판을 유지하고 상단의 세로 점유만 줄입니다. */
.arcade-compact-lobby .arcade-atmosphere-board { padding:8px 12px; gap:6px; }
.arcade-compact-lobby .arcade-atmosphere-head h2 { font-size:1.3rem; letter-spacing:.04em; }
.arcade-compact-lobby .arcade-atmosphere-head p { display:none; }
.arcade-compact-lobby .arcade-atmosphere-stats { display:flex; flex-wrap:wrap; gap:4px 12px; }
.arcade-compact-lobby .arcade-atmosphere-stat { display:flex; align-items:baseline; gap:5px; min-height:0; padding:2px 0; border:0; background:none; }
.arcade-compact-lobby .arcade-atmosphere-stat small { margin:0; font-size:11px; }
.arcade-compact-lobby .arcade-atmosphere-stat strong { font-size:13px; }
.arcade-compact-lobby .arcade-service-bar { padding:6px 10px; gap:6px; }
.arcade-compact-lobby .arcade-service-copy span { white-space:normal; overflow-wrap:anywhere; }
.arcade-compact-lobby .arcade-service-copy strong { font-size:12px; }
/* 내용이 짧은 카드에서 여유 높이가 배지 행에 분배되지 않게 설명 행만 늘립니다. */
.arcade-compact-lobby .game-body { grid-template-rows:auto minmax(31px,1fr) auto auto auto; }
.arcade-compact-lobby .game-meta { align-items:flex-start; align-content:flex-start; }
.arcade-compact-lobby .arcade-section-tab { box-sizing:border-box; }
/* 접힌 퀘스트도 키보드로 열 수 있고 보상 처리는 펼침 여부와 무관하게 기존 정책을 따릅니다. */
.arcade-compact-lobby .arcade-quests { padding:0 10px; }
.arcade-quests-details > summary { min-height:38px; cursor:pointer; padding:7px 0; box-sizing:border-box; }
.arcade-quests-details > summary h2 { margin:0; font-size:13px; }
.arcade-quests-details > summary::after { content:'펼치기'; color:#bfe4ff; font-size:11px; margin-left:auto; }
.arcade-quests-details[open] > summary::after { content:'접기'; }
.arcade-quests-details[open] { padding-bottom:8px; }
.arcade-quests-details > summary:focus-visible, .arcade-result-guide > summary:focus-visible { outline:2px solid #69fff1; outline-offset:2px; }
.arcade-execution-info, .arcade-result-guide { color:#c1d3e7; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.arcade-execution-info p, .arcade-result-guide p { margin:5px 0; }
.arcade-execution-info strong { color:#b5f3e8; }
.arcade-result-guide { margin:8px 0; padding:7px 9px; border:1px solid #34495e; }
.arcade-result-guide > summary { cursor:pointer; }
.game-option-form > label:has(input[name="room_title"]) { display:grid; gap:4px; }
/* 휴대폰에서는 동일 정보를 줄바꿈해 보존하고 간판·설치 안내의 큰 고정 높이를 해제합니다. */
@media (max-width:700px) {
    .arcade-compact-lobby .arcade-atmosphere-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
    .arcade-compact-lobby .arcade-atmosphere-stat--coin { flex-basis:100%; justify-content:flex-start; }
    .arcade-compact-lobby .arcade-service-bar { min-height:0; grid-template-columns:minmax(0,1fr) auto; }
    .arcade-compact-lobby .server-launcher-cta { min-width:0; min-height:36px; padding:5px 8px; }
    /* 다섯 핵심 탭은 한 줄로 유지하되 실제 한글 폭과 테두리를 포함해 잘림을 방지합니다. */
    .arcade-compact-lobby .arcade-section-tabs { grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; padding:4px; }
    .arcade-compact-lobby .arcade-section-tab { min-height:40px; padding:6px 2px; }
    .arcade-compact-lobby .arcade-section-tab strong { font-size:11px; letter-spacing:0; white-space:nowrap; }
    .arcade-quests-details > summary { flex-wrap:wrap; gap:5px 10px; }
    .arcade-quests-details > summary small { display:none; }
}