/* Visual theme additions: larger wheel, refined sound controls, winner celebration. */
@media(min-width:741px){
 .studio-wrap{max-width:1290px}
 .studio-grid{grid-template-columns:minmax(0,1.42fr) minmax(345px,.88fr)}
 .wheel-stage{width:min(100%,525px);margin:9px auto 6px}
 .wheel-side{padding:21px 21px 23px}
 .wheel-disc{width:98%;height:98%}
 .wheel-title{max-width:520px}
 .wheel-actions{max-width:435px}
 .spin-btn{max-width:360px}
 .first-paint-wheel{width:min(100%,525px)}
 .first-paint-studio{grid-template-columns:minmax(0,1.42fr) minmax(345px,.88fr)}
}
@media(min-width:741px) and (max-width:1050px){.wheel-stage{width:min(100%,460px)}}
@media(max-width:740px){
 .wheel-side{padding:11px 8px 18px}
 .wheel-stage{width:min(100%,390px);margin:4px auto 8px}
 .wheel-disc{width:99%;height:99%}
 .wheel-title{max-width:410px}
 .wheel-actions{max-width:410px}
 .first-paint-wheel{width:min(100%,390px)}
 .first-paint-wheel-pane{padding:10px 8px 15px}
 .wheel-pointer{top:0}
}
@media(max-width:360px){.wheel-stage{width:min(100%,320px)}.first-paint-wheel{width:min(100%,320px)}}
.wheel-center{background:#fff9e5;box-shadow:0 0 0 5px #fff,0 4px 22px #263e6633;font-size:15px}
.wheel-disc{box-shadow:0 0 0 5px white,0 0 0 9px #e6eaf6;transition-duration:4600ms}
.experience-controls{margin-top:15px;padding:15px 13px;border-radius:15px;background:#f7f9ff;border:1px solid #e3eafa}
.experience-controls h3{font-size:14px;margin:0 0 3px;font-weight:820;color:#1c2d4a}
.experience-controls p{font-size:11px;color:#71809b;margin:0 0 12px}
.experience-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;min-height:44px;font-size:12px;font-weight:750}
.experience-toggle input[type=checkbox]{width:20px;height:20px;accent-color:#315fe9;cursor:pointer}
.experience-range{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;color:#687a98;font-size:11px;padding:8px 0 9px}
.experience-range input{width:100%;accent-color:#315fe9}
.experience-controls .secondary-btn{min-height:39px;padding:8px 11px;font-size:12px}
.experience-sound-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#415d83;font-weight:800;margin-left:auto}
.experience-sound-badge button{background:#ecf2ff;border:1px solid #d8e3ff;border-radius:99px;padding:6px 10px;color:#315fe9;font-weight:800;font-size:11px}
.winner-dialog{position:fixed;inset:0;margin:auto;padding:20px;max-width:none;width:100vw;height:100dvh;border:none;background:transparent;overflow:hidden;color:#16253e}
.winner-dialog[open]{display:flex;align-items:center;justify-content:center}
.winner-dialog::backdrop{background:rgba(12,22,48,.57);backdrop-filter:blur(5px)}
.celebration-canvas{position:fixed;inset:0;pointer-events:none;z-index:1}
.winner-card{width:min(100%,485px);background:#fff;border:1px solid #fff;border-radius:28px;box-shadow:0 30px 100px #07153991,0 0 0 10px #ffffff11;position:relative;z-index:2;padding:25px 28px 29px;text-align:center;max-height:calc(100dvh - 40px);overflow-y:auto;animation:winner-pop .38s cubic-bezier(.16,1.35,.38,1) both}
@keyframes winner-pop{from{opacity:0;transform:translateY(25px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
.winner-close{position:absolute;top:12px;right:13px;width:36px;height:36px;background:#f3f5fc;border:none;border-radius:99px;color:#64728c;font-size:21px}
.winner-medal{width:82px;height:82px;margin:10px auto 13px;border-radius:26px;background:linear-gradient(145deg,#fff2c5,#ffe0e2);display:grid;place-items:center;font-size:46px;transform:rotate(-7deg);box-shadow:0 10px 20px #f6ae902d}
.winner-eyebrow{font-weight:920;letter-spacing:.15em;font-size:12px;color:#4469d7;margin:8px 0 9px}
.winner-name{font-size:clamp(36px,8vw,62px);font-weight:940;line-height:1.07;letter-spacing:-.055em;max-width:100%;overflow-wrap:anywhere;margin:0;background:linear-gradient(110deg,#202e4b,#315fe9);background-clip:text;-webkit-background-clip:text;color:transparent}
.winner-subtitle{color:#75839a;font-size:14px;margin:12px 0 20px}
.winner-confetti-divider{height:7px;border-radius:999px;background:linear-gradient(90deg,#fac56b 0 16.6%,#fb8581 16.6% 33.3%,#ac9be9 33.3% 50%,#66c4ae 50% 66.6%,#78a6ee 66.6% 83.3%,#f4a77a 83.3%);margin:0 auto 19px;max-width:200px}
.winner-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.winner-actions .primary-btn{grid-column:1/-1;width:100%}
.winner-actions .secondary-btn{min-height:46px;padding:9px;font-size:12px}
.winner-footer{margin:13px auto 0;color:#7b899e;font-size:11px}
.winner-action-label{display:block;margin-top:10px;font-size:12px}
@media(max-width:480px){.winner-dialog{padding:14px}.winner-card{padding:22px 18px 25px;border-radius:25px}.winner-medal{width:72px;height:72px;font-size:40px}.winner-name{font-size:clamp(30px,9vw,48px)}.winner-actions{gap:8px}}
@media(prefers-reduced-motion:reduce){.winner-card{animation:none!important}}
/* SpinWheelJoy v0.5: big wheel, ambient rotation, audio and accessible celebration. */
@media (min-width: 1180px) {
  .studio-wrap{max-width:1350px}
  .studio-grid{grid-template-columns:minmax(0,1.48fr) minmax(345px,.82fr)}
  .wheel-stage{width:min(100%,590px);margin:6px auto 7px}
  .wheel-title,.result-banner{max-width:570px}
  .wheel-actions{max-width:500px}
  .first-paint-studio{grid-template-columns:minmax(0,1.48fr) minmax(345px,.82fr)}
  .first-paint-wheel{width:min(100%,590px)}
}
@media (min-width:741px) and (max-width:1179px){
  .wheel-stage{width:min(100%,520px)}
}
@media (max-width:740px){
  .wheel-stage{width:min(100%,430px);margin:3px auto 7px}
  .wheel-disc{width:99%;height:99%}
  .wheel-side{padding:12px 10px 18px}
  .wheel-title{gap:5px}
  .wheel-title .pill{font-size:10px}
  .quick-sound{font-size:10px;padding:6px 7px;min-height:32px}
  .first-paint-wheel{width:min(100%,430px)}
}
@media (max-width:360px){.wheel-stage{width:min(100%,326px)}}
.wheel-disc,.wheel-disc.ready{transition:none!important;will-change:transform}
.wheel-center{pointer-events:auto;cursor:pointer;transition:box-shadow .2s,background .2s;touch-action:manipulation}
.wheel-center:hover{box-shadow:0 0 0 6px white,0 0 0 11px #315fe958,0 8px 28px #263e6633}
.wheel-center:focus-visible{outline:3px solid #315fe9;outline-offset:7px}
.quick-sound{border:1px solid #d9e4ff;background:#eff4ff;color:#36548f;border-radius:40px;padding:7px 11px;white-space:nowrap;font-size:11px;font-weight:780;cursor:pointer}
.quick-sound:hover{background:#e4ecff}
.experience-controls{margin:20px 0 15px;padding:13px 14px 16px}
.experience-controls summary{cursor:pointer;font-size:14px;font-weight:820;color:#263f65;display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none}
.experience-controls summary::-webkit-details-marker{display:none}
.experience-controls summary span{color:#778baa;font-size:11px;font-weight:650}
.experience-controls:not([open]){padding-bottom:13px}
.experience-controls[open] summary{margin-bottom:14px}
.experience-controls .experience-range{grid-template-columns:50px 1fr 38px}
.experience-note{display:block;color:#7383a0;font-size:11px;line-height:1.5;margin-top:10px}
.winner-dialog{z-index:999}
.winner-card{box-shadow:0 30px 105px #07153999,0 0 0 12px #ffffff10}
@media(prefers-reduced-motion:reduce){.wheel-disc{transition:none!important}.winner-card{animation:none!important}}

/* v0.6 Safe Wheel recovery and autosave microcopy */
.recovery-quick{border:1px solid #d8e6ff;border-radius:999px;background:#eef4ff;color:#315fe9;font-size:11px;font-weight:800;padding:7px 11px;cursor:pointer;white-space:nowrap}
.recovery-quick:hover,.inline-restore:hover{background:#deebff}
.autosave-line{text-align:center;color:#6c7e9d;font-size:12px;margin:5px auto 12px;line-height:1.6}
.safe-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#42bf93;margin-right:4px}
.inline-restore{color:#315fe9;border:0;background:transparent;font:inherit;font-weight:800;padding:4px 6px;border-radius:7px;text-decoration:underline;cursor:pointer}
.recovery-warning{color:#7b87a0;font-size:12px;line-height:1.6;padding-top:13px}
#recovery-list{max-height:48vh;overflow-y:auto}
#recovery-list .saved-item small{display:block;margin-top:4px}
#recovery-list .saved-actions{align-items:center}
.open-recovery-in-saved{display:block;width:100%;margin-top:15px}
@media(max-width:360px){.studio-topbar .topbar-left{font-size:10px}.recovery-quick{padding:7px;font-size:10px}}