*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  background:linear-gradient(150deg,#263b50,#101c28);
  font-family:Georgia,serif;
  color:#17202a;
  padding:28px 14px
}
main{max-width:800px;margin:auto}
header{
  color:#f5efe2;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:18px
}
h1{font-size:60px;letter-spacing:.2em;margin:0}
small{letter-spacing:.08em}
.progress{display:grid;gap:4px;text-align:right}
#lineLabel{font-size:20px;color:#f3d890}
#lives{color:#e5c66f;letter-spacing:.08em}
.panel{
  background:#f2eee2;
  border-radius:18px;
  padding:22px;
  box-shadow:0 20px 55px #0006
}
.rules{text-align:center;margin-top:0}
.toolbar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px}
button{
  padding:10px 14px;
  border-radius:20px;
  border:1px solid #999;
  background:#ebe5d8;
  font-weight:bold;
  cursor:pointer
}
.primary{background:#213448;color:white}
#board{
  width:min(580px,100%);
  aspect-ratio:1;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  border:3px solid #213448
}
.cell{
  position:relative;
  border:1px solid #26313a33;
  display:grid;
  place-items:center;
  cursor:pointer;
  user-select:none
}
.r0{background:#d8cbc8}
.r1{background:#cfd7cf}
.r2{background:#d8d0bb}
.r3{background:#c9d2d7}
.r4{background:#ddd5c8}
.r5{background:#d3cfdb}
.T{border-top:3px solid #213448}
.B{border-bottom:3px solid #213448}
.L{border-left:3px solid #213448}
.R{border-right:3px solid #213448}

/* Rune is explicit child content, not a pseudo-element */
.rune{
  position:relative;
  z-index:1;
  font-size:clamp(28px,7vw,50px);
  font-weight:700;
  color:#4a4f50;
  opacity:.55;
  text-shadow:0 1px 0 #fff8;
  transition:.2s
}
.cell.question::after{
  content:'?';
  position:absolute;
  z-index:3;
  font-size:34px;
  color:#1c2430aa
}
.cell.awake .rune{
  color:#f2cd70;
  opacity:1;
  transform:scale(1.12);
  text-shadow:
    0 0 5px #fff3b8,
    0 0 13px #e4ad45,
    0 0 28px #c39443
}
.cell.awake{
  box-shadow:inset 0 0 20px #d7a43c55
}
.cell.solution .rune{
  color:#f2cd70;
  opacity:1;
  text-shadow:0 0 8px #fff,0 0 20px #d9a53e
}
.cell.celebrate .rune{
  animation:pulse .65s ease-in-out 2
}
.cell.mistake{
  animation:shake .25s linear 2;
  box-shadow:inset 0 0 0 4px rgba(145,55,55,.45)
}
@keyframes pulse{50%{transform:scale(1.3);filter:brightness(1.6)}}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
#coverage{text-align:center;color:#59646a}
.willow{text-align:center;color:#eee2cf}
.continue-wrap{display:flex;justify-content:center;margin-top:16px}
.hidden{display:none!important}
.keeper-offer{
  position:fixed;
  inset:0;
  background:#0d1722cc;
  display:grid;
  place-items:center;
  padding:20px;
  z-index:20
}
.keeper-card{
  width:min(420px,100%);
  background:#f2eee2;
  color:#17202a;
  border-radius:18px;
  padding:24px;
  text-align:center;
  box-shadow:0 20px 60px #0008
}

.cell.wrong::after{
  content:'×';
  position:absolute;
  z-index:4;
  font-family:Arial,sans-serif;
  font-size:clamp(30px,7vw,48px);
  font-weight:800;
  color:#b52828;
  text-shadow:0 1px 0 #fff8;
}

.board-wrap{
  position:relative;
  width:min(580px,100%);
  margin:auto;
}
.board-wrap #board{
  width:100%;
}

.continue-overlay{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:12;
  min-width:min(330px,78%);
  padding:18px 28px;
  font-size:20px;
  border-radius:999px;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
  border:2px solid #e2c474;
  background:#213448;
  color:#fff7e5;
}

.rune-line{
  width:min(580px,100%);
  margin:18px auto 4px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:0;
  align-items:center;
  position:relative;
}
.rune-line::before{
  content:'';
  position:absolute;
  left:7%;
  right:7%;
  top:50%;
  height:3px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,rgba(195,154,82,.18),rgba(195,154,82,.7),rgba(195,154,82,.18));
  box-shadow:0 0 10px rgba(195,154,82,.35);
  z-index:0;
}
.line-slot{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  min-height:54px;
}
.line-rune{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#d9d1c2;
  border:2px solid #8d877d;
  color:#6d6d68;
  font-size:27px;
  font-weight:700;
  box-shadow:0 3px 8px rgba(0,0,0,.12);
}
.line-rune.filled{
  background:#344451;
  color:#f2cd70;
  border-color:#d6b45d;
  text-shadow:0 0 5px #fff3b8,0 0 13px #e4ad45;
  box-shadow:0 0 12px rgba(195,154,82,.55);
}
@keyframes dropIntoLine{
  0%{transform:translateY(-24px) scale(.82);opacity:0}
  100%{transform:translateY(0) scale(1);opacity:1}
}

/* v0.6 visual skin — carved rounded stones */
:root{
  --r0:#66d7ff;
  --r1:#8cf0b0;
  --r2:#ffd66b;
  --r3:#c59cff;
  --r4:#ff8fa3;
  --r5:#ffad66;
}
body{
  background:
    radial-gradient(circle at 50% 15%,rgba(91,126,151,.28),transparent 32%),
    linear-gradient(155deg,#1c3144 0%,#0d1823 68%,#09121a 100%);
}
.panel{
  background:linear-gradient(145deg,#eee9dc,#d9d2c2);
  border:1px solid rgba(255,255,255,.42);
}
#board{
  gap:4px;
  padding:5px;
  border:0;
  border-radius:18px;
  background:#172633;
  box-shadow:inset 0 0 28px #0008,0 12px 28px #0004;
}
.cell{
  border:0!important;
  border-radius:13px;
  background:
    radial-gradient(circle at 30% 24%,rgba(255,255,255,.16),transparent 24%),
    linear-gradient(145deg,#777a76,#4d5352 55%,#383e3e);
  box-shadow:
    inset 2px 2px 2px rgba(255,255,255,.18),
    inset -3px -4px 5px rgba(0,0,0,.35),
    0 2px 4px rgba(0,0,0,.35);
}
.cell::before{
  content:'';
  position:absolute;
  inset:5px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.07);
  pointer-events:none;
}
.rune{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(27px,7vw,48px);
  color:#242b2c;
  opacity:.72;
  text-shadow:0 1px 1px rgba(255,255,255,.18),0 -1px 1px rgba(0,0,0,.55);
}
.rune[data-rune="0"]{--glow:var(--r0)}
.rune[data-rune="1"]{--glow:var(--r1)}
.rune[data-rune="2"]{--glow:var(--r2)}
.rune[data-rune="3"]{--glow:var(--r3)}
.rune[data-rune="4"]{--glow:var(--r4)}
.rune[data-rune="5"]{--glow:var(--r5)}
.cell.awake .rune{
  color:var(--glow);
  opacity:1;
  transform:scale(1.12);
  text-shadow:0 0 4px #fff,0 0 11px var(--glow),0 0 24px var(--glow);
}
.cell.awake{
  box-shadow:
    inset 2px 2px 2px rgba(255,255,255,.2),
    inset -3px -4px 5px rgba(0,0,0,.35),
    0 0 8px rgba(255,255,255,.12);
}
.cell.question::after{color:#e9dfc6;text-shadow:0 2px 3px #000}
.cell.wrong::after{color:#ff4e55;text-shadow:0 0 8px rgba(255,40,45,.55),0 2px 2px #000}

/* region identity is now a subtle edge tint rather than flat coloured tiles */
.cell.r0{outline:1px solid color-mix(in srgb,var(--r0) 22%,transparent)}
.cell.r1{outline:1px solid color-mix(in srgb,var(--r1) 22%,transparent)}
.cell.r2{outline:1px solid color-mix(in srgb,var(--r2) 22%,transparent)}
.cell.r3{outline:1px solid color-mix(in srgb,var(--r3) 22%,transparent)}
.cell.r4{outline:1px solid color-mix(in srgb,var(--r4) 22%,transparent)}
.cell.r5{outline:1px solid color-mix(in srgb,var(--r5) 22%,transparent)}

.line-rune.filled:nth-child(n){background:#344451}
.line-slot:nth-child(1) .line-rune.filled{color:var(--r0);border-color:var(--r0)}
.line-slot:nth-child(2) .line-rune.filled{color:var(--r1);border-color:var(--r1)}
.line-slot:nth-child(3) .line-rune.filled{color:var(--r2);border-color:var(--r2)}
.line-slot:nth-child(4) .line-rune.filled{color:var(--r3);border-color:var(--r3)}
.line-slot:nth-child(5) .line-rune.filled{color:var(--r4);border-color:var(--r4)}
.line-slot:nth-child(6) .line-rune.filled{color:var(--r5);border-color:var(--r5)}

.willow-panel{
  margin:18px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  color:#eee2cf;
}
.willow{
  margin:0;
  max-width:520px;
  padding:12px 16px;
  border-radius:16px 16px 16px 4px;
  background:rgba(238,233,220,.09);
  border:1px solid rgba(238,233,220,.13);
  font-style:italic;
}
.willow-cat{
  width:82px;height:74px;position:relative;flex:0 0 82px;
}
.willow-cat .face{
  position:absolute;left:16px;top:12px;width:50px;height:44px;
  border-radius:48% 48% 44% 44%;
  background:#e9e2d2;
  box-shadow:0 5px 12px #0004;
}
.willow-cat .face::before{
  content:'';position:absolute;inset:5px 7px 9px;
  border-radius:50% 50% 45% 45%;
  background:#7b7c83;
}
.willow-cat .ear{
  position:absolute;top:3px;width:25px;height:29px;background:#777881;
  clip-path:polygon(50% 0,100% 100%,0 100%);z-index:0
}
.willow-cat .ear.left{left:14px;transform:rotate(-14deg)}
.willow-cat .ear.right{right:14px;transform:rotate(14deg)}
.willow-cat .eye{
  position:absolute;top:20px;width:5px;height:6px;border-radius:50%;
  background:#8fd7e7;z-index:2;box-shadow:0 0 3px #c9f6ff
}
.willow-cat .e1{left:16px}.willow-cat .e2{right:16px}
.willow-cat .nose{
  position:absolute;left:23px;top:29px;width:5px;height:4px;border-radius:50%;background:#3e3a3f;z-index:2
}
.willow-cat .chest{
  position:absolute;left:27px;top:49px;width:30px;height:24px;border-radius:50% 50% 35% 35%;
  background:#e9e2d2
}
.willow-cat .tail{
  position:absolute;right:-1px;bottom:3px;width:38px;height:15px;border-radius:60% 70% 70% 30%;
  background:#777881;transform:rotate(-18deg);transform-origin:left center
}
@media(max-width:560px){
  header{align-items:flex-start}
  h1{font-size:42px}
  .willow-panel{align-items:flex-end}
  .willow-cat{transform:scale(.86);transform-origin:bottom center}
}

/* v0.6.1 — THE STORM */

/* Regions own the stone colour; magic itself is ember-gold. */
.cell.r0{
  background:radial-gradient(circle at 30% 24%,#ffffff35,transparent 24%),linear-gradient(145deg,#8dd6fa,#429fca 58%,#286b92);
}
.cell.r1{
  background:radial-gradient(circle at 30% 24%,#ffffff35,transparent 24%),linear-gradient(145deg,#a8dea0,#64ae70 58%,#37774b);
}
.cell.r2{
  background:radial-gradient(circle at 30% 24%,#ffffff35,transparent 24%),linear-gradient(145deg,#f8e5a1,#d8bd67 58%,#a08238);
}
.cell.r3{
  background:radial-gradient(circle at 30% 24%,#ffffff35,transparent 24%),linear-gradient(145deg,#cbb1ef,#9a79cd 58%,#674b9a);
}
.cell.r4{
  background:radial-gradient(circle at 30% 24%,#ffffff35,transparent 24%),linear-gradient(145deg,#f3b0cb,#d77da4 58%,#9e4b76);
}
.cell.r5{
  background:radial-gradient(circle at 30% 24%,#ffffff35,transparent 24%),linear-gradient(145deg,#f5ba88,#db9154 58%,#a46131);
}
.cell.awake .rune{
  color:#ffd76f!important;
  opacity:1;
  text-shadow:0 0 4px #fff7c8,0 0 11px #efb84b,0 0 25px #d98d25!important;
}
.line-rune.filled{
  color:#ffd76f!important;
  border-color:#d6ad4f!important;
  text-shadow:0 0 5px #fff5be,0 0 13px #e7a73d!important;
}

/* Full-screen storm */
.storm-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  background:rgba(4,10,17,.04);
}
.storm-overlay.active{
  visibility:visible;
  animation:stormScene 2.6s ease-in-out forwards;
}
@keyframes stormScene{
  0%{opacity:0;background:rgba(4,10,17,0)}
  12%{opacity:1;background:rgba(4,10,17,.42)}
  20%{background:rgba(210,230,255,.62)}
  23%{background:rgba(4,10,17,.5)}
  45%{background:rgba(4,10,17,.55)}
  49%{background:rgba(235,243,255,.75)}
  52%{background:rgba(4,10,17,.48)}
  80%{opacity:1}
  100%{opacity:0;background:rgba(4,10,17,0)}
}
.storm-cloud{
  position:absolute;
  width:75vw;
  height:22vh;
  border-radius:50%;
  filter:blur(18px);
  background:radial-gradient(ellipse,#1d2934 0%,#111b25 55%,transparent 72%);
  opacity:.9;
}
.cloud-a{left:-15vw;top:-5vh;animation:cloudMoveA 2.6s linear forwards}
.cloud-b{right:-25vw;top:7vh;animation:cloudMoveB 2.6s linear forwards}
@keyframes cloudMoveA{to{transform:translateX(30vw)}}
@keyframes cloudMoveB{to{transform:translateX(-28vw)}}

.rain{
  position:absolute;
  inset:-30% -20%;
  transform:rotate(13deg);
  opacity:.5;
  background:repeating-linear-gradient(
    90deg,
    transparent 0 14px,
    rgba(190,218,235,.65) 15px,
    transparent 17px 30px
  );
  background-size:30px 100%;
  animation:rainFall .28s linear infinite;
}
.rain-b{opacity:.25;animation-duration:.18s;transform:rotate(18deg) scale(1.2)}
@keyframes rainFall{
  from{background-position:0 0}
  to{background-position:30px 90px}
}

.lightning{
  position:absolute;
  width:9px;
  height:56vh;
  background:#eaf7ff;
  box-shadow:0 0 9px #fff,0 0 26px #a8dfff,0 0 55px #8acbff;
  clip-path:polygon(40% 0,100% 0,58% 42%,90% 42%,15% 100%,38% 53%,0 53%);
  opacity:0;
}
.bolt-a{left:26%;top:0;transform:rotate(7deg);animation:boltA 2.6s steps(1) forwards}
.bolt-b{right:21%;top:-5%;height:42vh;transform:rotate(-9deg) scale(.75);animation:boltB 2.6s steps(1) forwards}
@keyframes boltA{
  0%,17%{opacity:0}18%{opacity:1}20%{opacity:0}21%{opacity:.85}23%,100%{opacity:0}
}
@keyframes boltB{
  0%,47%{opacity:0}48%{opacity:1}50%,100%{opacity:0}
}
.storm-title{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  color:#f2eee2;
  font:600 clamp(22px,5vw,40px) Georgia,serif;
  letter-spacing:.14em;
  text-align:center;
  text-shadow:0 3px 18px #000;
  opacity:0;
  animation:stormTitle 2.6s ease forwards;
}
@keyframes stormTitle{
  0%,25%{opacity:0;transform:translate(-50%,-46%)}
  35%,67%{opacity:1;transform:translate(-50%,-50%)}
  85%,100%{opacity:0}
}
body.storming main{
  animation:worldShake .45s ease 2;
}
@keyframes worldShake{
  0%,100%{transform:translate(0)}
  25%{transform:translate(-2px,1px)}
  50%{transform:translate(2px,-1px)}
  75%{transform:translate(-1px,-1px)}
}
body.storming .cell.awake .rune{
  animation:magicExtinguish 1.1s ease forwards!important;
}
@keyframes magicExtinguish{
  0%{opacity:1;filter:brightness(1)}
  35%{opacity:1;filter:brightness(2)}
  100%{opacity:.15;filter:brightness(.3)}
}

/* v0.6.2 music + Willow layering */
.willow-cat .tail{
  z-index:-1;
}
.willow-cat{
  isolation:isolate;
}
.willow-cat .face,
.willow-cat .chest,
.willow-cat .ear{
  z-index:2;
}
.music-toggle{
  justify-self:end;
  padding:5px 10px;
  margin-top:2px;
  font-size:12px;
  font-weight:600;
  color:#eadcae;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(234,220,174,.25);
  border-radius:999px;
}
.music-toggle:hover{
  background:rgba(255,255,255,.11);
}

.rules-visual{display:grid;gap:10px;margin-bottom:18px}
.rules-title{letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:#4d5354}
.rule-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:570px;width:100%;margin:auto}
.rule-card{display:grid;justify-items:center;gap:7px;padding:10px 8px 9px;border-radius:14px;background:rgba(34,49,59,.055);border:1px solid rgba(34,49,59,.10)}
.rule-card strong{font-size:10px;letter-spacing:.08em;color:#465056}
.rule-icon{width:76px;height:54px;display:grid;gap:4px;place-content:center}
.rule-icon span{display:block;width:18px;height:18px;border-radius:5px;background:linear-gradient(145deg,#858984,#555c5a);box-shadow:inset 1px 1px 1px #ffffff33,inset -2px -2px 2px #0004,0 1px 2px #0003}
.rule-icon .gold{position:relative}
.rule-icon .gold::after{content:'ᚠ';position:absolute;inset:0;display:grid;place-items:center;color:#ffd76f;font:700 14px Georgia,serif;text-shadow:0 0 4px #fff7c8,0 0 8px #e7a73d}
.row-rule{grid-template-columns:repeat(3,18px);grid-template-rows:18px}
.column-rule{grid-template-columns:18px;grid-template-rows:repeat(3,18px)}
.region-rule{grid-template-columns:repeat(2,18px);grid-template-rows:repeat(2,18px)}
.region-rule span:nth-child(1),.region-rule span:nth-child(2),.region-rule span:nth-child(3),.region-rule span:nth-child(4){background:linear-gradient(145deg,#788b77,#4d614d)}
.region-rule .gold{background:linear-gradient(145deg,#788b77,#4d614d)}
.touch-rule,.control-help{display:block;color:#666d70;letter-spacing:.02em}
.control-help{font-size:11px;opacity:.8}
@media(max-width:520px){.rule-strip{gap:6px}.rule-card{padding:8px 3px}.rule-icon{transform:scale(.88)}.rule-card strong{font-size:8px}}

/* v0.6.5 — stable line + fourth visual rule */
.rule-strip{
  grid-template-columns:repeat(4,1fr);
}

/* The tray always reserves exactly the same footprint.
   Marks on the board can no longer make it visually shift. */
.rune-line{
  min-height:58px;
  height:58px;
  contain:layout;
}
.line-slot{
  width:100%;
  height:58px;
  min-height:58px;
}
.line-rune{
  flex:0 0 44px;
}

.touch-icon{
  position:relative;
  display:block;
  width:62px;
  height:54px;
}
.touch-icon span{
  position:absolute;
}
.touch-icon .gold{
  left:11px;
  top:7px;
}
.touch-icon .forbidden{
  left:33px;
  top:29px;
}
.touch-icon .forbidden::before,
.touch-icon .forbidden::after{
  content:'';
  position:absolute;
  left:8px;
  top:-6px;
  width:3px;
  height:30px;
  border-radius:3px;
  background:#b52c32;
  box-shadow:0 0 4px rgba(181,44,50,.3);
  transform:rotate(45deg);
}
.touch-icon .forbidden::after{
  transform:rotate(-45deg);
}
@media(max-width:600px){
  .rule-strip{grid-template-columns:repeat(2,1fr)}
}

/* v0.6.6 — clearer no-touch rule */
.touch-grid{
  width:auto;
  height:auto;
  grid-template-columns:repeat(3,14px);
  grid-template-rows:repeat(3,14px);
  gap:2px;
  place-content:center;
}
.touch-grid span{
  width:14px;
  height:14px;
  border-radius:4px;
  position:relative;
}
.touch-grid .centre::after{
  content:'ᚠ';
  font-size:11px;
}
.touch-grid .blocked::before,
.touch-grid .blocked::after{
  content:'';
  position:absolute;
  z-index:3;
  left:6px;
  top:0px;
  width:2px;
  height:14px;
  border-radius:2px;
  background:#d53a40;
  box-shadow:0 0 2px rgba(213,58,64,.35);
}
.touch-grid .blocked::before{transform:rotate(45deg)}
.touch-grid .blocked::after{transform:rotate(-45deg)}

.line-rune.just-filled{
  animation:dropIntoLine .35s ease-out;
}
.rune-line,
.line-slot,
.line-rune{
  box-sizing:border-box;
}
.rune-line{
  overflow:visible;
}

#board,
.cell{
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

.rune{
  width:64%;
  height:64%;
  display:grid;
  place-items:center;
}
.rune-svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.rune-svg path,
.rune-svg circle{
  fill:none;
  stroke:currentColor;
  stroke-width:5.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.line-rune .rune-svg{
  width:72%;
  height:72%;
}

/* v0.7.6 — compact mobile instructions */
.instructions-panel{
  margin:0 0 12px;
}
.instructions-panel summary{
  cursor:pointer;
  list-style:none;
  width:max-content;
  margin:0 auto;
  padding:7px 14px;
  border:1px solid rgba(34,49,59,.16);
  border-radius:999px;
  background:rgba(255,255,255,.35);
  color:#465056;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.instructions-panel summary::-webkit-details-marker{display:none}
.instructions-panel summary::after{
  content:' ▾';
  opacity:.65;
}
.instructions-panel[open] summary::after{content:' ▴'}
.instructions-panel .rules{
  margin-top:10px;
}

/* On phones, instructions collapse into one small label so status/lives stay visible. */
@media(max-width:600px), (pointer:coarse){
  .instructions-panel{
    margin:0 0 7px;
  }
  .instructions-panel summary{
    padding:5px 11px;
    font-size:10px;
  }
  .instructions-panel .rules-title{
    display:none;
  }
  .instructions-panel .rules{
    margin-bottom:4px;
  }
  .rule-card{
    padding:6px 3px;
    gap:3px;
  }
  .rule-icon{
    transform:scale(.72);
    margin:-6px 0;
  }
  .control-help{
    margin-top:2px;
  }
}

/* v0.8.0 — Keeper's Map */
.map-button{
  border:1px solid rgba(90,76,49,.22);border-radius:999px;padding:5px 10px;
  background:rgba(255,255,255,.34);color:#514c41;font-weight:700;cursor:pointer
}
.map-screen{position:fixed;inset:0;z-index:90;background:#d9d0b8;overflow:auto;padding:18px}
.map-screen.hidden{display:none}
body.map-open{overflow:hidden}
.map-shell{max-width:900px;margin:auto}
.map-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:12px}
.map-top h2{font-family:Georgia,serif;margin:2px 0;color:#373a35;font-size:clamp(25px,5vw,42px)}
.map-kicker{font-size:10px;letter-spacing:.22em;color:#6d6656;font-weight:800}
.map-close{border:1px solid #776e5d;border-radius:999px;background:#eee7d4;padding:8px 13px;color:#4b493f;font-weight:700}
.fife-map{
  position:relative;aspect-ratio:900/560;overflow:hidden;border-radius:18px;
  background:
    radial-gradient(circle at 25% 30%,rgba(255,255,255,.24),transparent 35%),
    repeating-linear-gradient(8deg,rgba(90,76,49,.025) 0 1px,transparent 1px 5px),
    #d8ceb1;
  border:1px solid rgba(80,70,52,.25);
  box-shadow:inset 0 0 55px rgba(72,59,39,.12),0 7px 24px rgba(44,39,31,.14)
}
.map-paper{position:absolute;inset:0;width:100%;height:100%}
.coast{fill:#b5b394;stroke:#6e715f;stroke-width:3;filter:url(#mapWobble)}
.water-line{fill:none;stroke:#777c72;stroke-width:2;stroke-dasharray:4 6;opacity:.7}
.route-base{fill:none;stroke:#756d59;stroke-width:3;stroke-dasharray:3 9;opacity:.45}
.route-glow{fill:none;stroke:#d99d36;stroke-width:3;stroke-dasharray:2 10;opacity:.45}
.map-town{font:italic 18px Georgia,serif;fill:#4e5047}
.map-sea{font:italic 18px Georgia,serif;letter-spacing:.16em;fill:#6f756f;opacity:.55}
.site{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  border:0;background:none;display:grid;justify-items:center;gap:3px;cursor:pointer;color:#4c4b42
}
.site-stone{
  width:38px;height:38px;display:grid;place-items:center;border-radius:48% 43% 51% 45%;
  background:linear-gradient(145deg,#747d79,#4b5652);color:#2d332f;
  box-shadow:inset 2px 2px 3px #ffffff25,inset -3px -3px 5px #0005,0 3px 5px #0003;
  font:700 24px Georgia,serif
}
.site-name{font:700 11px Georgia,serif;background:#d9d0b8cc;padding:2px 5px;border-radius:4px;white-space:nowrap}
.site.awake .site-stone{color:#ffd36a;text-shadow:0 0 4px #fff4b3,0 0 11px #df972d;box-shadow:inset 0 0 13px #d99d3633,0 0 12px #d99d3644}
.site.sleeping{opacity:.35;filter:grayscale(1);cursor:default}
.site-card{margin:12px auto 0;max-width:680px;text-align:center;color:#48473f}
.site-title{font:700 19px Georgia,serif}
.site-lore{font:italic 14px/1.5 Georgia,serif;margin:5px auto;max-width:620px}
.map-progress{font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-top:7px;color:#77705f}
.map-willow{position:absolute;left:79%;top:67%;width:52px;height:48px}
.mw-body{position:absolute;left:13px;top:20px;width:28px;height:24px;background:#e7dfcf;border-radius:50%}
.mw-head{position:absolute;left:19px;top:7px;width:21px;height:21px;background:#807d7b;border-radius:50%;z-index:2}
.mw-head:before,.mw-head:after{content:'';position:absolute;top:-5px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid #777472}
.mw-head:before{left:-3px;transform:rotate(-18deg)}.mw-head:after{right:-3px;transform:rotate(18deg)}
.mw-tail{position:absolute;left:0;top:28px;width:27px;height:10px;border:7px solid #777472;border-right:0;border-top-color:transparent;border-radius:50%;transform:rotate(-14deg)}
@media(max-width:600px){
  .map-screen{padding:10px}.map-close{font-size:10px;padding:6px 9px}
  .site-stone{width:30px;height:30px;font-size:19px}.site-name{font-size:8px}
  .site-lore{font-size:12px}.map-willow{transform:scale(.75)}
}

/* v0.8.1 Keeper's Archive */
.map-actions{display:flex;gap:8px;align-items:center}
.archive-button{border:1px solid #8d7543;border-radius:999px;background:#463f35;color:#f0d994;padding:8px 13px;font-weight:700;box-shadow:inset 0 0 10px #d6a84918}
.archive-screen{position:fixed;inset:0;z-index:95;overflow:auto;padding:18px;background:
radial-gradient(circle at 50% 0,#3e3a31,#262620 58%,#1d1e1a)}
.archive-screen.hidden{display:none}
.archive-shell{max-width:850px;margin:auto;color:#e6dfce}
.archive-head{display:flex;justify-content:space-between;align-items:center;gap:15px}
.archive-head h2{font:clamp(27px,5vw,42px) Georgia,serif;margin:3px 0;color:#e9dba9}
.archive-intro{font:italic 14px Georgia,serif;color:#aaa491}
.archive-tabs{display:flex;gap:7px;margin:20px 0 14px;border-bottom:1px solid #ffffff18;padding-bottom:9px}
.archive-tab{border:0;border-radius:999px;background:#ffffff0a;color:#aaa38f;padding:7px 13px;font-weight:700}
.archive-tab.active{background:#d5ad5320;color:#efd582;border:1px solid #d5ad5344}
.archive-panel{display:none}.archive-panel.active{display:block}
.archive-grid,.rune-archive,.place-archive{display:grid;gap:10px}
.archive-item,.rune-entry,.place-entry{display:grid;grid-template-columns:62px 1fr;gap:13px;align-items:center;padding:14px;border:1px solid #ffffff12;border-radius:14px;background:#ffffff08}
.archive-item h3,.rune-entry h3,.place-entry h3{font:18px Georgia,serif;color:#e8d7a0;margin:2px 0}
.archive-item p,.rune-entry p,.place-entry p{font:13px/1.45 Georgia,serif;color:#bdb7a5;margin:4px 0}
.archive-item small,.rune-entry small,.place-entry small{font-size:9px;letter-spacing:.15em;color:#817b6c}
.archive-sigil,.archive-rune,.place-entry>span{width:50px;height:50px;display:grid;place-items:center;border-radius:50%;background:#191b18;border:1px solid #a9874038;color:#e4bd61;font:27px Georgia,serif;box-shadow:inset 0 0 16px #d89c3020}
.locked{opacity:.38;filter:grayscale(.8)}
.listen-placeholder{margin-top:7px;border:1px solid #b18b4055;border-radius:999px;background:#171916;color:#d9bd77;padding:7px 11px;font:12px Georgia,serif}
@media(max-width:600px){.archive-screen{padding:10px}.archive-head{align-items:flex-start}.map-actions{flex-direction:column;align-items:flex-end}.archive-item,.rune-entry,.place-entry{grid-template-columns:45px 1fr;padding:10px}.archive-sigil,.archive-rune,.place-entry>span{width:38px;height:38px;font-size:20px}}

/* Pictish rune set — Keepers Archive */
.archive-rune .rune-svg{width:72%;height:72%;}