/* =========================================================
   Bear Island — public.css
   Wood UI everywhere. Post-it notes. Thick black outlines.
   Saturated scene art. Matches the in-game vocabulary.
   ========================================================= */

:root {
  color-scheme: light;

  /* Saturated scene palette */
  --sky:        #7ec0ec;
  --sky-d:      #4a9cd4;
  --ocean:      #2a78c8;
  --sand:       #f5c842;
  --sand-d:     #d4a020;
  --sand-l:     #ffdb6a;
  --forest:     #2a9a3a;
  --forest-d:   #1a6a26;
  --mountain:   #1a3a7a;
  --fire:       #ff6820;
  --red:        #c82020;
  --red-l:      #e84030;

  /* Wood UI palette — the in-game chrome */
  --wood-light:    #c89868;
  --wood-mid:      #9a6a3a;
  --wood-dark:     #6a4020;
  --wood-darker:   #3e2410;
  --wood-plank:    #b88854;
  --wood-grain:    rgba(60, 30, 10, .15);
  --wood-highlight:rgba(255, 230, 180, .12);

  /* Painted button tints — muted, tinted wood-washes like in-game chips */
  --tint-cream:    #e8ddc0;
  --tint-gray:     #c8c2b4;
  --tint-sage:     #9cbca8;
  --tint-teal:     #8aaeb4;
  --tint-warm:     #d4a878;

  /* Paper variants for post-its */
  --post-yellow:   #ffec6a;
  --post-pink:     #ffb6c8;
  --post-blue:     #aadcec;
  --post-cream:    #fff2c8;
  --post-green:    #c8e68a;

  --line:       #1a1008;   /* the thick black outline */
  --line-2:     #2a1a10;
  --text:       #1a1008;
  --text-l:     #ffffff;
  --text-soft:  #4a3620;

  /* Structure */
  --outline:     3px solid var(--line);
  --outline-h:   4px solid var(--line);
  --r:    10px 14px 11px 13px;
  --r2:   14px 18px 15px 17px;
  --ease: cubic-bezier(.34, 1.3, .64, 1);
  --dur:  220ms;

  /* Type */
  --font-h:    'Bangers', cursive;
  --font-hw:   'Caveat', cursive;
  --font-mono: 'Courier New', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--line-2);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
html.scroll, html.scroll body { overflow: auto; height: auto; }

a { color: var(--wood-dark); text-decoration: none; }

/* =========================================================
   WOOD SURFACE — the shared painted-plank texture
   Warm amber, vertical grain only, no crosshatch grids.
   Matches the game's login header and in-game taskbar.
   ========================================================= */
.wood {
  background-color: #7a4a22;
  background-image:
    /* Fine vertical grain streaks — thin dark lines running top-to-bottom */
    repeating-linear-gradient(180deg,
      rgba(40, 20, 5, .22) 0, rgba(40, 20, 5, .22) 1px,
      transparent 1px, transparent 4px
    ),
    /* Wider vertical tonal bands — the subtle warm highlights */
    repeating-linear-gradient(180deg,
      rgba(200, 140, 80, .12) 0, rgba(200, 140, 80, .12) 2px,
      transparent 2px, transparent 11px
    ),
    /* Base amber gradient — richer at top, deeper at bottom */
    linear-gradient(180deg,
      #8e5a2a 0%,
      #7a4820 50%,
      #5e3414 100%
    );
  box-shadow: inset 0 2px 8px rgba(255, 220, 160, .08), inset 0 -3px 10px rgba(20, 10, 2, .3);
}

/* =========================================================
   THE STAGE — scene framed with black letterbox bars
   Matches the in-game playfield exactly
   ========================================================= */
.stage {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--line-2);   /* the black letterbox */
}

.scene {
  flex: 1;
  position: relative;
  overflow: hidden;
  background-image: url('/assets/background.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: var(--sky);
  min-height: 0;
}

/* =========================================================
   (Top bar removed — pages use only a bottom taskbar now)
   ========================================================= */

/* =========================================================
   (wood-pin/.brand/.status classes removed —
    taskbar uses .tb-* classes mirroring the game's styles.css)
   ========================================================= */

/* =========================================================
   TASKBAR — mirrors /styles.css #taskbar exactly
   Horizontal plank grain, 3-column grid, 60px tall, 5px black top border
   ========================================================= */
.taskbar {
  flex-shrink: 0;
  height: 60px;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding: 0 14px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background-color: #3A2010;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.18) 0px, rgba(0,0,0,.18) 2px,
      transparent 2px, transparent 10px,
      rgba(0,0,0,.1) 10px, rgba(0,0,0,.1) 11px,
      transparent 11px, transparent 20px,
      rgba(255,255,255,.04) 20px, rgba(255,255,255,.04) 21px,
      transparent 21px, transparent 28px
    );
  border-top: 5px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
}

