/* Capsule dialog chrome follows the live Options colour wheel.
 * The three arcade cabinets keep their distinct Normal/Shiny/Legendary art.
 * v1.46 restores a natural-height, scroll-safe portrait layout instead of
 * stretching the reel to fill the entire mobile viewport. */
.capsules-dialog{
 --caps-accent:var(--accent-0064c7,#2777ae);
 --caps-dark:var(--accent-142e48,#203346);
 --caps-muted:var(--accent-94b7c7,#91b4c1);
 --caps-light:var(--accent-e3f5ff,#dfefff);
 border-color:var(--caps-dark);
 color:var(--accent-25394b,#25394b);
 background:#fffbea;
 box-shadow:inset 0 0 0 3px var(--caps-muted),0 5px 18px #081a2c44;
}
.capsules-dialog::backdrop{background:color-mix(in srgb,var(--caps-dark) 82%,transparent)}
.capsules-dialog .collection-head{
 background:linear-gradient(125deg,color-mix(in srgb,var(--caps-light) 66%,#fff9e6),#fff9e6 88%);
 border-bottom-color:var(--caps-muted);
}
.capsules-dialog .collection-head h2{color:var(--caps-dark)}
.capsules-dialog #capsClose{color:var(--caps-dark)}
.capsules-dialog .caps-stats>div{
 border-color:var(--caps-muted);
 background:color-mix(in srgb,var(--caps-light) 34%,#fff9e8);
 box-shadow:inset 0 0 0 2px #ffffffb8;
}
.capsules-dialog .caps-stats>div:last-child{
 border-color:var(--caps-muted);
 background:color-mix(in srgb,var(--caps-light) 19%,#fff1c8);
}
.capsules-dialog .caps-stats small,
.capsules-dialog .caps-stats span{color:var(--accent-4e7085,#4e7085)}
.capsules-dialog .caps-result{
 border-color:var(--caps-muted);
 background:color-mix(in srgb,var(--caps-light) 26%,#fff9ec);
}
.capsules-dialog .caps-result strong{color:var(--accent-0064c7,#1677af)}
.capsules-dialog .caps-metrics{
 border-color:var(--caps-muted);
 background:color-mix(in srgb,var(--caps-light) 28%,#fff9e8);
}
.capsules-dialog .caps-machine-selector button[aria-pressed=true]{
 outline:3px solid var(--caps-accent);
 outline-offset:1px;
 box-shadow:0 3px 0 var(--caps-dark);
}
.capsules-dialog .caps-machine-selector button:focus-visible,
.capsules-dialog .caps-odds-toggle:focus-visible{
 outline:3px solid var(--caps-accent);
 outline-offset:2px;
}
/* Selected machine remains distinct; odds button/labels have appropriate
 * contrast against their own machine art and are not recolored globally. */
@media(max-width:620px){
 .capsules-dialog{
  box-sizing:border-box;
  width:calc(100vw - 16px);
  max-width:calc(100vw - 16px);
  height:auto;
  max-height:calc(100dvh - 20px);
  margin:auto;
  overflow:hidden;
 }
 .capsules-dialog[open]{display:flex;flex-direction:column}
 .capsules-dialog .collection-head{
  flex:0 0 auto;min-height:48px;
  padding:7px 12px;gap:10px;
 }
 .capsules-dialog .collection-head h2{
  min-width:0;font-size:clamp(17px,5vw,22px)!important;
  line-height:1.15;
 }
 .capsules-dialog #capsClose{
  flex:none;width:40px;min-width:40px;height:40px;min-height:40px;
  font-size:24px!important;line-height:1;
 }
 .capsules-dialog .caps-body{
  display:flex;flex-direction:column;
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  gap:9px;
  padding:10px 10px max(12px,env(safe-area-inset-bottom));
  scrollbar-width:thin;
 }
 .capsules-dialog .caps-stats{
  order:0;flex:none;width:100%;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;
 }
 .capsules-dialog .caps-stats>div{
  min-height:66px;padding:7px 9px;gap:2px;
 }
 .capsules-dialog .caps-stats small{font-size:10px}
 .capsules-dialog .caps-stats b{font-size:19px}
 .capsules-dialog .caps-stats>div:last-child b{font-size:24px}
 .capsules-dialog .caps-stats span{font-size:11px}
 .capsules-dialog .caps-machine-selector{
  order:1;flex:none;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;max-width:none;margin:0;padding:2px;
  gap:6px;min-width:0;
 }
 .capsules-dialog .caps-machine-selector button{
  display:flex;flex-direction:column;justify-content:center;
  width:100%;min-width:0;min-height:68px;max-height:none;
  padding:5px 3px;gap:3px;border-width:2px;
 }
 .capsules-dialog .caps-machine-selector button .caps-mode-symbol{
  flex:none;width:24px;height:24px;font-size:18px;
 }
 .capsules-dialog .caps-machine-selector button strong{
  font-size:clamp(10px,2.8vw,13px);line-height:1.05;
 }
 .capsules-dialog .caps-machine-selector button small{
  font-size:clamp(9px,2.45vw,11px);line-height:1.15;
  overflow-wrap:anywhere;
 }
 .capsules-dialog .caps-machine-wrap{
  order:2;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:auto;min-height:0;
  margin:0;padding:0 4px 5px;
 }
 .capsules-dialog .caps-machine{
  box-sizing:border-box;
  display:flex;flex-direction:column;
  width:min(100%,365px);height:auto;min-height:0;max-height:none;
  margin:0;padding:10px 12px 13px;border-width:4px;
 }
 .capsules-dialog .caps-machine-crest{
  flex:none;height:47px;margin:-3px -3px -5px;
 }
 .capsules-dialog .caps-machine .caps-marquee{
  flex:none;min-height:34px;margin:0 5px;
  border-width:3px;border-radius:6px;
 }
 .capsules-dialog .caps-machine .caps-marquee b{
  font-size:clamp(12px,3.6vw,17px);
 }
 .capsules-dialog .caps-machine .caps-lights{
  flex:none;margin:6px 5px 5px;gap:8px;
 }
 .capsules-dialog .caps-machine .caps-lights i{
  flex:0 1 9px;width:9px;height:9px;border-width:1px;
 }
 .capsules-dialog .caps-reel-frame{
  box-sizing:border-box;
  display:flex;flex:none;flex-direction:column;
  width:min(100%,330px);height:auto;min-height:0;
  margin:5px auto;padding:5px;border-width:4px;
 }
 .capsules-dialog .caps-reel-window{
  box-sizing:border-box;
  display:flex;flex:0 0 auto;flex-direction:column;
  height:198px;min-height:198px;max-height:198px;
  border-width:3px;
 }
 .capsules-dialog .caps-wheel-top,
 .capsules-dialog .caps-wheel-bottom{
  flex:none;min-height:23px;
  padding:4px 5px;font-size:10px;letter-spacing:.5px;
 }
 .capsules-dialog .caps-wheel-center{
  display:flex;flex:1 1 auto;min-height:0;
  gap:5px;padding:7px;
 }
 .capsules-dialog .caps-wheel-center img{
  width:min(116px,50%);height:104px;max-height:104px;
 }
 .capsules-dialog #capsQuestion{font-size:52px}
 .capsules-dialog #capsNameResult{
  font-size:clamp(12px,3vw,15px);line-height:1.15;
 }
 .capsules-dialog .caps-machine .caps-cabinet-info{
  flex:none;display:flex;gap:7px;
  min-height:0;margin:6px auto 5px;padding:0;
 }
 .capsules-dialog .caps-machine .caps-cabinet-info .caps-machine-plaque{
  min-height:34px;margin:0;padding:5px;
  font-size:clamp(10px,2.7vw,12px);
 }
 .capsules-dialog .caps-machine .caps-odds-toggle{
  min-height:34px;min-width:68px;padding:5px 7px;
  font-size:11px;
 }
 .capsules-dialog .caps-machine .caps-actions{
  flex:none;width:100%;max-width:235px;
  margin:7px auto 0;padding:6px 0 0;
 }
 .capsules-dialog .caps-machine .caps-actions .caps-spin-button{
  min-height:51px;padding:6px 10px;
  gap:10px;border-width:3px;border-radius:10px;
 }
 .capsules-dialog .caps-spin-light{
  width:31px;height:31px;min-width:31px;font-size:16px;
 }
 .capsules-dialog .caps-spin-words strong{font-size:15px}
 .capsules-dialog .caps-spin-words small{font-size:11px}
 .capsules-dialog .caps-machine-footer{
  flex:none;height:24px;margin:9px auto -5px;gap:8px;
 }
 .capsules-dialog .caps-footer-emblem{
  height:25px;width:25px;flex-basis:25px;
 }
 .capsules-dialog .caps-result{
  order:3;flex:none;min-height:0;
  margin:0;padding:9px 10px;
  font-size:12px;line-height:1.3;gap:3px;
 }
 .capsules-dialog .caps-result:empty{display:none}
 .capsules-dialog .caps-metrics{
  order:4;flex:none;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:7px;
  width:100%;margin:0;padding:8px;
  font-size:12px;
 }
 .capsules-dialog .caps-metrics button{
  flex:1 1 175px;min-height:38px;
  padding:6px 7px;font-size:11px;line-height:1.2;
 }
}
/* No fixed-height billboard on short phones: entire capsule content scrolls,
 * header stays visible and the machine/reveal remains proportionate. */
@media(max-width:620px) and (max-height:680px){
 .capsules-dialog .caps-reel-window{
  height:170px;min-height:170px;max-height:170px;
 }
 .capsules-dialog .caps-wheel-center img{height:87px;max-height:87px}
 .capsules-dialog .caps-machine-crest{height:37px}
 .capsules-dialog .caps-machine .caps-marquee{min-height:30px}
}