:root {
  --ink: #151517;
  --red: #cc2639;
  --wine: #8d2034;
  --gold: #daa85f;
  --line: #dcdde0;
  --night: #121013;
  --soft: #5e5f65;
  --screen-h: 100svh;
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { background: #e9ecef; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; margin: 0; -webkit-font-smoothing: antialiased; }
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { display: block; height: auto; max-width: 100%; }
h1, h2, h3, p, figure { margin-top: 0; }
[hidden], .is-hidden { display: none !important; }
:focus-visible { outline: 3px solid #f1b75f; outline-offset: 2px; }

.masthead { align-items: center; background: rgba(255,255,255,.98); border-bottom: 1px solid var(--line); display: flex; height: 50px; justify-content: space-between; left: 50%; max-width: 440px; padding: 0 14px; position: fixed; top: 0; transform: translateX(-50%); width: 100%; z-index: 30; }
.logo { color: var(--ink); font-size: 21px; font-weight: 950; letter-spacing: -.055em; text-decoration: none; }
.logo span { border-bottom: 2px solid var(--red); color: var(--red); }
.masthead-note { align-items: center; color: #696a70; display: flex; font-size: 8px; font-weight: 800; gap: 5px; letter-spacing: .06em; }
.masthead-note i { background: #13865e; border-radius: 50%; height: 6px; width: 6px; }

main { height: var(--screen-h); margin: 0 auto; max-width: 440px; padding-top: 50px; }
.screen { background: #fff; display: grid; grid-template-rows: minmax(180px,25.5svh) auto minmax(0,1fr); height: calc(var(--screen-h) - 50px); overflow: hidden; }

.intro { background: #171216; color: #fff; min-height: 0; overflow: hidden; position: relative; }
.intro-image { bottom: 0; left: 0; position: absolute; right: 0; top: 0; }
.intro-image img { height: 100%; object-fit: cover; object-position: 63% center; width: 100%; }
.intro-shade { background: linear-gradient(90deg,rgba(11,9,11,.98) 0%,rgba(11,9,11,.9) 51%,rgba(11,9,11,.13) 100%); inset: 0; position: absolute; }
.intro-copy { bottom: 0; left: 0; padding: 22px 18px 19px; position: absolute; right: 0; z-index: 2; }
.eyebrow { color: var(--gold); font-size: 7px; font-weight: 950; letter-spacing: .14em; margin-bottom: 5px; text-transform: uppercase; }
.intro h1 { font-size: clamp(29px,7.8vw,35px); letter-spacing: -.052em; line-height: 1.01; margin-bottom: 9px; max-width: 94%; }
.intro h1 span { color: #ff4056; }
.intro-points { align-items: center; color: #dad4d6; display: flex; flex-wrap: wrap; font-size: 9px; font-weight: 750; gap: 5px 15px; list-style: none; margin: 0; padding: 0; }
.intro-points li { position: relative; }
.intro-points li + li::before { color: var(--gold); content: "•"; left: -10px; position: absolute; }

.shortlist { background: #fff; border-bottom: 1px solid var(--line); padding: 13px 16px 14px; }
.shortlist-head { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 10px; }
.shortlist-head h2 { font-size: 18px; letter-spacing: -.035em; line-height: 1; margin-bottom: 0; }
.shortlist-head span { color: var(--soft); font-size: 9px; white-space: nowrap; }
.platforms { display: grid; gap: 8px; grid-template-columns: 1fr; }
.platform { border-radius: 6px; box-shadow: 0 5px 14px rgba(18,18,20,.07); display: grid; gap: 3px 12px; grid-template-areas: "type value" "name value" "description value" "perks perks"; grid-template-columns: minmax(0,1fr) 126px; min-width: 0; overflow: hidden; padding: 10px 12px 9px; }
.platform--sportuna { background: linear-gradient(145deg,#f7f8f9,#e9edf1); border: 1px solid #d2d6dc; }
.platform--slotuna { background: radial-gradient(circle at 100% 0,rgba(197,43,65,.2),transparent 40%),linear-gradient(145deg,#24161b,#120f11); border: 1px solid #522b36; color: #fff; }
.platform-type { color: var(--wine); display: block; font-size: 6px; font-weight: 950; grid-area: type; letter-spacing: .11em; line-height: 1; text-transform: uppercase; }
.platform--slotuna .platform-type { color: var(--gold); }
.platform-name { align-items: center; display: flex; gap: 7px; grid-area: name; justify-content: flex-start; margin: 4px 0 1px; }
.platform h3 { font-size: 21px; letter-spacing: -.04em; line-height: 1; margin: 0; }
.platform-name b { background: rgba(141,32,52,.1); border: 1px solid rgba(141,32,52,.22); border-radius: 99px; color: var(--wine); font-size: 6px; letter-spacing: .05em; padding: 4px 6px; white-space: nowrap; }
.platform--slotuna .platform-name b { background: rgba(218,168,95,.08); border-color: rgba(218,168,95,.28); color: var(--gold); }
.platform > p { color: var(--soft); font-size: 9px; grid-area: description; line-height: 1.15; margin-bottom: 2px; }
.platform--slotuna > p { color: #bbb3b6; }
.platform-value { align-items: flex-start; border-left: 1px solid rgba(110,110,115,.25); display: flex; flex-direction: column; grid-area: value; justify-content: center; padding-left: 12px; }
.platform-value strong { color: var(--wine); font-size: 6px; line-height: 1; white-space: nowrap; }
.platform-value .game-focus { font-size: 12px; line-height: 1.05; white-space: normal; }
.platform-value em { font-size: 23px; font-style: normal; letter-spacing: -.05em; }
.platform-value span { color: var(--soft); font-size: 7px; line-height: 1.15; margin-top: 3px; }
.platform--slotuna .platform-value strong { color: var(--gold); }
.platform--slotuna .platform-value span { color: #bcb4b7; }
.platform-perks { display: flex; gap: 5px; grid-area: perks; margin-top: 5px; }
.platform-perks span { background: rgba(255,255,255,.7); border-radius: 3px; color: #42434a; flex: 0 1 auto; font-size: 6px; font-weight: 850; line-height: 1; overflow: hidden; padding: 5px 9px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.platform--slotuna .platform-perks span { background: rgba(255,255,255,.08); color: #e2dcde; }

.quiz { background: radial-gradient(circle at 8% 0,rgba(191,40,61,.2),transparent 32%),var(--night); color: #fff; min-height: 0; overflow: hidden; padding: 15px 18px 12px; position: relative; }
.quiz-top { align-items: end; display: flex; justify-content: space-between; }
.quiz-kicker { color: var(--gold); display: block; font-size: 7px; font-weight: 950; letter-spacing: .13em; margin-bottom: 3px; text-transform: uppercase; }
.quiz-top h2 { font-size: 22px; letter-spacing: -.04em; line-height: 1; margin-bottom: 0; }
.quiz-top h2 em { color: #ff4056; font-style: normal; }
.progress-copy { align-items: flex-end; color: var(--gold); display: flex; flex-direction: column; font-size: 8px; font-weight: 900; line-height: 1.1; }
.progress-copy strong { font-size: 10px; }
.progress-track { background: #342c2f; border-radius: 10px; height: 4px; margin: 11px 0 13px; overflow: hidden; }
.progress-track span { background: linear-gradient(90deg,var(--red),var(--gold)); display: block; height: 100%; transition: width 150ms ease; width: 33%; }
.question.is-active { animation: enter 140ms ease both; }
@keyframes enter { from { opacity: .2; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.question h3 { font-size: clamp(19px,5.3vw,23px); letter-spacing: -.035em; line-height: 1.05; margin-bottom: 11px; }
.answers { display: grid; gap: 9px; }
.answer { background: #09090b; border: 1px solid #393337; border-radius: 5px; color: #fff; min-height: 62px; padding: 11px 13px; text-align: left; width: 100%; }
.answer.is-selected, .answer:active { background: #321820; border-color: var(--red); }
.answer strong { display: block; font-size: 12px; line-height: 1.2; }
.answer span { color: #aaa3a6; display: block; font-size: 9px; line-height: 1.25; margin-top: 3px; }
.quiz-foot { align-items: center; border-top: 1px solid #342d30; display: flex; justify-content: space-between; margin-top: 10px; min-height: 31px; padding-top: 7px; }
.quiz-foot button, .restart { background: none; border: 0; color: var(--gold); font-size: 9px; font-weight: 850; padding: 4px 0; }
.quiz-foot span { color: #827a7d; font-size: 8px; margin-left: auto; }

.matching { align-items: center; display: flex; flex-direction: column; inset: 52px 14px 10px; justify-content: center; position: absolute; text-align: center; }
.matching > span { animation: spin .7s linear infinite; border: 3px solid #4a3037; border-radius: 50%; border-right-color: var(--gold); height: 38px; margin-bottom: 10px; width: 38px; }
@keyframes spin { to { transform: rotate(360deg); } }
.matching strong { font-size: 21px; }
.matching p { color: #aaa2a5; font-size: 10px; margin: 3px 0 0; }

body.is-result .screen { display: block; }
body.is-result .intro, body.is-result .shortlist, body.is-result .quiz-top, body.is-result .progress-track { display: none; }
body.is-result .quiz { height: 100%; padding: 0; }
.result { height: 100%; overflow: hidden; position: relative; }
.result-image { display: block; height: 27%; min-height: 138px; overflow: hidden; }
.result-image img { height: 100%; object-fit: cover; width: 100%; }
.result-content { display: flex; flex-direction: column; height: 73%; padding: 15px 16px 10px; }
.result h2 { font-size: clamp(27px,7.5vw,33px); letter-spacing: -.05em; line-height: .98; margin-bottom: 9px; }
.result-content > p { color: #c9c2c4; font-size: 12px; line-height: 1.38; margin-bottom: 9px; }
.result-content > p strong { color: #fff; }
.result ul { list-style: none; margin: 0; padding: 0; }
.result li { border-top: 1px solid #362f31; color: #e6e1e2; font-size: 11px; line-height: 1.28; padding: 8px 0 8px 17px; position: relative; }
.result li::before { color: var(--gold); content: "✓"; left: 0; position: absolute; }
.why-not { background: #211b1e; border-left: 2px solid var(--gold); display: flex; flex-direction: column; margin-top: 9px; padding: 9px 10px; }
.why-not strong { font-size: 10px; }
.why-not span { color: #aaa2a5; font-size: 9px; line-height: 1.3; margin-top: 3px; }
.result-cta { align-items: center; background: var(--red); border-radius: 4px; color: #fff; display: flex; flex: 0 0 50px; font-size: 12px; font-weight: 950; justify-content: space-between; letter-spacing: .045em; margin-top: 11px; padding: 0 14px; text-decoration: none; }
.result-cta b { font-size: 16px; }
.restart { align-self: center; margin-top: 3px; }
.result small { color: #746d70; font-size: 6px; line-height: 1.25; text-align: center; }

@media (max-height:700px) {
  .screen { grid-template-rows: minmax(112px,20svh) auto minmax(0,1fr); }
  .intro-copy { padding-bottom: 10px; }
  .intro h1 { font-size: 24px; }
  .intro-points { font-size: 7px; gap: 3px 10px; }
  .intro-points li + li::before { left: -7px; }
  .shortlist { padding-bottom: 7px; padding-top: 7px; }
  .shortlist-head { margin-bottom: 5px; }
  .platforms { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .platform { display: block; padding: 6px 7px 5px; }
  .platform-type { font-size: 5px; }
  .platform-name { justify-content: space-between; margin: 4px 0 3px; }
  .platform h3 { font-size: 17px; }
  .platform-name b { font-size: 5px; padding: 3px 4px; }
  .platform > p { margin-bottom: 3px; }
  .platform-value { align-items: center; border-bottom: 1px solid rgba(110,110,115,.25); border-left: 0; border-top: 1px solid rgba(110,110,115,.25); display: grid; gap: 3px; grid-template-columns: auto minmax(0,1fr); padding: 3px 0; }
  .platform-value em { font-size: 12px; }
  .platform-value .game-focus { font-size: 8px; }
  .platform-value span { font-size: 6px; margin-top: 0; }
  .platform-perks { margin-top: 3px; }
  .platform-perks span { flex: 1 1 0; font-size: 5px; padding: 3px 2px; }
  .quiz { padding-top: 9px; }
  .quiz-top h2 { font-size: 17px; }
  .progress-track { margin: 6px 0 8px; }
  .question h3 { font-size: 18px; margin-bottom: 6px; }
  .answer { min-height: 49px; padding: 7px 9px; }
  .answer span { display: none; }
  .quiz-foot { margin-top: 6px; }
  .result-image { height: 23%; min-height: 105px; }
  .result-content { height: 77%; padding: 9px 13px 7px; }
  .result h2 { font-size: 24px; margin-bottom: 6px; }
  .result-content > p { font-size: 10px; margin-bottom: 6px; }
  .result li { font-size: 9px; padding: 5px 0 5px 15px; }
  .why-not { margin-top: 6px; padding: 6px 8px; }
  .why-not strong { font-size: 8px; }
  .why-not span { display: none; }
  .result-cta { flex-basis: 43px; font-size: 10px; margin-top: 7px; }
}

@media (max-width:340px) {
  .shortlist-head span { display: none; }
  .shortlist-head h2 { font-size: 16px; white-space: nowrap; }
}

@media (min-height:701px) and (max-height:880px) {
  .shortlist { padding-bottom: 10px; padding-top: 10px; }
  .shortlist-head { margin-bottom: 7px; }
  .platform { padding-bottom: 7px; padding-top: 8px; }
  .platform > p { font-size: 8px; }
  .platform-perks { margin-top: 3px; }
  .quiz { padding-top: 12px; }
  .progress-track { margin-bottom: 9px; margin-top: 8px; }
  .question h3 { margin-bottom: 8px; }
  .quiz-foot { margin-top: 5px; min-height: 25px; padding-top: 4px; }
}

@media (max-height:700px) {
  .quiz-foot { margin-top: 3px; min-height: 22px; padding-top: 2px; }
  .quiz-foot span { font-size: 7px; }
}

@media (min-width:700px) {
  body { background: radial-gradient(circle at 50% 30%,#fff,#e6e9ec 55%,#dfe3e7); }
  .masthead { box-shadow: 0 4px 15px rgba(0,0,0,.08); }
  main { box-shadow: 0 12px 55px rgba(0,0,0,.13); }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}