/* Device-sized layout. Vertical scrolling stays available at every text size. */
html{overflow-x:clip;width:100%;min-width:0;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip;width:100%;min-width:0;max-width:100%;padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
body.in-game{padding-bottom:env(safe-area-inset-bottom,0px)}
main{width:100%;padding-inline:max(12px,env(safe-area-inset-left,0px)) max(12px,env(safe-area-inset-right,0px))}
.screen,.screen>*{min-width:0}
button,select,input,textarea{max-width:100%;min-width:0}
button,p,h1,h2,h3,small,span,label{overflow-wrap:break-word}
button{white-space:normal}
.mast>a{min-width:0}.mast .shield{flex-shrink:0}.mast .stars{flex-shrink:0}
.welcome,.game-grid,.chapter-grid,.progress-grid,.badges,.champ-hero,.online-rooms{min-width:0}
.welcome>* ,.game-grid>* ,.chapter-grid>* ,.champ-hero>*{min-width:0}
.profile{grid-template-columns:43px minmax(0,1fr)}.profile small{grid-column:2}
.kickoff-badge,.mission-symbol,.mode-icon,.chapter-card .number,.choice b{flex-shrink:0}
.kickoff>span:nth-child(2),.fixture>span:nth-child(2){min-width:0;flex:1}
.choice{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;width:100%;min-width:0;line-height:1.4}.choice-copy{display:block;min-width:0;white-space:normal;overflow-wrap:anywhere}
.choice b{width:32px;min-width:32px}
.board{width:100%;max-width:100%;height:auto}.match{min-width:0;width:100%}
.scoreboard{flex-wrap:wrap;gap:4px 10px}.scoreboard span{min-width:0}
.play-top{flex-wrap:wrap}.play-top>span{text-align:center}
#main-nav{width:100%;left:0;right:0;transform:none;min-width:0;padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
#main-nav button{min-width:0}
/* New decision flow: instruction, pitch, then answers. On wide screens the pitch stays alongside. */
.decision-layout{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:10px}
.decision-heading{min-width:0}.decision-heading .kicker{font-size:11px;margin:0 0 6px;letter-spacing:.6px}
.decision-heading h2{font-size:clamp(21px,5vw,28px);line-height:1.15;margin:0 0 7px}
.decision-heading>p:last-child{font-size:15px;line-height:1.4;margin:0}
.decision-layout>.match{max-width:350px;margin:0 auto}
.decision-panel{min-width:0}.decision-panel .instruction{margin:0 0 9px;font-size:13px;line-height:1.35}
.decision-panel .choice,.decision-simple .choice{font-size:15px;min-height:50px;padding:10px 12px;gap:10px}
.decision-buttons{margin-top:10px;gap:8px}.decision-buttons .primary,.decision-buttons .outline{margin-top:0}
.decision-steps{margin:10px 0}.decision-steps span{font-size:11px;padding:7px 4px;min-width:0}
.decision-direction{font-size:11px;margin:4px 0 9px}
.decision-layout .key{padding:7px 8px;gap:10px;font-size:11px}
.decision-layout .scoreboard{padding:8px 12px;font-size:10px}
.decision-reflect summary{cursor:pointer;font-weight:700}.decision-reflect p{margin:10px 0 0}
.decision-reflect button{width:100%;margin:8px 0 0;text-align:left}
#decision-board,#play .board{touch-action:pan-y}
#decision-board svg .draggable{touch-action:none}
@media(min-width:760px){
 main{padding:28px 20px}.profile{grid-template-columns:48px minmax(0,1fr)}
 .decision-layout{grid-template-columns:minmax(0,360px) minmax(0,1fr);column-gap:26px;align-items:start}
 .decision-layout>.match{grid-column:1;grid-row:1 / span 2;max-width:360px}
 .decision-heading{grid-column:2;grid-row:1}.decision-panel{grid-column:2;grid-row:2}
 #main-nav{left:50%;right:auto;transform:translateX(-50%);max-width:780px}
}
@media(max-width:759px){
 .decision-layout>.match{width:100%;max-width:none}
 .decision-layout>.decision-heading{order:0}.decision-layout>.match{order:1}.decision-layout>.decision-panel{order:2}
 .champ-hero{grid-template-columns:minmax(0,1fr) 80px;padding:20px 16px;gap:10px}
 .champ-hero h2{font-size:27px}.champ-hero .hero-player{align-self:end}
 .champ-hero .hero-player svg{max-width:100px}
 .welcome h1{font-size:clamp(29px,8vw,37px)}
 .online-banner{gap:10px;padding:16px}.online-banner>span:first-child{font-size:24px}.online-banner b{font-size:18px}
 .rule-layout{grid-template-columns:minmax(0,1fr)}.rule-picture{position:static}
 .rules-selects{grid-template-columns:minmax(0,1fr)}
 .online-rooms{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:359px){
 .mast{padding:12px 10px}.mast a{font-size:14px}.mast small{font-size:9px}.mast .stars{font-size:13px;padding:6px 8px}
 main{padding-top:15px}.shield{width:32px;height:39px}
 .champ-hero{grid-template-columns:minmax(0,1fr)}.hero-player{display:none}
 .kickoff{padding:14px;gap:9px}.kickoff b{font-size:20px}.kickoff-badge{width:34px;height:34px}
 .game-grid,.progress-grid,.rules-grid{grid-template-columns:minmax(0,1fr)}
 .decision-steps span{font-size:10px}.decision-heading h2{font-size:21px}
 .decision-panel .choice,.decision-simple .choice{font-size:14px}
 .fixture{grid-template-columns:36px minmax(0,1fr) 16px;gap:8px;padding:12px}.fixture>span:first-child{width:34px;height:34px}
}
/* Landscape phones use both columns without imposing a fixed-height, clipped play area. */
@media(min-width:600px) and (max-height:550px) and (orientation:landscape){
 .decision-layout{grid-template-columns:minmax(0,38%) minmax(0,1fr);column-gap:18px;align-items:start}
 .decision-layout>.match{grid-column:1;grid-row:1 / span 2;width:100%;max-width:290px}
 .decision-heading{grid-column:2;grid-row:1}.decision-panel{grid-column:2;grid-row:2}
 .decision-heading h2{font-size:22px}.decision-heading>p:last-child{font-size:14px}
 .decision-steps{margin:7px 0}.mast{padding-block:10px}
}

/* Mission text is one readable column beside its icon at every screen size. */
.decision-missions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22em),1fr));gap:14px}
.decision-mission{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;width:100%;min-height:0;padding:16px;text-align:left}
.decision-mission .mission-symbol{width:40px;font-size:30px;margin:0;line-height:1.3}
.decision-mission .mission-copy{display:block;min-width:0}
.decision-mission .mission-copy b{display:block;font-size:19px;line-height:1.3;margin:0;overflow-wrap:anywhere}
.decision-mission .mission-copy small{display:block;font-size:15px;line-height:1.45;margin:6px 0 0;overflow-wrap:anywhere}
.decision-mission .mission-copy .mission-duration{font-size:13px;margin-top:10px;color:#6a5660}