/* === show-wheel.css === */
.show-wheel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; padding: 20px 16px; background: #131A2E; border: 1px solid rgba(148, 163, 184, 0.10); border-radius: 16px; text-align: center; }
.show-wheel .show-wheel-title { margin: 0; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: #F97316; }
.show-wheel h2.show-wheel-title, .show-wheel h3.show-wheel-title, .show-wheel h4.show-wheel-title { font-size: 12px; letter-spacing: 0.14em; }
.show-wheel .show-wheel-stage { position: relative; width: 100%; max-width: 280px; aspect-ratio: 1 / 1; margin: 6px 0 0; }
.show-wheel .show-wheel-stage::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 999px; box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.25), 0 0 40px rgba(249, 115, 22, 0.18); pointer-events: none; }
.show-wheel .show-wheel-image { display: block; width: 100%; height: 100%; }
.show-wheel .show-wheel-image.is-spinning { animation: showWheelTurn 4.2s cubic-bezier(0.12, 0.62, 0.18, 1) both; }
.show-wheel .show-wheel-pointer { position: absolute; top: -10px; left: 50%; z-index: 1; width: 22px; height: 30px; margin-left: -11px; background: #FFFFFF; clip-path: polygon(0 0, 100% 0, 50% 100%); font-size: 0; color: transparent; }
.show-wheel .show-wheel-pointer::before { content: ''; position: absolute; top: 3px; left: 4px; width: 14px; height: 18px; background: #F97316; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.show-wheel .show-wheel-result { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; margin: 0; font-size: 15px; line-height: 1.4; color: #CBD5E1; }
.show-wheel .show-wheel-chip { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 10px; font-size: 18px; font-weight: 800; color: #FFFFFF; background: #273549; font-variant-numeric: tabular-nums; }
.show-wheel .show-wheel-chip.is-empty { display: none; }
.show-wheel .show-wheel-chip-one, .show-wheel .show-wheel-legend-chip-one, .show-wheel .show-wheel-history-item-one { background: #3B82F6; color: #FFFFFF; }
.show-wheel .show-wheel-chip-two, .show-wheel .show-wheel-legend-chip-two, .show-wheel .show-wheel-history-item-two { background: #F59E0B; color: #0F172A; }
.show-wheel .show-wheel-chip-five, .show-wheel .show-wheel-legend-chip-five, .show-wheel .show-wheel-history-item-five { background: #15803D; color: #FFFFFF; }
.show-wheel .show-wheel-chip-fifteen, .show-wheel .show-wheel-legend-chip-fifteen, .show-wheel .show-wheel-history-item-fifteen { background: #EF4444; color: #FFFFFF; }
.show-wheel .show-wheel-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px; background: transparent; border: 1px solid rgba(249, 115, 22, 0.55); border-radius: 999px; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; color: #FFFFFF; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.show-wheel .show-wheel-button:hover { background-color: rgba(249, 115, 22, 0.12); border-color: #F97316; }
.show-wheel .show-wheel-button:focus-visible { outline: 2px solid #93C5FD; outline-offset: 3px; }
.show-wheel .show-wheel-button:disabled { opacity: 0.5; cursor: wait; }
.show-wheel .show-wheel-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 360px; margin: 0; padding: 0; list-style: none; }
.show-wheel .show-wheel-legend-item { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; background: #1E293B; border: 1px solid rgba(148, 163, 184, 0.08); border-radius: 10px; font-size: 13px; line-height: 1.3; color: #CBD5E1; text-align: left; }
.show-wheel .show-wheel-legend-chip { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 28px; height: 24px; padding: 0 6px; border-radius: 6px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.show-wheel .show-wheel-history { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.show-wheel .show-wheel-history-label { font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: #64748B; }
.show-wheel .show-wheel-history-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 26px; }
.show-wheel .show-wheel-history-item { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 6px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.show-wheel .show-wheel-history-empty { font-size: 13px; line-height: 2; color: #64748B; }
.show-wheel .show-wheel-note { margin: 0; max-width: 380px; font-size: 13px; line-height: 1.5; color: #94A3B8; }
.show-wheel .show-wheel-image.show-wheel-land-0 { rotate: -2.727deg; }
.show-wheel .show-wheel-image.show-wheel-land-1 { rotate: -8.182deg; }
.show-wheel .show-wheel-image.show-wheel-land-2 { rotate: -13.636deg; }
.show-wheel .show-wheel-image.show-wheel-land-3 { rotate: -19.091deg; }
.show-wheel .show-wheel-image.show-wheel-land-4 { rotate: -24.545deg; }
.show-wheel .show-wheel-image.show-wheel-land-5 { rotate: -30.000deg; }
.show-wheel .show-wheel-image.show-wheel-land-6 { rotate: -35.455deg; }
.show-wheel .show-wheel-image.show-wheel-land-7 { rotate: -40.909deg; }
.show-wheel .show-wheel-image.show-wheel-land-8 { rotate: -46.364deg; }
.show-wheel .show-wheel-image.show-wheel-land-9 { rotate: -51.818deg; }
.show-wheel .show-wheel-image.show-wheel-land-10 { rotate: -57.273deg; }
.show-wheel .show-wheel-image.show-wheel-land-11 { rotate: -62.727deg; }
.show-wheel .show-wheel-image.show-wheel-land-12 { rotate: -68.182deg; }
.show-wheel .show-wheel-image.show-wheel-land-13 { rotate: -73.636deg; }
.show-wheel .show-wheel-image.show-wheel-land-14 { rotate: -79.091deg; }
.show-wheel .show-wheel-image.show-wheel-land-15 { rotate: -84.545deg; }
.show-wheel .show-wheel-image.show-wheel-land-16 { rotate: -90.000deg; }
.show-wheel .show-wheel-image.show-wheel-land-17 { rotate: -95.455deg; }
.show-wheel .show-wheel-image.show-wheel-land-18 { rotate: -100.909deg; }
.show-wheel .show-wheel-image.show-wheel-land-19 { rotate: -106.364deg; }
.show-wheel .show-wheel-image.show-wheel-land-20 { rotate: -111.818deg; }
.show-wheel .show-wheel-image.show-wheel-land-21 { rotate: -117.273deg; }
.show-wheel .show-wheel-image.show-wheel-land-22 { rotate: -122.727deg; }
.show-wheel .show-wheel-image.show-wheel-land-23 { rotate: -128.182deg; }
.show-wheel .show-wheel-image.show-wheel-land-24 { rotate: -133.636deg; }
.show-wheel .show-wheel-image.show-wheel-land-25 { rotate: -139.091deg; }
.show-wheel .show-wheel-image.show-wheel-land-26 { rotate: -144.545deg; }
.show-wheel .show-wheel-image.show-wheel-land-27 { rotate: -150.000deg; }
.show-wheel .show-wheel-image.show-wheel-land-28 { rotate: -155.455deg; }
.show-wheel .show-wheel-image.show-wheel-land-29 { rotate: -160.909deg; }
.show-wheel .show-wheel-image.show-wheel-land-30 { rotate: -166.364deg; }
.show-wheel .show-wheel-image.show-wheel-land-31 { rotate: -171.818deg; }
.show-wheel .show-wheel-image.show-wheel-land-32 { rotate: -177.273deg; }
.show-wheel .show-wheel-image.show-wheel-land-33 { rotate: -182.727deg; }
.show-wheel .show-wheel-image.show-wheel-land-34 { rotate: -188.182deg; }
.show-wheel .show-wheel-image.show-wheel-land-35 { rotate: -193.636deg; }
.show-wheel .show-wheel-image.show-wheel-land-36 { rotate: -199.091deg; }
.show-wheel .show-wheel-image.show-wheel-land-37 { rotate: -204.545deg; }
.show-wheel .show-wheel-image.show-wheel-land-38 { rotate: -210.000deg; }
.show-wheel .show-wheel-image.show-wheel-land-39 { rotate: -215.455deg; }
.show-wheel .show-wheel-image.show-wheel-land-40 { rotate: -220.909deg; }
.show-wheel .show-wheel-image.show-wheel-land-41 { rotate: -226.364deg; }
.show-wheel .show-wheel-image.show-wheel-land-42 { rotate: -231.818deg; }
.show-wheel .show-wheel-image.show-wheel-land-43 { rotate: -237.273deg; }
.show-wheel .show-wheel-image.show-wheel-land-44 { rotate: -242.727deg; }
.show-wheel .show-wheel-image.show-wheel-land-45 { rotate: -248.182deg; }
.show-wheel .show-wheel-image.show-wheel-land-46 { rotate: -253.636deg; }
.show-wheel .show-wheel-image.show-wheel-land-47 { rotate: -259.091deg; }
.show-wheel .show-wheel-image.show-wheel-land-48 { rotate: -264.545deg; }
.show-wheel .show-wheel-image.show-wheel-land-49 { rotate: -270.000deg; }
.show-wheel .show-wheel-image.show-wheel-land-50 { rotate: -275.455deg; }
.show-wheel .show-wheel-image.show-wheel-land-51 { rotate: -280.909deg; }
.show-wheel .show-wheel-image.show-wheel-land-52 { rotate: -286.364deg; }
.show-wheel .show-wheel-image.show-wheel-land-53 { rotate: -291.818deg; }
.show-wheel .show-wheel-image.show-wheel-land-54 { rotate: -297.273deg; }
.show-wheel .show-wheel-image.show-wheel-land-55 { rotate: -302.727deg; }
.show-wheel .show-wheel-image.show-wheel-land-56 { rotate: -308.182deg; }
.show-wheel .show-wheel-image.show-wheel-land-57 { rotate: -313.636deg; }
.show-wheel .show-wheel-image.show-wheel-land-58 { rotate: -319.091deg; }
.show-wheel .show-wheel-image.show-wheel-land-59 { rotate: -324.545deg; }
.show-wheel .show-wheel-image.show-wheel-land-60 { rotate: -330.000deg; }
.show-wheel .show-wheel-image.show-wheel-land-61 { rotate: -335.455deg; }
.show-wheel .show-wheel-image.show-wheel-land-62 { rotate: -340.909deg; }
.show-wheel .show-wheel-image.show-wheel-land-63 { rotate: -346.364deg; }
.show-wheel .show-wheel-image.show-wheel-land-64 { rotate: -351.818deg; }
.show-wheel .show-wheel-image.show-wheel-land-65 { rotate: -357.273deg; }
@keyframes showWheelTurn { from { transform: rotate(-1800deg); } to { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) {
  .show-wheel .show-wheel-image.is-spinning { animation: none; }
}
@media (min-width: 768px) {
  .show-wheel { padding: 24px; gap: 18px; }
  .show-wheel .show-wheel-stage { max-width: 320px; }
  .show-wheel .show-wheel-legend { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
  .show-wheel .show-wheel-legend-item { flex-direction: column; gap: 6px; text-align: center; }
}
@media (min-width: 1024px) {
  .show-wheel .show-wheel-stage { max-width: 340px; }
}

/* === wheel-math.css === */
.wheel-math { display: flex; flex-direction: column; gap: 0; margin: 0 0 32px; background: #131A2E; border: 1px solid rgba(148, 163, 184, 0.10); border-radius: 14px; }
.wheel-math .wheel-math-part { display: flex; flex-direction: column; gap: 16px; padding: 20px 16px; }
.wheel-math .wheel-math-part + .wheel-math-part { border-top: 1px solid rgba(148, 163, 184, 0.10); }
.wheel-math .wheel-math-step { font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: #F97316; }
.wheel-math .wheel-math-title { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: #FFFFFF; }
.wheel-math h2.wheel-math-title, .wheel-math h3.wheel-math-title, .wheel-math h4.wheel-math-title { font-size: 19px; }
.wheel-math .wheel-math-intro { margin: 0; font-size: 15px; line-height: 1.6; color: #94A3B8; }
.wheel-math .wheel-math-segments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wheel-math .wheel-math-segment { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 64px; padding: 10px 6px; background: #1E293B; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 12px; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #CBD5E1; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.wheel-math .wheel-math-segment:hover { border-color: rgba(249, 115, 22, 0.55); }
.wheel-math .wheel-math-segment:focus-visible { outline: 2px solid #93C5FD; outline-offset: 3px; }
.wheel-math .wheel-math-segment.is-active { background: rgba(249, 115, 22, 0.14); border-color: #F97316; color: #FFFFFF; }
.wheel-math .wheel-math-segment-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 30px; padding: 0 8px; border-radius: 8px; font-size: 16px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.wheel-math .wheel-math-segment-count { font-size: 12px; font-weight: 600; line-height: 1.3; }
.wheel-math .wheel-math-chip-one { background: #3B82F6; color: #FFFFFF; }
.wheel-math .wheel-math-chip-two { background: #F59E0B; color: #0F172A; }
.wheel-math .wheel-math-chip-five { background: #15803D; color: #FFFFFF; }
.wheel-math .wheel-math-chip-fifteen { background: #EF4444; color: #FFFFFF; }
.wheel-math .wheel-math-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wheel-math .wheel-math-fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; background: #1E293B; border: 1px solid rgba(148, 163, 184, 0.08); border-radius: 12px; }
.wheel-math .wheel-math-fact-label { font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: #94A3B8; }
.wheel-math .wheel-math-fact-value { font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.wheel-math .wheel-math-fact-edge .wheel-math-fact-value { color: #F97316; }
.wheel-math .wheel-math-explain { margin: 0; padding: 14px 16px; background: #0F172A; border-left: 3px solid #F97316; border-radius: 10px; font-size: 15px; line-height: 1.6; color: #CBD5E1; }
.wheel-math .wheel-math-bars { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wheel-math .wheel-math-bars-title { font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: #64748B; }
.wheel-math .wheel-math-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 12px; margin: 0; }
.wheel-math .wheel-math-bar-name { font-size: 15px; font-weight: 600; line-height: 1.4; color: #CBD5E1; }
.wheel-math .wheel-math-bar-rate { display: block; font-size: 13px; font-weight: 400; line-height: 1.4; color: #94A3B8; }
.wheel-math .wheel-math-bar-value { font-size: 16px; font-weight: 800; line-height: 1.2; color: #CBD5E1; text-align: right; font-variant-numeric: tabular-nums; }
.wheel-math .wheel-math-bar { grid-column: 1 / -1; grid-row: 2; display: block; height: 8px; background: rgba(148, 163, 184, 0.12); border-radius: 999px; overflow: hidden; }
.wheel-math .wheel-math-fill { display: block; height: 100%; background: #64748B; border-radius: 999px; font-size: 0; color: transparent; transition: width 0.3s; }
.wheel-math .wheel-math-bar-row.is-current .wheel-math-bar-name, .wheel-math .wheel-math-bar-row.is-current .wheel-math-bar-value { color: #FFFFFF; }
.wheel-math .wheel-math-bar-row.is-current .wheel-math-fill { background: #F97316; }
.wheel-math .wheel-math-fill-plain { background: #93C5FD; }
.wheel-math .wheel-math-fill-multi { background: #F97316; }
.wheel-math .wheel-math-fill-0 { width: 0%; }
.wheel-math .wheel-math-fill-1 { width: 5%; }
.wheel-math .wheel-math-fill-2 { width: 10%; }
.wheel-math .wheel-math-fill-3 { width: 15%; }
.wheel-math .wheel-math-fill-4 { width: 20%; }
.wheel-math .wheel-math-fill-5 { width: 25%; }
.wheel-math .wheel-math-fill-6 { width: 30%; }
.wheel-math .wheel-math-fill-7 { width: 35%; }
.wheel-math .wheel-math-fill-8 { width: 40%; }
.wheel-math .wheel-math-fill-9 { width: 45%; }
.wheel-math .wheel-math-fill-10 { width: 50%; }
.wheel-math .wheel-math-fill-11 { width: 55%; }
.wheel-math .wheel-math-fill-12 { width: 60%; }
.wheel-math .wheel-math-fill-13 { width: 65%; }
.wheel-math .wheel-math-fill-14 { width: 70%; }
.wheel-math .wheel-math-fill-15 { width: 75%; }
.wheel-math .wheel-math-fill-16 { width: 80%; }
.wheel-math .wheel-math-fill-17 { width: 85%; }
.wheel-math .wheel-math-fill-18 { width: 90%; }
.wheel-math .wheel-math-fill-19 { width: 95%; }
.wheel-math .wheel-math-fill-20 { width: 100%; }
.wheel-math .wheel-math-controls { display: flex; flex-direction: column; gap: 14px; }
.wheel-math .wheel-math-group { display: flex; flex-direction: column; gap: 8px; }
.wheel-math .wheel-math-group-label { font-size: 15px; line-height: 1.5; color: #CBD5E1; }
.wheel-math .wheel-math-multis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.wheel-math .wheel-math-multi { min-height: 44px; padding: 8px 4px; background: #1E293B; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 12px; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; font-weight: 800; line-height: 1.2; color: #CBD5E1; cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.wheel-math .wheel-math-multi:hover { border-color: rgba(249, 115, 22, 0.55); color: #FFFFFF; }
.wheel-math .wheel-math-multi:focus-visible { outline: 2px solid #93C5FD; outline-offset: 3px; }
.wheel-math .wheel-math-multi.is-active { background: rgba(249, 115, 22, 0.14); border-color: #F97316; color: #FFFFFF; }
.wheel-math .wheel-math-freq, .wheel-math .wheel-math-current { font-weight: 800; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.wheel-math .wheel-math-range { display: block; width: 100%; height: 28px; margin: 0; accent-color: #F97316; cursor: pointer; }
.wheel-math .wheel-math-range:focus-visible { outline: 2px solid #93C5FD; outline-offset: 4px; }
.wheel-math .wheel-math-cases { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.wheel-math .wheel-math-case { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: #1E293B; border: 1px solid rgba(148, 163, 184, 0.08); border-radius: 12px; }
.wheel-math .wheel-math-case-multi { border-color: rgba(249, 115, 22, 0.35); }
.wheel-math .wheel-math-case-title { font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: #94A3B8; }
.wheel-math .wheel-math-case-multi .wheel-math-case-title { color: #F97316; }
.wheel-math .wheel-math-case-row { display: flex; flex-direction: column; gap: 2px; }
.wheel-math .wheel-math-case-value { font-size: 20px; font-weight: 800; line-height: 1.2; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.wheel-math .wheel-math-case-text { font-size: 14px; line-height: 1.5; color: #94A3B8; }
.wheel-math .wheel-math-swing { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wheel-math .wheel-math-note { margin: 0; font-size: 14px; line-height: 1.6; color: #94A3B8; }
.wheel-math .wheel-math-field { display: contents; }
@media (min-width: 768px) {
  .wheel-math .wheel-math-part { gap: 18px; padding: 24px; }
  .wheel-math .wheel-math-title, .wheel-math h2.wheel-math-title, .wheel-math h3.wheel-math-title, .wheel-math h4.wheel-math-title { font-size: 21px; }
  .wheel-math .wheel-math-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wheel-math .wheel-math-fact-value { font-size: 22px; }
  .wheel-math .wheel-math-bar-row { grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 80px; gap: 16px; align-items: center; }
  .wheel-math .wheel-math-bar { grid-column: 2; grid-row: 1; height: 10px; }
  .wheel-math .wheel-math-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1024px) {
  .wheel-math .wheel-math-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: end; }
}

/* === show-format-finder.css === */
.show-format-finder { display: flex; flex-direction: column; gap: 16px; margin: 0 0 32px; padding: 16px; background: #131A2E; border: 1px solid rgba(148, 163, 184, 0.10); border-radius: 14px; }
.show-format-finder .show-format-finder-tabs { display: none; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.show-format-finder.is-ready .show-format-finder-tabs { display: grid; }
.show-format-finder .show-format-finder-tab { grid-column: span 2; min-height: 44px; padding: 10px 8px; background: #1E293B; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 12px; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; color: #CBD5E1; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.show-format-finder .show-format-finder-tab:nth-child(4), .show-format-finder .show-format-finder-tab:nth-child(5) { grid-column: span 3; }
.show-format-finder .show-format-finder-tab:hover { border-color: rgba(249, 115, 22, 0.55); color: #FFFFFF; }
.show-format-finder .show-format-finder-tab:focus-visible { outline: 2px solid #93C5FD; outline-offset: 3px; }
.show-format-finder .show-format-finder-tab.is-active { background: rgba(249, 115, 22, 0.14); border-color: #F97316; color: #FFFFFF; }
.show-format-finder .show-format-finder-panels { display: flex; flex-direction: column; gap: 24px; }
.show-format-finder .show-format-finder-panel { display: flex; flex-direction: column; gap: 14px; }
.show-format-finder.is-ready .show-format-finder-panel { display: none; }
.show-format-finder.is-ready .show-format-finder-panel.is-active { display: flex; }
.show-format-finder .show-format-finder-panel-title { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: #FFFFFF; }
.show-format-finder h2.show-format-finder-panel-title, .show-format-finder h3.show-format-finder-panel-title, .show-format-finder h4.show-format-finder-panel-title { font-size: 19px; }
.show-format-finder .show-format-finder-panel-text { margin: 0; font-size: 15px; line-height: 1.6; color: #94A3B8; }
.show-format-finder .show-format-finder-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.show-format-finder .show-format-finder-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.show-format-finder .show-format-finder-fact { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: #1E293B; border: 1px solid rgba(148, 163, 184, 0.08); border-radius: 12px; }
.show-format-finder .show-format-finder-fact-label { font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: #F97316; }
.show-format-finder .show-format-finder-fact-value { font-size: 15px; line-height: 1.55; color: #CBD5E1; }
.show-format-finder .show-format-finder-fact-rtp .show-format-finder-fact-value { color: #FFFFFF; font-weight: 600; }
.show-format-finder .show-format-finder-demo { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 240px; padding: 20px 16px; background: radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.22) 0%, rgba(15, 23, 42, 0) 60%), #0F172A; border: 1px solid rgba(249, 115, 22, 0.25); border-radius: 14px; text-align: center; overflow: hidden; }
.show-format-finder .show-format-finder-demo-label { font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: #94A3B8; }
.show-format-finder .show-format-finder-stage { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; min-height: 76px; }
.show-format-finder .show-format-finder-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 64px; padding: 0 12px; border-radius: 14px; background: #273549; font-size: 28px; font-weight: 800; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.show-format-finder .show-format-finder-chip-one { background: #3B82F6; }
.show-format-finder .show-format-finder-chip-two { background: #F59E0B; color: #0F172A; }
.show-format-finder .show-format-finder-chip-five { background: #15803D; }
.show-format-finder .show-format-finder-chip-fifteen { background: #EF4444; }
.show-format-finder .show-format-finder-die { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: #FFFFFF; border-radius: 12px; box-shadow: inset 0 -4px 0 #CBD5E1; font-size: 26px; font-weight: 800; color: #0F172A; font-variant-numeric: tabular-nums; }
.show-format-finder .show-format-finder-die.is-rolling { animation: showFormatShake 0.6s ease-out both; }
.show-format-finder .show-format-finder-plus { font-size: 18px; font-weight: 700; color: #94A3B8; }
.show-format-finder .show-format-finder-total { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 56px; padding: 0 10px; border: 2px solid #F97316; border-radius: 12px; font-size: 24px; font-weight: 800; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.show-format-finder .show-format-finder-track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 300px; margin: 0; padding: 0; list-style: none; }
.show-format-finder .show-format-finder-cell { display: flex; align-items: center; justify-content: center; height: 34px; margin: 0; background: #1E293B; border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 8px; font-size: 12px; font-weight: 700; color: #64748B; font-variant-numeric: tabular-nums; transition: background-color 0.3s, color 0.3s; }
.show-format-finder .show-format-finder-cell.is-start { border-color: rgba(148, 163, 184, 0.45); color: #CBD5E1; }
.show-format-finder .show-format-finder-cell.is-passed { background: rgba(249, 115, 22, 0.12); color: #CBD5E1; }
.show-format-finder .show-format-finder-cell.is-token { background: #F97316; border-color: #F97316; color: #FFFFFF; }
.show-format-finder .show-format-finder-coin { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 999px; background: #273549; border: 4px solid #FBBF24; box-shadow: 0 0 24px rgba(251, 191, 36, 0.25); font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #FFFFFF; }
.show-format-finder .show-format-finder-coin-blue { background: #3B82F6; }
.show-format-finder .show-format-finder-coin-red { background: #EF4444; }
.show-format-finder .show-format-finder-coin.is-flipping { animation: showFormatFlip 0.9s ease-in-out both; }
.show-format-finder .show-format-finder-ball { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #E2E8F0 45%, #94A3B8 100%); font-size: 17px; font-weight: 800; color: #0F172A; font-variant-numeric: tabular-nums; }
.show-format-finder .show-format-finder-ball.is-empty { background: #1E293B; border: 1px dashed rgba(148, 163, 184, 0.35); color: #64748B; }
.show-format-finder .show-format-finder-ball.is-new { animation: showFormatPop 0.45s ease-out both; }
.show-format-finder .show-format-finder-draw { display: none; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; background: transparent; border: 1px solid rgba(249, 115, 22, 0.55); border-radius: 999px; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; color: #FFFFFF; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.show-format-finder.is-ready .show-format-finder-draw { display: inline-flex; }
.show-format-finder .show-format-finder-draw:hover { background-color: rgba(249, 115, 22, 0.12); border-color: #F97316; }
.show-format-finder .show-format-finder-draw:focus-visible { outline: 2px solid #93C5FD; outline-offset: 3px; }
.show-format-finder .show-format-finder-draw:disabled { opacity: 0.5; cursor: wait; }
.show-format-finder .show-format-finder-status { margin: 0; max-width: 360px; min-height: 44px; font-size: 14px; line-height: 1.55; color: #CBD5E1; }
.show-format-finder .show-format-finder-note { margin: 0; font-size: 14px; line-height: 1.6; color: #94A3B8; }
@keyframes showFormatShake { 0% { transform: rotate(0deg) translateY(0); } 25% { transform: rotate(-18deg) translateY(-10px); } 50% { transform: rotate(14deg) translateY(0); } 75% { transform: rotate(-8deg) translateY(-4px); } 100% { transform: rotate(0deg) translateY(0); } }
@keyframes showFormatFlip { 0% { transform: scaleX(1) translateY(0); } 25% { transform: scaleX(0.1) translateY(-18px); } 50% { transform: scaleX(1) translateY(-26px); } 75% { transform: scaleX(0.1) translateY(-12px); } 100% { transform: scaleX(1) translateY(0); } }
@keyframes showFormatPop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.show-format-finder .show-format-finder-action { display: contents; }
@media (prefers-reduced-motion: reduce) {
  .show-format-finder .show-format-finder-die.is-rolling, .show-format-finder .show-format-finder-coin.is-flipping, .show-format-finder .show-format-finder-ball.is-new { animation: none; }
}
@media (min-width: 768px) {
  .show-format-finder { gap: 20px; padding: 24px; }
  .show-format-finder .show-format-finder-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .show-format-finder .show-format-finder-tab, .show-format-finder .show-format-finder-tab:nth-child(4), .show-format-finder .show-format-finder-tab:nth-child(5) { grid-column: auto; font-size: 15px; }
  .show-format-finder .show-format-finder-panel-title, .show-format-finder h2.show-format-finder-panel-title, .show-format-finder h3.show-format-finder-panel-title, .show-format-finder h4.show-format-finder-panel-title { font-size: 21px; }
  .show-format-finder .show-format-finder-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .show-format-finder .show-format-finder-track { grid-template-columns: repeat(12, minmax(0, 1fr)); max-width: 520px; }
}
@media (min-width: 1024px) {
  .show-format-finder .show-format-finder-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: stretch; }
  .show-format-finder .show-format-finder-facts { grid-template-columns: minmax(0, 1fr); }
  .show-format-finder .show-format-finder-track { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 300px; }
}