/* 🐗🌙 Boar's Night — black, and the dark red of being watched. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #05060a; color: #e8e2dc;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-user-select: none; user-select: none; touch-action: none; }
.skip-link { position: absolute; left: -9999px; top: 0; background: #c0262b; color: #fff; padding: 10px 16px; font-weight: 800; z-index: 50; }
.skip-link:focus { left: 0; }
#screen { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; background: #05060a; }

/* the edges of the screen go red as one comes close */
#dread { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0; transition: opacity .3s;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(120,0,0,.55) 85%, rgba(90,0,0,.9) 100%); }
/* hiding: looking out through the slats */
#hidebox { position: fixed; inset: 0; pointer-events: none; z-index: 6;
  background: repeating-linear-gradient(0deg, rgba(8,5,3,.97) 0 34px, rgba(8,5,3,0) 34px 52px), radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,.85) 90%); }
#hidebox[hidden] { display: none; }
/* caught */
#scare { position: fixed; inset: 0; pointer-events: none; z-index: 7; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,40,20,.15), rgba(160,0,0,.75)); }
#scare.on { animation: scare 2s ease-out forwards; }
/* a jumpscare: white, then red, then the face */
#jumpflash { position: fixed; inset: 0; pointer-events: none; z-index: 8; opacity: 0; }
#jumpflash.on { animation: jumpflash 1s ease-out forwards; }
@keyframes jumpflash { 0% { opacity: 1; background: rgba(255,255,255,.9); } 6% { opacity: 1; background: rgba(255,30,20,.55); } 30% { opacity: .5; background: rgba(160,0,0,.35); } 100% { opacity: 0; background: rgba(0,0,0,0); } }
@keyframes scare { 0% { opacity: 0; } 8% { opacity: 1; } 60% { opacity: .85; } 100% { opacity: 1; background: #000; } }

.bar { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; z-index: 20; pointer-events: none; }
.bar > * { pointer-events: auto; }
.home { color: #e8e2dc; text-decoration: none; font-weight: 800; background: rgba(0,0,0,.5); padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); }
.tag { margin-left: auto; font-size: 12px; opacity: .55; }
.icon { width: 42px; height: 42px; border-radius: 12px; border: 2px solid rgba(255,255,255,.2); background: rgba(0,0,0,.5); color: #e8e2dc; font-size: 18px; cursor: pointer; }
.icon:focus-visible, .btn:focus-visible, .night:focus-visible, .home:focus-visible { outline: 3px solid #ff5a3c; outline-offset: 2px; }

/* ---- while you play ---- */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.hud-l { position: absolute; left: 12px; top: 64px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hud-r { position: absolute; right: 12px; top: 64px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.pill { background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; padding: 6px 10px; font-weight: 800; font-size: 15px; }
.pill.clock { font-size: 24px; font-variant-numeric: tabular-nums; color: #f3d9a4; letter-spacing: 1px; }
.pill.lamp { display: flex; align-items: center; gap: 8px; }
.bar2 { width: 90px; height: 10px; border-radius: 5px; background: rgba(255,255,255,.12); overflow: hidden; display: inline-block; }
.bar2 i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #f2b84a, #ffe39a); }
.bar2 i.low { background: #c0262b; animation: blink .6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .3; } }
.stamina { position: absolute; left: 50%; bottom: 26px; width: 180px; height: 6px; margin-left: -90px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; opacity: 0; transition: opacity .3s; }
.stamina.show { opacity: 1; }
.stamina i { display: block; height: 100%; background: #9fd6ff; }
.pausebtn { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); pointer-events: auto; z-index: 21; }
.msg { position: absolute; left: 0; right: 0; top: 24%; text-align: center; font-weight: 900; font-size: clamp(18px, 3.2vw, 30px); color: #f3d9a4;
  text-shadow: 0 2px 0 #000, 0 0 20px rgba(0,0,0,.9); padding: 0 20px; }
.prompt { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 6px 12px; font-weight: 800; font-size: 15px; }
.cross { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255,255,255,.45); }
#intro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: rgba(0,0,0,.72); animation: introfade 3.6s ease-in-out forwards; }
#intro[hidden] { display: none; }
@keyframes introfade { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.i-night { font-size: clamp(44px, 9vw, 96px); font-weight: 900; letter-spacing: 6px; color: #c0262b; text-shadow: 0 0 30px rgba(200,20,20,.6); }
.i-name { font-size: clamp(20px, 3.4vw, 32px); font-weight: 800; margin-top: 4px; }
.i-blurb { font-size: 16px; opacity: .75; margin-top: 10px; }

/* ---- fingers ---- */
#touch { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
#touch[hidden] { display: none; }
.lookpad { position: absolute; right: 0; top: 70px; bottom: 0; width: 55%; pointer-events: auto; touch-action: none; }
.stick { position: absolute; left: 24px; bottom: 24px; width: 140px; height: 140px; border-radius: 50%; background: rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.25); pointer-events: auto; touch-action: none; }
.knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(255,255,255,.55); }
.buttons { position: absolute; right: 18px; bottom: 24px; display: flex; flex-direction: column; gap: 10px; pointer-events: auto; }
.buttons button { width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); background: rgba(0,0,0,.5); color: #fff; font-size: 26px; touch-action: none; }
.buttons button.on { border-color: #9fd6ff; background: rgba(60,110,160,.5); }

/* ---- screens ---- */
#screens { position: fixed; inset: 0; z-index: 15; display: grid; place-items: center; padding: 64px 14px 14px; overflow-y: auto; pointer-events: none; }
#screens[hidden] { display: none; }
.screen { display: none; width: 100%; max-width: 760px; pointer-events: auto; }
.screen.active { display: block; }
.panel { background: rgba(6,5,8,.82); border: 1px solid rgba(192,38,43,.45); border-radius: 18px; padding: 20px 22px; box-shadow: 0 0 60px rgba(140,0,0,.35); }
.panel.center { text-align: center; }
.logo { margin: 0; text-align: center; font-size: clamp(42px, 9vw, 84px); font-weight: 900; letter-spacing: 3px; line-height: 1; color: #e8e2dc;
  text-shadow: 0 0 18px rgba(0,0,0,.9), 0 4px 0 #2a0505; }
.logo span { color: #c0262b; text-shadow: 0 0 24px rgba(220,30,30,.7), 0 4px 0 #2a0505; }
.lede { text-align: center; margin: 12px 0 6px; font-size: 17px; opacity: .9; font-style: italic; }
.warn { text-align: center; margin: 0 0 14px; font-size: 14px; color: #f3d9a4; }
.loading { text-align: center; opacity: .7; }
.loading[hidden] { display: none; }
.nights { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.night { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(192,38,43,.6);
  background: linear-gradient(180deg, rgba(60,10,12,.7), rgba(20,4,6,.7)); color: #e8e2dc; font: inherit; cursor: pointer; }
.night:hover:not(:disabled) { background: linear-gradient(180deg, rgba(90,14,16,.8), rgba(30,6,8,.8)); }
.night .nn { font-size: 12px; letter-spacing: 3px; color: #c0262b; font-weight: 900; }
.night .st { grid-row: span 2; align-self: center; color: #f3d9a4; font-size: 17px; }
.night .st i { color: rgba(255,255,255,.18); font-style: normal; }
.night .nm { font-weight: 900; font-size: 18px; }
.night .bl { grid-column: 1 / span 2; font-size: 13px; opacity: .75; }
.night.locked, .night:disabled { opacity: .45; cursor: not-allowed; }
.how { margin: 16px 0 6px; padding-left: 20px; font-size: 14px; line-height: 1.75; opacity: .88; }
kbd { display: inline-block; min-width: 20px; padding: 0 5px; border-radius: 4px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); font: 12px/18px system-ui, sans-serif; text-align: center; }
h2 { margin: 4px 0 8px; font-size: clamp(22px, 4vw, 34px); color: #f3d9a4; }
.stars { font-size: 50px; margin: 6px 0; color: #f3d9a4; letter-spacing: 6px; }
.stars i { color: rgba(255,255,255,.15); font-style: normal; }
.detail { opacity: .88; margin: 8px 0; }
.row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.btn { font: inherit; font-weight: 900; font-size: 17px; padding: 12px 18px; border-radius: 12px; border: 1px solid #c0262b; background: linear-gradient(180deg, #a01e22, #6a1013); color: #fff; cursor: pointer; }
.btn.big { font-size: 19px; padding: 14px 22px; }
.btn.ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); }
.btn[hidden] { display: none; }
.nogl { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: #3a1020; padding: 12px 16px; border-radius: 12px; z-index: 30; }
.pvsb-cookie-note { margin: 12px 0 0; font-size: 12px; opacity: .6; text-align: center; }

/* ---- 📹 the security camera tablet ---- */
/* the camera's picture: night-vision green, blocky, grainy (the engine draws it; this tints it) */
#screen.feed { filter: grayscale(1) sepia(.55) hue-rotate(62deg) saturate(2.2) brightness(1.08) contrast(1.32); image-rendering: pixelated; }
#cams { position: fixed; inset: 0; z-index: 4; pointer-events: none; color: #c4f0cf; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
#cams[hidden] { display: none; }
#cam-black { position: absolute; inset: 0; background: #000; opacity: 0; }
#cam-noise { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: .1; }
.cam-lines { position: absolute; inset: 0; overflow: hidden; background: repeating-linear-gradient(0deg, rgba(0,0,0,.24) 0 2px, rgba(0,0,0,0) 2px 4px); }
.cam-lines::after { content: ''; position: absolute; left: 0; right: 0; height: 16%; top: -20%; background: linear-gradient(180deg, rgba(170,255,190,0), rgba(170,255,190,.08), rgba(170,255,190,0)); animation: camroll 4.5s linear infinite; }
@keyframes camroll { to { top: 110%; } }
/* the viewfinder's corners, the camera's name and the time, like a real security screen */
.cam-corners i { position: absolute; width: 30px; height: 30px; border: 3px solid rgba(180,255,195,.65); }
.cam-corners i:nth-child(1) { left: 14px; top: 150px; border-right: 0; border-bottom: 0; }
.cam-corners i:nth-child(2) { right: 14px; top: 150px; border-left: 0; border-bottom: 0; }
.cam-corners i:nth-child(3) { left: 14px; bottom: 112px; border-right: 0; border-top: 0; }
.cam-corners i:nth-child(4) { right: 14px; bottom: 112px; border-left: 0; border-top: 0; }
.cam-head { position: absolute; left: 26px; top: 160px; font-size: 14px; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.cam-head b { font-size: 16px; letter-spacing: 1px; color: #e6ffec; margin-left: 4px; }
.cam-clock { position: absolute; right: 26px; top: 160px; font-size: 14px; white-space: nowrap; opacity: .85; text-shadow: 0 1px 2px #000; }
.cam-rec { color: #ff4a3a; font-weight: 900; animation: blink 1.2s steps(2) infinite; }
.cam-motion { position: absolute; left: 26px; top: 192px; padding: 4px 12px; border-radius: 8px; background: rgba(120,0,0,.55);
  border: 2px solid #ff3b2a; color: #ffd2cc; font-weight: 900; font-size: 18px; letter-spacing: 2px; animation: blink .8s steps(2) infinite; white-space: nowrap; }
.cam-motion[hidden] { display: none; }
.cam-motion.stare { animation-duration: .25s; font-size: 22px; }
.cam-lost { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); padding: 10px 22px; background: rgba(0,0,0,.75); border: 2px solid rgba(255,255,255,.5);
  font-weight: 900; font-size: clamp(26px, 6vw, 54px); letter-spacing: 6px; color: #fff; white-space: nowrap; animation: blink 1s steps(2) infinite; }
.cam-lost[hidden] { display: none; }
/* the tablet's own buttons, along the bottom: the map, six cameras, put it down */
.cam-pad { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(640px, calc(100% - 16px)); pointer-events: auto;
  display: flex; gap: 8px; align-items: stretch; background: rgba(4,12,7,.84); border: 2px solid rgba(120,210,150,.55); border-radius: 14px; padding: 7px;
  box-shadow: 0 0 30px rgba(60,255,120,.12); }
#cam-map { width: 76px; height: 76px; flex: none; border-radius: 8px; border: 1px solid rgba(120,210,150,.35); align-self: center; }
.cam-btns { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cambtn { min-height: 52px; border-radius: 9px; border: 2px solid rgba(120,210,150,.45); background: rgba(10,34,18,.9); color: #c4f0cf; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px; touch-action: none; min-width: 0; }
.cambtn b { font-size: 19px; line-height: 1; }
.cambtn span { font-size: 10px; letter-spacing: 1px; opacity: .85; }
.cambtn.on { background: #7dffa2; color: #032; border-color: #c9ffd8; }
.cambtn.motion { border-color: #ff3b2a; box-shadow: 0 0 12px rgba(255,60,40,.7); }
.cambtn.motion:not(.on) { background: rgba(110,10,6,.85); color: #ffd2cc; animation: blink .8s steps(2) infinite; }
.cambtn.broken { opacity: .45; text-decoration: line-through; }
.cambtn:focus-visible, .cam-close:focus-visible { outline: 3px solid #ff5a3c; outline-offset: 2px; }
.cam-close { flex: none; width: 70px; border-radius: 10px; border: 2px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; touch-action: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 800 20px system-ui, sans-serif; padding: 2px; }
.cam-close span { font-size: 11px; }
.cam-close kbd { font-size: 10px; line-height: 14px; }
/* while you watch: no crosshair, no "E —" prompt (the tablet takes both trotters) */
body.watching .cross, body.watching #h-prompt, body.watching .stamina, body.watching #h-cams { display: none; }
body.watching .msg { top: 40%; }
.pill.camhint { font-size: 13px; opacity: .8; }
body.touchy .pill.camhint { display: none; }
#b-cams.on { border-color: #7dffa2; background: rgba(40,120,70,.55); }
/* four round buttons for fingers, two by two */
.buttons { display: grid; grid-template-columns: 64px 64px; }
@media (max-width: 600px) {
  .cam-btns { grid-template-columns: repeat(3, 1fr); }
  .cambtn { min-height: 46px; }
  #cam-map { width: 96px; height: 96px; }
  .cam-close { width: 58px; }
  .cam-corners i:nth-child(3), .cam-corners i:nth-child(4) { bottom: 136px; }
  .cam-head { top: 168px; left: 22px; font-size: 12px; }
  .cam-head b { font-size: 13px; }
  .cam-clock { top: 190px; left: 22px; right: auto; font-size: 12px; }
  .cam-motion { top: 214px; left: 22px; }
}

/* ---- 🏚️ night six, the haunted farmhouse ---- */
#fade { position: fixed; inset: 0; pointer-events: none; z-index: 9; background: #000; opacity: 0; }
.night.haunted { border-color: rgba(150,110,220,.75); background: linear-gradient(180deg, rgba(40,16,60,.8), rgba(12,4,20,.8)); }
.night.haunted .nn { color: #b58cff; }
.night.haunted:hover:not(:disabled) { background: linear-gradient(180deg, rgba(60,24,90,.85), rgba(20,8,32,.85)); }
.jobs { background: rgba(0,0,0,.55); border: 1px solid rgba(181,140,255,.35); border-radius: 10px; padding: 6px 10px; font-size: 13px; font-weight: 700; max-width: 270px; }
.jobs[hidden] { display: none; }
.jobs .job { padding: 2px 0; }
.jobs .job small { opacity: .6; font-weight: 600; }
.jobs .job.done { opacity: .5; text-decoration: line-through; }
.jobs .job.out { color: #ffe39a; animation: blink .8s steps(2) infinite; }
#h-hint[hidden] { display: none; }

/* ---- 🐗 the reverse night: the boar's hunt ---- */
.hunt { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; margin-top: 10px; text-align: left; padding: 12px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255,140,60,.75); background: linear-gradient(180deg, rgba(90,40,10,.78), rgba(30,10,4,.8)); color: #e8e2dc; font: inherit; }
.hunt:hover:not(:disabled) { background: linear-gradient(180deg, rgba(120,55,14,.85), rgba(40,14,6,.85)); }
.hunt:disabled { opacity: .45; cursor: not-allowed; }
.hunt:focus-visible { outline: 3px solid #ff5a3c; outline-offset: 2px; }
.hunt .hn { font-size: 12px; letter-spacing: 3px; color: #ff9a4a; font-weight: 900; }
.hunt .hm { grid-column: 1; font-weight: 900; font-size: 18px; }
.hunt .st { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: #f3d9a4; font-size: 17px; }
.hunt .st i { color: rgba(255,255,255,.18); font-style: normal; }
.hunt .hb { grid-column: 1 / span 2; font-size: 13px; opacity: .8; }
.hunt .hb i { display: block; font-style: normal; opacity: .75; margin-top: 2px; }
#dazzle { position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255,255,240,1) 0%, rgba(255,250,215,.96) 40%, rgba(255,235,170,.85) 100%); }
/* a boar's eyes: the edges of the world go a little red */
body.hunting #dread { opacity: 0 !important; }
body.hunting .cross { background: rgba(255,170,120,.5); }
@media (max-width: 520px) { .jobs { font-size: 11px; max-width: 200px; padding: 4px 8px; } .jobs .job small { display: none; } }
.pop { position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%); font-weight: 900; font-size: clamp(30px, 7vw, 64px); color: #ffcf6a; letter-spacing: 2px; white-space: nowrap;
  text-shadow: 0 3px 0 #3a0a00, 0 0 30px rgba(255,120,40,.8); opacity: 0; pointer-events: none; }
body.charging .cross { transform: scale(2.4); background: rgba(255,120,60,.8); }
body.charging #hud::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(255,200,150,.18) 80%, rgba(255,160,90,.35) 100%); }
/* 🐗 your own tusks, curling up at the bottom corners of a boar's eyes */
.tusks { display: none; }
body.hunting .tusks { display: block; position: absolute; inset: 0; pointer-events: none; }
.tusks i { position: absolute; bottom: -60px; width: 110px; height: 200px; border: 0 solid #e9dfc6; filter: drop-shadow(0 0 8px rgba(0,0,0,.9)); opacity: .92; }
.tusks i:first-child { left: 4%; border-right-width: 24px; border-radius: 0 100% 0 0; transform: rotate(14deg); }
.tusks i:last-child { right: 4%; border-left-width: 24px; border-radius: 100% 0 0 0; transform: rotate(-14deg); }

/* ---- 👂 v1.3: the Listener, stones and Silent Night ---- */
/* the noise meter: how loud you are right now (and how far that carries) */
.noise { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 8px;
  background: rgba(0,0,0,.55); border: 1px solid rgba(160,210,255,.25); border-radius: 12px; font-weight: 800; font-size: 13px; white-space: nowrap; transition: border-color .2s, box-shadow .2s; }
.noise[hidden] { display: none; }
.nz-ear { font-size: 17px; display: inline-block; }
.nz-bar { width: 120px; height: 10px; border-radius: 5px; background: rgba(255,255,255,.1); overflow: hidden; display: inline-block; }
.nz-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7fd0ff, #b6e6ff); transition: width .12s linear; }
.noise.lvl1 .nz-bar i { background: linear-gradient(90deg, #7fd0ff, #ffe37a); }
.noise.lvl2 .nz-bar i { background: linear-gradient(90deg, #ffbf4a, #ff8a3a); }
.noise.lvl3 .nz-bar i { background: linear-gradient(90deg, #ff6a3a, #ff2a2a); }
.noise.lvl3 .nz-txt { color: #ff9d8a; }
.noise.heard { border-color: #ff3b2a; box-shadow: 0 0 18px rgba(255,50,30,.55); }
.noise.heard .nz-ear { animation: earpop .35s ease-out infinite alternate; }
.noise.masked { border-color: rgba(200,200,255,.55); }
@keyframes earpop { to { transform: scale(1.35) rotate(-12deg); } }
/* 🤫 FREEZE: big, pulsing, and the edges of the world closing in */
.freeze { position: absolute; left: 50%; top: 13%; transform: translateX(-50%); text-align: center; pointer-events: none; z-index: 2; width: min(92vw, 560px); }
.freeze[hidden] { display: none; }
.freeze b { display: block; font-size: clamp(38px, 9vw, 80px); font-weight: 900; letter-spacing: 4px; color: #dff3ff;
  text-shadow: 0 0 28px rgba(120,190,255,.75), 0 3px 0 #000; animation: freezepulse 1.1s ease-in-out infinite; }
.freeze span { display: block; margin-top: 6px; font-weight: 800; font-size: clamp(14px, 2.4vw, 19px); color: #cfe6f5; text-shadow: 0 2px 4px #000; }
@keyframes freezepulse { 50% { opacity: .55; transform: scale(.96); } }
#hud:has(.freeze:not([hidden]))::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(0,8,20,.75) 85%, rgba(0,4,12,.95) 100%); }
/* 🪨 your stones */
.pill.stones { font-size: 14px; }
.pill.stones[hidden] { display: none; }
body.touchy .pill.stones kbd { display: none; }
#b-throw { position: relative; }
#b-throw[hidden] { display: none; }
#b-throw i { position: absolute; right: -2px; top: -2px; min-width: 20px; height: 20px; border-radius: 10px; background: #7fd0ff; color: #032; font: 900 12px/20px system-ui, sans-serif; font-style: normal; }
/* 🌫️ night seven's button: fog grey and cold blue */
.night.silent { border-color: rgba(150,190,220,.75); background: linear-gradient(180deg, rgba(40,52,64,.85), rgba(10,14,20,.85)); }
.night.silent .nn { color: #9fd0ff; }
.night.silent:hover:not(:disabled) { background: linear-gradient(180deg, rgba(56,72,88,.9), rgba(14,20,28,.9)); }
.night .bl i { display: block; font-style: normal; opacity: .8; margin-top: 2px; color: #cfe6f5; }
/* on a phone: the noise meter sits just above the walking stick (the thing that makes the noise) */
body.touchy .noise { left: 20px; bottom: 176px; transform: none; padding: 4px 9px 4px 6px; font-size: 11px; max-width: calc(100vw - 184px); }
body.touchy .nz-txt { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.touchy .nz-bar { width: 56px; }
body.hunting .noise { bottom: 60px; }
body.touchy.hunting .noise { bottom: 176px; }
/* (📹 while you watch the cameras, the meter sits above the tablet's buttons — its beeps are noises too) */
body.watching .noise { bottom: 108px; }
@media (max-width: 600px) { body.watching .noise { bottom: 150px; } }
body.touchy.watching .noise { bottom: 176px; }
body.watching #h-stones, body.watching #h-hint, body.watching #h-jobs { display: none; }

/* ---- ✨ v1.4: the Corn Maze, the Shadow, Custom Night, the gadgets, Endless Night ---- */
.newtag { display: inline-block; font-style: normal; font-size: 10px; letter-spacing: 1px; font-weight: 900; color: #1a0d00; background: #ffd34a; border-radius: 6px; padding: 1px 5px; margin-left: 4px; vertical-align: 2px; box-shadow: 0 0 10px rgba(255,200,60,.6); }
.new14 { text-align: center; margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: #ffe6a8; background: rgba(255,190,60,.08); border: 1px dashed rgba(255,200,80,.45); border-radius: 10px; padding: 6px 10px; }
.new14 b { color: #1a0d00; background: #ffd34a; border-radius: 5px; padding: 0 5px; margin-right: 4px; }
/* 🌽 night eight's button: corn gold */
.night.maze { border-color: rgba(220,180,70,.8); background: linear-gradient(180deg, rgba(64,52,14,.85), rgba(18,14,4,.85)); }
.night.maze .nn { color: #ffd34a; }
.night.maze:hover:not(:disabled) { background: linear-gradient(180deg, rgba(84,68,18,.9), rgba(24,18,6,.9)); }
/* 🎚️ ♾️ the two new ways to play, side by side (one above the other on a phone) */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
@media (max-width: 560px) { .modes { grid-template-columns: 1fr; } }
.mode { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; padding: 12px 14px; border-radius: 12px; cursor: pointer; color: #e8e2dc; font: inherit; min-width: 0; }
.mode:disabled { opacity: .45; cursor: not-allowed; }
.mode:focus-visible { outline: 3px solid #ff5a3c; outline-offset: 2px; }
.mode .hn { font-size: 12px; letter-spacing: 2px; font-weight: 900; }
.mode .hm { grid-column: 1; font-weight: 900; font-size: 17px; }
.mode .st { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: #f3d9a4; font-size: 17px; white-space: nowrap; }
.mode .st i { color: rgba(255,255,255,.18); font-style: normal; }
.mode .hb { grid-column: 1 / span 2; font-size: 13px; opacity: .8; }
.mode .hb i { display: block; font-style: normal; opacity: .8; margin-top: 2px; }
.mode.custom { border: 1px solid rgba(120,220,160,.7); background: linear-gradient(180deg, rgba(14,60,40,.8), rgba(4,20,12,.85)); }
.mode.custom .hn { color: #7dffb0; }
.mode.custom:hover:not(:disabled) { background: linear-gradient(180deg, rgba(20,80,52,.85), rgba(6,28,16,.9)); }
.mode.endless { border: 1px solid rgba(170,130,255,.75); background: linear-gradient(180deg, rgba(36,20,70,.82), rgba(10,4,24,.86)); }
.mode.endless .hn { color: #c7a6ff; }
.mode.endless:hover:not(:disabled) { background: linear-gradient(180deg, rgba(50,28,96,.88), rgba(14,6,32,.9)); }
/* the Custom Night screen: a row for each boar, − level + */
.clist { display: grid; gap: 8px; margin: 10px 0 4px; }
.crow { display: grid; grid-template-columns: 34px 1fr 48px 46px 48px; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.crow.off { opacity: .55; }
.crow.hot { border-color: rgba(255,90,60,.7); background: rgba(120,20,10,.3); }
.crow .ci { font-size: 24px; text-align: center; }
.crow .cn { min-width: 0; }
.crow .cn b { display: block; font-size: 15px; }
.crow .cn small { display: block; font-size: 12px; opacity: .72; }
.crow .clv { font-size: 24px; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; color: #f3d9a4; }
.crow.hot .clv { color: #ff8a6a; }
.cbtn { width: 48px; height: 48px; border-radius: 12px; border: 2px solid rgba(255,255,255,.3); background: rgba(0,0,0,.45); color: #fff; font: 900 26px/1 system-ui, sans-serif; cursor: pointer; }
.cbtn:disabled { opacity: .3; cursor: default; }
.cbtn:focus-visible { outline: 3px solid #ff5a3c; outline-offset: 2px; }
.presets .btn { font-size: 15px; padding: 10px 12px; }
.btn.maxall { background: linear-gradient(180deg, #ff7a1a, #b3200c); border-color: #ffb36a; text-shadow: 0 1px 0 #400; }
.cscore { text-align: center; margin: 12px 0 0; font-size: 16px; }
.cscore b { color: #ffd34a; font-size: 20px; }
.cscore .cst { color: #f3d9a4; letter-spacing: 2px; }
.cscore .cst i { color: rgba(255,255,255,.18); font-style: normal; }
.cscore small { display: block; opacity: .7; font-size: 13px; margin-top: 2px; }
@media (max-width: 420px) { .crow { grid-template-columns: 26px 1fr 44px 34px 44px; gap: 5px; padding: 5px 6px; } .cbtn { width: 44px; height: 44px; } .crow .cn small { font-size: 11px; } .crow .ci { font-size: 20px; } }
/* 🌽 the maze map, top right, under the jobs: torn paper */
.mazemap { width: 132px; height: 132px; border-radius: 8px; border: 1px solid rgba(214,192,140,.4); box-shadow: 0 0 14px rgba(0,0,0,.8); }
.mazemap[hidden] { display: none; }
.jobs .code { color: #ffd34a; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .mazemap { width: 104px; height: 104px; } }
/* 📸 ⏰ the gadgets */
.pill.gadget { font-size: 14px; }
.pill.gadget[hidden] { display: none; }
body.touchy .pill.gadget kbd { display: none; }
#photoflash { position: fixed; inset: 0; pointer-events: none; z-index: 8; opacity: 0; background: radial-gradient(ellipse at center, #fff 0%, rgba(240,248,255,.95) 45%, rgba(220,235,255,.8) 100%); }
.buttons button.gad { position: relative; }
.buttons button.gad[hidden] { display: none; }
.buttons button.gad i { position: absolute; right: -2px; top: -2px; min-width: 20px; height: 20px; border-radius: 10px; background: #ffd34a; color: #210; font: 900 12px/20px system-ui, sans-serif; font-style: normal; }
/* (seven round buttons are a lot for a phone held sideways: smaller, three across) */
@media (max-height: 520px) { .buttons { grid-template-columns: 54px 54px 54px; gap: 8px; } .buttons button { width: 54px; height: 54px; font-size: 22px; } }
/* 📹 while you watch the cameras, the gadgets (they cannot be used then) and the maze map step aside for the camera's name */
body.watching .pill.gadget, body.watching .mazemap { display: none; }