/* 게임장 화면끼리 오갈 때(고블린 크래쉬 · 오토체스는 따로 된 페이지) 하얗게 번쩍이며 바뀌지 않고 겹쳐 바뀌게 (지원 브라우저만, 나머지는 예전처럼)
   사이트 머리 · GAME SELECT 카드 줄은 그 자리에 그대로 → 카드 자리는 js/arcade-common.js 가 새 페이지에서 같은 화면 위치로 맞춤 */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
[data-ar-tabs] { view-transition-name: ar-tabs; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
/* 머리(타이틀 · 지갑) · 게임 메뉴는 늘려 맞추지 않고 새 모습으로 바로 바꿈: 크기가 다른 화면(오토체스는 1200 이상에서 머리가 작음)으로 갈 때
   앞 화면 그림을 새 크기로 늘렸다 줄이며 글자가 일그러져 보였음. 게임장 모든 화면에 걸림: 고른 게임 표시 · 지갑 숫자도 서서히 바뀌지 않고 바로 바뀜 */
::view-transition-group(ar-top), ::view-transition-group(ar-select), ::view-transition-group(ar-tabs),
::view-transition-new(ar-top), ::view-transition-new(ar-select), ::view-transition-new(ar-tabs) { animation: none; }
::view-transition-old(ar-top), ::view-transition-old(ar-select), ::view-transition-old(ar-tabs) { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
/* 게임 칸 머리(게임 이름 h2 + 설명): 바로 위 GAME SELECT 카드에 고른 게임이 보여 이름이 겹치고 자리를 차지했음
   → 칸 안에서는 숨기고, GAME SELECT 제목 줄 오른쪽 [ⓘ 게임 설명] 버튼이 모달로 보여 줌 (js/arcade-common.js) */
.arcade .panel .box > div:first-child:has(> h2 + .muted), .arcade .panel .row > div:has(> h2 + .muted), .arcade .panel .qb-intro > p { display: none; }
.arcade .panel .qb-intro { justify-content: space-between; align-items: flex-start; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid rgba(200,168,96,.28); }
.arcade .panel .qb-intro .qb-tabs { flex: 1 1 auto; justify-content: flex-start; margin-bottom: 0; } /* 상태 탭 왼쪽 · [퀴즈 내기] 오른쪽 끝, 좁으면 버튼이 아래 줄로 */
.arcade .panel .qb-intro .qb-make { flex: none; margin-left: auto; align-self: center; }
.arcade #ar-select-title { align-items: center; }
.ar-help { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px 0 11px; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: 0; color: var(--text-sub); background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.ar-help svg { flex: none; color: var(--accent); }
.ar-stock.is-low, .ar-stock.is-low svg { color: var(--new); } /* 운영자 [문제 은행]: 일주일 안으로 떨어지면 (arcade.js renderStock) */
.qstock__t { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.qstock__t th, .qstock__t td { padding: var(--sp-2) var(--sp-2); text-align: left; border-bottom: 1px solid var(--line); }
.qstock__t thead th { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--muted); }
.qstock__t tbody th { font-weight: var(--fw-bold); color: var(--text-strong); }
.qstock__t tr.is-low td, .qstock__t tr.is-low th { color: var(--new); }
.qstock__note { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); line-height: var(--lh-loose); color: var(--text-sub); }
.qstock__note.is-low { color: var(--new); font-weight: var(--fw-bold); }
.arcade .ar-sec-title .ar-help span { font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: 0; color: inherit; } /* 제목의 영문 글꼴 규칙(.ar-sec-title span)이 묻지 않게 */
@media (max-width: 480px) {
  .arcade #ar-select-title { flex-wrap: nowrap; gap: var(--sp-2); font-size: var(--fs-xl); }
  .ar-help { width: 34px; min-height: 34px; padding: 0; justify-content: center; flex: none; }
  .arcade .ar-sec-title .ar-help span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* 폰: 아이콘만 (읽어 주기용 글자는 남김) */
}
.ar-help:hover, .ar-help:focus-visible { color: var(--text-strong); border-color: var(--accent-line); background: color-mix(in srgb, var(--accent) 10%, var(--surface-solid)); }
/* 게임 설명 모달 */
.ar-guide { display: flex; flex-direction: column; gap: var(--sp-3); }
.ar-guide__desc { margin: 0; font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--text); }
.ar-guide__h { margin: var(--sp-2) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); }
.ar-guide__rules { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--text-sub); }
.ar-guide__rules li::marker { color: var(--accent); }
.ar-guide__etc { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--text-sub); }
.ar-guide .el { font-weight: var(--fw-bold); color: var(--text-strong); }
.ar-guide .el.fire { color: #f87171; } .ar-guide .el.ice { color: #7dd3fc; } .ar-guide .el.shadow { color: #c084fc; }
/* 가위바위보 룰렛 배수표 */
.ar-guide .rpsm-odds { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.ar-guide .rpsm-odds li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.ar-guide .rpsm-odds b { font-size: var(--fs-lg); color: #FFD54A; } .ar-guide .rpsm-odds span { color: var(--text-strong); } .ar-guide .rpsm-odds em { font-style: normal; font-size: var(--fs-xs); color: var(--muted); }
/* 랭킹 아래 설명 상자는 화면에서 숨김 → [ⓘ 게임 설명] 모달로 (운영자 패널은 그대로) */
.arcade .panel .glass.rules { display: none; }
/* 가로 보기 (js/arcade-common.js [data-landscape]): 버튼은 폰 세로 화면에서만 */
.ar-rot { display: none; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 40px; margin-top: var(--sp-2); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.ar-rot-x { display: none; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 5; min-height: 34px; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; cursor: pointer; }
@media (max-width: 768px) and (orientation: portrait) { .ar-rot { display: flex; } }
.ar-rot-on .ar-rot-x, :fullscreen .ar-rot-x { display: block; }
.has-rot-btn .ar-rot-x, .ar-rot[hidden] { display: none !important; }   /* 게임 안에 [가로 · 세로] 단추가 있는 게임(고블린)은 바깥 단추를 안 씀 */
/* 돌림: 세로 화면에서 게임 칸을 90도 돌려 화면 전체를 가로처럼 */
[data-landscape].is-rot { position: fixed !important; top: 0; left: 100vw; z-index: var(--z-fullscreen); width: 100vh !important; height: 100vw !important; max-width: none; aspect-ratio: auto !important; margin: 0; border: 0; border-radius: 0; transform-origin: top left; transform: rotate(90deg); }
@supports (height: 100dvh) { [data-landscape].is-rot { width: 100dvh !important; } }
[data-landscape]:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border: 0; border-radius: 0; }
.ar-rot-on body { overflow: hidden; }
.ar-rot-anc { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; filter: none !important; contain: none !important; } /* 돌린 게임 칸의 바깥 상자 3단계 (arcade-common.js setRot): 반투명 효과 · transform 이 있으면 fixed 가 그 상자 기준이 되어 화면에 안 붙음. :has() 로 찾으면 문서 전체 스타일 계산이 무거워져 레이스가 끊겼음 */
.ar-rot-on #dnd2chat { display: none; }
/* 포인트 게임장 (arcade) 전용
   시안 arcade.html(아이콘 뽑기 추가판)의 스타일을 옮김.
   - 공통 클래스(.btn .chip .tabs .count .stat .input .avatar .row .muted .pill 등)와 이름이 겹치므로
     모든 규칙을 .arcade 아래로 한정하고, 공통 스타일에서 새는 속성은 아래 '공통 스타일 되돌림'에서 막는다.
   - 연출 요소 중 body 에 바로 붙는 것(.floatText, .coin)만 한정 없이 둔다.
   - 애니메이션 이름은 다른 CSS 와 겹치지 않게 ar 접두어를 붙였다.
   - 색은 사이트 네온 토큰(--primary, --accent, --accent-grad, --glass-*)을 쓴다. 시안의 테마 전환(크림슨/네온)은 뺐다. */

/* ---------- 게임장 전용 색 토큰 (공통 토큰과 겹치지 않는 이름만) ----------
   .floatText 처럼 body 에 붙는 요소도 쓰므로 :root 에 둔다 */
:root {
  --ar-accent-2: #A78BFA;
  --gold: #E3B35C;
  --ok: #5DBB86;
  --bad: #E07A7A;
  --r-common: #A7ADB8; --r-rare: #6FA8DC; --r-epic: #B38BE8; --r-legend: #E3B35C; --r-myth: #FF6B9A; /* 신화: 포켓몬스터 기계의 전설·환상 */
  /* 아케이드 나이트 상단 (네온 색 + 오락기 몸체·화면) */
  --ar-neon-red: #FF3B4E; --ar-neon-red-glow: rgba(255,59,78,.55);
  --ar-neon-cyan: #46E6FF; --ar-neon-gold: #FFD54A; --ar-neon-green: #6BFF8E;
  --ar-neon-orange: #FF7A45; --ar-neon-purple: #B98CFF; --ar-neon-pink: #FF5FA2;
  --ar-cab-1: #1E1C28; --ar-cab-2: #0E0D14; --ar-screen: #05050A;
  --ar-grid: rgba(255,59,78,.05);
  /* 가위바위보 메달 게임기 (.rpsm): 파란 판 · 크림/초록 숫자 링 · 빨간 LED · 램프 */
  --rpsm-cab-1: #2A2B31; --rpsm-cab-2: #141418;
  --rpsm-blue: #1E6FD9; --rpsm-blue-2: #0E3F8F;
  --rpsm-cream: #FBF3D9; --rpsm-green: #2F9E57; --rpsm-num: #D7261E;
  --rpsm-led: #FF2A1F; --rpsm-led-glow: rgba(255,42,31,.75); --rpsm-led-bg: #1A0605; --rpsm-led-off: #3A0C09;
  --rpsm-disc: #FFD23A; --rpsm-disc-edge: #C98F0A; --rpsm-ink: #2A1A06;
  --rpsm-lamp-red: #F0342B; --rpsm-lamp-yellow: #FFD23A; --rpsm-bulb: #FFE15A;
  --rpsm-btn: #F2F2EE; --rpsm-btn-edge: #B9B9B2;
  --ar-font: 'Bebas Neue', 'Noto Sans KR', sans-serif;   /* 게임장 영문·숫자는 모두 이 글꼴 하나 (Cinzel 안 씀). 굵기는 한 가지라 fw-regular 로 */
}

/* ---------- 기본 ---------- */
.arcade { overflow-x: clip; }
.arcade .hero__text { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 320px; }
.arcade .icon-stage { padding:var(--sp-6); display: flex; gap:var(--sp-8); align-items: center; flex-wrap: wrap; }
.arcade .icon-stage__body { flex: 1; min-width: min(260px, 100%); display: flex; flex-direction: column; gap:var(--sp-3); }

/* ---------- 공통 스타일(dnd2.css) 되돌림 ---------- */
.arcade .btn { white-space: normal; line-height: 1.2; text-align: center; }
.arcade .btn:hover { color: #fff; }
.arcade .btn.ghost:hover { color: var(--text); }
.arcade .btn.gold:hover { color: #2A1D06; }
.arcade .chip { font-weight:var(--fw-regular); line-height: 1.2; white-space: nowrap; }
.arcade .pill { min-height: 0; line-height:var(--lh-snug); }
.arcade .stat { display: block; gap:0; }
.arcade .avatar { flex-shrink: 0; font-size: inherit; }
.arcade .count { flex-shrink: initial; }


/* ---------- 시안 스타일 ---------- */
.arcade .glass { background:var(--glass-bg); backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%); border:1px solid var(--glass-border); border-radius:var(--radius-lg); box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 24px 48px -28px rgba(0,0,0,.85); }
.arcade .btn { position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:44px; padding:0 var(--sp-5); font-size:var(--fs-md); font-weight:var(--fw-bold); color:#fff; background:var(--accent-grad); border:1px solid rgba(255,255,255,.18); border-radius:10px; cursor:pointer; box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px -12px rgba(139,92,246,.9); transition:transform .12s ease, filter .2s ease, opacity .2s ease; }
.arcade .btn::after { content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-20deg); transition:left .6s ease; }
.arcade .btn:hover::after { left:120%; }
.arcade .btn:hover { filter:brightness(1.08); }
.arcade .btn:active { transform:translateY(1px) scale(.97); }
.arcade .btn[disabled] { opacity:.45; cursor:not-allowed; filter:none; }
.arcade .btn.ghost { background:transparent; color:var(--text); border-color:var(--line-strong); box-shadow:none; }
.arcade .btn.ghost:hover { background:rgba(255,255,255,0.06); }
.arcade .btn.pink { background:linear-gradient(180deg,#AD4A80,#8E3565); border-color:#B4508A; box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 6px 16px -8px rgba(154,61,110,.9); }
.arcade .btn.gold { background:linear-gradient(180deg,#E8BE6A,#C8953A); border-color:#F0CD85; color:#2A1D06; box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 8px 22px -8px rgba(227,179,92,.9); }
.arcade .btn.big { min-height:54px; padding:0 var(--sp-6); font-size:var(--fs-lg); }
.arcade .chip { min-height:44px; padding:0 var(--sp-4); font-size:var(--fs-md); color:var(--text-sub); background:transparent; border:1px solid var(--line-strong); border-radius:999px; cursor:pointer; transition:all .2s ease; }
.arcade .chip:hover { border-color:rgba(196,181,253,.5); }
/* 몬스터 탭 안 [소환·도감] [배틀] 전환 줄 */
.arcade .mon-sub { gap:var(--sp-2); margin-bottom:var(--sp-4); }
.arcade .chip[aria-pressed="true"] { color:#fff; background:var(--primary); border-color:var(--ar-accent-2); font-weight:var(--fw-bold); box-shadow:0 0 0 3px rgba(139,92,246,0.16); }
.arcade .input { min-height:44px; padding:0 var(--sp-4); font-size:var(--fs-base); color:var(--text); background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.10); border-radius:8px; width:100%; }
.arcade label.lbl, .arcade .lbl { display:block; font-size:var(--fs-sm); color:var(--muted); margin-bottom:var(--sp-2); }
.arcade .muted { color:var(--muted); }
.arcade .pill { display:inline-block; padding:2px var(--sp-3); font-size:var(--fs-xs); color:var(--accent); border:1px solid rgba(196,181,253,0.45); border-radius:999px; }
.arcade .hidden { display:none !important; }
@keyframes arBlurIn { from{opacity:0;filter:blur(10px);transform:translateY(10px)} to{opacity:1;filter:blur(0);transform:none} }
@keyframes arPop { 0%{opacity:0;transform:scale(.6)} 60%{opacity:1;transform:scale(1.12)} 100%{transform:scale(1)} }
@keyframes arShakeX { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(3px)} }
@keyframes arQuake { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-6px,3px)} 50%{transform:translate(5px,-4px)} 75%{transform:translate(-3px,-2px)} }
@keyframes arPulseGlow { 0%,100%{box-shadow:0 0 0 0 var(--glow)} 50%{box-shadow:0 0 34px 4px var(--glow)} }
@keyframes arShine { from{transform:translateX(-120%) skewX(-20deg)} to{transform:translateX(220%) skewX(-20deg)} }
@keyframes arFloatUp { from{opacity:1;transform:translate(-50%,0) scale(1)} to{opacity:0;transform:translate(-50%,-70px) scale(1.15)} }
.arcade .quake { animation:arQuake .35s ease 2; }
.arcade .hero { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:var(--sp-10); align-items:center; margin-bottom:var(--sp-8); }
/* 제목·설명은 공통 HUD 머리말(.page-head--hud, dnd2.css)을 그대로 씀 (예전 h1·p 덮어쓰기는 제거) */

/* ---------- 아케이드 상단 (시안 G. 아케이드 나이트) ----------
   왼쪽 INSERT COIN 타이틀 + 오른쪽 1P 오락기(지갑), 아래 GAME SELECT 카드. id 는 arcade.js 가 그대로 씀 */
.arcade { background-image:linear-gradient(var(--ar-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ar-grid) 1px,transparent 1px); background-size:48px 48px; }
.arcade .ar-top { padding-top:var(--sp-2); }
.arcade .ar-top .hero__text { min-height:0; }
.arcade .hero .ar-note { margin-top:var(--sp-3); font-size:var(--fs-xs); line-height:var(--lh-base); }
.arcade .hero .ar-big { margin:0; max-width:none; font-family:var(--ar-font); font-size:var(--fs-hud-title); line-height:.88; color:var(--text-strong); } /* 큰 영문 자리 (HUD 영문과 같은 크기), 간격은 .page-head 의 gap */
.arcade .ar-big em { font-style:normal; color:var(--ar-neon-red); text-shadow:0 0 30px var(--ar-neon-red-glow); }
.arcade .ar-blink { animation:arBlink 1.1s steps(1) infinite; }
@keyframes arBlink { 50%{opacity:0} }
/* 지갑 = 1P 오락기 */
.arcade .wallet { position:relative; padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); overflow:hidden; background:linear-gradient(160deg,var(--ar-cab-1),var(--ar-cab-2)); border-color:rgba(255,255,255,.08); border-radius:22px; box-shadow:0 30px 70px rgba(0,0,0,.6); }
.arcade .me { display:flex; align-items:center; gap:var(--sp-3); padding-right:var(--sp-12); min-height:40px; }
.arcade .ar-1p { flex-shrink:0; font-family:var(--ar-font); font-size:var(--fs-2xl); letter-spacing:.1em; padding:0 var(--sp-2); border-radius:var(--radius-sm); background:var(--ar-neon-cyan); color:#05202A; }
.arcade .me__who { flex:1; min-width:0; }
.arcade .me__name { font-weight:var(--fw-heavy); color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arcade .me__sub { font-size:var(--fs-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 한 줄 고정: 게임장·고블린 크래쉬 지갑 높이를 같게 */
.arcade .avatar { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#23252E; border:1px solid var(--line-strong); }

.arcade .ar-screen { position:relative; overflow:hidden; display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-radius:14px; background:var(--ar-screen); }
.arcade .ar-screen::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(0,0,0,.26) 0 2px,transparent 2px 4px),radial-gradient(ellipse,transparent 58%,rgba(0,0,0,.65)); }
.arcade .ar-screen__lbl { font-family:var(--ar-font); font-size:var(--fs-lg); letter-spacing:.2em; color:var(--muted); }
.arcade .balance { display:flex; align-items:baseline; gap:var(--sp-1); }
.arcade .balance #bal { font-family:var(--ar-font); font-size:52px; line-height:.95; letter-spacing:.03em; color:var(--ar-neon-gold); text-shadow:0 0 22px rgba(255,213,74,.35); }
.arcade .balance__unit { font-family:var(--ar-font); font-size:var(--fs-3xl); line-height:var(--lh-none); color:var(--muted); } /* 줄 높이를 숫자에 맞춰 고블린 크래쉬 지갑과 같은 높이 (오갈 때 덜컹임 방지) */
.arcade .balance.bump #bal { animation:arPop .45s ease; }
.arcade .ar-stats { position:relative; z-index:1; display:flex; flex-direction:column; gap:var(--sp-1); margin:0; text-align:right; }
.arcade .ar-stat { display:flex; justify-content:flex-end; align-items:baseline; gap:var(--sp-2); font-size:var(--fs-xs); }
.arcade .ar-stat dt { color:var(--muted); }
.arcade .ar-stat dd { margin:0; }
.arcade .net { font-family:var(--ar-font); font-size:var(--fs-xl); letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.arcade .ar-log { display:flex; gap:var(--sp-3); align-items:flex-start; padding-top:var(--sp-2); border-top:1px dashed var(--line); }
.arcade .ar-log-lbl { flex-shrink:0; font-size:var(--fs-xs); line-height:20px; }
.arcade .log { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; max-height:44px; overflow:auto; font-size:var(--fs-xs); line-height:20px; }
.arcade .log div { display:flex; justify-content:space-between; gap:var(--sp-3); color:var(--text-sub); animation:arBlurIn .3s ease both; }
.arcade .plus { color:var(--ok); font-weight:var(--fw-bold); }
.arcade .minus { color:var(--bad); font-weight:var(--fw-bold); }
.arcade .sound { position:absolute; top:var(--sp-4); right:var(--sp-4); width:36px; height:36px; display:flex; align-items:center; justify-content:center; color:var(--text-sub); background:rgba(255,255,255,.05); border:1px solid var(--line-strong); border-radius:50%; cursor:pointer; }
/* GAME SELECT: 공통 .ar-tabs 줄을 이 화면에서만 오락기 카드 8칸으로 */
.arcade .ar-select { margin-bottom:var(--sp-8); }
.arcade .ar-sec-title { display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap; margin:0 0 var(--sp-4); font-size:var(--fs-2xl); font-weight:var(--fw-heavy); }
.arcade .ar-sec-title span { font-family:var(--ar-font); font-weight:var(--fw-regular); font-size:var(--fs-4xl); letter-spacing:.14em; color:var(--ar-neon-cyan); }
.arcade .ar-select .ar-tabs { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:var(--sp-3); width:auto; margin:0; padding:0; overflow:visible; background:none; border:0; border-radius:0; }
.arcade .ar-select .ar-tabs a { --c:var(--ar-neon-cyan); position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:2px; min-height:118px; padding:var(--sp-3); border-radius:16px; color:var(--text-strong); font-weight:var(--fw-bold); white-space:normal; background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%),linear-gradient(180deg,#181624,#0D0C14); border:2px solid rgba(255,255,255,.07); transition:transform .2s, border-color .2s, box-shadow .2s; }
.arcade .ar-tabs__new { position:absolute; top:-6px; right:-6px; z-index:2; padding:0 5px; font-size:var(--fs-micro); font-weight:var(--fw-black); line-height:16px; color:#fff; background:var(--new); border-radius:999px; pointer-events:none; } /* 새로 들어온 퀴즈 · 아이콘 (arcade.js tabNew) */
.arcade .ar-select .ar-tabs a:nth-child(2) { --c:var(--ar-neon-green); }
.arcade .ar-select .ar-tabs a:nth-child(3) { --c:var(--ar-neon-orange); }
.arcade .ar-select .ar-tabs a:nth-child(4) { --c:var(--ar-neon-gold); }
.arcade .ar-select .ar-tabs a:nth-child(5) { --c:var(--ar-neon-pink); }
.arcade .ar-select .ar-tabs a:nth-child(6) { --c:var(--ar-neon-purple); }
.arcade .ar-select .ar-tabs a:nth-child(7) { --c:var(--ar-neon-red); }
.arcade .ar-select .ar-tabs a:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--c) 60%,transparent); }
.arcade .ar-select .ar-tabs a[aria-current="page"] { border-color:var(--c); box-shadow:0 0 0 1px var(--c),0 0 28px color-mix(in srgb,var(--c) 35%,transparent); }
/* 번호는 카드 맨 위 (margin-bottom:auto 로 아래 이름들과 떨어짐). 예전엔 겹쳐 띄워서 폰에서 이름이 두 줄이면 영문과 겹쳤음 → 이제 카드가 늘어남 */
.arcade .ar-select .ar-tabs__no { display:block; margin:calc(var(--sp-1) * -1) 0 auto; font-family:var(--ar-font); font-size:var(--fs-xl); font-weight:var(--fw-regular); color:var(--c); }
.arcade .ar-select .ar-tabs__en { display:block; font-family:var(--ar-font); font-size:var(--fs-3xl); font-weight:var(--fw-regular); letter-spacing:.08em; line-height:var(--lh-none); color:var(--c); }
.arcade .ar-select .ar-tabs__admin { position:absolute; top:var(--sp-3); right:var(--sp-3); margin:0; }
.arcade .ar-select .ar-tabs a[aria-current="page"] .ar-tabs__en { text-shadow:0 0 12px color-mix(in srgb,var(--c) 70%,transparent); }
/* 게임장 틀 (list · goblin-crash · autochess · play 의 .ar-shell): 머리글 밑에 붙어 따라오는 얇은 게임 막대 + 게임
   예전엔 머리 아래 GAME SELECT 카드 8장이 한 줄(폰 두 줄)을 차지해, 게임을 바꿀 때마다 다시 올라가야 했음
   (왼쪽 세로 목록도 해 봤으나 게임 칸이 좁아지고 무거워 보여 뺌) → 모든 폭에서 가로 막대 하나: 네온 영문 + 한글 알약, 지금 게임은 빛남
   .arcade 없이 씀 (온라인 오락실은 막대만 .arcade 로 감쌈) */
.ar-shell .ar-main { min-width:0; }
.ar-shell .ar-side { position:sticky; top:var(--header-h); z-index:20; margin:0 0 var(--sp-6); padding:0; background:color-mix(in srgb, var(--bg) 90%, transparent); box-shadow:0 0 0 100vmax color-mix(in srgb, var(--bg) 90%, transparent); clip-path:inset(0 -100vmax); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } /* 바탕 · 아래 선은 화면 양끝까지 (box-shadow + clip-path) */
.ar-shell .ar-side::after { content:""; position:absolute; left:-100vmax; right:-100vmax; bottom:0; height:1px; background:var(--line); }
.ar-shell .ar-side .ar-select { display:flex; align-items:center; gap:var(--sp-2); margin:0; }
.ar-shell .ar-side .ar-select .ar-tabs { flex:1; min-width:0; }
.ar-shell .ar-side .ar-help { flex:none; margin-left:0; }
.ar-shell .ar-side .ar-sec-title { display:none; }
.ar-shell .ar-side .ar-select .ar-tabs { display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(96px, 1fr); gap:0; width:auto; margin:0; padding:0; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; background:none; border:0; }
.ar-shell .ar-side .ar-select .ar-tabs::-webkit-scrollbar { display:none; }
/* 칸 하나 = 오락기 선택판 한 칸: 위 네온 영문(작게) · 아래 한글, 칸 사이 가는 세로선. 지금 게임은 그 색이 옅게 깔리고 아래 네온 선이 빛남 */
.ar-shell .ar-side .ar-select .ar-tabs a { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:52px; padding:var(--sp-2) var(--sp-2); border:0; border-radius:0; background:none; box-shadow:none; color:var(--text-sub); font-size:var(--fs-xs); font-weight:var(--fw-semibold); white-space:nowrap; transition:color .2s, background .2s; }
.ar-shell .ar-side .ar-select .ar-tabs a + a::before { content:""; position:absolute; left:0; top:14px; bottom:14px; width:1px; background:var(--line); }
.ar-shell .ar-side .ar-select .ar-tabs__no { display:none; }
.ar-shell .ar-side .ar-select .ar-tabs__en { font-size:var(--fs-sm); letter-spacing:.12em; line-height:1; color:color-mix(in srgb, var(--c) 70%, var(--text-sub)); }
.ar-shell .ar-side .ar-select .ar-tabs__admin { position:absolute; top:7px; right:7px; width:7px; height:7px; margin:0; padding:0; border:0; border-radius:50%; background:var(--accent); box-shadow:0 0 6px var(--accent); font-size:0; overflow:hidden; } /* '관리자만' 딱지는 막대 칸에선 작은 점 (글자 딱지가 영문 이름 위로 겹쳐 튀어나왔음. 글자는 읽어 주기용 · title) */
.ar-shell .ar-side .ar-select .ar-tabs a:hover { transform:none; color:var(--text-strong); background:color-mix(in srgb, var(--c) 6%, transparent); }
.ar-shell .ar-side .ar-select .ar-tabs a:hover .ar-tabs__en { color:var(--c); }
.ar-shell .ar-side .ar-select .ar-tabs a[aria-current="page"] { color:var(--text-strong); background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--c) 14%, transparent)); box-shadow:none; }
.ar-shell .ar-side .ar-select .ar-tabs a[aria-current="page"] .ar-tabs__en { color:var(--c); text-shadow:0 0 10px color-mix(in srgb, var(--c) 70%, transparent); }
.ar-shell .ar-side .ar-select .ar-tabs a[aria-current="page"]::after { content:""; position:absolute; left:18%; right:18%; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--c); box-shadow:0 0 12px var(--c); }
.ar-shell .ar-side .ar-select .ar-tabs a:focus-visible { outline:none; box-shadow:inset 0 0 0 2px rgba(var(--focus-rgb), .6); }
/* 1280 이하: [게임 설명]은 아이콘만 (읽어 주기용 글자는 남김) */
@media (max-width: 1280px) {
  .ar-shell .ar-side .ar-help { width:36px; min-height:36px; padding:0; justify-content:center; }
  .ar-shell .ar-side .ar-help span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
@media (max-width: 1024px) {
  .ar-shell .ar-side { margin-bottom:var(--sp-4); padding-block:0; }
  .ar-shell .ar-side .ar-select .ar-tabs { grid-auto-columns:minmax(84px, max-content); }
  .ar-shell .ar-side .ar-select .ar-tabs a { min-height:48px; padding-inline:var(--sp-3); }
}
/* 넓은 화면(1025 이상): 게임 목록 = 왼쪽 레일. 다른 게시판의 왼쪽 빠른 메뉴(.home-rail)처럼 머리글 밑부터 화면 아래까지 곧게, 오른쪽에 가는 선
   칸 = 네온 번호 + 작은 한글, 지금 게임은 옅은 바탕 + 왼쪽 그 색 선. 제목(INSERT COIN) · 게임은 레일 오른쪽(.ar-main) */
@media (min-width: 1025px) {
  .ar-shell { display:grid; grid-template-columns:92px minmax(0,1fr); gap:var(--sp-8); align-items:start; }
  .ar-shell .ar-side { top:var(--header-h); height:calc(100vh - var(--header-h)); margin:0; padding:var(--sp-4) var(--sp-2); overflow-y:auto; background:none; border:0; border-right:1px solid var(--line); border-radius:0; box-shadow:none; clip-path:none; backdrop-filter:none; -webkit-backdrop-filter:none; scrollbar-width:none; }
  .ar-shell .ar-side::-webkit-scrollbar { display:none; }
  .ar-shell .ar-side::after { display:none; }
  .ar-shell .ar-side .ar-select { flex-direction:column; align-items:stretch; gap:var(--sp-2); }
  .ar-shell .ar-side .ar-select .ar-tabs { grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:minmax(0,1fr); gap:var(--sp-1); overflow:visible; }
  .ar-shell .ar-side .ar-select .ar-tabs a { min-height:0; padding:10px 2px; gap:6px; letter-spacing:-.02em; border-radius:12px; color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-medium); line-height:var(--lh-tight); white-space:normal; word-break:keep-all; text-align:center; }
  .ar-shell .ar-side .ar-select .ar-tabs a + a::before { display:none; }
  .ar-shell .ar-side .ar-select .ar-tabs__en { display:none; }
  .ar-shell .ar-side .ar-select .ar-tabs__no { display:block; margin:0; font-family:var(--ar-font); font-size:var(--fs-xl); line-height:1; letter-spacing:.04em; color:color-mix(in srgb, var(--c) 65%, var(--muted)); }
  .ar-shell .ar-side .ar-select .ar-tabs a:hover { color:var(--text-strong); background:var(--hover); }
  .ar-shell .ar-side .ar-select .ar-tabs a:hover .ar-tabs__no { color:var(--c); }
  .ar-shell .ar-side .ar-select .ar-tabs a[aria-current="page"] { color:var(--text-strong); background:var(--surface-2); box-shadow:inset 3px 0 0 var(--c); }
  .ar-shell .ar-side .ar-select .ar-tabs a[aria-current="page"] .ar-tabs__no { color:var(--c); text-shadow:0 0 10px color-mix(in srgb, var(--c) 70%, transparent); }
  .ar-shell .ar-side .ar-select .ar-tabs a[aria-current="page"]::after { display:none; }
  .ar-shell .ar-side .ar-select .ar-tabs__admin { top:6px; right:6px; }
  .ar-shell .ar-side .ar-help { align-self:center; width:36px; min-height:36px; margin-top:var(--sp-2); padding:0; justify-content:center; }
  .ar-shell .ar-side .ar-help span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
/* 머리: 왼쪽 제목 | 오른쪽 지갑. 지갑은 아래 게임의 오른쪽 칸(랭킹, .grid2 320px)과 같은 폭 · 간격으로 바로 위에 붙여 한 줄로 보이게 */
.ar-shell .hero { grid-template-columns:minmax(0,1fr) 320px; gap:var(--sp-5); align-items:end; margin-bottom:var(--sp-6); } /* 지갑을 머리 아래쪽에 붙여 랭킹 바로 위로. 아래 게임과는 24 = 다른 화면 머리말 아래 간격(.stack) */
.ar-shell .hero { padding-top:0; } .ar-shell .hero .hero__text { align-self:start; } /* 제목은 다른 화면과 같은 높이에서 시작 (지갑은 그대로 아래에 붙음) */
.ar-shell .hero .ar-note { display:none; } /* '모든 게임이 내 포인트를 …' 은 [게임 설명] 창으로 (arcade-common.js openGuide) */
.ar-shell .wallet .ar-log { display:none; } /* 최근 내역은 오른쪽 칸 [로그] 탭으로 (arcade-common.js logTabs) */
.ac-pane.ac-logpane .log { display:flex; flex-direction:column; gap:var(--sp-2); max-height:none; overflow:visible; padding:var(--sp-1) 0; }
/* 오른쪽 랭킹 칸 접기 · 펴기 (arcade-common.js sideFold): 펼침 = 랭킹 위 오른쪽 작은 [접기 ›], 접힘 = 오른쪽 열이 40px 세로 버튼([‹ 랭킹])만 */
.arcade .ac-fold { align-self:flex-end; display:inline-flex; align-items:center; gap:4px; height:28px; padding:0 6px 0 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface-solid); color:var(--muted); font:inherit; font-size:var(--fs-xs); cursor:pointer; transition:color .2s, border-color .2s; }
.arcade .ac-fold:hover { color:var(--text-strong); border-color:var(--accent-line); }
.arcade .ac-fold:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(var(--focus-rgb), .45); }
/* 펼친 상태: 탭 줄 오른쪽 끝 작은 아이콘 (글자는 읽어 주기용 aria-label 만) */
.arcade .ac-tabs .ac-fold { grid-row:1; grid-column:-2 / -1; align-self:center; justify-self:end; width:32px; height:32px; margin-right:var(--sp-2); padding:0; justify-content:center; border:0; background:none; }
.arcade .ac-tabs .ac-fold:hover { background:var(--hover); }
.arcade .ac-tabs .ac-fold .ac-fold__txt { display:none; }
.arcade .ac-tabs:has(.ac-fold) { grid-auto-columns:auto; grid-template-columns:repeat(var(--ac-tabs, 3), minmax(0,1fr)) 40px; }
@media (min-width: 961px) {
  .arcade .grid2.is-side-closed { grid-template-columns:minmax(0,1fr) 40px; }
  .arcade .grid2.is-side-closed > :last-child > :not(.ac-fold) { display:none; }
  .arcade .grid2.is-side-closed .ac-fold { align-self:stretch; flex-direction:column; justify-content:flex-start; gap:var(--sp-2); height:auto; min-height:120px; padding:var(--sp-3) 0; }
  .arcade .grid2.is-side-closed .ac-fold svg { order:-1; transform:rotate(180deg); }
  .arcade .grid2.is-side-closed .ac-fold__txt { writing-mode:vertical-rl; letter-spacing:.1em; }
}
@media (max-width: 960px) { .arcade .ac-fold { display:none; } }
/* 폰: 오른쪽 열(랭킹 · 내 기록 · 보상)은 접어 두고, 위 게임 막대의 [🏆] 로 아래에서 올라오는 칸 (arcade-common.js sideSheet)
   게임 칸 아래로 랭킹이 길게 붙어 게임을 하다 내려가 보고 다시 올라와야 했음 */
.ar-rank, .ar-menu, .ar-drawer, .ar-drawer-dim, .arcade .ac-sheet-head, .ac-sheet-dim { display:none; }
@media (max-width: 768px) {
  .arcade .ac-col.is-sheet { position:fixed; left:0; right:0; bottom:0; z-index:var(--z-sheet); max-height:min(82svh, 720px); overflow-y:auto; overscroll-behavior:contain; padding:0 var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); background:var(--surface-solid); border-top:1px solid var(--line-strong); border-radius:var(--radius-lg) var(--radius-lg) 0 0; box-shadow:0 -20px 40px -10px rgba(var(--scrim-rgb), .8);
    transform:translateY(105%); visibility:hidden; transition:transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s .28s; }
  .arcade .ac-col.is-sheet.is-open { transform:none; visibility:visible; transition:transform .28s cubic-bezier(.2,.8,.2,1); }
  .arcade .ac-sheet-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; min-height:56px; margin:0 calc(var(--sp-4) * -1); padding:var(--sp-2) var(--sp-2) 0 var(--sp-5); background:var(--surface-solid); }
  .arcade .ac-sheet-head::before { content:""; position:absolute; top:var(--sp-2); left:50%; width:40px; height:4px; margin-left:-20px; background:var(--line-strong); border-radius:2px; }
  .arcade .ac-sheet-head b { font-size:var(--fs-lg); color:var(--text-strong); }
  .arcade .ac-sheet-x, .ar-drawer__x { display:grid; place-items:center; width:44px; height:44px; padding:0; color:var(--text-sub); background:none; border:0; border-radius:999px; cursor:pointer; }
  .arcade .ac-sheet-x:hover, .ar-drawer__x:hover { color:var(--text-strong); background:var(--hover); }
  .ac-sheet-dim:not([hidden]) { display:block; position:fixed; inset:0; z-index:calc(var(--z-sheet) - 1); background:rgba(var(--scrim-rgb), .6); }
  html.ac-sheet-lock, html.ac-sheet-lock body { overflow:hidden; }

  /* 위 게임 막대: [☰ 게임 · 지금 게임] … [🏆] [ⓘ] 한 줄. 가로로 길게 늘어진 게임 탭 줄은 왼쪽 칸으로 (arcade-common.js gameDrawer) */
  .ar-shell .ar-side { backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--bg); box-shadow:0 0 0 100vmax var(--bg); }   /* 반투명 + 흐림이면 막대 안에 화면 고정 칸을 못 만듦 */
  .ar-shell .ar-side .ar-select { gap:var(--sp-1); min-height:56px; }
  .ar-menu { display:flex; flex:1; align-items:center; gap:var(--sp-2); min-width:0; min-height:44px; padding:0 var(--sp-3); font:inherit; color:var(--text-strong); background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:var(--radius); cursor:pointer; }
  .ar-menu svg { flex:none; color:var(--text-sub); }
  .ar-menu__lbl { flex:none; font-size:var(--fs-xs); color:var(--muted); }
  .ar-menu__cur { min-width:0; overflow:hidden; font-size:var(--fs-md); font-weight:var(--fw-bold); text-overflow:ellipsis; white-space:nowrap; }
  .ar-menu:hover { border-color:var(--accent-line); }
  .ar-rank:not([hidden]) { display:grid; flex:none; place-items:center; width:44px; height:44px; padding:0; color:var(--hud-yellow); background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:var(--radius); cursor:pointer; }
  .ar-rank:hover { border-color:rgba(var(--hud-yellow-rgb), .5); }
  .ar-shell .ar-side .ar-help { width:44px; min-height:44px; }

  /* 왼쪽 게임 목록 칸: 열면 화면 전체(머리 · 본문 · 바닥)가 칸 폭만큼 오른쪽으로 밀리고, 닫으면 제자리 */
  html { --ar-drawer-w: min(78vw, 300px); }
  .ar-drawer:not([hidden]) { display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:var(--z-sheet); width:var(--ar-drawer-w); overflow-y:auto; overscroll-behavior:contain; padding:0 var(--sp-3) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); background:var(--surface-solid); border-right:1px solid var(--line-strong);
    transform:translateX(-100%); transition:transform .28s cubic-bezier(.2,.8,.2,1); }
  html.ar-nav-open .ar-drawer { transform:none; }
  .ar-drawer__head { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; min-height:64px; padding:0 0 0 var(--sp-2); background:var(--surface-solid); }
  .ar-drawer__head b { font-size:var(--fs-lg); color:var(--text-strong); }
  .ar-drawer [data-ar-tabs] { display:flex; flex-direction:column; gap:var(--sp-1); width:auto; max-width:none; margin:0; padding:0; overflow:visible; background:none; border:0; border-radius:0; }   /* 공통 .ar-tabs(가로 알약 상자) 모양을 풂 */
  .ar-drawer [data-ar-tabs] a { --c:var(--ar-neon-cyan); position:relative; display:grid; white-space:normal; background:none; grid-template-columns:32px minmax(0, 1fr); grid-template-rows:auto auto; column-gap:var(--sp-3); align-items:center; min-height:56px; padding:var(--sp-2) var(--sp-3); font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--text-sub); border-radius:var(--radius); }
  .ar-drawer [data-ar-tabs] a:nth-child(2) { --c:var(--ar-neon-green); }
  .ar-drawer [data-ar-tabs] a:nth-child(3) { --c:var(--ar-neon-orange); }
  .ar-drawer [data-ar-tabs] a:nth-child(4) { --c:var(--ar-neon-gold); }
  .ar-drawer [data-ar-tabs] a:nth-child(5) { --c:var(--ar-neon-pink); }
  .ar-drawer [data-ar-tabs] a:nth-child(6) { --c:var(--ar-neon-purple); }
  .ar-drawer [data-ar-tabs] a:nth-child(7) { --c:var(--ar-neon-red); }
  .ar-drawer .ar-tabs__no, .ar-drawer .ar-tabs__en { display:block; }
  .ar-drawer .ar-tabs__no { grid-row:1 / 3; font-family:var(--ar-font); font-size:var(--fs-xl); line-height:var(--lh-none); color:color-mix(in srgb, var(--c) 65%, var(--muted)); }
  .ar-drawer .ar-tabs__en { font-family:var(--ar-font); font-size:var(--fs-xs); letter-spacing:var(--ls-caps); line-height:var(--lh-none); color:color-mix(in srgb, var(--c) 70%, var(--text-sub)); }
  .ar-drawer .ar-tabs__admin { position:absolute; top:var(--sp-3); right:var(--sp-3); margin:0; }
  .ar-drawer [data-ar-tabs] a:hover { color:var(--text-strong); background:var(--hover); }
  .ar-drawer [data-ar-tabs] a[aria-current="page"] { color:var(--text-strong); background:var(--surface-2); box-shadow:inset 3px 0 0 var(--c); }
  .ar-drawer [data-ar-tabs] a[aria-current="page"] .ar-tabs__no, .ar-drawer [data-ar-tabs] a[aria-current="page"] .ar-tabs__en { color:var(--c); }
  .ar-drawer [data-ar-tabs] a:focus-visible { outline:none; box-shadow:inset 0 0 0 2px rgba(var(--focus-rgb), .6); }
  .ar-drawer-dim:not([hidden]) { display:block; position:fixed; inset:0; z-index:calc(var(--z-sheet) - 1); background:rgba(var(--scrim-rgb), 0); transition:background .28s; }
  html.ar-nav-open .ar-drawer-dim { background:rgba(var(--scrim-rgb), .5); }
  :is(.site-header, .site-main, .site-footer) { transition:transform .28s cubic-bezier(.2,.8,.2,1); }
  html.ar-nav-instant :is(.site-header, .site-main, .site-footer) { transition:none; }   /* 다른 페이지 게임으로 옮길 때 (화면 전환 효과가 밀린 화면을 찍지 않게) */
  .ar-drawer [data-ar-tabs] { view-transition-name:none; }   /* 칸 안 목록은 페이지를 옮겨도 짝이 없음 */
  html.dk-on:not(.dk-shell) .ar-drawer:not([hidden]) { padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }   /* 음악 재생 줄(dock.css)에 목록 끝이 가리지 않게 */
  html.ar-nav-open :is(.site-header, .site-main, .site-footer) { transform:translateX(var(--ar-drawer-w)); }
  html.ar-nav-open, html.ar-nav-open body { overflow:hidden; }

  /* 모험가 · 크레딧 카드: 한 줄로 (아이콘 · 이름 | CREDIT 포인트 | 효과음) */
  .arcade .ar-top .wallet { flex-direction:row; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-lg); }
  .arcade .ar-top .wallet .me { flex:1; min-width:0; min-height:0; padding-right:0; gap:var(--sp-2); }
  .arcade .ar-top .wallet .avatar { width:36px; height:36px; border-radius:var(--radius); }
  .arcade .ar-top .wallet .ar-screen { flex:none; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-radius:var(--radius); }
  .arcade .ar-top .wallet .ar-screen__lbl { font-size:var(--fs-2xs); letter-spacing:var(--ls-caps); }
  .arcade .ar-top .wallet .ar-screen > div:first-child { display:flex; align-items:baseline; gap:var(--sp-2); }
  .arcade .ar-top .wallet .balance #bal { font-size:var(--fs-3xl); }
  .arcade .ar-top .wallet .balance__unit { font-size:var(--fs-md); }
  .arcade .ar-top .wallet .ar-stats { display:none; }   /* 이번 방문 손익은 폰에서 뺌 (게임마다 [내 기록] 에 있음) */
  .arcade .ar-top .wallet .sound { position:static; order:3; flex:none; width:44px; height:44px; }   /* 맨 뒤로 (HTML 에서는 맨 앞) */
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .arcade .ac-col.is-sheet, .arcade .ac-col.is-sheet.is-open, .ar-drawer:not([hidden]), .ar-drawer-dim:not([hidden]), :is(.site-header, .site-main, .site-footer) { transition:none; }
}
.ar-curgame { display:none; }   /* 폰 머리말의 지금 게임 이름 (아래 768 이하에서만 보임) */
/* 폰: 위 게임 막대([☰ 게임] · 🏆 · ⓘ)는 뺌 → 사이트 메뉴 칸(dnd2.js 폰 메뉴)의 '게임장' 목록이 게임 고르기 · 랭킹 · 게임 설명을 대신함 (2026-10-21 D안) */
@media (max-width: 768px) {
  .ar-shell .ar-side { display:none; }
  /* 폰 머리말 두 줄: 'INSERT COIN_' / [포인트 게임장] 딱지 + '/ 지금 게임' (게임 이름은 arcade-common.js 가 넣음), 설명 · 안내 문구는 뺌 */
  .arcade .ar-top { gap:var(--sp-3); padding-top:var(--sp-3); }
  .arcade .ar-top .hero__text { flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:var(--sp-2) var(--sp-3); text-align:left; }
  .arcade .ar-top .hero__text .ar-big { flex-basis:100%; }   /* 크기는 원래 그대로 */
  .arcade .ar-top .page-title { order:1; margin:0; }
  .arcade .ar-top .ar-curgame:not(:empty) { order:2; display:inline-flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--text-strong); }
  .arcade .ar-top .ar-curgame:not(:empty)::before { content:"/"; font-weight:var(--fw-regular); color:var(--muted); }
  .arcade .ar-top :is(.page-desc, .ar-note) { display:none; }
  .ar-shell .page-head--hud .page-desc { display:none; }   /* 온라인 오락실(/play) 머리말 설명도 같이 뺌 */
  /* 모험가 · 크레딧: 아이콘 · 이름 | CREDIT 포인트 | 소리 한 줄 (로그인 안내 문구는 뺌) */
  .arcade .ar-top .wallet .me__sub { display:none; }
  .arcade .ar-top .wallet .me__name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .arcade .ar-top .wallet .balance :is(#bal, b) { font-family:var(--ar-font); font-size:var(--fs-3xl); font-weight:var(--fw-regular); line-height:var(--lh-none); letter-spacing:.03em; color:var(--ar-neon-gold); }   /* 고블린 · 오토체스 지갑(.ac-wallet)도 숫자야구와 같은 모양 · 크기 */
  .arcade .ar-top .wallet .balance small { font-size:var(--fs-md); }
  .arcade .ar-top .wallet .ar-rank:not([hidden]) { order:2; border-radius:999px; }   /* [🏆 랭킹] 은 크레딧과 소리 사이 (arcade-common.js 가 넣음, 누르면 아래 칸) */
  .arcade .ar-top .wallet { gap:var(--sp-2); }
  @media (max-width: 420px) { .arcade .ar-top .wallet .ar-screen__lbl { display:none; } }   /* 좁은 폰: 🏆 가 들어온 만큼 이름 자리가 모자라 'CREDIT' 글자는 뺌 (금색 숫자 + P 로 충분) */
}
.arcade .panel { animation:arBlurIn .45s ease backwards; }   /* backwards: 끝난 뒤 filter 값이 남지 않게 (남으면 안의 fixed 칸 · 아래 칸이 화면 대신 패널에 붙음) */
/* 같은 탭 두 번째 페이지부터(html.seen)는 페이지가 열릴 때 패널 등장 애니메이션을 끔 → 게임장 ↔ 고블린 크래쉬 오갈 때 깜빡이지 않음.
   게임장 안에서 탭을 눌러 바꿀 때만 다시 보임 (.replay, arcade.js showTab) */
