/* Dedicated gacha experience; ordinary drawers keep their own width and motion. */
.gacha-experience.sheet{

  --gacha-stage-shift:clamp(-220px,-29dvh,-135px);
  position:fixed;inset:0;margin:auto;width:100%;max-width:520px;
  height:100dvh;max-height:100dvh;border:0;border-radius:0;padding:0;
  background:linear-gradient(to bottom,var(--gacha-paper) 0%,var(--gacha-light) 42%,var(--gacha-light) 50%,var(--gacha-paper) 100%);color-scheme:var(--theme-color-scheme,dark);
  color:var(--gacha-ink);box-shadow:0 0 70px var(--ui-shadow);overflow:hidden;
}
.gacha-experience[open]{display:flex;flex-direction:column}
.gacha-experience::backdrop{background:var(--gacha-backdrop);backdrop-filter:blur(3px)}
.gacha-experience .gacha-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gacha-scene{position:relative;flex:1;min-height:120px;margin-top:env(safe-area-inset-top);overflow:hidden}
#gacha-canvas{display:block;width:100%;height:100%;position:absolute;inset:0;pointer-events:none}
.gacha-result{flex-shrink:0;text-align:center;min-height:66px;padding:0 20px 12px}
#gacha #result-name{font-size:clamp(23px,6vw,31px);font-weight:800;letter-spacing:-1px;line-height:1.14;margin:0 0 6px}
#gacha #result-theme{font-size:14px;line-height:1.4;color:var(--gacha-muted);margin:0}
.gacha-dock{position:relative;flex-shrink:0;display:flex;flex-direction:column;justify-content:flex-end;min-height:208px;padding:12px 24px calc(20px + env(safe-area-inset-bottom))}
.gacha-balance{position:absolute;z-index:3;top:calc(12px + env(safe-area-inset-top));left:16px;display:flex;align-items:center;gap:8px;min-height:44px;max-width:calc(100% - 88px);padding:0 12px;border-radius:22px;background:var(--gacha-quiet);color:var(--gacha-ink)}
.gacha-balance b{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.gacha-experience svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}
.gacha-experience [hidden]{display:none!important}
.gacha-draws{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gacha-key{
  display:flex;align-items:center;justify-content:center;gap:14px;
  min-width:0;min-height:56px;padding:12px 16px;
  border:1px solid var(--gacha-action-border);border-radius:16px;background:var(--gacha-action);color:var(--gacha-action-ink);
  box-shadow:inset 0 1px 0 var(--ui-highlight-soft);font-size:16px;font-weight:750;
  transition:background 120ms ease,transform 85ms ease;
}
.gacha-key small{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.gacha-key small svg{width:18px;height:18px}
.gacha-key:not(:disabled):hover{background:var(--gacha-action-hover)}
.gacha-key:not(:disabled):active{transform:translateY(1px);background:var(--gacha-action-pressed)}
.gacha-key:disabled{opacity:1;color:var(--gacha-disabled-ink);background:var(--gacha-disabled);border-color:var(--gacha-disabled-border);box-shadow:none}
.gacha-footer{margin-top:12px}
.gacha-close{
  position:absolute;z-index:3;top:calc(12px + env(safe-area-inset-top));right:16px;
  display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:10px;
  border:0;border-radius:50%;background:var(--gacha-quiet);color:var(--gacha-muted);box-shadow:none;
}
.gacha-close svg{width:20px;height:20px}
.gacha-close:not(:disabled):hover{background:var(--gacha-quiet-hover);color:var(--gacha-ink)}
.gacha-place,.gacha-skip{
  display:block;width:100%;min-height:52px;border-radius:16px;padding:12px 16px;
  font:inherit;font-size:14px;font-weight:650;box-shadow:none;
}
.gacha-experience .gacha-place{background:var(--gacha-place);color:var(--gacha-ink);border:1px solid var(--gacha-border)}
.gacha-place:not(:disabled):hover{background:var(--gacha-place-hover);border-color:var(--gacha-border)}
.gacha-place:not(:disabled):active{background:var(--gacha-place-pressed);transform:translateY(1px)}
.gacha-skip{min-height:56px;border:1px solid var(--gacha-border);background:var(--gacha-surface);color:var(--gacha-ink)}
.gacha-experience button:focus-visible{outline:3px solid var(--gacha-focus);outline-offset:3px}
.gacha-experience .gacha-message{margin:0 0 6px;font-size:12px;color:var(--gacha-muted);text-align:center}
@media(max-height:650px){
 .gacha-result{min-height:48px;padding-bottom:5px}#gacha #result-name{font-size:23px}#gacha #result-theme{font-size:12px}
 .gacha-dock{min-height:180px;padding-top:5px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
 .gacha-key,.gacha-skip{min-height:52px;font-size:15px}
 .gacha-footer{margin-top:10px}.gacha-place{min-height:48px;padding:10px}
}
@media(max-height:450px) and (min-width:600px){
 .gacha-experience.sheet[open]{max-width:844px;display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:1fr auto auto}
 .gacha-scene{grid-column:1;grid-row:1 / 4;height:100%;min-height:0;margin:0}
 .gacha-result{grid-column:2;grid-row:1;align-self:end}
 .gacha-results{grid-column:2;grid-row:2;margin:0 20px}
 .gacha-dock{grid-column:2;grid-row:3;width:100%}
}

/* Keep the case and result on one stage; only the keycap moves during release. */
@media (min-height:451px), (max-width:599px){
 .gacha-experience .gacha-scene{position:absolute;inset:0;z-index:0;width:100%;height:100%;margin:0;transform:translateY(var(--gacha-stage-shift))}
 .gacha-experience .gacha-result,.gacha-experience .gacha-results,.gacha-experience .gacha-dock{position:relative;z-index:1}
 .gacha-experience[data-phase=holding] .gacha-result,.gacha-experience[data-phase=result] .gacha-result{animation:gacha-content-rise 420ms cubic-bezier(.22,1,.36,1) both}
 .gacha-experience[data-phase=result] .gacha-results,.gacha-experience[data-phase=result] .gacha-footer{animation:gacha-content-rise 460ms 70ms cubic-bezier(.22,1,.36,1) both}
}
@keyframes gacha-content-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.gacha-experience[data-phase] :is(.gacha-result,.gacha-results,.gacha-footer){animation:none}}
@media(prefers-reduced-motion:reduce){.gacha-key{transition:none}}
@media(forced-colors:active){
 .gacha-key{border:2px solid ButtonText;background:ButtonFace;color:ButtonText}
 .gacha-close{border:1px solid ButtonText}.gacha-experience .gacha-place{background:ButtonFace;color:ButtonText;border:2px solid ButtonText}
}


/* Local preview only: replenishes test credit without changing tap progression. */
.gacha-test-tickets{position:absolute;z-index:3;left:24px;top:calc(54px + env(safe-area-inset-top));min-height:44px;border:0;background:none;padding:0 2px;font-size:11px;color:var(--gacha-muted);text-decoration:underline;text-underline-offset:3px}

/* Committed ticket changes: decorative layer never intercepts input. */
.currency-fx-layer{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.currency-delta{position:absolute;font:750 15px/1 Manrope,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.currency-delta.is-spend{color:var(--ui-spend)}.currency-delta.is-gain{color:var(--ui-gain)}
.gacha-experience .currency-delta.is-spend{color:var(--gacha-spend)}
.gacha-experience .currency-delta.is-gain{color:var(--gacha-gain)}
.gacha-balance b,#ticket-balance b{display:inline-block;transform-origin:center}

/* Result-group layout. Card appearance and carousel states live in shared components. */
.gacha-results {display:block;flex-shrink:0;margin:0 16px;min-width:0}
.gacha-scene {touch-action:pan-y}
.gacha-progress {margin:0 0 12px;color:var(--gacha-muted);text-align:center;font-size:12px;font-variant-numeric:tabular-nums}
.gacha-running-actions {display:flex;gap:10px}
.gacha-running-actions .gacha-skip {flex:1;min-width:0;padding:12px 8px;font-size:13px}
.gacha-skip:disabled {opacity:.55;cursor:default}
.gacha-dock {min-height:176px}
@media(max-height:650px){.gacha-dock {min-height:152px;padding-left:16px;padding-right:16px}.gacha-results .ui-reward-grid {max-width:255px;gap:6px}}
@media(max-height:450px) and (min-width:600px){.gacha-dock {min-height:142px}.gacha-results {margin:0 12px}}

/* Fixed scene tracks: revealing controls never change the canvas size or keycap anchor. */
.gacha-experience.sheet[open] {display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 100px 112px calc(176px + env(safe-area-inset-bottom))}
.gacha-experience .gacha-scene {grid-column:1;grid-row:1;min-height:0}
.gacha-experience .gacha-result {grid-column:1;grid-row:2;display:flex;flex-direction:column;justify-content:center;min-height:0;height:100%;padding:0 20px 8px;overflow:hidden}
.gacha-experience #result-name {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex-shrink:0}
.gacha-experience .gacha-results {grid-column:1;grid-row:3;align-self:center}
.gacha-experience .gacha-dock {grid-column:1;grid-row:4;min-height:0;height:100%;width:100%}
@media(max-height:650px){.gacha-experience.sheet[open] {grid-template-rows:minmax(0,1fr) 88px 106px calc(152px + env(safe-area-inset-bottom))}}
@media(max-height:450px) and (min-width:600px){
 .gacha-experience.sheet[open] {grid-template-columns:1.1fr 1fr;grid-template-rows:minmax(0,1fr) 106px calc(152px + env(safe-area-inset-bottom))}
 .gacha-experience .gacha-scene {grid-column:1;grid-row:1 / 4;height:100%;margin:0}
 .gacha-experience .gacha-result {grid-column:2;grid-row:1;padding:48px 20px 0}
 .gacha-experience .gacha-results {grid-column:2;grid-row:2}
 .gacha-experience .gacha-dock {grid-column:2;grid-row:3}
}

/* Reward signals on the stage: the sound mark rides the result keycap's top-right corner
   (the scene reports the keycap's centre and size each paint) and a mood toast drops in
   under the balance row. Both take the stage palette. */
.gacha-experience {--mark-surface:var(--gacha-surface);--mark-ink:var(--gacha-muted);--mark-ring:var(--gacha-border);--mark-shadow:var(--ui-shadow-strong);--mark-accent:var(--gacha-action);--mark-accent-ink:var(--gacha-action-ink);--mark-accent-ring:var(--gacha-ink);
 --ui-toast-surface:var(--gacha-surface);--ui-toast-border:var(--gacha-border);--ui-toast-ink:var(--gacha-ink);--ui-toast-muted:var(--gacha-muted);--ui-toast-shadow:var(--ui-shadow-strong);--ui-toast-accent:var(--gacha-action);--ui-toast-accent-ink:var(--gacha-action-ink)}
.gacha-sound-mark {position:absolute;z-index:2;left:var(--x,50%);top:var(--y,50%);margin:calc(var(--size) / -2) 0 0 calc(var(--size) / -2);pointer-events:none}
.gacha-toasts {position:absolute;z-index:4;left:16px;right:16px;top:calc(66px + env(safe-area-inset-top))}
/* When the keycap's top face reaches into that band (the stage sits higher on short
   screens; the UI decides from the keycap anchor) the toast rises from just above the
   dock instead, over the result thumbnails. */
.gacha-toasts[data-edge=bottom] {top:auto;bottom:calc(184px + env(safe-area-inset-bottom))}
.gacha-toasts[data-edge=bottom] .ui-toast {animation-name:ui-toast-in-up}
.gacha-toasts[data-edge=bottom] .ui-toast[data-leaving] {animation-name:ui-toast-out-down}
@media(max-height:650px){.gacha-toasts[data-edge=bottom] {bottom:calc(160px + env(safe-area-inset-bottom))}}
@media(max-height:450px) and (min-width:600px){.gacha-toasts {left:auto;right:16px;width:min(360px,45%)}}