/* One tap per card: select or remove, and show the move on the real actor. */
.ribbon-setup .loadout-shell{grid-template-columns:.85fr 1.25fr;max-width:1120px}
.ribbon-setup .loadout-head{justify-content:flex-start}.ribbon-setup .loadout-head h1{font-size:25px}.ribbon-setup #setupStep{background:#dfff70;color:#192718;border-radius:7px;padding:6px 9px;font-weight:750;font-size:13px}
.ribbon-setup .loadout-content{min-width:0;max-height:calc(100dvh - 210px);overflow-y:auto;overscroll-behavior:contain}
.ribbon-group{min-width:0;margin:0 0 9px;--group-color:#dfff70}
.ribbon-group h2{display:flex;align-items:center;justify-content:space-between;color:var(--group-color);font-size:12px;line-height:16px;letter-spacing:.06em;margin:0 0 5px}.ribbon-group h2 span{font-size:11px;letter-spacing:0}
.move-ribbon{display:flex;gap:7px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom;padding:2px 1px 3px}
.move-ribbon::-webkit-scrollbar{display:none}.move-ribbon:focus-within{scroll-snap-type:none}
.move-ribbon .ribbon-card{position:relative;display:flex;flex:0 0 calc((100% - 21px)/3.6);min-width:90px;min-height:66px;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:7px 5px;background:#1c2638;border:1px solid #4d5a72;border-radius:10px;color:#fff5df;scroll-snap-align:start;touch-action:pan-x pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.ribbon-card svg{display:block;width:33px;height:27px;color:#e2d6b7;pointer-events:none}.ribbon-card strong{font-size:12px;font-weight:650;line-height:1.15;max-width:100%;overflow-wrap:anywhere;pointer-events:none}
.pick-check{display:none;position:absolute;right:5px;top:5px;width:15px;height:15px;line-height:15px;border-radius:50%;background:#192718;color:#fffbe8;font-size:10px;font-weight:850;pointer-events:none}
.ribbon-card[aria-pressed=true]{background:var(--group-color);color:#172320;border-color:var(--group-color);box-shadow:inset 0 0 0 1px #ffffff40}.ribbon-card[aria-pressed=true] svg{color:#253b30}.ribbon-card[aria-pressed=true] .pick-check{display:block}
.moves-guide{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;line-height:18px;color:#c5d4e7;margin:0 0 10px}.moves-guide span:last-child{color:#a9bad1;white-space:nowrap}
.selected-moves{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;min-height:44px}
.selected-chip{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:3px;min-width:0;min-height:44px;padding:8px 5px;border:0;background:none;border-radius:6px;color:#f8f1df;font-size:11px;line-height:1.1;overflow:hidden;white-space:nowrap;font-weight:550}
.selected-chip>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}.chip-remove{flex:none;font-size:17px;line-height:20px;color:var(--group-color)}
.selected-chip:before{content:'';position:absolute;inset:7px 0;z-index:-1;border:1px solid var(--group-color);border-radius:6px;background:color-mix(in srgb,var(--group-color) 10%,#1b2738)}.selected-chip.empty{justify-content:center;font-size:10px;color:#667791;cursor:default}.selected-chip.empty:before{background:none;border:1px dashed #455570}.selected-chip:hover:not(.empty){color:var(--group-color);background:none}.selected-chip:focus-visible{outline-offset:-2px}
.ribbon-setup .loadout-actions>p{min-height:28px;font-size:11px;display:flex;align-items:center}.ribbon-setup #loadoutConfirm{font-size:15px}
.ribbon-setup[data-step=settings] .loadout-shell{display:flex;flex-direction:column;max-width:680px;height:calc(100dvh - 48px);min-height:0;gap:12px}.ribbon-setup[data-step=settings] .loadout-content{flex:1;min-height:0;max-height:none;overflow-y:auto}.ribbon-setup[data-step=settings] .loadout-actions{flex:none}
.setup-summary{display:flex;align-items:center;gap:12px;border:1px solid #46546b;border-radius:10px;padding:12px;margin:0 0 22px;min-height:54px}.setup-summary b{font-size:15px;flex:1}.setup-summary>span{font-size:12px;color:#b9c8dd}.setup-summary button{font-size:12px;background:none;border:0;padding:6px;min-height:44px}
#setupSettings h2{font-size:14px;letter-spacing:.08em;margin:0 0 12px}.setup-track{display:flex;align-items:center;gap:12px;padding:16px;background:#243047;border:1px solid #526079;border-radius:12px}.setup-track b{flex:1;font-size:18px;min-width:0;overflow-wrap:anywhere}.setup-track button{min-width:44px;min-height:44px;font-size:19px;background:#34445b}.setup-track .record-disc{width:44px;height:44px}
.setup-pick-song{display:block;padding:12px 4px;font-size:13px;min-height:44px;background:none;border:0;margin:4px auto 20px;color:#e4eadc}.setup-venues .venue-choices{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 20px;gap:10px}.setup-venues .venue-choice .venue-art{height:110px}.setup-venues .venue-choice>span{min-height:38px;padding:8px 10px}.setup-venues .venue-choice>span b{font-size:13px}#setupSettings #loadoutModes{margin-top:8px}
@media(max-width:700px),(max-height:460px) and (orientation:landscape) and (max-width:1000px){
 .ribbon-setup .loadout-head{min-height:50px;padding:4px 12px;gap:10px}.ribbon-setup .loadout-head h1{font-size:21px}.ribbon-setup #setupStep{font-size:12px;padding:5px 8px}
 .ribbon-setup .loadout-preview{height:clamp(150px,21dvh,185px);margin:0 12px}.ribbon-setup .loadout-preview #loadoutCanvas{bottom:44px}.ribbon-setup .preview-caption{height:44px;padding:3px 9px}.ribbon-setup .preview-caption>div{display:flex;align-items:center;gap:8px;min-width:0}.ribbon-setup .preview-caption small{font-size:8px;max-width:90px}.ribbon-setup .preview-caption b{font-size:15px;margin:0}.ribbon-setup .preview-caption button{min-height:38px;min-width:44px}
 .ribbon-setup .loadout-content{flex:1;min-height:0;max-height:none;overflow-y:auto;padding:9px 12px 0}.ribbon-group{margin-bottom:6px}.ribbon-group h2{font-size:11px;line-height:14px;margin-bottom:3px}.ribbon-group h2 span{font-size:10px}.move-ribbon{gap:6px;padding-bottom:2px}.move-ribbon .ribbon-card{flex-basis:calc((100% - 18px)/3.6);min-width:86px;min-height:62px;padding:6px 5px;gap:4px}.ribbon-card svg{width:30px;height:25px}.ribbon-card strong{font-size:11px}.pick-check{width:14px;height:14px;line-height:14px;font-size:10px;top:3px;right:3px}.selected-moves{gap:5px}.selected-chip{font-size:10px;padding:8px 3px}
 .ribbon-setup .loadout-actions{padding:7px 12px calc(8px + env(safe-area-inset-bottom));gap:5px}.ribbon-setup .loadout-actions>p{font-size:10px;line-height:1.2;margin:0;min-height:26px}.ribbon-setup #loadoutConfirm{min-height:48px;font-size:14px}
 .ribbon-setup[data-step=settings] .loadout-shell{max-width:none;height:calc(100dvh - env(safe-area-inset-top));gap:0}.ribbon-setup[data-step=settings] .loadout-content{padding:12px 16px}.setup-summary{margin-bottom:20px;padding:8px 10px;gap:9px}.setup-summary b{font-size:14px}.setup-summary>span{font-size:11px}.setup-summary button{font-size:11px;min-height:36px;padding:4px}.setup-track{padding:14px 12px;gap:12px}.setup-track b{font-size:16px}.setup-track .record-disc{width:38px;height:38px}#setupSettings h2{font-size:13px;margin-bottom:10px}.setup-venues .venue-choices{gap:8px;margin-bottom:18px}.setup-venues .venue-choice .venue-art{height:100px}.setup-venues .venue-choice>span{min-height:36px}.setup-venues .venue-choice>span b{font-size:12px}.setup-pick-song{font-size:12px;margin-bottom:16px}
}
@media(max-width:370px),(max-height:650px) and (orientation:portrait){.ribbon-setup .loadout-preview{height:144px}.ribbon-setup .loadout-head h1{font-size:18px}.ribbon-setup .preview-caption small{display:none}.ribbon-setup .loadout-actions>p{font-size:10px}.ribbon-setup #loadoutConfirm{font-size:13px}.setup-track b{font-size:14px}.setup-summary{flex-wrap:wrap;margin-bottom:16px}.setup-summary button{margin-left:auto}.setup-venues .venue-choice .venue-art{height:80px}}
@media(max-height:460px) and (orientation:landscape) and (max-width:1000px){
 .ribbon-setup .loadout-shell{display:grid;grid-template-columns:.85fr 1.15fr;grid-template-rows:44px 1fr auto;gap:6px 12px;height:calc(100dvh - 16px)}.ribbon-setup .loadout-preview{height:auto;grid-row:2/4;margin:0}.ribbon-setup .loadout-content{max-height:none;grid-column:2;grid-row:2;padding:0 2px}.ribbon-setup .loadout-actions{grid-column:2;grid-row:3;padding:5px 0 0}.ribbon-setup .loadout-actions>p{font-size:9px}.ribbon-setup #loadoutConfirm{min-height:40px;font-size:13px}.move-ribbon .ribbon-card{min-width:78px}.ribbon-setup[data-step=settings] .loadout-shell{display:flex;height:calc(100dvh - 16px);max-width:720px}.ribbon-setup[data-step=settings] .loadout-content{padding:4px 10px}.setup-summary{margin-bottom:12px}.setup-venues .venue-choices{grid-template-columns:repeat(4,minmax(0,1fr))}.setup-venues .venue-choice .venue-art{height:75px}
}
@media(prefers-reduced-motion:reduce){.move-ribbon{scroll-snap-type:none}}


@media(max-width:700px),(max-height:460px) and (orientation:landscape) and (max-width:1000px){.moves-guide{font-size:11px;margin-bottom:8px}.ribbon-card strong{font-size:12px}.selected-chip.empty{font-size:10px}}
@media(max-width:370px),(max-height:650px) and (orientation:portrait){.moves-guide{font-size:10px}.ribbon-setup .loadout-head h1{font-size:20px}}

/* The preparation step has one visible choice for music and one for place. */
.setup-tracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:18px}
.setup-tracks button{min-width:0;min-height:78px;padding:12px 6px;background:#202d43;border:1px solid #526079;border-radius:10px;color:#fff4df}
.setup-tracks strong{display:block;font-size:13px;line-height:1.25;font-weight:650;overflow-wrap:anywhere}.setup-tracks small{display:block;margin-top:7px;font-size:10px;color:#adbed6}
.setup-tracks button[aria-pressed=true]{background:#dfff70;color:#172720;border-color:#dfff70}.setup-tracks button[aria-pressed=true] small{color:#34452e}
#setupSettings h2{font-size:15px;letter-spacing:0;margin:0 0 9px}#setupSongStatus{margin:-8px 0 16px;font-size:12px;color:#bfcee2}
.setup-more{margin-top:8px;border-top:1px solid #35445b}.setup-more>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;cursor:pointer;font-size:13px;color:#cbd6e6;list-style:none}.setup-more>summary::-webkit-details-marker{display:none}.setup-more>summary:after{content:'+';font-size:20px}.setup-more[open]>summary:after{content:'−'}.setup-more>summary span{margin-left:auto;color:#91a5c0;font-size:12px}.setup-more #loadoutModes{margin-bottom:12px}.setup-more .setup-pick-song{margin:0 0 8px;padding:10px 4px;min-height:44px}
.ribbon-setup[data-step=settings] #loadoutNotice:empty{display:none}
@media(max-width:700px),(max-height:460px) and (orientation:landscape) and (max-width:1000px){
 .setup-tracks{gap:7px;margin-bottom:18px}.setup-tracks button{min-height:76px;padding:10px 5px}.setup-tracks strong{font-size:12px}.setup-venues .venue-choice .venue-art{height:82px}.setup-venues .venue-choices{margin-bottom:12px}.setup-more>summary{font-size:12px}.ribbon-setup[data-step=settings] .loadout-content{padding-top:14px}
}
@media(max-width:370px),(max-height:650px) and (orientation:portrait){.setup-tracks button{min-height:72px}.setup-tracks strong{font-size:11px}.setup-venues .venue-choice .venue-art{height:70px}}

.ribbon-card,.selected-chip{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.ribbon-card[data-holding=true],.selected-chip[data-holding=true]{box-shadow:inset 0 0 0 2px var(--group-color);filter:brightness(1.12)}

.my-variations{margin:0 0 8px;border:1px solid #40536d;border-radius:8px;padding:5px 8px}
.my-variations summary{cursor:pointer;min-height:32px;line-height:32px;font-size:12px}
.my-variations summary span{margin-left:4px;color:#dfff70}
.my-variation-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,128px),1fr));gap:4px;padding:3px 0 4px}
.my-variation-list button{min-height:44px;padding:6px 8px;text-align:left;overflow-wrap:anywhere;line-height:1.2}
.my-variation-list strong,.my-variation-list small{display:block}
.my-variation-list small{margin-top:3px;font-size:10px;color:#a9bbd2}
.ribbon-card[data-own-move=true] strong{color:#dfff70}
.ribbon-card[data-own-move=true][aria-pressed=true] strong{color:inherit}