.tb-left {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  min-width: 0;
}
.tb-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.tb-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

/* ── BEAR ISLAND BRAND — carved sign plate ──────────────── */
.tb-brand {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-h); font-size: 1.2rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: #F5C842;  /* sand */
  text-shadow: 1px 1px 0 rgba(0,0,0,.7);
  white-space: nowrap; user-select: none;
  text-decoration: none;
  background-color: #5C3A1A;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.18) 0px, rgba(0,0,0,.18) 2px,
      transparent 2px, transparent 9px,
      rgba(0,0,0,.1) 9px, rgba(0,0,0,.1) 10px,
      transparent 10px, transparent 18px
    );
  border: 3px solid var(--line);
  border-radius: 4px 6px 5px 3px;
  padding: 4px 10px 4px 6px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.5);
  flex-shrink: 0;
  transform: rotate(-0.4deg);
  transition: transform .1s, box-shadow .1s;
}
.tb-brand:hover {
  transform: rotate(-0.4deg) translate(-1px,-1px);
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
  color: #F5C842;
  text-decoration: none;
}
.tb-brand:active {
  transform: rotate(-0.4deg) translate(1px,1px);
  box-shadow: 2px 2px 0 rgba(0,0,0,.5);
}
.tb-brand img {
  width: 28px; height: 28px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.4));
}

/* ── NAV BUTTONS — painted wooden signs ──────────────────── */
.tb-btn {
  display: inline-flex; align-items: center;
  gap: 6px; padding: 6px 12px;
  border: 3px solid var(--line);
  border-radius: 7px 10px 8px 6px;
  font-family: var(--font-h); font-size: .9rem;
  letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
  transition: transform .1s, box-shadow .1s, filter .1s;
  white-space: nowrap; flex-shrink: 0;
  text-decoration: none;
}
.tb-btn:hover  { transform: translate(-1px,-2px); box-shadow: 5px 5px 0 rgba(0,0,0,.65); text-decoration: none; }
.tb-btn:active { transform: translate(2px,2px);   box-shadow: 1px 1px 0 rgba(0,0,0,.65); }
.tb-btn i { font-size: .78rem; }

/* Each button has a slight random rotation — hand-painted feel */
.tb-btn.r-1 { transform: rotate(-0.5deg); border-radius: 8px 11px 9px 7px; }
.tb-btn.r-2 { transform: rotate( 0.4deg); border-radius: 6px 9px 10px 7px; }
.tb-btn.r-3 { transform: rotate(-0.3deg); border-radius: 9px 7px 11px 8px; }
.tb-btn.r-1:hover  { transform: rotate(-0.5deg) translate(-1px,-2px); }
.tb-btn.r-2:hover  { transform: rotate( 0.4deg) translate(-1px,-2px); }
.tb-btn.r-3:hover  { transform: rotate(-0.3deg) translate(-1px,-2px); }
.tb-btn.r-1:active { transform: rotate(-0.5deg) translate(2px,2px); }
.tb-btn.r-2:active { transform: rotate( 0.4deg) translate(2px,2px); }
.tb-btn.r-3:active { transform: rotate(-0.3deg) translate(2px,2px); }

