body[data-theme="trickshot"] { --shot-glow: #ce7050; --shot-secondary: #e59a73; --range-cyan: var(--shot-glow); --range-line: rgb(180 77 54 / 40%); }
html[data-color-mode="dark"] body[data-theme="trickshot"] { --accent: #df8865; --accent-soft: #422c25; }
body[data-theme="ontarget"] { --shot-glow: #c6adff; --shot-secondary: #f2b1d0; }
.shot-backdrop { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
body:has(.shot-backdrop) > .page-shell,
body:has(.shot-backdrop) > .site-footer { position: relative; z-index: 1; }
html:not([data-color-mode="dark"]) .shot-backdrop { display: none; }
body[data-game-session]:has(.shot-backdrop) .game-workspace { min-height: calc(100svh - 108px); }
body[data-game-session]:has(.shot-backdrop) .game-primary { width: min(620px, calc(100svh - 150px), 100%); }
body[data-game-session]:has(.shot-backdrop) .game-play-panel { position: relative; }
body[data-game-session]:has(.shot-backdrop) .app-heading .app-eyebrow { font-size: 10px; letter-spacing: .16em; }
body[data-game-session]:has(.shot-backdrop) .app-heading img { width: 44px; height: 44px; }
body[data-game-session]:has(.shot-backdrop) #game-session-intro .game-session-start {
  min-width: min(230px, 100%);
  min-height: 50px;
  border: 2px solid #f4e4ff;
  border-radius: 12px;
  background: linear-gradient(135deg, #dacbff, #f2b1d0);
  color: #291d40;
  box-shadow: 0 0 24px rgb(198 173 255 / 25%), inset 0 1px rgb(255 255 255 / 55%);
}
body[data-game-session][data-theme="trickshot"] #game-session-intro .game-session-start {
  border-color: #efb28e;
  background: linear-gradient(135deg, #e9a17e, #cf7554);
  color: #291b18;
  box-shadow: 0 0 24px rgb(180 77 54 / 25%), inset 0 1px rgb(255 255 255 / 40%);
}
body[data-game-session]:has(.shot-backdrop) #game-session-intro .game-session-start:hover:not(:disabled) { filter: brightness(1.1); }
body[data-game-session]:has(.shot-backdrop) #game-session-intro .game-session-start:disabled { box-shadow: none; }
body[data-game-session]:has(.shot-backdrop) #game-session-intro .game-session-start:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
body[data-game-session]:has(.shot-backdrop) .game-play-panel[data-entering="true"] { animation: shot-play-bounce 760ms cubic-bezier(.2, .8, .25, 1); }
body[data-game-session][data-theme="trickshot"] .game-play-panel {
  border-color: rgb(206 112 80 / 55%);
  background: radial-gradient(ellipse at 50% 90%, rgb(188 94 44 / 10%), transparent 65%), radial-gradient(circle at 50% 40%, #35251b, #21150f 70%);
  box-shadow: 0 0 50px rgb(180 77 54 / 12%), inset 0 0 55px rgb(180 77 54 / 8%);
}
body[data-game-session][data-theme="trickshot"] #action { border-color: #d78663; background: linear-gradient(145deg, #583329, #322525); color: #ffe9db; box-shadow: 0 0 24px rgb(180 77 54 / 18%); }
body[data-game-session][data-theme="trickshot"] .mode-tab[aria-pressed="true"] { background: linear-gradient(145deg, #e3946e, #ca7051); color: #291b18; box-shadow: 0 0 12px rgb(180 77 54 / 14%); }
body[data-game-session][data-theme="trickshot"] .orb { fill: #ffe6d4; }
body[data-game-session][data-theme="trickshot"] .target-halo { fill: rgb(180 77 54 / 8%); }
body[data-game-session][data-theme="trickshot"] .shot-results li.is-best { background: linear-gradient(145deg, #53342a, #2f2424); }
html[data-color-mode="dark"] body[data-game-session][data-theme="trickshot"] .shot-results li { border-color: #80503a; background: linear-gradient(145deg, #3c291e, #271a14); color: #c6aa98; }
html[data-color-mode="dark"] body[data-game-session][data-theme="trickshot"] .shot-results strong { color: #f4e5db; }
html[data-color-mode="dark"] body[data-game-session][data-theme="trickshot"] .shot-results li.is-best { border-color: var(--accent); background: linear-gradient(145deg, #53342a, #2f2424); }
html[data-color-mode="dark"] body[data-game-session][data-theme="trickshot"] .game-recommendations { background: var(--paper); }
body[data-theme="trickshot"] .result-banner { background: rgb(34 19 12 / 68%); }
body[data-theme="trickshot"] .result-banner-message { color: #fff0e3; text-shadow: 0 6px 0 #87472c, 0 12px 38px rgb(0 0 0 / 55%); }
body[data-theme="trickshot"] .result-banner-badge { background: #2b1d16; }
body[data-theme="trickshot"] .result-share-dialog::backdrop { background: rgb(28 18 14 / 78%); }
body[data-theme="trickshot"] .result-share-dialog-preview { background: #1c120e; }
body[data-game-session][data-theme="ontarget"] .orbit-stage {
  border-color: rgb(198 173 255 / 55%);
  background: radial-gradient(ellipse at 50% 85%, rgb(242 177 208 / 10%), transparent 65%), radial-gradient(circle at 50% 40%, #262e50, #0e1830 70%);
  box-shadow: 0 0 50px rgb(198 173 255 / 12%), inset 0 0 55px rgb(198 173 255 / 8%);
}
@media (min-width: 601px) {
  body[data-game-session][data-theme="ontarget"] .game-play-panel::before,
  body[data-game-session][data-theme="ontarget"] .game-play-panel::after {
    display: block;
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    content: "";
    pointer-events: none;
  }
  body[data-game-session][data-theme="ontarget"] .game-play-panel::before { border: 1px dashed rgb(198 173 255 / 32%); }
  body[data-game-session][data-theme="ontarget"] .game-play-panel::after {
    inset: -12px;
    background: conic-gradient(transparent 0deg 30deg, var(--shot-glow) 31deg 55deg, transparent 56deg 210deg, var(--shot-secondary) 211deg 255deg, transparent 256deg);
    mask-image: radial-gradient(circle, transparent 69.5%, #000 69.7%, #000 70.2%, transparent 70.5%);
    animation: shot-orbit 36s linear infinite reverse;
  }
  body[data-game-session][data-theme="trickshot"] .game-play-panel::after { border-color: rgb(206 112 80 / 30%); }
}
@media (max-width: 600px) {
  html:has(.shot-backdrop) { overflow-x: clip; }
  body:has(.shot-backdrop) { overflow-x: clip; }
  body[data-game-session]:has(.shot-backdrop) .game-primary { width: 100%; }
  body[data-game-session]:has(.shot-backdrop) .game-play-panel {
    width: min(620px, max(380px, calc(100svh - 132px)));
    min-height: 0;
    height: auto;
    aspect-ratio: 1;
    margin-left: 50%;
    translate: -50% 0;
    border: 1px solid var(--shot-glow);
    border-radius: 50%;
    padding: 24px;
    justify-content: center;
  }
  body[data-game-session][data-theme="ontarget"] .game-play-panel { background: radial-gradient(circle at 50% 40%, #262e50, #0e1830 70%); }
  body[data-game-session]:has(.shot-backdrop) #game-session-intro,
  body[data-game-session]:has(.shot-backdrop) #game-session-content,
  body[data-game-session]:has(.shot-backdrop) .game-play-panel > [data-session-status] {
    width: min(100%, calc(100vw - 48px));
    margin-inline: auto;
  }
  body[data-game-session]:has(.shot-backdrop) #game-session-intro,
  body[data-game-session]:has(.shot-backdrop) #game-session-content { aspect-ratio: auto; }
  body[data-game-session][data-theme="ontarget"] #game-session-intro { display: flex; gap: 18px; }
  body[data-game-session][data-theme="ontarget"] #game-session-intro > .app-heading { width: 100%; }
  body[data-game-session][data-theme="ontarget"] .difficulty-tabs {
    display: grid;
    width: min(216px, 100%);
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    padding: 2px;
  }
  body[data-game-session][data-theme="ontarget"] #game-session-intro .difficulty-tab,
  body[data-game-session][data-theme="ontarget"] #game-session-content .difficulty-tab {
    min-width: 0;
    min-height: 32px;
    padding: 6px 4px;
    font-size: 11px;
    white-space: nowrap;
  }
  body[data-game-session][data-theme="ontarget"] #game-session-intro .game-controls { width: min(216px, 100%); }
  body[data-game-session][data-theme="ontarget"] .game-play-panel:not([data-phase="intro"]) { padding: 12px; }
  body[data-game-session][data-theme="ontarget"] #game-session-content {
    display: grid;
    width: min(400px, calc(100vw - 32px));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 38px auto 44px 20px;
    align-items: center;
    gap: 6px 8px;
    overflow: visible;
  }
  body[data-game-session][data-theme="ontarget"] #game-session-content > .game-controls {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    margin: 0;
    gap: 0;
  }
  body[data-game-session][data-theme="ontarget"] #game-session-content > .orbit-stage {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  body[data-game-session][data-theme="ontarget"] #game-session-content .orbit { width: 100%; max-width: none; }
  body[data-game-session][data-theme="ontarget"] #game-session-content > .game-menu-button {
    display: none;
  }
  body[data-game-session][data-theme="ontarget"] #game-session-content > .game-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0;
    gap: 6px;
  }
  body[data-game-session][data-theme="ontarget"] #game-session-content #action {
    min-width: min(180px, 100%);
    min-height: 44px;
    padding: 8px 16px;
    font-size: 14px;
  }
  body[data-game-session][data-theme="ontarget"] #game-session-content > .game-over-support {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: center;
    max-width: 100%;
    margin: 0;
    font-size: 10px;
    line-height: 1.4;
  }
  body[data-game-session]:has(.shot-backdrop) .game-play-panel[data-phase="result"] { overflow-y: auto; }
  body[data-game-session][data-theme="ontarget"] .game-play-panel[data-phase="result"] { overflow: visible; }
}
@keyframes shot-orbit { to { transform: rotate(360deg); } }
@keyframes shot-play-bounce {
  0% { transform: translateY(0) scale(.96); }
  42% { transform: translateY(-12px) scale(1.015); }
  70% { transform: translateY(3px) scale(.99); }
  100% { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .shot-backdrop { display: none; }
  body[data-game-session]:has(.shot-backdrop) .game-play-panel[data-entering="true"],
  body[data-game-session]:has(.shot-backdrop) .game-play-panel::before,
  body[data-game-session]:has(.shot-backdrop) .game-play-panel::after { animation: none; }
}
