.wilbur-page { background: var(--cream); }
.wilbur-page [hidden] { display: none !important; }
.wilbur-game-hero { background: var(--forest-dark); color: white; }
.wilbur-game-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; }
.wilbur-back-link { display: inline-flex; align-items: center; min-height: 44px; color: #f4cf81; font-size: .85rem; }
.wilbur-game-hero h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); margin: 2px 0 10px; }
.wilbur-game-lead { margin: 0; color: #e5eee8; font-size: 1rem; }
.wilbur-hero-mascot { width: 130px; height: auto; filter: drop-shadow(0 8px 12px #0004); }
.wilbur-game-section { padding-block: 24px 48px; }
.wilbur-game-shell { overflow: hidden; border: 1px solid #bdcbbb; border-radius: 16px; background: var(--paper); box-shadow: 0 18px 50px #20312812; scroll-margin-top: 12px; }
.wilbur-mode-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 20px 8px; }
.wilbur-mode-picker label { font-size: .85rem; font-weight: 800; }
.wilbur-mode-picker select { min-height: 44px; min-width: 0; flex: 1; max-width: 420px; padding: 8px 10px; border: 1px solid #9dae9b; border-radius: 8px; color: var(--forest-dark); background: white; font: inherit; font-size: .85rem; }
.wilbur-mode-note { margin: 0; padding: 4px 20px 16px; color: var(--muted); font-size: .84rem; }
.wilbur-scoreboard { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 12px 20px; background: #edf3e9; border-block: 1px solid #d2dbcf; }
.wilbur-score-item span,.wilbur-score-item strong { display: block; }
.wilbur-score-item span { color: var(--muted); font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.wilbur-score-item strong { font-size: .95rem; color: var(--forest-dark); font-variant-numeric: tabular-nums; }
.wilbur-trail { display: flex; list-style: none; justify-content: center; gap: 24px; margin: 0; padding: 10px 16px; }
.wilbur-trail li { position: relative; color: #a9b4a4; min-width: 32px; text-align: center; font-size: .65rem; }
.wilbur-trail svg { display: block; width: 24px; height: 24px; margin: auto; fill: currentColor; }
.wilbur-trail li.is-current { color: var(--forest); }
.wilbur-trail li.is-current::after { content: ''; display: block; height: 3px; border-radius: 3px; background: currentColor; }
.wilbur-trail li.is-found { color: var(--forest); }
.wilbur-trail li.is-hinted { color: #946320; }
.wilbur-trail li.is-skipped { color: #7c6054; }
.wilbur-scene-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 16px; border-block: 1px solid #dfe4dc; }
.wilbur-pan-tip { margin-left: auto; font-size: .72rem; color: var(--muted); }
.wilbur-game-button { min-height: 44px; padding: 9px 14px; border: 2px solid var(--forest); border-radius: 8px; background: var(--forest); color: white; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }
.wilbur-game-button.secondary { background: transparent; color: var(--forest); }
.wilbur-game-button:disabled { opacity: .5; cursor: default; }
.wilbur-page :is(button,select,textarea,[tabindex]):focus-visible { outline: 3px solid #b3771a; outline-offset: 3px; }
.wilbur-scene-frame { position: relative; background: #dce5da; }
.wilbur-scene-scroll { --wilbur-zoom: 1; width: 100%; overflow: auto; max-height: min(68vh,700px); overscroll-behavior: contain; scrollbar-color: var(--gold) #e7e4da; }
.wilbur-scene-scroll.is-zoomed { cursor: grab; }
.wilbur-scene-scroll.is-dragging { cursor: grabbing; }
.wilbur-scene-stage { --wilbur-min-hit: 44px; position: relative; width: calc(100% * var(--wilbur-zoom)); aspect-ratio: 3 / 2; overflow: hidden; container-type: inline-size; user-select: none; cursor: crosshair; }
.wilbur-scene-scroll:not(.is-zoomed) .wilbur-scene-stage { width: min(100%, 102vh, 1050px); margin-inline: auto; }
.wilbur-scene-image { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.wilbur-target {
  --wilbur-left: 50%;
  --wilbur-top: 50%;
  --wilbur-scale: 9;
  --wilbur-ratio: 0.87;
  --wilbur-sprite-width: max(calc(var(--wilbur-scale) * 1cqw), 26px);
  --wilbur-sprite-height: calc(var(--wilbur-sprite-width) * var(--wilbur-ratio));
  position: absolute;
  z-index: 1;
  left: var(--wilbur-left);
  top: var(--wilbur-top);
  width: max(var(--wilbur-sprite-width), var(--wilbur-min-hit));
  height: max(calc(var(--wilbur-sprite-width) * var(--wilbur-ratio)), var(--wilbur-min-hit));
  padding: 0;
  border: 0;
  background: transparent;
  cursor: crosshair;
  transform: translate(-50%, -50%);
  transform-origin: center;
  transition: transform 180ms ease;
}

/* Contact shadow: a soft ellipse under the paws, scaled with the sprite, so
   Wilbur sits on the ground instead of floating over it. Patch spots bring
   their own shadow from the render, and clipped spots have no visible paws. */
.wilbur-target::before {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--wilbur-sprite-height) * 0.46);
  width: calc(var(--wilbur-sprite-width) * 0.95);
  height: calc(var(--wilbur-sprite-height) * 0.14);
  background: radial-gradient(ellipse, rgba(20, 25, 15, 0.45), transparent 70%);
  content: "";
  filter: blur(2px);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.wilbur-target.is-patch::before,
.wilbur-target.is-clipped::before { display: none; }

.wilbur-sprite,
.wilbur-patch {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--wilbur-sprite-width);
  height: auto;
  pointer-events: none;
  transform: translate(-50%, -50%);
  -webkit-user-drag: none;
}

.wilbur-sprite[hidden],
.wilbur-patch[hidden] { display: none; }

/* Depth occlusion mask (built by scripts/build_wilbur_layers.py) plus the
   per-spot light match. Both apply to the sprite only; the hit box stays whole. */
.wilbur-sprite {
  -webkit-mask-image: var(--wilbur-mask, none);
  mask-image: var(--wilbur-mask, none);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter: var(--wilbur-tone, none);
  transform:
    translate(-50%, -50%)
    rotate(var(--wilbur-tilt, 0deg))
    scaleX(var(--wilbur-flip, 1));
}

.wilbur-sprite.is-wiggling { animation: wilbur-wiggle 620ms ease-in-out 1; }

.wilbur-target:focus-visible {
  outline: 4px solid #f3c76f;
  outline-offset: 5px;
}

.wilbur-target::after {
  position: absolute;
  inset: -6px;
  border: 4px solid #f5ce71;
  border-radius: 46%;
  box-shadow: 0 0 0 3px rgba(23, 63, 49, 0.72), 0 0 18px rgba(255, 255, 255, 0.9);
  content: "";
  opacity: 0;
  pointer-events: none;
}

.wilbur-target.is-hinted::after { animation: wilbur-hint 1.15s ease-in-out 4; }
.wilbur-target.is-hinted { z-index: 2; }
.wilbur-target.is-found { z-index: 2; }
.wilbur-target.is-found::after { opacity: 1; }

.wilbur-ripple {
  position: absolute;
  z-index: 3;
  width: 18px;
  height: 18px;
  border: 3px solid #fffaf0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(23, 63, 49, 0.55);
  content: "";
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: wilbur-ripple 700ms ease-out forwards;
}

/* A patch contains scenery: it must scale exactly with the base, even when its
   dog is small. Only the transparent hit target gets a minimum touch size. */
.wilbur-target.is-patch { --wilbur-sprite-width: calc(var(--wilbur-scale) * 1cqw); }
.wilbur-hint-area { position: absolute; z-index: 2; width: 33.3334%; height: 33.3334%; background: #ffd77720; border: 4px dashed #ffdc8a; box-shadow: 0 0 0 1px #214c3a; pointer-events: none; }
.wilbur-search-ring { position: absolute; width: 28px; height: 28px; border: 3px solid white; outline: 2px solid var(--forest-dark); border-radius: 50%; z-index: 4; transform: translate(-50%,-50%); pointer-events: none; }
.wilbur-search-ring::after { content: '+'; display: block; color: white; text-shadow: 0 1px 2px black; text-align: center; line-height: 22px; }
.wilbur-curtain { position: absolute; inset: 0; z-index: 8; background: #e8efe4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px; text-align: center; }
.wilbur-curtain strong { max-width: 450px; }
.wilbur-game-bottom { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #d8dfd2; }
.wilbur-status { margin: 0; color: var(--forest-dark); font-size: .9rem; font-weight: 750; }
.wilbur-controls { display: flex; flex-shrink: 0; gap: 8px; }
.wilbur-win-card { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 12px 20px; background: #fff3d5; padding: 20px; border-top: 1px solid #dcc38a; scroll-margin-block: 12px; }
.wilbur-win-portrait { width: 70px; height: auto; animation: wilbur-celebrate .5s ease-out; }
.wilbur-win-body strong { color: var(--forest-dark); font-size: 1.15rem; }
.wilbur-win-body p { margin: 6px 0 0; font-size: .88rem; }
.wilbur-win-total { font-weight: 750; }
.wilbur-win-actions { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 10px; }
.wilbur-copy-fallback label { display: block; font-size: .8rem; }
.wilbur-copy-fallback textarea { width: 100%; font: inherit; font-size: .85rem; }
.wilbur-how-to { margin-top: 20px; font-size: .88rem; }
.wilbur-how-to summary { cursor: pointer; min-height: 44px; font-weight: 800; }
.wilbur-how-to p { max-width: 850px; }
.wilbur-privacy-note { color: var(--muted); font-size: .75rem; margin: 12px 0 0; }
@keyframes wilbur-hint { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes wilbur-ripple { to { opacity: 0; transform: translate(-50%,-50%) scale(3); } }
@keyframes wilbur-celebrate { 0% { transform: scale(.8) rotate(-8deg); } 65% { transform: scale(1.06) rotate(4deg); } 100% { transform: none; } }
@media (min-width: 851px) { .wilbur-scene-stage { --wilbur-min-hit: 56px; } }
@media (max-width: 620px) {
  .wilbur-page .site-note { font-size: .7rem; }
  .wilbur-game-hero-inner { gap: 12px; padding-block: 8px 18px; }
  .wilbur-hero-mascot { width: 76px; }
  .wilbur-game-hero h1 { font-size: 2rem; }
  .wilbur-game-lead { font-size: .85rem; }
  .wilbur-game-section { padding-top: 14px; }
  .wilbur-mode-picker { gap: 8px; padding: 12px 12px 6px; }
  .wilbur-mode-picker label { width: 100%; }
  .wilbur-mode-picker select { flex-basis: 100%; max-width: none; }
  .wilbur-mode-picker button { width: 100%; }
  .wilbur-mode-note { padding: 4px 12px 12px; font-size: .76rem; }
  .wilbur-scoreboard { padding: 10px 12px; gap: 4px; }
  .wilbur-score-item span { font-size: .55rem; letter-spacing: 0; }
  .wilbur-score-item strong { font-size: .78rem; }
  .wilbur-trail { gap: 18px; padding-block: 6px; }
  .wilbur-pan-tip { width: 100%; margin: 0; }
  .wilbur-scene-toolbar { padding: 8px 10px; }
  .wilbur-game-button { font-size: .75rem; padding-inline: 10px; }
  .wilbur-game-bottom { flex-direction: column; align-items: stretch; padding: 12px; }
  .wilbur-controls button { flex: 1; }
  .wilbur-win-card { grid-template-columns: 48px 1fr; padding: 14px; gap: 12px; }
  .wilbur-win-portrait { width: 48px; }
  .wilbur-win-actions button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .wilbur-page *, .wilbur-page *::after { animation: none !important; scroll-behavior: auto !important; }
  .wilbur-target.is-hinted::after { opacity: 1; }
  .wilbur-ripple { display: none; }
}