/* 게임장 숫자야구 (arcade/list.html data-panel="baseball", 동작은 js/arcade.js '숫자야구')
시안 docs/baseball-sian/index.html 을 옮김: 야간 구장 도트 무대(고블린 투수 · 드워프 타자 · 오크 포수) → 전광판 10칸 → 숫자 칸 · 키패드
- 그림은 static/img/arcade/baseball/ (park.png 400x150 무대, bat · pit · cat 인물 프레임, 검은 배경 없는 누끼 PNG)
- 무대 위 자리(램프 · 광고판 · 인물 발)는 무대 그림 좌표(400x150)를 % 로 그대로 씀
- 공통 클래스(.chip .pick .msg .new 등)와 겹치지 않게 모두 bb- 를 붙임 */
/* ---------- 숫자야구 전용 색 (arcade.css :root 와 같은 방식) ---------- */
:root {
--bb-s: var(--hud-yellow); --bb-s-rgb: var(--hud-yellow-rgb); /* 판정 램프는 실제 야구장 순서: S 노랑 · B 초록 · O 빨강 */
--bb-b: var(--ui-success); --bb-b-rgb: var(--ui-success-rgb);
--bb-o: var(--new); --bb-o-rgb: var(--new-rgb);
--bb-b-shadow: #0F3A22; --bb-o-shadow: #3A0D0D; /* 가운데 큰 글씨 그림자 */
--bb-night: #07081A; /* 무대 그림을 불러오기 전 밤하늘 */
--bb-cell: #15151B; --bb-cell-off: #3A3A44; /* 전광판 칸 · 빈 칸 글씨 */
--bb-lamp-off: #26252C;
--bb-slot-1: #1C1C22; --bb-slot-2: #17171C; /* 숫자 칸 (넘김판 위아래) */
--bb-key: #24242B; --bb-key-hover: #2D2D36; --bb-key-off: #1A1A20; --bb-key-off-text: #4A4A55;
--bb-start-hover: #FFDC66;
--bb-start-edge: #B08A12; /* 폰 동그란 시작 버튼 아래 두께 (오락기 버튼) */
--bb-on-primary: #FFFFFF; /* 보라 [던지기] 글씨 (.btn--primary 와 같은 흰색) */
--bb-ball-1: #FFFFFF; --bb-ball-2: #ECE8DD; --bb-ball-3: #B9B4A6; --bb-seam: #D0342C;
--bb-ad-red: #D7141A; /* 광고판 빨간 글자 */
--bb-shade-rgb: 0,0,0; /* 그림자 · 테두리 (rgba 로) */
--bb-white-rgb: 255,255,255; /* 빛 · 잔상 (rgba 로) */
}
.arcade .bb { display:flex; flex-direction:column; min-width:0; overflow:hidden; padding:0; background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:var(--radius-lg); }
/* ---------- 1. 무대: 야간 야구장 도트 그림 ----------
무대 안 글자(광고판 · 가운데 결과)는 무대 폭에 맞춰 커지고 작아져야 해서 글자 크기를 무대 폭 비율(cqw)로 씀 (사이트 크기 변수의 예외) */
.arcade .bb-stage { position:relative; aspect-ratio:400 / 150; overflow:hidden; isolation:isolate; container-type:inline-size;
background:var(--bb-night) url(/img/arcade/baseball/park.png) 0 0 / 100% 100% no-repeat; image-rendering:pixelated; }
/* 전광판 램프: 그림 속 꺼진 램프(5x5) 위에 겹쳐 켬 */
.arcade .bb-plamp { position:absolute; width:1.75%; height:4.667%; border-radius:50%; z-index:1; transition:background .12s, box-shadow .12s; }
.arcade .bb-plamp.on.s { background:var(--bb-s); box-shadow:0 0 1.4cqw rgba(var(--bb-s-rgb),.95); }
.arcade .bb-plamp.on.b { background:var(--bb-b); box-shadow:0 0 1.4cqw rgba(var(--bb-b-rgb),.95); }
.arcade .bb-plamp.on.o { background:var(--bb-o); box-shadow:0 0 1.4cqw rgba(var(--bb-o-rgb),.95); }
/* 광고판 글자 (그림 속 판 위에 겹침). 글자만, 로고 없음 */
.arcade .bb-ad { position:absolute; z-index:1; display:grid; place-items:center; font-weight:var(--fw-black); font-size:1.5cqw; line-height:var(--lh-none); letter-spacing:var(--ls-tight); white-space:nowrap; color:var(--bb-ball-1); image-rendering:auto; }
.arcade .bb-ad.red { color:var(--bb-ad-red); }
/* 인물: 프레임마다 ![]()
를 하나씩 두고 켜고 끔 (js 가 크기 · 자리를 정함) */
.arcade .bb-actor { position:absolute; z-index:2; }
.arcade .bb-actor img { image-rendering:pixelated; position:absolute; bottom:0; display:block; max-width:none; height:auto; transform-origin:bottom center; animation:bbBreathe 1.8s ease-in-out infinite; }
.arcade #bbPit img { animation-delay:-.7s; }
@keyframes bbBreathe { 50% { translate:0 -.22cqw; } } /* 가만히 있을 때 숨쉬듯 살짝 */
/* 발 기준 (그림 좌표): 타자 뒷발 79,130 · 포수 58,136 (타자보다 앞에 그림) · 투수 축발 356,131 */
.arcade #bbBat { left:19.75%; top:86.667%; z-index:2; }
.arcade #bbCat { left:14.5%; top:90.667%; z-index:3; }
.arcade #bbPit { left:89%; top:87.333%; }
.arcade .bb-actor .bb-shadow { position:absolute; top:-.8cqw; height:1.6cqw; border-radius:50%; background:radial-gradient(closest-side, rgba(var(--bb-shade-rgb),.7), rgba(var(--bb-shade-rgb),.35) 60%, rgba(var(--bb-shade-rgb),0)); pointer-events:none; }
/* 야구공: 흰 공 + 빨간 실밥. 어두운 테두리로 광고판 위에서도 보이게 */
.arcade .bb-ball { position:absolute; z-index:4; left:0; top:0; width:1.6cqw; height:1.6cqw; margin:-.8cqw 0 0 -.8cqw; border-radius:50%; pointer-events:none; opacity:0;
background:radial-gradient(circle at 35% 30%, var(--bb-ball-1), var(--bb-ball-2) 55%, var(--bb-ball-3)); box-shadow:0 0 0 1px rgba(var(--bb-shade-rgb),.55), 0 0 8px rgba(var(--bb-white-rgb),.45); }
.arcade .bb-ball::before, .arcade .bb-ball::after { content:""; position:absolute; top:15%; bottom:15%; width:40%; border:max(1px, .22cqw) dashed var(--bb-seam); border-top:0; border-bottom:0; border-radius:50%; }
.arcade .bb-ball::before { left:-12%; border-left:0; }
.arcade .bb-ball::after { right:-12%; border-right:0; }
.arcade .bb-ball.blur { box-shadow:0 0 8px rgba(var(--bb-white-rgb),.45), 1.6cqw 0 1cqw -.3cqw rgba(var(--bb-white-rgb),.35), 3.2cqw 0 1.2cqw -.5cqw rgba(var(--bb-white-rgb),.18); }
/* 공 그림자 (땅) */
.arcade .bb-bshadow { position:absolute; z-index:1; left:0; top:0; width:2.6cqw; height:.8cqw; margin:-.4cqw 0 0 -1.3cqw; border-radius:50%; background:rgba(var(--bb-shade-rgb),.45); pointer-events:none; opacity:0; }
/* 맞는 순간 번쩍 · 고리 */
.arcade .bb-hitfx { position:absolute; z-index:5; left:0; top:0; width:12cqw; height:12cqw; margin:-6cqw 0 0 -6cqw; pointer-events:none; opacity:0;
background:radial-gradient(circle, var(--bb-ball-1) 0 12%, rgba(var(--hud-yellow-rgb),.9) 22%, rgba(var(--hud-yellow-rgb),0) 60%);
clip-path:polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%); }
.arcade .bb-hitfx.ring { clip-path:none; border-radius:50%; background:radial-gradient(circle, transparent 55%, rgba(var(--bb-white-rgb),.9) 58%, rgba(var(--bb-white-rgb),0) 70%); }
/* 투구 팔 잔상: 어깨를 축으로 팔이 머리 위를 넘어 앞으로 (시트에 '던지는 순간' 프레임이 없어 그 사이를 이어 줌) */
.arcade .bb-whip { position:absolute; z-index:3; left:0; top:0; border-radius:50%; pointer-events:none; opacity:0;
background:conic-gradient(from 0deg, rgba(var(--bb-white-rgb),.95) 0deg, rgba(var(--bb-white-rgb),.45) 35deg, rgba(var(--bb-white-rgb),0) 110deg, transparent 360deg);
-webkit-mask:radial-gradient(closest-side, transparent 58%, #000 64%, #000 96%, transparent 100%); mask:radial-gradient(closest-side, transparent 58%, #000 64%, #000 96%, transparent 100%); }
/* 불똥 (도트처럼 네모) · 관중석 플래시 · 홈런 꽃가루 */
.arcade .bb-chip { position:absolute; z-index:5; width:.9cqw; height:.9cqw; pointer-events:none; }
.arcade .bb-bulb { position:absolute; z-index:1; width:.5cqw; height:.5cqw; background:var(--bb-ball-1); box-shadow:0 0 1cqw var(--bb-ball-1); pointer-events:none; }
.arcade .bb-spark { position:absolute; z-index:4; width:6px; height:6px; border-radius:1px; pointer-events:none; }
/* 가운데 결과 글씨 */
.arcade .bb-call { position:absolute; left:50%; top:50%; z-index:5; translate:-50% -50%; font-family:var(--ar-font); font-size:10cqw; line-height:var(--lh-none); letter-spacing:var(--ls-arcade); white-space:nowrap; pointer-events:none; opacity:0; }
.arcade .bb-call.show { animation:bbCallPop 1.3s cubic-bezier(.2,.8,.2,1) both; }
.arcade .bb-call.stay { opacity:1; } /* 판이 끝난 뒤 (홈런 · GAME OVER) 계속 보임 */
.arcade .bb-call.s { color:var(--bb-s); text-shadow:4px 4px 0 var(--hud-shadow); }
.arcade .bb-call.b { color:var(--bb-b); text-shadow:4px 4px 0 var(--bb-b-shadow); }
.arcade .bb-call.o { color:var(--bb-o); text-shadow:4px 4px 0 var(--bb-o-shadow); }
.arcade .bb-call.hr { color:var(--hud-yellow); text-shadow:4px 4px 0 var(--hud-shadow), 0 0 40px rgba(var(--hud-yellow-rgb),.6); font-size:14cqw; }
.arcade .bb-call.idle { opacity:1; font-size:5cqw; color:var(--text-strong); text-shadow:0 2px 0 rgb(var(--bb-shade-rgb)); animation:bbBlink 1.2s steps(2) infinite; }
@keyframes bbCallPop { 0% { opacity:0; transform:scale(.4); } 18% { opacity:1; transform:scale(1.12); } 30% { transform:scale(1); } 80% { opacity:1; } 100% { opacity:0; } }
@keyframes bbBlink { 50% { opacity:.35; } }
/* ---------- 2. 전광판: 10회 칸, 위에 보상 구간 ---------- */
.arcade .bb-board { padding:var(--sp-4) var(--sp-5) var(--sp-5); background:var(--panel-deep); border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line); }
.arcade .bb-board__head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-3); }
.arcade .bb-board__head h3 { margin:0; font-family:var(--ar-font); font-size:var(--fs-xl); font-weight:var(--fw-regular); letter-spacing:var(--ls-arcade); color:var(--text-sub); }
.arcade .bb-board__head h3 b { margin-left:var(--sp-2); color:var(--hud-yellow); font-weight:var(--fw-regular); }
.arcade .bb-left { font-size:var(--fs-sm); color:var(--text-sub); }
.arcade .bb-left b { color:var(--text-strong); font-weight:var(--fw-bold); }
.arcade .bb-tiers { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.arcade .bb-tier { flex:var(--n) 1 0; min-width:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.arcade .bb-tier__lbl { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-xs); font-weight:var(--fw-bold); color:var(--muted); }
.arcade .bb-tier__lbl::after { content:""; flex:1; height:1px; background:var(--line-strong); }
.arcade .bb-tier.now .bb-tier__lbl { color:var(--hud-yellow); }
.arcade .bb-tier.now .bb-tier__lbl::after { background:rgba(var(--hud-yellow-rgb),.5); }
.arcade .bb-tier.gone .bb-tier__lbl { text-decoration:line-through; }
.arcade .bb-tier__cells { display:grid; grid-template-columns:repeat(var(--n), minmax(0,1fr)); gap:var(--sp-2); }
.arcade .bb-inn { display:flex; flex-direction:column; align-items:center; gap:var(--sp-1); padding:var(--sp-2) var(--sp-1); border-radius:var(--radius-sm); background:var(--bb-cell); border:1px solid var(--line); min-width:0; }
.arcade .bb-inn i { font-style:normal; font-family:var(--ar-font); font-size:var(--fs-sm); color:var(--muted); line-height:var(--lh-none); }
.arcade .bb-inn .g { font-family:var(--ar-font); font-size:var(--fs-bb-inn); line-height:var(--lh-none); letter-spacing:var(--ls-arcade); color:var(--text-strong); }
.arcade .bb-inn .r { display:flex; gap:var(--sp-1); min-height:18px; align-items:center; font-family:var(--ar-font); font-size:var(--fs-md); line-height:var(--lh-none); }
.arcade .bb-inn .r .s { color:var(--bb-s); }
.arcade .bb-inn .r .b { color:var(--bb-b); }
.arcade .bb-inn .r .o { color:var(--bb-o); }
.arcade .bb-inn.empty .g { color:var(--bb-cell-off); }
.arcade .bb-inn.cur { border-color:var(--primary); background:rgba(var(--focus-rgb),.12); box-shadow:0 0 0 1px var(--primary) inset; }
.arcade .bb-inn.cur i { color:var(--accent); }
.arcade .bb-inn.hit { border-color:var(--hud-yellow); background:rgba(var(--hud-yellow-rgb),.12); }
.arcade .bb-inn.in { animation:bbInnIn .4s ease both; }
@keyframes bbInnIn { from { transform:translateY(-6px); opacity:0; } }
/* ---------- 3. 입력: 왼쪽 숫자 칸 · 안내 | 오른쪽 키패드 · 버튼 ---------- */
.arcade .bb-ctrl { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:var(--sp-6); padding:var(--sp-6) var(--sp-5); align-items:center; }
.arcade .bb-pick { display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); min-width:0; }
.arcade .bb-slots { display:flex; gap:var(--sp-3); }
.arcade .bb-slot { position:relative; width:84px; height:104px; display:grid; place-items:center; font-family:var(--ar-font); font-size:var(--fs-bb-slot); line-height:var(--lh-none); color:var(--hud-yellow); background:linear-gradient(180deg, var(--bb-slot-1) 0 50%, var(--bb-slot-2) 50%); border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:inset 0 2px 6px rgba(var(--bb-shade-rgb),.6); }
.arcade .bb-slot::after { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(var(--bb-shade-rgb),.6); }
.arcade .bb-slot.next { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary) inset; }
.arcade .bb-slot.next::before { content:""; position:absolute; bottom:var(--sp-3); left:50%; width:26px; height:3px; translate:-50% 0; background:var(--accent); animation:bbBlink 1s steps(2) infinite; }
.arcade .bb-slot.fill { animation:bbFlip .22s ease; }
@keyframes bbFlip { 0% { transform:rotateX(80deg); } 100% { transform:none; } }
.arcade .bb-msg { min-height:24px; margin:0; font-size:var(--fs-lg); font-weight:var(--fw-medium); color:var(--text); text-align:center; line-height:var(--lh-snug); }
.arcade .bb-prize { display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); font-size:var(--fs-sm); color:var(--text-sub); background:var(--surface); border-radius:999px; }
.arcade .bb-prize[hidden] { display:none; }
.arcade .bb-prize b { font-family:var(--ar-font); font-size:var(--fs-xl); line-height:var(--lh-none); color:var(--hud-yellow); font-weight:var(--fw-regular); }
.arcade .bb-pad { display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; }
.arcade .bb-keys { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-2); }
.arcade .bb-key { height:56px; display:grid; place-items:center; padding:0; font-family:var(--ar-font); font-size:var(--fs-bb-key); line-height:var(--lh-none); color:var(--text-strong); background:var(--bb-key); border:1px solid var(--line-strong); border-bottom-width:3px; border-radius:var(--radius); cursor:pointer; transition:background .12s, border-color .12s; }
.arcade .bb-key:hover:not(:disabled) { background:var(--bb-key-hover); border-color:var(--accent-line); }
.arcade .bb-key:active:not(:disabled) { border-bottom-width:1px; padding-top:2px; }
.arcade .bb-key:disabled { color:var(--bb-key-off-text); background:var(--bb-key-off); border-color:var(--line); cursor:default; }
.arcade .bb-key.used:disabled { color:var(--hud-yellow); background:rgba(var(--hud-yellow-rgb),.08); border-color:rgba(var(--hud-yellow-rgb),.35); }
.arcade .bb-acts { display:grid; grid-template-columns:1fr 2fr; gap:var(--sp-2); }
.arcade .bb-act { height:52px; border-radius:var(--radius); font-family:inherit; font-size:var(--fs-lg); font-weight:var(--fw-bold); cursor:pointer; border:1px solid transparent; }
.arcade .bb-act.del { color:var(--text); background:var(--surface-2); border-color:var(--line-strong); }
.arcade .bb-act.del:hover:not(:disabled) { background:var(--ui-raise); }
.arcade .bb-act.throw { color:var(--bb-on-primary); background:var(--primary); }
.arcade .bb-act.throw:hover:not(:disabled) { background:var(--primary-hover); }
.arcade .bb-act.start { grid-column:1 / -1; color:var(--hud-ink); background:var(--hud-yellow); }
.arcade .bb-act.start:hover:not(:disabled) { background:var(--bb-start-hover); }
.arcade .bb-act:disabled { color:var(--muted); background:var(--surface); border-color:var(--line); cursor:default; }
.arcade .bb-key:focus-visible, .arcade .bb-act:focus-visible { outline:3px solid rgba(var(--focus-rgb),.7); outline-offset:2px; }
/* 오른쪽 규칙 카드의 판정 점. 이 카드는 게임 설명 창(ⓘ, arcade-common.js 가 body 에 복사)에서 보이므로 .arcade 밖에서도 먹게 둠 */
.bb-rule-lamp { display:inline-block; width:12px; height:12px; margin-right:var(--sp-2); border-radius:50%; vertical-align:-1px; }
.bb-rule-lamp.s { background:var(--bb-s); box-shadow:0 0 8px rgba(var(--bb-s-rgb),.8); }
.bb-rule-lamp.b { background:var(--bb-b); box-shadow:0 0 8px rgba(var(--bb-b-rgb),.8); }
.bb-rule-lamp.o { background:var(--bb-o); box-shadow:0 0 8px rgba(var(--bb-o-rgb),.8); }
/* ---------- 폭 줄이기 (사이트 기준 1180 · 480) ----------
1180 아래는 오른쪽 랭킹 칸(320) 때문에 게임 칸이 좁아 숫자 칸과 키패드가 겹침 → 위아래로 */
@media (max-width: 1180px) {
.arcade .bb-ctrl { grid-template-columns:minmax(0,1fr); gap:var(--sp-5); }
.arcade .bb-pad { max-width:420px; width:100%; margin:0 auto; }
}
@media (max-width: 480px) {
/* 폰: 무대 · 전광판 · 숫자 칸 · 키패드 · [던지기] 가 한 화면에 들어가게 줄임 (예전엔 키패드를 누르다 전광판 결과를 보려면 위아래로 스크롤해야 했음).
누르는 곳(숫자 · 삭제 · 던지기)은 48px 로 44px 이상 유지 */
:root { --fs-bb-slot: 48px; --fs-bb-inn: 18px; --fs-bb-key: 26px; }
.arcade .bb-board { padding:var(--sp-2) var(--sp-3); }
.arcade .bb-board__head { margin-bottom:var(--sp-2); }
.arcade .bb-board__head h3 { font-size:var(--fs-lg); }
.arcade .bb-tiers { row-gap:var(--sp-2); }
.arcade .bb-tier { gap:var(--sp-1); flex:0 0 calc(var(--n) * 20% - var(--sp-2) * (5 - var(--n)) / 5); } /* 한 줄에 5칸씩 두 줄 */
.arcade .bb-tier__lbl { font-size:var(--fs-2xs); }
.arcade .bb-inn { gap:var(--sp-1); padding:var(--sp-1); }
.arcade .bb-inn i { font-size:var(--fs-2xs); }
.arcade .bb-inn .r { min-height:14px; font-size:var(--fs-sm); }
.arcade .bb-ctrl { display:block; padding:var(--sp-3) var(--sp-4) var(--sp-4); }
.arcade .bb-slot { width:clamp(48px, 15vw, 60px); height:68px; } /* 아주 좁은 폰(320)에서도 옆 [시작] 자리가 남게 */
.arcade .bb-slot.next::before { bottom:var(--sp-2); }
.arcade .bb-prize { display:none; } /* 지금 보상은 전광판 구간 이름(노랑)으로 보임 */
/* 시작 전 · 끝난 뒤: [숫자 3칸][참가비 내고 시작] 한 줄 (키패드는 숨김). [시작]은 arcade.js 가 폰에서만 이 줄로 옮김 */
.arcade .bb-pick { display:grid; grid-template-columns:auto auto; justify-content:center; align-items:center; gap:var(--sp-2) var(--sp-4); }
.arcade .bb-pick .bb-slots { gap:var(--sp-2); }
.arcade .bb-pick .bb-msg { grid-column:1 / -1; font-size:var(--fs-md); }
/* [시작] = 동그란 오락기 버튼: 동전 아이콘 + 참가비 한 줄 (arcade.js 가 폰에서 글자를 줄임) */
.arcade .bb-pick .bb-act.start { grid-column:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-1); width:68px; height:68px; padding:0; font-family:var(--ar-font); font-size:var(--fs-md); font-weight:var(--fw-regular); letter-spacing:var(--ls-arcade); line-height:var(--lh-none); white-space:nowrap; border-radius:50%; border:0; border-bottom:4px solid var(--bb-start-edge); }
.arcade .bb-pick .bb-act.start:active:not(:disabled) { border-bottom-width:1px; transform:translateY(3px); }
.arcade .bb-pick .bb-act.start:disabled { border-bottom-color:var(--line); }
.arcade .bb-pick .bb-act.start span { font-size:var(--fs-sm); }
.arcade .bb.is-playing .bb-pick .bb-slots { grid-column:1 / -1; justify-self:center; }
/* 하는 동안: 키패드 · [삭제] · [던지기] 가 폰 자판처럼 화면 아래에 붙어 올라옴 (화면이 짧아도 늘 누를 수 있게, 위쪽은 스크롤해서 봄)
1 2 3 4 5 / 6 7 8 9 [삭제] / [던지기] — 칸 묶음(.bb-keys · .bb-acts)을 풀어 한 격자에 */
.arcade .bb-pad { position:fixed; left:0; right:0; bottom:0; z-index:var(--z-bar); display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--sp-2); max-width:none; margin:0; padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); background:var(--surface-solid); border-top:1px solid var(--line-strong); box-shadow:0 -16px 32px -12px rgba(var(--scrim-rgb), .8);
transform:translateY(105%); visibility:hidden; transition:transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s .25s; }
.arcade .bb.is-playing .bb-pad { transform:none; visibility:visible; transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.arcade .bb-pad .bb-keys, .arcade .bb-pad .bb-acts { display:contents; }
.arcade .bb-pad .bb-act.del { grid-column:5; grid-row:2; }
.arcade .bb-pad .bb-act.throw { grid-column:1 / -1; grid-row:3; }
.arcade .bb-key, .arcade .bb-act { height:48px; }
body:has([data-panel="baseball"]:not(.hidden) .bb.is-playing) { padding-bottom:calc(200px + env(safe-area-inset-bottom, 0px)); } /* 아래 키패드에 끝 내용이 가리지 않게 */
}
@media (max-width: 480px) and (prefers-reduced-motion: reduce) { .arcade .bb-pad, .arcade .bb.is-playing .bb-pad { transition:none; } }
@media (prefers-reduced-motion: reduce) { .arcade .bb-slot.next::before, .arcade .bb-call.idle, .arcade .bb-actor img { animation:none; } }