/* Barn Breaker — isolated lantern-lit barn presentation. */
.barn-breaker-page { background: #f5eee1; }
.barn-breaker-main { padding-block: clamp(1.4rem, 4vw, 3.5rem); }
.barn-breaker-main .breadcrumb { margin-bottom: 1rem; color: var(--muted); }
.barn-breaker-main .breadcrumb a { color: var(--green-800); }
.barn-breaker-intro { max-width: 900px; margin-bottom: 1.35rem; }
.barn-breaker-intro h1 { color: #452b20; font-size: clamp(2.65rem, 7vw, 5.25rem); }
.barn-breaker-intro .lead { max-width: 780px; margin-bottom: 0; }
.barn-breaker-eyebrow { display: flex; align-items: center; gap: .6rem; color: #73503b; }
.barn-breaker-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #dca94f; box-shadow: 0 0 0 5px rgba(220,169,79,.18); }
.barn-breaker-layout { display: grid; grid-template-columns: minmax(0, 720px) minmax(270px, 360px); gap: clamp(1rem, 3vw, 2rem); align-items: start; justify-content: center; }
.barn-breaker-game { min-width: 0; }
.barn-breaker-scoreboard { display: grid; grid-template-columns: 1fr .85fr 1.05fr 1fr; gap: .45rem; margin-bottom: .7rem; padding: .6rem; border-radius: 14px; background: #38241b; color: #fff; box-shadow: var(--shadow-soft); }
.barn-breaker-stat { min-width: 0; padding: .58rem .7rem; border: 1px solid rgba(255,239,202,.24); border-radius: 9px; background: rgba(255,255,255,.055); }
.barn-breaker-stat span { display: block; color: #eccd8a; font-size: .62rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.barn-breaker-stat strong { display: block; margin-top: .12rem; overflow-wrap: anywhere; color: #fff8e7; font: 400 clamp(1rem, 3vw, 1.55rem)/1.1 var(--serif); }
.barn-breaker-lanterns { color: #efbd58 !important; letter-spacing: .14em; white-space: nowrap; }
.barn-breaker-board-frame { position: relative; width: min(100%, 620px); margin-inline: auto; padding: clamp(.45rem, 1.5vw, .75rem); border: 4px solid #6f412a; border-radius: 18px; background: #251711; box-shadow: 0 18px 45px rgba(61,37,25,.25), inset 0 0 0 2px #c28b4b; }
.barn-breaker-canvas { display: block; width: 100%; aspect-ratio: 15 / 19; border: 2px solid #b98445; border-radius: 9px; background: #2b1a13; touch-action: pan-y; user-select: none; outline: none; }
.barn-breaker-canvas:focus-visible { outline: 4px solid #edbd61; outline-offset: 4px; }
.barn-breaker-canvas-note { position: absolute; left: 50%; bottom: 1.3rem; width: max-content; max-width: calc(100% - 2.5rem); transform: translateX(-50%); margin: 0; padding: .35rem .65rem; border: 1px solid rgba(244,218,164,.25); border-radius: 999px; background: rgba(41,24,16,.88); color: #f5d9a0; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-align: center; pointer-events: none; }
.barn-breaker-move-label { display: block; width: min(100%, 620px); margin: .75rem auto .4rem; color: #4b3022; font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.barn-breaker-drag { --gate-position: 50%; position: relative; width: min(100%, 620px); height: 68px; margin-inline: auto; border: 1px solid #9b8066; border-radius: 14px; background: linear-gradient(180deg,#fffaf0,#e9d5b4); box-shadow: inset 0 2px 8px rgba(50,30,19,.11); touch-action: none; user-select: none; cursor: ew-resize; outline: none; }
.barn-breaker-drag::before { content: ""; position: absolute; inset-inline: 18px; top: 50%; height: 7px; transform: translateY(-50%); border-radius: 999px; background: #aa8a65; box-shadow: inset 0 1px 3px rgba(0,0,0,.2); }
.barn-breaker-drag::after { content: ""; position: absolute; left: clamp(31px,var(--gate-position),calc(100% - 31px)); top: 50%; width: 62px; height: 34px; transform: translate(-50%,-50%); border: 3px solid #684029; border-radius: 5px; background: repeating-linear-gradient(90deg,#9b673c 0 12px,#b77d47 12px 24px); box-shadow: 0 4px 9px rgba(50,30,19,.24); }
.barn-breaker-drag:focus-visible { outline: 4px solid #d5a950; outline-offset: 3px; }
.barn-breaker-actions { width: min(100%,620px); display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: .55rem; margin: .8rem auto 0; }
.barn-breaker-actions button { min-height: 50px; }
.barn-breaker-actions button:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.barn-breaker-secondary { width: min(100%,620px); display: flex; gap: .65rem; align-items: stretch; margin: .55rem auto 0; }
.barn-breaker-status { min-height: 46px; flex: 1; margin: 0; padding: .65rem .8rem; border-left: 4px solid #bc7b3d; background: #f0dfc1; color: #38241b; font-weight: 700; }
.barn-breaker-sound { min-height: 46px; flex: 0 0 auto; padding: .55rem .8rem; border: 1px solid var(--line); background: transparent; color: #493023; font-weight: 800; }
.barn-breaker-sidebar { display: grid; gap: 1rem; }
.barn-breaker-panel { padding: 1.25rem; border: 1px solid #d7c5aa; border-radius: 14px; background: #fffcf5; box-shadow: var(--shadow-soft); }
.barn-breaker-panel h2, .barn-breaker-difficulty legend { color: #4a2e20; font: 400 1.45rem var(--serif); }
.barn-breaker-panel > :last-child { margin-bottom: 0; }
.barn-breaker-panel ol { padding-left: 1.1rem; }
.barn-breaker-panel li + li { margin-top: .42rem; }
.barn-breaker-difficulty { margin: 0; padding: 0; border: 0; }
.barn-breaker-difficulty legend { margin-bottom: .7rem; }
.barn-breaker-difficulty-options { display: grid; grid-template-columns: repeat(3,1fr); gap: .4rem; }
.barn-breaker-difficulty-options div { position: relative; min-width: 0; }
.barn-breaker-difficulty-options input { position: absolute; opacity: 0; pointer-events: none; }
.barn-breaker-difficulty-options label { min-height: 48px; display: grid; place-items: center; padding: .55rem .35rem; border: 1px solid #aa927a; border-radius: 8px; background: #fff; cursor: pointer; }
.barn-breaker-difficulty-options input:checked + label { border-color: #593623; background: #593623; color: #fff; }
.barn-breaker-difficulty-options input:focus-visible + label { outline: 3px solid #d5a950; outline-offset: 2px; }
.barn-breaker-difficulty-options input:disabled + label { opacity: .55; cursor: not-allowed; }
.barn-breaker-objects p { display: flex; align-items: center; gap: .35rem; margin: .45rem 0; }
.barn-breaker-swatch { width: 28px; height: 20px; flex: 0 0 auto; border: 2px solid #69432a; border-radius: 3px; }
.barn-breaker-swatch--hay { background: #d6a84f; }
.barn-breaker-swatch--crate { background: #94603a; }
.barn-breaker-swatch--sign { background: #8e4034; }
.barn-breaker-keyboard { display: grid; grid-template-columns: auto 1fr; gap: .55rem .7rem; margin: 0; }
.barn-breaker-keyboard dt,.barn-breaker-keyboard dd { margin: 0; }
.barn-breaker-keyboard kbd { min-width: 43px; display: inline-grid; place-items: center; padding: .35rem .45rem; border: 1px solid #aa927a; border-bottom-width: 3px; border-radius: 6px; background: #fff; font: 800 .75rem var(--sans); }
.barn-breaker-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--green-800); font-weight: 800; text-underline-offset: .22rem; }
@media (max-width:900px) { .barn-breaker-layout { grid-template-columns:minmax(0,650px); } .barn-breaker-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); } .barn-breaker-sidebar .barn-breaker-panel:first-child { grid-column:1/-1; } }
@media (max-width:600px) { .barn-breaker-main { padding-top:1.1rem; } .barn-breaker-intro { margin-bottom:1rem; } .barn-breaker-scoreboard { grid-template-columns:repeat(4,1fr); gap:.28rem; padding:.38rem; border-radius:11px; } .barn-breaker-stat { padding:.42rem .3rem; text-align:center; } .barn-breaker-stat span { font-size:.5rem; letter-spacing:.05em; } .barn-breaker-stat strong { font-size:clamp(.78rem,4vw,1.08rem); } .barn-breaker-canvas-note { display:none; } .barn-breaker-actions { grid-template-columns:1fr 1fr; } .barn-breaker-actions [data-barn-start] { grid-column:1/-1; } .barn-breaker-secondary { flex-direction:column; } .barn-breaker-sound,.barn-breaker-status { width:100%; } .barn-breaker-sidebar { grid-template-columns:1fr; } .barn-breaker-sidebar .barn-breaker-panel:first-child { grid-column:auto; } }
@media (max-width:390px) { .barn-breaker-actions button { padding-inline:.65rem; } .barn-breaker-move-label { font-size:.61rem; } }
@media (prefers-reduced-motion:reduce) { .barn-breaker-drag,.barn-breaker-drag::after { transition:none; } }
.barn-breaker-board-frame{background-image:linear-gradient(rgba(45,24,14,.52),rgba(34,18,11,.72)),url("/assets/images/wellness/heartworks-bell-tent-interior.webp");background-size:cover;background-position:center 68%}.barn-breaker-canvas{opacity:1}
@media(max-width:430px){.barn-breaker-canvas{aspect-ratio:1/1}.barn-breaker-drag{height:54px;margin-top:.35rem}.barn-breaker-move-label{margin-top:.45rem}.barn-breaker-actions{margin-top:.55rem}}