/* Chapter paint, with the approved sprites and target geometry preserved.
   Load after game-v17.2.css and scene.css. Decorative color is isolated in SVG; the
   cannon, Ripple and the complete bullseye use their original artwork. */
.skin-clown { display: block; height: auto; aspect-ratio: 1; overflow: visible; }
.skin-booth { display: block; overflow: hidden; }
.game-stage.water-open-booth { background: transparent; }
/* The former narrow-screen side crops were hidden behind the solid wall.
   An open lane needs one continuous panorama, with no overlapping copies. */
.water-open-world[data-world] .scene-backdrop::before,
.water-open-world[data-world] .scene-backdrop::after { display: none; }
.water-target-mechanism { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.game-stage[data-phase='paused'] .water-target-mechanism,
.game-stage[data-phase='won'] .water-target-mechanism,
.game-stage[data-phase='lost'] .water-target-mechanism { opacity: .35; }
/* Expanded play is on its own surface, so retain the selected world there. */
.game-expanded-content .game-stage.water-open-booth,
.game-native-fullscreen .game-stage.water-open-booth { background: var(--world-image) center 35% / auto 100% no-repeat; }
.skin-clown, .skin-clown *, .skin-booth, .skin-booth * { pointer-events: none !important; user-select: none; }

/* Steady red lamps respond to real center contact. A short fade keeps the
   edge of a hit smooth; there is no flashing, target resizing, or moving halo. */
.bullseye-lamps { opacity: 0; transition: opacity 75ms linear; }
.bullseye-lamp-core { mix-blend-mode: screen; }
.skin-clown[data-bullseye-active='true'] .bullseye-lamps { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bullseye-lamps { transition: none; }
}

.carnival-world[data-skin] > .game-column {
  box-shadow: 0 0 0 4px var(--skin-deep), 0 0 0 6px var(--skin-trim), 0 18px 45px #02122e99;
}
.carnival-world[data-skin] .game-topline {
  background: linear-gradient(110deg, var(--skin-deep), color-mix(in srgb, var(--skin-deep), var(--skin-bright) 18%));
  border-color: color-mix(in srgb, var(--skin-bright), #ffffff 12%);
}
.carnival-world[data-skin] .game-topline small { color: var(--skin-bright); }
.carnival-world[data-skin] .level-chip { color: var(--skin-deep); background: var(--skin-bright); border-color: var(--skin-trim); }
.carnival-world[data-skin] .start-controls {
  background: linear-gradient(180deg, color-mix(in srgb, var(--skin-deep), var(--skin-bright) 12%), var(--skin-deep));
  border-color: color-mix(in srgb, var(--skin-bright), #ffffff 12%);
}
.carnival-world[data-skin] .rear-pad { background: linear-gradient(180deg, color-mix(in srgb, var(--skin-deep), var(--skin-bright) 15%), var(--skin-deep)); }
.carnival-world[data-skin] .rear-pad.is-held { background: linear-gradient(180deg, color-mix(in srgb, var(--skin-deep), var(--skin-bright) 30%), var(--skin-deep)); }
.carnival-world[data-skin] .pause-button { background: var(--skin-deep); border-color: color-mix(in srgb, var(--skin-bright), transparent 45%); }

/* Five signs with different construction, not just different wording. */
.carnival-world[data-skin] > .world-sign {
  top: 45%;
  padding: 25px 19px 20px;
  color: var(--skin-ink);
  border: 3px solid var(--skin-trim);
  background: linear-gradient(140deg, #ffffff80, transparent 54%), var(--skin-paper);
  border-radius: 25px 25px 14px 14px;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--skin-trim), #4c382d 35%), 0 15px 25px #09214360, inset 0 0 0 4px #ffffff80;
  text-shadow: none;
}
.world-sign-crest { width: 52px; height: 52px; margin: 0 auto 10px; color: var(--skin-ink); }
.world-sign-crest svg { display: block; width: 100%; height: 100%; }
.carnival-world[data-skin] .world-sign .eyebrow { margin: 0 0 9px; color: var(--skin-ink); font-size: 8px; letter-spacing: .2em; }
.carnival-world[data-skin] .world-sign h2 { margin-bottom: 12px; color: var(--skin-ink); font-size: clamp(25px, 3vw, 39px); line-height: 1.02; }
.carnival-world[data-skin] .world-sign h2 span { color: inherit; }
.carnival-world[data-skin] .world-sign > p:not(.eyebrow) { color: var(--skin-ink); font-size: 11px; line-height: 1.75; margin: 0 0 12px; }
.carnival-world[data-skin] .world-sign-stars { color: var(--skin-trim); font-size: 14px; letter-spacing: 3px; }
.carnival-world[data-skin] .world-sign::after { width: 16px; left: calc(50% - 8px); box-shadow: 3px 0 0 #533b2740; }

/* Cove: warm ivory marquee with a pair of little brass corner studs. */
.carnival-world[data-skin='marquee'] > .world-sign {
  border-radius: 35px 35px 17px 17px;
  outline: 1px solid #f8dfa5;
  outline-offset: -9px;
  background: radial-gradient(circle at 12px 16px, #c3922d 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 12px) 16px, #c3922d 0 2px, transparent 3px),
    linear-gradient(140deg, #ffffff80, transparent 54%), var(--skin-paper);
}

/* Boardwalk: a bleached timber sign with a striped seaside header. */
.carnival-world[data-skin='boardwalk'] > .world-sign {
  transform: rotate(-1.5deg);
  border-radius: 8px;
  padding-top: 29px;
  border-width: 2px;
  background: repeating-linear-gradient(0deg, transparent 0 39px, #719c9a1c 40px 41px),
    linear-gradient(140deg, #ffffff88, transparent 65%), var(--skin-paper);
  box-shadow: 0 5px 0 #488d82, 0 15px 25px #09214360, inset 0 0 0 5px #fffdf5b0;
}
.carnival-world[data-skin='boardwalk'] > .world-sign::before {
  content: ''; position: absolute; left: 7px; right: 7px; top: 7px; height: 7px;
  background: repeating-linear-gradient(90deg, #4aaca0 0 13px, #f8f6df 13px 26px);
  border-radius: 2px;
}
.carnival-world[data-skin='boardwalk'] .world-sign::after { background: linear-gradient(90deg, #85a79c, #ced7bc 45%, #83a69b); }

/* Sunset: a rounded sunburst plaque with a peach enamel face. */
.carnival-world[data-skin='sunrise'] > .world-sign {
  transform: rotate(2deg);
  border-radius: 48% 48% 17px 17px / 27% 27% 17px 17px;
  padding-top: 29px;
  background: radial-gradient(ellipse at 50% 0, #ffdc9a90, transparent 51%),
    linear-gradient(160deg, #fff7e8, #ffe4d5);
  box-shadow: 0 6px 0 #af6e55, 0 15px 25px #40203c55, inset 0 0 0 5px #fff8eaa0;
}
.carnival-world[data-skin='sunrise'] .world-sign-crest { color: #ad5c47; }

/* Starlight: a pale lavender observatory plaque, hung from two silver posts. */
.carnival-world[data-skin='starlight'] > .world-sign {
  transform: rotate(-2deg);
  border-radius: 42px 12px 42px 12px;
  border-color: #baaddd;
  background: radial-gradient(circle at 18% 21%, #ffffff 0 1px, transparent 2px),
    radial-gradient(circle at 82% 13%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 86% 70%, #ffffff 0 1px, transparent 2px),
    linear-gradient(160deg, #f6f3ff, #ddd7f4);
  box-shadow: 0 6px 0 #73638f, 0 15px 25px #18143666, inset 0 0 0 5px #ffffff66;
}
.carnival-world[data-skin='starlight'] .world-sign::after { width: 56%; left: 22%; background: linear-gradient(90deg, #9c91b5 0 8px, transparent 8px calc(100% - 8px), #9c91b5 calc(100% - 8px)); box-shadow: none; }

/* Festival: a warm ticket plaque with gilded fluted edges and rosette. */
.carnival-world[data-skin='festival'] > .world-sign {
  transform: rotate(2.5deg);
  border-radius: 20px 8px 20px 8px;
  border-style: double;
  border-width: 6px;
  background: repeating-linear-gradient(90deg, #e6b85914 0 15px, transparent 15px 30px),
    linear-gradient(155deg, #fffbea, #ffefc3);
  box-shadow: 0 6px 0 #a47735, 0 15px 25px #24183c66, inset 0 0 0 2px #ffffffaa;
}
.carnival-world[data-skin='festival'] .world-sign-crest { color: #a16c25; }
.carnival-world[data-skin='festival'] .world-sign .eyebrow { letter-spacing: .25em; }

@media (max-width: 1100px) {
  .carnival-world[data-skin] > .world-sign { padding-inline: 12px; }
  .carnival-world[data-skin] .world-sign > p:not(.eyebrow) { font-size: 10px; }
}

/* The chapter's welcome sign remains visible on tablets and phones. It sits
   above, rather than narrowing, the established large playfield. */
@media (max-width: 900px) {
  .carnival-world[data-skin] > .world-sign {
    position: relative; top: auto; left: auto; right: auto;
    display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto;
    align-items: center; column-gap: 12px; row-gap: 4px;
    width: 410px; max-width: 100%; min-height: 73px;
    margin: 0 auto 23px; padding: 12px 18px;
    transform: none; text-align: left;
    border-radius: 16px; border-width: 2px;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--skin-trim), #4c382d 35%), 0 8px 18px #09214345;
  }
  .world-sign-crest { grid-column: 1; grid-row: 1 / 3; width: 37px; height: 37px; margin: 0; }
  .carnival-world[data-skin] .world-sign .eyebrow { grid-column: 2; grid-row: 1; margin: 0; font-size: 7px; line-height: 1.2; }
  .carnival-world[data-skin] .world-sign h2 { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 0 .25em; margin: 0; font-size: 24px; line-height: 1.05; letter-spacing: -.035em; }
  .carnival-world[data-skin] .world-sign h2 br { display: none; }
  .carnival-world[data-skin] .world-sign > p:not(.eyebrow),
  .carnival-world[data-skin] .world-sign-stars,
  .carnival-world[data-skin] .world-sign::after { display: none; }
  .carnival-world[data-skin='boardwalk'] > .world-sign { padding-top: 15px; border-radius: 6px; }
  .carnival-world[data-skin='boardwalk'] > .world-sign::before { height: 4px; top: 4px; left: 5px; right: 5px; }
  .carnival-world[data-skin='sunrise'] > .world-sign { border-radius: 35px 35px 12px 12px; }
  .carnival-world[data-skin='starlight'] > .world-sign { border-radius: 23px 7px 23px 7px; }
  .carnival-world[data-skin='festival'] > .world-sign { border-width: 4px; border-radius: 13px 5px 13px 5px; }
}
@media (max-width: 620px) {
  .carnival-world[data-skin] { --scene-padding: 46px 22px 34px; }
  .carnival-world[data-skin] > .world-sign { width: 100%; max-width: 390px; min-height: 66px; padding-inline: 13px; column-gap: 9px; margin-bottom: 20px; }
  .carnival-world[data-skin] .world-sign h2 { font-size: clamp(18px, 5.8vw, 23px); }
  .carnival-world[data-skin] .world-sign .eyebrow { font-size: 6px; }
  .world-sign-crest { width: 34px; height: 34px; }
}
@media (max-width: 370px) {
  .carnival-world[data-skin] { --scene-padding: 43px 17px 30px; }
}