/*
 * Opera Games — info drawer for the mascot slot layout (owner-approved model "A2", 11/11/2026).
 * Fixed info cards (marked data-drawer in .prizes) live in a glass drawer opened by a pill under the sound/info
 * buttons; cards whose value changes during play stay visible as small cards beside the mascot. See info-drawer.js.
 */
.stage > .prizes.idr-chips { position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; height: 0 !important;
  margin: 0 !important; padding: 0 !important; display: block !important; z-index: 5 !important; pointer-events: none; }
.prizes.idr-chips > .prize { position: absolute !important; margin: 0 !important; pointer-events: auto; box-sizing: border-box; }
.prizes.idr-chips > .prize[hidden] { display: none !important; }
.prizes.idr-chips > .prize.idr-compact { padding-top: 1px !important; padding-bottom: 1px !important; }
.prizes.idr-chips > .prize.idr-compact > span { font-size: 8px !important; }
.prizes.idr-chips > .prize.idr-compact > b { font-size: 12px !important; }
.prizes.idr-chips > .prize.idr-compact > small, .prizes.idr-chips > .prize.idr-compact > i.bar { display: none !important; }

.idr { position: absolute; right: 10px; z-index: 9; display: flex; flex-direction: column; align-items: flex-end; }
.idr-tab { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px 0 12px; border-radius: 999px;
  border: 2px solid var(--idr-accent, #ffd76a); color: var(--idr-accent, #ffd76a); background: var(--idr-bg, #2a0d4f);
  box-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 12px var(--idr-glow, rgba(255,215,106,.45)), inset 0 1px 0 rgba(255,255,255,.25); cursor: pointer; }
.idr-tab:active { transform: translateY(1px); }
.idr-tab b { font-size: 10.5px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.idr-tab svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .28s cubic-bezier(.3,1.4,.5,1); filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.idr.open .idr-tab svg { transform: rotate(180deg); }
.idr-panel { margin-top: 6px; min-width: 176px; max-width: 230px; padding: 8px 12px; border-radius: 14px;
  background: rgba(10,6,24,.6); -webkit-backdrop-filter: blur(10px) saturate(1.25); backdrop-filter: blur(10px) saturate(1.25);
  border: 1px solid var(--idr-accent, #ffd76a); box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 14px var(--idr-glow, rgba(255,215,106,.45));
  transform-origin: top right; transform: translateY(-10px) scaleY(.92); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .26s cubic-bezier(.2,.9,.3,1.2), opacity .2s, visibility 0s .26s; }
.idr.open .idr-panel { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform .26s cubic-bezier(.2,.9,.3,1.2), opacity .2s; }
/* the moved cards become rows: label (in the card's own colour) · value */
.idr-panel > .prize { position: static !important; display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px;
  width: auto !important; margin: 0 !important; padding: 4px 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; text-align: left !important; min-width: 0; min-height: 0 !important; height: auto !important; animation: none !important; }
.idr-panel > .prize + .prize { border-top: 1px solid rgba(255,255,255,.12) !important; }
.idr-panel > .prize > span { display: block; white-space: nowrap; font-size: 10px !important; font-weight: 900; letter-spacing: 1px; margin: 0 !important;
  color: var(--idr-key, #ffd76a) !important; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.idr-panel > .prize > b { display: block; white-space: nowrap; font-size: 16px !important; font-weight: 900; color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.8);
  transform: none !important; margin: 0 !important; overflow: visible !important; }
.idr-panel > .prize > b img { height: 20px; vertical-align: middle; }
.idr-panel > .prize > :not(span):not(b) { display: none !important; }
@media (prefers-reduced-motion: reduce) { .idr-tab svg, .idr-panel { transition: none; } }