.seen .arcade .panel { animation:none; }
.seen .arcade .panel.replay { animation:arBlurIn .45s ease backwards; }
/* 페이지를 옮길 때 머리(타이틀·지갑)와 게임 메뉴는 그 자리에 두고 아래 패널만 바뀌게 (dnd2.css @view-transition) */
.arcade .ar-top { view-transition-name:ar-top; }
.arcade .ar-select { view-transition-name:ar-select; }
.arcade .grid2 { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--sp-5); }
.arcade .box { padding:var(--sp-6); min-width:0; }
.arcade .box h2 { margin:0 0 var(--sp-2); font-size:var(--fs-3xl); font-weight:var(--fw-heavy); letter-spacing:var(--ls-tighter); }
.arcade .box h3 { margin:0 0 var(--sp-3); font-size:var(--fs-lg); font-weight:var(--fw-bold); }
.arcade .rules { padding:var(--sp-6); font-size:var(--fs-md); line-height:var(--lh-loose); color:var(--text-sub); }
.arcade .rules ul { margin:0; padding-left:var(--sp-5); }
.arcade .row { display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; }
.arcade .bet { display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; }
.arcade .msg { min-height:24px; font-size:var(--fs-md); }
.arcade #fx { position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:90; }
.arcade #flash { position:fixed; inset:0; pointer-events:none; z-index:89; opacity:0; }
.floatText { position:fixed; z-index:95; pointer-events:none; font-weight:var(--fw-heavy); font-size:var(--fs-3xl); text-shadow:0 2px 12px rgba(0,0,0,.6); animation:arFloatUp 1.1s ease-out forwards; }
.coin { position:fixed; z-index:94; width:18px; height:18px; border-radius:50%; pointer-events:none; background:radial-gradient(circle at 35% 30%, #FFF1C4, #E3B35C 55%, #9A6E22); box-shadow:0 0 10px rgba(227,179,92,.8); }
.arcade .banner { position:absolute; inset:0; margin:auto; width:max-content; max-width:90%; height:max-content; z-index:5; padding:var(--sp-3) 30px; font-family:inherit; font-weight:var(--fw-heavy); font-size:clamp(30px,5vw,50px); letter-spacing:.02em; border-radius:14px; white-space:nowrap; pointer-events:none; animation:arPop .5s cubic-bezier(.2,.8,.2,1) both; }
.arcade .banner.win { color:#2A1D06; background:linear-gradient(180deg,#FFE6A8,#E3B35C); box-shadow:0 0 60px rgba(227,179,92,.7); }
.arcade .banner.lose { color:#fff; background:linear-gradient(180deg,#C85B5B,#8E3232); box-shadow:0 0 40px rgba(224,122,122,.5); }
.arcade .banner.draw { color:#fff; background:linear-gradient(180deg,#6B7080,#4A4E5C); }
.arcade .count { position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; font-family:var(--ar-font); font-weight:var(--fw-regular); font-size:96px; color:#fff; text-shadow:0 0 30px rgba(139,92,246,.9); pointer-events:none; }
.arcade .count span { animation:arPop .5s ease both; }
.arcade .quiz { padding:var(--sp-5) var(--sp-5); border-top:1px solid rgba(255,255,255,0.07); }
.arcade .quiz:first-child { border-top:0; }
.arcade .quiz .q { font-size:var(--fs-lg); font-weight:var(--fw-bold); margin:var(--sp-2) 0 var(--sp-3); }
.arcade .choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2); }
.arcade .choice { min-height:48px; padding:var(--sp-3) var(--sp-4); text-align:left; font-size:var(--fs-md); color:var(--text); background:rgba(0,0,0,0.2); border:1px solid var(--line-strong); border-radius:10px; cursor:pointer; transition:all .2s ease; }
.arcade .choice:hover:not([disabled]) { border-color:rgba(196,181,253,0.6); background:rgba(139,92,246,0.14); transform:translateY(-2px); }
.arcade .choice.right { border-color:var(--ok); background:rgba(93,187,134,0.18); box-shadow:0 0 18px -4px rgba(93,187,134,.7); }
.arcade .choice.wrong { border-color:var(--bad); background:rgba(224,122,122,0.14); }
.arcade .choice.wrong.just { animation:arShakeX .45s ease; }
.arcade .choice[disabled] { cursor:default; }
.arcade .reward-tag { display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-1) var(--sp-3); font-size:var(--fs-xs); font-weight:var(--fw-bold); color:#2A1D06; background:linear-gradient(180deg,#FFE6A8,#E3B35C); border-radius:999px; }
.arcade .qtype { display:inline-block; padding:2px 9px; font-size:var(--fs-xs); font-weight:var(--fw-bold); border-radius:6px; }
.arcade .qtype.mc { color:#DDD6FE; background:rgba(139,92,246,.28); }
.arcade .qtype.sa { color:#F3D3E4; background:rgba(154,61,110,.35); }
.arcade .sa-row { display:flex; gap:var(--sp-2); }
.arcade .sa-row .input { flex:1; }
.arcade .wbtn { min-height:36px; padding:0 var(--sp-3); font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-sub); background:transparent; border:1px dashed rgba(196,181,253,.45); border-radius:8px; cursor:pointer; }
.arcade .wbtn[disabled] { opacity:.5; cursor:default; }
.arcade .wbtn.danger { color:#ffb4b4; border-color:rgba(255,90,90,.45); }   /* 내 퀴즈 삭제 */
.arcade .wbtn.danger:hover:not([disabled]) { background:rgba(255,90,90,.1); }
.arcade .wrongs { margin-top:var(--sp-3); padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); background:rgba(0,0,0,.22); border:1px solid var(--line); border-radius:10px; animation:arBlurIn .3s ease both; }
.arcade .wrongs .rights { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-1) var(--sp-3); } /* 정답자(맞힌 순서) · 오답자(낸 답) 한 줄씩 */
.arcade .wrongs .rights.is-wrong { padding-bottom:var(--sp-3); border-bottom:1px solid var(--line); } /* 아래 보기별 막대와 구분 */
.arcade .wrongs .rights .who { grid-column:auto; margin-top:0; }
.arcade .qres__ans { display:flex; align-items:baseline; gap:var(--sp-2); font-size:var(--fs-md); } /* 결과 맨 위 정답 */
.arcade.qres { overflow: visible; background: none; } /* 퀴즈 결과 창 안 (arcade.js quizResult): 게임장 모양만 빌리고 바둑판 배경은 뺌 */
.arcade.qres .wrongs { margin-top: 0; animation: none; }
.qres__q { margin: 0 0 var(--sp-3); font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: var(--lh-base); color: var(--text-strong); }
.arcade .wrow { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) 44px; gap:var(--sp-3); align-items:center; font-size:var(--fs-sm); }
.arcade .wbar { height:10px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; }
.arcade .wbar i { display:block; height:100%; border-radius:999px; background:var(--bad); transition:width .6s cubic-bezier(.2,.8,.2,1); }
.arcade .wbar i.ok { background:var(--ok); }
.arcade .wtag { display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-1) var(--sp-3); font-size:var(--fs-sm); color:#F2C7C7; background:rgba(224,122,122,.12); border:1px solid rgba(224,122,122,.35); border-radius:999px; }
.arcade .wtag b { color:#fff; }
.arcade .who { font-size:var(--fs-xs); color:var(--muted); grid-column:1/-1; margin-top:-4px; }
.arcade .ar-switch { position:relative; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) var(--sp-3); background:rgba(0,0,0,.2); border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.arcade .ar-switch input { position:absolute; opacity:0; width:1px; height:1px; }
.arcade .ar-switch__track { position:relative; width:44px; height:26px; flex-shrink:0; border-radius:999px; background:rgba(255,255,255,.12); transition:background .2s; }
.arcade .ar-switch__track::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.arcade .ar-switch input:checked + .ar-switch__track { background:var(--primary); }
.arcade .ar-switch input:checked + .ar-switch__track::after { transform:translateX(18px); }
.arcade .ar-switch input:focus-visible + .ar-switch__track { outline:2px solid var(--accent); outline-offset:2px; }
.arcade .fuse { display:flex; gap:var(--sp-5); align-items:center; padding:var(--sp-6) var(--sp-6); }
.arcade .fuse-orb { position:relative; width:84px; height:84px; flex-shrink:0; border-radius:50%; background:conic-gradient(from 0deg, #6FA8DC, #B38BE8, #E3B35C, #6FA8DC); padding:var(--sp-1); animation:arSpin 6s linear infinite; }
.arcade .fuse-orb::after { content:""; position:absolute; inset:3px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #2A2D3A, #15161C); }
.arcade .fuse-orb.ready { box-shadow:0 0 28px rgba(179,139,232,.6); animation-duration:2s; }
.arcade .fuse-orb span { position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; font-weight:var(--fw-heavy); font-size:var(--fs-xl); animation:arSpin 6s linear infinite reverse; }
.arcade .fuse-orb.ready span { animation-duration:2s; }
.arcade .meter { height:10px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; margin:var(--sp-3) 0 var(--sp-3); }
.arcade .meter i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#6FA8DC,#B38BE8,#E3B35C); transition:width .5s cubic-bezier(.2,.8,.2,1); }
.arcade .mini-rates { display:flex; gap:var(--sp-2); flex-wrap:wrap; font-size:var(--fs-xs); }
.arcade .mini-rates span { padding:var(--sp-1) 9px; border-radius:999px; background:rgba(0,0,0,.25); border:1px solid var(--line); }
.arcade .materials { font-size:var(--fs-sm); color:var(--muted); text-align:center; max-width:640px; }
.arcade .spr { display:inline-block; background-repeat:no-repeat; image-rendering:pixelated; image-rendering:crisp-edges; animation:arSprA .72s steps(4) infinite; filter:drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
@keyframes arSprA { from{ background-position:0 0; } to{ background-position:calc(var(--sw) * -1) 0; } }
.arcade .icon-card .ico { width:72px; height:72px; }
.arcade .slots5 { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--sp-3); }
.arcade .bslot { position:relative; min-width:0; min-height:118px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-2); font-size:var(--fs-xs); color:var(--muted); background:rgba(0,0,0,.22); border:1px dashed rgba(196,181,253,.4); border-radius:12px; cursor:pointer; font-family:inherit; }
.arcade .bslot.full { border-style:solid; color:var(--text); background:linear-gradient(170deg,#23252F,#17181E); }
.arcade .bslot b { font-size:var(--fs-xs); }
.arcade .bslot .x { position:absolute; top:4px; right:6px; font-size:var(--fs-md); color:var(--muted); }
.arcade .pick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:var(--sp-2); max-height:340px; overflow:auto; padding:2px; }
.arcade .pick { position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--sp-1); padding:var(--sp-3) var(--sp-2); font-size:var(--fs-xs); color:var(--text); background:linear-gradient(170deg,#23252F,#17181E); border:1px solid var(--line-strong); border-radius:12px; cursor:pointer; font-family:inherit; transition:transform .15s; }
.arcade .pick:hover:not([disabled]) { transform:translateY(-2px); }
.arcade .pick[aria-pressed="true"] { border-color:var(--ar-accent-2); box-shadow:0 0 0 3px rgba(139,92,246,.18); }
.arcade .pick[disabled] { opacity:.4; cursor:default; }
.arcade .pw { font-family:var(--ar-font); font-weight:var(--fw-regular); color:var(--gold); font-size:var(--fs-xs); }
.arcade .el { display:inline-block; padding:1px var(--sp-2); font-size:var(--fs-2xs); font-weight:var(--fw-heavy); border-radius:6px; }
.arcade .el.fire { color:#FFD9C2; background:rgba(212,70,26,.45); }
.arcade .el.ice { color:#DDF6FF; background:rgba(63,155,214,.45); }
.arcade .el.shadow { color:#E6DDFF; background:rgba(77,63,120,.6); }
.arcade .el.gold { color:#2E1C00; background:#E3B35C; }
.arcade .el.none { color:var(--text-sub); background:rgba(255,255,255,.08); }
.arcade .arena { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); padding:var(--sp-5); background:radial-gradient(ellipse at 50% 100%, rgba(139,92,246,.12), transparent 60%), linear-gradient(180deg,#1A1B25,#12131A); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.arcade .arena::before { content:""; position:absolute; left:50%; top:12px; bottom:12px; width:1px; background:linear-gradient(transparent, rgba(255,255,255,.12), transparent); }
.arcade .side { min-width:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.arcade .side h4 { margin:0 0 var(--sp-1); font-size:var(--fs-sm); color:var(--muted); display:flex; justify-content:space-between; }
.arcade .unit { position:relative; display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3); border-radius:10px; background:rgba(255,255,255,.03); border:1px solid transparent; transition:opacity .4s, filter .4s; }
.arcade .side.enemy .unit { flex-direction:row-reverse; text-align:right; }
.arcade .unit .body { width:60px; height:60px; display:flex; align-items:flex-end; justify-content:center; flex-shrink:0; transition:transform .12s ease; }
.arcade .side.enemy .unit .body { transform:scaleX(-1); }
.arcade .unit.lunge .body { transform:translateX(26px) scale(1.08); }
.arcade .side.enemy .unit.lunge .body { transform:scaleX(-1) translateX(26px) scale(1.08); }
.arcade .unit.hit { animation:arShakeX .3s ease; }
.arcade .unit.hit .body { filter:brightness(2.2); }
.arcade .unit.dead { opacity:.28; filter:grayscale(1); }
.arcade .unit.skill { border-color:rgba(227,179,92,.7); box-shadow:0 0 22px rgba(227,179,92,.45); }
.arcade .uinfo { flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--sp-1); }
.arcade .uname { font-size:var(--fs-sm); font-weight:var(--fw-bold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arcade .hp { height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.arcade .hp i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#4FB27A,#8FE0A8); transition:width .25s ease; }
.arcade .hp i.low { background:linear-gradient(90deg,#C84B4B,#E08A7A); }
.arcade .side.enemy .hp { direction:rtl; }
.arcade .timer { height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.arcade .timer i { display:block; height:100%; background:linear-gradient(90deg,#6FA8DC,#B38BE8); }
.arcade .feed { min-height:22px; font-size:var(--fs-sm); color:var(--text-sub); }
@media (max-width: 960px) {
  .arcade .slots5 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .arcade .arena { grid-template-columns:1fr; }
  .arcade .arena::before { display:none; }
}
.arcade .lvb { display:inline-block; margin-left:var(--sp-1); padding:0 var(--sp-2); font-size:var(--fs-2xs); font-weight:var(--fw-heavy); color:#2A1D06; background:linear-gradient(180deg,#FFE6A8,#E3B35C); border-radius:6px; vertical-align:middle; }
.arcade .stones { display:inline-flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-sm); font-weight:var(--fw-bold); color:#CFE8FF; }
.arcade .stones i { width:12px; height:12px; transform:rotate(45deg); border-radius:2px; background:linear-gradient(135deg,#BFE6FF,#4F8FD8); box-shadow:0 0 8px rgba(111,168,220,.8); display:inline-block; }
.arcade .tower { display:flex; gap:var(--sp-5); align-items:center; padding:var(--sp-5); background:linear-gradient(135deg, rgba(139,92,246,.18), rgba(0,0,0,.25)); border:1px solid rgba(196,181,253,.3); border-radius:14px; flex-wrap:wrap; }
.arcade .floorbig { font-size:34px; font-weight:var(--fw-heavy); letter-spacing:var(--ls-tighter); line-height:1.1; }
.arcade .floorbig small { display:block; font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--muted); letter-spacing:0; }
.arcade .floors { display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.arcade .fl { min-width:44px; height:34px; padding:0 var(--sp-2); display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:var(--fw-heavy); color:var(--text-sub); background:rgba(0,0,0,.25); border:1px solid var(--line-strong); border-radius:8px; }
.arcade .fl.cur { color:#fff; background:var(--primary); border-color:var(--ar-accent-2); box-shadow:0 0 14px rgba(139,92,246,.6); }
.arcade .fl.boss { color:#FFE6A8; border-color:rgba(227,179,92,.7); }
.arcade .fl.boss.cur { background:linear-gradient(180deg,#C8953A,#8E6420); }
.arcade .foe-preview { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:flex-end; padding:var(--sp-2) var(--sp-3); background:rgba(0,0,0,.25); border-radius:10px; }
.arcade .foe-preview span.spr { transform:scaleX(-1); }
.arcade .mon-modal { position:relative; width:min(560px,100%); max-height:100%; overflow-y:auto; padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4); align-items:center; background:rgba(26,27,34,.94); border:1px solid var(--line-strong); border-radius:18px; animation:arBlurIn .3s ease both; }
.arcade .mon-modal .big { width:150px; height:150px; display:flex; align-items:center; justify-content:center; border-radius:24px; background:radial-gradient(circle, var(--rc) 0%, transparent 70%); }
.arcade .mon-modal.up .big { animation:arPop .5s ease; }
.arcade .mon-modal.fail { animation:arShakeX .45s ease; }
.arcade .stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-2); width:100%; }
.arcade .stat { padding:var(--sp-3); text-align:center; background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:10px; font-size:var(--fs-xs); color:var(--muted); }
.arcade .stat b { display:block; font-size:var(--fs-lg); color:var(--text); }
.arcade .stat em { font-style:normal; font-size:var(--fs-2xs); color:var(--ok); }
.arcade .enh-bar { width:100%; display:flex; gap:var(--sp-1); }
.arcade .enh-bar i { flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.08); }
.arcade .enh-bar i.on { background:linear-gradient(90deg,#FFE6A8,#E3B35C); }
.arcade .uicon { width:var(--icon-size); height:var(--icon-size); border-radius:50%; object-fit:cover; image-rendering:pixelated; flex-shrink:0; box-shadow:0 0 0 1px rgba(255,255,255,.14); background:#23252E; }
.arcade .uicon.none { display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-md); font-weight:var(--fw-heavy); color:#fff; background:var(--avatar); }
.arcade .name-row, .ar-guide .name-row { display:inline-flex; align-items:center; gap:var(--sp-2); }
.arcade .machine { position:relative; width:230px; height:320px; flex-shrink:0; }
/* 기계 그림 (운영자가 기계 관리에서 올림, 예: 포켓몬스터 로고): 있으면 뽑기 상자를 감추고 그 자리에 그림. 뽑을 때 그림이 흔들리고 캡슐은 그림 가운데서 떨어짐 */
.arcade .machine-art { display: none; }
/* 기계 그림은 왼쪽 뽑기 상자 위 가운데, 오른쪽 제목과 같은 높이 (arcade.js #mLogo, 상자 폭 230 · 칸 안쪽 여백 기준) */
.arcade .icon-stage { position: relative; --logo-h: 72px; --logo-gap: 10px; } /* 로고 높이 · 로고와 기계 사이 (늘 10px) */
.arcade .m-logo { position: absolute; top: var(--sp-6); left: calc(var(--sp-6) + 115px); transform: translateX(-50%); height: var(--logo-h); width: auto; max-width: 230px; object-fit: contain; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 10px rgba(0,0,0,.45)); } /* 흰 외곽선(2px, 네 방향 그림자)으로 로고를 또렷하게 */
@media (max-width: 960px) { .arcade .icon-stage { --logo-h: 52px; } .arcade .m-logo { top: var(--sp-4); left: 50%; } } /* 좁은 화면은 상자 · 본문이 위아래라 칸 가운데 위 */
.arcade .m-logo[hidden] { display: none; }
.arcade .m-logo { transition: opacity .25s ease; } .arcade .m-logo.is-loading { opacity: 0; } /* 로고 그림은 다 받은 뒤 서서히 (예전엔 늦게 받아져 툭 튀어나왔음) */
/* 로고가 있으면 뽑기 상자를 칸 위에 붙이고 로고 아래 늘 10px 떨어지게: 로고와 상자 모두 칸 안쪽 여백(위)에서 시작 → 상자를 로고 높이 + 10px 내림
   (상자 맨 위 = 돔 위 손잡이 .machine::before). 예전엔 상자가 칸 세로 가운데라 로고와 돔이 겹쳤음 (죠죠 로고 · 폰의 포켓몬 로고) */
.arcade .icon-stage:has(.m-logo:not([hidden])) .machine { align-self: flex-start; margin-top: calc(var(--logo-h) + var(--logo-gap)); }
.arcade .machine.has-art { width: 300px; height: 240px; }
.arcade .machine.has-art > .dome, .arcade .machine.has-art > .mbody { display: none; }
.arcade .machine.has-art .machine-art { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 24px rgba(0,0,0,.55)); }
.arcade .machine.has-art.spin .machine-art { animation: arArtShake .12s ease-in-out infinite alternate; }
.arcade .machine.has-art .drop { left: calc(50% - 17px); top: 30%; }
@keyframes arArtShake { from { transform: translate(-3px, 1px) rotate(-2deg); } to { transform: translate(3px, -2px) rotate(2deg); } }
.arcade .machine::before { content:""; position:absolute; left:50%; top:0; z-index:2; width:70px; height:18px; transform:translateX(-50%); border-radius:12px 12px 4px 4px; background:linear-gradient(180deg, color-mix(in srgb, var(--mc, #8B5CF6) 85%, #fff), color-mix(in srgb, var(--mc, #8B5CF6) 60%, #000)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 3px 6px rgba(0,0,0,.4); }
.arcade .machine.has-art::before { display:none; }
/* 유리 공: 금속 테두리 + 안쪽 어둡게, 왼쪽 위에 둥근 반사광 (::after, 캡슐 위에 얹힘) */
.arcade .dome { position:absolute; left:15px; top:12px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.07), rgba(255,255,255,.02) 55%, rgba(0,0,0,.32) 100%); border:3px solid rgba(225,230,255,.22); box-shadow:0 0 0 4px #252833, 0 0 0 5px rgba(255,255,255,.08), inset 0 -14px 30px rgba(0,0,0,.4), 0 0 44px color-mix(in srgb, var(--mc, #8B5CF6) 22%, transparent); overflow:hidden; }
.arcade .dome::after { content:""; position:absolute; width:150px; height:150px; left:14px; top:12px; z-index:2; border-radius:50%; border:6px solid transparent; border-top-color:rgba(255,255,255,.26); border-left-color:rgba(255,255,255,.1); transform:rotate(-18deg); pointer-events:none; }
/* 캡슐: 바닥부터 벌집 모양으로 쌓음 (arcade.js capsHtml), 색 반 · 흰 반 + 가운데 이음새 + 반사점, 하나씩 조금 기울임(--rot) */
.arcade .cap { position:absolute; width:30px; height:30px; border-radius:50%; rotate:var(--rot, 0deg); background:radial-gradient(circle at 30% 26%, rgba(255,255,255,.85) 0 2px, rgba(255,255,255,0) 6px), linear-gradient(180deg, var(--c) 0 46%, rgba(0,0,0,.2) 47.5% 52.5%, #F2F3F8 54% 100%); box-shadow:inset -3px -4px 6px rgba(0,0,0,.28), 0 2px 3px rgba(0,0,0,.35); }
.arcade .machine.spin .cap { animation:arCapShake .16s ease-in-out infinite alternate; }
@keyframes arCapShake { from{ transform:translate(-3px,2px); } to{ transform:translate(3px,-3px); } }
/* 몸통: 기계 색(--mc) · 위에 목 띠(::before) · 가운데 이름표 · 동전 넣는 곳(::after) · 오른쪽 은색 손잡이 · 왼쪽 아래 배출구(덮개) */
.arcade .mbody { position:absolute; left:0; top:200px; width:230px; height:116px; border-radius:16px 16px 22px 22px; background:linear-gradient(180deg, var(--mc, #8B5CF6), color-mix(in srgb, var(--mc, #8B5CF6) 62%, #000)); box-shadow:inset 0 2px 0 rgba(255,255,255,.22), inset 0 -6px 12px rgba(0,0,0,.25), 0 16px 30px -12px rgba(0,0,0,.7); }
.arcade .mbody::before { content:""; position:absolute; left:42px; right:42px; top:-9px; height:14px; border-radius:7px; background:linear-gradient(180deg, color-mix(in srgb, var(--mc, #8B5CF6) 55%, #fff), color-mix(in srgb, var(--mc, #8B5CF6) 55%, #000)); box-shadow:0 2px 4px rgba(0,0,0,.4); }
.arcade .mbody::after { content:""; position:absolute; left:111px; top:50px; width:8px; height:24px; border-radius:4px; background:#14151B; box-shadow:0 0 0 3px color-mix(in srgb, var(--mc, #8B5CF6) 40%, #C8953A), inset 0 2px 3px rgba(0,0,0,.8); }
.arcade .mbody .plate { position:absolute; left:50%; top:14px; transform:translateX(-50%); max-width:150px; padding:2px var(--sp-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--ar-font); font-size:var(--fs-sm); font-weight:var(--fw-regular); letter-spacing:.14em; color:#FFE6A8; background:rgba(0,0,0,.3); border:1px solid rgba(255,230,168,.28); border-radius:6px; }
.arcade .crank { position:absolute; right:22px; top:44px; width:52px; height:52px; border-radius:50%; background:radial-gradient(circle at 38% 32%, #FFFFFF, #CDD1DB 40%, #7D8292 100%); box-shadow:0 4px 10px rgba(0,0,0,.45), inset 0 -2px 3px rgba(0,0,0,.25); transition:transform 1s cubic-bezier(.3,.1,.2,1); }
.arcade .crank::after { content:""; position:absolute; left:50%; top:50%; width:40px; height:10px; margin:-5px 0 0 -20px; border-radius:5px; background:linear-gradient(180deg, #9AA0AE, #5B6070); box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
.arcade .outlet { position:absolute; left:20px; bottom:14px; width:70px; height:46px; border-radius:12px 12px 10px 10px; background:#14151B; box-shadow:inset 0 5px 9px rgba(0,0,0,.75), 0 0 0 3px color-mix(in srgb, var(--mc, #8B5CF6) 55%, #000); }
.arcade .outlet::after { content:""; position:absolute; left:6px; right:6px; top:4px; height:16px; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); }
.arcade .drop { position:absolute; left:40px; top:120px; width:30px; height:30px; border-radius:50%; opacity:0; background:radial-gradient(circle at 30% 26%, rgba(255,255,255,.85) 0 2px, rgba(255,255,255,0) 6px), linear-gradient(180deg, var(--c) 0 46%, rgba(0,0,0,.2) 47.5% 52.5%, #F2F3F8 54% 100%); box-shadow:inset -3px -4px 6px rgba(0,0,0,.28); z-index:3; }
.arcade .drop.go { animation:arCapDrop .7s cubic-bezier(.5,0,.6,1.4) forwards; }
@keyframes arCapDrop { 0%{ opacity:1; transform:translateY(0) rotate(0); } 100%{ opacity:1; transform:translateY(144px) rotate(200deg); } }
.arcade .icon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:var(--sp-3); }
.arcade .ic-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-2) var(--sp-3); font-size:var(--fs-xs); color:var(--text); background:linear-gradient(170deg,#23252F,#17181E); border:1px solid var(--line-strong); border-radius:12px; cursor:pointer; font-family:inherit; transition:transform .15s; }
.arcade .ic-card:hover:not([disabled]) { transform:translateY(-2px); }
.arcade .ic-card[disabled] { opacity:.35; cursor:default; }
.arcade .ic-card.on { border-color:var(--ar-accent-2); box-shadow:0 0 0 3px rgba(139,92,246,.2); }
.arcade .ic-card .big { width:56px; height:56px; border-radius:50%; object-fit:cover; image-rendering:pixelated; }
.arcade .ic-card .cnt { position:absolute; top:6px; right:8px; font-size:var(--fs-2xs); color:var(--muted); }
.arcade .ic-card .on-tag { position:absolute; top:6px; left:6px; padding:0 var(--sp-2); font-size:var(--fs-micro); font-weight:var(--fw-heavy); color:#fff; background:var(--primary); border-radius:6px; }
.arcade .capsule-reveal { position:relative; width:150px; height:150px; display:flex; align-items:center; justify-content:center; }
.arcade .capsule-reveal .half { position:absolute; left:15px; width:120px; height:60px; background:var(--c); transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s; }
.arcade .capsule-reveal .half.t { top:15px; border-radius:60px 60px 0 0; }
.arcade .capsule-reveal .half.b { bottom:15px; border-radius:0 0 60px 60px; background:#EDEFF5; }
.arcade .capsule-reveal.open .half.t { transform:translateY(-60px) rotate(-18deg); opacity:0; }
.arcade .capsule-reveal.open .half.b { transform:translateY(60px) rotate(12deg); opacity:0; }
.arcade .capsule-reveal img { width:110px; height:110px; border-radius:50%; image-rendering:pixelated; object-fit:cover; transform:scale(.3); opacity:0; transition:transform .5s .25s cubic-bezier(.2,1.4,.4,1), opacity .3s .25s; }
.arcade .capsule-reveal.open img { transform:none; opacity:1; }
.arcade .preview-post { display:flex; flex-direction:column; gap:var(--sp-3); }
.arcade .pv { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); background:rgba(0,0,0,.22); border:1px solid var(--line); border-radius:10px; font-size:var(--fs-md); }
.arcade .lvp2, .ar-guide .lvp2 { padding:1px var(--sp-2); font-size:var(--fs-2xs); font-weight:var(--fw-bold); color:#C4B5FD; border:1px solid rgba(196,181,253,.45); border-radius:4px; }
.arcade .shelf { display:flex; gap:var(--sp-4); overflow-x:auto; padding:var(--sp-1) 2px var(--sp-3); }
.arcade .mc-card { position:relative; width:168px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); padding:var(--sp-4) var(--sp-3) var(--sp-3); font-family:inherit; color:var(--text); text-align:center; background:linear-gradient(170deg,#23252F,#17181E); border:1px solid var(--line-strong); border-radius:14px; cursor:pointer; transition:transform .15s, box-shadow .2s; }
.arcade .mc-card:hover { transform:translateY(-3px); }
.arcade .mc-card.on { border-color:var(--mc); box-shadow:0 0 0 3px color-mix(in srgb, var(--mc) 35%, transparent), 0 14px 30px -14px var(--mc); }
.arcade .mc-card .mini { position:relative; width:100px; height:112px; }
.arcade .mc-card .mini::before { content:""; position:absolute; left:50%; top:0; z-index:2; width:34px; height:9px; transform:translateX(-50%); border-radius:6px 6px 2px 2px; background:color-mix(in srgb, var(--mc) 80%, #fff); }
.arcade .mc-card .mdome { position:absolute; left:6px; top:6px; width:88px; height:88px; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.07), rgba(0,0,0,.32) 100%); border:2px solid rgba(225,230,255,.22); box-shadow:0 0 0 2px #252833; }
.arcade .mc-card .mdome::after { content:""; position:absolute; left:6px; top:6px; width:62px; height:62px; z-index:2; border-radius:50%; border:3px solid transparent; border-top-color:rgba(255,255,255,.24); transform:rotate(-18deg); }
.arcade .mc-card .mdome .cap { width:14px; height:14px; box-shadow:inset -1px -2px 3px rgba(0,0,0,.28); }
.arcade .mc-card .mbase { position:absolute; left:0; bottom:0; width:100px; height:30px; border-radius:8px 8px 12px 12px; background:linear-gradient(180deg, var(--mc), color-mix(in srgb, var(--mc) 62%, #000)); box-shadow:inset 0 2px 0 rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; }
.arcade .mc-card .mbase span { font-size:var(--fs-micro); font-weight:var(--fw-heavy); color:#fff; opacity:.9; }
.arcade .mc-card .mc-name { font-size:var(--fs-md); line-height:var(--lh-tight); }
.arcade .mc-badge { position:absolute; top:8px; right:8px; padding:1px var(--sp-2); font-size:var(--fs-micro); font-weight:var(--fw-heavy); color:#2A1D06; background:#E3B35C; border-radius:6px; }
.arcade .mc-new { position:absolute; top:8px; left:8px; padding:1px var(--sp-2); font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:var(--ls-caps); color:#fff; background:var(--new); border-radius:6px; } /* 새 기계 · 아이콘이 늘어난 기계 (arcade.js machineNew) */
.arcade .mstrip-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); margin-bottom:var(--sp-2); font-size:var(--fs-xs); }
.arcade .mstrip-head b { color:var(--text-strong); font-variant-numeric:tabular-nums; }
.arcade .mstrip-all { min-height:30px; padding:0 10px; font:inherit; font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--text-sub); background:transparent; border:1px solid var(--line-strong); border-radius:999px; cursor:pointer; }
/* 한 줄 + ‹ › (arcade-common.js [data-hscroll]), [전체 보기]면 줄바꿈 */
.arcade .mstrip { display:flex; gap:var(--sp-2); padding:4px 2px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; }
.arcade .mstrip::-webkit-scrollbar { display:none; }
.arcade .grid2 > *, .arcade .icon-stage, .arcade .icon-stage__body, .arcade .icon-stage__body > div, .arcade .hs-wrap { min-width:0; }
.arcade .icon-stage__body { flex:1 1 260px; } /* 한 줄 목록이 길어도 칸이 그만큼 넓어지지 않게 (뽑기 칸 전체가 화면 밖으로 밀렸음) */
.arcade .mstrip .mi { position:relative; flex:none; width:40px; height:40px; padding:0; border:0; border-radius:50%; background:#1D1F26; box-shadow:0 0 0 2px var(--rc); cursor:pointer; scroll-snap-align:start; }
.arcade .mstrip .mi img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; image-rendering:pixelated; }
.arcade .mstrip .mi:not(.is-own) img { filter:grayscale(.85) brightness(.55); }
.arcade .mstrip .mi:not(.is-own) { box-shadow:0 0 0 2px color-mix(in srgb, var(--rc) 45%, transparent); }
.arcade .mstrip .mi.is-own::after { content:"✓"; position:absolute; right:-3px; bottom:-3px; width:16px; height:16px; display:grid; place-items:center; font-size:10px; font-weight:900; color:#08201b; background:#5fc2ad; border-radius:50%; }
.arcade .mstrip .mi.has-owner::before, .pk-card.has-owner::before { content:attr(data-oc); position:absolute; top:-4px; left:-4px; z-index:2; min-width:16px; height:16px; padding:0 4px; display:grid; place-items:center; font-size:var(--fs-micro); font-weight:var(--fw-heavy); line-height:1; color:#fff; background:var(--primary); border:2px solid var(--bg); border-radius:999px; } /* 도감: 이 아이콘을 가진 회원 수 (누르면 목록, arcade.js iconOwners) */
.arcade .rates5 { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--sp-2); }
.arcade .shelf-wrap { position:relative; }
.arcade .shelf { scrollbar-width:none; scroll-behavior:smooth; scroll-snap-type:x proximity; padding:var(--sp-2) var(--sp-1) var(--sp-2) !important; }
.arcade .shelf::-webkit-scrollbar { display:none; }
.arcade .shelf > * { scroll-snap-align:start; }
.arcade .shelf-wrap.l .shelf { -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 56px); mask-image:linear-gradient(90deg, transparent 0, #000 56px); }
.arcade .shelf-wrap.r .shelf { -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%); mask-image:linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%); }
.arcade .shelf-wrap.l.r .shelf { -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); }
.arcade .shelf-nav { position:absolute; top:50%; z-index:2; width:44px; height:44px; margin-top:-22px; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(30,32,40,.92); border:1px solid var(--line-strong); border-radius:50%; box-shadow:0 6px 16px rgba(0,0,0,.5); cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s, transform .15s; }
.arcade .shelf-nav:hover { transform:scale(1.08); }
.arcade .shelf-nav.prev { left:-6px; }
.arcade .shelf-nav.next { right:-6px; }
.arcade .shelf-wrap.l .shelf-nav.prev, .arcade .shelf-wrap.r .shelf-nav.next { opacity:1; pointer-events:auto; }
.arcade .shelf.all { flex-wrap:wrap; overflow:visible; -webkit-mask-image:none !important; mask-image:none !important; }
.arcade .shelf-wrap.open .shelf-nav { display:none; }
.arcade * { scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; }
.arcade *::-webkit-scrollbar { width:8px; height:8px; }
.arcade *::-webkit-scrollbar-track { background:transparent; }
.arcade *::-webkit-scrollbar-thumb { background:rgba(255,255,255,.16); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
.arcade *::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.28); background-clip:padding-box; }
.arcade .hero h1, .arcade .hero p { position:relative; z-index:1; }
/* race — 좌→우 횡스크롤 던전 레이스 */
.arcade .course { position:relative; height:300px; overflow:hidden; border-radius:14px; border:1px solid rgba(255,255,255,.1); background:#2a2216; isolation:isolate; }
.arcade .course::after { content:""; position:absolute; inset:0; z-index:20; pointer-events:none; box-shadow:inset 0 0 40px rgba(0,0,0,.55); border-radius:inherit; }
.arcade .course-world { position:absolute; left:0; top:0; height:100%; background-repeat:repeat-x; background-size:auto 100%; image-rendering:pixelated; will-change:transform; }
.arcade .race-line { position:absolute; top:56%; bottom:0; width:6px; margin-left:-3px; z-index:2; }
.arcade .race-line.start { background:rgba(255,255,255,.75); box-shadow:0 0 0 1px rgba(0,0,0,.25); }
.arcade .race-line.finish { width:14px; margin-left:-7px; background:repeating-conic-gradient(#fff 0 25%, #151515 0 50%) 0 0/14px 14px; box-shadow:0 0 18px rgba(255,230,168,.6); }
/* 경주 숫자(거리·배수·FINISH)도 게임장 글꼴(Bebas Neue) */
.arcade .race-line.finish span { position:absolute; bottom:100%; left:50%; transform:translateX(-50%) skewX(calc(var(--sk, 0rad) * -1)); margin-bottom:var(--sp-2); padding:var(--sp-1) var(--sp-2); font-family:var(--ar-font); font-weight:var(--fw-regular); letter-spacing:.04em; font-size:var(--fs-md); line-height:var(--lh-none); letter-spacing:.12em; color:#2A1D06; background:var(--gold); border-radius:6px; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.4); }
.arcade .rn { position:absolute; left:0; top:0; width:0; height:0; will-change:transform; }
.arcade .rn .body { position:absolute; left:calc(var(--sh) * -0.29); bottom:0; width:calc(var(--sh) * 0.58); height:var(--sh); }
.arcade .rn .spr { position:absolute; inset:0; background:var(--idle) 0 0 / 400% 100% no-repeat; image-rendering:pixelated; transform-origin:50% 100%; animation:arSprFrames .8s steps(4, jump-none) infinite; }
@keyframes arSprFrames{ from{ background-position:0 0; } to{ background-position:100% 0; } }
@keyframes arSprBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5%); } }
.arcade .rn .shadow { position:absolute; left:12%; right:12%; bottom:-4px; height:8px; border-radius:50%; background:rgba(0,0,0,.4); }
.arcade .rn .tag { position:absolute; top:-2px; left:-8px; z-index:1; min-width:18px; height:18px; padding:0 var(--sp-1); display:grid; place-items:center; font-size:var(--fs-2xs); font-weight:var(--fw-heavy); color:#fff; background:var(--c); border:2px solid rgba(0,0,0,.45); border-radius:999px; }
.arcade .rn.lead .tag { box-shadow:0 0 0 2px #FFE6A8, 0 0 12px rgba(227,179,92,.9); }
.arcade .rn.mine .body::before { content:"내 선택"; position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); padding:2px var(--sp-2); font-size:var(--fs-micro); font-weight:var(--fw-heavy); color:#2A1D06; background:var(--gold); border-radius:6px; white-space:nowrap; }
.arcade .course.running .rn .spr { background-image:var(--run); animation:arSprFrames .4s steps(4, jump-none) infinite, arSprBob .2s ease-in-out infinite; }
.arcade .course.running .rn.done .spr { background-image:var(--idle); animation:arSprFrames .8s steps(4, jump-none) infinite; }
.arcade .course .rn.trip .spr { animation:none; transform:rotate(28deg) translateY(4%); }
.arcade .rn.skill .spr { filter:drop-shadow(0 0 5px var(--c)) drop-shadow(0 0 12px var(--c)); }
.arcade .rn.skill .body::after { content:""; position:absolute; right:80%; top:35%; width:150%; height:34%; z-index:-1; border-radius:999px; background:linear-gradient(90deg, transparent, var(--c)); opacity:.55; filter:blur(3px); }
.arcade .rn[data-place]::after { content:attr(data-place); position:absolute; left:0; bottom:calc(var(--sh) + 6px); transform:translateX(-50%); padding:2px var(--sp-2); font-size:var(--fs-xs); font-weight:var(--fw-heavy); color:#fff; background:rgba(0,0,0,.7); border:1px solid var(--c); border-radius:6px; white-space:nowrap; }
.arcade .rn.mine[data-place]::after { color:#2A1D06; background:var(--gold); border-color:var(--gold); }
.arcade .rn.mine[data-place] .body::before { display:none; }
.arcade .rn .bubble { position:absolute; bottom:calc(100% + 20px); left:50%; z-index:30; padding:var(--sp-1) var(--sp-2); font-size:var(--fs-xs); font-weight:var(--fw-heavy); color:#fff; background:var(--c); border:1px solid rgba(255,255,255,.35); border-radius:8px; white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.4); animation:arBubbleUp 1.2s ease both; pointer-events:none; }
@keyframes arRnRun{ 0%,100%{ transform:translateY(0) rotate(-5deg) scaleY(.96); } 50%{ transform:translateY(-14%) rotate(4deg) scaleY(1.03); } }
@keyframes arRnIdle{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3%); } }
@keyframes arBubbleUp{ 0%{ opacity:0; transform:translate(-50%,6px) scale(.8); } 15%{ opacity:1; transform:translate(-50%,0) scale(1); } 80%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-10px); } }
.arcade .course-edge { position:absolute; inset:0; z-index:15; pointer-events:none; }
.arcade .edge { position:absolute; left:4px; display:flex; align-items:center; gap:var(--sp-1); height:18px; padding:0 var(--sp-2) 0 var(--sp-1); font-size:var(--fs-micro); font-weight:var(--fw-heavy); color:#fff; background:rgba(0,0,0,.65); border:1px solid var(--c); border-radius:999px; transform:translateY(-50%); }
.arcade .edge[hidden] { display:none; }
.arcade .edge img { width:16px; height:16px; object-fit:contain; image-rendering:pixelated; }
.arcade .edge.mine { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
.arcade .course-hud { position:absolute; top:10px; left:10px; right:10px; z-index:16; display:flex; justify-content:space-between; gap:var(--sp-2); pointer-events:none; }
.arcade .course-hud span { padding:var(--sp-1) var(--sp-3); font-size:var(--fs-xs); font-weight:var(--fw-heavy); color:#fff; background:rgba(0,0,0,.55); border-radius:999px; }
.arcade .course-hud span:empty { display:none; }
.arcade .minimap { position:relative; height:30px; margin:0 var(--sp-4); }
.arcade .minimap::before { content:""; position:absolute; left:0; right:0; top:50%; height:6px; margin-top:-3px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid var(--line); }
.arcade .mm-fin { position:absolute; right:-3px; top:4px; bottom:4px; width:6px; background:repeating-conic-gradient(#fff 0 25%, #151515 0 50%) 0 0/6px 6px; border-radius:2px; }
.arcade .mm-dot { position:absolute; top:50%; width:26px; height:26px; margin:-13px 0 0 -13px; padding:2px; object-fit:contain; image-rendering:pixelated; background:rgba(14,14,19,.9); border:2px solid var(--c); border-radius:50%; }
.arcade .mm-item { position:absolute; top:50%; z-index:0; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; transform:rotate(45deg); border:1px solid rgba(0,0,0,.6); border-radius:2px; transition:opacity .3s, transform .3s; }   /* 미니맵 아이템 점 */
.arcade .mm-item.potion { background:#FF8A3D; box-shadow:0 0 6px rgba(255,138,61,.8); }
.arcade .mm-item.mimic { background:#A57CF0; box-shadow:0 0 6px rgba(165,124,240,.7); }
.arcade .mm-item.gone { opacity:0; transform:rotate(45deg) scale(.3); }
.arcade .mm-dot.mine { z-index:2; border-color:var(--gold); box-shadow:0 0 10px rgba(227,179,92,.7); }
.arcade .race-result { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.arcade .race-result:empty { display:none; }
.arcade .rr { display:inline-flex; align-items:center; gap:var(--sp-1); height:30px; padding:0 var(--sp-3) 0 var(--sp-1); font-size:var(--fs-sm); font-weight:var(--fw-bold); background:rgba(0,0,0,.25); border:1px solid var(--line-strong); border-radius:999px; }
.arcade .rr b { width:22px; height:22px; display:grid; place-items:center; font-size:var(--fs-2xs); border-radius:50%; background:rgba(255,255,255,.08); }
.arcade .rr:first-child b { color:#2A1D06; background:var(--gold); }
.arcade .rr img { width:20px; height:20px; object-fit:contain; image-rendering:pixelated; }
.arcade .rr.mine { border-color:var(--gold); }
.arcade .caster { display:flex; align-items:center; gap:var(--sp-3); min-height:40px; padding:0 var(--sp-4); font-size:var(--fs-md); font-weight:var(--fw-bold); background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:10px; }
.arcade .caster .live { flex:none; padding:2px var(--sp-2); font-size:var(--fs-2xs); font-weight:var(--fw-heavy); color:#fff; background:#C84B4B; border-radius:6px; }
/* 던전 레이스 모험가 고르기: 머리 그림만 든 동그라미 6개를 한 줄로 (테두리 = 모험가 색, 번호 배지, 아래 이름). 기술 설명은 뺌 */
.arcade .horses { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--sp-2); }
.arcade .horse { position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--sp-1); min-width:0; padding:0; font:inherit; font-size:var(--fs-xs); color:var(--text-sub); text-align:center; background:none; border:0; cursor:pointer; }
.arcade .horse .hd { position:relative; display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 30%, #2A2C36), #15161C); border:3px solid color-mix(in srgb, var(--c) 55%, transparent); transition:transform .15s, box-shadow .15s, border-color .15s; }
.arcade .horse .hd img { width:40px; height:40px; object-fit:contain; image-rendering:pixelated; }
.arcade .horse .no { position:absolute; right:-4px; top:-4px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; font-size:var(--fs-2xs); font-weight:var(--fw-heavy); color:#15161C; background:var(--c); }
.arcade .horse b { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:var(--fw-semibold); }
.arcade .horse:hover:not([disabled]) .hd { transform:translateY(-2px); }
.arcade .horse[aria-pressed="true"] .hd { border-color:var(--c); box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent), 0 0 18px color-mix(in srgb, var(--c) 45%, transparent); }
.arcade .horse[aria-pressed="true"] b { color:var(--text-strong); font-weight:var(--fw-heavy); }
.arcade .horse[disabled] { cursor:default; }
.arcade .horse[disabled]:not([aria-pressed="true"]) .hd { opacity:.45; }
.arcade .race-pay { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.arcade .pay { display:inline-flex; align-items:center; gap:var(--sp-2); height:28px; padding:0 var(--sp-3); font-family:var(--ar-font); font-weight:var(--fw-regular); letter-spacing:.04em; font-size:var(--fs-lg); line-height:var(--lh-none); color:var(--gold); background:rgba(227,179,92,.08); border:1px solid rgba(227,179,92,.3); border-radius:999px; }
.arcade .pay b { font-family:var(--font); font-weight:var(--fw-heavy); font-size:var(--fs-xs); line-height:var(--lh-none); color:var(--text); }
.arcade .pay.first { background:rgba(227,179,92,.18); border-color:var(--gold); }
.arcade .pay.none { color:var(--muted); background:transparent; border-color:var(--line-strong); font-family:inherit; font-size:var(--fs-xs); }
.arcade .rr i { font-style:normal; font-family:var(--ar-font); font-weight:var(--fw-regular); letter-spacing:.04em; font-size:var(--fs-md); line-height:var(--lh-none); color:var(--gold); }
.arcade .odds { font-family:var(--ar-font); font-weight:var(--fw-regular); font-size:var(--fs-lg); color:var(--gold); }
.arcade .course-bg { position:absolute; left:0; top:0; height:100%; image-rendering:pixelated; will-change:transform; }
.arcade .mark { position:absolute; top:calc(55% - 30px); z-index:2; transform:translateX(-50%); padding:2px var(--sp-2); font-family:var(--ar-font); font-weight:var(--fw-regular); letter-spacing:.04em; font-size:var(--fs-sm); line-height:1.2; color:#2A1D06; background:#F3E3C0; border:1px solid rgba(0,0,0,.45); border-radius:4px; box-shadow:0 2px 0 rgba(0,0,0,.35); }
.arcade .mark::after { content:""; position:absolute; left:50%; top:100%; width:2px; height:18px; margin-left:-1px; background:#F3E3C0; box-shadow:1px 0 0 rgba(0,0,0,.35); }
/* 기술 컷인 */
.arcade .cutin { position:absolute; inset:0; z-index:25; overflow:hidden; pointer-events:none; animation:arCiFade 1.1s ease both; }
.arcade .cutin::before, .arcade .cutin::after { content:""; position:absolute; left:0; right:0; z-index:3; height:13%; background:#000; animation:arCiBar 1.1s ease both; }
.arcade .cutin::before { top:0; transform-origin:top; } .arcade .cutin::after { bottom:0; transform-origin:bottom; }
.arcade .ci-dim { position:absolute; inset:0; background:radial-gradient(ellipse at 35% 55%, rgba(0,0,0,.25), rgba(0,0,0,.75)); }
.arcade .ci-band { position:absolute; left:-6%; right:-6%; top:25%; height:50%; overflow:hidden; transform:skewY(-6deg); background:linear-gradient(90deg, rgba(8,8,12,.95) 0%, var(--c) 30%, var(--c) 55%, rgba(8,8,12,.95) 100%); box-shadow:0 0 0 2px rgba(255,255,255,.8), 0 0 0 5px var(--c), 0 0 36px var(--c); animation:arCiBand 1.1s cubic-bezier(.2,.9,.2,1) both; }
.arcade .ci-band::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.22) 34px 36px, transparent 36px 61px, rgba(255,255,255,.12) 61px 62px); animation:arCiLines .18s linear infinite; }
.arcade .ci-band::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.25), transparent 30%, transparent 70%, rgba(0,0,0,.35)); }
.arcade .ci-face { position:absolute; left:7%; top:-12%; height:135%; z-index:1; image-rendering:pixelated; filter:drop-shadow(6px 0 0 rgba(0,0,0,.45)); animation:arCiFace 1.1s cubic-bezier(.2,.9,.2,1) both; }
.arcade .ci-text { position:absolute; left:36%; right:3%; top:50%; z-index:2; display:flex; flex-direction:column; gap:2px; color:#fff; transform:translateY(-50%) skewY(6deg); }
.arcade .ci-text small { font-family:var(--ar-font); font-weight:var(--fw-regular); font-size:var(--fs-micro); line-height:1.2; letter-spacing:.25em; opacity:.9; white-space:nowrap; animation:arCiSub 1.1s ease both; }
.arcade .ci-text b { font-size:clamp(24px, 6.4vw, 46px); font-weight:var(--fw-heavy); font-style:italic; line-height:1.05; letter-spacing:var(--ls-tight); white-space:nowrap; -webkit-text-stroke:1px rgba(0,0,0,.35); text-shadow:3px 3px 0 rgba(0,0,0,.65), 0 0 16px var(--c), 0 0 30px rgba(255,255,255,.35); animation:arCiName 1.1s cubic-bezier(.2,.9,.2,1) both; }
.arcade .ci-text em { font-family:var(--ar-font); font-style:italic; font-weight:var(--fw-regular); font-size:var(--fs-xs); line-height:1.2; letter-spacing:.32em; color:#FFF1C9; text-shadow:0 1px 0 rgba(0,0,0,.8), 0 0 8px rgba(0,0,0,.6); white-space:nowrap; animation:arCiSub 1.1s ease .05s both; }
.arcade .cutin.mine .ci-band { box-shadow:0 0 0 2px #fff, 0 0 0 5px var(--gold), 0 0 40px var(--gold); }
.arcade .ci-flash { position:absolute; inset:0; z-index:4; background:#fff; animation:arCiFlash .32s ease-out both; }
@keyframes arCiBar{ 0%{ transform:scaleY(0); } 12%,84%{ transform:scaleY(1); } 100%{ transform:scaleY(0); } }
@keyframes arCiBand{ 0%{ clip-path:inset(0 100% 0 0); } 14%,80%{ clip-path:inset(0 0 0 0); } 100%{ clip-path:inset(0 0 0 100%); } }
@keyframes arCiFace{ 0%{ transform:translateX(-130%) skewY(6deg); opacity:1; } 18%{ transform:translateX(0) skewY(6deg) scale(1.04); } 82%{ transform:translateX(10%) skewY(6deg) scale(1.12); opacity:1; } 100%{ transform:translateX(40%) skewY(6deg) scale(1.12); opacity:0; } }
@keyframes arCiName{ 0%,10%{ opacity:0; transform:translateX(60px) scale(1.7); letter-spacing:.4em; } 26%{ opacity:1; transform:none; letter-spacing:var(--ls-tight); } 30%{ transform:scale(1.06); } 36%,82%{ opacity:1; transform:none; } 100%{ opacity:0; transform:translateX(-30px); } }
@keyframes arCiSub{ 0%,16%{ opacity:0; transform:translateX(-20px); } 32%,82%{ opacity:.95; transform:none; } 100%{ opacity:0; } }
@keyframes arCiFade{ 0%,88%{ opacity:1; } 100%{ opacity:0; } }
@keyframes arCiFlash{ from{ opacity:.75; } to{ opacity:0; } }
@keyframes arCiLines{ from{ background-position-x:0; } to{ background-position-x:-62px; } }
@media (max-width: 480px){ .arcade .ci-text { left:38%; } .arcade .ci-text small { font-size:var(--fs-micro); letter-spacing:.15em; } .arcade .ci-text em { font-size:var(--fs-micro); letter-spacing:.2em; } }
.arcade .ritem, .arcade .rmon { position:absolute; left:0; top:0; width:0; height:0; pointer-events:none; }
.arcade .ritem img, .arcade .rmon img { max-width:none; width:auto; }   /* 감싼 칸은 너비 0(위치만) → 사이트 공통 img { max-width:100% } 에 눌려 그림이 안 보였음 */
.arcade .ritem img { position:absolute; left:calc(var(--sh) * -0.17); bottom:0; height:calc(var(--sh) * 0.38); image-rendering:pixelated; filter:drop-shadow(0 3px 0 rgba(0,0,0,.35)); animation:arItemBob 1.2s ease-in-out infinite; }
.arcade .ritem.potion img { filter:drop-shadow(0 3px 0 rgba(0,0,0,.35)) drop-shadow(0 0 6px rgba(255,140,60,.8)); }
.arcade .ritem.mimic img { height:calc(var(--sh) * 0.32); transform-origin:50% 100%; animation:arMimicChomp .6s steps(2) infinite; }
.arcade .ritem.gone img { animation:arItemPop .38s ease-out forwards; }
.arcade .ritem.spawn { animation:arItemIn .45s ease-out both; }
@keyframes arItemIn{ from{ opacity:0; } to{ opacity:1; } }
.arcade .rmon img { position:absolute; left:calc(var(--sh) * -0.3); bottom:0; height:calc(var(--sh) * 0.72); image-rendering:pixelated; filter:drop-shadow(0 0 6px rgba(255,60,60,.7)); animation:arMonRun .2s ease-in-out infinite alternate; }
@keyframes arItemBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14%); } }
@keyframes arMimicChomp{ 0%{ transform:scaleY(1); } 100%{ transform:scaleY(.8) scaleX(1.08); } }
@keyframes arItemPop{ to{ transform:translateY(-70%) scale(1.7); opacity:0; } }
@keyframes arMonRun{ from{ transform:scaleX(-1) translateY(0) rotate(-7deg); } to{ transform:scaleX(-1) translateY(-12%) rotate(7deg); } }
.arcade .course.wind::before { content:""; position:absolute; inset:0; z-index:14; pointer-events:none; background:repeating-linear-gradient(95deg, transparent 0 70px, rgba(255,255,255,.2) 70px 72px, transparent 72px 150px); animation:arWindGo .3s linear infinite; }
@keyframes arWindGo{ from{ background-position:0 0; } to{ background-position:300px 0; } }
.arcade .course.photo::after { box-shadow:inset 0 0 0 4px rgba(255,255,255,.85), inset 0 0 90px rgba(255,255,255,.35); }
.arcade .course.cam-mine .rn.mine .shadow { background:radial-gradient(closest-side, rgba(227,179,92,.75), rgba(227,179,92,0)); height:12px; bottom:-6px; left:-10%; right:-10%; }
.arcade .edge.right { left:auto; right:4px; }
.arcade .edge .ar, .arcade .edge.right .al { display:none; } .arcade .edge.right .ar { display:inline; }
.arcade .race-tools { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; }
.arcade .cam-toggle { display:inline-flex; align-items:center; gap:2px; padding:var(--sp-1); font-size:var(--fs-xs); background:rgba(0,0,0,.3); border:1px solid var(--line-strong); border-radius:999px; }
.arcade .cam-toggle span { padding:0 var(--sp-2) 0 var(--sp-2); font-weight:var(--fw-bold); color:var(--muted); }
.arcade .cam-toggle button { height:28px; padding:0 var(--sp-3); font-family:inherit; font-size:var(--fs-xs); font-weight:var(--fw-heavy); color:var(--text); background:transparent; border:0; border-radius:999px; cursor:pointer; }
.arcade .cam-toggle button[aria-pressed="true"] { color:#2A1D06; background:var(--gold); }
.arcade .race-legend { display:flex; gap:var(--sp-3); font-size:var(--fs-xs); color:var(--muted); }
.arcade .race-legend span { display:inline-flex; align-items:center; gap:var(--sp-1); } /* 그림이 글자 위로 올라가지 않게 (dnd2.css 의 img 는 block) */
.arcade .race-legend img { width:16px; height:16px; object-fit:contain; image-rendering:pixelated; }
.arcade .cutin.win .ci-band { background:linear-gradient(90deg, rgba(40,25,5,.95) 0%, #C8922E 25%, #FFE6A8 50%, #C8922E 75%, rgba(40,25,5,.95) 100%); box-shadow:0 0 0 2px #fff, 0 0 0 5px #E3B35C, 0 0 44px #E3B35C; }
.arcade .cutin.win .ci-text b { color:#fff; text-shadow:3px 3px 0 rgba(60,35,0,.75), 0 0 18px rgba(255,230,168,.9); }
.arcade .course.over .course-edge { display:none; }
.arcade .race-over { position:absolute; inset:0; z-index:22; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:var(--sp-2); padding:var(--sp-3) var(--sp-3); background:radial-gradient(ellipse at 50% 45%, rgba(255,215,120,.22), rgba(0,0,0,.72) 72%); animation:arRoIn .45s ease both; }
.arcade .ro-title { margin:var(--sp-1) 0 auto; padding:var(--sp-1) var(--sp-4); font-size:clamp(20px, 5vw, 30px); font-weight:var(--fw-heavy); font-style:italic; color:#2A1D06; background:linear-gradient(180deg, #FFE6A8, var(--gold)); border-radius:10px; box-shadow:0 0 0 2px #fff, 0 0 26px rgba(227,179,92,.8); animation:arRoPop .6s cubic-bezier(.2,1.4,.4,1) .1s both; }
.arcade .podium { display:flex; align-items:flex-end; justify-content:center; gap:var(--sp-2); width:100%; }
.arcade .pd { display:flex; flex-direction:column; align-items:center; width:clamp(72px, 22%, 112px); animation:arRoRise .5s cubic-bezier(.2,.9,.3,1) both; }
.arcade .pd img { height:calc(var(--sh) * 1.0); image-rendering:pixelated; filter:drop-shadow(0 4px 0 rgba(0,0,0,.4)); }
.arcade .pd.p1 img { height:calc(var(--sh) * 1.3); animation:arRnIdle 1s ease-in-out infinite; }
.arcade .pd-block { width:100%; display:flex; flex-direction:column; align-items:center; gap:2px; padding:var(--sp-2) var(--sp-1); color:#fff; background:linear-gradient(180deg, var(--c), rgba(0,0,0,.55)); border:1px solid rgba(255,255,255,.35); border-bottom:0; border-radius:8px 8px 0 0; }
.arcade .pd.p1 .pd-block { min-height:62px; } .arcade .pd.p2 .pd-block { min-height:46px; } .arcade .pd.p3 .pd-block { min-height:34px; }
.arcade .pd-block b { font-family:var(--ar-font); font-weight:var(--fw-regular); font-size:var(--fs-xl); line-height:var(--lh-none); } .arcade .pd.p1 .pd-block b { font-size:var(--fs-3xl); color:#FFE6A8; text-shadow:0 0 10px rgba(227,179,92,.9); }
.arcade .pd-block span { font-size:var(--fs-xs); font-weight:var(--fw-heavy); white-space:nowrap; }
.arcade .pd-block i { font-family:var(--ar-font); font-weight:var(--fw-regular); font-size:var(--fs-2xs); line-height:var(--lh-none); font-style:normal; color:#FFE6A8; }
.arcade .pd.mine .pd-block { box-shadow:0 0 0 2px var(--gold), 0 0 16px rgba(227,179,92,.7); }
.arcade .pd.p3 { animation-delay:.05s; } .arcade .pd.p2 { animation-delay:.15s; } .arcade .pd.p1 { animation-delay:.3s; }
.arcade .ro-mine { display:inline-flex; align-items:center; gap:var(--sp-2); height:28px; padding:0 var(--sp-3) 0 var(--sp-2); font-size:var(--fs-xs); font-weight:var(--fw-bold); color:#fff; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.2); border-radius:999px; }
.arcade .ro-mine.win { color:#FFE6A8; border-color:var(--gold); }
.arcade .ro-mine img { width:20px; height:20px; object-fit:contain; image-rendering:pixelated; }
@keyframes arRoIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes arRoPop{ from{ opacity:0; transform:scale(1.8); } to{ opacity:1; transform:none; } }
@keyframes arRoRise{ from{ opacity:0; transform:translateY(40px); } to{ opacity:1; transform:none; } }
@media (max-width: 480px){ .arcade .pd.p1 .pd-block { min-height:50px; } .arcade .pd.p2 .pd-block { min-height:38px; } .arcade .pd.p3 .pd-block { min-height:28px; } .arcade .pd-block { padding:var(--sp-1) 2px; } }
@media (max-width: 480px){ .arcade .course { height:240px; } .arcade .horse .hd { width:46px; height:46px; } .arcade .horse .hd img { width:32px; height:32px; } .arcade .horse .no { width:18px; height:18px; } .arcade .horse b { font-size:var(--fs-2xs); letter-spacing:-.02em; } }
/* ---------- 랭킹 카드 (고블린 크래쉬 · 가위바위보 공용: 두 화면 모두 이 파일을 불러옴) ----------
 * 오른쪽 카드 열 .ac-col · 기간/기준 버튼 .ac-seg · 순위 목록 .ac-rank · 내 순위 .ac-mine */
.ac-col { display: flex; flex-direction: column; gap:var(--sp-5); min-width: 0; } /* 20px = arcade.css .grid2 사이 간격 */
/* 오른쪽 카드: [랭킹 | 내 기록] 탭 (고블린 크래쉬 · 퀴즈 · 던전 레이스 · 가위바위보 · 숫자야구 공통) */
.ac-stat b small, .ac-mine b small { margin-left:2px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--muted); }
.ac-side { overflow: hidden; } /* 테두리·바탕은 .glass */
.ac-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.ac-tabs button { min-height: 48px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-family: var(--font); font-size: var(--fs-base); font-weight: var(--fw-bold); cursor: pointer; }
.ac-tabs button:hover { color: var(--text); }
.ac-tabs button[aria-selected="true"] { color: var(--text-strong); border-bottom-color: var(--accent); }
.ac-pane { padding:var(--sp-4); }


/* 내 기록 */
.ac-stats { display: grid; grid-template-columns: 1fr 1fr; gap:var(--sp-2); margin-top:var(--sp-3); }
.ac-stat, .ac-fav { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ac-stat { padding:var(--sp-3); }
.ac-stat span { display: block; font-size: var(--fs-xs); color: var(--muted); }
.ac-stat b { font-size: var(--fs-2xl); font-weight: var(--fw-black); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ac-stat.hl b { color: var(--gold); }
.ac-fav { display: flex; align-items: center; gap:var(--sp-3); margin-top:var(--sp-2); padding:var(--sp-3); font-size: var(--fs-md); color: var(--text-sub); }
.ac-fav img { width: 36px; height: 36px; border-radius: var(--radius-sm); image-rendering: pixelated; }
.ac-fav b { color: var(--text-strong); }
.ac-chart { margin-top:var(--sp-3); }
.ac-chart h4 { margin:0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted); }
.ac-chart svg { display: block; width: 100%; height: 110px; }
.ac-chart .bar { fill: var(--accent-line); }
.ac-chart .bar.best { fill: var(--gold); }
.ac-chart text { fill: var(--muted); font-family: var(--font); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.ac-chart .bar.neg { fill: rgba(239,68,68,.55); }
.ac-chart .zero { stroke: var(--line-strong); stroke-width: 1; }
.ac-h4 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted); }
.ac-rec { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: var(--fs-md); color: var(--text-sub); }
.ac-rec b { color: var(--text-strong); }
.ac-stat.neg b { color: var(--ui-error, #ef4444); }
.ac-stat.dim b { color: var(--muted); }

/* 기간·기준 고르기 */
.ac-seg { display: flex; gap:var(--sp-1); margin-bottom:var(--sp-2); padding:var(--sp-1); border-radius: var(--radius); background: var(--surface); }
.ac-seg button { flex: 1; min-height: 36px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); font-family: var(--font); font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; }
.ac-seg button:hover { color: var(--text); }
.ac-seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--text-strong); }
.ac-seg.sm button { font-size: var(--fs-xs); }

/* 랭킹 */
.ac-rank { list-style: none; margin:var(--sp-3) 0 0; padding:0; }
.ac-rank li { display: grid; grid-template-columns: 34px 30px minmax(0, 1fr) auto; align-items: center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-2); border-radius: var(--radius); }
.ac-rank li + li { border-top: 1px solid var(--line); }
/* 5위까지만, 나머지는 [더보기] (js/arcade-common.js). 내 줄(.is-me)은 늘 보임 */
.ac-rank:not(.is-open) > li:nth-child(n+6):not(.is-me) { display: none; }
.ac-more { display: block; width: 100%; min-height: 40px; margin-top: var(--sp-2); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-sub); background: transparent; border: 1px dashed var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.ac-more:hover { color: var(--text-strong); border-color: var(--accent-line); }
.ac-more[hidden] { display: none; }
/* 가로 목록 넘기기 버튼 (js/arcade-common.js [data-hscroll]) */
/* 버튼은 목록 양옆 빈칸(--hs + 6px)에 둠: 목록 위에 겹쳐 놓으면 끝 카드의 글 · 아이콘을 가렸음 */
.hs-wrap { --hs: 40px; position: relative; padding: 0 calc(var(--hs) + 6px); }
.hs-wrap:has(> .mstrip) { --hs: 32px; }   /* 작은 아이콘 줄은 단추도 작게 */
.hs-btn { position: absolute; top: 50%; z-index: 2; width: var(--hs); height: var(--hs); display: grid; place-items: center; padding: 0; transform: translateY(-50%); font: inherit; font-size: 24px; line-height: 1; color: var(--text-strong); background: rgba(20,21,26,.88); border: 1px solid var(--line-strong); border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.45); cursor: pointer; }
.hs-btn:hover { border-color: var(--accent-line); }
.hs-btn--prev { left: 0; } .hs-btn--next { right: 0; }
@media (max-width: 600px) { .hs-wrap { --hs: 34px; } .hs-wrap:has(> .mstrip) { --hs: 30px; } }
.hs-btn[hidden] { display: none; }
.ac-rank .no { text-align: center; font-size: var(--fs-base); font-weight: var(--fw-black); color: var(--muted); font-variant-numeric: tabular-nums; }
.ac-rank li:nth-child(1) .no { color: var(--gold); }
.ac-rank li:nth-child(2) .no { color: var(--hof-silver); }
.ac-rank li:nth-child(3) .no { color: var(--hof-bronze); }
/* 얼굴 동그라미: 닉네임에서 뽑은 색상(--av-hue)으로 사람마다 다른 색 */
.ac-rank .av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: hsl(var(--av-hue, 260) 60% 72%); color: var(--hof-ink); font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.ac-rank img.av { object-fit: cover; image-rendering: pixelated; background: var(--surface-2); }
.ac-rank img.av:not(.ic-r) { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px rgba(255,255,255,.16); } /* 등급 테두리(dnd2.css .ic-r)가 있으면 그것으로 */ /* 회원아이콘 (없으면 위 글자 동그라미) */
.ac-rank .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: var(--fw-semibold); }
.ac-rank .vl { font-size: var(--fs-base); font-weight: var(--fw-heavy); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ac-rank li.is-me { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } /* 내 줄. 'me' 라는 이름은 게임장 1P 지갑(.arcade .me)과 겹쳐 줄 모양이 깨졌음 → is-me */
.ac-rank li.is-me .nm::after { content: "나"; margin-left:var(--sp-2); padding:1px var(--sp-2); border-radius: var(--radius-sm); background: var(--accent); color: var(--hof-ink); font-size: var(--fs-2xs); }
.ac-weekly { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--muted); } /* 고블린 크래쉬 주간 순위 보상 안내 */
.ac-mine { display: flex; justify-content: space-between; align-items: center; gap:var(--sp-2); margin-top:var(--sp-3); padding:var(--sp-3); border: 1px dashed var(--line-strong); border-radius: var(--radius); font-size: var(--fs-md); color: var(--text-sub); }
.ac-mine b { color: var(--text-strong); }
.ac-rank li.ac-empty { display: block; }
.ac-empty { padding:var(--sp-8) var(--sp-3); text-align: center; color: var(--muted); font-size: var(--fs-md); }

/* ---------- 가위바위보 = 메달 게임기 (.rpsm) ----------
   검은 몸체 안에 파란 판(네 모서리 램프 + 크림/초록 숫자 링 + 가운데 빨간 LED 손), 아래 동전 투입구 · CREDIT · 둥근 버튼 3개 */
.arcade .rpsm-wrap { display:flex; flex-direction:column; gap:var(--sp-4); }
.arcade .rpsm-desc { font-size:var(--fs-md); }
.arcade .rpsm { width:100%; max-width:480px; margin:0 auto; padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-4); background:linear-gradient(180deg,var(--rpsm-cab-1),var(--rpsm-cab-2)); border:2px solid var(--line-strong); border-radius:var(--radius-lg); box-shadow:0 30px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); }
.arcade .rpsm.quake { animation:arQuake .35s ease 2; }
.arcade .rpsm__board { position:relative; aspect-ratio:1; padding:12%; border-radius:var(--radius); background:radial-gradient(circle at 50% 45%,var(--rpsm-blue),var(--rpsm-blue-2) 75%); box-shadow:inset 0 0 0 3px rgba(255,255,255,.15), inset 0 -20px 40px rgba(0,0,0,.25); }
/* 램프: 꺼져 있으면 어둡게, 켜지면 밝게 깜빡임 */
.arcade .rpsm__lamp { position:absolute; z-index:2; padding:var(--sp-1) var(--sp-3); font-size:var(--fs-lg); font-weight:var(--fw-black); letter-spacing:var(--ls-tight); border-radius:var(--radius-sm); border:2px solid rgba(0,0,0,.35); filter:brightness(.42) saturate(.6); transition:filter .2s; }
.arcade .rpsm__lamp--win { color:var(--rpsm-lamp-yellow); background:var(--rpsm-lamp-red); }
.arcade .rpsm__lamp--lose, .arcade .rpsm__lamp--draw { color:var(--rpsm-lamp-red); background:var(--rpsm-lamp-yellow); }
.arcade .rpsm__lamp--tl { left:3%; top:3%; transform:rotate(-14deg); }
.arcade .rpsm__lamp--tr { right:3%; top:3%; transform:rotate(14deg); }
.arcade .rpsm__lamp--bl { left:3%; bottom:3%; transform:rotate(14deg); }
.arcade .rpsm__lamp--br { right:3%; bottom:3%; transform:rotate(-14deg); }
.arcade .rpsm__lamp.is-on { filter:none; box-shadow:0 0 18px currentColor; animation:arRpsBlink .32s steps(1) 6; }
@keyframes arRpsBlink { 50% { filter:brightness(.5); } }
/* 숫자 링: 12칸 (크림/초록 번갈아). 칸마다 숫자 + 바깥쪽 전구. 칸 자리는 --i(0~11) × 30도 */
.arcade .rpsm__done { position:absolute; inset:18% 10%; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:16px; text-align:center; border-radius:16px; background:rgba(10,12,30,.86); border:2px solid var(--rpsm-cream); box-shadow:0 10px 30px rgba(0,0,0,.45); } /* 오늘 판을 다 했을 때 기계 가운데에 크게 (arcade.js renderRps) */
.arcade .rpsm__done[hidden] { display:none; }
.arcade .rpsm__done b { font-size:clamp(18px,5.5vw,26px); font-weight:var(--fw-black); color:#FFD54A; letter-spacing:.02em; }
.arcade .rpsm__done span { font-size:var(--fs-sm); color:#fff; line-height:var(--lh-snug); word-break:keep-all; }
.arcade .rpsm__ring { position:relative; width:100%; height:100%; border-radius:50%; container-type:inline-size; background:repeating-conic-gradient(from -15deg,var(--rpsm-cream) 0 30deg,var(--rpsm-green) 30deg 60deg); box-shadow:0 0 0 4px var(--rpsm-cream), 0 0 0 7px var(--rpsm-green), 0 8px 24px rgba(0,0,0,.35); }
.arcade .rpsm__seg { position:absolute; left:50%; top:50%; width:0; height:0; transform:rotate(calc(var(--i) * 30deg)); }
.arcade .rpsm__seg b { position:absolute; left:0; top:0; transform:translate(-50%,-50%) translateY(-38cqw); font-family:var(--ar-font); font-size:11cqw; font-weight:var(--fw-regular); line-height:var(--lh-none); white-space:nowrap; color:var(--rpsm-num); }
.arcade .rpsm__seg.is-flip b { transform:translate(-50%,-50%) translateY(-38cqw) rotate(180deg); } /* 링 아래쪽 숫자는 뒤집어 똑바로 읽히게 (실제 기계처럼) */
.arcade .rpsm__seg i { position:absolute; left:0; top:0; width:3.6cqw; height:3.6cqw; border-radius:50%; transform:translate(-50%,-50%) translateY(-47.5cqw); background:rgba(0,0,0,.25); }
.arcade .rpsm__seg.is-jackpot b { font-size:12cqw; }
.arcade .rpsm__seg.is-on b { color:var(--rpsm-bulb); text-shadow:0 0 6px var(--rpsm-num), 0 0 14px var(--rpsm-bulb); }
.arcade .rpsm__seg.is-on i { background:var(--rpsm-bulb); box-shadow:0 0 10px 3px var(--rpsm-bulb); }
.arcade .rpsm__seg.is-hit b { animation:arRpsBlink .25s steps(1) 8; }
.arcade .rpsm__seg.is-held b, .arcade .rpsm__seg.is-held i { animation:arRpsBlink .8s steps(1) infinite; } /* 당첨 칸: 다음 동전까지 천천히 깜빡임 */
/* 가운데 LED 전광판: 16×16 점 (arcade.js pixHand). 꺼진 점은 어둡게, 켜진 점(.on)은 빨갛게 빛남 */
.arcade .rpsm__led { position:absolute; inset:23%; z-index:1; display:flex; align-items:center; justify-content:center; border-radius:50%; background:radial-gradient(circle at 50% 40%,#2A0907,var(--rpsm-led-bg) 70%); box-shadow:0 0 0 5px #0B0B0D, 0 0 0 7px rgba(255,255,255,.12), inset 0 0 30px rgba(0,0,0,.9); }
.arcade .rpsm__led svg { width:76%; height:76%; overflow:visible; clip-path:circle(56% at 50% 50%); } /* 네모난 점 판의 귀퉁이가 둥근 판 밖으로 나오지 않게 */
.arcade .rpsm__led circle { fill:var(--rpsm-led-off); }
.arcade .rpsm__led circle.on { fill:var(--rpsm-led); filter:drop-shadow(0 0 .35px var(--rpsm-led)) drop-shadow(0 0 1.2px var(--rpsm-led-glow)); }
.arcade .rpsm__led.is-stop svg { animation:arRpsStop .45s ease both; }
@keyframes arRpsStop { 0% { transform:scale(1.12); filter:brightness(1.8); } 100% { transform:none; filter:none; } }

/* 맨 위 간판: 테두리 전구 두 줄이 번갈아 켜지며 도는 것처럼 (동전이 들어가면 빨라짐) */
.arcade .rpsm__marquee { position:relative; display:flex; align-items:baseline; justify-content:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-radius:var(--radius); background:linear-gradient(180deg,var(--rpsm-blue-2),#08254F); box-shadow:inset 0 0 0 2px rgba(255,255,255,.15); }
.arcade .rpsm__marquee::before, .arcade .rpsm__marquee::after { content:""; position:absolute; inset:3px; border-radius:inherit; padding:var(--sp-1); pointer-events:none;
  background:radial-gradient(circle,var(--rpsm-bulb) 2.2px,transparent 2.8px) 0 0/14px 14px;
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.arcade .rpsm__marquee::after { background-position:7px 7px; animation:arRpsChase .9s steps(1) infinite; }
.arcade .rpsm__marquee::before { animation:arRpsChase .9s steps(1) infinite reverse; }
.arcade .rpsm.is-credit .rpsm__marquee::before, .arcade .rpsm.is-credit .rpsm__marquee::after { animation-duration:.3s; }
@keyframes arRpsChase { 50% { opacity:.15; } }
.arcade .rpsm__marquee b { position:relative; font-size:var(--fs-3xl); font-weight:var(--fw-black); letter-spacing:.06em; color:var(--rpsm-disc); text-shadow:0 2px 0 var(--rpsm-num), 0 0 16px rgba(255,210,58,.55); }
.arcade .rpsm__marquee span { position:relative; font-family:var(--ar-font); font-size:var(--fs-lg); letter-spacing:.18em; color:var(--ar-neon-cyan); }
/* 판 위 유리 반사광 */
.arcade .rpsm__board::after { content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,.16) 0 18%,transparent 34%,transparent 70%,rgba(255,255,255,.06) 85%,transparent); }
/* 양옆 노란 원판 (바위 · 보) */
.arcade .rpsm__disc { position:absolute; top:50%; z-index:2; width:9.5%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:50%; transform:translateY(-50%); background:radial-gradient(circle at 40% 35%,#FFF0A8,var(--rpsm-disc) 60%,var(--rpsm-disc-edge)); box-shadow:0 3px 8px rgba(0,0,0,.4); }
.arcade .rpsm__disc--l { left:.8%; }
.arcade .rpsm__disc--r { right:.8%; }
.arcade .rpsm__disc svg { width:82%; height:82%; }
.arcade .rpsm__disc circle { fill:var(--rpsm-ink); }
/* 아래 스피커 그릴 */
.arcade .rpsm__grille { height:28px; margin:0 18%; border-radius:var(--radius-sm); background:radial-gradient(circle,#050507 1.6px,transparent 2.2px) 0 0/8px 8px, #1C1D22; box-shadow:inset 0 1px 3px rgba(0,0,0,.8); }
/* 아래 판: 동전 투입구 · CREDIT */
.arcade .rpsm__panel { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.arcade .rpsm__slot { display:inline-flex; align-items:center; gap:var(--sp-3); min-height:44px; padding:0 var(--sp-4) 0 var(--sp-3); font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--text-strong); background:linear-gradient(180deg,#3A3B43,#26272D); border:1px solid var(--line-strong); border-radius:var(--radius); cursor:pointer; }
.arcade .rpsm__slot b { color:var(--ar-neon-gold); }
.arcade .rpsm__slot:hover:not([disabled]) { border-color:var(--ar-neon-gold); }
.arcade .rpsm__slot[disabled] { cursor:default; filter:brightness(.6); }
.arcade .rpsm__slot-hole { width:6px; height:26px; border-radius:3px; background:#050507; box-shadow:0 0 0 2px #8C8D95, 0 0 8px rgba(255,213,74,.35); }
.arcade .rpsm__slot.is-nudge { animation:arQuake .3s ease 2; }
.arcade .rpsm__left { margin-left:auto; font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--text-sub); white-space:nowrap; }
.arcade .rpsm__left.is-out { color:var(--rpsm-lamp-red); }
.arcade .rpsm__credit { display:flex; align-items:baseline; gap:var(--sp-2); padding:var(--sp-1) var(--sp-3); border-radius:var(--radius-sm); background:var(--ar-screen); font-family:var(--ar-font); letter-spacing:.12em; }
.arcade .rpsm__credit span { font-size:var(--fs-md); color:var(--muted); }
.arcade .rpsm__credit b { font-size:var(--fs-3xl); font-weight:var(--fw-regular); color:var(--rpsm-led); text-shadow:0 0 10px var(--rpsm-led-glow); }
/* 둥근 버튼 3개 (가위 · 바위 · 보). 동전이 들어가 있으면 .is-ready 로 빛남 */
.arcade .rpsm__btns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-3); }
.arcade .rpsm__btn { display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); padding:0; font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--text-sub); background:none; border:0; cursor:pointer; }
.arcade .rpsm__cap { display:flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:50%; color:var(--rpsm-num); background:radial-gradient(circle at 40% 35%,#FFFFFF,var(--rpsm-btn) 55%,var(--rpsm-btn-edge)); box-shadow:0 6px 0 var(--rpsm-btn-edge), 0 10px 18px rgba(0,0,0,.5); transition:transform .08s, box-shadow .08s; }
.arcade .rpsm__cap svg { width:70%; height:70%; }
.arcade .rpsm__cap circle { fill:var(--rpsm-num); }
.arcade .rpsm__btn.is-ready .rpsm__cap { box-shadow:0 6px 0 var(--rpsm-btn-edge), 0 0 0 3px var(--rpsm-lamp-yellow), 0 0 22px var(--rpsm-lamp-yellow); }
.arcade .rpsm__btn.is-ready { color:var(--text-strong); }
.arcade .rpsm__btn:active:not([disabled]) .rpsm__cap { transform:translateY(5px); box-shadow:0 1px 0 var(--rpsm-btn-edge), 0 4px 8px rgba(0,0,0,.5); }
.arcade .rpsm__btn[disabled] { cursor:default; }
.arcade .rpsm-msg { min-height:1.6em; margin:0; text-align:center; font-size:var(--fs-lg); font-weight:var(--fw-bold); }
/* 오른쪽 룰렛 배당표 */
/* 오늘 판 줄 (기계 아래): 이긴 판 금액이 남아 보이게 */
.arcade .rps-today { display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:var(--radius-sm); }
.arcade .rps-today[hidden] { display:none; }
.arcade .rps-today__sum { display:flex; align-items:baseline; gap:var(--sp-2); font-size:var(--fs-sm); color:var(--text-sub); }
.arcade .rps-today__sum b { font-family:var(--ar-font); font-size:var(--fs-2xl); font-weight:var(--fw-regular); line-height:var(--lh-none); color:var(--text-strong); }
.arcade .rps-today__sum b.plus { color:var(--ok); }
.arcade .rps-today__sum b.minus { color:var(--bad); }
.arcade .rps-today__sum small { margin-left:auto; font-size:var(--fs-xs); color:var(--muted); }
.arcade .rps-today__list { display:flex; flex-wrap:wrap; gap:var(--sp-1); margin:0; padding:0; list-style:none; }
.arcade .rps-today__list li { display:inline-flex; align-items:baseline; gap:4px; padding:3px var(--sp-3); font-size:var(--fs-sm); font-weight:var(--fw-bold); font-variant-numeric:tabular-nums; border:1px solid var(--line); border-radius:999px; }
.arcade .rps-today__list li:first-child { box-shadow:0 0 0 1px var(--line-strong); }
.arcade .rps-today__list b { font-family:var(--ar-font); font-size:var(--fs-base); font-weight:var(--fw-regular); }
.arcade .rps-today__list .is-win { color:var(--ok); border-color:currentColor; }
.arcade .rps-today__list .is-lose { color:var(--bad); }
.arcade .rps-today__list .is-draw { color:var(--muted); }
.arcade .rps-today__empty { margin:0; font-size:var(--fs-xs); color:var(--muted); }
.arcade .rpsm-odds { list-style:none; padding:0 !important; display:grid; gap:var(--sp-1); }
.arcade .rpsm-odds li { display:grid; grid-template-columns:48px 1fr auto; align-items:baseline; gap:var(--sp-2); }
.arcade .rpsm-odds b { font-family:var(--ar-font); font-size:var(--fs-xl); font-weight:var(--fw-regular); color:var(--rpsm-num); }
.arcade .rpsm-odds em { font-style:normal; color:var(--muted); font-variant-numeric:tabular-nums; }
.arcade .streak { display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-1) var(--sp-3); font-weight:var(--fw-heavy); color:#2A1D06; background:linear-gradient(180deg,#FFE6A8,#E3B35C); border-radius:999px; animation:arPulseGlow 1.4s ease infinite; --glow:rgba(227,179,92,.6); }
.arcade .gacha-hero { position:relative; display:flex; gap:var(--sp-6); align-items:center; padding:var(--sp-6); overflow:hidden; }
.arcade .gacha-hero::before { content:""; position:absolute; left:-80px; top:-80px; width:360px; height:360px; background:radial-gradient(circle, rgba(227,179,92,.16), transparent 65%); pointer-events:none; }
.arcade .egg-wrap { position:relative; width:160px; height:170px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.arcade .egg-wrap::after { content:""; position:absolute; bottom:6px; width:110px; height:18px; border-radius:50%; background:radial-gradient(ellipse, rgba(0,0,0,.5), transparent 70%); }
.arcade .egg { position:relative; width:118px; height:146px; border-radius:50% 50% 48% 48% / 60% 60% 40% 40%; background:radial-gradient(circle at 35% 30%, #FFF6DA, #EBC67A 45%, #A77A2C 100%); box-shadow:0 0 40px rgba(227,179,92,.35), inset -8px -12px 20px rgba(0,0,0,.25); animation:arIdle 3s ease-in-out infinite; transform-origin:50% 90%; }
.arcade .egg::before { content:""; position:absolute; inset:0; border-radius:inherit; background:repeating-radial-gradient(circle at 60% 70%, rgba(154,61,110,.0) 0 10px, rgba(154,61,110,.22) 10px 13px); mix-blend-mode:multiply; }
.arcade .egg .crack { position:absolute; inset:0; opacity:0; transition:opacity .2s; }
.arcade .egg.charge { animation:arCharge .9s ease-in both; }
.arcade .egg.charge .crack { opacity:1; }
@keyframes arIdle { 0%,100%{ transform:rotate(-3deg);} 50%{ transform:rotate(3deg) translateY(-4px);} }
@keyframes arCharge { 0%{transform:rotate(0)} 20%{transform:rotate(-8deg)} 35%{transform:rotate(9deg)} 50%{transform:rotate(-11deg)} 65%{transform:rotate(12deg)} 80%{transform:rotate(-14deg) scale(1.05)} 100%{transform:scale(1.25); filter:brightness(2.2); opacity:0} }
.arcade .rates { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-2); margin-top:var(--sp-4); }
.arcade .rate { padding:var(--sp-3); border-radius:10px; background:rgba(0,0,0,0.2); border:1px solid var(--line); font-size:var(--fs-sm); }
.arcade .rate b { display:block; font-size:var(--fs-base); }
.arcade .icon-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); padding:var(--sp-4) var(--sp-3) var(--sp-3); border-radius:14px; background:linear-gradient(170deg,#23252F,#17181E); border:1px solid var(--line-strong); text-align:center; font-size:var(--fs-sm); overflow:hidden; }
.arcade .icon-card .ico { width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:radial-gradient(circle, var(--rc,rgba(255,255,255,.1)) 0%, transparent 70%); }
.arcade .icon-card .rar { font-size:var(--fs-2xs); font-weight:var(--fw-heavy); }
.arcade .icon-card .cnt { position:absolute; top:8px; right:10px; font-size:var(--fs-xs); color:var(--muted); }
.arcade .icon-card.locked { opacity:.3; }
.arcade .icon-card.sel { box-shadow:0 0 0 2px var(--ar-accent-2), 0 0 0 6px rgba(139,92,246,0.16); }
.arcade .icon-card.holo::after { content:""; position:absolute; top:0; left:0; width:45%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); animation:arShine 2.2s ease-in-out infinite; }
.arcade .inv { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:var(--sp-3); max-height:640px; overflow:auto; padding:var(--sp-1); }
.arcade button.icon-card { cursor:pointer; color:var(--text); font-family:inherit; transition:transform .2s ease; }
.arcade button.icon-card:hover:not([disabled]) { transform:translateY(-3px); }
.arcade .new { position:absolute; top:8px; left:8px; padding:1px var(--sp-2); font-size:var(--fs-micro); font-weight:var(--fw-heavy); color:#fff; background:#C84B4B; border-radius:6px; }
.arcade .overlay { position:fixed; inset:0; z-index:60; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:var(--sp-6); background:radial-gradient(circle at 50% 45%, rgba(40,44,70,.7), rgba(8,9,12,.92)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); animation:arBlurIn .35s ease both; }
.arcade .overlay .rays { position:absolute; left:50%; top:45%; width:1400px; height:1400px; margin:-700px 0 0 -700px; background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.05) 0 6deg, transparent 6deg 18deg); animation:arSpin 30s linear infinite; pointer-events:none; mask-image:radial-gradient(circle, #000 20%, transparent 60%); -webkit-mask-image:radial-gradient(circle, #000 20%, transparent 60%); }
@keyframes arSpin { to{ transform:rotate(360deg); } }
.arcade .reveal { position:relative; width:min(900px,100%); max-height:100%; overflow-y:auto; padding:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-6); align-items:center; }
.arcade .reveal h2 { margin:0; font-size:var(--fs-4xl); font-weight:var(--fw-heavy); letter-spacing:var(--ls-tighter); }
.arcade .reveal-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--sp-4); width:100%; }
.arcade .reveal-grid.one { grid-template-columns:minmax(0,220px); justify-content:center; }
.arcade .flip { perspective:900px; cursor:pointer; animation:arDealIn .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes arDealIn { from{ opacity:0; transform:translateY(-60px) rotate(-8deg) scale(.8); } to{ opacity:1; transform:none; } }
.arcade .flip .inner { position:relative; height:180px; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.arcade .flip.open .inner { transform:rotateY(180deg); }
.arcade .flip .face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:14px; }
.arcade .flip .back { display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 40%, #33374A, #16171D); border:1px solid var(--line-strong); }
.arcade .flip .back svg { opacity:.8; }
.arcade .flip.hint-r .back { --glow:rgba(111,168,220,.7); animation:arPulseGlow 1.3s ease infinite; border-color:rgba(111,168,220,.6); }
.arcade .flip.hint-e .back { --glow:rgba(179,139,232,.8); animation:arPulseGlow 1.1s ease infinite; border-color:rgba(179,139,232,.7); }
.arcade .flip.hint-l .back { --glow:rgba(227,179,92,.95); animation:arPulseGlow .8s ease infinite; border-color:rgba(227,179,92,.9); }
.arcade .flip .front { transform:rotateY(180deg); }
.arcade .flip .front .icon-card { height:100%; justify-content:center; }
.arcade .glow-r { box-shadow:0 0 26px -4px rgba(111,168,220,.8); }
.arcade .glow-e { box-shadow:0 0 32px -2px rgba(179,139,232,.9); }
.arcade .glow-l { box-shadow:0 0 44px 2px rgba(227,179,92,1); }
.arcade .toast { position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:96; transform:translateX(-50%); max-width:calc(100% - 32px); padding:var(--sp-3) var(--sp-5); font-size:var(--fs-md); font-weight:var(--fw-bold); color:#fff; background:rgba(30,32,40,0.94); border:1px solid var(--line-strong); border-radius:12px; backdrop-filter:blur(12px); animation:arBlurIn .25s ease both; }
@media (max-width: 960px) {
  .arcade .hero, .arcade .grid2 { grid-template-columns:1fr; }
  .arcade .reveal-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .arcade .rates { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .arcade .choices { grid-template-columns:1fr; }
  .arcade .gacha-hero { flex-direction:column; text-align:center; }
}
@media (prefers-reduced-motion: reduce) {
  .arcade *, .floatText, .coin { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ---------- 반응형 (390px 까지) ---------- */
@media (max-width: 1180px) {
  .arcade .ar-select .ar-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width: 960px) {
  .arcade .hero__text { min-height: 0; }
  .arcade .gacha-hero .row { justify-content: center; }
}
@media (max-width: 768px) {
  .arcade .count { font-size: 72px; }
}
@media (max-width: 480px) {
  .arcade .box, .arcade .rules, .arcade .wallet { padding:var(--sp-4); }
  .arcade .ar-select .ar-tabs { gap:var(--sp-2); }
  .arcade .ar-select .ar-tabs a { min-height:88px; padding:var(--sp-2); border-radius:12px; font-size:var(--fs-xs); }
  .arcade .ar-select .ar-tabs__en { font-size:var(--fs-lg); }
  .arcade .balance #bal { font-size:44px; }
  .arcade .quiz { padding-inline:var(--sp-4); }
  .arcade .gacha-hero { padding:var(--sp-5) var(--sp-4); }
  .arcade .icon-stage { padding:var(--sp-4); gap:var(--sp-4); justify-content: center; }
  .arcade .fuse { flex-direction: column; align-items: stretch; padding:var(--sp-4); }
  .arcade .fuse-orb { align-self: center; width: 72px; height: 72px; }
  .arcade .btn.big { padding:0 var(--sp-5); font-size:var(--fs-base); }
  .arcade .slots5 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .arcade .reveal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap:var(--sp-3); }
  .arcade .flip .inner { height: 160px; }
  .arcade .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .arcade .overlay { padding:var(--sp-3); }
  .arcade .mon-modal { padding:var(--sp-5) var(--sp-4); }
  .arcade .rpsm { padding:var(--sp-3); gap:var(--sp-3); }
  .arcade .rpsm__lamp { font-size: var(--fs-sm); padding:2px var(--sp-2); }
  .arcade .rpsm__cap { width: 60px; height: 60px; }
  .arcade .rpsm__slot { font-size: var(--fs-sm); padding-right:var(--sp-3); }
  .arcade .wrow { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 40px; }
  .arcade .floorbig { font-size: 28px; }
  .arcade .unit .body { width: 48px; height: 48px; }
  .arcade .rates5 { gap:var(--sp-1); }
  .arcade .rates5 .input { padding:0 var(--sp-2); }
  .arcade .mc-card { width: 148px; }
}

/* ===== 퀴즈 게시판 (docs/quiz-sian/premium.html 시안 U1, 유니콘 오버로드 공식 사이트 결 참고)
   단색 판 위에 남색 탭 · 크림 종이 카드(금 이중 테두리, 위 남색 띠) 2열 · 남색 쪽 버튼 (제목은 게임 탭 '던드 퀴즈' 가 대신함)
   종이 결은 SVG 노이즈 (그림 파일 없음). 카드 상태 색은 js 가 --sc 로 */
.arcade .qb {
  --qb-navy: #14234a; --qb-navy-hi: #1d3266; --qb-navy-lo: #0b1531; --qb-gold: #d8b26a; --qb-gold-hi: #f6dfa2; --qb-gold-lo: #8a6a2a;
  --qb-cream: #f4ecda; --qb-cream-2: #e7dbc0; --qb-ink: #2e2416; --qb-ink-sub: #6b5a3e;
  --qb-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32  0 0 0 0 .22  0 0 0 0 .1  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --qb-mottle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .32  0 0 0 0 .15  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
  position: relative; min-width: 0; padding: 26px 26px 26px; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 16px;
}
.arcade .qb-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin-bottom: 18px; text-align: center; }
.arcade .qb-intro p { margin: 0; font-size: var(--fs-sm); color: var(--text-sub); }
.arcade .qb-make { padding: 8px 18px; font-family: 'Gowun Batang', serif; font-size: var(--fs-sm); font-weight: 700; color: var(--qb-navy-lo); background: linear-gradient(180deg, var(--qb-gold-hi), var(--qb-gold) 60%, #b48c44); border: 1px solid #fff3cf; border-radius: 6px; box-shadow: 0 3px 8px rgba(0,0,0,.5); cursor: pointer; }
.arcade .qb-make:hover { filter: brightness(1.08); }
/* 상태 탭 · 쪽 버튼 (남색 · 금 화살표) */
.arcade .qb-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 22px; }
.arcade .qb-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 26px; font-size: var(--fs-sm); font-weight: 700; color: #e9e3d2; background: linear-gradient(180deg, #24376b, var(--qb-navy-lo)); border: 1px solid var(--qb-gold-lo); border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(216,178,106,.25); cursor: pointer; }
.arcade .qb-tab::before { content: ''; position: absolute; left: 11px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: var(--qb-gold); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.arcade .qb-tab b { font-family: 'Cinzel', serif; font-size: 12px; color: var(--qb-gold); }
.arcade .qb-tab[aria-pressed="true"] { color: var(--qb-navy-lo); background: linear-gradient(180deg, var(--qb-gold-hi), var(--qb-gold) 60%, #b48c44); border-color: #fff3cf; }
.arcade .qb-tab[aria-pressed="true"]::before { background: var(--qb-navy); } .arcade .qb-tab[aria-pressed="true"] b { color: var(--qb-navy); }
.arcade .qb-pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 24px; }
.arcade .qb-pages:empty { display: none; }
/* 숫자는 줄지도 꺾이지도 않게: 사이트 공통 overflow-wrap:anywhere 때문에 단추가 줄면 '20' '22' 가 한 글자씩 세로로 꺾였음 (폰 파이어폭스) */
.arcade .qb-pages button { flex: none; white-space: nowrap; overflow-wrap: normal; min-width: 40px; height: 40px; padding: 0 10px; font-family: 'Cinzel', serif; font-size: 15px; font-weight: 700; color: var(--qb-gold-hi); background: linear-gradient(180deg, #24376b, var(--qb-navy-lo)); border: 1px solid var(--qb-gold-lo); border-radius: 4px; cursor: pointer; }
.arcade .qb-pages button[aria-current="true"] { color: var(--qb-navy-lo); background: linear-gradient(180deg, var(--qb-gold-hi), var(--qb-gold)); }
.arcade .qb-pages button[disabled] { opacity: .35; cursor: default; }
.arcade .qb-pages span { font-family: 'Cinzel', serif; color: var(--qb-gold); }
.arcade .qb-empty { grid-column: 1 / -1; margin: 0; padding: 40px 20px; text-align: center; color: var(--muted); }
/* 카드: 크림 종이 + 안쪽 금 이중 선(모서리 깎음) + 위 남색 띠 */
.arcade .qb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.arcade .qcard { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0 0 16px; color: var(--qb-ink); background: var(--qb-grain), var(--qb-mottle), linear-gradient(180deg, var(--qb-cream), var(--qb-cream-2)); border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 14px 26px -10px rgba(0,0,0,.7); animation: arBlurIn .3s ease backwards; } /* backwards: 끝난 뒤 filter 를 놓아 마감 카드의 흐림이 먹게 */
.arcade .qcard::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(138,106,42,.55); outline: 1px solid rgba(138,106,42,.3); outline-offset: 3px; pointer-events: none; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); }
.arcade .qcard__band { display: flex; align-items: center; gap: 10px; margin: 14px 14px 0; padding: 7px 12px; color: var(--qb-gold-hi); background: linear-gradient(180deg, var(--qb-navy-hi), var(--qb-navy-lo)); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(216,178,106,.45); }
.arcade .qcard__band .no { font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700; letter-spacing: .2em; }
.arcade .qcard__band .rw { margin-left: auto; display: flex; align-items: center; gap: 6px; font-family: 'Cinzel', serif; font-size: 18px; font-weight: 900; }
.arcade .qcard__band .rw small { font-size: 12px; }
.arcade .qcoin { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #f2c443 55%, #a87a10); box-shadow: 0 0 0 1px #5a3c00; }
.arcade .qcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 16px 0; font-size: var(--fs-xs); color: var(--qb-ink-sub); }
.arcade .qcard__meta .st { padding: 2px 10px 2px 8px; font-size: 11px; font-weight: 800; color: #fff; background: var(--sc); clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%); }
.arcade .qcard__meta .ty { font-weight: 700; }
.arcade .qcard__meta .ty--genre { color: #7a3b9e; font-weight: var(--fw-heavy); } /* 오늘의 퀴즈 분야 딱지 (영화 · 인문 …, QuizService list genre) */
.arcade .qcard__meta .au { margin-left: auto; gap: 6px; } .arcade .qcard__meta .au .uicon { border-radius: 50%; }
/* 오늘의 퀴즈 (자동 출제): 출제자 아이콘 자리에 금색 별 */
.arcade .qcard__meta .qauto { font-weight: 800; color: #9a6b00; }
.arcade .qauto__ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 12px; color: #fff; background: linear-gradient(135deg, #f7c948, #d4920c); box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset; }
.arcade .qcard__band .qnew { margin-left:8px; padding:0 6px; font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:var(--ls-caps); vertical-align:middle; color:#fff; background:var(--new); border-radius:4px; } /* 24시간 안에 올라온 안 푼 퀴즈 (arcade.js quizNew) */
.arcade .qcard__q { margin: 10px 18px 12px; font-family: 'Gowun Batang', serif; font-size: var(--fs-md); font-weight: 700; line-height: 1.6; color: var(--qb-ink); overflow-wrap: anywhere; }
.arcade .qcard__ch { display: flex; flex-direction: column; gap: 6px; margin: 0 16px; }
.arcade .qopt { position: relative; display: flex; align-items: center; min-height: 38px; padding: 8px 10px 8px 26px; font-size: var(--fs-sm); font-weight: 700; color: var(--qb-ink); text-align: left; background: rgba(255,255,255,.45); border: 1px solid rgba(138,106,42,.45); border-radius: 3px; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.arcade .qopt::before { content: ''; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--qb-gold-lo); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.arcade .qopt:hover:not([disabled]) { background: #fff8e6; border-color: var(--qb-gold-lo); transform: translateX(2px); }
.arcade .qopt.right { color: #1e5a33; background: rgba(93,187,134,.2); border-color: #3d8a5a; }
.arcade .qopt.wrong { color: #8e2216; background: rgba(200,60,40,.1); border-color: #b04030; text-decoration: line-through; }
.arcade .qopt.wrong.just { animation: arShakeX .45s ease; }
.arcade .qopt[disabled] { cursor: default; }
.arcade .qcard__sa { display: flex; gap: 6px; margin: 0 16px; }
.arcade .qcard__sa .input { flex: 1; min-width: 0; color: var(--qb-ink); background: rgba(255,255,255,.6); border: 1px solid rgba(138,106,42,.5); border-radius: 3px; }
.arcade .qcard__sa .input::placeholder { color: rgba(46,36,22,.5); }
.arcade .qsend { padding: 0 16px; font-weight: 800; color: var(--qb-gold-hi); background: linear-gradient(180deg, var(--qb-navy-hi), var(--qb-navy-lo)); border: 1px solid var(--qb-gold-lo); border-radius: 3px; cursor: pointer; }
.arcade .qsend[disabled] { opacity: .5; cursor: default; }
.arcade .qcard__ft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: auto 16px 0; padding-top: 12px; font-size: var(--fs-xs); color: var(--qb-ink-sub); }
.arcade .qcard__ft .seats { display: flex; gap: 3px; } .arcade .qcard__ft .seats i { width: 9px; height: 13px; background: var(--qb-gold-lo); clip-path: polygon(50% 0, 100% 35%, 100% 100%, 0 100%, 0 35%); } .arcade .qcard__ft .seats i.gone { background: rgba(138,106,42,.25); }
.arcade .qcard__ft .res { font-weight: 800; } .arcade .qcard__ft .res.ok { color: #2a7046; } .arcade .qcard__ft .res.no { color: #a33326; }
.arcade .qcard__ft .acts { margin-left: auto; display: flex; gap: 4px; }
.arcade .qmini { padding: 4px 10px; font-size: 11px; font-weight: 700; color: var(--qb-ink); background: rgba(255,255,255,.5); border: 1px solid rgba(138,106,42,.5); border-radius: 3px; cursor: pointer; }
.arcade .qmini:hover:not([disabled]) { background: #fff8e6; }
.arcade .qmini.del { color: #8e2216; }
.arcade .qmini[disabled] { opacity: .45; cursor: default; }
.arcade .qcard.is-closed { filter: saturate(.55) brightness(.93); }
.arcade .qcard__stamp { position: absolute; right: 16px; top: 58px; padding: 3px 12px; font-family: 'Gowun Batang', serif; font-size: 16px; font-weight: 700; color: #8e2216; background: rgba(244,236,218,.6); border: 2px solid #8e2216; border-radius: 3px; transform: rotate(-6deg); opacity: .85; }
/* 종이 위 오답 칸 */
.arcade .qcard .wrongs { margin: 12px 16px 0; color: var(--qb-ink); background: rgba(255,255,255,.4); border-color: rgba(138,106,42,.4); }
.arcade .qcard .wrongs .muted, .arcade .qcard .wrongs .who { color: var(--qb-ink-sub); }
.arcade .qcard .wrongs .plus { color: #2a7046; } .arcade .qcard .wrongs .minus { color: #a33326; }
.arcade .qcard .wbar { background: rgba(138,106,42,.18); }
.arcade .qcard .wtag { color: #8e2216; background: rgba(200,60,40,.08); border-color: rgba(176,64,48,.4); } .arcade .qcard .wtag b { color: var(--qb-ink); }
@media (max-width: 760px) {
  .arcade .qb { padding: 24px 12px 18px; }
  /* 폰: 한 쪽에 카드 3장을 세로로 (arcade.js qPer). 넘기기는 아래 쪽 번호 ‹ › 하나로 (예전엔 카드 좌우 버튼까지 겹쳐 있었음), 손가락으로 밀어도 넘어감 */
  .arcade .qb-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; touch-action: pan-y; }
  /* 폰 쪽 번호: 누르는 곳 44px, 지금 쪽 양옆 번호는 빼고 [‹ 1 … 10 … 22 ›] 까지만 (arcade.js renderQuizPages) */
  .arcade .qb-pages button { min-width: 44px; height: 44px; }
}
/* 게시판 머리 [상태 탭 6 | 퀴즈 내기]: 게시판 칸 폭으로 정함 (화면 폭이 아니라 — PC 도 오른쪽 랭킹 칸 때문에 좁아짐)
   한 줄에 다 들어가면(660 이상) 탭은 조금 촘촘하게 + 버튼 오른쪽 끝. 좁으면 [퀴즈 내기] 맨 위 한 줄 → 탭 3칸씩 두 줄
   (예전엔 탭이 넘치거나 [퀴즈 내기]만 다음 줄 오른쪽에 혼자 떨어져 어긋나 보였음) */
.arcade .qb { container-type: inline-size; }
.arcade .panel .qb-intro { flex-wrap: nowrap; }
.arcade .panel .qb-intro .qb-tabs { flex-wrap: nowrap; }
.arcade .qb-intro .qb-tab { padding: 8px 10px 8px 22px; white-space: nowrap; }
.arcade .qb-intro .qb-tab::before { left: 9px; }
@container (max-width: 659px) {
  .arcade .panel .qb-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .arcade .panel .qb-intro .qb-make { order: -1; width: 100%; min-height: 42px; margin: 0; }
  .arcade .panel .qb-intro .qb-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .arcade .qb-intro .qb-tab { justify-content: center; min-width: 0; padding: 8px 6px 8px 20px; }
  .arcade .qb-intro .qb-tab::before { left: 8px; }
}

/* 던전 레이스 베팅표 (list.html #raceSlip): 넓은 화면은 [모험가 동그라미 6] | [걸 포인트 2×2] | [출발!] 한 줄 + 아래 얇은 줄(순위별 보상 · 요약)
   좁아지면 줄바꿈, 폰은 모험가 → 걸 포인트 → 출발 세 줄. 경주 중(.is-racing)에는 한 줄(내 모험가 · 건 포인트)로 접힘 */
.arcade .race-slip { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.arcade .slip-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.arcade .slip-main { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.arcade .slip-main .horses { flex: 1 1 340px; }
.arcade .slip-main .bet { display: grid; grid-template-columns: repeat(2, auto); gap: var(--sp-2); padding-left: var(--sp-4); border-left: 1px solid var(--line); }
.arcade .slip-main .bet .chip { justify-content: center; min-width: 64px; }
.arcade .race-slip #raceBet > span { display: none; } /* betChips 가 붙이는 '걸 포인트' 글자 (자리가 좁아 뺌, 읽기 프로그램은 aria-label) */
.arcade #raceGo { align-self: stretch; min-width: 120px; }
.arcade .slip-info { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.arcade .slip-sum { font-size: var(--fs-sm); color: var(--text); white-space: nowrap; }
.arcade .slip-sum b { color: var(--text-strong); }
.arcade .race-slip .msg:empty { display: none; }
.arcade .slip-live { display: none; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text); }
.arcade .slip-live img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
.arcade .race-slip.is-racing { padding: var(--sp-2) var(--sp-4); }
.arcade .race-slip.is-racing .slip-body { display: none; }
.arcade .race-slip.is-racing .slip-live { display: flex; }
@media (max-width: 760px) {
  .arcade .race-slip { padding: var(--sp-3); }
  .arcade .slip-main { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .arcade .slip-main .horses { flex: none; }
  .arcade .slip-main .bet { display: flex; flex-wrap: nowrap; gap: 6px; padding-left: 0; border-left: 0; }
  .arcade .slip-main .bet .chip { flex: 1; min-width: 0; padding-left: 0; padding-right: 0; }
  .arcade #raceGo { width: 100%; }
  .arcade .slip-info { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .arcade #racePay { flex-wrap: nowrap; gap: 4px; }
  .arcade #racePay .pay { flex: 1; justify-content: center; min-width: 0; padding-left: 4px; padding-right: 4px; font-size: var(--fs-2xs); white-space: nowrap; }
  .arcade .slip-sum { text-align: center; }
}

/* 아이콘 뽑기 확률표 (모달, js/arcade.js iconOdds) */
.odds__lead { margin: 0 0 14px; font-size: var(--fs-sm); color: var(--text-muted, #9aa); line-height: 1.6; }
.odds__sec + .odds__sec { margin-top: 16px; }
.odds__h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); font-size: var(--fs-md); }
.odds__h b { color: var(--rc); font-weight: 800; }
.odds__h span { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted, #9aa); font-variant-numeric: tabular-nums; }
.odds__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.odds__grid li { display: grid; justify-items: center; gap: 2px; padding: 6px 4px; border-radius: 10px; background: color-mix(in srgb, var(--rc) 9%, transparent); text-align: center; }
.odds__grid img { width: 40px; height: 40px; image-rendering: pixelated; opacity: .55; filter: grayscale(.6); }
.odds__grid li.is-own img { opacity: 1; filter: none; }
.odds__n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.odds__p { font-size: 11px; color: var(--rc); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .odds__grid { grid-template-columns: repeat(4, 1fr); } .odds__grid img { width: 34px; height: 34px; } }

/* 아이콘 뽑기 PC: 기계 목록을 왼쪽 세로 줄(작은 가로 카드)로, 본문은 오른쪽에 붙임. 폰 · 태블릿(1100px 아래)은 위에 가로 한 줄 그대로 */
@media (min-width: 1100px) {
  /* 기계 목록은 오른쪽 (게임 메뉴 레일이 왼쪽이라 둘 다 왼쪽이면 헷갈렸음) */
  .arcade .icon-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--sp-5); align-items: start; }
  .arcade .icon-wrap > .icon-side { grid-column: 2; grid-row: 1; }
  .arcade .icon-wrap > :not(.icon-side) { grid-column: 1; grid-row: 1; }
  .arcade .icon-side { margin-bottom: 0 !important; padding: var(--sp-4); position: sticky; top: 84px; }
  .arcade .icon-side > .row { margin-bottom: var(--sp-2) !important; }
  .arcade .icon-side #shelfAll, .arcade .icon-side .shelf-nav { display: none !important; }
  .arcade .icon-side .shelf { flex-direction: column; gap: var(--sp-2); overflow: visible; padding: 0 !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .arcade .icon-side .mc-card { width: 100%; display: grid; grid-template-columns: 50px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 10px 12px; text-align: left; border-radius: 12px; }
  .arcade .icon-side .mc-card:hover { transform: translateX(-2px); }
  .arcade .icon-side .mc-card .mini { grid-row: 1 / 3; zoom: .5; }
  .arcade .icon-side .mc-card .mc-name { align-self: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
  .arcade .icon-side .mc-card > .muted { align-self: start; font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .arcade .icon-side .mc-badge { top: 6px; right: 6px; }
  .arcade .icon-side .mc-card.on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--mc) 40%, transparent); }
}
/* 오른쪽 칸(뽑기 규칙)은 게임 설명 모달로 옮겨 보여서 본문을 한 칸으로 넓게. 운영자 기계 관리는 모달 (#adOpen → arcade.js) */
.arcade [data-panel="icon"] .grid2 { grid-template-columns: minmax(0, 1fr); }
.arcade [data-panel="icon"] .grid2 > :last-child { display: none; }
/* 기계 관리 모달 안: 모달이 .arcade 밖에 떠서 감싸는 칸에 .arcade 를 붙였음 → 게임장 바탕 격자 · 가로 자르기는 끔 */
.ad-modal.arcade { background-image: none; overflow-x: visible; }
.arcade .ad-body { display: flex; flex-direction: column; gap: var(--sp-3); }
/* 기계 그림 미리보기 (투명한 곳이 보이게 바둑판 무늬 대신 어두운 바탕) */
.arcade .ad-bg { display: grid; place-items: center; height: 96px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--fs-sm); overflow: hidden; }
.arcade .ad-bg img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* 게임 설명 모달 안 '이렇게 보여요' (화면 칸에서 옮겨 옴) */
.ar-guide .preview-post { display: flex; flex-direction: column; gap: var(--sp-3); }
.ar-guide .pv { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 10px; font-size: var(--fs-md); }

/* 랭킹 1등: 과하지 않게 — 옅은 금빛 바탕 · 왼쪽 금색 줄 · 아이콘 금테, 몇 초에 한 번 빛이 천천히 지나감 (움직임 줄이기 설정이면 빛은 안 지나감) */
.ac-rank > li:first-child:not(.ac-empty):not(.is-neg) { position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(227,179,92,.16), rgba(227,179,92,.04) 70%, transparent); box-shadow: inset 3px 0 0 var(--gold, #E3B35C); }
.ac-rank > li:first-child:not(.ac-empty):not(.is-neg) .av { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--gold, #E3B35C), 0 0 10px rgba(227,179,92,.45); }
.ac-rank > li:first-child:not(.ac-empty):not(.is-neg) .nm { color: var(--text-strong); }
.ac-rank > li:first-child:not(.ac-empty):not(.is-neg)::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,226,150,.22) 50%, transparent 65%); transform: translateX(-100%); animation: acTopShine 5s ease-in-out 1s infinite; }
@keyframes acTopShine { 0% { transform: translateX(-100%); } 30%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ac-rank > li:first-child:not(.ac-empty):not(.is-neg)::after { animation: none; display: none; } }

/* 가위바위보 PC · 태블릿: 기계가 세로로 너무 길던 것(777px) → 왼쪽 판(룰렛) · 오른쪽 조작(동전 · 크레딧 · 낼 손 버튼 세로) 좌우 배치. 폰은 위아래 그대로 */
@media (min-width: 900px) {
  .arcade .rpsm { max-width: 760px; display: grid; grid-template-columns: minmax(0, 1fr) 220px; grid-template-rows: auto auto 1fr auto; column-gap: var(--sp-4); }
  .arcade .rpsm__marquee { grid-column: 1 / -1; }
  .arcade .rpsm__board { grid-column: 1; grid-row: 2 / 4; }
  .arcade .rpsm__panel { grid-column: 2; grid-row: 2; flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .arcade .rpsm__panel > * { width: 100%; justify-content: center; }
  .arcade .rpsm__btns { grid-column: 2; grid-row: 3; grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); min-height: 0; }
  .arcade .rpsm__grille { grid-column: 1 / -1; }
  /* 낼 손 버튼 3개를 판 높이에 딱 맞게: 세로로 쌓던 것(판 아래로 59px 삐져나옴) → 한 줄짜리 판 (버튼 왼쪽 · 이름 오른쪽) */
  .arcade .rpsm__btn { flex-direction: row; justify-content: flex-start; gap: var(--sp-3); padding: 0 var(--sp-3); min-height: 0; border-radius: var(--radius); background: linear-gradient(180deg, #2E2F36, #1E1F24); border: 1px solid var(--line-strong); font-size: var(--fs-lg); }
  .arcade .rpsm__btn .rpsm__cap { width: 56px; height: 56px; flex: none; }
  .arcade .rpsm__btn.is-ready { border-color: var(--rpsm-lamp-yellow); }
  .arcade .rpsm__btn:hover:not([disabled]) { border-color: var(--ar-neon-gold); }
}
/* 램프 4개 크기 맞춤 ('졌다'만 작던 것) */
.arcade .rpsm__lamp { min-width: 4.4em; text-align: center; }

/* ---------- 아이콘 뽑기 · 포켓몬스터 기계 (arcade.js renderRegions · openDex) ---------- */
/* 공식 아트(200px, 바탕 투명)는 픽셀 그림이 아니라서 부드럽게 줄이고 잘리지 않게 */
img.pkimg { image-rendering:auto !important; object-fit:contain !important; }
/* 지방 고르기: PC 한 줄 9칸 · 태블릿 5칸 · 폰 3칸 */
.arcade .regions { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:6px; }
.arcade .reg { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:52px; padding:7px 2px; font:inherit; color:var(--text-sub); background:rgba(0,0,0,.2); border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:border-color .15s, background .15s; }
.arcade .reg b { font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--text-strong); }
.arcade .reg span { font-size:var(--fs-2xs); color:var(--muted); font-variant-numeric:tabular-nums; }
.arcade .regions.g5 { grid-template-columns:repeat(6,minmax(0,1fr)); } /* 케모노 프렌즈 분류 11곳: 6칸씩 두 줄, 긴 이름(파충류·양서류·어류)은 낱말 단위로 줄바꿈 */
.arcade .regions.g5 .reg b { text-align:center; word-break:keep-all; line-height:1.25; }
@media (max-width: 480px) { .arcade .regions.g5 { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* 폰: 두 칸씩 (이름이 길어 세 칸이면 두 줄로 꺾임) */
.arcade .reg:hover { border-color:color-mix(in srgb, var(--mc, #E3463C) 60%, transparent); }
.arcade .reg.on { border-color:var(--mc, #E3463C); background:color-mix(in srgb, var(--mc, #E3463C) 18%, transparent); box-shadow:0 0 0 2px color-mix(in srgb, var(--mc, #E3463C) 30%, transparent); }
.arcade .reg.on span { color:var(--text-sub); }
.arcade .reg:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.arcade #mRegions .mstrip-head { margin-bottom:var(--sp-2); }
/* 등급별 확률 5칸 (신화 있는 기계) + 포켓몬스터는 단계 · 종 수 */
.arcade .rates.r5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.arcade .rate small { display:block; margin-top:2px; font-size:var(--fs-2xs); color:var(--muted); }
.arcade .rate small i { font-style:normal; }
/* 내 아이콘 · 포켓몬스터 지방 칩 */
.arcade .my-reg { display:flex; flex-wrap:wrap; gap:6px; margin:calc(var(--sp-1) * -1) 0 var(--sp-3); }
.arcade .my-reg .chip { min-height:32px; padding:0 12px; font-size:var(--fs-xs); }
.arcade .my-reg .chip em { margin-left:5px; font-style:normal; font-size:var(--fs-2xs); color:var(--muted); font-variant-numeric:tabular-nums; }
.arcade .my-reg .chip[aria-pressed="true"] em { color:rgba(255,255,255,.8); }
@media (max-width: 900px) { .arcade .regions { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width: 480px) {
  .arcade .regions { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .arcade .rates.r5 { gap:4px; }
  .arcade .rates.r5 .rate { padding:8px 4px; text-align:center; }
  .arcade .rate small i { display:none; } /* 폰: 종 수만 */
}

/* 포켓몬 도감 창 (DND.modal lg, body 바로 아래라 .arcade 밖) */
.pkdex-dlg .dnd-dialog__body { padding-top:0; scrollbar-width:none; } /* 도감은 길어서 창 안에서 굴리지만 막대는 숨김 (휠 · 손가락으로 그대로 굴러감) */
.pkdex-dlg .dnd-dialog__body::-webkit-scrollbar { display:none; }
.pkdex__bar { position:sticky; top:0; z-index:3; margin:0 -28px; padding:12px 28px 10px; display:flex; flex-direction:column; gap:10px; background:var(--dnd-panel, #16161d); border-bottom:1px solid var(--line); } /* 카드 모서리 회원 수 동그라미(z-index 2)보다 위: 굴릴 때 띠 위로 튀어나오지 않게 */
.pkdex__sum { font-size:var(--fs-sm); color:var(--muted); font-variant-numeric:tabular-nums; }
.pkdex__sum b { color:var(--text-strong); }
.mi-dex__sum { margin:12px 0 4px; } /* 도감과 달리 위 띠(.pkdex__bar)가 없는 기계 아이콘 모달 */
.pkdex__nav { display:flex; align-items:center; gap:6px; }
.pkdex__tabs { flex:1; min-width:0; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth; }
.pkdex__tabs::-webkit-scrollbar { display:none; }
.pkdex__tab { flex:none; min-height:36px; padding:0 13px; font:inherit; font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-sub); background:transparent; border:1px solid var(--line-strong, var(--line)); border-radius:999px; cursor:pointer; white-space:nowrap; }
.pkdex__tab em { margin-left:5px; font-style:normal; font-size:var(--fs-2xs); font-weight:var(--fw-medium); color:var(--muted); font-variant-numeric:tabular-nums; }
.pkdex__tab[aria-pressed="true"] { color:#fff; background:#E3463C; border-color:#E3463C; }
.pkdex__tab[aria-pressed="true"] em { color:rgba(255,255,255,.85); }
.pkdex__arr { flex:none; width:34px; height:34px; display:grid; place-items:center; padding:0; color:var(--text-sub); background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:50%; cursor:pointer; }
.pkdex__arr .ico { width:16px; height:16px; }
.pkdex__arr:disabled { opacity:.3; cursor:default; }
.pkdex__opts { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pkdex__seg { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.pkdex__seg button { min-height:32px; padding:0 13px; font:inherit; font-size:var(--fs-xs); color:var(--text-sub); background:transparent; border:0; cursor:pointer; }
.pkdex__seg button[aria-pressed="true"] { color:var(--text-strong); background:rgba(255,255,255,.09); font-weight:var(--fw-semibold); }
.pkdex__own { display:inline-flex; align-items:center; gap:6px; min-height:32px; font-size:var(--fs-xs); color:var(--text-sub); cursor:pointer; }
.pkdex__reg { padding-top:14px; }
.pkdex__reg > h3 { margin:0 0 10px; display:flex; align-items:baseline; gap:8px; font-size:var(--fs-lg); color:var(--text-strong); }
.pkdex__reg > h3 span { font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--muted); font-variant-numeric:tabular-nums; }
.pkdex__reg > h3 .bar { margin-left:auto; align-self:center; width:120px; height:6px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.pkdex__reg > h3 .bar i { display:block; height:100%; background:#E3463C; }
.pkdex__none { margin:0 0 8px; font-size:var(--fs-sm); }
.pkdex__grade { margin:4px 0 14px; }
.pkdex__grade > h4 { margin:0 0 8px; display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); }
.pkdex__grade > h4::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--gc); box-shadow:0 0 8px var(--gc); }
.pkdex__grade > h4 b { color:var(--gc); }
.pkdex__grade > h4 span { font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--muted); }
.pkdex__grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.pk-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px 7px; background:rgba(0,0,0,.22); border:1px solid color-mix(in srgb, var(--gc) 30%, var(--line)); border-radius:12px; text-align:center; }
.pk-card { cursor:pointer; } /* 누르면 이 아이콘을 가진 회원 (arcade.js iconOwners) */
.pk-card.has-owner::before { top:4px; left:4px; } /* 카드 안쪽 모서리 */
.pk-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ic-own__head { display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-4); }
.ic-own__head img { flex:none; width:72px; height:72px; object-fit:contain; image-rendering:pixelated; border-radius:var(--radius); background:rgba(0,0,0,.25); box-shadow:0 0 0 2px var(--gc); }
.ic-own__head div { display:flex; flex-direction:column; gap:2px; }
.ic-own__head b { font-size:var(--fs-lg); color:var(--text-strong); }
.ic-own__r { font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--gc); }
.ic-own__mine { font-size:var(--fs-xs); color:var(--muted); }
.ic-own__h { margin:0 0 var(--sp-2); font-size:var(--fs-sm); color:var(--text-sub); }
.ic-own__h b { color:var(--text-strong); }
.ic-own__list { display:flex; flex-direction:column; gap:var(--sp-1); max-height:320px; margin:0; padding:0; overflow:auto; list-style:none; }
.ic-own__list li { display:flex; align-items:center; gap:var(--sp-2); min-height:40px; padding:var(--sp-1) var(--sp-2); font-size:var(--fs-sm); border-radius:var(--radius-sm); }
.ic-own__list li:nth-child(odd) { background:var(--hover); }
.ic-own__list .uicon { width:28px; height:28px; }
.ic-own__nick { color:var(--text-strong); }
.ic-own__cnt { margin-left:auto; font-weight:var(--fw-bold); color:var(--text-sub); }
.ic-own__on { padding:0 var(--sp-2); font-size:var(--fs-micro); font-weight:var(--fw-heavy); color:var(--accent); border:1px solid var(--accent-line); border-radius:999px; }
.ic-own__cnt + .ic-own__on { margin-left:var(--sp-2); }
.ic-own__list li > .lvp2 + .ic-own__on { margin-left:auto; }
.pk-card .im { width:56px; height:56px; border-radius:50%; background:#1D1F26; box-shadow:0 0 0 2px var(--gc); }
.pk-card img { display:block; width:100%; height:100%; padding:2px; border-radius:50%; }
.pk-card:not(.own) img { filter:grayscale(.9) brightness(.45); }
.pk-card:not(.own) .im { box-shadow:0 0 0 2px color-mix(in srgb, var(--gc) 40%, transparent); }
.pk-card .no { margin-top:4px; font-family:var(--ar-font); font-size:13px; letter-spacing:.04em; line-height:1; color:var(--muted); }
.pk-card .nm { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--text-strong); }
.pk-card:not(.own) .nm { color:var(--text-sub); }
.pk-card .tg { font-size:10px; color:var(--gc); }
.pk-card .x { position:absolute; top:6px; right:6px; min-width:20px; padding:1px 5px; font-size:10px; font-weight:800; color:#0b0b10; background:var(--gc); border-radius:999px; }
@media (max-width: 600px) {
  .pkdex__bar { margin:0 -20px; padding:10px 20px; }
  .pkdex__reg > h3 .bar { width:64px; }
  .pkdex__grid { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; }
  .pk-card .im { width:48px; height:48px; }
}

/* 랭킹 마이너스 기록 (arcade-common.js fold): 돌이 깨진 듯한 회색 줄. 가장 많이 잃은 사람은 '고인' 느낌 (흑백 아이콘 · 머리 위 고리 · R.I.P) */
.ac-rank > li.is-neg { background: linear-gradient(90deg, rgba(150,150,160,.10), rgba(150,150,160,.03)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M70 0l6 12-9 7 11 9-4 12M76 12l14-3M67 19l-12 4M78 28l16 5' fill='none' stroke='rgba(255,255,255,.13)' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 8px center / auto 100% no-repeat; }
.ac-rank > li.is-neg .av { filter: grayscale(1) brightness(.85) contrast(1.05); }
.ac-rank > li.is-neg .nm, .ac-rank > li.is-neg .vl { color: #9a9ca4; }
.ac-rank > li.is-neg .no { color: #6f7179 !important; }
.ac-rank > li.is-worst { opacity: .82; }
.ac-rank > li.is-worst .av { position: relative; filter: grayscale(1) brightness(.75); box-shadow: 0 0 0 1.5px var(--bg), 0 -3px 0 1px rgba(235,235,245,.55); } /* 아이콘 위쪽 흰 고리 */
.ac-rank > li.is-worst .nm::after { content: "R.I.P"; margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #c9cad0; background: rgba(120,122,130,.28); border: 1px solid rgba(200,200,210,.25); vertical-align: 1px; }
.ac-rank > li.is-worst.is-me .nm::after { content: "R.I.P · 나"; }
/* 전체 보기 · 도감 달성도 (arcade.js dexGoal): 창 오른쪽 위. 막대 눈금 = 다음 목표 10 · 25 · 50 · 75% */
.pkdex__head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.mi-dex__head { display:flex; justify-content:flex-end; margin:12px 0 6px; }
.dexgoal { margin-left:auto; display:flex; flex-direction:column; gap:5px; width:240px; max-width:100%; }
.dexgoal__top { display:flex; align-items:baseline; gap:8px; font-size:var(--fs-xs); color:var(--muted); font-variant-numeric:tabular-nums; }
.dexgoal__top b { font-size:20px; font-weight:800; line-height:1; color:var(--text-strong); }
.dexgoal__top em { margin-left:auto; font-style:normal; }
.dexgoal__bar { position:relative; display:block; height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.dexgoal__bar > i { position:absolute; inset:0 auto 0 0; border-radius:999px; background:linear-gradient(90deg, #8B5CF6, #E879F9); }
.dexgoal__bar s { position:absolute; top:0; bottom:0; z-index:1; width:2px; margin-left:-1px; background:var(--dnd-panel, #16161d); }
.dexgoal small { font-size:var(--fs-2xs); color:var(--muted); text-align:right; }
.dexgoal small b { color:var(--text-sub); }
@media (max-width: 600px) { .dexgoal { width:100%; } }

/* 아이콘 교환 (arcade.js openTradeForm · openTrades, IconTradeService) */
.arcade .trade-open { display:inline-flex; align-items:center; gap:6px; }
.trade-badge { min-width:18px; height:18px; padding:0 5px; display:inline-grid; place-items:center; font-size:11px; font-weight:800; color:#fff; background:#E3463C; border-radius:999px; }
.ic-own__trade { margin-left:var(--sp-2); min-height:30px; padding:0 10px; font:inherit; font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--accent); background:transparent; border:1px solid var(--accent-line); border-radius:999px; cursor:pointer; white-space:nowrap; }
.ic-own__trade:hover { background:var(--accent-soft, rgba(139,92,246,.12)); }
.ic-own__list li > .ic-own__trade:first-of-type { margin-left:auto; }
.ic-own__cnt ~ .ic-own__trade, .ic-own__on ~ .ic-own__trade { margin-left:var(--sp-2); }
.ic-own__tip { margin:var(--sp-3) 0 0; font-size:var(--fs-xs); }
.trade-form, .trade-list { display:flex; flex-direction:column; gap:var(--sp-4); }
.tr-pair { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--sp-3); }
.tr-pair > div { display:flex; flex-direction:column; align-items:center; gap:6px; padding:var(--sp-3); background:rgba(0,0,0,.22); border:1px solid var(--line); border-radius:12px; text-align:center; }
.tr-pair small { font-size:var(--fs-2xs); color:var(--muted); }
.tr-arrow { font-size:22px; color:var(--accent); }
.tr-ic { display:flex; flex-direction:column; align-items:center; gap:4px; }
.tr-ic img { width:56px; height:56px; padding:2px; object-fit:contain; border-radius:50%; background:#1D1F26; box-shadow:0 0 0 2px var(--gc, var(--line)); }
.tr-ic em { font-style:normal; font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-strong); }
.tr-ic--empty { width:56px; height:56px; justify-content:center; border:1px dashed var(--line-strong); border-radius:50%; }
.tr-ic--empty em { font-size:10px; color:var(--muted); font-weight:500; }
.tr-who { font-size:var(--fs-xs); color:var(--text-sub); }
.tr-h { margin:0; font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-strong); }
.tr-h span { font-weight:400; font-size:var(--fs-xs); }
.tr-pick { max-height:260px; overflow:auto; }
.tr-pick .pk-card.on { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.tr-none { margin:0; padding:var(--sp-3); font-size:var(--fs-sm); color:var(--muted); background:rgba(255,255,255,.03); border-radius:10px; }
.tr-act { display:flex; justify-content:flex-end; gap:var(--sp-2); }
.tr-rule { margin:0; font-size:var(--fs-xs); }
.tr-sec h4 { margin:0 0 var(--sp-2); font-size:var(--fs-md, 15px); color:var(--text-strong); }
.tr-sec h4 span { font-size:var(--fs-xs); font-weight:400; }
.tr-rows { display:flex; flex-direction:column; gap:var(--sp-3); margin:0; padding:0; list-style:none; }
.tr-row { display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-3); border:1px solid var(--line); border-radius:12px; }
.tr-row.is-wait { border-color:var(--accent-line); }
.tr-row__who { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-sm); }
.tr-row__who .uicon { width:28px; height:28px; }
.tr-row__who b { color:var(--text-strong); }
.tr-st { margin-left:auto; padding:2px 9px; font-size:var(--fs-2xs); font-weight:700; border-radius:999px; color:var(--muted); background:rgba(255,255,255,.06); }
.tr-st--pending { color:#fcd27a; background:rgba(250,178,25,.12); }
.tr-st--accepted { color:#7ee07e; background:rgba(12,163,12,.14); }
.tr-st--rejected, .tr-st--failed { color:#f19a9a; background:rgba(208,59,59,.15); }
.tr-pair--sm > div { padding:var(--sp-2); }
.tr-pair--sm .tr-ic img { width:44px; height:44px; }
.tr-reason { margin:0; font-size:var(--fs-sm); color:var(--text-sub); word-break:break-word; }
@media (max-width: 600px) { .tr-pair { gap:var(--sp-2); } .tr-ic img { width:48px; height:48px; } }
/* 가위바위보 폰 · 좁은 화면: 동전 넣기 · CREDIT 반반 같은 높이 (폭이 제각각이던 것) */
@media (max-width: 899px) {
  .arcade .rpsm__panel { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .arcade .rpsm__slot, .arcade .rpsm__credit { justify-content: center; align-items: center; min-height: 48px; }
  .arcade .rpsm__left { grid-column: 1 / -1; order: 3; margin: 0; text-align: center; } /* 로그인하면 보이는 남은 판 수: 두 칸 아래 한 줄 */
}