/* Assets occupy bounded slots. Text and controls retain their own layout tracks. */
.ui-icon{width:42px;height:42px;object-fit:contain;flex:none}
.stats>div{display:grid;grid-template-columns:38px 1fr;column-gap:9px;align-content:center}
.stats .ui-icon{grid-row:1/3;width:36px;height:42px;align-self:center}.stats span,.stats strong{grid-column:2}
.choice-list button{display:flex;align-items:center;gap:14px;min-height:74px}
.choice-list .ui-icon{width:58px;height:58px}
.purchase-label h3{display:flex;align-items:center;gap:10px}
.event-illustration{aspect-ratio:5/4;object-fit:contain}
.list-thumbnail{width:68px;height:68px;object-fit:contain;flex:none}
.measure-card{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);align-content:start}
.measure-card>.list-thumbnail{grid-column:1;grid-row:1/4;width:58px;height:64px;align-self:center}
.measure-card>.card-heading,.measure-card>p,.measure-card>.card-tail{grid-column:2}
.measure-card:not(:has(>.list-thumbnail)){grid-template-columns:1fr}
.measure-card:not(:has(>.list-thumbnail))>*{grid-column:1}
.center[data-screen="measure-confirm"] .list-thumbnail{width:110px;height:110px}
.panel.event-layout .content-unit:last-child{gap:20px}
.panel.event-layout .opportunity-detail{gap:18px}
.game-dice{width:130px;height:130px;object-fit:contain}.dice-stage{width:130px;height:130px}

