@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--paper:#f7f7ef;--ink:#183c33;--muted:#778079;--line:#dcdfd5;--green:#d9f28a}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #789e42;outline-offset:4px}header{height:94px;margin:0 5%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{color:var(--ink);text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.7px;display:flex;align-items:center;gap:8px}.brand>span:last-child{font-weight:500}.brand-icon{font-size:38px;margin-right:5px}.header-right{display:flex;gap:30px;align-items:center}.local-badge{font-size:11px;color:var(--muted)}.local-badge i{display:inline-block;width:6px;height:6px;background:#78995c;border-radius:50%;margin-right:6px}.text-button{border:0;background:none;color:var(--ink);font-size:12px;padding:10px 0}main{padding:0 5%}.intro{padding:46px 0 34px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px}.intro h1{font-family:Manrope,Arial,sans-serif;font-weight:500;letter-spacing:-2.4px;font-size:clamp(32px,4vw,52px);margin:12px 0}.intro p{font-size:14px;color:var(--muted);margin:0}.workspace{display:grid;grid-template-columns:340px minmax(0,1fr);min-height:620px;border:1px solid var(--line);border-radius:16px;overflow:hidden}.roster-panel{padding:28px 25px;background:#fffef9;border-right:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:center}h2{font-family:Manrope,Arial,sans-serif;font-weight:600;font-size:23px;letter-spacing:-.7px;margin:11px 0}.count{font-family:'DM Sans',sans-serif;border:1px solid var(--line);border-radius:20px;font-size:11px;padding:3px 7px;vertical-align:middle;margin-left:5px}.add-button{background:var(--ink);color:white;border:0;width:34px;height:34px;border-radius:50%;font-size:25px;font-weight:400}.hint{color:var(--muted);font-size:12px;margin:6px 0 22px}.roster{display:flex;flex-direction:column;gap:9px;max-height:380px;overflow:auto;padding:2px}.person{display:flex;align-items:center;gap:11px;padding:12px 10px;border:1px solid #e4e5dc;border-radius:9px;background:#fff;cursor:grab}.person:active{cursor:grabbing}.grip{font-size:16px;color:#b4b8ac;letter-spacing:-3px}.avatar{width:35px;height:35px;border-radius:9px;background:var(--person-color);display:grid;place-items:center;font-size:12px;font-weight:700;color:#213c32;flex-shrink:0}.person-info{flex:1;min-width:0}.person-name{display:block;font-size:13px;font-weight:600;overflow-wrap:anywhere}.person-label{font-size:10px;color:var(--muted)}.person-actions{display:flex;gap:3px}.person-actions button{border:0;background:transparent;padding:5px;color:var(--muted);font-size:15px}.person-actions .on-wheel{color:#507838}.outline-button{border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--ink);padding:12px 14px;font-size:12px}#add-everyone{width:100%;margin-top:17px;display:flex;justify-content:space-between}.roster-note{display:flex;gap:12px;align-items:center;margin-top:24px}.roster-note>span{font-size:28px}.roster-note p{font-size:10px;color:var(--muted);line-height:1.8}.wheel-panel{background:#eaf0e1;position:relative;overflow:hidden;min-height:620px}.wheel-top{display:flex;justify-content:space-between;position:relative;z-index:2;margin:28px 30px}.live-count{font-size:10px;border:1px solid #cbd6c2;border-radius:20px;padding:5px 9px;margin-top:-5px}.award-area{position:relative;z-index:2;margin:32px 30px 0;max-width:300px}.award-area label{font-size:9px;letter-spacing:1.5px;color:#66765c;font-weight:700}.award-input{display:flex;align-items:center;gap:10px;margin-top:10px}.award-input>span{font-size:26px}.award-input input{width:100%;min-width:0;border:0;border-bottom:1px dashed #acbba1;background:transparent;color:var(--ink);font-family:Manrope,Arial,sans-serif;font-size:23px;font-weight:600;padding:6px 0;outline-offset:3px}.wheel-stage{position:absolute;inset:125px -155px 30px 110px;perspective:1100px}.wheel-assembly{position:absolute;width:560px;height:560px;top:38px;left:50%;transform:translateX(-40%) rotateY(-23deg) rotateX(13deg) rotateZ(-8deg);transform-style:preserve-3d}.wheel,.wheel-depth{position:absolute;inset:0;border-radius:50%}.wheel-depth{background:#263d2e;transform:translate3d(8px,16px,-20px);box-shadow:22px 35px 38px #25432230}.wheel{background:#dbe6cb;border:14px solid #fdfdf4;outline:1px solid #b9c3af;box-shadow:inset 0 0 0 2px #b9c3af;overflow:hidden}#wheel-svg{width:100%;height:100%;display:block;transform:rotate(0deg)}.hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:101px;height:101px;border:7px solid #f6f8eb;border-radius:50%;background:#193e33;color:#e5f2ba;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 3px 9px #183c3340}.hub span{font-size:40px;line-height:1}.hub small{font-size:7px;letter-spacing:1.5px;margin-top:7px}.pointer{position:absolute;left:-9px;top:calc(50% - 19px);width:53px;height:38px;background:#183c33;clip-path:polygon(0 0,100% 50%,0 100%);filter:drop-shadow(0 2px 2px #0003)}.drop-hint{position:absolute;left:-79px;top:220px;font-size:12px;color:#65755b;transform:rotate(-8deg);pointer-events:none}.wheel-stage.drag-over{background:#bfd99050;border-radius:80px;outline:2px dashed #6b8a47}.wheel-controls{position:absolute;left:30px;bottom:28px;z-index:3}.spin-button{background:var(--ink);color:#fff;border:0;border-radius:8px;padding:17px 20px;font-size:14px;min-width:205px;display:flex;justify-content:space-between;gap:30px;box-shadow:0 5px 10px #183c3315}.wheel-controls .text-button{margin-top:8px}.wheel-controls p{font-size:10px;color:#6c7c61;margin:8px 0 0}footer{display:flex;justify-content:space-between;align-items:center;padding:23px 0;font-size:10px;color:var(--muted)}footer>span:first-child{font-size:8px;letter-spacing:1.3px}.footer-star{font-size:24px;vertical-align:middle;margin-left:15px}dialog{border:1px solid var(--line);border-radius:16px;padding:30px;background:var(--paper);color:var(--ink);width:min(440px,calc(100% - 30px));box-shadow:0 25px 100px #132d3040}dialog::backdrop{background:#183c3366;backdrop-filter:blur(5px)}.dialog-top{display:flex;align-items:center;justify-content:space-between}.close{border:0;background:none;font-size:26px;color:var(--ink)}form>label{display:block;font-size:12px;margin:18px 0 7px}form>input,form>select{width:100%;padding:12px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}.color-options{display:flex;gap:10px;margin:12px 0 24px}.swatch{width:32px;height:32px;background:var(--swatch);border:3px solid transparent;border-radius:50%}.swatch[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px}.primary-button{border:0;border-radius:7px;background:var(--ink);color:white;padding:13px 20px}form>.primary-button{width:100%}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}dialog p{color:var(--muted);font-size:14px;line-height:1.6}#winner-dialog{text-align:center;padding:40px 28px}.winner-stars{font-size:48px;letter-spacing:12px;color:#779447;margin-bottom:20px}#winner-name{font-size:36px;margin:22px 0 0;overflow-wrap:anywhere}#winner-award{font-size:24px;overflow-wrap:anywhere}#winner-dialog .primary-button{margin-top:20px}.empty{font-size:13px;color:var(--muted);padding:24px 5px;line-height:1.6}@media(min-width:1450px){.wheel-assembly{width:650px;height:650px;top:0;transform:translateX(-32%) rotateY(-23deg) rotateX(13deg) rotateZ(-8deg)}}@media(max-width:1000px){.workspace{grid-template-columns:290px minmax(0,1fr)}.roster-panel{padding:24px 18px}.wheel-stage{left:50px;right:-240px}.drop-hint{display:none}.wheel-assembly{transform:translateX(-30%) rotateY(-23deg) rotateX(13deg) rotateZ(-8deg)}.local-badge{display:none}}@media(max-width:700px){header{height:76px}.brand{font-size:10px;gap:5px}.brand-icon{font-size:30px}.header-right .text-button{font-size:10px}.intro{padding-top:30px}.intro h1{letter-spacing:-1.5px}.intro p{font-size:12px;line-height:1.7}.workspace{grid-template-columns:1fr}.roster-panel{border-right:0;border-bottom:1px solid var(--line)}.roster{max-height:255px}.roster-note{display:none}.wheel-panel{min-height:650px}.wheel-stage{left:0;right:-145px;top:150px}.wheel-assembly{width:460px;height:460px;transform:translateX(-35%) rotateY(-23deg) rotateX(13deg) rotateZ(-8deg)}.wheel-controls{bottom:24px}.wheel-controls p{background:#eaf0e1d9;padding:3px;border-radius:4px}footer{gap:18px;font-size:9px}footer>span:first-child{max-width:150px;line-height:1.8}.footer-star{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Full-height wheel stage with controls grouped on the left. */
header{height:70px;margin:0 32px}
main{padding:0}
.intro{padding:24px 32px;background:var(--paper);border-bottom:1px solid var(--line)}
.intro h1{margin:7px 0;font-size:clamp(32px,4vw,50px)}
.workspace{grid-template-columns:340px minmax(0,1fr);height:calc(100dvh - 230px);min-height:650px;border:0;border-radius:0}
.roster-panel{display:flex;flex-direction:column;min-height:0;padding:24px;background:#fffef9}
.roster{flex:1;min-height:110px;max-height:none}
.roster-note{display:none}
.reward-card{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.reward-card h3{font-size:23px;margin:9px 0 12px;overflow-wrap:anywhere}
#edit-reward{width:100%;text-align:left}
.wheel-controls{position:static;margin-top:18px}
.spin-button{width:100%}
.wheel-panel{min-height:0;container-type:size}
.wheel-top{position:absolute;top:0;left:0;right:0;pointer-events:none}
.wheel-top>.eyebrow,.live-count{background:#eaf0e1e8;padding:7px 10px;border-radius:15px}
.wheel-stage{inset:0;perspective:1800px}
.wheel-assembly{width:max(116cqh,100cqw);height:max(116cqh,100cqw);left:32px;top:50%;transform:translateY(-50%) rotateY(-18deg);transform-style:preserve-3d}
.pointer{background:#12221c;left:-14px;width:64px;height:44px;top:calc(50% - 22px)}
.drop-hint{display:block;left:32px;top:65%;transform:none;background:var(--paper);padding:10px;border-radius:6px}
.drop-hint[hidden]{display:none}
footer{padding:14px 32px}
#reward-form>.primary-button{margin-top:22px}
@media(max-width:700px){
 header{margin:0 20px}.intro{padding:22px 20px}.intro h1{font-size:34px}
 .workspace{height:auto;grid-template-columns:1fr;min-height:0}
 .roster-panel{padding:22px}.roster{max-height:240px;flex:auto}
 .wheel-panel{height:560px;min-height:0}
 .wheel-assembly{left:20px;width:650px;height:650px;top:50%;transform:translateY(-50%) rotateY(-18deg)}
 .wheel-controls{margin-top:18px}.wheel-controls p{background:none}
 footer{padding:18px 20px}
}

/* Presentation layout: 16:9, with a dedicated right-third wheel area. */
@media(min-width:1100px){
 body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
 header{flex:0 0 70px}
 main{flex:1;min-height:0;display:flex;flex-direction:column}
 .intro{flex:none;padding:20px 40px}
 .workspace{flex:1;min-height:0;height:auto;grid-template-columns:2fr 1fr}
 .roster-panel{padding:28px 40px;display:grid;grid-template-columns:minmax(380px,1fr) minmax(220px,300px);grid-template-rows:auto auto minmax(0,1fr) auto;column-gap:36px}
 .section-heading,.hint,.roster,#add-everyone{grid-column:1}
 .roster{grid-row:3;min-height:0;max-height:none}
 #add-everyone{grid-row:4}
 .reward-card{grid-column:2;grid-row:2 / 4;align-self:end;margin:0;border:0;padding:0 0 24px}
 .wheel-controls{grid-column:2;grid-row:4;margin:0;align-self:end}
 .person{padding:14px 12px;min-height:76px}
 .person-name{font-size:16px}.person-label{font-size:12px}
 .wheel-assembly{width:81.2cqh;height:81.2cqh;left:24px;top:50%;transform:translateY(-50%) rotateY(-18deg)}
 footer{flex:none;padding:14px 40px}
}
.hub{width:145px;height:145px;background:#fff;border:8px solid #f6f8eb}
.hub img{width:118px;height:auto;display:block}
.points-label{font-size:10px;color:var(--muted);display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.points-input{width:64px;border:1px solid var(--line);border-radius:5px;padding:6px;color:var(--ink);background:#fff}
.person-actions{gap:4px}.person-actions button{min-width:28px;min-height:32px}
.person-actions button:first-child,.person-actions button:nth-child(2){background:#edf2e5;border:1px solid var(--line);border-radius:5px;font-size:19px;color:var(--ink)}
@media(min-width:701px) and (max-width:1099px){.workspace{grid-template-columns:440px 1fr}.wheel-assembly{width:81.2cqh;height:81.2cqh;left:24px}}
@media(max-width:700px){.person{gap:7px}.person-actions{gap:1px}.person-actions button{min-width:24px;padding:3px}.points-input{width:48px}.person-name{font-size:12px}.avatar{width:28px;height:28px}.grip{display:none}.wheel-assembly{width:455px;height:455px;left:30px}.wheel-panel{height:480px}}

/* Loose resource cards on a spacious board. */
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));align-content:start;gap:20px;padding:10px 8px 18px}
.person{display:grid;grid-template-columns:36px 1fr;gap:12px;align-content:start;align-items:center;min-height:160px;padding:18px;border:1px solid var(--line);border-top:6px solid var(--person-color);border-radius:14px;box-shadow:0 5px 12px #183c3309;transition:box-shadow .15s,transform .15s}
.person:hover{transform:translateY(-2px);box-shadow:0 9px 20px #183c3315}
.person:focus-visible{outline:3px solid #789e42;outline-offset:3px}
.person.dragging{opacity:.45}
.person .grip{display:none}
.person .avatar{grid-column:1;grid-row:1;width:36px;height:36px}
.person-info{grid-column:2;grid-row:1}
.person .points-label{grid-column:1;grid-row:2;align-self:end}
.person-actions{grid-column:2;grid-row:2;justify-content:flex-end;align-self:end}
@media(min-width:1100px){.roster-panel{grid-template-columns:minmax(420px,1fr) minmax(220px,270px);column-gap:30px}.person{min-height:160px;padding:18px}.roster{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}#add-everyone{align-self:start}}
@media(max-width:700px){.roster{max-height:380px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.person-name{font-size:15px}}

/* Collectible-style staff cards; the selected color fills the entire card. */
.roster{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:22px;padding:12px 10px 22px}
.person{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:14px;min-height:280px;aspect-ratio:5 / 7;padding:18px;border:7px solid var(--person-color);border-radius:17px;background:linear-gradient(135deg,#ffffff40,transparent 45%,#183c3320),var(--person-color);box-shadow:inset 0 0 0 2px #183c3360,inset 0 0 0 5px #ffffff50,0 7px 12px #183c3320;color:#183c33}
.person::before{content:'✦';position:absolute;z-index:-1;inset:67px 15px 76px;display:grid;place-items:center;font-size:82px;color:#183c332b;border:1px solid #183c3330;border-radius:50% 50% 12px 12px;background:repeating-linear-gradient(45deg,transparent,transparent 9px,#ffffff12 9px,#ffffff12 10px);pointer-events:none}
.person:hover{transform:translateY(-5px) rotate(-1deg);box-shadow:inset 0 0 0 2px #183c3360,inset 0 0 0 5px #ffffff50,0 13px 20px #183c332b}
.person-info{flex:0;min-width:0;padding-bottom:10px;border-bottom:1px solid #183c3340}
.person-name{font-family:Manrope,Arial,sans-serif;font-size:18px;font-weight:800;line-height:1.25}
.person-label{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.5px;color:#183c33}
.person .points-label{align-self:flex-start;margin-top:auto;padding:8px 10px;border:1px solid #183c3340;border-radius:10px;background:#ffffff30;color:#183c33;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;gap:5px}
.person .points-input{width:64px;background:#ffffff65;border:1px solid #183c3330;font-size:18px;font-weight:700;text-align:center}
.person-actions{width:100%;justify-content:space-between;border-top:1px solid #183c3340;padding-top:10px;align-self:stretch}
.person-actions button{color:#183c33}
.person-actions button:first-child,.person-actions button:nth-child(2){background:#ffffff40;border-color:#183c3330;min-width:38px}
@media(min-width:1100px){.roster{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}.person{min-height:280px;padding:18px}}
@media(max-width:700px){.roster{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));max-height:440px}.person{min-height:270px}.person-name{font-size:17px}}
.roster{grid-auto-rows:max-content}
.person{height:310px;aspect-ratio:auto;flex-shrink:0}
.person-actions{flex-shrink:0}

/* Two work modes, with the switch anchored to their shared divider. */
.workspace{position:relative;--left-share:80%;grid-template-columns:var(--left-share) minmax(0,1fr)}
.workspace[data-mode=spin]{--left-share:20%}
.mode-toggle{position:absolute;z-index:10;top:15px;left:var(--left-share);transform:translateX(-50%);width:46px;height:46px;display:grid;place-items:center;border:3px solid var(--paper);border-radius:50%;background:var(--ink);color:white;font-size:25px;box-shadow:0 3px 12px #183c3333}
.workspace[data-mode=edit] .reward-card,.workspace[data-mode=edit] .wheel-controls{display:none}
.workspace[data-mode=edit] .roster-panel{display:flex;flex-direction:column;padding:28px 40px}
.workspace[data-mode=edit] .roster{flex:1;min-height:0;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));max-height:none}
.workspace[data-mode=edit] #add-everyone{width:auto;align-self:flex-start;gap:30px}
.workspace[data-mode=spin] .roster-panel{display:flex;flex-direction:column;padding:28px 22px;overflow:auto}
.workspace[data-mode=spin] .roster{grid-template-columns:1fr;flex:1;min-height:120px}
.workspace[data-mode=spin] .hint,.workspace[data-mode=spin] #add-everyone{display:none}
.workspace[data-mode=spin] .reward-card{display:block;margin-top:16px;padding:16px 0 0;border-top:1px solid var(--line)}
.workspace[data-mode=spin] .wheel-controls{display:block;margin-top:16px}
.workspace[data-mode=spin] .wheel-assembly{width:92cqh;height:92cqh;left:50%;top:50%;transform:translate(-50%,-50%) rotateY(-18deg)}
.workspace[data-mode=edit] .wheel-assembly{width:70cqh;height:70cqh;left:24px}
.wheel-top{margin-left:36px}
.drop-hint{top:auto;bottom:22px;left:50%;transform:translateX(-50%);font-size:11px;width:max-content;max-width:90%;text-align:center;pointer-events:none}
@media(max-width:1099px){.workspace[data-mode=edit] .roster-panel{padding:20px}.workspace[data-mode=spin] .roster-panel{padding:20px 12px}.workspace[data-mode=spin] .person-actions{flex-wrap:wrap}.workspace[data-mode=spin] .person{padding:10px}.workspace[data-mode=spin] .spin-button{min-width:0;padding:14px 10px;gap:5px}.workspace[data-mode=spin] .person-name{font-size:14px}.workspace[data-mode=spin] .section-heading{flex-wrap:wrap}.workspace[data-mode=spin] .reward-card h3{font-size:18px}}
@media(max-width:700px){.workspace{height:720px;min-height:0}.wheel-panel{height:auto;min-height:0}.workspace[data-mode=edit] .roster{grid-template-columns:1fr}.workspace[data-mode=edit] .roster-panel{padding:20px 16px}.workspace[data-mode=spin]{--left-share:20%}.workspace[data-mode=spin] .roster-panel{padding:70px 5px 12px}.workspace[data-mode=spin] .section-heading,.workspace[data-mode=spin] .roster,.workspace[data-mode=spin] .reward-card,.workspace[data-mode=spin] .wheel-controls{display:none}.workspace[data-mode=spin] .wheel-panel{padding-top:190px}.workspace[data-mode=spin] .wheel-assembly{width:75cqw;height:75cqw;left:50%}.workspace[data-mode=spin] .reward-card,.workspace[data-mode=spin] .wheel-controls{position:absolute;display:block;z-index:4;left:calc(20% + 16px);right:16px;top:62px;border:0;padding:0;margin:0}.workspace[data-mode=spin] .wheel-controls{top:auto;bottom:25px}.workspace[data-mode=spin] .reward-card h3{margin:5px 0}.workspace[data-mode=spin] .drop-hint{bottom:180px}.workspace[data-mode=edit] .wheel-assembly{width:500px;height:500px}.hub{max-width:28%;max-height:28%}.hub img{width:85%}.wheel-top .eyebrow{display:none}}

/* Compact cards: 75% of the former 310px height and 205px base width. */
.workspace[data-mode=edit] .roster,.roster{grid-template-columns:repeat(auto-fill,minmax(154px,1fr));gap:16px}
.workspace .person{height:232.5px;min-height:232.5px;padding:12px;border-width:5px;border-radius:13px;gap:8px}
.person::before{content:'';inset:54px 10px 61px}
.category-icon{position:absolute;z-index:-1;left:50%;top:49%;transform:translate(-50%,-50%);width:62%;height:46%;object-fit:contain;opacity:.21;pointer-events:none}
.workspace .person-name{font-size:15px}.person-label{font-size:10px;margin-top:5px}.person-info{padding-bottom:6px}
.workspace .person .points-label{padding:4px 6px;font-size:8px;gap:2px;border-radius:7px}
.workspace .person .points-input{font-size:14px;width:52px;padding:3px}
.person-actions{padding-top:6px;gap:2px}
.workspace .person-actions button{min-width:24px;min-height:26px;padding:2px;font-size:16px}
.mode-toggle{width:64px;height:64px;top:12px;font-size:34px;background:#4b504e;border:4px solid #e5e7df;box-shadow:0 4px 14px #18221c40}
.category-color-preview{display:flex;align-items:center;gap:10px;font-size:12px}
.category-color-preview::before{content:'';width:28px;height:28px;background:var(--swatch);border:1px solid #183c3330;border-radius:50%}
.workspace[data-mode=spin] .roster{grid-template-columns:1fr}

/* Storefront palette — resource cards retain their category colors. */
:root{--paper:#e8ecf0;--ink:#252c36;--muted:#596879;--line:#bbc5ce;--green:#087fc5;--navy:#304674;--sign-blue:#073b70;--electric:#087fc5}
body{background:var(--paper);color:var(--ink)}
header{background:var(--navy);color:#f7f5f0;margin:0;padding:0 32px;border-bottom:1px solid #25385c}
.brand,.header-right .text-button{color:#f7f5f0}
.local-badge{color:#d7e0e9}.local-badge i{background:#78c6f3}
.intro{background:#f7f5f0;border-color:var(--line)}
.intro .eyebrow{color:var(--sign-blue)}
.roster-panel{background:#e8ecf0;border-color:var(--line)}
.wheel-panel{background:#d8e0e8}
.wheel-top>.eyebrow,.live-count{background:#e8ecf0ed;color:var(--navy);border-color:#a4b2be}
.wheel{background:#d8e0e8;border-color:#f7f5f0;outline-color:#a4b2be;box-shadow:inset 0 0 0 2px #a4b2be}
.wheel-depth{background:#252c36;box-shadow:22px 35px 38px #252c3630}
.pointer{background:#252c36}
.hub{background:#f7f5f0;border-color:#e8ecf0;box-shadow:0 3px 9px #252c3640}
.spin-button,.primary-button,.add-button{background:var(--sign-blue);color:#fff;box-shadow:0 4px 10px #073b701a}
.spin-button:hover:not(:disabled),.primary-button:hover:not(:disabled),.add-button:hover:not(:disabled){background:var(--navy)}
.mode-toggle{background:#454e5a;border-color:#d8e0e8;box-shadow:0 4px 14px #252c3640;color:#fff}
.mode-toggle:hover:not(:disabled){background:var(--sign-blue)}
.outline-button{background:#f7f5f0;color:var(--sign-blue);border-color:#a4b2be}
.outline-button:hover:not(:disabled){background:#dce7f0;border-color:var(--electric)}
.text-button{color:var(--sign-blue)}
.wheel-controls p{color:var(--muted);background:none}
.drop-hint{background:#f7f5f0;color:#46596c;border:1px solid #bbc5ce}
.wheel-stage.drag-over{background:#087fc526;outline-color:var(--electric)}
footer{background:#e8ecf0;border-top:1px solid #bbc5ce;color:var(--muted)}
dialog{background:#f7f5f0;border-color:#a4b2be;color:var(--ink);box-shadow:0 25px 100px #252c3640}
dialog::backdrop{background:#252c3666}
form>input,form>select{background:#fff;color:var(--ink);border-color:#a4b2be}
.winner-stars{color:var(--electric)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:var(--electric)}
/* Keep the collectible card treatment independent of the site chrome. */
.person{border-color:var(--person-color);color:#183c33}
.person:focus-visible{outline-color:var(--electric)}
.person .person-label{color:#183c33}
.person .points-input{color:#183c33}
@media(max-width:700px){header{margin:0;padding:0 20px}}

/* One unified title banner. */
.intro{display:flex;align-items:center;justify-content:space-between;gap:30px;background:var(--navy);color:#f7f5f0;border-bottom:1px solid #25385c}
.intro .eyebrow,.intro p{color:#d7e0e9}
.intro h1{color:#fff}
.intro .header-right{flex-shrink:0}
.intro .header-right .text-button{color:#fff}
@media(max-width:700px){.intro{flex-direction:column;align-items:flex-start;gap:16px}.intro .header-right{align-self:flex-end}}

/* Edit Mode sets up the deck and reward; Wheel Spin Mode presents the draw. */
.reward-editor{flex:none;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.reward-editor p{font-size:20px;font-weight:600;margin:7px 0 12px}
.reward-editor #edit-reward{width:auto;min-width:180px}
.spin-panel{display:none}
.workspace[data-mode=spin] .reward-editor{display:none}
.workspace[data-mode=spin] .roster-panel{overflow:hidden}
.workspace[data-mode=spin] .section-heading{flex:none}
.workspace[data-mode=spin] #add-staff{display:none}
.workspace[data-mode=spin] .roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));grid-auto-rows:max-content;align-content:start;gap:12px;padding:12px 6px;flex:1;min-height:0;overflow:auto}
.workspace[data-mode=spin] .person{width:100%;height:auto;min-height:0;aspect-ratio:154 / 232.5;padding:10px;border-width:4px;justify-content:center}
.workspace[data-mode=spin] .person-info{border:0;padding:0;position:relative;z-index:1}
.workspace[data-mode=spin] .person-name{font-size:16px;line-height:1.35;text-align:center;overflow-wrap:anywhere}
.workspace[data-mode=spin] .person-label,.workspace[data-mode=spin] .points-label,.workspace[data-mode=spin] .person-actions{display:none}
.workspace[data-mode=spin] .person::before{inset:10px}
.workspace[data-mode=spin] .category-icon{opacity:.09}
.workspace[data-mode=spin] .spin-panel{display:block;position:absolute;z-index:4;left:32px;bottom:35px;width:240px;padding:20px;border:1px solid #bbc5ce;border-radius:14px;background:#f7f5f0f2;box-shadow:0 6px 24px #252c3612}
.workspace[data-mode=spin] .spin-panel .reward-card,.workspace[data-mode=spin] .spin-panel .wheel-controls{position:static;display:block;margin:0;padding:0;border:0}
.workspace[data-mode=spin] .spin-panel .reward-card h3{font-size:26px;line-height:1.25;margin:10px 0 20px}
.workspace[data-mode=spin] .spin-panel .wheel-controls p{line-height:1.5}
.workspace[data-mode=spin] .wheel-assembly{left:62%;width:min(92cqh,68cqw);height:min(92cqh,68cqw)}
@media(max-width:1099px){.workspace[data-mode=spin] .spin-panel{left:20px;bottom:20px;width:210px;padding:16px}.workspace[data-mode=spin] .person-name{font-size:13px}.workspace[data-mode=spin] .roster{grid-template-columns:1fr}}
@media(max-width:700px){.workspace[data-mode=spin] .roster-panel{padding:78px 4px 12px}.workspace[data-mode=spin] .roster{display:grid;gap:8px;padding:5px 0}.workspace[data-mode=spin] .person{padding:4px;border-width:3px}.workspace[data-mode=spin] .person-name{font-size:11px}.workspace[data-mode=spin] .wheel-panel{padding-top:0}.workspace[data-mode=spin] .wheel-assembly{left:50%;top:36%;width:90cqw;height:90cqw}.workspace[data-mode=spin] .spin-panel{left:12px;right:12px;bottom:24px;width:auto}.workspace[data-mode=spin] .drop-hint{bottom:auto;top:50%;font-size:9px}}

/* Compact banner and explicit mode context. */
.intro{padding:12px 32px;gap:20px}
.intro h1{margin:3px 0;line-height:1.12}
.intro p{line-height:1.3}
.mode-toggle{top:33.333%;transform:translate(-50%,-50%)}
.mode-label{position:absolute;z-index:5;top:12px;left:28px;padding:5px 11px;border:1px solid #a4b2be;border-radius:20px;background:#f7f5f0;color:#073b70;font-size:11px;font-weight:700;letter-spacing:.5px;pointer-events:none}
.workspace[data-mode=edit] .roster-panel,.workspace[data-mode=spin] .roster-panel{padding-top:45px}
@media(max-width:700px){.intro{padding:12px 20px;gap:10px}.mode-label{left:12px;font-size:10px}.workspace[data-mode=spin] .mode-label{left:calc(20% + 12px);top:48px}.workspace[data-mode=spin] .roster-panel{padding-top:18px}}

/* Deck setup actions and the trailing new-resource slot. */
.deck-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:16px;flex:none}
.workspace[data-mode=edit] .deck-actions #add-everyone{margin:0;width:auto;align-self:auto}
.workspace[data-mode=spin] .deck-actions{display:none}
.add-resource-card{height:232.5px;min-height:232.5px;width:100%;border:2px dashed #a4b2be;border-radius:13px;background:#d8dee4;color:#596879;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;box-shadow:inset 0 0 0 5px #e8ecf080;cursor:pointer}
.add-resource-card:hover{background:#ccd7e1;border-color:#073b70;color:#073b70}
.add-card-plus{font-size:64px;font-weight:400;line-height:1}
.add-card-label{font-size:12px;font-weight:600}
.workspace[data-mode=spin] .add-resource-card{display:none}

/* QA: readable controls, consistent targets, and narrow-screen overflow. */
.wheel-top{justify-content:flex-end}
.workspace .person-actions button{min-width:30px;min-height:32px}
.workspace .person .points-input{width:66px;min-height:30px;font-size:14px}
.hint{line-height:1.55;max-width:70ch}
.reward-editor p,.spin-panel h3{overflow-wrap:anywhere}
.roster-panel{min-width:0}
.workspace[data-mode=spin] .section-heading h2{font-size:20px;line-height:1.3}
@media(max-width:700px){.workspace{height:max(720px,calc(100dvh - 210px))}.workspace[data-mode=edit] .roster{grid-template-columns:minmax(0,1fr)}.workspace[data-mode=edit] .roster-panel{min-width:0;padding-left:12px;padding-right:12px}.workspace[data-mode=edit] .person{min-width:0}.intro h1{overflow-wrap:anywhere}.intro .header-right{align-self:flex-start}.workspace[data-mode=spin] .person-name{font-size:12px}.deck-actions{gap:8px}.deck-actions .outline-button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.person{transition:none}.person:hover{transform:none}}
@media(max-width:700px){.workspace[data-mode=edit] .section-heading h2{font-size:20px;line-height:1.3;overflow-wrap:anywhere}.workspace[data-mode=edit] .wheel-top{margin:22px 7px}.workspace[data-mode=edit] .live-count{font-size:9px;padding:5px;white-space:normal}.workspace[data-mode=edit] .drop-hint{display:none}.workspace[data-mode=spin] .roster{padding-right:0}.workspace[data-mode=spin] .person-name{font-size:10px}}

/* A single fixed mode control, and a reward deck with queued cards. */
.workspace .mode-switch{position:absolute;z-index:10;top:12px;left:50%;transform:translateX(-50%);width:244px;height:40px;border:1px solid #a4b2be;border-radius:20px;background:#f7f5f0;color:#073b70;font-size:13px;font-weight:700;box-shadow:0 3px 10px #252c3612}
.workspace .mode-switch:hover:not(:disabled){background:#dce7f0}
.workspace[data-mode=edit] .roster-panel,.workspace[data-mode=spin] .roster-panel{padding-top:65px}
.wheel-top{top:52px}
.workspace[data-mode=edit] .reward-editor{margin-top:12px;padding-top:10px;max-height:210px;overflow:auto}
.reward-editor h2{font-size:20px;margin:3px 0}.reward-editor .hint{font-size:11px;margin:3px 0 9px}
#reward-deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(154px,1fr));gap:12px;padding:3px}
.reward-tile,.add-reward-tile{height:116.25px;min-height:116.25px;border:3px solid #536b98;border-radius:10px;background:linear-gradient(135deg,#304674,#073b70);color:#fff;padding:10px 12px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 0 0 1px #ffffff30,0 3px 8px #252c3615;cursor:grab}
.reward-text{font-size:15px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;overflow:auto;min-height:0}
.reward-actions{display:flex;justify-content:flex-end;gap:6px;flex:none}
.reward-actions button{background:#ffffff16;border:1px solid #ffffff40;color:#fff;min-height:28px;min-width:28px;border-radius:5px;font-size:12px}
.add-reward-tile{border:2px dashed #7e91ab;background:#d8e0e8;color:#073b70;justify-content:center;align-items:center;cursor:pointer;font-weight:600;box-shadow:none}
.reward-tile:focus-visible{outline:3px solid #087fc5;outline-offset:3px}
#reward-stack{display:flex;flex-direction:column;max-height:270px;overflow:auto;padding:8px 4px 12px;margin-bottom:12px}
#reward-stack .reward-tile{flex-shrink:0;margin-top:-24px;position:relative}
#reward-stack .reward-tile:first-child{margin-top:0;z-index:2}
#reward-stack .reward-tile:not(:first-child){margin-top:8px}
.workspace[data-mode=spin] .spin-panel{width:260px;max-height:calc(100% - 120px);overflow:auto}
@media(max-width:700px){.workspace .mode-switch{width:224px;font-size:12px}.workspace[data-mode=edit] .reward-editor{max-height:200px;flex-shrink:0}#reward-deck{grid-template-columns:1fr}.workspace[data-mode=spin] .roster-panel{padding-top:65px}.workspace[data-mode=spin] .spin-panel{width:auto;max-height:330px}#reward-stack{max-height:145px}.wheel-top{top:52px}}

/* Clear panel hierarchy and a 30% secondary panel. */
.workspace{--left-share:70%}
.workspace[data-mode=spin]{--left-share:30%}
.workspace[data-mode=edit] .roster-panel,.workspace[data-mode=spin] .roster-panel{padding:65px 32px 28px}
.workspace .section-heading h2,.wheel-heading{font-size:23px;font-weight:600;line-height:1.3;margin:11px 0;letter-spacing:-.7px}
.wheel-heading{position:absolute;top:65px;left:32px;z-index:3;pointer-events:none}
.workspace[data-mode=edit] .wheel-heading{visibility:hidden}
.workspace[data-mode=spin] .roster{grid-template-columns:repeat(auto-fill,minmax(90px,110px));gap:12px}
.workspace[data-mode=spin] .person{height:166px;min-height:166px;aspect-ratio:auto;padding:8px}
.workspace[data-mode=spin] .person-name{font-size:13px}
.spin-button{justify-content:center;text-align:center;font-weight:700;letter-spacing:1px}
.pointer{background:#073b70;transform-origin:10% 50%}
.hub{padding:0;border:0;background:#073b70;width:155px;height:155px;max-width:30%;max-height:30%;color:#fff;cursor:pointer;box-shadow:0 4px 12px #073b7055}
.hub:disabled{opacity:1;cursor:default}
.hub-spin-label{position:absolute;top:12%;left:0;width:100%;text-align:center;font-size:10px!important;font-weight:800;letter-spacing:1px;line-height:1!important}
.hub-logo{position:absolute;left:13%;top:28%;width:74%;height:62%;border-radius:50%;display:grid;place-items:center;background:#f7f5f0}
.hub .hub-logo img{width:88%;height:auto}
.workspace[data-mode=edit] .hub-spin-label{visibility:hidden}
.hub:not(:disabled):hover{background:#087fc5}
.wheel-top{top:auto;bottom:19px;right:20px;left:auto;margin:0;z-index:5}
.drop-hint{bottom:19px;left:22px;transform:none;max-width:65%;font-size:10px;margin:0}
.workspace[data-mode=spin] .spin-panel{bottom:82px}
#queued-preview{position:absolute;z-index:4;left:22px;right:22px;bottom:75px;display:flex;flex-wrap:wrap;gap:8px;max-height:155px;overflow:auto}
.mini-reward{background:#073b70;color:white;border:2px solid #536b98;border-radius:7px;padding:9px;width:110px;height:58px;font-size:11px;overflow:auto;overflow-wrap:anywhere;box-shadow:0 3px 8px #252c3620}
.workspace[data-mode=spin] #queued-preview{display:none}
.info-button{background:#fff;color:#073b70;border:1px solid #bbc5ce;border-radius:50%;width:36px;height:36px;font-family:Georgia,serif;font-size:23px;font-weight:700;flex-shrink:0;order:3}
.help-steps{padding-left:23px;font-size:14px;line-height:1.6}.help-steps li{margin-bottom:12px}#help-dialog{width:min(580px,calc(100% - 30px));max-height:85dvh;overflow:auto}
@media(max-width:700px){.workspace[data-mode=spin]{--left-share:30%}.workspace[data-mode=edit] .roster-panel,.workspace[data-mode=spin] .roster-panel{padding:65px 10px 18px}.workspace .section-heading{display:block!important}.workspace .section-heading h2,.wheel-heading{font-size:15px;line-height:1.3;min-height:42px}.wheel-heading{left:12px}.workspace[data-mode=spin] .roster{grid-template-columns:1fr}.workspace[data-mode=spin] .person{height:auto;min-height:0;aspect-ratio:154/232.5}.workspace[data-mode=spin] .person-name{font-size:11px}.workspace[data-mode=spin] .wheel-assembly{top:35%;width:94cqw;height:94cqw}.workspace[data-mode=spin] .spin-panel{bottom:86px;max-height:270px}.workspace[data-mode=spin] .drop-hint{top:auto;bottom:12px;left:10px;max-width:90%;font-size:9px}.wheel-top{top:auto;bottom:48px;right:10px}.workspace[data-mode=edit] .wheel-top{top:auto;bottom:14px;margin:0}.workspace[data-mode=edit] #queued-preview{left:8px;right:8px;bottom:70px}.mini-reward{width:100%;font-size:10px}.hub-spin-label{font-size:6px!important;letter-spacing:0}.intro .header-right{align-self:stretch;justify-content:space-between}.workspace[data-mode=spin] .spin-panel .spin-button{font-size:12px}}
.workspace[data-mode=edit] .section-heading h2,.workspace[data-mode=spin] .section-heading h2,.workspace .wheel-heading{font-size:23px;line-height:1.3;margin:11px 0}
@media(max-width:700px){.workspace[data-mode=edit] .section-heading h2,.workspace[data-mode=spin] .section-heading h2,.workspace .wheel-heading{font-size:15px;line-height:1.3}}

/* The wheel heading mirrors the deck heading in both modes. */
.workspace .wheel-heading{left:auto;right:32px;top:65px;text-align:right;visibility:visible;display:flex;align-items:center;justify-content:flex-end;gap:7px;max-width:calc(100% - 64px)}
.workspace[data-mode=edit] .wheel-heading{visibility:visible}
.wheel-heading .count{flex-shrink:0;margin-left:0;letter-spacing:0;font-weight:400}
@media(max-width:700px){.workspace .wheel-heading{left:auto;right:10px;max-width:calc(100% - 20px);flex-wrap:wrap;gap:4px;align-content:flex-start}}

/* Concentric hub: the entire blue ring and logo are one spin target. */
.hub{aspect-ratio:1;display:grid;place-items:center;overflow:visible}
.hub .hub-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76%;height:76%;border-radius:50%;display:grid;place-items:center;line-height:normal}
.hub .hub-logo img{width:86%;height:auto;display:block}
.drop-hint[hidden]{display:none!important}
.mini-reward{position:relative;padding:8px 30px 8px 8px}
.mini-reward-text{display:block;overflow-wrap:anywhere}
.mini-reward-remove{position:absolute;right:3px;top:3px;display:grid;place-items:center;width:24px;height:24px;padding:0;border:1px solid #ffffff60;border-radius:5px;background:#ffffff1c;color:#fff;font-size:18px;line-height:1}
.mini-reward-remove:hover{background:#ffffff38}

.card-stats{display:flex;align-items:flex-end;gap:8px;margin-top:auto;position:relative}
.workspace .card-stats .points-label{margin-top:0}
.wins-counter{display:flex;flex-direction:column;gap:2px;padding:4px 8px;border:1px solid #183c3340;border-radius:7px;background:#ffffff30;color:#183c33;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.wins-value{display:grid;place-items:center;min-width:25px;min-height:30px;font-size:16px;letter-spacing:0}
.workspace[data-mode=spin] .card-stats{display:none}

/* Matching dark-blue panel headings. */
.workspace .section-heading h2,.workspace .wheel-heading{color:var(--sign-blue)}

/* Independent edit-deck disclosure controls; every page load starts expanded. */
.reward-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.deck-collapse{flex-shrink:0;width:32px;height:32px;border:1px solid #a4b2be;border-radius:50%;background:#f7f5f0;color:#073b70;font-size:22px;line-height:1;display:grid;place-items:center}
.deck-collapse:hover{background:#dce7f0}
.deck-summary{display:none;flex-wrap:wrap;align-items:center;gap:7px;padding:10px 2px;flex-shrink:0;max-height:110px;overflow:auto}
.deck-preview-card{display:grid;place-items:center;width:25px;height:36px;border:2px solid #183c3330;border-radius:4px;background:var(--preview-color);box-shadow:0 2px 3px #252c3615}
.deck-preview-card img{width:18px;height:22px;opacity:.65}
.reward-preview-card{width:36px;height:20px;background:#073b70;color:#fff;border-color:#536b98;font-size:12px}
.summary-empty{font-size:12px;color:var(--muted)}
.workspace[data-mode=edit] .roster-panel[data-team-collapsed=true] > .hint,
.workspace[data-mode=edit] .roster-panel[data-team-collapsed=true] > #roster,
.workspace[data-mode=edit] .roster-panel[data-team-collapsed=true] > .deck-actions{display:none}
.workspace[data-mode=edit] .roster-panel[data-team-collapsed=true] > #team-deck-summary{display:flex}
.workspace[data-mode=edit] .reward-editor[data-collapsed=true] > .hint,
.workspace[data-mode=edit] .reward-editor[data-collapsed=true] > #reward-deck{display:none}
.workspace[data-mode=edit] .reward-editor[data-collapsed=true] #reward-deck-summary{display:flex}
.workspace[data-mode=edit] .roster-panel[data-team-collapsed=true] .reward-editor{max-height:none;min-height:0;flex:1}
.workspace[data-mode=edit] .roster-panel[data-team-collapsed=true] .reward-editor[data-collapsed=true]{flex:none}
.workspace[data-mode=spin] .deck-collapse,.workspace[data-mode=spin] .deck-summary{display:none}
@media(max-width:700px){.workspace[data-mode=edit] .section-heading{display:flex!important;gap:8px}}

/* Concentric wheel geometry, without perspective distortion or offset discs. */
.wheel-stage{perspective:none}
.workspace[data-mode=edit] .wheel-assembly{transform:translateY(-50%);transform-style:flat}
.workspace[data-mode=spin] .wheel-assembly{transform:translate(-50%,-50%);transform-style:flat}
.wheel-depth{transform:none;box-shadow:0 0 0 5px #252c36,0 15px 32px #252c3626}
.wheel,.wheel-depth{aspect-ratio:1;border-radius:50%;transform-origin:50% 50%}
#wheel-svg{transform-origin:50% 50%;transform-box:border-box}
.hub{width: min(155px,30%);height:auto;aspect-ratio:1;max-width:none;max-height:none;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}
.hub .hub-logo{width:76%;height:auto;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}
#reset-rewards{margin-top:12px}
.workspace[data-mode=edit] .reward-editor{max-height:260px}
.workspace[data-mode=edit] .reward-editor[data-collapsed=true] #reset-rewards{display:none}

/* A centered, restrained shadow and a pointer just outside the rim. */
.wheel-depth{box-shadow:0 4px 12px #252c361c;background:#d8e0e8;transform:none}
.pointer{left:-32px;top:calc(50% - 22px);width:52px;height:44px;filter:none}
.reward-tile.reward-completed{background:#a4adb7;border-color:#7a8694;color:#252c36;cursor:default;box-shadow:inset 0 0 0 1px #ffffff50}
.reward-winner{font-size:13px;font-weight:700;overflow-wrap:anywhere}
.winner-reward-card{height:auto;min-height:116px;margin:20px auto;text-align:center;justify-content:center;gap:10px}
.winner-reward-card #winner-award{margin:0;font-size:24px}
.winner-reward-card>span{font-size:12px}

/* Match the resource-card shadow directly on the circular wheel face. */
.wheel-depth{display:none;box-shadow:none}
.wheel{box-shadow:inset 0 0 0 2px #a4b2be,0 7px 12px #183c3320}
.workspace[data-mode=spin] .spin-panel{height:min(640px,calc(100% - 200px));max-height:calc(100% - 200px);display:flex;flex-direction:column;overflow:hidden}
.workspace[data-mode=spin] #reward-stack{flex:1;min-height:0;max-height:none;overflow:auto}
.workspace[data-mode=spin] .spin-panel .wheel-controls{flex-shrink:0}
@media(max-width:700px){.workspace[data-mode=spin] .spin-panel{height:310px;max-height:calc(100% - 360px);bottom:24px}}

/* Shared soft card shadow for reward cards and queued previews. */
.reward-tile{box-shadow:inset 0 0 0 1px #ffffff30,0 7px 12px #183c3320}
.reward-tile.reward-completed{box-shadow:inset 0 0 0 1px #ffffff50,0 7px 12px #183c3320}
.mini-reward{box-shadow:0 7px 12px #183c3320}

/* Headline mode selectors and non-overlapping wheel/reward regions. */
.workspace{height:calc(100dvh - 180px);min-height:580px}
.workspace[data-mode] .roster-panel{padding:20px 24px}
.workspace .section-heading{display:flex!important;flex-wrap:nowrap;gap:10px}
.workspace .section-heading>div{min-width:0}
.workspace .section-heading h2,.workspace .wheel-heading{margin:0 0 16px;font-size:24px;line-height:1.2}
.mode-heading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:12px 20px;border:1px solid #a4b2be;border-radius:32px;background:#f7f5f0;color:#073b70;font:inherit;font-weight:700;box-shadow:0 3px 10px #252c3612}
.mode-heading[aria-pressed=true]{background:#073b70;border-color:#073b70;color:white}
.mode-heading:hover:not(:disabled){background:#dce7f0;color:#073b70}
.mode-heading .count{color:inherit;border-color:currentColor;flex-shrink:0}
.workspace .wheel-panel{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:80px minmax(0,1fr) 140px;padding:20px 24px;gap:12px;container-type:normal}
.workspace .wheel-heading{position:static;grid-column:1 / -1;grid-row:1;max-width:none;pointer-events:auto;align-self:start;justify-self:end;display:block;visibility:visible}
.workspace[data-mode] .wheel-stage{position:relative;inset:auto;grid-column:1;grid-row:2;min-width:0;min-height:0;container-type:size;overflow:visible}
.workspace[data-mode] .wheel-assembly{width:min(calc(100cqw - 64px),calc(100cqh - 24px));height:auto;aspect-ratio:1;left:calc(50% + 16px);top:50%;transform:translate(-50%,-50%)}
.workspace[data-mode] #queued-preview{position:static;grid-row:3;grid-column:1;max-height:none;align-content:start;overflow:auto;padding:8px}
.workspace[data-mode=spin] .wheel-panel{grid-template-columns:clamp(180px,24%,260px) minmax(0,1fr);grid-template-rows:80px minmax(0,1fr)}
.workspace[data-mode=spin] .wheel-stage{grid-column:2;grid-row:2}
.workspace[data-mode=spin] .spin-panel{position:static;grid-column:1;grid-row:2;width:auto;height:auto;max-height:none;min-height:0;padding:16px;align-self:stretch;margin:0}
.workspace[data-mode=spin] .spin-panel .wheel-controls{position:static;inset:auto}
.workspace[data-mode] .drop-hint{left:0;right:0;top:auto;bottom:0;max-width:100%;width:auto;font-size:11px}
@media(max-width:1100px){
 .workspace[data-mode] .roster-panel{padding:16px 12px}
 .workspace .wheel-panel{padding:16px 12px}
 .workspace .section-heading h2,.workspace .wheel-heading{font-size:20px}
 .mode-heading{padding:10px 14px;min-height:64px}
 .workspace[data-mode=spin] .wheel-panel{grid-template-columns:minmax(0,1fr);grid-template-rows:80px minmax(260px,1fr) 190px}
 .workspace[data-mode=spin] .wheel-stage{grid-column:1;grid-row:2}
 .workspace[data-mode=spin] .spin-panel{grid-column:1;grid-row:3;padding:12px}
 .workspace[data-mode=spin] #reward-stack{flex-direction:row;gap:10px;margin:0;padding:8px 4px}
 #reward-stack .reward-tile{width:170px;margin:0!important}
 .workspace[data-mode=spin] .spin-panel .wheel-controls p{margin:3px 0;font-size:10px}
}
@media(max-width:600px){
 .workspace[data-mode]{--left-share:100%;grid-template-columns:1fr;height:auto;min-height:0}
 .workspace[data-mode] .roster-panel{max-height:500px}
 .workspace[data-mode=spin] .roster-panel{max-height:180px}
 .workspace[data-mode=spin] .roster{grid-template-columns:repeat(auto-fill,minmax(65px,1fr))}
 .workspace[data-mode=spin] .person{height:85px;min-height:85px;aspect-ratio:auto}
 .workspace .wheel-panel{height:600px}
 .workspace[data-mode=edit] .wheel-panel{height:430px}
 .workspace .wheel-heading{justify-self:end}
 .workspace .section-heading h2,.workspace .wheel-heading{font-size:20px}
}
/* The logo hub is the single spin action; the queue stays dedicated to cards. */
.spin-panel #spin{display:none}
.mode-heading{max-width:100%;overflow-wrap:anywhere}

/* Mode buttons retain their geometry and selected color across interactions. */
.workspace .mode-heading{width:300px;max-width:none;height:64px;min-height:64px;padding:10px 16px;flex-shrink:0;white-space:nowrap;font-size:23px;line-height:1.2;transition:background-color .15s,border-color .15s;transform:none}
.workspace .mode-heading[aria-pressed=false]{background:#f7f5f0;border-color:#a4b2be;color:#073b70}
.workspace .mode-heading[aria-pressed=false]:hover:not(:disabled){background:#dce7f0;border-color:#073b70}
.workspace .mode-heading[aria-pressed=false]:active:not(:disabled){background:#c6d8e8}
.workspace .mode-heading[aria-pressed=true],.workspace .mode-heading[aria-pressed=true]:hover:not(:disabled){background:#073b70;border-color:#073b70;color:#fff}
.workspace .mode-heading[aria-pressed=true]:active:not(:disabled){background:#052d56;border-color:#052d56;color:#fff}
.workspace .mode-heading:focus-visible{outline:3px solid #087fc5;outline-offset:4px}
@media(min-width:601px) and (max-width:1100px){.workspace .mode-heading{width:min(190px,calc(30vw - 24px));height:76px;min-height:76px;white-space:normal;font-size:19px}}
@media(min-width:1101px) and (max-width:1400px){.workspace .mode-heading{width:270px;font-size:21px}}
@media(max-width:600px){.workspace .mode-heading{width:270px;font-size:21px}}
.intro h1{letter-spacing:-.02em}
.deck-heading-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.workspace[data-mode=spin] .deck-heading-actions{display:none}
.workspace .card-stats{width:100%;justify-content:center;align-items:stretch;gap:8px}
.workspace .card-stats .points-label,.workspace .card-stats .wins-counter{flex:1;min-width:0;align-self:stretch;align-items:center;justify-content:center;text-align:center;padding:5px;gap:3px;font-size:8px}
.workspace .card-stats .points-input{width:100%;max-width:66px;height:30px;min-height:30px}
.workspace .card-stats .wins-value{height:30px;min-height:30px;font-size:14px}
#category-dialog{width:min(560px,calc(100% - 30px));max-height:85dvh;overflow:auto}
.category-edit-row{display:grid;grid-template-columns:1fr 1.4fr 44px;align-items:center;gap:10px;margin:12px 0;font-size:12px}
.category-edit-row input{min-width:0;width:100%;padding:10px;border:1px solid #a4b2be;border-radius:6px}
.category-edit-row input[type=color]{height:42px;padding:3px;cursor:pointer}
#category-error{color:#9c2431}
@media(min-width:601px) and (max-width:1100px){.workspace[data-mode=spin] .wheel-panel{grid-template-rows:80px minmax(260px,1fr) 220px}}