/* READBALL 03: clearer decisions, compact mobile play, broadcast field. */
.direction.selected:hover:enabled{background:#d2f35e;border-color:#668b2b}
:root{--paper:#eef1e8;--muted:#63765d;--line:#dce3d5}
body{background:var(--paper)}.topbar{height:68px;background:#f9fbf3;padding:0 max(24px,calc((100vw - 1440px)/2))}.top-right{gap:15px}.icon-button{min-width:42px;height:42px}.prototype{letter-spacing:1.4px}.by{font-size:11px;letter-spacing:1.5px}.shell{max-width:1488px;padding:24px 24px 0}.section-head{margin-bottom:21px}.eyebrow{font:700 10px 'Noto Sans JP',sans-serif;letter-spacing:1.5px;color:#6b8061}h1{font-size:32px;letter-spacing:-1.3px;margin-top:7px}.game-label{padding:9px 12px;border:1px solid #d2ddc8;border-radius:30px;font:600 10px 'Noto Sans JP',sans-serif;letter-spacing:0}.game-layout{grid-template-columns:minmax(0,1fr) 340px;border-radius:20px;border-color:#cad6c3;box-shadow:0 12px 40px #1b38250a;background:#fcfdf7}.stadium{min-height:620px}.control-panel{background:#fcfdf7;padding:18px 22px 20px}.panel-head{padding:4px;margin:0;border:1px solid #dee7d5;border-radius:12px;background:#eaf0e2}.tab-list{gap:4px}.tab{flex:1;min-height:42px;padding:10px 5px;border-radius:8px;font-size:11px;font-weight:700;color:#64745d}.tab.active{background:white;box-shadow:0 2px 6px #1a382514}.tab.active:after{display:none}.tiny-dot{margin-left:6px}
.broadcast-top{top:20px;left:22px;right:22px}.stadium-weather{font:500 10px 'Noto Sans JP',sans-serif;letter-spacing:.4px;color:#ffffffe0}.scorebug{top:54px;left:22px;width:170px;border-radius:10px;backdrop-filter:blur(10px)}.score-top{padding:8px 10px}.score-row{padding:7px 10px;grid-template-columns:5px 1fr 23px 30px}.score-row b{font-size:23px}.score-row strong{font-size:15px}.camera-button{min-height:40px;padding:0 12px;border-radius:9px;font-size:10px;background:#0e3023ba}.field-caption{font-size:9px}.reticle{width:80px;height:112px}.pitch-result{top:26%;left:64%}
.match-progress{display:flex;align-items:center;gap:9px;margin-top:21px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:10px;font-weight:600;color:#5e7459}.match-progress b{font:700 13px var(--display);white-space:nowrap}.progress-dots{display:flex;gap:4px;flex:1;justify-content:flex-end}.progress-dots i{width:6px;height:6px;border-radius:50%;background:#dde5d5}.progress-dots .complete{background:#77906b}.progress-dots .current{background:#244c32;box-shadow:0 0 0 3px #d8edb2}.turn-info{padding-top:18px}.turn-overline{font:700 11px 'Noto Sans JP',sans-serif;letter-spacing:.3px;color:#527147}h2{font-size:25px;font-weight:900;margin:10px 0 8px}.turn-info p{font-size:11px;line-height:1.9;color:#63765d}#timer{font:700 15px var(--display);color:#24482c;background:#eaf0dc;padding:4px 8px;border-radius:6px;white-space:nowrap}#timer[data-urgent=true]{background:#ffeadc;color:#a84523}
.dpad{grid-template-columns:76px 76px 76px;grid-template-rows:56px 56px 56px;gap:6px;margin:21px 0}.direction{position:relative;border-color:#d2dec6;border-bottom-width:3px;border-radius:12px;background:#eff4e7;color:#234b31;gap:2px}.direction b{font-size:29px;font-weight:600}.direction span{font-size:10px;font-weight:600;color:#526a47}.direction:hover:enabled{background:#e1edce;border-color:#98b181}.direction.selected{background:var(--lime);border-color:#668b2b;box-shadow:0 0 0 2px #d1e8ac}.direction.selected:after{content:'✓';position:absolute;top:3px;right:6px;font-size:10px;font-weight:800}.direction:disabled{opacity:.44}.dpad-center{flex-direction:column;gap:4px}.dpad-center svg{width:24px}.select-hint{font-size:9px;font-weight:700;letter-spacing:1px}.primary{min-height:52px;border-radius:11px;padding:14px 17px;font-size:12px;font-weight:700;border:1px solid transparent;box-shadow:0 3px 0 #092418}.primary:disabled{background:#e7edde;color:#627457;box-shadow:none;border-color:#d9e2ce}#game-controls[data-phase=ready] #submit{background:var(--lime);color:#1a3c26;border-color:#b0d342;box-shadow:0 3px 0 #91b13a}#game-controls[data-phase=waiting] #submit{background:#edf2e4;color:#46633b}.selection-note{font-size:10px;line-height:1.7;min-height:17px;color:#687c5d;margin:11px 0 20px}#game-controls[data-phase=ready] .selection-note{color:#395a2d;font-weight:700}.history-head{font-size:10px;color:#63765b}.mini-label{font-size:10px;color:#788b6c}.history>span{height:33px;border-radius:7px;background:#edf2e5;color:#8e9f81}.history .known{color:#526c43}.history .homer{background:#e0eeb7;color:#3e6227}.rule-note{gap:10px;margin-top:18px;padding-top:14px;align-items:center}.rule-note>span{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;background:#e9efd9;color:#698246;border-radius:50%;font-size:14px}.rule-note p{font-size:10px;color:#6e8062}.rule-note strong{font-weight:700;color:#45623a}
.online-lobby{padding-top:25px}.online-lobby h2{font-size:23px}.lobby-description{font-size:11px;line-height:1.9;color:#63765d}.join-row{gap:8px;margin-top:10px}.join-row input{padding:12px;border-color:#cbd9bd;border-radius:10px;background:#f0f5e8;font-size:25px}.join-row input::placeholder{color:#8fa07e}label{font-size:11px;font-weight:600;color:#536f47}.join-button{min-width:68px;border-radius:10px;font-size:12px;font-weight:700}.room-banner{margin-top:17px;padding:13px;background:#edf4e2;border:1px solid #dbe7cb;border-radius:10px}.room-banner p{font-size:10px;line-height:1.7;color:#557246}.room-banner~#game-controls .match-progress{margin-top:15px}.room-banner~#game-controls .dpad{grid-template-rows:46px 46px 46px;margin:15px 0}.room-banner~#game-controls .turn-info{padding-top:14px}.room-banner~#game-controls .selection-note{margin-bottom:17px}.error{border-radius:8px;line-height:1.8}.bottom-row{padding:18px 2px 24px}.match-note p span{font-size:10px;color:#6d8061}.text-button{min-height:40px;padding:6px;font-size:11px;color:#607a52;text-decoration:underline;text-underline-offset:3px}.bottom-links{gap:15px}footer{color:#75896a}dialog{border-radius:20px;max-height:calc(100svh - 40px)}.close{right:12px;top:10px;width:44px;height:44px;border-radius:50%}.secondary{min-height:46px;border-radius:10px}.reward{border-radius:12px}.dialog-foot,li p{color:#657a58}.toast{border-radius:10px;max-width:calc(100% - 30px);line-height:1.7}
@media(min-width:1600px){.stadium{min-height:670px}.control-panel{padding-top:22px}.dpad{margin:25px 0;grid-template-rows:60px 60px 60px}}
@media(max-width:1050px) and (min-width:761px){.shell{padding:22px 18px 0}.game-layout{grid-template-columns:minmax(0,1fr) 306px}.control-panel{padding:16px 17px}.stadium{min-height:620px}.broadcast-top{left:15px;right:15px}.stadium-weather{display:none}.scorebug{left:15px;width:150px}.field-caption span:last-child,.field-caption-line{display:none}.dpad{grid-template-columns:70px 70px 70px}.turn-info p{font-size:10px}.pitch-result{left:62%}.pitch-result strong{font-size:40px}}
@media(max-width:760px){
 .topbar{height:57px;padding:0 16px}.brand{font-size:25px;gap:7px}.brand-mark{width:29px;height:29px;font-size:24px;line-height:29px}.prototype,.by{display:none}.top-right{gap:6px}.icon-button{min-width:40px;height:40px}.shell{padding:15px 12px 0}.section-head{margin:0 3px 14px;align-items:center}.eyebrow{font-size:9px;letter-spacing:1px}h1{font-size:25px;margin-top:5px;letter-spacing:-1px}.game-label{display:flex;padding:6px 8px;font-size:9px;gap:7px}.game-label .separator,.game-label>span:last-child{display:none}
 .game-layout{display:block;border-radius:16px}.stadium{height:34svh;min-height:240px;max-height:370px}.broadcast-top{left:14px;right:14px;top:13px;font-size:9px}.stadium-weather{font-size:8px}.scorebug{left:14px;top:37px;width:126px;border-radius:7px}.score-top{font-size:8px;padding:5px 7px}.score-row{padding:3px 7px;grid-template-columns:4px 1fr 15px 24px;gap:5px}.score-row strong{font-size:12px}.score-row b{font-size:18px}.role-pill{font-size:8px}.team-dot{height:13px;width:3px}.reticle{width:58px;height:78px;top:49%}.reticle>span{font-size:12px}.field-caption{bottom:14px;left:14px;font-size:8px;gap:5px}.field-caption-line,.field-caption span:last-child{display:none}.camera-icon{font-size:14px}.camera-button{bottom:10px;right:11px;min-height:36px;padding:0 9px;font-size:9px}.pitch-result{top:30%;left:65%}.pitch-result strong{font-size:36px}.pitch-result span{font-size:8px;letter-spacing:2px}.pitch-result small{font-size:8px}.reaction{font-size:25px}
 .control-panel{padding:12px 15px 16px}.panel-head{padding:3px;margin:0;border-radius:10px}.tab{min-height:40px;font-size:11px;padding:8px}.tab-list{gap:3px;justify-content:normal}.match-progress{grid-column:1 / 3;grid-row:1;margin-top:15px;padding-bottom:11px;font-size:10px}.progress-dots{justify-content:center;gap:7px}.progress-dots i{width:7px;height:7px}
 #game-controls{display:grid;grid-template-columns:minmax(0,1fr) 156px;column-gap:12px}.turn-info{grid-column:1;grid-row:2;padding-top:13px;align-self:center}.turn-overline{font-size:10px;gap:5px;letter-spacing:0}.turn-info h2{font-size:22px;margin:8px 0 7px}.turn-info p{font-size:10px;line-height:1.8}.dpad{grid-column:2;grid-row:2;grid-template-columns:48px 48px 48px;grid-template-rows:44px 44px 44px;gap:4px;margin:14px 0}.direction{border-radius:9px;border-bottom-width:2px}.direction b{font-size:24px}.direction span{font-size:9px}.dpad-center svg{display:none}.select-hint{font-size:9px}#timer{font-size:12px;padding:3px 5px}
 #submit{grid-column:1 / 3;grid-row:3;min-height:50px;font-size:13px;margin:0;padding:13px 15px}.selection-note{grid-column:1 / 3;grid-row:4;margin:9px 0 16px;font-size:10px;min-height:17px}.history-head{grid-column:1 / 3;grid-row:5;margin-top:0}.history{grid-column:1 / 3;grid-row:6;margin-top:8px}.history>span{height:30px}.rule-note{grid-column:1 / 3;grid-row:7;margin-top:14px;padding-top:11px;gap:8px}.rule-note p{font-size:9px}.rule-note br{display:none}.rule-note>span{width:22px;height:22px;font-size:13px}
 .room-banner{margin-top:12px;padding:10px 12px}.room-banner strong{font-size:25px}.room-banner .text-button{font-size:11px}.room-banner p{font-size:9px}.room-banner~#game-controls .match-progress{margin-top:12px}.room-banner~#game-controls .dpad{grid-template-rows:44px 44px 44px;margin:12px 0}.room-banner~#game-controls .turn-info{padding-top:12px}.room-banner~#game-controls .selection-note{margin-bottom:16px}.online-lobby{padding:20px 3px 10px}.online-lobby h2{font-size:23px}.lobby-description{font-size:11px;margin-bottom:20px}.or{margin:20px 0}.join-row input{min-height:51px}.join-button{min-width:72px}
 .bottom-row{padding:12px 3px 17px;align-items:center}.match-note p{font-size:10px}.match-note p span{display:none}.note-mark{display:none}.bottom-links{gap:7px;flex-direction:row}.text-button{font-size:10px;padding:6px}.bottom-links #reset{font-size:10px}.bottom-links .text-button{padding:5px 3px}.bottom-links #credits{font-size:9px}footer{padding:13px 15px;font-size:9px;letter-spacing:1px}footer span:nth-child(2){display:none}dialog{padding:28px 24px}dialog .eyebrow{font-size:9px}.toast{bottom:max(18px,env(safe-area-inset-bottom));font-size:11px}
}
@media(max-width:380px){.shell{padding:12px 8px 0}.section-head h1{font-size:23px}.game-label{font-size:8px}.control-panel{padding:11px 12px 14px}#game-controls{grid-template-columns:minmax(0,1fr) 140px;column-gap:8px}.dpad{grid-template-columns:44px 44px 44px;gap:3px}.turn-info h2{font-size:20px}.turn-overline{font-size:9px}.turn-info p{font-size:9px}.stadium{min-height:220px}.stadium-weather{display:none}.pitch-result strong{font-size:30px}.bottom-links #credits{max-width:65px}.match-note p{font-size:9px}}