/* A single portrait play surface on every device. */
.game-immersive{background:radial-gradient(ellipse at 50% 45%,#234d3e 0,#102c25 48%,#071c18 100%);--header-height:60px}
.game-immersive .topbar{border-bottom:0;box-shadow:0 1px 0 #dbe1d2}
.game-immersive .shell{width:min(440px,max(320px,calc((100dvh - 92px)*.56)));height:min(900px,calc(100dvh - 92px));margin:16px auto;padding:0;max-width:100%}
.game-immersive .game-layout{border-radius:28px;border:1px solid #d0e4bd44;box-shadow:0 20px 64px #0006,0 0 0 5px #071e1b55;container-type:size}
.game-immersive .stadium-vignette{background:linear-gradient(180deg,#082d2666,transparent 38%,#06241b18 58%,#06241ba6 100%)}
.game-immersive .scorebug{left:14px;top:14px;width:112px;border-radius:14px;background:#082d26ed;border:1px solid #d0e6ae33;overflow:hidden}
.game-immersive .score-top{font-size:8px;padding:6px 8px;letter-spacing:.07em;background:#08251f}
.game-immersive .score-row{grid-template-columns:3px minmax(0,1fr) 18px 24px;gap:5px;padding:4px 8px}
.game-immersive .score-row strong{font-size:11px}.game-immersive .score-row b{font-size:19px}.game-immersive .role-pill{font-size:8px}
.game-immersive .field-toolbar{top:14px;right:14px;gap:4px}.game-immersive .top-right{gap:4px}
.game-immersive .feature-strip button,.game-immersive .icon-button,.game-immersive #sound{width:32px;height:36px;min-width:32px;min-height:36px;padding:3px;border-radius:11px;background:#0a3029ed;border:1px solid #c5ddb03d;justify-content:center}
.game-immersive .feature-strip strong,.game-immersive .feature-strip small{display:none}.game-immersive .feature-strip button>span{font-size:17px}.game-immersive #sound{font-size:18px;gap:1px}.game-immersive #sound span{font-size:7px}
.game-immersive .camera-button{top:62px;right:14px;bottom:auto;min-height:30px;padding:0 9px;font-size:9px;border-radius:9px;background:#0a3029df}
.game-immersive .panel-head{left:14px;right:14px;top:110px;width:auto;max-width:none;padding:4px;margin:0;border-radius:14px;background:#082b25f2;border:1px solid #bbd59d55;z-index:14}
.game-immersive .tab-list{display:flex;gap:2px}.game-immersive .tab{min-height:36px;padding:7px 4px;font-size:10px;border-radius:10px;flex:1}.game-immersive .tab.active{background:#d5f479;color:#153c29;box-shadow:0 2px 8px #0002}
.game-immersive .difficulty-wrap{left:16px;top:165px;gap:7px;font-size:9px;color:#f2f6e6;background:#0b3026db;padding:4px 7px;border-radius:10px;border:1px solid #d1e3b42b}
.game-immersive .difficulty-wrap select{padding:3px 5px;min-height:25px;font-size:10px;background:transparent;border:0;color:#e6f7c3}
.game-immersive #game-controls{left:12px;right:12px;bottom:12px;top:auto;width:auto;padding:14px 14px 10px;border-radius:23px;border:1px solid #bdd79d55;background:linear-gradient(145deg,#133d30f5,#0a2d27f7);box-shadow:0 8px 26px #001b1940;grid-template-columns:minmax(0,1fr) 140px;column-gap:10px;row-gap:0}
.game-immersive #game-controls .match-progress{font-size:9px;grid-column:1/3;grid-row:1;margin:0 0 10px;padding:0 0 9px;border-bottom:1px solid #e2efc91c;text-shadow:none;gap:6px;line-height:14px}
.game-immersive #game-controls .progress-dots{gap:4px}.game-immersive .progress-dots i{width:5px;height:5px}.game-immersive #game-controls .progress-count{font-size:9px}
.game-immersive #game-controls .turn-info{grid-column:1;grid-row:2;align-self:center;padding:0;text-shadow:none;min-width:0}
.game-immersive .turn-overline{font-size:9px;gap:4px;color:#d2ef9c;flex-wrap:wrap}.game-immersive .turn-dot{width:5px;height:5px}
.game-immersive .turn-info h2{font-size:22px;line-height:1.45;margin:8px 0 5px;color:#f5f7e9;letter-spacing:-.04em}
.game-immersive .turn-info p{font-size:10px;line-height:1.65;color:#bbd0ba;max-width:170px}
.game-immersive #game-controls .dpad{grid-column:2;grid-row:2;grid-template-columns:44px 44px 44px;grid-template-rows:40px 40px 40px;gap:4px;margin:0 0 10px;justify-self:end}
.game-immersive .direction{border:1px solid #d6e8b84d;border-bottom:3px solid #0004;background:#284e3d;box-shadow:none;border-radius:13px;color:#f6f8e8;transition:background .12s,box-shadow .12s}
.game-immersive .direction b{font-size:24px;line-height:23px}.game-immersive .direction span{font-size:8px;line-height:10px}.game-immersive .direction:disabled{opacity:.5}.game-immersive .direction.selected{background:#d5f479;border-color:#e8ffac;color:#163722;box-shadow:0 0 0 2px #d5f47933}.game-immersive .select-hint{font-size:8px;letter-spacing:.08em;color:#b4cfa7}
.game-immersive #game-controls #submit{grid-column:1/3;grid-row:3;min-height:47px;padding:10px 12px;border-radius:14px;font-size:12px;background:#e4edd3;border-color:#dae6c4;box-shadow:none}
.game-immersive #game-controls[data-phase=ready] #submit{background:#d5f479;border-color:#eaffaa;box-shadow:0 3px 0 #789a3f}.game-immersive #game-controls #submit:disabled{background:#234b3b;color:#9ab49c;border-color:#c4d9b329}
.game-immersive #game-controls .selection-note{grid-column:1/3;grid-row:4;font-size:8px;min-height:12px;line-height:12px;margin:8px 0 0;color:#aec5ad;text-shadow:none}
.game-immersive #game-controls .history-head{display:none}.game-immersive #game-controls .history{left:0;right:auto;bottom:calc(100% + 10px);width:130px;gap:4px;pointer-events:auto}
.game-immersive .history>span{height:25px;min-width:0;font-size:16px;border-radius:8px;background:#0c3029ed;border-color:#ccdfb34a}.game-immersive .history .homer{background:#d1ee9c;color:#24452e}.game-immersive .history .homer:after{font-size:6px;bottom:-3px}
.game-immersive #game-controls .history-open{left:auto;right:0;bottom:calc(100% + 10px);min-height:29px;padding:5px 10px;border-radius:9px;font-size:9px;background:#0c3029ed}
.game-immersive #timer{font-size:10px;padding:2px 5px;border-radius:5px}
.game-immersive .room-banner{top:165px;left:14px;right:14px;width:auto;margin:0;padding:9px 11px;border-radius:13px;display:flex;flex-wrap:wrap;align-items:center;gap:3px 9px}
.game-immersive .room-banner strong{font-size:19px}.game-immersive .room-banner .mini-label{font-size:7px}.game-immersive .room-banner .text-button{font-size:9px;min-height:28px;padding:3px}.game-immersive .room-banner p{flex-basis:100%;margin:3px 0 0;font-size:9px;line-height:1.5}
.game-immersive .room-banner[hidden]{display:none}
.game-immersive .online-lobby,.game-immersive .matchmaking,.game-immersive .challenge-entry{left:14px;right:14px;top:50%;width:auto;transform:translateY(-40%);max-height:calc(100% - 190px);padding:22px;border-radius:21px;margin:0}
.game-immersive .online-lobby h2,.game-immersive .matchmaking h2{font-size:23px;line-height:1.6;letter-spacing:-.04em}.game-immersive .online-lobby .lobby-description{font-size:11px;line-height:1.8}.game-immersive .online-lobby .primary,.game-immersive .matchmaking .primary{font-size:12px;border-radius:13px}
.game-immersive .pitch-result{left:50%;top:34%;width:calc(100% - 20px);max-width:none}.game-immersive .pitch-result strong{font-size:34px}.game-immersive .pitch-result.home-run strong{font-size:48px}.game-immersive .pitch-result.home-run span{font-size:9px}.game-immersive .pitch-result small{font-size:10px}.game-immersive .homer-ribbon{bottom:46%;font-size:8px;padding:7px}.game-immersive .homer-ring{display:none}.game-immersive .reaction{top:40%;left:20%;font-size:28px}
.game-immersive .error{left:14px;right:14px;top:218px;transform:none;width:auto;font-size:11px;border-radius:12px}
.game-immersive dialog{width:min(400px,calc(100vw - 28px));max-height:calc(100dvh - 90px);border-radius:23px}.game-immersive dialog::backdrop{background:#031a16b8;backdrop-filter:none}
.game-immersive .toast{max-width:min(400px,calc(100vw - 30px));font-size:11px;bottom:25px}
@container(max-height:680px){
 .game-immersive .panel-head{top:103px}.game-immersive .difficulty-wrap,.game-immersive .room-banner{top:155px}
 .game-immersive #game-controls{padding:12px 12px 8px;bottom:10px;grid-template-columns:minmax(0,1fr) 128px;column-gap:8px;border-radius:20px}
 .game-immersive #game-controls .dpad{grid-template-columns:40px 40px 40px;grid-template-rows:37px 37px 37px;margin-bottom:8px}.game-immersive .direction{border-radius:11px}.game-immersive .direction b{font-size:22px}
 .game-immersive .turn-info h2{font-size:20px}.game-immersive .turn-info p{font-size:9px}.game-immersive #game-controls .match-progress{margin-bottom:8px;padding-bottom:7px}.game-immersive #game-controls #submit{min-height:43px;font-size:11px}.game-immersive #game-controls .selection-note{margin-top:6px}
 .game-immersive .pitch-result{top:31%}.game-immersive .pitch-result.home-run strong{font-size:42px}
}
@media(max-width:600px){
 .game-immersive{--header-height:calc(54px + env(safe-area-inset-top));background:#102d24}
 .game-immersive .topbar{height:var(--header-height);padding:env(safe-area-inset-top) 16px 0}.game-immersive .brand{font-size:25px}.game-immersive .prototype{display:none}
 .game-immersive .shell{width:100%;height:calc(100dvh - var(--header-height));max-height:none;margin:0}.game-immersive .game-layout{border:0;border-radius:0;box-shadow:none}
 .game-immersive #game-controls{bottom:max(12px,env(safe-area-inset-bottom))}.game-immersive .account-slot a{font-size:9px;max-width:165px}
}
@media(max-height:560px){.game-immersive{height:auto;min-height:100dvh;overflow:auto}.game-immersive .shell{height:680px;width:min(390px,100%);margin:14px auto}.game-immersive .topbar{height:54px;padding-top:0}.game-immersive .game-layout{border-radius:23px}}

@media(min-width:601px){.game-immersive dialog{width:min(400px,calc(max(320px,(100dvh - 92px)*.56) - 28px));top:60px;max-height:calc(100dvh - 120px)}}
@media(min-width:601px) and (max-height:680px){.game-immersive{height:auto;overflow:auto}.game-immersive .shell{width:360px;height:644px;margin:14px auto}}