.mode-shell{height:100dvh;display:grid;place-items:center;padding:24px;overflow:hidden;background:#f8f5ee}
.mode-card{position:relative;width:min(720px,100%);text-align:center}
.mode-card h1{font-size:4.5rem;margin:.4rem 0 2rem}
.mode-back{position:absolute;left:0;top:0;width:46px;height:46px;display:grid;place-items:center;border:1px solid #e2ddd2;border-radius:14px;background:#fff;color:#14231f}
.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mode-options label{cursor:pointer}
.mode-options input{position:absolute;opacity:0}
.mode-options label>span{height:190px;display:grid;place-items:center;align-content:center;gap:8px;border:2px solid transparent;border-radius:24px;background:#fff;box-shadow:0 10px 35px #152a2314;transition:.2s}
.mode-options i{font-size:3rem;color:#0b6255}
.mode-options strong{font-size:1.25rem}
.mode-options small{color:#6f7975}
.mode-options input:checked+span{border-color:#0b6255;box-shadow:0 0 0 4px #0b62551a}
.people-count{margin:16px 0 0;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-radius:16px;background:#fff}
.people-count>span{font-size:.78rem;font-weight:800}
.people-count div{display:flex;gap:8px}
.people-count label input{position:absolute;opacity:0}
.people-count b{width:42px;height:42px;display:grid;place-items:center;border:1px solid #e2ddd2;border-radius:12px;cursor:pointer}
.people-count input:checked+b{background:#0b6255;color:#fff;border-color:#0b6255}
.mode-card .minimal-primary{margin-top:16px}

@media(max-width:767px){
 .mode-card h1{font-size:3.2rem}
 .mode-options label>span{height:150px}
 .mode-options i{font-size:2.4rem}

 body:has(.simple-selection){height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto}
 .simple-selection.selection-shell{height:auto;min-height:100dvh;padding:20px 14px calc(108px + env(safe-area-inset-bottom));overflow:visible}
 .simple-selection .selection-header{height:auto;margin:0 2px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
 .simple-selection .selection-header>div{min-width:0}
 .simple-selection .selection-header h1{font-size:2.35rem;line-height:1;margin:.15rem 0}
 .simple-selection .selection-header .eyebrow{font-size:.62rem}
 .simple-selection .session-code{flex:none;margin:0;padding:.45rem .55rem;font-size:.58rem}
 .simple-selection .costume-grid{height:auto!important;display:grid;grid-template-columns:1fr!important;grid-template-rows:none!important;gap:12px}
 .simple-selection .simple-costume{min-height:116px;display:grid;grid-template-columns:112px minmax(0,1fr);border-radius:18px;transform:none}
 .simple-selection .simple-costume:has(input:checked){transform:none}
 .simple-selection .simple-costume .costume-art{height:116px!important;min-height:116px;border-radius:0;font-size:2.35rem}
 .simple-selection .simple-costume .card-body{height:auto!important;min-width:0;padding:16px;display:flex;flex-direction:column;justify-content:center}
 .simple-selection .simple-costume h2{font-size:1.35rem;line-height:1.05;margin:.3rem 0;white-space:normal;overflow-wrap:anywhere}
 .simple-selection .simple-costume .select-check{right:auto;left:82px;top:10px;width:26px;height:26px}
 .simple-selection .selection-dock{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));transform:none;width:auto;padding:9px;border-radius:17px;gap:10px}
 .simple-selection .selection-dock .btn{min-height:48px;display:flex;align-items:center;justify-content:center}
 .simple-selection .selection-dock .btn-outline-dark{width:48px;padding:0;font-size:0}
 .simple-selection .selection-dock .btn-outline-dark i{font-size:1.15rem;margin:0}
 .simple-selection .selection-dock .btn-brand{flex:1;padding-left:18px!important;padding-right:18px!important}

 .result-shell.simple-result{height:auto;min-height:100dvh;overflow:visible}
 .result-shell.simple-result .result-photo{height:auto!important;min-height:0;display:block;overflow:visible;background:#10241f}
 .result-shell.simple-result .result-photo>img{display:block;width:100%;height:auto!important;max-height:none;object-fit:contain!important;object-position:center}
 .result-shell.simple-result .result-panel{min-height:auto;padding:30px 20px calc(30px + env(safe-area-inset-bottom))}
 .result-shell.simple-result .result-actions{width:100%;align-items:stretch;gap:12px}
 .result-shell.simple-result .qr-card{flex:none}
 .result-shell.simple-result .action-stack{min-width:0;flex:1}
}

@media(min-width:768px) and (max-height:800px){
 .mode-card h1{font-size:3.5rem;margin-bottom:1rem}
 .mode-options label>span{height:150px}
}