/* Painted wood color variants — exact recipe from styles.css */
.tb-sand {
  background-color: #D4A820;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.12) 0px, rgba(0,0,0,.12) 2px,
      transparent 2px, transparent 9px,
      rgba(0,0,0,.07) 9px, rgba(0,0,0,.07) 10px,
      transparent 10px, transparent 18px);
  color: var(--line);
}
.tb-green {
  background-color: #3CB847;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.14) 0px, rgba(0,0,0,.14) 2px,
      transparent 2px, transparent 8px,
      rgba(0,0,0,.08) 8px, rgba(0,0,0,.08) 9px,
      transparent 9px, transparent 16px);
  color: var(--line);
}
.tb-map {
  background-color: #8B6020;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.14) 0px, rgba(0,0,0,.14) 2px,
      transparent 2px, transparent 9px,
      rgba(0,0,0,.08) 9px, rgba(0,0,0,.08) 10px,
      transparent 10px, transparent 18px);
  color: #FFFDF4;
}
.tb-purple {
  background-color: #5A2490;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.2) 0px, rgba(0,0,0,.2) 2px,
      transparent 2px, transparent 9px,
      rgba(0,0,0,.12) 9px, rgba(0,0,0,.12) 10px,
      transparent 10px, transparent 17px);
  color: #FFFDF4;
}
.tb-campfire {
  background-color: #E07800;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 2px,
      transparent 2px, transparent 9px,
      rgba(0,0,0,.09) 9px, rgba(0,0,0,.09) 10px,
      transparent 10px, transparent 17px);
  color: var(--line);
}

/* ── CHIPS — status pills on the right, exact recipe ────── */
.tb-chip {
  display: flex; align-items: center;
  gap: 4px; padding: 4px 9px;
  border: 2px solid rgba(255,200,80,.25);
  border-radius: 7px 10px 8px 6px;
  background: rgba(0,0,0,.3);
  font-family: var(--font-h); font-size: .85rem;
  letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,225,140,.9); white-space: nowrap; user-select: none;
  text-decoration: none;
  transition: transform .1s, box-shadow .1s;
}
.tb-chip-gold { background: rgba(180,130,0,.3); border-color: #F5C842; color: #F5C842; }
.tb-chip-sky  { background: rgba(80,140,200,.2); border-color: rgba(150,210,255,.35); color: #C8EEFF; }

/* Make it interactive when it's a link */
a.tb-chip:hover {
  transform: translate(-1px,-1px);
  box-shadow: 2px 2px 0 rgba(0,0,0,.35);
  text-decoration: none;
  color: inherit;
}

.crew-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #F5A623;
  border: 1px solid rgba(0,0,0,.4);
  box-shadow: 0 0 5px rgba(245,166,35,.8);
  animation: pulse 2.4s ease-in-out infinite; flex-shrink: 0;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 5px rgba(245,166,35,.8); }
  50%     { box-shadow: 0 0 12px rgba(245,166,35,.3); }
}

/* Separator */
.tb-sep {
  width: 2px; height: 26px;
  background: rgba(255,200,80,.18);
  border-left: 1px solid rgba(255,200,80,.08);
  flex-shrink: 0; margin: 0 3px;
}
.taskbar-spacer { flex: 1; }

@media (max-width: 820px) {
  .taskbar .info-only { display: none; }
  .taskbar-spacer { display: none; }
}

/* =========================================================
   POST-IT — the handwritten square note vocabulary
   All yellow. Variety from rotation only.
   ========================================================= */
.post-it {
  display: inline-block;
  background: var(--post-yellow);
  padding: 14px 14px 16px;
  box-shadow:
    2px 3px 0 rgba(0, 0, 0, .15),
    4px 6px 10px rgba(0, 0, 0, .25);
  border: 2px solid var(--line);
  border-radius: 2px;
  text-decoration: none;
  color: var(--text);
  position: relative;
  transform: rotate(-2deg);
  transition: transform var(--dur) var(--ease);
  font-family: var(--font-hw);
}
.post-it:hover {
  transform: rotate(-1deg) translateY(-3px);
  text-decoration: none;
  color: var(--text);
}
.post-it.r-pos { transform: rotate(2deg); }
.post-it.r-pos:hover { transform: rotate(1deg) translateY(-3px); }
/* Blue variant — used for permanent/system notices to distinguish from bulletins */
.post-it.blue { background: var(--post-blue); }
/* Red pushpin at top */
.post-it.pinned::before {
  content: '';
  position: absolute;
  top: -9px; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff5a40 0%, #b81818 55%, #5a0808 100%);
  border: 2px solid var(--line);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
  z-index: 3;
}
.post-it-label {
  display: block;
  font: 500 .62rem var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text);
  opacity: .55;
  margin-bottom: 5px;
}
.post-it-title {
  font: 1.3rem/1.15 var(--font-hw);
  font-weight: 700;
  color: var(--text);
}
.post-it-body {
  font: 1.05rem/1.4 var(--font-hw);
  color: var(--text);
  margin-top: 4px;
}
.post-it-date {
  display: block;
  margin-top: 8px;
  font: .72rem/1 var(--font-mono);
  color: var(--text);
  opacity: .5;
}