/* Shared 11x11 perimeter: a 5:4 board on desktop, square containers on phones. */
#stage-viewport.route-stage{display:flex;justify-content:center;align-items:center;container-type:size}
#board.board{width:min(100cqw,125cqh);height:min(80cqw,100cqh);min-width:0;min-height:0;grid-template-columns:repeat(11,minmax(0,1fr));grid-template-rows:repeat(11,minmax(0,1fr));gap:3px;padding:8px;background:#e4e9dc}
#board.board>.center{grid-column:2/11;grid-row:2/11;margin:6px;min-height:0;min-width:0;padding:0}
#board.board>.tile{background:transparent;box-shadow:none;border-radius:4px;padding:0;min-height:0;min-width:0}
#board.board>.tile.start{background:var(--start);color:var(--endpoint-text);border-top:2px solid #a0b29c}
#board.board>.tile.finish{background:var(--finish);color:var(--endpoint-text);border-left:2px solid #a0b29c}
.tile-art{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.tile .year{font-size:clamp(13px,2.5cqh,24px)}.tile .sub{font-size:clamp(9px,1.7cqh,13px)}
.tile.active{outline:2px solid var(--accent);outline-offset:0;background:#e5317010!important}
.token-layer{position:relative;z-index:6;pointer-events:none;min-width:0;min-height:0;align-self:stretch;justify-self:stretch}
.token-layer .token{position:absolute;width:clamp(30px,7.8cqh,70px);height:clamp(34px,8.8cqh,79px);top:auto;right:auto;left:50%;bottom:45%;transform:translateX(-50%);pointer-events:none}
.tile.start,.tile.finish{justify-content:flex-end;padding-bottom:2px!important}
.pawn-art{display:block;object-fit:contain;width:100%;height:100%;filter:none}
.board .route-arrow{display:none}
.board .panel{padding:4px 10px;gap:10px;justify-content:center}
.board .panel>.content-unit{flex:0 1 auto}
.board .screen-heading{display:block!important;text-align:center;padding:12px 8px 6px!important}
.board .screen-heading #phase{font-size:14px;margin-bottom:5px}
.board .screen-heading h2{font-size:24px}
.board #panel-actions{padding:8px 12px 14px!important}
.board .actions{justify-content:center}
.movement-center{gap:10px}.movement-center p:empty{display:none}
.route-legend{display:flex;justify-content:center;gap:15px;font-size:14px}
.route-legend>span{display:flex;align-items:center;gap:4px}.route-legend .tile-art{width:28px;height:24px}
.route-goal{display:block;text-align:center;color:var(--muted);font-size:14px}

@media(max-width:759px), (max-height:500px) and (max-width:999px){
 :root{font-size:16px}
 .phone#app{height:100dvh;min-height:0;max-width:none;grid-template-rows:auto auto minmax(0,1fr);padding:6px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:6px}
 .phone header{gap:4px;min-height:44px}.phone h1{font-size:18px}.phone #restart{font-size:14px;padding:5px;min-height:48px}
 .phone .stats{grid-template-columns:1fr 1fr;padding:6px 0;gap:4px 0}
 .phone .stats>div{grid-template-columns:24px 1fr;padding:0 9px;gap:0 5px}
 .phone .stats>div:last-child{grid-column:1/-1;grid-template-columns:24px auto 1fr;align-items:center}
 .phone .stats>div:last-child strong{grid-column:3;justify-self:end}.phone .stats>div:last-child .ui-icon{grid-row:1}
 .phone .stats span{font-size:12px;margin:0}.phone .stats strong{font-size:18px;line-height:1.3}
 .phone .stats .ui-icon{width:24px;height:28px}
 .phone #stage-viewport{height:100%;min-height:0}
 .phone #board.content-stage{height:100%;min-height:0}
 .phone .content-stage>.center{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
 .phone .screen-heading{padding:10px 12px 6px}.phone h2{font-size:22px;line-height:1.3}
 .phone #phase{font-size:13px}
 .phone .content-stage .panel,.phone .content-stage .panel.catalog-panel{display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;overflow-x:visible;overscroll-behavior:contain;min-height:0;padding:10px 12px;gap:14px}
 .phone .content-unit{flex-shrink:0;min-height:auto}
 .phone .content-stage .panel.split{gap:12px}
 .phone .art-container{height:130px;contain:size;flex:none}
 .phone .panel.split>.content-unit:has(>.art-container){flex:0 0 130px}
 .phone .center[data-screen="welcome"] .art-container,.phone .center[data-screen="ready"] .art-container{height:150px}
 .phone .center[data-screen="welcome"] .panel>.content-unit:has(>.art-container),.phone .center[data-screen="ready"] .panel>.content-unit:has(>.art-container){flex-basis:150px}
 .phone .welcome-copy{gap:8px}.phone .welcome-copy p{font-size:16px;line-height:1.6}
 .phone #panel-actions,.phone .content-stage #panel-actions{padding:8px;gap:6px}
 .phone .actions{gap:6px;display:flex;flex-wrap:wrap}.phone .actions button,.phone .actions a{flex:1;min-width:100px}
 .phone button,.phone .button-link,.phone select,.phone .catalog-card button,.phone .measure-browser .card-tail button,.phone .measure-category-tabs button,.phone .quantity-stepper button{min-height:48px;font-size:16px}
 .phone .choice-list{grid-template-columns:1fr 1fr;gap:8px}
 .phone .choice-list button{padding:9px 6px;font-size:15px;gap:5px;flex-direction:column;min-height:78px}
 .phone .choice-list .ui-icon{width:36px;height:36px}
 .phone .consultant-row{grid-template-columns:minmax(0,1fr) auto;padding:10px;gap:7px}
 .phone .consultant-row h3{font-size:16px}.phone .consultant-row p{font-size:14px}
 .phone .catalog-card h3{font-size:17px;line-height:1.35}.phone .catalog-card p{font-size:15px;line-height:1.45}
 .phone .measure-card{grid-template-columns:52px minmax(0,1fr)}
 .phone .measure-card>.list-thumbnail{width:52px;height:58px;grid-row:1/3}
 .phone .measure-card>.card-tail{grid-column:1/-1;gap:8px}
 .phone .measure-card:not(:has(>.list-thumbnail)){grid-template-columns:1fr}
 .phone .card-heading{flex-wrap:wrap}.phone .card-heading h3{min-width:100px}
 .phone .card-price{font-size:15px}.phone .card-tail{font-size:14px;line-height:1.4}
 .phone .purchase-row{padding:12px;gap:8px}.phone .carbon-purchases{gap:14px}
 .phone .metrics{gap:12px}.phone .metrics strong{font-size:22px}.phone .metrics>div{min-width:95px}
 .phone .requirements li{font-size:16px}.phone .panel.event-layout .content-unit:last-child{gap:12px}
 .phone #stage-viewport.route-stage{overflow:visible;min-height:0;container-type:size}
 .phone #board.board{width:min(100cqw,100cqh);height:min(100cqw,100cqh);min-width:0;min-height:0;grid-template-columns:repeat(11,minmax(0,1fr));grid-template-rows:repeat(11,minmax(0,1fr));gap:1px;padding:3px}
 .phone #board.board>.center{grid-column:2/11;grid-row:2/11;display:grid;grid-template-rows:auto minmax(0,1fr) auto;margin:3px;height:auto}
 .phone #board.board>.tile{min-height:0;font-size:10px;line-height:1.1}
 .phone .tile.finish .sub{display:none}.phone .tile .year{font-size:10px;line-height:1.1}
 .phone .token-layer .token{width:clamp(25px,9cqw,42px);height:clamp(29px,10.2cqw,48px);bottom:45%}
 .phone .board .screen-heading{padding:5px 3px 2px!important}.phone .board .screen-heading h2{font-size:18px}.phone .board .screen-heading #phase{font-size:12px;margin-bottom:2px}
 .phone .board .panel{padding:1px 4px;gap:3px;display:flex;flex-direction:column;justify-content:center}
 .phone .board .panel>.content-unit{flex:0 1 auto;min-height:0}
 .phone .board .dice-stage,.phone .board .game-dice{width:60px;height:60px}
 .phone .board .movement-center{gap:3px;font-size:14px}
 .phone .board .movement-center select{min-height:38px;padding:3px 12px}
 .phone .board #panel-actions{padding:3px 4px 5px!important}
 .phone .board .actions{gap:4px;flex-wrap:nowrap}.phone .board .actions button{min-width:0;min-height:48px;padding:5px;font-size:14px}
 .phone .route-legend{font-size:12px;gap:5px}.phone .route-legend .tile-art{width:18px;height:17px}.phone .route-goal{font-size:12px}
 .phone .board .route-legend>span{gap:1px}
 .phone #debug-controls{display:none}.phone:has(.center[data-screen="debug"]) #debug-controls{display:flex}
}
@media(max-width:759px) and (max-height:660px){
 .phone .content-stage .panel.split>.content-unit:has(>.art-container){flex-basis:84px}
 .phone .content-stage .art-container{height:84px}
 .phone .center[data-screen="ready"] .panel>.content-unit:has(>.art-container){flex-basis:84px}
 .phone .center[data-screen="ready"] .art-container{height:84px}
 .phone .center[data-screen="ready"] .choice-list button{flex-direction:row;min-height:56px;font-size:14px;gap:4px;padding:8px 6px}
 .phone .center[data-screen="ready"] .choice-list .ui-icon{width:24px;height:24px;flex-shrink:0}
 .phone .center[data-screen="welcome"] .panel>.content-unit:has(>.art-container){flex-basis:100px}
 .phone .center[data-screen="welcome"] .art-container{height:100px}
 .phone .board .route-goal{font-size:11px}
}

.report-card{display:grid;grid-template-columns:60px minmax(0,1fr);align-content:start}.report-card>.list-thumbnail{grid-column:1;grid-row:1/4;width:60px;height:60px}.report-card>h3,.report-card>.card-heading,.report-card>p{grid-column:2}

@media(max-width:759px), (max-height:500px) and (max-width:999px){.phone .card-heading .card-price{flex-basis:100%;text-align:right}}

@media(max-width:759px) and (max-height:660px){
 .phone .panel.event-layout>.content-unit:has(>.art-container){flex-basis:60px}
 .phone .panel.event-layout .art-container{height:60px}
 .phone .panel.event-layout .content-unit:last-child{gap:8px}
}
@media(max-height:500px) and (max-width:999px){
 .phone#app{grid-template-rows:48px 42px minmax(0,1fr);gap:4px;padding-block:4px}
 .phone header{min-height:0}.phone .stats{grid-template-columns:1fr 1fr 1.5fr;gap:0;padding:2px}
 .phone .stats>div:last-child{grid-column:3;grid-template-columns:24px 1fr}
 .phone .stats>div:last-child .ui-icon{grid-row:1/3}.phone .stats>div:last-child strong{grid-column:2;justify-self:start}
 .phone .stats span{font-size:11px}.phone .stats strong{font-size:15px}
 .phone .board .screen-heading h2{font-size:15px}.phone .board .screen-heading #phase{font-size:10px}
 .phone .board .screen-heading{padding:2px!important}
 .phone .board .game-dice,.phone .board .dice-stage{width:36px;height:36px}
 .phone .board .route-legend{font-size:10px;gap:3px}.phone .board .route-legend .tile-art{width:12px;height:12px}
 .phone .board .route-goal{font-size:10px;line-height:1.1}.phone .board #panel-actions{padding:0!important}
 .phone .board .actions button{font-size:12px;min-height:48px;padding:1px}
 .phone .board .movement-center{font-size:12px;gap:0}
 .phone .board .movement-center label{display:none}.phone .board .movement-center select{min-height:30px;font-size:14px}
 .phone .tile .year{font-size:9px}.phone #board.board>.tile{font-size:9px}
}