:root {
  --bg: #0d1320; --panel-bg: #172033; --line: #2a3650; --txt: #eef2fa; --dim: #9aa7bf;
  --accent: #ffd84a; --red: #ef4b4b; --blue: #4aa8ff; --green: #44c76e;
  --bs: 1;            /* 버튼 크기 배율(설정) */
  --lift: 0px;        /* 조작부 높이 보정(설정) */
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --vw: 1vw;
  --panel: calc(clamp(128px, calc(23 * var(--vw)), 210px) * var(--bs));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: var(--bg); color: var(--txt);
  font: 15px/1.4 "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .35; cursor: default; }
[hidden] { display: none !important; }
#app { position: fixed; inset: 0; }
.scroll { overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

#boot { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--dim); }
#boot button { margin-top: 12px; padding: 8px 18px; background: var(--accent); color: #111; border-radius: 8px; font-weight: 700; }

/* ── 메뉴 UI ───────────────────────────── */
#ui { position: absolute; inset: 0; padding: calc(var(--sat) + 10px) calc(var(--sar) + 16px) calc(var(--sab) + 12px) calc(var(--sal) + 16px);
  background: radial-gradient(120% 90% at 50% 0%, #1b2a48 0%, #0d1320 70%); }
.top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.top h2 { margin: 0; font-size: 19px; flex: 1; }
.btn { padding: 9px 16px; border-radius: 10px; background: var(--panel-bg); border: 1px solid var(--line); font-weight: 700; min-height: 40px; }
.btn.pri { background: var(--accent); color: #17130a; border-color: #b6941c; box-shadow: 0 3px 0 #8f7312; }
.btn.red { background: #3a1a1f; border-color: #7a2b33; color: #ff9aa0; }
.btn.sm { padding: 6px 11px; min-height: 32px; font-size: 13px; }
.btn:active { transform: translateY(2px); box-shadow: none; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { padding: 7px 13px; background: var(--panel-bg); font-size: 13px; font-weight: 700; color: var(--dim); min-height: 36px; }
.seg button.on { background: var(--blue); color: #fff; }
.card { background: rgba(23, 32, 51, .92); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.note { color: var(--dim); font-size: 12px; }
.warn { color: #ffcf7a; font-size: 12px; }

.home { height: 100%; display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: center; max-width: 900px; margin: 0 auto; }
.logo { text-align: center; }
.logo .ball { font-size: 54px; line-height: 1; filter: drop-shadow(0 4px 0 #0008); }
.logo h1 { margin: 6px 0 2px; font-size: clamp(26px, calc(5.2 * var(--vw)), 44px); letter-spacing: -1px; color: var(--accent); text-shadow: 0 3px 0 #7a5c00, 0 6px 0 #0006; }
.logo p { margin: 0; color: var(--dim); font-size: 13px; }
.menu { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.menu .btn { min-height: 50px; font-size: 16px; }
.menu .wide { grid-column: 1 / -1; }

.teams { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.team { position: relative; border-radius: 10px; padding: 9px 4px 7px; background: var(--panel-bg); border: 2px solid var(--line); text-align: center; overflow: hidden; }
.team::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--c); }
.team b { display: block; font-size: 17px; }
.team span { display: block; font-size: 10px; color: var(--dim); white-space: nowrap; }
.team.me { border-color: var(--accent); background: #2a2a18; }
.team.opp { border-color: var(--red); background: #2b181b; }
.team .mark { position: absolute; right: 4px; top: 8px; font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 6px; background: var(--accent); color: #111; }
.team.opp .mark { background: var(--red); color: #fff; }
.split { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; align-items: start; }
.opts { display: grid; gap: 9px; }
.opts .rowx { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.vs { font-size: 18px; font-weight: 800; text-align: center; }
.vs small { display: block; font-size: 11px; color: var(--dim); font-weight: 400; }

table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 5px 6px; text-align: center; border-bottom: 1px solid #22304a; white-space: nowrap; }
th { color: var(--dim); font-weight: 600; font-size: 11px; }
td.l, th.l { text-align: left; }
tr.me td { background: rgba(255, 216, 74, .12); font-weight: 700; }
tr.cut td { border-bottom: 2px dashed #5a6a8a; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: middle; outline: 1px solid #fff5; }
.tabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lead h4, .card h4 { margin: 0 0 5px; font-size: 13px; color: var(--accent); }
.lead ol { margin: 0; padding-left: 20px; font-size: 13px; }
.lead li em { float: right; font-style: normal; font-weight: 700; }

.lineup { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.pl { display: grid; grid-template-columns: 26px 38px 1fr auto; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; margin-bottom: 4px;
  border-radius: 8px; background: var(--panel-bg); border: 1px solid var(--line); text-align: left; min-height: 38px; }
.pl.sel { border-color: var(--accent); background: #2a2a18; }
.pl .o { color: var(--accent); font-weight: 800; text-align: center; }
.pl .p { font-size: 11px; color: var(--dim); }
.pl .n { font-weight: 700; }
.pl .n small { font-weight: 400; color: var(--dim); margin-left: 5px; }
.pl .s { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #22304a; }
.setrow input[type=range] { width: 46%; accent-color: var(--accent); }
.setrow label { font-weight: 600; }
.setrow small { display: block; color: var(--dim); font-weight: 400; font-size: 11px; }
.line td, .line th { font-variant-numeric: tabular-nums; }
.result-head { text-align: center; font-size: 22px; font-weight: 800; margin: 2px 0 8px; }
.result-head.win { color: var(--accent); } .result-head.lose { color: #9fb0d0; }

/* ── 경기 화면 ─────────────────────────── */
#game { position: absolute; inset: 0; background: #000; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
#hud { position: absolute; top: calc(var(--sat) + 5px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 5px; border-radius: 12px; background: rgba(9, 13, 22, .86); border: 1px solid #2c3954; white-space: nowrap; }
#btn-pause { width: 34px; height: 34px; border-radius: 9px; background: #23304b; font-weight: 800; }
#sb { display: flex; align-items: center; gap: 8px; font-weight: 800; }
#sb .tm { display: flex; align-items: center; gap: 5px; opacity: .78; }
#sb .tm.atbat { opacity: 1; }
#sb .tm i { width: 6px; height: 18px; border-radius: 2px; }
#sb .tm em { font-style: normal; font-size: 20px; min-width: 14px; text-align: center; color: var(--accent); }
#sb-inn { font-size: 12px; color: #b9f2c4; padding: 2px 7px; border-radius: 7px; background: #15331f; }
#count { display: flex; gap: 8px; font-size: 11px; font-weight: 800; }
#count span { display: flex; align-items: center; gap: 3px; }
#count u { text-decoration: none; color: var(--dim); }
#count i { width: 9px; height: 9px; border-radius: 50%; background: #2b3650; }
#cnt-b i.on { background: #46d17a; } #cnt-s i.on { background: #ffd84a; } #cnt-o i.on { background: #ef4b4b; }
#diamond { position: relative; width: 30px; height: 26px; }
#diamond i { position: absolute; width: 10px; height: 10px; background: #2b3650; transform: rotate(45deg); }
#diamond i.on { background: var(--accent); box-shadow: 0 0 6px #ffd84a; }
#diamond .b2 { left: 10px; top: 1px; } #diamond .b3 { left: 1px; top: 10px; } #diamond .b1 { left: 19px; top: 10px; }

.chip { position: absolute; top: calc(var(--sat) + 54px); display: grid; grid-template-columns: auto auto; gap: 0 6px; align-items: center; text-align: left;
  padding: 5px 9px; border-radius: 10px; background: rgba(9, 13, 22, .8); border: 1px solid #2c3954; font-size: 13px; max-width: calc(34 * var(--vw)); }
.chip.mine { border-color: var(--accent); }
.chip .tag { font-size: 10px; color: var(--dim); }
.chip .sm { grid-column: 1 / -1; font-size: 10px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: #2b3650; overflow: hidden; margin-top: 2px; min-width: 70px; }
.chip .bar i { display: block; height: 100%; }
#chip-pit { left: calc(var(--sal) + 8px); } #chip-bat { right: calc(var(--sar) + 8px); }
#detail { position: absolute; top: calc(var(--sat) + 112px); width: 210px; padding: 10px; border-radius: 12px; background: rgba(9, 13, 22, .95); border: 1px solid var(--accent); z-index: 5; font-size: 12px; }
#detail.pit { left: calc(var(--sal) + 8px); } #detail.bat { right: calc(var(--sar) + 8px); }
#detail h4 { margin: 0 0 6px; font-size: 15px; } #detail h4 small { font-size: 10px; color: var(--dim); font-weight: 400; }
#detail p { margin: 5px 0 0; color: var(--dim); }
.st { display: grid; grid-template-columns: 34px 1fr 24px; align-items: center; gap: 6px; margin: 2px 0; }
.st .bar { height: 6px; background: #2b3650; border-radius: 3px; overflow: hidden; } .st .bar i { display: block; height: 100%; background: var(--blue); }
.st em { font-style: normal; text-align: right; font-weight: 700; }

#banner { position: absolute; left: 50%; top: 27%; transform: translate(-50%, -50%); padding: 5px 20px; border-radius: 10px; white-space: nowrap;
  font-size: clamp(19px, calc(4.6 * var(--vw)), 36px); font-weight: 900; letter-spacing: -0.5px; background: rgba(9, 13, 22, .84); border: 2px solid #fff3; text-shadow: 0 2px 0 #000; animation: pop .18s ease-out; }
#banner.strike { color: var(--accent); border-color: var(--accent); } #banner.ball { color: #7fe3a0; } #banner.foul { color: #c9d2e6; }
#banner.hit { color: #7fd0ff; border-color: #7fd0ff; } #banner.out { color: #ff8d8d; border-color: #ff8d8d; } #banner.inning { color: #fff; font-size: clamp(16px, calc(3.6 * var(--vw)), 28px); }
@keyframes pop { from { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

#cutin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; z-index: 6;
  background: linear-gradient(100deg, transparent 0 12%, rgba(0, 0, 0, .72) 12% 88%, transparent 88%); animation: cut .25s ease-out; }
#cutin .big { font-size: clamp(44px, calc(13 * var(--vw)), 110px); font-weight: 900; font-style: italic; letter-spacing: -3px; line-height: 1; color: var(--accent);
  text-shadow: 0 4px 0 #a33b00, 0 9px 0 #000a; animation: slam .35s cubic-bezier(.2, 1.6, .4, 1); }
#cutin .sub { font-size: clamp(13px, calc(3 * var(--vw)), 22px); font-weight: 700; }
#cutin .skip { position: absolute; bottom: calc(var(--sab) + 10px); font-size: 11px; color: #fff9; }
#cutin.k .big { color: #ff6b6b; text-shadow: 0 4px 0 #6e0f0f, 0 9px 0 #000a; }
#cutin.dp .big { color: #7fd0ff; text-shadow: 0 4px 0 #134a75, 0 9px 0 #000a; }
#cutin.walkoff .big { color: #fff; text-shadow: 0 4px 0 #c79b00, 0 9px 0 #000a; }
@keyframes cut { from { opacity: 0; } to { opacity: 1; } }
@keyframes slam { from { transform: scale(3) rotate(-6deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }

/* 조작부: 화면 아래 양쪽 구석(엄지 위치). 가운데 경기 영역은 가리지 않는다 */
.panel { position: absolute; bottom: calc(var(--sab) + 8px + var(--lift)); width: var(--panel); display: flex; flex-direction: column; gap: 7px; }
#panel-l { left: calc(var(--sal) + 10px); } #panel-r { right: calc(var(--sar) + 10px); }
#game.swap #panel-l { left: auto; right: calc(var(--sar) + 10px); } #game.swap #panel-r { right: auto; left: calc(var(--sal) + 10px); }
#hint-l, .cap { font-size: 11px; color: #fffc; text-align: center; text-shadow: 0 1px 2px #000; font-weight: 700; }
#pad { position: relative; width: 100%; aspect-ratio: 1; border-radius: 18px; background: rgba(12, 18, 30, .5); border: 2px solid rgba(255, 255, 255, .42);
  background-image: linear-gradient(#fff3, #fff3), linear-gradient(#fff3, #fff3); background-size: 1px 100%, 100% 1px; background-position: center; background-repeat: no-repeat; touch-action: none; }
#pad::after { content: ""; position: absolute; inset: 17%; border: 1px dashed #fff6; border-radius: 4px; pointer-events: none; }
#pad-dot { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(127, 220, 255, .55); border: 2px solid #fff; pointer-events: none; }
.panel .row { display: flex; gap: 7px; }
.panel .row.small button { flex: 1; height: calc(34px * var(--bs)); border-radius: 10px; background: rgba(12, 18, 30, .66); border: 2px solid #fff6; font-size: 13px; font-weight: 800; }
.panel .row.small button.on { background: var(--accent); color: #111; border-color: #fff; }
.panel .row.big button { flex: 1; aspect-ratio: 1; border-radius: 50%; font-size: calc(17px * var(--bs)); font-weight: 900; border: 3px solid #fff; text-shadow: 0 2px 0 #0007; box-shadow: 0 5px 0 #0007; }
.b-swing { background: rgba(46, 140, 255, .86); } .b-power { background: rgba(240, 70, 60, .88); } .b-pitch { background: rgba(240, 180, 40, .9); color: #1b1400; text-shadow: none !important; }
.b-go { background: rgba(60, 190, 100, .88); } .b-back { background: rgba(120, 130, 150, .86); }
.panel button.down, .panel button:active { transform: translateY(3px) scale(.96); box-shadow: none; filter: brightness(1.25); }
.panel .row.big:has(.b-pitch) { justify-content: center; } .panel .row.big:has(.b-pitch) button { flex: 0 0 62%; }
.types { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.types button { height: calc(36px * var(--bs)); border-radius: 10px; background: rgba(12, 18, 30, .66); border: 2px solid #fff6; font-size: 13px; font-weight: 800; }
.types button.on { background: var(--accent); color: #111; border-color: #fff; }
.bases { position: relative; width: 100%; aspect-ratio: 1; }
.bs { position: absolute; width: 36%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(45deg); background: rgba(12, 18, 30, .7); border: 3px solid #fff; border-radius: 8px; font-weight: 900; font-size: calc(14px * var(--bs)); }
.bs { display: grid; place-items: center; } .bs > * { transform: rotate(-45deg); }
.bs.b2 { left: 50%; top: 21%; } .bs.b3 { left: 21%; top: 50%; } .bs.b1 { left: 79%; top: 50%; } .bs.b4 { left: 50%; top: 79%; }
.bs.sug { background: var(--accent); color: #111; animation: blink .35s infinite alternate; }
.bs.down, .bs:active { transform: translate(-50%, -50%) rotate(45deg) scale(.92) !important; }
@keyframes blink { to { filter: brightness(1.35); } }

#pause, #modal { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(4, 7, 14, .78); padding: calc(var(--sat) + 8px) calc(var(--sar) + 12px) calc(var(--sab) + 8px) calc(var(--sal) + 12px); }
.sheet { width: min(640px, 100%); max-height: 100%; overflow-y: auto; touch-action: pan-y; background: #131b2c; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.sheet h3 { margin: 0 0 10px; font-size: 17px; }
.sheet .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.help { font-size: 12px; color: var(--dim); line-height: 1.6; }
.help b { color: var(--txt); }

#toast { position: absolute; left: 50%; bottom: calc(var(--sab) + 14px); transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
#toast div { padding: 8px 16px; border-radius: 20px; background: rgba(9, 13, 22, .94); border: 1px solid var(--line); font-size: 13px; font-weight: 600; animation: pop2 .2s; }
#toast div.err { border-color: var(--red); color: #ffb3b3; }
@keyframes pop2 { from { transform: translateY(8px); opacity: 0; } }

/* 세로로 든 폰(회전 잠금·인앱 브라우저 포함): 화면 전체를 90도 돌려 항상 가로 레이아웃으로 보여 준다 */
html.rot { --vw: 1vh; --vw: 1dvh;
  --sal: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-bottom, 0px);
  --sat: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-left, 0px); }
html.rot #app { inset: auto; top: 0; left: 100vw; width: 100vh; height: 100vw; left: 100dvw; width: 100dvh; height: 100dvw;
  transform-origin: 0 0; transform: rotate(90deg); }
html.rot .scroll, html.rot .sheet { touch-action: pan-x pan-y; }

@media (max-height: 430px), (orientation: portrait) and (max-width: 820px) {
  .home { gap: 12px; } .menu .btn { min-height: 42px; font-size: 15px; } .logo .ball { font-size: 38px; }
  th, td { padding: 3px 5px; } .card { padding: 9px; }
  .chip { top: calc(var(--sat) + 50px); }
}
@media (max-width: 640px) and (orientation: landscape) {
  #count u { display: none; } #hud { gap: 7px; }
  .split, .lineup, .grid3 { grid-template-columns: 1fr; }
}