/* =========================================================
   POST-IT POPUP — click a post-it, see its bulletin in a modal.
   Same togglePanel feel as the in-game panels.
   ========================================================= */
.postit-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(20, 10, 2, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}
.postit-modal.open {
  display: flex;
  animation: modal-fade 220ms var(--ease);
}
@keyframes modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.postit-card {
  background: var(--post-yellow);
  border: 3px solid var(--line);
  border-radius: 3px;
  padding: 28px 32px 30px;
  max-width: 520px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  cursor: default;
  box-shadow:
    4px 6px 0 rgba(0, 0, 0, .3),
    8px 14px 24px rgba(0, 0, 0, .5);
  animation: postit-pop 320ms var(--ease);
}
@keyframes postit-pop {
  0%   { transform: rotate(-4deg) scale(.6); opacity: 0; }
  60%  { transform: rotate(1deg) scale(1.03); opacity: 1; }
  100% { transform: rotate(0deg) scale(1); opacity: 1; }
}

/* Red pushpin at top center */
.postit-card::before {
  content: '';
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff5a40 0%, #b81818 55%, #5a0808 100%);
  border: 2px solid var(--line);
  box-shadow: 0 3px 4px rgba(0, 0, 0, .6);
  z-index: 3;
}

/* X close button on the post-it */
.postit-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 2.5px solid var(--line);
  border-radius: 6px 9px 7px 8px;
  background: var(--red);
  color: #fff;
  font: 700 1.1rem var(--font-sans);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0 var(--line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  z-index: 4;
}
.postit-x:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--line);
  background: var(--red-l);
}
.postit-x:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--line);
}

.postit-card-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1.5px dashed rgba(100, 60, 10, .35);
}
.postit-card-ver {
  font: .7rem/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  opacity: .7;
  padding: 3px 9px;
  background: rgba(0, 0, 0, .08);
  border-radius: 3px;
}
.postit-card-date {
  font: .82rem/1 var(--font-mono);
  color: var(--text);
  opacity: .55;
  margin-left: auto;
}
.postit-card-title {
  font: 1.7rem/1.2 var(--font-h);
  letter-spacing: .04em;
  color: var(--text);
  margin-bottom: 14px;
  padding-right: 36px;  /* room for X */
}
.postit-card-body {
  font: 1.2rem/1.55 var(--font-hw);
  color: var(--text);
  white-space: pre-wrap;
}
.postit-card-body p { margin-bottom: 10px; }
.postit-card-body p:last-child { margin-bottom: 0; }

/* =========================================================
   SCATTERED POST-IT CLUSTER — top-right of scene
   Multiple post-its fan out, each clickable, each opens modal
   ========================================================= */
.postit-cluster {
  position: absolute;
  top: 26px;
  right: 28px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 240px;
}
.postit-cluster .post-it {
  display: block;
  cursor: pointer;
}
/* Alternate rotations so the cluster feels hand-placed */
.postit-cluster .post-it:nth-child(5n+1) { transform: rotate(2.5deg); }
.postit-cluster .post-it:nth-child(5n+2) { transform: rotate(-1.5deg); }
.postit-cluster .post-it:nth-child(5n+3) { transform: rotate(1deg); }
.postit-cluster .post-it:nth-child(5n+4) { transform: rotate(-2deg); }
.postit-cluster .post-it:nth-child(5n+5) { transform: rotate(.8deg); }
.postit-cluster .post-it:hover {
  transform: rotate(0) translateY(-3px) scale(1.02);
}

@media (max-width: 640px) {
  .postit-cluster { display: none; }
  .postit-x { top: 8px; right: 8px; }
  .postit-card { padding: 24px 20px 24px; }
  .postit-card-title { font-size: 1.4rem; padding-right: 32px; }
}

/* Info popup variant — First Season recap, blue paper */
.postit-card.info-card {
  background: var(--post-blue);
}

/* Build story popup — distinct "about the author" treatment
   Cream paper with a subtle gold accent line, slightly different shape */
