#activity { z-index: 25; }
.activity-book { position: relative; box-sizing: border-box; width: min(850px, 92%); max-height: 94%; overflow: auto; padding: clamp(16px, 2.4vw, 32px); background: #eee3cb; color: #2d413e; border: 1px solid #c4ae87; border-radius: 9px; box-shadow: 0 20px 80px #0008; }
.activity-book h2 { font: 500 clamp(26px, 3vw, 40px)/1.05 'Cormorant Garamond', Georgia, serif; margin: 0 30px 12px 0; }
.activity-book .eyebrow { color: #8c7250; font-size: 10px; margin-bottom: 8px; }
#activityHelp { font-size: clamp(12px, 1.2vw, 15px); line-height: 1.5; max-width: 680px; margin: 0 0 18px; }
#activityPlay { border: 1px solid #526862; border-radius: 5px; padding: 18px; background: #142d35; color: #ede0c5; text-align: center; box-sizing: border-box; }
.activity-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 14px; }
#activityStatus { font-size: 13px; line-height: 1.5; margin: 0; max-width: 520px; }
.activity-footer button { flex: none; }
.activity-button { padding: 9px 16px; margin: 10px 6px 0; border: 1px solid #b49766; border-radius: 4px; background: #ecd8b0; color: #203c40; font-size: 13px !important; }
#activity button:disabled { cursor: default; opacity: .55; }
#activity .water-tile:disabled, #activity .lens-dial:disabled { opacity: 1; }
#activity button:focus-visible, #activity input:focus-visible { outline: 3px solid #e1a852; outline-offset: 3px; }
.call-score { display: flex; gap: 14px; justify-content: center; margin-bottom: 5px; }
.call-score span { display: grid; place-items: center; width: 36px; height: 36px; border-bottom: 2px solid #596e6d; color: #b7b7a4; }
.call-score .lit, .call-score .answered { color: #ffdf9d; border-color: #ffcf72; background: #385047; }
.bell-rack { display: flex; justify-content: center; gap: 50px; border-top: 8px solid #63523a; margin: 0 8% 5px; }
.bell-button { display: grid; justify-items: center; width: 100px; padding: 6px; border: 0; background: none; color: #d8bd80; }
.bell-button svg { width: 80px; height: 100px; fill: #ba8644; stroke: #efc984; stroke-width: 2; }
.bell-button.lit svg { fill: #ffce6c; filter: drop-shadow(0 0 10px #ffd98b); }
.activity-canvas { width: 100%; height: auto; max-height: 250px; display: block; touch-action: none; cursor: grab; border-radius: 3px; }
.stone-controls { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; font-size: 12px; }
.stone-controls label { display: flex; align-items: center; gap: 10px; }
.stone-controls input { accent-color: #c5a46c; width: 180px; }
.lens-rack { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; padding: 18px 0; }
.lens-dial { position: relative; border: 0; background: none; color: #e8d9ba; display: grid; gap: 10px; justify-items: center; padding: 0; }
.lens-ring { position: relative; display: block; width: clamp(75px,12vw,145px); aspect-ratio: 1; border: 7px solid #9d8054; border-radius: 50%; background: radial-gradient(circle,#396171,#172b36 75%); box-shadow: inset 0 0 0 2px #d2b277, 0 5px 12px #0007; }
.lens-notch,.lens-pointer { display: block; position: absolute; inset: 8%; transition: transform .15s; }
.lens-notch:before { content: ''; display: block; position: absolute; width: 9px; height: 14px; background: #faf1d6; top: -10%; left: calc(50% - 4px); }
.lens-pointer:before { content: ''; display: block; position: absolute; width: 6px; height: 48%; background: #d7ad62; top: 2%; left: calc(50% - 3px); box-shadow: 0 0 8px #eec77155; }
.lens-pointer:after { content: ''; position: absolute; width: 15px; height: 15px; border-radius: 50%; background: #e2c995; left: calc(50% - 7px); top: calc(50% - 7px); }
.lens-dial small { font-size: 11px; color: #b5bbaa; }
.lens-dial.aligned small { color: #dbd58e; }
.lens-dial.has-light .lens-ring { box-shadow: inset 0 0 35px #e4b95955, 0 0 14px #d1ad6c55; }
.lens-dial.has-light.aligned .lens-ring { background: radial-gradient(circle,#f1d18a,#465e58 75%); }
.leaf-field { position: relative; height: 250px; overflow: hidden; background: #605446 url('assets/chapters/v2/ground-surfaces.png') center bottom/850px auto; border-radius: 4px; touch-action: none; }
.leaf-field:before { content: ''; position: absolute; inset: 6% 12%; border: 1px dashed #f0dfb373; border-radius: 40px; background: #af956b15; }
.leaf-cluster { position: absolute; width: 45px; height: 55px; border: 0; padding: 0; background: none; transition: left .45s,transform .45s; touch-action: none; }
.leaf-cluster svg { width: 100%; height: 100%; fill: #c16a2f; stroke: #592e22; stroke-width: 2; filter: drop-shadow(3px 3px 1px #231c13); }
.leaf-cluster:nth-child(3n) svg { fill: #d19c40; }
.leaf-cluster.swept { pointer-events: none; opacity: 1 !important; }
.water-layout { position: relative; width: 280px; max-width: 75%; margin: auto; }
.water-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr)); aspect-ratio: 1; gap: 3px; background: #243e3b; border: 8px solid #4b6154; }
.water-tile { padding: 0; border: 1px solid #738275; background: #344a3c; }
.water-tile svg { width: 100%; height: 100%; display: block; transition: transform .2s; }
.water-tile path { fill: none; stroke-linejoin: round; }
.water-tile .trough { stroke: #a08355; stroke-width: 24; }
.water-tile .flow { stroke: #302f23; stroke-width: 13; }
.water-tile.wet .flow { stroke: #85d2d2; stroke-dasharray: 12 5; animation: stream-flow .8s linear infinite; }
@keyframes stream-flow { to { stroke-dashoffset: -34; } }
.spring-label,.pond-label { position: absolute; font-size: 11px; color: #bfe0d1; }
.spring-label { right: 100%; top: 46%; width: 62px; }.pond-label { left: 100%; bottom: 12%; width: 60px; }
.flowing .pond-label { color: #ffe1a0; text-shadow: 0 0 12px #e1c58b; }
.chime-rack { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; border-top: 6px solid #795f3f; padding-top: 10px; }
.chime-note { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; background: transparent; color: #e5cc9d; min-width: 0; }
.chime-note span { width: 20px; background: linear-gradient(90deg,#795635,#e1b977 45%,#87653d); border: 1px solid #deb879; border-radius: 3px; }
.chime-note.lit span { box-shadow: 0 0 22px #f4d79d; background: #f1d294; }.chime-note small { font-size: 10px; color: #a2b4aa; }
#walkLocation { position: absolute; left: calc(var(--px)*8); top: calc(var(--px)*26); color: #d6c9aa; font-size: clamp(10px,1vw,13px); text-shadow: 0 2px 5px #000; }
body:not([data-chapter="after-rain"]) #toasts { top: calc(var(--px)*38); }
@media (max-height:540px),(max-width:650px) { .activity-book { padding: 16px; }.activity-book h2 { font-size: 26px; }#activityHelp { font-size: 12px; margin-bottom: 10px; }#activityPlay { padding: 10px; }.activity-footer { flex-wrap: wrap; }#activityStatus { font-size: 12px; }.leaf-field { height: 210px; }.water-layout { width: 220px; }.bell-rack { gap: 15px; }.bell-button svg { height: 75px; }.lens-rack { gap: 5px; }.activity-canvas { max-height: 180px; }.lens-ring { border-width: 5px; }.chime-note span { max-height: 100px; } }