/* [storymap] Story Mode's map (storymap.js; the apps' StoryMap.swift). The map's own colours on top of game.css's tokens. */
:root { --sm-grass: #D3EAC6; --sm-tree: #8CC48F; --sm-water: #C3E0F4; --sm-road: #E2DACB; --sm-sand: #F6E3B4; --sm-pent: #FCE7B8;
  --sm-flat: #FFEFD8; --sm-roof2: #D8CBB4; --sm-wall2: #EFE6D6; --sm-pool: #A9CF7A; }
:root[data-theme="dark"] { --sm-grass: #2D4433; --sm-tree: #3F6E4E; --sm-water: #27445C; --sm-road: #3A3440; --sm-sand: #4F4430; --sm-pent: #4A3B17;
  --sm-flat: #33293A; --sm-roof2: #4A4038; --sm-wall2: #3B3530; --sm-pool: #3E5A2A; }

#s-levels.sm-on .panel { max-width: 1240px; }
#s-levels .panel-head { flex-wrap: wrap; }
.sm-switch { margin-left: auto; display: inline-flex; padding: 3px; border: 3px solid var(--ink); border-radius: 999px; background: var(--paper); }
.sm-switch button { border: 0; background: none; border-radius: 999px; padding: 0 12px; min-height: 36px; font-size: 14px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.sm-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.sm-frame { position: relative; margin: 0 auto; max-width: 100%; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--shadow); background: var(--paper); overflow: hidden; }
.sm-view { overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior: contain; scrollbar-width: none; }
.sm-view::-webkit-scrollbar { display: none; }
.sm-map { position: relative; }
.sm-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sm-chap, .sm-label { position: absolute; white-space: nowrap; pointer-events: none; }
.sm-chap { transform: translateY(-50%); background: var(--ink); color: var(--paper); border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.sm-label { transform: translate(-50%, -50%); background: color-mix(in srgb, var(--paper) 88%, transparent); border-radius: 999px; padding: 1px 6px; font-size: 12px; font-weight: 800; color: var(--ink); }

.sm-pin { position: absolute; width: var(--d, 40px); height: var(--d, 40px); transform: translate(-50%, -50%); padding: 0; border-radius: 50%;
  border: max(2px, calc(var(--d, 40px) * .07)) solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 0 calc(var(--d, 40px) * .08) 0 var(--shadow);
  display: grid; place-items: center; font-weight: 900; font-size: calc(var(--d, 40px) * .44); line-height: 1; }
.sm-pin::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; } /* (a 44-point target on a small pin) */
.sm-pin:active { transform: translate(-50%, calc(-50% + 3px)); box-shadow: none; }
.sm-next { background: var(--gold); color: #1D1A1F; }
.sm-next::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 5px solid var(--gold); animation: sm-pulse 1.3s ease-out infinite; pointer-events: none; }
@keyframes sm-pulse { from { transform: scale(1); opacity: .95; } to { transform: scale(1.6); opacity: 0; } }
.sm-locked { background: var(--line); border-color: var(--muted); color: var(--muted); box-shadow: none; cursor: default; font-size: calc(var(--d, 40px) * .36); }
.sm-paw { position: absolute; right: -24%; top: -22%; font-size: calc(var(--d, 40px) * .3); }
.sm-stars { position: absolute; top: 100%; left: 50%; transform: translate(-50%, calc(var(--d, 40px) * .1)); display: flex; background: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 999px; padding: 0 calc(var(--d, 40px) * .1); font-size: calc(var(--d, 40px) * .3); line-height: 1.25; }
.sm-stars i { font-style: normal; color: var(--line); }
.sm-stars i.on { color: var(--gold); }
body.pad .sm-pin:focus-visible, .sm-pin:focus-visible { outline: 4px solid var(--gold); outline-offset: 5px; }

.sm-zoom { display: none; flex: none; gap: 8px; }
.sm-zoomable .sm-zoom { display: flex; }
.sm-zbtn { width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--paper); font-size: 22px; font-weight: 900; line-height: 1; padding: 0 0 2px; }
.sm-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.sm-legend { flex: 1; font-size: 13px; font-weight: 600; color: var(--muted); }
.sm-surv { width: auto; flex: none; padding: 10px 14px; }

@media (prefers-reduced-motion: reduce) { .sm-next::before { animation: none; transform: scale(1.18); opacity: .9; } }