/* Web interpretation of the application's thin controls and thicker dialogs. */
body {
  background-image:
    radial-gradient(ellipse 950px 560px at 14% 200px, #dce6ef8c, transparent 74%),
    radial-gradient(ellipse 780px 620px at 95% 1000px, #e2dce94d, transparent 76%),
    radial-gradient(ellipse 1100px 700px at 20% 2250px, #dce9e457, transparent 78%);
}

.hero-scene { position: relative; isolation: isolate; overflow: clip; border-radius: 44px; }
.hero-scene::before {
  content: "";
  position: absolute;
  inset: 12px 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 48% 45% at 47% 45%, #c2d4eab3, transparent 100%),
    radial-gradient(ellipse 40% 37% at 76% 64%, #e7e0efb3, transparent 100%);
  filter: blur(26px);
}

.game-card,.button,.filter-row button,.header-link,.icon-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.game-card { --light-size: 180px; }
.button,.filter-row button,.header-link,.icon-button { --light-size: 110px; }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: #f1f3f566;
    -webkit-backdrop-filter: blur(26px) saturate(1.25);
    backdrop-filter: blur(26px) saturate(1.25);
    box-shadow: inset 0 -1px 0 #ffffffa8;
  }

  .game-card,.choice-grid,.faq-list,.closing-section,.support-side,.contact-block {
    background:
      linear-gradient(145deg, #ffffffd9, #ffffff70 56%, #ffffffa6);
    border: 1px solid #ffffffb8;
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    box-shadow:
      inset 0 1px 0 #ffffff,
      inset 0 -1px 0 #c6d0db59,
      0 8px 24px #253b5508;
  }

  .game-card {
    background:
      radial-gradient(ellipse 95% 75% at 95% 100%, color-mix(in srgb, var(--game-color) 9%, transparent), transparent 83%),
      linear-gradient(145deg, #ffffffe8, #ffffff73 58%, #ffffffb3);
    transition: box-shadow .22s ease, background .22s ease, transform .16s ease;
  }
  .game-card:hover {
    background:
      radial-gradient(ellipse 100% 85% at 95% 100%, color-mix(in srgb, var(--game-color) 13%, transparent), transparent 83%),
      linear-gradient(145deg, #fffffff5, #ffffff8c 58%, #ffffffc7);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #ffffffb3, 0 12px 32px #253b5510;
  }
  .game-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(130deg, #fff, #ffffff17 42%, #ffffff00 65%, #fff9) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  .button,.filter-row button,.header-link,.icon-button {
    border: 1px solid #ffffffc7;
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);
    box-shadow: inset 0 1px 0 #fff9, inset 0 -1px 0 #c1cbd440, 0 4px 12px #253b5506;
    transition: background .18s, box-shadow .18s, transform .14s;
  }
  .button-primary {
    background: linear-gradient(155deg, #246df8, #0750df);
    border-color: #487ff4;
    box-shadow: inset 0 1px 0 #ffffff59, inset 0 -1px 0 #153bc059, 0 5px 15px #0a59f71f;
  }
  .button-primary:hover { background: linear-gradient(155deg, #1860ec, #0647cd); }
  .button-secondary,.filter-row button[aria-pressed="true"] {
    background: linear-gradient(145deg, #f4f8ffeb, #d7e5ff99);
    border-color: #ffffffd9;
    color: #084dd5;
  }
  .button-secondary:hover { background: linear-gradient(145deg, #fff, #d7e5ffc7); }
  .filter-row button,.header-link { background: linear-gradient(145deg, #ffffffb8, #ffffff4d); }
  .filter-row button:not([aria-pressed="true"]):hover { background: #ffffffb3; }
  .filter-row button[aria-pressed="true"] { box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #b7cae76b, 0 3px 10px #0a59f70a; }
  .icon-button { background: linear-gradient(145deg, #ffffffcc, #edf1f573); }
  .icon-button:hover { background: #ffffffdb; }

  .game-card::after,.button::after,.filter-row button::after,.header-link::after,.icon-button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(var(--light-size, 180px) circle at var(--light-x, 22%) var(--light-y, 0%), #ffffffed, #ffffff00 72%);
    opacity: .24;
    pointer-events: none;
    transition: opacity .2s;
  }
  [data-light="on"]::after,.filter-row button[data-light="on"]::after,
  .game-card:focus-visible::after,.button:focus-visible::after,.filter-row button:focus-visible::after,
  .header-link:focus-visible::after,.icon-button:focus-visible::after { opacity: .66; }
  .button-primary::after { opacity: .04; }
  .button-primary[data-light="on"]::after,.button-primary:focus-visible::after { opacity: .07; }
  .game-card:active,.button:active,.filter-row button:active,.icon-button:active { transform: scale(.985); }

  .hero-screen {
    position: relative;
    padding: 8px;
    border: 1px solid #ffffffd9;
    background: linear-gradient(135deg, #ffffffe6, #ffffff4d 48%, #ffffffb3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    backdrop-filter: blur(22px) saturate(1.3);
    box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px #c3cfdb99, 0 24px 52px #2a456326, 0 3px 8px #2a456310;
  }
  .hero-screen .app-capture { border-radius: 23px; }
  .experience-section { background: linear-gradient(180deg, #ffffff45, #ffffff99 50%, #ffffff45); }
  .screen-figure .app-capture { outline: 1px solid #ffffffd9; box-shadow: 0 14px 32px #253b5510; }
  .choice-icon { box-shadow: inset 0 1px 0 #fff9, inset 0 -1px 0 #c6d0db59; }

  dialog {
    border: 1px solid #ffffffd9;
    background: linear-gradient(145deg, #fffffff5, #f6f8fbeb);
    -webkit-backdrop-filter: blur(32px) saturate(1.25);
    backdrop-filter: blur(32px) saturate(1.25);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #c6d0db73, 0 30px 80px #18243133;
  }
  dialog::backdrop { background: #28384b4d; backdrop-filter: blur(12px) saturate(.9); }
  .dialog-heading { background: #f9fbfce8; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  #dialog-action {
    background: linear-gradient(145deg, #ffffffb3, color-mix(in srgb, var(--game-tint) 80%, #ffffff66));
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 color-mix(in srgb, var(--game-color) 16%, transparent);
  }
  #dialog-action:hover { filter: none; background: var(--game-tint); }
  #dialog-action::after { opacity: .24; }
  #dialog-action[data-light="on"]::after,#dialog-action:focus-visible::after { opacity: .66; }
}

@media (hover: none) {
  .game-card::after { opacity: .32; }
}

@media (prefers-reduced-motion: reduce) {
  .game-card:active,.button:active,.filter-row button:active,.icon-button:active { transform: none; }
}

@media (forced-colors: active) {
  body { background-image: none; }
  .hero-scene::before,.game-card::before,.game-card::after,.button::after,.filter-row button::after,.header-link::after,.icon-button::after { display: none; }
  .game-card,.button,.filter-row button,.header-link,.choice-grid,.faq-list,.closing-section,.support-side,.contact-block,dialog { border: 1px solid ButtonText; }
}