:root { --ink:#f9f4ff; --muted:#c4b9d9; --bg:#12092d; --card:#241247; --purple:#9557f5; --cyan:#26e2df; --pink:#fa529f; --gold:#ffd35c; --line:rgba(255,255,255,.15); font-family: Inter, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; min-height:100vh; background:radial-gradient(circle at 50% -15%,#6330a5 0,transparent 34rem),radial-gradient(circle at 90% 45%,#093c65 0,transparent 26rem),var(--bg); } button,input { font:inherit; } button { cursor:pointer; color:inherit; } button:focus-visible,input:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
.app-shell { width:min(100%,760px); margin:auto; padding:calc(18px + env(safe-area-inset-top)) 16px calc(30px + env(safe-area-inset-bottom)); overflow:hidden; }.brand { display:flex; align-items:center; justify-content:center; gap:11px; margin:2px 0 23px; letter-spacing:1.5px; }.brand h1 { font-size:clamp(1.42rem,5vw,2rem); margin:0; font-weight:900; }.brand em { color:var(--cyan); font-style:normal; text-shadow:0 0 18px #26e2df; }.brand-star { color:var(--gold); font-size:1.4rem; }
.screen { animation:screen-in .32s ease-out; }.hidden { display:none!important; }.intro-card,.panel,.turn-card { background:linear-gradient(135deg,rgba(65,35,116,.88),rgba(35,18,71,.91)); border:1px solid var(--line); box-shadow:0 14px 35px rgba(0,0,0,.22); border-radius:20px; }.intro-card { padding:21px 22px; margin-bottom:15px; }.intro-card h2,.turn-card h2,.complete-screen h2 { margin:3px 0 7px; font-size:1.6rem; }.intro-card p:last-child,.turn-card p:last-child,.complete-screen>p { color:var(--muted); margin:0; line-height:1.45; }.eyebrow { color:var(--cyan); letter-spacing:1.65px; font-size:.7rem; font-weight:800; margin:0; }.panel { padding:17px; margin:15px 0; }.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }.panel h3 { font-size:1.1rem; margin:3px 0 0; }.small-button,.chore-actions button { border:1px solid var(--line); border-radius:10px; padding:8px 11px; background:#3b216c; font-weight:700; font-size:.78rem; }.small-button:hover,.chore-actions button:hover { background:#553391; }.players-list { display:grid; gap:9px; margin-top:15px; }.player-row { display:grid; grid-template-columns:28px 1fr 36px; gap:8px; align-items:center; }.player-number { color:var(--gold); font-weight:900; text-align:center; }.player-row input,.custom-chore-form input { min-width:0; padding:11px 12px; border:1px solid #765eaa; border-radius:10px; background:#170c34; color:var(--ink); }.icon-button { border:0; background:transparent; color:#ff7ab8; font-size:1.45rem; line-height:1; padding:3px; }.count-badge { color:#261240; background:var(--gold); padding:5px 8px; border-radius:999px; white-space:nowrap; font-size:.74rem; }.chore-actions { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 12px; }.chores-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.chore-card { position:relative; min-height:52px; display:flex; align-items:center; gap:8px; padding:8px 8px 8px 10px; border:1px solid #624897; border-radius:11px; background:#1b0e3e; font-size:.82rem; line-height:1.2; cursor:pointer; }.chore-card.selected { border-color:var(--cyan); background:#173c5a; box-shadow:inset 0 0 0 1px rgba(38,226,223,.25); }.chore-card input { position:absolute; opacity:0; }.check { flex:0 0 18px; height:18px; display:grid; place-content:center; color:#130a2d; border:2px solid #a18abb; border-radius:5px; font-size:.7rem; }.selected .check { border-color:var(--cyan); background:var(--cyan); }.chore-name { overflow-wrap:anywhere; }.edit-chore { margin-left:auto; color:var(--cyan); background:none; border:0; padding:4px; font-size:1rem; }.custom-tag { color:var(--gold); font-size:.58rem; font-weight:800; }.custom-chore-form { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }.custom-chore-form label { display:block; font-size:.86rem; font-weight:800; margin-bottom:7px; }.custom-chore-form>div { display:flex; gap:8px; }.custom-chore-form input { width:100%; }.custom-chore-form button { border:0; white-space:nowrap; border-radius:10px; padding:0 10px; background:var(--pink); font-size:.76rem; font-weight:900; }.form-error,.setup-error { color:#ffabc9; min-height:1.1em; font-size:.8rem; margin:7px 0 0; }.primary-button,.spin-button { border:0; color:#1b1034; background:linear-gradient(135deg,var(--gold),#ffad37); box-shadow:0 6px 0 #bb6c17,0 12px 25px rgba(255,168,55,.27); font-weight:950; letter-spacing:1px; }.primary-button { width:100%; padding:16px 20px; border-radius:14px; font-size:1rem; }.primary-button span { font-size:1.2em; }.start-button { margin-top:3px; }.setup-error { text-align:center; font-weight:700; }
.game-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }.text-button { border:0; background:transparent; color:var(--cyan); padding:7px 1px; font-weight:800; }.sound-button { border:1px solid #6d54a2; background:#25134b; padding:8px 10px; border-radius:999px; color:#ded0f3; font-size:.76rem; font-weight:800; }.turn-card { text-align:center; padding:17px; }.turn-card h2 { font-size:1.36rem; }.turn-card h2 span { color:var(--gold); }.wheel-stage { position:relative; width:min(94vw,530px); aspect-ratio:1; margin:13px auto 8px; display:grid; place-items:center; }.wheel-stage:before { content:""; position:absolute; inset:3%; border-radius:50%; border:2px dashed rgba(255,211,92,.5); animation:orbit 20s linear infinite; }.wheel-glow { position:absolute; inset:8%; border-radius:50%; background:var(--purple); filter:blur(23px); opacity:.55; }.wheel-stage canvas { position:relative; width:91%; height:91%; filter:drop-shadow(0 12px 20px rgba(0,0,0,.5)); transition:transform 4.8s cubic-bezier(.14,.7,.1,1); }.pointer { z-index:3; position:absolute; top:0; left:50%; width:0; height:0; transform:translateX(-50%); border-left:19px solid transparent; border-right:19px solid transparent; border-top:42px solid #fff7d8; filter:drop-shadow(0 3px 2px #531e6d); }.wheel-hub { z-index:2; position:absolute; display:grid; place-content:center; width:16%; aspect-ratio:1; border-radius:50%; background:#fff5d7; color:#39215e; border:4px solid var(--gold); box-shadow:0 2px 0 #ae6d20; font-size:1.35rem; }.spin-button { display:block; width:min(90%,290px); margin:0 auto 21px; padding:16px 20px; border-radius:999px; font-size:1.35rem; }.spin-button:active,.primary-button:active { transform:translateY(4px); box-shadow:0 2px 0 #bb6c17; }.spin-button:disabled { filter:grayscale(.65); cursor:wait; }.scoreboard { margin-top:0; }.scoreboard-list { display:grid; gap:8px; margin-top:14px; }.score-row { display:flex; align-items:center; justify-content:space-between; gap:12px; background:#180b36; padding:10px 11px; border-radius:9px; border-left:4px solid #7651ac; font-size:.88rem; }.score-row.assigned { border-color:var(--cyan); }.score-row strong { color:var(--gold); text-align:right; }.score-row span { color:var(--muted); }
.complete-screen { text-align:center; padding:23px 6px; }.complete-burst { display:grid; place-items:center; width:82px; aspect-ratio:1; margin:6px auto 13px; color:#542071; background:var(--gold); border-radius:50%; font-size:2.7rem; box-shadow:0 0 0 10px rgba(255,211,92,.15),0 0 38px var(--gold); animation:pulse 1s ease-in-out infinite alternate; }.final-assignments { display:grid; gap:9px; margin:23px 0 18px; text-align:left; }.final-assignments div { padding:14px; border-radius:12px; background:#30205e; border-left:4px solid var(--pink); }.final-assignments span { color:var(--muted); }.complete-screen .text-button { margin-top:13px; }
.confetti { pointer-events:none; position:fixed; inset:0; overflow:hidden; z-index:10; }.confetti i { position:absolute; top:-15px; width:9px; height:16px; border-radius:2px; animation:fall 2.2s linear forwards; }@keyframes fall { to { transform:translate(var(--x),110vh) rotate(720deg); opacity:0; } }@keyframes screen-in { from { opacity:0; transform:translateY(9px) } to { opacity:1; transform:none } }@keyframes orbit { to { transform:rotate(360deg) } }@keyframes pulse { to { transform:scale(1.08) rotate(12deg) } }
@media (min-width:600px) { .app-shell { padding-top:29px; }.chores-list { grid-template-columns:repeat(3,1fr); }.panel { padding:20px; } }.win-flash .wheel-glow { animation:flash .23s 6 alternate; }@keyframes flash { to { background:var(--gold); opacity:1; filter:blur(32px); } }@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; }.wheel-stage canvas { transition-duration:.01ms!important; } }
.chore-tools { display:flex; margin-left:auto; }.edit-chore { margin-left:0; }.delete-chore { color:#ff8bbd; background:none; border:0; padding:4px; font-size:1.2rem; }
.player-row input::placeholder { color:#a99abb; opacity:1; }

/* Compact responsive layout for setup and play screens. */
html { min-height:100%; }
body { min-height:100vh; min-height:100dvh; overflow-x:hidden; }
.app-shell { width:min(100%,1100px); min-height:100vh; min-height:100dvh; padding:calc(10px + env(safe-area-inset-top)) 18px calc(12px + env(safe-area-inset-bottom)); overflow-x:clip; }
.screen,.panel,.turn-card,.game-top { min-width:0; }
.brand { margin:0 0 10px; gap:8px; }
.brand-star { font-size:1.15rem; }
.intro-card { padding:12px 16px; margin-bottom:0; }
.intro-card h2,.turn-card h2,.complete-screen h2 { font-size:1.35rem; margin:2px 0 4px; }
.intro-card p:last-child { font-size:.9rem; }
.setup-screen { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; min-width:0; }
.setup-screen > .panel { margin:0; padding:13px; }
.panel-heading { gap:8px; }
.players-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 10px; margin-top:10px; min-width:0; }
.player-row { grid-template-columns:24px minmax(0,1fr) 32px; gap:6px; min-width:0; }
.player-row input { min-height:44px; padding:8px 10px; }
.icon-button { min-width:32px; min-height:40px; }
.chore-actions { gap:6px; margin:9px 0 8px; }
.chore-actions button,.small-button { min-height:40px; padding:7px 9px; }
.chores-list { gap:6px; }
.chore-card { min-height:44px; padding:7px 8px; font-size:.78rem; min-width:0; }
.chore-card:not(.selected) { border-color:#624897; color:#d8cce8; }
.form-error:empty,.setup-error:empty { display:none; }
.custom-chore-form { margin-top:10px; padding-top:10px; }
.custom-chore-form label { margin-bottom:5px; }
.custom-chore-form input { min-height:44px; padding:8px 10px; }
.custom-chore-form button { min-height:44px; }
.form-error,.setup-error { margin-top:4px; }
.start-button { min-height:50px; padding:11px 16px; }

.game-screen { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; min-width:0; }
.game-top { margin:0; min-height:34px; }
.text-button { min-height:40px; }
.sound-button { min-height:40px; }
.turn-card { padding:10px 13px; }
.turn-card h2 { font-size:1.22rem; }
.turn-card p:last-child { font-size:.9rem; }
.wheel-stage { width:min(88vw,44dvh,390px); margin:0 auto; }
.wheel-stage:before { inset:3%; }
.spin-button { width:min(88%,290px); min-height:50px; margin:0 auto 2px; padding:10px 18px; }
.scoreboard { margin:0; padding:11px; }
.scoreboard-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin-top:8px; }
.score-row { min-width:0; padding:7px 8px; gap:5px; font-size:.76rem; }
.score-row span,.score-row strong { min-width:0; overflow-wrap:anywhere; }
.complete-screen { padding:14px 6px; }
.complete-burst { width:64px; margin:4px auto 9px; }
.final-assignments { gap:6px; margin:14px 0; }
.final-assignments div { padding:10px 12px; }

@media (min-width:600px) {
  .app-shell { padding-top:calc(14px + env(safe-area-inset-top)); }
  .chores-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .panel { padding:16px; }
}
@media (min-width:850px) {
  .brand { margin-bottom:12px; }
  .setup-screen { grid-template-columns:minmax(260px,.78fr) minmax(0,1.45fr); gap:12px; }
  .setup-screen > .intro-card,.setup-screen > .start-button,.setup-screen > .setup-error { grid-column:1 / -1; }
  .setup-screen > .panel { padding:15px; }
  .players-list { grid-template-columns:1fr; gap:7px; }
  .chores-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .game-screen { grid-template-columns:minmax(0,1.25fr) minmax(280px,.8fr); grid-template-areas:"top top" "turn turn" "wheel board" "spin board"; align-items:center; gap:8px 16px; }
  .game-top { grid-area:top; }
  .turn-card { grid-area:turn; }
  .wheel-stage { grid-area:wheel; width:min(100%,52dvh,520px); }
  .spin-button { grid-area:spin; margin-bottom:4px; }
  .scoreboard { grid-area:board; align-self:stretch; }
  .scoreboard-list { grid-template-columns:1fr; }
}
@media (max-height:760px) {
  .app-shell { padding-top:calc(6px + env(safe-area-inset-top)); padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
  .brand { margin-bottom:6px; }
  .intro-card { padding:9px 13px; }
  .setup-screen { gap:7px; }
  .setup-screen > .panel { padding:10px; }
  .chore-card { min-height:40px; }
  .wheel-stage { width:min(84vw,38dvh,350px); }
  .turn-card { padding:8px 11px; }
  .scoreboard { padding:9px; }
  .score-row { padding:6px 7px; }
}
@media (min-width:850px) and (max-height:760px) {
  .wheel-stage { width:min(100%,44dvh,420px); }
  .setup-screen > .panel { padding:10px 12px; }
  .chore-card { min-height:38px; }
}
@media (max-width:599px) {
  .intro-card { padding:10px 13px; }
  .intro-card p:last-child { display:none; }
  .setup-screen { gap:8px; }
  .player-row { grid-template-columns:18px minmax(0,1fr) 28px; gap:4px; }
  .player-row input { font-size:.76rem; }
  .icon-button { min-width:28px; }
  .chore-card { min-height:44px; }
  .chore-actions button,.small-button,.sound-button { min-height:44px; }
  .wheel-stage { width:min(84vw,45dvh,350px); }
}
@media (min-width:850px) and (min-height:761px) {
  .app-shell { display:flex; flex-direction:column; justify-content:center; }
}

/* Slightly larger type for easier reading without changing the layout. */
.eyebrow { font-size:.78rem; }
.panel h3 { font-size:1.18rem; }
.small-button,.chore-actions button { font-size:.86rem; font-weight:750; }
.player-row input,.custom-chore-form input { font-size:1rem; font-weight:500; }
.count-badge { font-size:.82rem; }
.chore-card { font-size:.88rem; font-weight:500; }
.custom-chore-form label { font-size:.94rem; }
.custom-chore-form button { font-size:.84rem; }
.form-error,.setup-error { font-size:.88rem; }
.primary-button { font-size:1.06rem; }
.text-button { font-size:1rem; }
.sound-button { font-size:.84rem; }
.turn-card h2 { font-size:1.3rem; font-weight:750; }
.turn-card p:last-child { font-size:1rem; font-weight:500; }
.spin-button { font-size:1.42rem; }
.score-row { font-size:.84rem; font-weight:500; }
.final-assignments div { font-size:1.05rem; }
@media (max-width:599px) {
  .small-button,.chore-actions button { font-size:.82rem; font-weight:700; }
  .player-row input { font-size:.8rem; }
  .chore-card { font-size:.84rem; }
  .score-row { font-size:.8rem; }
}