.modal { width: min(92vw, 600px); max-height: 90vh; border: 0; border-radius: 22px; background: transparent; color: var(--text); overflow-y: auto; }
.modal::backdrop { background: rgba(2,6,16,.84); backdrop-filter: blur(6px); }
.modal-shell { position: relative; padding: 28px; overflow: hidden; border: 1px solid var(--color-border-gold); border-radius: 22px; background: var(--theme-modal-bg); box-shadow: var(--shadow-soft), var(--shadow-gold); }
.modal-shell::before { position: absolute; top: 0; right: 20%; left: 20%; height: 1px; background: var(--theme-accent-line-gradient); content: ""; opacity: .86; }
.modal-close { position: absolute; z-index: 8; top: 16px; right: 16px; width: 42px; height: 42px; border: 1px solid var(--color-border-gold); border-radius: 10px; background: rgba(23,34,54,.76); color: var(--text-muted); font-size: 24px; transition: color var(--transition), border-color var(--transition), transform var(--transition); }
.modal-close:hover { border-color: var(--color-gold-primary); color: var(--color-gold-light); transform: rotate(3deg); }
.loading-modal { width: min(90vw, 430px); overflow: visible; text-align: center; }
.loading-shell { padding: 40px 30px; }
.loading-visual { position: relative; display: grid; place-items: center; width: 132px; height: 132px; margin: 0 auto 20px; overflow: hidden; border: 1px solid var(--color-border-gold); border-radius: 28px; background: radial-gradient(circle, var(--theme-accent-soft), var(--theme-primary-soft) 48%, transparent 68%); }
.loader-orbit { display: grid; place-items: center; width: 88px; height: 88px; border: 2px solid var(--theme-primary-soft); border-top-color: var(--theme-accent); border-right-color: var(--color-gold-primary); border-bottom-color: var(--color-gold-dark); border-radius: 50%; animation: rotate 1.1s linear infinite; }
.loader-orbit span { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid var(--color-border-blue); border-radius: 50%; background: var(--theme-modal-surface); color: var(--theme-accent); font-weight: 900; animation: rotate 1.1s linear infinite reverse; box-shadow: inset 0 0 20px var(--theme-accent-soft), var(--shadow-blue); }
.loading-scan { position: absolute; right: 12px; left: 12px; height: 1px; background: linear-gradient(90deg, transparent, var(--color-blue-light), transparent); box-shadow: 0 0 10px rgba(39,140,255,.30); animation: loading-scan 2s ease-in-out infinite; }
.loading-node { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--color-blue-light); box-shadow: 0 0 10px rgba(39,140,255,.42); animation: node-pulse 1.8s ease-in-out infinite; }
.loading-node-one { top: 20px; left: 24px; }
.loading-node-two { top: 30px; right: 21px; background: var(--gold-light); animation-delay: .35s; }
.loading-node-three { right: 29px; bottom: 19px; animation-delay: .7s; }
.loading-shell h2 { font-size: 22px; }
.loading-shell p { margin-top: 8px; color: var(--text-muted); font-size: 13px; }
.loading-progress-row { display: grid; grid-template-columns: 1fr 38px; align-items: center; gap: 10px; margin: 20px 0 9px; }
.loading-progress { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.loading-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--theme-accent-line-gradient); transition: width 120ms linear; }
.loading-progress-row > strong { color: var(--color-gold-light); font-size: 11px; text-align: right; }
.loading-shell small { color: var(--color-text-muted); font-size: 10px; }
.game-modal { width: min(92vw, 480px); }
.game-modal h2 { margin: 5px 0 18px; font-size: 23px; }
.selected-game { display: flex; align-items: center; gap: 13px; margin-bottom: 19px; padding: 12px; border: 1px solid var(--color-border); border-radius: 13px; background: rgba(18,32,59,.48); }
.selected-game strong, .selected-game small { display: block; }
.selected-game small { margin-top: 2px; color: var(--text-muted); }
.mini-thumbnail { display: grid; flex: 0 0 48px; place-items: center; height: 48px; border: 1px solid var(--color-border-gold); border-radius: 12px; background: linear-gradient(145deg, var(--color-blue-soft), var(--color-bg-secondary)); color: var(--color-blue-light); font-weight: 900; }
.mini-thumbnail img { grid-area: 1 / 1; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.mini-thumbnail span { grid-area: 1 / 1; }
.result-modal { width: min(94vw, 720px); }
.result-analysis-message { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 50px 14px 15px; overflow: hidden; border: 1px solid var(--color-border-gold); border-radius: 12px; background: var(--color-gold-soft); }
.result-analysis-message::after { position: absolute; top: 0; bottom: 0; width: 70px; background: linear-gradient(90deg, transparent, var(--theme-modal-shimmer), transparent); transform: translateX(-160%); content: ""; }
.result-analysis-message__icon { display: grid; flex: 0 0 32px; place-items: center; min-height: 32px; border: 1px solid var(--color-border-gold); border-radius: 9px; background: rgba(11,18,32,.72); color: inherit; font-size: 18px; line-height: 1; }
.result-analysis-message p { color: var(--color-text-secondary); font-size: 12px; line-height: 1.65; }
.result-analysis-message h2 { max-width: 100%; font-size: clamp(17px, 2.4vw, 24px); line-height: 1.3; overflow-wrap: anywhere; }
.result-analysis-message strong { color: var(--color-gold-light); font-weight: 800; overflow-wrap: anywhere; }
.result-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.result-summary > div { min-width: 0; padding: 12px 14px; border: 1px solid var(--color-border-gold); border-radius: 10px; background: var(--theme-modal-surface); }
.result-summary span, .result-summary strong { display: block; }
.result-summary span { color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.result-summary strong { margin-top: 3px; color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.result-summary-item-wide { grid-column: 1 / -1; }
.result-summary-item-wide strong { color: var(--color-gold-light); }
.pattern-steps { position: relative; display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; padding-left: 18px; }
.pattern-steps::before { position: absolute; z-index: 0; top: 18px; bottom: 18px; left: 8px; width: 1px; background: linear-gradient(var(--color-gold-dark), var(--color-gold-light), var(--color-gold-dark)); content: ""; transform: scaleY(0); transform-origin: top; }
.pattern-steps li { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--color-border-gold); border-radius: 10px; background: var(--theme-modal-surface-strong); }
.pattern-steps li::before { position: absolute; top: 25px; left: -11px; width: 10px; height: 1px; background: var(--color-gold-primary); content: ""; }
.pattern-steps li > span { position: relative; display: grid; z-index: 2; flex: 0 0 29px; place-items: center; height: 29px; border: 1px solid var(--color-gold-primary); border-radius: 8px; background: var(--color-bg-secondary); color: var(--color-gold-light); font-size: 11px; font-weight: 800; box-shadow: 0 0 0 4px rgba(11,18,32,.92); }
.pattern-steps li > span::after { position: absolute; right: -5px; bottom: -5px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-blue-light); box-shadow: 0 0 8px rgba(39,140,255,.45); content: ""; }
.pattern-steps small, .pattern-steps strong { display: block; }
.pattern-steps small { color: var(--text-muted); font-size: 9px; }
.pattern-steps strong { font-size: 11px; }
.pattern-steps em { display: block; margin-top: 3px; color: var(--color-text-muted); font-size: 8px; font-style: normal; }
.result-disclaimer { margin-top: 14px; padding: 10px 12px; border-left: 2px solid var(--gold); background: var(--theme-disclaimer-bg); color: var(--text-muted); font-size: 10px; }
.result-actions { display: flex; align-items: flex-start; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.result-actions > .btn, .result-unavailable-action { flex: 0 1 180px; }
.result-unavailable-action .btn { width: 100%; }
.result-unavailable-action small { display: block; margin-top: 4px; color: var(--color-text-muted); font-size: 9px; text-align: center; }
.loading-modal:not([open]) .loading-visual *, .loading-modal:not([open]) .loading-scan { animation-play-state: paused; }
.result-modal { width: min(96vw, 940px); }
.result-selected-section, .result-recommended-section, .result-target-section, .result-pattern-section { margin-top: 17px; }
.result-selected-section > h3, .result-recommended-section > h3, .result-target-section > h3, .result-pattern-section > h3 { margin-bottom: 10px; font-size: 15px; }
.result-selected-game { display: grid; grid-template-columns: 82px minmax(0,1fr); align-items: center; gap: 14px; max-width: 560px; padding: 13px; border: 1px solid var(--color-border-gold); border-radius: 13px; background: var(--theme-modal-surface); }
.result-selected-thumbnail { position: relative; display: grid; width: 82px; height: 82px; place-items: center; overflow: hidden; border: 1px solid var(--color-border-blue); border-radius: 11px; background: var(--color-blue-soft); color: var(--color-blue-light); font-weight: 900; }
.result-selected-thumbnail img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.result-selected-copy { min-width: 0; }
.result-selected-copy h4 { color: var(--color-gold-light); font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.result-selected-copy > p { margin-top: 3px; color: var(--color-text-secondary); font-size: 10px; }
.result-selected-copy dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 10px; }
.result-selected-copy dl > div { min-width: 0; padding: 7px 8px; border-radius: 8px; background: rgba(7,11,20,.58); }
.result-selected-copy dt { color: var(--color-text-muted); font-size: 8px; line-height: 1.3; }
.result-selected-copy dd { margin-top: 3px; color: var(--text); font-size: 11px; font-weight: 800; }
#engine-result-recommended-games { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; width: min(100%,760px); margin: 0 auto; padding: 0; list-style: none; }
.result-recommended-game { min-width: 0; max-width: 100%; overflow: hidden; border: 1px solid var(--color-border-gold); border-radius: 11px; background: var(--theme-modal-surface); }
.result-recommended-game__thumbnail { position: relative; display: flex; align-items: center; justify-content: center; height: 104px; padding: 6px; overflow: hidden; background: var(--color-blue-soft); color: var(--color-blue-light); font-weight: 900; }
.result-recommended-game__thumbnail img { position: relative; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center; }
.result-recommended-game__copy { padding: 9px; }
.result-recommended-game__copy h4 { color: var(--color-gold-light); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.result-recommended-game__copy > p { margin-top: 3px; color: var(--color-text-secondary); font-size: 9px; }
.result-recommended-game__metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; margin-top: 7px; }
.result-recommended-game__metrics div { min-width: 0; padding: 5px; border-radius: 7px; background: rgba(7,11,20,.58); }
.result-recommended-game__metrics span, .result-recommended-game__metrics strong { display: block; }
.result-recommended-game__metrics span { color: var(--color-text-muted); font-size: 7px; }
.result-recommended-game__metrics strong { margin-top: 2px; color: var(--text); font-size: 10px; }
.result-recommended-game__play { display: inline-flex; width: 100%; min-height: 34px; margin-top: 8px; align-items: center; justify-content: center; border: 1px solid var(--color-border-gold); border-radius: 8px; background: rgba(23,34,54,.78); color: var(--color-gold-light); font-size: 9px; text-decoration: none; }
.result-recommended-game__play:hover { border-color: var(--color-gold-primary); box-shadow: var(--shadow-gold); }
.result-target-grid { display: grid; grid-template-columns: 1fr; width: min(100%,260px); margin: 0 auto; }
.result-target-grid > div { display: flex; min-width: 0; min-height: 72px; flex-direction: column; align-items: center; justify-content: center; padding: 10px 12px; border: 1px solid var(--color-border-gold); border-radius: 10px; background: var(--theme-modal-surface-strong); box-shadow: inset 0 1px 0 var(--theme-primary-soft), 0 8px 22px rgba(0,0,0,.12); text-align: center; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.result-target-grid > div:hover { border-color: var(--color-gold-light); box-shadow: inset 0 1px 0 var(--theme-primary-soft), 0 0 18px var(--theme-glow-primary); transform: translateY(-1px); }
.result-target-grid .bet-range-card { display: flex; width: 100%; box-sizing: border-box; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.bet-range-card .bet-range-label, .bet-range-card .bet-range-value { position: static; display: block; width: 100%; margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 0; text-align: center; transform: none; }
.bet-range-card .bet-range-label::before, .bet-range-card .bet-range-label::after, .bet-range-card .bet-range-value::before, .bet-range-card .bet-range-value::after { content: none; }
.bet-range-card .bet-range-label { margin-top: 0; margin-bottom: 0; color: #d7c79f; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.bet-range-card .bet-range-value { margin-top: 4px; margin-bottom: 0; color: var(--color-gold-bright); font-size: 14px; font-weight: 900; line-height: 1.25; letter-spacing: normal; overflow-wrap: anywhere; }
.result-target-grid small { display: block; margin-top: 5px; color: var(--color-text-muted); font-size: 8px; line-height: 1.4; }
#engine-result-pattern-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
#engine-result-pattern-steps li { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: start; gap: 11px; padding: 11px 12px; border: 1px solid var(--color-border-gold); border-radius: 11px; background: var(--theme-modal-surface-strong); }
#engine-result-pattern-steps li > span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--color-gold-primary); border-radius: 9px; background: var(--color-bg-secondary); color: var(--color-gold-light); font-size: 12px; font-weight: 900; }
#engine-result-pattern-steps h4 { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.pattern-step-emoji { flex: 0 0 auto; font-size: 14px; }
#engine-result-pattern-steps small { display: block; margin-top: 2px; color: var(--color-gold-light); font-size: 9px; }
#engine-result-pattern-steps p { margin-top: 4px; color: var(--color-text-secondary); font-size: 10px; line-height: 1.5; }
#engine-result-pattern-steps .pattern-step-condition { color: var(--color-text-muted); font-size: 9px; }
.result-no-match { margin-top: 16px; padding: 24px 18px; border: 1px solid var(--color-border-blue); border-radius: 14px; background: var(--color-blue-soft); text-align: center; }
.result-no-match strong { display: block; margin-bottom: 7px; color: var(--color-blue-light); font-size: 17px; }
.result-no-match p { color: var(--color-text-secondary); line-height: 1.65; }
.result-reference { margin-top: 13px; color: var(--color-text-muted); font-size: 9px; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .result-modal { width: min(96vw,940px); }
  .result-shell { padding: 22px 17px; }
  .result-target-grid { width: min(100%,240px); }
  .result-selected-game { grid-template-columns: 68px minmax(0,1fr); }
  .result-selected-thumbnail { width: 68px; height: 68px; }
  #engine-result-recommended-games { grid-template-columns: 1fr; }
  .result-actions .btn { min-height: 42px; }
}
@media (min-width: 521px) and (max-width: 800px) {
  #engine-result-recommended-games { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 520px; }
}