:root{--cream:#f4f0e5;--paper:#fffcf5;--ink:#193634;--muted:#7a8173;--blue:#174f86;--green:#2f6150;--orange:#cf653e;--line:#d9d6c8;--navy:#15332f;font-family:'Yu Gothic UI','Hiragino Kaku Gothic ProN',system-ui,sans-serif;font-synthesis:none;color:var(--ink);background:var(--cream)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0,#ece8db,transparent 60%),var(--cream)}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible{outline:3px solid #d0803a;outline-offset:4px}button{border:0}a{color:inherit}[hidden]{display:none!important}.masthead{max-width:1460px;margin:auto;padding:25px 44px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-family:Georgia,serif;font-weight:900;font-size:21px;letter-spacing:1px}.brand-icon{background:var(--blue);width:43px;height:43px;display:grid;place-items:center;color:#fff;border-radius:50%;font-style:italic;font-size:24px;letter-spacing:-5px;padding-right:5px;box-shadow:inset 0 0 0 3px #f4f0e5,inset 0 0 0 4px var(--blue)}.brand i{color:var(--orange);font-style:normal}.brand small{font:8px/1.9 system-ui;letter-spacing:2.2px;display:block}.top-actions{display:flex;gap:10px}.icon-btn{background:transparent;border:1px solid var(--line);border-radius:50%;width:37px;height:37px;font-size:18px;display:flex;align-items:center;justify-content:center;gap:3px}.icon-btn span{font-size:8px}main{max-width:1460px;margin:auto;padding:0 44px}.intro{display:flex;align-items:center;justify-content:space-between;padding:28px 0 24px;gap:25px}.eyebrow{font-size:9px;font-weight:800;letter-spacing:2px;margin:0 0 9px;color:var(--green)}.eyebrow>span{margin-left:16px;font-size:8px;color:#8b8e64}h1{font-size:clamp(20px,2.25vw,34px);letter-spacing:-.05em;font-weight:700;margin:0}h1 em{font-family:inherit;font-style:normal;color:var(--blue)}.intro-note{font-size:11px;line-height:1.9;color:var(--muted);margin:0}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:26px;align-items:start}.arena{min-width:0;border-radius:16px;overflow:hidden;box-shadow:0 14px 50px #283f2e14;border:1px solid #d8d3c2}.scoreboard{background:var(--navy);color:#dddac5;padding:15px 25px 12px;border-bottom:5px solid #152a25}.score-top{font-size:9px;font-weight:700;letter-spacing:1.8px;display:flex;align-items:center;gap:8px;color:#bec8ac;margin-bottom:10px}.live-dot{width:5px;height:5px;border-radius:50%;background:#daba66;box-shadow:0 0 7px #daba6666}.score-tag{margin-left:auto;font-size:8px;border:1px solid #79917455;padding:3px 6px}.score-grid{display:grid;grid-template-columns:minmax(130px,1fr) repeat(3,34px) 47px 28px;align-items:center;gap:4px;text-align:center;font-family:monospace;font-size:12px}.score-grid>.team-heading{text-align:left;font:8px system-ui;letter-spacing:2px;color:#91a08d}.score-grid>span:not(.team-name){color:#8fa38e;font-size:9px}.team-name{text-align:left;white-space:nowrap;font-size:12px;font-weight:bold;letter-spacing:.3px;line-height:1.6}.team-name small{font:7px system-ui;letter-spacing:1px;color:#a5b09a;display:inline-block;margin-left:8px}.score-grid b{font-size:17px;font-weight:500;color:#ddd5a5}.score-grid b.total{color:#f4cf6e;font-size:20px;border-left:1px solid #76967435}.countbar{display:flex;gap:22px;align-items:center;border-top:1px solid #78917330;padding-top:10px;margin-top:10px;font-size:8px;color:#c4cfba;letter-spacing:1px}.lamps{display:flex;gap:18px}.lamps>span{display:flex;gap:5px;align-items:center}.lamps i{width:6px;height:6px;border-radius:50%;background:#374d3d;display:inline-block}.lamps i.on{background:#a5c598;box-shadow:0 0 6px #a5c59877}.lamps #s1.on,.lamps #s2.on{background:#e5c267}.lamps #o1.on,.lamps #o2.on{background:#e0805a}.bases{width:28px;height:20px;position:relative;margin-right:6px}.bases i{position:absolute;width:7px;height:7px;border:1px solid #9cab8a;transform:rotate(45deg)}#base1{top:0;left:10px}#base0{top:9px;left:20px}#base2{top:9px;left:0}.bases i.on{background:#edca67;border-color:#edca67}#turn-label{margin-left:auto;color:#e0c574;font-weight:bold}.board-wrap{position:relative;height:510px;overflow:hidden;background:#e8e0c9;background-image:linear-gradient(145deg,#f7f1df88,#d4c5a160),repeating-linear-gradient(2deg,transparent 0,transparent 22px,#c4b49315 23px,#c4b49315 24px);isolation:isolate}canvas{display:block;width:100%;height:100%;touch-action:manipulation}.board-badge{position:absolute;top:20px;left:23px;pointer-events:none;display:flex;flex-direction:column;gap:4px;color:#62654c}.board-badge>span{font-size:6px;letter-spacing:2.1px}.board-badge>strong{font:italic bold 16px Georgia,serif;color:var(--green);letter-spacing:.3px}.board-badge>small{font-size:7px;letter-spacing:1.2px}.view-controls{position:absolute;right:15px;top:15px;display:flex;gap:7px}.view-controls button{background:#faf7edc9;border:1px solid #b3b19b70;color:#566146;border-radius:20px;padding:7px 11px;font-size:11px;min-height:32px}.board-bottom{position:absolute;bottom:12px;left:23px;right:23px;display:flex;justify-content:space-between;pointer-events:none;font-size:6px;letter-spacing:1.3px;color:#8c8569}.play-announcement{position:absolute;inset:auto 15% 65px;display:flex;flex-direction:column;text-align:center;gap:4px;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;transform:translateY(7px)}.play-announcement.show{opacity:1;transform:none}.play-announcement strong{font:italic 800 clamp(18px,2vw,28px) Georgia,serif;color:#fff9e8;text-shadow:0 2px 10px #153328,0 1px 2px #153328}.play-announcement span{font-size:10px;color:white;text-shadow:0 1px 5px black}.fork-banner{position:absolute;bottom:40px;left:0;right:0;background:#b45030ec;color:white;text-align:center;padding:7px;font-size:11px;letter-spacing:1px}.event-strip{display:flex;gap:16px;align-items:center;background:#fdfaf1;padding:12px 20px;min-height:47px;border-top:1px solid #d7d1bf}.event-strip>span{font-size:7px;letter-spacing:1.4px;font-weight:800;color:var(--orange);white-space:nowrap}.event-strip p{font-size:11px;margin:0;line-height:1.5}.console{display:flex;flex-direction:column;gap:16px}.panel{padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 5px 15px #45402c04}.panel h2{font-size:19px;line-height:1.5;margin:0 0 22px;letter-spacing:-.5px}fieldset{border:0;padding:0;margin:0 0 18px;min-width:0}legend{font-size:10px;font-weight:700;margin-bottom:9px}.segmented{display:flex;background:#eeeee4;border:1px solid #e0dfd0;padding:3px;border-radius:8px;gap:3px}.segmented button{background:transparent;padding:9px 3px;border-radius:5px;font-size:10px;flex:1;white-space:nowrap;color:#79806d}.segmented button.selected{background:#fffdf5;box-shadow:0 1px 4px #4845351c;color:var(--ink);font-weight:700}.role-options{display:flex;flex-direction:column;gap:8px}.role-options button{display:flex;align-items:center;gap:11px;background:#fffdf6;border:1px solid #e1dfd0;border-radius:9px;text-align:left;padding:12px;color:var(--ink)}.role-options button.selected{background:#edf2e5;border-color:#8da985}.role-options strong{display:block;font-size:12px}.role-options small{display:block;font-size:8px;line-height:1.6;margin-top:3px;color:#7c8170}.role-glyph{font-size:24px;color:#667d54;min-width:24px}.role-options i{font-size:11px;font-style:normal;margin-left:auto;opacity:0}.role-options .selected i{opacity:1}.primary{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--blue);color:#fffdf0;border-radius:8px;padding:16px 18px;font-size:13px;font-weight:700;box-shadow:0 4px 0 #11385e;min-height:49px;transition:background .15s,transform .12s}.primary:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #11385e}.primary span{font-size:19px}.primary.action.swing{background:var(--orange);box-shadow:0 4px 0 #944426;font-size:20px;min-height:65px;letter-spacing:3px}.fine-print{font-size:9px;line-height:1.9;color:#8a8c7c;margin:15px 0 0}.tip-card{background:#e8e9d9;border-radius:12px;padding:18px;display:flex;gap:14px;border:1px solid #dddfce}.mini-ball{width:31px;height:31px;min-width:31px;border-radius:50%;border:1px solid #bcc1a6;display:grid;place-items:center;color:#667548;font-size:22px}.tip-card h3{font-size:12px;margin:0 0 5px}.tip-card p{font-size:10px;color:#778068;line-height:1.8;margin:0 0 7px}.tip-card button{background:transparent;font-size:9px;color:var(--green);padding:0;font-weight:700}.tip-card button span{margin-left:10px}.quiet{display:block;background:none;color:#77826b;font-size:10px;text-align:center;width:100%;padding:12px 3px 0;text-decoration:underline;text-underline-offset:3px}.control-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.chip{font-size:8px;letter-spacing:.8px;background:#e8ecd9;padding:4px 7px;border-radius:4px}.range-label{display:flex;justify-content:space-between;font-size:11px;font-weight:600}.range-label>span{font-size:9px;color:#889079;font-weight:400}input[type=range]{accent-color:var(--green);width:100%;height:36px;margin:7px 0 0;cursor:pointer;touch-action:pan-x}.range-ends{display:flex;justify-content:space-between;font-size:8px;color:#91967f;margin-bottom:19px}.timing-box{border:1px solid #e2dfd0;border-radius:8px;padding:12px;margin-bottom:20px}.timing-label{display:flex;justify-content:space-between;font-size:7px;color:#8d947e}.timing-label span:first-child{letter-spacing:1px;font-weight:700}.timing-track{height:19px;border-radius:12px;background:#e7e5d6;margin-top:13px;position:relative}.hit-zone{position:absolute;left:73%;width:18%;height:100%;background:#b3c8a3;border-radius:5px}.timing-track i{position:absolute;width:14px;height:14px;top:2px;left:0;background:radial-gradient(circle at 35% 25%,white,#acb4b5 60%,#5c6869);border-radius:50%;box-shadow:0 2px 3px #24333044;transform:translateX(-50%)}.timing-track b{position:absolute;left:78%;font-size:7px;top:5px;color:#496746}.control-hint{font-size:10px;line-height:1.8;color:#81886f;margin:18px 0}.recent{padding-top:13px;border-top:1px dashed #d3d6c1}.recent span{font-size:7px;letter-spacing:1.5px;color:#94977e}.recent p{font-size:11px;line-height:1.8;margin:6px 0}.pitch-types{display:flex;gap:6px}.pitch-types button{background:#f0f0e6;border:1px solid #dfdfcf;border-radius:7px;flex:1;padding:11px 3px;font-size:10px;color:var(--ink)}.pitch-types button small{display:block;font-size:7px;color:#7d866f;margin-top:4px}.pitch-types .selected{background:#dfe9d8;border-color:#8fa781}.pitch-types .selected[data-pitch=fork]{background:#f6e4d4;border-color:#dba773}footer{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:23px 0 26px;color:#9b9c87;font-size:8px;letter-spacing:.5px}footer a{white-space:nowrap}dialog{border:1px solid #d6d3c2;border-radius:18px;background:#fffcf2;color:var(--ink);padding:35px;max-width:540px;width:calc(100% - 32px);box-shadow:0 30px 100px #0c221c55}dialog::backdrop{background:#162c2780;backdrop-filter:blur(6px)}dialog h2{font-size:24px;line-height:1.5;margin:5px 0 18px}dialog p{font-size:13px;line-height:1.9}dialog .primary{margin-top:22px}.close{position:absolute;right:16px;top:12px;font-size:25px;color:#7e816d;background:none;width:35px;height:35px}.instructions{padding-left:20px}.instructions li{font-size:12px;margin-bottom:15px;padding-left:4px}.instructions p{font-size:11px;color:#7b846e;margin:5px 0}.paused canvas{filter:blur(5px) saturate(.5)}
@media(min-width:1450px){.board-wrap{height:580px}}
@media(max-width:1050px){.masthead{padding-left:24px;padding-right:24px}main{padding:0 24px}.game-layout{grid-template-columns:minmax(0,1fr) 292px;gap:16px}.panel{padding:19px}.board-wrap{height:475px}.scoreboard{padding:14px 17px}.intro-note{display:none}.board-badge>span{display:none}.board-badge>strong{font-size:13px}.board-badge{left:15px}.score-grid{grid-template-columns:minmax(110px,1fr) repeat(3,26px) 34px 23px}.team-name{font-size:10px}.team-name small{font-size:6px;margin-left:4px}}
@media(max-width:760px){.masthead{padding:15px 17px 13px}.brand{font-size:17px;gap:9px}.brand-icon{height:37px;width:37px;font-size:22px}.brand small{font-size:6px}.icon-btn{width:34px;height:34px}main{padding:0 13px}.intro{padding:20px 2px 17px}.intro .eyebrow{font-size:7px;letter-spacing:1.3px}.eyebrow>span{display:none}h1{font-size:21px;line-height:1.55;letter-spacing:-.06em}h1 em{display:block}.game-layout{display:flex;flex-direction:column;gap:14px}.arena,.console{width:100%}.scoreboard{padding:11px 15px 9px}.score-top{font-size:7px;margin-bottom:8px}.score-grid{grid-template-columns:minmax(100px,1fr) repeat(3,29px) 37px 23px;gap:2px}.score-grid b{font-size:15px}.score-grid b.total{font-size:18px}.team-name{font-size:10px}.countbar{margin-top:7px;padding-top:8px;gap:15px}.lamps{gap:13px}.board-wrap{height:400px;height:clamp(325px,100vw,440px)}.board-badge{top:15px}.board-badge>strong{font-size:13px}.board-badge>small{font-size:6px}.view-controls{right:10px;top:11px}.view-controls button{font-size:10px;padding:6px 9px}.event-strip{padding:11px 13px;gap:10px}.event-strip>span{font-size:6px;letter-spacing:1px}.event-strip p{font-size:10px}.panel{padding:20px}.panel h2{font-size:19px;margin-bottom:16px}.role-options{display:grid;grid-template-columns:1fr;gap:7px}.role-options button{padding:11px 14px}.role-options small{font-size:9px}.role-options strong{font-size:13px}.role-glyph{font-size:25px}.segmented button{font-size:11px;padding:10px 3px}.primary{font-size:15px;min-height:53px}.tip-card{padding:16px}.tip-card p{font-size:11px}.fine-print{font-size:10px}footer{flex-wrap:wrap;gap:10px;font-size:7px}.control-heading{margin-bottom:2px}.control-hint{font-size:11px}.pitch-types button{font-size:12px}.pitch-types button small{font-size:8px}.range-label{font-size:12px}.range-ends{font-size:10px}.timing-box{margin-bottom:14px;padding:11px}.timing-label{font-size:8px}.play-announcement{inset:auto 8% 58px}.play-announcement strong{font-size:23px}.board-bottom{left:12px;right:12px;font-size:5px}.playing .intro{display:none}.playing .masthead{padding-top:9px;padding-bottom:9px}.playing .game-layout{padding-top:10px;gap:10px}.playing .board-wrap{height:clamp(285px,86vw,380px)}.playing .score-top{display:none}.playing .console{gap:10px}.playing .panel{padding:14px 18px}.playing .panel h2{font-size:16px;margin-bottom:12px}.playing .tip-card,.playing footer,.playing .recent,.playing #new-game{display:none}.playing .range-ends{margin-bottom:12px}.playing .control-hint{margin:13px 0 0}.playing .timing-box{padding:9px 10px}.playing .control-heading .eyebrow{font-size:8px}.playing .primary.action{min-height:55px}.playing .range-label{font-size:11px}.playing fieldset{margin-bottom:12px}.playing #pitch-controls input{height:26px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:760px){.playing{padding-bottom:88px}.playing #action{position:fixed;bottom:max(15px,env(safe-area-inset-bottom));left:22px;right:22px;width:calc(100% - 44px);z-index:8;box-shadow:0 4px 0 #11385e,0 10px 35px #1b322a55}.playing #action.swing{box-shadow:0 4px 0 #944426,0 10px 35px #1b322a55}.playing .panel{padding-bottom:20px}.playing #bat-controls{margin-bottom:0}}
@media(max-width:760px) and (max-height:740px){.playing .board-wrap{height:265px}.playing .panel h2{font-size:15px;margin-bottom:9px}.playing .timing-box{margin-bottom:8px}.playing .control-hint{font-size:10px}.playing .range-ends{margin-bottom:7px}}
.playing #new-game{display:block}