.postit-card.build-card {
  background: #fdf4dc;
  max-width: 560px;
  border-color: var(--line);
}
.postit-card.build-card::before {
  background: radial-gradient(circle at 35% 30%, #ffd788 0%, #d4a020 55%, #6a4d08 100%);
}
.postit-card.build-card .postit-card-ver {
  background: rgba(196, 146, 20, .18);
  color: #6a4d08;
}
.postit-card.build-card .postit-card-title {
  font-family: var(--font-h);
  letter-spacing: .04em;
  font-size: 1.9rem;
}
.postit-card.build-card .postit-card-body {
  font-family: var(--font-sans);
  font-size: .95rem;
  line-height: 1.6;
}
.postit-card.build-card .postit-card-body p {
  margin-bottom: 12px;
}
.postit-card.build-card .postit-card-body a {
  color: #8a5a0a;
  border-bottom: 1px dashed currentColor;
}
.postit-card.build-card .postit-card-body a:hover {
  color: #6a4208;
  text-decoration: none;
}
.build-list {
  list-style: none;
  margin: 8px 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.build-list li {
  padding-left: 18px;
  position: relative;
  font-size: .92rem;
  line-height: 1.55;
}
.build-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  top: 0;
  color: #8a5a0a;
  font-weight: 700;
}
.build-list strong {
  color: var(--text);
  font-weight: 600;
}
.build-signoff {
  margin-top: 16px;
  font-family: var(--font-hw);
  font-size: 1.2rem;
  color: var(--text);
  opacity: .75;
}

/* tb-brand as a button — reset native button styles */
button.tb-brand {
  font-family: var(--font-h);
  cursor: pointer;
}
/* tb-chip as a button — reset native button styles, inherit chip look */
button.tb-chip {
  font-family: var(--font-h);
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}
button.tb-chip:hover {
  transform: translate(-1px,-1px);
  box-shadow: 2px 2px 0 rgba(0,0,0,.35);
}
.map-frame {
  display: block;
  position: relative;
  background-color: var(--wood-light);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(60, 30, 10, .08) 0, rgba(60, 30, 10, .08) 1px,
      transparent 1px, transparent 6px),
    repeating-linear-gradient(90deg,
      rgba(200, 150, 95, .18) 0, rgba(200, 150, 95, .18) 2px,
      transparent 2px, transparent 13px),
    linear-gradient(180deg, #d4a878 0%, #a87548 100%);
  padding: 7px;
  border: var(--outline);
  border-radius: 4px 6px 5px 7px;
  box-shadow: 0 4px 0 var(--line), 0 6px 14px rgba(0, 0, 0, .3);
  transition: transform var(--dur) var(--ease);
  text-decoration: none;
  overflow: hidden;
}
.map-frame:hover {
  transform: translateY(-3px) rotate(-1deg);
  text-decoration: none;
}
.map-frame img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--line);
  border-radius: 2px;
}
.map-frame .map-label {
  display: block;
  text-align: center;
  font: .78rem/1 var(--font-h);
  letter-spacing: .1em;
  color: var(--text-l);
  padding: 6px 0 3px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
/* Mini caution tape across the map — diegetic "restricted" */
.map-frame::before,
.map-frame::after {
  content: '';
  position: absolute;
  left: -25%;
  width: 150%;
  height: 13px;
  background: repeating-linear-gradient(-50deg,
    #F5C842 0px, #F5C842 8px,
    var(--line) 8px, var(--line) 14px);
  border-top: 1.5px solid var(--line);
  border-bottom: 1.5px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  z-index: 2;
  pointer-events: none;
}
.map-frame::before {
  top: 28%;
  transform: rotate(-6deg);
}
.map-frame::after {
  top: 56%;
  transform: rotate(5deg);
}

/* =========================================================
   SCENE POSITIONING helpers
   ========================================================= */
.in-scene {
  position: absolute;
  z-index: 10;
}
.bear-hero {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  height: clamp(220px, 55%, 480px);
  width: auto;
  z-index: 11;
  filter:
    drop-shadow(0 6px 0 rgba(0, 0, 0, .22))
    drop-shadow(0 12px 22px rgba(0, 0, 0, .28));
  animation: bear-sway 4.5s ease-in-out infinite;
  transform-origin: 50% 95%;
  pointer-events: none;
}
@keyframes bear-sway {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  50%      { transform: translateX(-50%) rotate(1deg); }
}

@media (max-width: 640px) {
  .in-scene.hide-mobile { display: none; }
}