/* One pastel stage from capsule choice to discovery. The capsule artwork keeps
   its saved hue throughout; rarity is only styled after the third tap. */
.draw-sound {display:none;}
html:has(#draw-dialog.draw-experience[open]) {overflow:hidden;}
#draw-dialog.draw-experience[open] {
  display:block;width:min(1000px,96vw);height:min(720px,94dvh);max-width:none;max-height:none;
  margin:auto;padding:0;overflow:hidden;border:3px solid #7851a1;border-radius:28px;
  background:radial-gradient(ellipse at 50% 35%,#fff 0%,#fff8fd 40%,#f0e8ff 100%);
  box-shadow:0 7px 0 #b88ac1,0 24px 80px #41245b55;
}
.draw-experience .space-rail,.draw-experience .space-tabs,.draw-experience .space-progress {display:none!important;}
.draw-experience .space-page {display:flex;flex-direction:column;height:100%;min-height:0;padding:16px 24px;}
.draw-experience .space-header {display:flex;align-items:center;gap:12px;flex:none;min-height:48px;margin-bottom:6px;}
.draw-experience .space-header h1 {flex:1;min-width:0;margin:0!important;font:700 clamp(20px,3vw,28px)/1.15 'Trebuchet MS',sans-serif;text-align:center;color:#472872;text-wrap:balance;}
.draw-experience .space-back,.draw-experience .space-close,.draw-experience .draw-sound {
  display:flex;align-items:center;justify-content:center;flex:none;gap:7px;
  width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;font-size:26px;touch-action:manipulation;
}
.draw-experience .space-back {width:auto;padding:0 13px;font-size:14px;}
.draw-experience .space-back::after {content:'Magasin';}
.draw-experience .space-back svg {width:22px;height:22px;}
.draw-experience .draw-sound {background:#f5efff;font-size:24px;}
.draw-experience .draw-sound[aria-pressed="false"] {color:#877899;}
.draw-sound svg {width:26px;height:26px;fill:none;stroke:#67418c;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;}
.draw-sound .speaker-body {fill:#f8abd9;}
.draw-sound .speaker-muted,.draw-sound[aria-pressed="false"] .speaker-waves {display:none;}
.draw-sound[aria-pressed="false"] .speaker-muted {display:block;}
.draw-experience .space-scroll {flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:8px;overflow:hidden;padding:6px 4px;}
.draw-experience #draw-body {position:relative;min-height:0;min-width:0;margin:0 auto;height:100%;width:100%;overflow:hidden;isolation:isolate;container-type:size;}
.draw-experience #draw-status {margin:0;min-height:24px;max-height:30dvh;overflow:auto;font:15px/1.4 'Trebuchet MS',sans-serif;color:#63447f;text-align:center;}
.draw-experience #draw-actions {display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin:0;padding:5px 4px;}
.draw-experience #draw-actions:empty {display:none;}
.draw-experience #draw-actions button {min-height:48px;min-width:180px;margin:0;padding:9px 22px;font-size:16px;touch-action:manipulation;}
.draw-experience button:focus-visible {outline:3px solid #8050bc;outline-offset:3px;}
.draw-experience #draw-body.ball-grid {
  display:grid;grid-template:repeat(3,minmax(0,1fr))/repeat(3,minmax(0,1fr));
  gap:10px;width:min(470px,100%);max-width:min(470px,calc((100dvh - 175px)*1.18));padding:8px;
}
.draw-experience .ball-choice {
  width:100%;height:100%;min-height:44px;min-width:44px;aspect-ratio:auto;padding:2px;margin:0;
  border:1px solid #dcc6ed;border-radius:25%;background:radial-gradient(ellipse,#fff,#f6eefe);
  box-shadow:inset 0 2px 0 #fff,0 3px 0 #dfc6e9;outline:none;transition:transform .15s,border-color .15s;
}
.draw-experience .ball-choice:hover {border-color:#bd71c3;transform:translateY(-2px);}
.draw-experience .ball-choice:active {transform:scale(.95);}
.draw-experience .ball-choice img {height:100%;width:100%;object-fit:contain;}
.draw-experience .ball-choice.selected-choice {outline:3px solid #ce58a9;outline-offset:3px;opacity:1;box-shadow:0 0 0 7px #f9d8ef;}
.draw-experience .dispense-scene {display:block;}
.draw-experience .dispense-scene>.toy-picture {position:absolute;left:calc(50% - 220px);bottom:0;width:300px;height:100%;max-width:65%;object-fit:contain;}
.draw-experience .rolling-ball {position:absolute;left:50%;bottom:8%;width:32%;height:48%;object-fit:contain;animation:draw-roll 1s cubic-bezier(.22,.65,.35,1) both;}
@keyframes draw-roll {0%{transform:translate(-70%,-10%) scale(.3);opacity:0;}20%{opacity:1;}75%{transform:translate(8%,-5%) rotate(340deg);}100%{transform:translate(0,0) rotate(360deg);}}
.draw-experience .opening-scene {display:grid;place-items:center;}
.draw-experience .opening-scene::before,.draw-experience .reveal-scene::before {content:'';position:absolute;inset:12% 20% 3%;z-index:-1;background:radial-gradient(ellipse,#f0dafa88,transparent 65%);border-radius:50%;pointer-events:none;}
.draw-experience .big-capsule {
  position:relative;display:block;height:100%;width:auto;aspect-ratio:1;max-width:100%;max-height:420px;min-height:0;
  padding:4px;border:0;background:transparent;box-shadow:none;margin:0;touch-action:manipulation;isolation:isolate;
}
.draw-experience .big-capsule img {display:block;width:100%;height:100%;object-fit:contain;}
.draw-experience .big-capsule.wiggle {animation:draw-tap .36s ease-out;}
.draw-experience .big-capsule[data-taps="2"].wiggle {animation:draw-tap .45s ease-out;}
@keyframes draw-tap {0%,100%{transform:scale(1) rotate(0);}25%{transform:scale(.94,1.04) rotate(-4deg);}55%{transform:scale(1.04,.97) rotate(4deg);}80%{transform:rotate(-2deg);}}
.capsule-seam {position:absolute;inset:34% 19% 35%;opacity:0;border-radius:50%;box-shadow:0 0 24px 5px #ffe5ff;pointer-events:none;z-index:-1;}
.cracked .capsule-seam {opacity:.85;}
.tap-progress {display:flex;align-items:center;justify-content:center;gap:18px;min-height:38px;}
.tap-progress span {display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid #d6b6e3;background:#fff9fd;color:#a07aac;font-weight:bold;}
.tap-progress .done {background:#f9b6dc;border-color:#c977bd;color:#683a7d;box-shadow:0 0 0 3px #f9e2f3;}
.draw-experience .reveal-scene {display:grid;place-items:center;}
.draw-hero {position:absolute;inset:0;display:flex;justify-content:center;align-items:center;z-index:2;animation:draw-discover .55s cubic-bezier(.2,.8,.25,1.1) both;}
.draw-hero>.toy-picture,.draw-hero>.collectible-art {display:block;height:min(100cqh,80cqw,380px);width:min(100cqh,80cqw,380px);object-fit:contain;max-height:100%;}
.draw-hero .collectible-art>.toy-picture {height:100%;width:100%;}
@keyframes draw-discover {from{opacity:0;transform:translateY(22px) scale(.75);}to{opacity:1;transform:none;}}
.capsule-halves {position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.9;}
.capsule-half {position:absolute;bottom:calc(50% - min(42cqh,40cqw,170px));width:min(75cqh,36cqw,200px);height:auto;aspect-ratio:3/2;object-fit:contain;}
.capsule-half-top {left:calc(50% - min(30cqw,215px));transform:rotate(-12deg);animation:half-left .55s ease-out both;}
.capsule-half-bottom {right:calc(50% - min(30cqw,215px));transform:rotate(14deg);animation:half-right .55s ease-out both;}
@keyframes half-left {from{opacity:0;translate:40% -12%;}to{opacity:1;translate:0 0;}}
@keyframes half-right {from{opacity:0;translate:-40% -12%;}to{opacity:1;translate:0 0;}}
.draw-experience .draw-gacha-name {font:700 clamp(20px,3vw,28px)/1.15 'Trebuchet MS',sans-serif;margin:0 0 5px;color:#472872;}
.draw-experience .rarity-badge {margin:0 8px 0 0;font-size:13px;vertical-align:middle;}
.draw-ownership {font-size:13px;white-space:nowrap;}
.draw-sparkle {position:absolute;left:var(--x);top:var(--y);color:#c8a4e1;font-size:22px;pointer-events:none;z-index:3;opacity:0;animation:draw-sparkle 1.1s var(--delay) ease-out both;}
@keyframes draw-sparkle {15%{opacity:1;transform:scale(.5);}45%{opacity:.85;transform:scale(1.1);}100%{opacity:0;transform:translateY(-22px) scale(.3);}}
.draw-experience[data-rarity="veryRare"] .draw-sparkle {color:#e7ac3b;}
.draw-experience[data-rarity="veryRare"] .reveal-scene::before {background:radial-gradient(ellipse,#ffe4a8aa,#f8ddff66 45%,transparent 70%);}
.draw-experience .completion-celebration {display:flex;align-items:center;justify-content:center;gap:8px;padding:6px;margin:4px 0 0;}
.draw-experience .completion-badge {font-size:12px;white-space:nowrap;margin:0;}
.draw-experience .completion-message {font-size:12px;}
@media (max-height:600px) and (orientation:landscape), (max-width:700px), (display-mode:fullscreen), (display-mode:standalone) {
  #draw-dialog.draw-experience[open] {width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0;box-shadow:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
  .draw-experience .space-page {padding:8px 16px;}
  .draw-experience .space-header {gap:8px;margin:0;}
  .draw-experience .space-scroll {gap:4px;padding:3px 4px;}
  .draw-experience #draw-actions {gap:12px;padding:4px;}
  .draw-experience #draw-actions button {min-height:44px;font-size:14px;padding:8px 16px;}
}
@media (max-height:450px) and (orientation:landscape) {
  .draw-experience .space-page {padding:5px 14px;}
  .draw-experience .space-header {min-height:44px;}
  .draw-experience .space-header h1 {font-size:22px;}
  .draw-experience #draw-status {font-size:13px;}
  .draw-experience .draw-gacha-name {font-size:21px;margin-bottom:3px;}
  .draw-experience #draw-body.ball-grid {gap:6px;padding:4px;max-width:calc((100dvh - 140px)*1.1);}
  .draw-experience .ball-choice {border-radius:20%;}
  .draw-experience .dispense-scene>.toy-picture {left:calc(50% - 160px);width:220px;}
  .tap-progress {min-height:28px;}
  .tap-progress span {width:26px;height:26px;font-size:13px;}
  .draw-experience .completion-message {display:none;}
}
@media (max-width:500px) {
  .draw-experience .space-header h1 {font-size:21px;}
  .draw-experience .space-back {width:44px;padding:0;}
  .draw-experience .space-back::after {display:none;}
  .draw-experience #draw-actions button {min-width:0;flex:1;padding:8px;}
  .draw-experience .dispense-scene>.toy-picture {left:0;width:65%;}
  .draw-experience .draw-gacha-name {font-size:25px;}
  .draw-experience .completion-celebration {flex-direction:column;}
}
@media (max-width:500px) and (orientation:portrait) {
  .draw-experience[data-stage="reveal"] #draw-body {height:min(100%,340px);align-self:end;}
  .draw-experience[data-stage="reveal"] #draw-status {padding-bottom:clamp(24px,13dvh,110px);max-height:40dvh;}
}
@media (prefers-reduced-motion:reduce) {
  .draw-experience *, .draw-experience *::before {animation:none!important;transition:none!important;}
  .draw-experience .rolling-ball {transform:none;}
  .draw-sparkle {display:none;}
}