/* ---------- Bullseye ---------- */
/* The panel's own dark ground, cancelled on phones below. Everything the player reads sits on
   the range itself, so nothing outside it changes colour with the ground. Spacing between flex
   items is margins, not `gap`: Safari 14.0 has no flex gap. */
.game-root[data-game="bullseye"] {
  padding: clamp(8px, 1.4vw, 14px); text-align: left;
  border-color: rgba(20, 35, 15, .5);
  background: radial-gradient(120% 100% at 50% 0%, #41603a 0%, #304b2b 55%, #243a20 100%);
}
.bsy { width: 100%; }

/* The fitting box: bullseye.js sets the stage inside it to the biggest 600:960 box in pixels.
   Mode 1 pays the header's anchor and the panel's padding above and below it. */
.bsy-fit { display: grid; place-items: center; width: 100%; height: clamp(320px, calc(100vh - 100px), 1000px); }
@supports (height: 100svh) {
  .bsy-fit { height: clamp(320px, calc(100svh - 100px), 1000px); }
}
.bsy-stage {
  position: relative; max-width: 100%; max-height: 100%; overflow: hidden;
  border-radius: 18px; background: #5f9845; box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
.bsy-canvas {
  display: block; width: 100%; height: 100%; cursor: pointer; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
/* The round's clock and quiver over the range's top left corner, each a bar that drains, clear
   of the target. bullseye.js sets the fills' width; the transition smooths its ticks. */
.bsy-meters { position: absolute; top: 2.2%; left: 2.6%; z-index: 2; width: 40%; pointer-events: none; }
.bsy-meter { display: flex; align-items: center; }
.bsy-meter + .bsy-meter { margin-top: 6px; }
.bsy-meter .bsy-icon { flex: none; width: 20px; height: 20px; margin-right: 5px; color: #fff; stroke-width: 2.4; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
/* The scale at a bar's two ends: 0 at the left, the whole at the right. */
.bsy-end {
  flex: none; margin: 0 4px; color: #fff; font-size: 11px; font-weight: 900; line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7); font-variant-numeric: tabular-nums;
}
.bsy-end:last-child { min-width: 1.9em; margin-right: 0; }
.bsy-bar {
  position: relative; flex: 1 1 auto; min-width: 0; height: 19px; overflow: hidden;
  border: 2px solid #fff; border-radius: 10px; background: rgba(20, 30, 15, .5); box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.bsy-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: linear-gradient(#ffe27a, #eea915); transition: width .2s linear; }
.bsy-quiver .bsy-fill { background: linear-gradient(#ff8070, #d92b23); }
.bsy-num {
  position: relative; display: block; color: #fff; font-size: 12px; font-weight: 900; line-height: 15px;
  text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .65); font-variant-numeric: tabular-nums;
}
.bsy-time.is-low .bsy-fill { background: linear-gradient(#ff8070, #d92b23); }
.bsy-time.is-low .bsy-bar { animation: bsy-beat .5s ease-in-out infinite alternate; }
@keyframes bsy-beat { to { transform: scale(1.07); } }

/* --- the switches, over the range's top right corner --------------------------------------- */
.bsy-tools { position: absolute; top: 2.2%; right: 2.6%; z-index: 2; display: flex; align-items: center; }
.bsy-tools > * + * { margin-left: 6px; }
.bsy-pill {
  display: inline-flex; align-items: center; padding: 6px 11px; border: 1.5px solid rgba(255, 255, 255, .7);
  border-radius: 999px; background: rgba(20, 40, 15, .45); color: #fff;
  font: inherit; font-size: .8rem; font-weight: 800; white-space: nowrap; cursor: pointer;
}
.bsy-pill:hover { background: rgba(20, 40, 15, .62); }
.bsy-pill .bsy-icon { width: 16px; height: 16px; margin-right: 5px; flex: none; }
.bsy-round {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 50%; background: rgba(20, 40, 15, .45);
  color: #fff; cursor: pointer;
}
.bsy-round:hover { background: rgba(20, 40, 15, .62); }
.bsy-sicon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bsy-sicon .bsy-cone { fill: currentColor; }
.bsy-sicon .bsy-slash { display: none; }
.bsy-sound.off .bsy-waves { display: none; }
.bsy-sound.off .bsy-slash { display: inline; }
.bsy-audio { position: relative; display: flex; align-items: center; }
.bsy-more {
  display: grid; place-items: center; width: 24px; height: 34px; margin-left: 1px; padding: 0;
  border: 0; background: none; color: #fff; cursor: pointer; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
}
.bsy-dots { display: flex; }
.bsy-dots i { display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.bsy-dots i + i { margin-left: 3px; }
.bsy-menu {
  position: absolute; top: 40px; right: 0; z-index: 30; min-width: 180px; padding: 6px;
  border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
}
.bsy-menu[hidden] { display: none; }
.bsy-opt {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 10px;
  border: 0; border-radius: 8px; background: none; color: #2f3329; font: inherit; font-size: .9rem; cursor: pointer;
}
.bsy-opt:hover { background: #f1f4ec; }
.bsy-sw { position: relative; flex: none; width: 34px; height: 20px; margin-left: 12px; border-radius: 10px; background: #c9ccc4; }
.bsy-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s ease; }
.bsy-opt[aria-checked="true"] .bsy-sw { background: #4f9a3a; }
.bsy-opt[aria-checked="true"] .bsy-sw::after { left: 16px; }

/* --- the round's card ----------------------------------------------------------------------- */
.bsy-win {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3;
  display: grid; place-items: center; padding: 14px; overflow-y: auto; overscroll-behavior: contain;
}
.bsy-win:empty { pointer-events: none; }
.bsy-win:not(:empty) { background: rgba(20, 40, 15, .35); }
.bsy-panel { width: min(360px, 94%); }
.bsy-sheet {
  padding: 20px 20px 20px; border-radius: 18px; background: rgba(255, 252, 240, .97);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35); color: #3f3e35; text-align: center;
  animation: bsy-in .42s cubic-bezier(.16, .84, .25, 1.12) both;
}
@keyframes bsy-in { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
.bsy-kicker { margin: 0 0 2px; color: #7a7564; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.bsy-title { margin: 0; color: #b07d08; font-size: 2rem; font-weight: 900; line-height: 1.15; }
.bsy-line { margin: 8px 0 4px; font-size: 1.05rem; font-weight: 750; }
.bsy-total { margin: 0 0 14px; color: #7a7564; font-size: .85rem; font-weight: 650; }
.bsy-ask-q { margin: 0 0 8px; font-weight: 800; }
.bsy-asks { display: flex; justify-content: center; }
.bsy-asks > * + * { margin-left: 8px; }
.bsy-ask-btn {
  display: flex; flex-direction: column; align-items: center; min-width: 76px; padding: 9px 10px 8px;
  border: 1px solid rgba(90, 80, 40, .2); border-radius: 12px; background: #fff;
  color: #4a4636; font: inherit; font-size: .8rem; font-weight: 750; cursor: pointer;
}
.bsy-ask-btn:hover { background: #fffaf0; }
.bsy-ask-btn.on { border-color: #e0b84a; background: #fff3c7; }
.bsy-ask-btn .bsy-icon { width: 26px; height: 26px; margin-bottom: 4px; }
.bsy-note { min-height: 1.2em; margin: 8px 0 0; color: #5a574a; font-size: .85rem; line-height: 1.4; }
.bsy-kbd { padding: 1px 6px; border: 1px solid #c9c2a8; border-radius: 5px; background: #f6f2e4; font-size: .8rem; }
.bsy-goal { margin: 0 0 8px; color: #6b5a2c; font-size: .9rem; font-weight: 750; }
.bsy-goal.is-open { color: #2f8a3b; }
.bsy-goal:empty { display: none; }
.bsy-choices { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.bsy-choices .btn { display: inline-flex; align-items: center; margin: 4px; }
.bsy-choices .bsy-icon { width: 18px; height: 18px; margin-right: 6px; }

/* Mode 3, phone: the panel sheds its ground and runs past the container's 16px gutter to the
   screen's edges; the range is as wide as the screen and as tall as that makes it, the window
   permitting. */
@media (max-width: 640px) {
  .game-root[data-game="bullseye"]:not(.bsy-fs) { margin-left: -16px; margin-right: -16px; padding: 0; border: 0; border-radius: 0; background: none; }
  .bsy-fit { height: calc(100vh - 70px); min-height: 300px; }
  .bsy-stage { border-radius: 0; }
}
@media (max-width: 640px) {
  @supports (height: 100svh) {
    .bsy-fit { height: calc(100svh - 70px); }
  }
}

/* Mode 2: game-layout.css owns the panel; what is left here is what goes inside it. */
html.fills-window .game-root[data-game="bullseye"]:not(.bsy-fs) .bsy { height: 100%; }
html.fills-window .game-root[data-game="bullseye"]:not(.bsy-fs) .bsy-fit { height: 100%; min-height: 0; }

/* Mode 4: true full screen, or the fixed overlay where the browser has none. Written last and
   outside the window queries above, which a full screen on a tall monitor falls outside. */
body.bsy-locked { overflow: hidden; }
.game-root.bsy-fs {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200; margin: 0; padding: 8px;
  max-width: none; border: 0; border-radius: 0;
}
.game-root.bsy-fs .bsy { height: 100%; }
.game-root.bsy-fs .bsy-fit { height: 100%; min-height: 0; }