/* Extracted from the original single-file index.html. */

/* ── hero ──────────────────────────────────────────────────────────── */
.hero{text-align:center; position:relative; padding-top:1rem}
.tiara{width:clamp(120px,26vw,190px); height:auto; display:block; margin:0 auto .6rem; cursor:pointer; filter:drop-shadow(0 6px 0 rgba(224,102,155,.22))}
.tiara:focus-visible{outline:3px dashed var(--focus); outline-offset:8px; border-radius:12px}
.float{animation:float 4.5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px) rotate(-1.5deg)}}
.hero h1{font-size:var(--step-3); font-weight:800; line-height:1.02; letter-spacing:-.02em}
.hero h1 .name{
  display:block; color:var(--bubblegum-deep);
  -webkit-text-stroke:0; text-shadow:4px 4px 0 color-mix(in srgb,var(--gold) 55%, transparent);
}
.hero .sub{max-width:34ch; margin:1rem auto 0; color:var(--text-soft); font-size:var(--step-1); font-style:italic}
.stamp{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.4rem;
  font-family:Caveat,cursive; font-weight:700; font-size:1.3rem; color:var(--ink);
  background:var(--gold); padding:.35rem 1.2rem; border-radius:var(--wobble-alt);
  transform:rotate(-2.5deg); box-shadow:var(--shadow-sm);
}
.stamp .ico{font-size:1.2rem}

/* ── countdown blocks ──────────────────────────────────────────────── */
.blocks{display:flex; flex-wrap:wrap; gap:clamp(.6rem,2vw,1.2rem); justify-content:center; margin-top:1.5rem}
.block{
  background:var(--block-face); border:3px solid var(--block-edge);
  border-radius:22px; padding:.9rem clamp(.7rem,2.4vw,1.5rem);
  min-width:clamp(4.6rem,18vw,7rem); text-align:center;
  box-shadow:0 8px 0 var(--block-edge), var(--shadow-sm);
  position:relative;
}
.block:nth-child(odd){transform:rotate(-2deg)}
.block:nth-child(even){transform:rotate(1.6deg)}
.block::after{
  content:""; position:absolute; inset:6px; border-radius:14px;
  border:2px dotted color-mix(in srgb,var(--bubblegum) 45%, transparent); pointer-events:none;
}
.blocknum{
  display:block; font-size:clamp(2rem,7vw,3.4rem); font-weight:800; line-height:1;
  color:var(--bubblegum-deep); font-variant-numeric:tabular-nums;
}
.blocklabel{display:block; font-family:Caveat,cursive; font-weight:700; font-size:1.15rem; color:var(--text-soft); margin-top:.2rem}

/* ── progress ──────────────────────────────────────────────────────── */
.progress-wrap{max-width:44rem; margin:2.2rem auto 0}
.track{
  height:26px; background:var(--surface-2); border:3px solid var(--line);
  border-radius:999px; overflow:hidden; position:relative;
}
.fill{
  height:100%; width:0;
  background:repeating-linear-gradient(115deg,var(--bubblegum) 0 14px,var(--lilac) 14px 28px);
  border-radius:999px; transition:width 1s ease;
}
.track .runner{position:absolute; top:-14px; font-size:1.6rem; transform:translateX(-50%); transition:left 1s ease; pointer-events:none}
.progress-note{display:flex; justify-content:space-between; gap:1rem; margin-top:.5rem; font-family:Caveat,cursive; font-weight:700; font-size:1.15rem; color:var(--text-soft)}
.progress-note span{display:inline-flex; align-items:center; gap:.35rem}

/* ── generic panel ─────────────────────────────────────────────────── */
.play{
  background:var(--surface); border:4px solid var(--line);
  border-radius:var(--wobble); padding:clamp(1.4rem,4vw,2.6rem);
  box-shadow:var(--shadow-soft); text-align:center;
}
.play.alt{border-radius:var(--wobble-alt)}
.play h2{font-size:var(--step-2); font-weight:800; margin-bottom:1.2rem}
.play > p.lede{max-width:46ch; margin:0 auto 1.6rem; color:var(--text-soft)}
.bubble{
  position:relative; background:var(--surface-2); border:3px solid var(--line);
  border-radius:var(--wobble-alt); padding:1.5rem clamp(1rem,3vw,2.2rem);
  min-height:7.5rem; display:flex; align-items:center; justify-content:center;
  font-size:var(--step-1); line-height:1.45; font-weight:600;
}
.bubble::after{
  content:""; position:absolute; left:-17px; top:calc(50% - 14px);
  width:0; height:0; border:14px solid transparent; border-right-color:var(--line);
}
.bubble .msg{max-width:38ch; display:block; animation:pop .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{from{transform:scale(.85) rotate(-2deg); opacity:0}}
.bubble .glyph{display:block; font-size:2.1rem; margin-bottom:.4rem; color:var(--bubblegum-deep)}
.btnrow{display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-top:2.2rem}
button.play-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:Grandstander,sans-serif; font-weight:800; font-size:var(--step-0);
  color:var(--ink); background:var(--bubblegum); border:3px solid var(--ink);
  border-radius:999px; padding:.75rem 1.5rem; cursor:pointer;
  box-shadow:0 6px 0 var(--ink); transition:transform .1s, box-shadow .1s, background .15s;
}
button.play-btn .ico{font-size:1.2em}
button.play-btn.snack{background:var(--gold)}
button.play-btn.tantrum{background:var(--mint)}
button.play-btn.calm{background:var(--lilac)}
button.play-btn.official{background:var(--sky)}
button.play-btn:hover{background:color-mix(in srgb,var(--bubblegum) 70%, var(--milk))}
button.play-btn.snack:hover{background:color-mix(in srgb,var(--gold) 70%, var(--milk))}
button.play-btn.tantrum:hover{background:color-mix(in srgb,var(--mint) 70%, var(--milk))}
button.play-btn.calm:hover{background:color-mix(in srgb,var(--lilac) 70%, var(--milk))}
button.play-btn.official:hover{background:color-mix(in srgb,var(--sky) 70%, var(--milk))}
button.play-btn:active{transform:translateY(5px); box-shadow:0 1px 0 var(--ink)}
button.play-btn:focus-visible{outline:3px dashed var(--focus); outline-offset:4px}
button.play-btn[disabled]{opacity:.5; cursor:not-allowed}

/* ── oracle ────────────────────────────────────────────────────────── */
.oracle-form{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-bottom:1.4rem}
.oracle-form input{
  font:inherit; font-weight:600; color:var(--ink);
  background:var(--surface-2); border:3px solid var(--line); border-radius:999px;
  padding:.7rem 1.3rem; width:min(100%,26rem);
}
.oracle-form input::placeholder{color:var(--text-soft); font-style:italic; font-weight:400}
.oracle-form input:focus-visible{outline:3px dashed var(--focus); outline-offset:3px}
.ball{
  width:clamp(140px,34vw,190px); height:auto; margin:0 auto 1.2rem; display:block;
  color:var(--bubblegum-deep);
}
.ball.spin{animation:spin .7s ease-in-out}
@keyframes spin{50%{transform:rotate(-14deg) scale(1.06)}}

/* ── the big button nobody should press ────────────────────────────── */
.forbidden{text-align:center}
.bigred{
  width:clamp(9rem,32vw,12rem); height:clamp(9rem,32vw,12rem); border-radius:50%;
  border:6px solid var(--ink); background:var(--bubblegum-deep); color:#FFF4F8;
  font-family:Grandstander,sans-serif; font-weight:800; font-size:var(--step-1); line-height:1.1;
  cursor:pointer; box-shadow:0 12px 0 #A83A6E, var(--shadow-sm);
  transition:transform .08s, box-shadow .08s; display:inline-flex;
  flex-direction:column; align-items:center; justify-content:center; gap:.3rem; padding:1rem;
}
.bigred .ico{font-size:2rem}
.bigred:hover{background:#E86FA5}
.bigred:active{transform:translateY(9px); box-shadow:0 3px 0 #A83A6E}
.bigred:focus-visible{outline:4px dashed var(--focus); outline-offset:6px}
.forbidden .said{
  margin:1.5rem auto 0; max-width:40ch; font-family:Caveat,cursive; font-weight:700;
  font-size:1.45rem; color:var(--bubblegum-deep); min-height:3.4rem;
}

/* ── nap / break timer ─────────────────────────────────────────────── */
.timer-face{
  display:inline-flex; align-items:center; gap:.9rem; margin:0 auto;
  background:var(--surface-2); border:4px solid var(--line); border-radius:var(--wobble-alt);
  padding:1rem clamp(1.2rem,4vw,2.4rem);
}
.timer-face .ico{font-size:2.4rem; color:var(--bubblegum-deep)}
#clockface{
  font-family:Grandstander,sans-serif; font-weight:800; font-variant-numeric:tabular-nums;
  font-size:clamp(2.4rem,10vw,4rem); line-height:1; color:var(--bubblegum-deep);
}
.timer-note{font-family:Caveat,cursive; font-weight:700; font-size:1.35rem; color:var(--text-soft); margin-top:1rem; min-height:2rem}

/* ── royal decrees ─────────────────────────────────────────────────── */
.decrees{list-style:none; padding:0; margin:0; display:grid; gap:.8rem}
.decrees li{
  display:flex; gap:.9rem; align-items:flex-start; text-align:left;
  background:var(--surface); border:3px solid var(--line); border-radius:20px;
  padding:.9rem 1.1rem; box-shadow:var(--shadow-sm);
}
.decrees li:nth-child(odd){transform:rotate(-.5deg)}
.decrees li:nth-child(even){transform:rotate(.4deg)}
.decrees .ico{font-size:1.6rem; color:var(--bubblegum-deep); margin-top:.15rem}
.decrees b{font-family:Grandstander,sans-serif; color:var(--bubblegum-deep)}

/* ── packing checklist ─────────────────────────────────────────────── */
.packlist{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.7rem}
.packlist button{
  width:100%; display:flex; align-items:center; gap:.75rem; text-align:left;
  font:inherit; font-weight:600; color:inherit; cursor:pointer;
  background:var(--surface); border:3px solid var(--line); border-radius:18px;
  padding:.7rem .95rem; transition:background .15s, border-color .15s;
}
.packlist button:hover{background:var(--surface-2)}
.packlist button:focus-visible{outline:3px dashed var(--focus); outline-offset:3px}
.packlist .box{
  width:1.7rem; height:1.7rem; flex:none; border:3px solid var(--bubblegum);
  border-radius:8px; display:grid; place-items:center; color:var(--bubblegum-deep);
}
.packlist .box .ico{font-size:1.1rem; opacity:0; transform:scale(.4); transition:opacity .2s, transform .3s cubic-bezier(.2,1.6,.4,1)}
.packlist button[aria-pressed="true"]{border-color:var(--mint); background:#F0FBF6}
.packlist button[aria-pressed="true"] .box{border-color:var(--mint); background:var(--mint)}
.packlist button[aria-pressed="true"] .box .ico{opacity:1; transform:scale(1)}
.packlist button[aria-pressed="true"] .label{text-decoration:line-through; color:var(--text-soft)}
.pack-foot{margin-top:1.2rem; font-family:Caveat,cursive; font-weight:700; font-size:1.35rem; color:var(--bubblegum-deep); min-height:2rem}

/* ── reward chart ──────────────────────────────────────────────────── */
.chart-head{text-align:center; margin-bottom:1.6rem}
.chart-head h2{font-size:var(--step-2); font-weight:800}
.chart-head p{color:var(--text-soft); max-width:44ch; margin:.6rem auto 0}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1.1rem}
.card{
  position:relative; text-align:left; cursor:pointer; overflow:visible;
  background:var(--surface); border:3px solid var(--line); border-radius:26px;
  padding:1.2rem 1.3rem 1.3rem; box-shadow:var(--shadow-sm);
  font:inherit; color:inherit; transition:transform .18s ease, box-shadow .18s ease;
}
.card:nth-child(3n+1){transform:rotate(-1.2deg)}
.card:nth-child(3n){transform:rotate(1deg)}
.card:hover{transform:rotate(0) translateY(-4px) scale(1.02); box-shadow:12px 12px 0 rgba(224,102,155,.2)}
.card:focus-visible{outline:3px dashed var(--focus); outline-offset:4px}
.card .icon{font-size:2.2rem; line-height:1; display:block; color:var(--bubblegum-deep)}
.card h3{font-size:var(--step-1); font-weight:800; margin:.5rem 0 .3rem; color:var(--bubblegum-deep)}
.card p{margin:0; font-size:var(--step--1); color:var(--text-soft)}
.card .star{
  position:absolute; top:-14px; right:-10px; font-size:2.4rem; color:var(--gold);
  opacity:0; transform:scale(.3) rotate(-25deg); transition:opacity .25s, transform .35s cubic-bezier(.2,1.6,.4,1);
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.12));
}
.card .star .ico{stroke:var(--ink); stroke-width:1.6; fill:var(--gold)}
.card[aria-pressed="true"]{border-color:var(--gold); border-style:dashed; background:var(--surface-2)}
.card[aria-pressed="true"] .star{opacity:1; transform:scale(1) rotate(8deg)}
.chart-foot{
  margin-top:1.4rem; text-align:center; font-family:Caveat,cursive; font-weight:700;
  font-size:1.4rem; color:var(--bubblegum-deep); min-height:2rem;
  display:flex; align-items:center; justify-content:center; gap:.4rem; flex-wrap:wrap;
}

/* ── exam-day / done banner ────────────────────────────────────────── */
.banner{
  display:none; text-align:center; background:var(--gold); color:#3A1B2C;
  border:4px solid var(--ink); border-radius:var(--wobble); padding:1.6rem;
  box-shadow:var(--shadow); margin-bottom:1.5rem;
}
.banner.on{display:block}
.banner h2{font-size:var(--step-2); font-weight:800; display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap}
.banner p{margin:.5rem 0 0; font-weight:600}


/* ── bunnies & ice cream ───────────────────────────────────────────── */
.stickers{position:absolute; inset:0; pointer-events:none; z-index:-1}
.stickers svg{
  position:absolute; width:clamp(38px,5.5vw,62px); height:auto; opacity:.9;
  animation:bob 6s ease-in-out infinite;
}
.stickers svg:nth-child(1){left:3%;  top:15%; animation-delay:-.4s;  color:var(--bubblegum)}
.stickers svg:nth-child(2){right:4%; top:7%;  animation-delay:-1.8s; color:var(--lilac)}
.stickers svg:nth-child(3){left:9%;  bottom:7%; animation-delay:-3.1s; color:var(--mint)}
.stickers svg:nth-child(4){right:8%; bottom:17%; animation-delay:-2.2s; color:var(--bubblegum)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(5deg)}}

.sweetrow{display:flex; gap:1rem; justify-content:center; align-items:flex-end; margin-top:1.6rem}
.sweetrow svg{width:30px; height:auto; animation:bob 5s ease-in-out infinite}
.sweetrow svg:nth-child(1){color:var(--bubblegum)}
.sweetrow svg:nth-child(2){color:var(--mint); animation-delay:-1s}
.sweetrow svg:nth-child(3){color:var(--gold); animation-delay:-2s}
.sweetrow svg:nth-child(4){color:var(--lilac); animation-delay:-3s}
.sweetrow svg:nth-child(5){color:var(--bubblegum-deep); animation-delay:-4s}
.runner svg{width:26px; height:auto; color:var(--bubblegum-deep); display:block}

.play-inner{
  display:grid; grid-template-columns:minmax(150px,190px) 1fr;
  gap:clamp(1rem,3vw,2rem); align-items:center; text-align:left;
}
@media (max-width:44rem){
  .play-inner{grid-template-columns:1fr; text-align:center; justify-items:center}
  .bubble::after{left:calc(50% - 14px); top:-17px; border-right-color:transparent; border-bottom-color:var(--line)}
}
.bunny{width:100%; height:auto; display:block; cursor:pointer}
.bunny:focus-visible{outline:3px dashed var(--focus); outline-offset:6px; border-radius:16px}
.bunny .ear{transform-box:fill-box; transform-origin:50% 100%; transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
.bunny.wiggle .ear-l{transform:rotate(-16deg)}
.bunny.wiggle .ear-r{transform:rotate(14deg)}
.bunny .blink{animation:blink 5.5s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}
.bunny-name{
  display:block; text-align:center; font-family:Caveat,cursive; font-weight:700;
  font-size:1.15rem; color:var(--text-soft); margin-top:.3rem;
}
@media (max-width:44rem){.play-inner .bunny-wrap{order:-1; max-width:170px}}

/* ── SPA chrome (new in the quest refactor) ────────────────────────── */
.backlink{margin:0 0 1.4rem; font-family:Caveat,cursive; font-weight:700; font-size:1.25rem}
.backlink a{
  display:inline-flex; align-items:center; gap:.45rem;
  color:var(--bubblegum-deep); text-decoration:none;
  border-bottom:2px dotted var(--line); padding-bottom:.1rem;
}
.backlink a:hover{border-bottom-style:solid}
.backlink a:focus-visible{outline:3px dashed var(--focus); outline-offset:4px; border-radius:6px}
.backlink .ico{font-size:1.2rem}

a.card{display:block; text-decoration:none; color:inherit}
a.card h3{text-decoration:none}

.load-error{
  text-align:center; font-family:Caveat,cursive; font-weight:700;
  font-size:1.4rem; color:var(--bubblegum-deep); padding:3rem 1rem;
}

/* a quest page starts straight after the back link, not a screen below it */
#view > section:first-of-type{margin-block-start:0}

/* quest cards on the hub */
.questmeta{
  margin-top:.7rem !important; font-family:Caveat,cursive; font-weight:700;
  font-size:1.1rem; color:var(--bubblegum-deep) !important;
  display:flex; align-items:center; gap:.35rem;
}
.questmeta .ico{font-size:1.15rem}
.card.soon{opacity:.55; cursor:default; border-style:dashed}
.card.soon:hover{transform:none; box-shadow:var(--shadow-sm)}
.card.soon .questmeta{color:var(--text-soft) !important}

/* ── ice cream ratings ─────────────────────────────────────────────── */
.notice{
  background:var(--surface-2); border:3px dashed var(--line); border-radius:24px;
  padding:1.4rem clamp(1rem,3vw,2rem); max-width:44rem; margin:0 auto; text-align:center;
}
.notice-title{
  display:flex; align-items:center; justify-content:center; gap:.5rem; margin:0 0 .5rem;
  font-family:Grandstander,sans-serif; font-weight:800; color:var(--bubblegum-deep);
  font-size:var(--step-1);
}
.notice p{margin:.4rem 0 0}
.notice code{
  background:var(--milk); border:2px solid var(--line); border-radius:8px;
  padding:.1rem .4rem; font-size:.9em;
}
.ic-status{
  min-height:1.5rem; margin:.6rem 0 0; font-family:Caveat,cursive;
  font-weight:700; font-size:1.2rem; color:var(--bubblegum-deep);
}

/* the write forms, shared by the tasting notes and the stamp book */
.ic-form,.stampform{
  background:var(--surface-2); border:3px solid var(--line); border-radius:26px;
  padding:1.3rem clamp(1rem,3vw,1.8rem); margin-bottom:2rem; text-align:left;
}
.ic-fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.9rem}
.ic-form label,.stampform label{display:block; font-family:Caveat,cursive; font-weight:700; font-size:1.2rem; color:var(--text-soft)}
.ic-form .ic-wide,.stampform .ic-wide{margin-top:.9rem}
.ic-form input,.ic-form select,.ic-form textarea,
.stampform input,.stampform select,.stampform textarea{
  display:block; width:100%; margin-top:.25rem; font:inherit; font-weight:600;
  color:var(--ink); background:var(--milk); border:3px solid var(--line);
  border-radius:14px; padding:.5rem .8rem;
}
.ic-form textarea,.stampform textarea{resize:vertical}
.ic-form :is(input,select,textarea):focus-visible,
.stampform :is(input,select,textarea):focus-visible{
  outline:3px dashed var(--focus); outline-offset:2px;
}
.ic-form input[type="file"],.stampform input[type="file"]{padding:.4rem; background:var(--milk)}
.ic-form .play-btn,.stampform .play-btn{margin-top:1.1rem; margin-right:.6rem}

.ic-board-title{font-size:var(--step-1); color:var(--bubblegum-deep); margin:0 0 .7rem; text-align:left}
ol.ic-board{list-style:none; counter-reset:rank; padding:0; margin:0 0 2rem; display:grid; gap:.5rem}
ol.ic-board li{
  counter-increment:rank; display:flex; align-items:center; gap:.7rem; text-align:left;
  background:var(--surface); border:3px solid var(--line); border-radius:16px; padding:.6rem .9rem;
}
ol.ic-board li::before{
  content:counter(rank); flex:none; width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--gold); color:var(--ink); display:grid; place-items:center;
  font-family:Grandstander,sans-serif; font-weight:800; font-size:.95rem;
}
ol.ic-board li b{flex:1; color:var(--bubblegum-deep)}
ol.ic-board li span{font-family:Caveat,cursive; font-weight:700; font-size:1.15rem; color:var(--text-soft)}

ul.ic-list{list-style:none; padding:0; margin:0; display:grid; gap:1rem; text-align:left}
.ic-row{background:var(--surface); border:3px solid var(--line); border-radius:22px; padding:1rem 1.2rem}
.ic-head{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap}
.ic-head b{font-family:Grandstander,sans-serif; font-size:var(--step-1); color:var(--bubblegum-deep)}
.ic-place{font-family:Caveat,cursive; font-weight:700; font-size:1.2rem; color:var(--text-soft)}
/* a score out of ten, in cones or in mountains. Each cell is an outline with
   a filled copy stacked on top, clipped to what was earned — so 6.5 reads as
   six and a half. --rw is one icon's width and --ar its aspect ratio; the
   kind class sets both, since a cone is tall and a mountain is wide. */
.rating{
  display:inline-flex; gap:.14em; margin-left:auto; flex-wrap:wrap;
  font-size:2rem;                  /* the height of one icon */
}
.rating.cones{--rw:.64em; --ar:14 / 22; --ar-half:7 / 22}
.rating.peaks{--rw:1.43em; --ar:20 / 14; --ar-half:10 / 14; font-size:1.5rem}
.rating-cell{position:relative; display:inline-block; width:var(--rw); height:1em; line-height:1}
.rating-cell .ico{position:absolute; left:0; top:0; width:100%; height:100%}
.rating-cell .off{color:var(--line)}
.rating-cell .on{
  color:var(--gold); fill:var(--gold); stroke:var(--bubblegum-deep);
  clip-path:inset(0 100% 0 0);        /* empty by default */
}
.rating-cell.half .on{clip-path:inset(0 50% 0 0)}
.rating-cell.full .on{clip-path:inset(0 0 0 0)}
@media (max-width:32rem){
  /* on a phone the ten icons get their own line and share the whole width of
     it. The cells flex rather than being sized in vw, so they fit whatever
     padding the card actually has instead of a guess at it. */
  .ic-head{align-items:flex-start}
  .rating{
    margin-left:0; flex-basis:100%; width:100%; flex-wrap:nowrap; gap:1%;
    align-items:flex-start;      /* or the cells stretch and the ratio blows up the width */
  }
  .rating-cell{flex:1 1 0; width:auto; height:auto; aspect-ratio:var(--ar)}
}
.ic-when{margin:.3rem 0 0; font-size:var(--step--1); color:var(--text-soft)}
.ic-notes{margin:.6rem 0 0}
.ic-photo{display:block; margin-top:.8rem; max-width:100%; border-radius:16px; border:3px solid var(--line)}
.ic-empty,.ic-skeleton{
  text-align:center; font-family:Caveat,cursive; font-weight:700;
  font-size:1.3rem; color:var(--text-soft); padding:1.5rem;
}

/* sign-in (email + password) */
.ic-signin{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:1rem}
.ic-signin input{
  font:inherit; font-weight:600; color:var(--ink);
  background:var(--milk); border:3px solid var(--line); border-radius:999px;
  padding:.65rem 1.2rem; width:min(100%,15rem);
}
.ic-signin input::placeholder{color:var(--text-soft); font-style:italic; font-weight:400}
.ic-signin input:focus-visible{outline:3px dashed var(--focus); outline-offset:3px}

/* the 0.5-10 picker: twenty radios laid out in reverse so that plain CSS can
   fill every half below the checked (or hovered) one. Each label is half an
   icon wide with the icon slid over, so two labels make one icon. */
.rating-field{margin-top:1rem}
.rating-label{
  display:block; font-family:Caveat,cursive; font-weight:700;
  font-size:1.2rem; color:var(--text-soft);
}
fieldset.rating-input{
  border:0; margin:.2rem 0 0; padding:0; font-size:2.6rem;
  display:inline-flex; flex-direction:row-reverse; justify-content:flex-end;
  flex-wrap:wrap-reverse;
}
fieldset.rating-input.cones{--rw:.64em; --ar:14 / 22; --ar-half:7 / 22}
fieldset.rating-input.peaks{--rw:1.43em; --ar:20 / 14; --ar-half:10 / 14; font-size:2.2rem}
.rating-input input{position:absolute; width:1px; height:1px; opacity:0}
.rating-input label{
  cursor:pointer; color:var(--line); line-height:1;
  display:block; width:calc(var(--rw) / 2); height:1em; overflow:hidden;
  transition:color .12s;
  /* 1em of the fieldset, and stated explicitly: the forms style their labels
     at 1.2rem, and a rule that matches the label beats the size it would
     otherwise inherit from here. Without this the whole picker renders at
     19px tall inside a form and full size everywhere else. */
  font-size:1em;
}
.rating-input label .ico{display:block; width:var(--rw); height:1em}
.rating-input label.half-r .ico{margin-left:calc(var(--rw) / -2)}  /* the right half */
.rating-input label.half-l{margin-left:.14em}                      /* the gap between icons */
/* the checked half and everything before it in DOM order, which is
   everything to its left on screen */
.rating-input input:checked ~ label,
.rating-input input:checked + label,
.rating-input:hover label:hover ~ label,
.rating-input label:hover{color:var(--gold)}
.rating-input input:checked ~ label .ico,
.rating-input input:checked + label .ico,
.rating-input:hover label:hover ~ label .ico,
.rating-input label:hover .ico{fill:var(--gold); stroke:var(--bubblegum-deep)}
.rating-input input:focus-visible + label{
  outline:3px dashed var(--focus); outline-offset:2px; border-radius:4px;
}
@media (max-width:32rem){
  /* the picker fills the width the same way: each half-icon label flexes,
     and the icon inside is twice its label so the two halves still make one
     icon. Percentages here are of the fieldset, so the fit is exact. */
  fieldset.rating-input{width:100%; flex-wrap:nowrap; align-items:flex-start}
  .rating-input label{flex:1 1 0; width:auto; height:auto; aspect-ratio:var(--ar-half)}
  .rating-input label .ico{width:200%; height:auto; aspect-ratio:var(--ar)}
  .rating-input label.half-r .ico{margin-left:-100%}
  .rating-input label.half-l{margin-left:.9%}
}

/* ── top bar with the account control ──────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.6rem clamp(.8rem,3vw,1.6rem);
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:3px solid var(--line);
}
.brand{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-family:Grandstander,sans-serif; font-weight:800; color:var(--bubblegum-deep);
  font-size:var(--step-0);
}
.brand .ico{font-size:1.4rem}
.brand:focus-visible{outline:3px dashed var(--focus); outline-offset:4px; border-radius:10px}
@media (max-width:30rem){ .brand span{display:none} }

.account-wrap{position:relative}
.account-btn{
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  font-family:Grandstander,sans-serif; font-weight:800; font-size:var(--step--1);
  color:var(--ink); background:var(--surface); border:3px solid var(--line);
  border-radius:999px; padding:.4rem .9rem;
}
.account-btn .ico{font-size:1.25rem; color:var(--bubblegum-deep)}
.account-btn:hover{background:var(--surface-2)}
.account-btn:focus-visible{outline:3px dashed var(--focus); outline-offset:3px}
.account-btn.in{border-color:var(--bubblegum); background:var(--surface-2)}

.account-panel{
  position:absolute; right:0; top:calc(100% + .6rem); width:min(20rem,86vw);
  background:var(--surface); border:3px solid var(--line); border-radius:22px;
  padding:1.1rem; box-shadow:var(--shadow-soft); text-align:left;
}
.account-title{
  display:flex; align-items:center; gap:.45rem; margin:0 0 .3rem;
  font-family:Grandstander,sans-serif; font-weight:800; color:var(--bubblegum-deep);
}
.account-note{margin:0 0 .8rem; font-size:var(--step--1); color:var(--text-soft); word-break:break-word}
.account-panel input{
  display:block; width:100%; margin-bottom:.6rem; font:inherit; font-weight:600;
  color:var(--ink); background:var(--surface-2); border:3px solid var(--line);
  border-radius:14px; padding:.55rem .9rem;
}
.account-panel input:focus-visible{outline:3px dashed var(--focus); outline-offset:2px}
.account-status{
  margin:.6rem 0 0; min-height:1.2rem; font-family:Caveat,cursive;
  font-weight:700; font-size:1.1rem; color:var(--bubblegum-deep);
}

/* ── the comic strip ───────────────────────────────────────────────── */
.ic-comic{
  display:block; width:100%; height:auto; max-width:46rem;
  margin:1.4rem auto 2rem; border-radius:18px;
}

/* ── ordering the log ──────────────────────────────────────────────── */
.ic-sort{
  display:flex; align-items:center; justify-content:flex-end; gap:.6rem;
  margin:0 0 .9rem; font-family:Caveat,cursive; font-weight:700; font-size:1.2rem;
  color:var(--text-soft);
}
.ic-sort select{
  font:inherit; font-family:Nunito,sans-serif; font-weight:600; font-size:var(--step--1);
  color:var(--ink); background:var(--surface); border:3px solid var(--line);
  border-radius:999px; padding:.35rem .8rem; cursor:pointer;
}
.ic-sort select:focus-visible{outline:3px dashed var(--focus); outline-offset:3px}

/* ── editing a rating in place ─────────────────────────────────────── */
.ic-edit{
  display:inline-flex; align-items:center; gap:.3rem; margin-top:.8rem;
  font-family:Caveat,cursive; font-weight:700; font-size:1.15rem; cursor:pointer;
  color:var(--bubblegum-deep); background:none; border:0;
  border-bottom:2px dotted var(--line); padding:0 0 .1rem;
}
.ic-edit:hover{border-bottom-style:solid}
.ic-edit:focus-visible{outline:3px dashed var(--focus); outline-offset:3px; border-radius:6px}
.ic-edit .ico{font-size:1.1rem}
.ic-row.editing{border-color:var(--bubblegum); border-style:dashed; background:var(--surface-2)}
.ic-row.editing .ic-fields{margin-top:.2rem}
.ic-row.editing input,.ic-row.editing textarea{
  display:block; width:100%; margin-top:.25rem; font:inherit; font-weight:600;
  color:var(--ink); background:var(--milk); border:3px solid var(--line);
  border-radius:14px; padding:.5rem .8rem;
}
.ic-row.editing label{
  display:block; font-family:Caveat,cursive; font-weight:700;
  font-size:1.15rem; color:var(--text-soft);
}
.ic-editbtns{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}

/* ── build the royal cone (the stacking game) ──────────────────────── */
.cone-game{
  max-width:34rem; margin:1.2rem auto 0;
  /* the HUD below reacts to THIS width, not the window's — the game sits in
     a padded panel, so the viewport is the wrong thing to ask */
  container-type:inline-size;
}
.cone-hud{
  /* Three columns rather than space-between: with flex, the middle item is
     wherever equal gaps leave it, which is not the centre unless the two
     outer items happen to be the same width. A 1fr-auto-1fr grid pins the
     score left and the best right and genuinely centres the streak badge.
     align-items is centre, not baseline — the badge is a padded chip, and
     matching its text baseline to plain text hangs it below the line.
     min-height reserves the badge's row so nothing nudges when it appears. */
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:.6rem;
  font-family:Caveat,cursive; font-weight:700; font-size:1.3rem; color:var(--text-soft);
  margin-bottom:.5rem;
}
/* Columns are assigned explicitly, not left to auto-placement: while the
   badge is display:none it is not placed at all, and "Best" would slide
   into the middle column and jump sideways the moment the badge appeared. */
.cone-hud > :nth-child(1){grid-column:1; justify-self:start}
.cone-hud .cone-streak     {grid-column:2; justify-self:center}
.cone-hud > :nth-child(3){grid-column:3; justify-self:end}
@container (max-width:26rem){
  /* On a narrow phone three columns cannot fit, and the chip wrapping would
     grow the row and shove the canvas down mid-game. Give it a row of its
     own and reserve that row whether or not it is showing, so the height
     never changes. */
  .cone-hud{
    font-size:1.1rem;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
  }
  .cone-hud > :nth-child(1){grid-column:1; grid-row:1}
  .cone-hud > :nth-child(3){grid-column:2; grid-row:1}
  .cone-hud .cone-streak{grid-column:1 / -1; grid-row:2; justify-self:center}
  .cone-streak{font-size:.7rem; padding:.1rem .5rem}
}
.cone-hud b{font-family:Grandstander,sans-serif; font-size:1.4rem; color:var(--bubblegum-deep)}
#cone-canvas{
  display:block; width:100%; touch-action:manipulation; cursor:pointer;
  background:var(--surface-2); border:3px solid var(--line); border-radius:22px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
/* The canvas is focusable so the keyboard can play it, but clicking it should
   not paint the browser's blue focus ring or tap flash over the game. */
.cone-game, #cone-canvas{
  -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none;
}
#cone-canvas:focus{outline:none}
/* keyboard users still get a visible ring */
#cone-canvas:focus-visible{outline:3px dashed var(--focus); outline-offset:4px}
/* our own drop feedback, in the quest's colours rather than the browser's */
#cone-canvas.dropping{
  border-color:var(--bubblegum-deep);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--bubblegum) 45%, transparent);
}
.cone-msg{
  margin:.7rem 0 0; min-height:1.6rem; font-family:Caveat,cursive;
  font-weight:700; font-size:1.25rem; color:var(--bubblegum-deep);
}
.cone-game .play-btn{margin-top:.5rem}

/* ── deleting a rating ─────────────────────────────────────────────── */
.ic-delete{
  display:inline-flex; align-items:center; gap:.35rem; cursor:pointer;
  font-family:Grandstander,sans-serif; font-weight:800; font-size:var(--step-0);
  /* filled at rest, not transparent: it has to be legible before you hover it,
     on a dark green background as much as on a pink one */
  color:var(--danger); background:var(--danger-bg); border:3px solid var(--danger-line);
  border-radius:999px; padding:.7rem 1.3rem; margin-left:auto;
}
.ic-delete:hover{background:var(--danger-bg-hover)}
.ic-delete.armed{background:var(--danger-strong); border-color:var(--danger-strong); color:var(--danger-on-strong)}
.ic-delete:focus-visible{outline:3px dashed var(--focus); outline-offset:3px}
.ic-delete[disabled]{opacity:.5; cursor:not-allowed}
.ic-delete .ico{font-size:1.1rem}

/* perfect-streak badge in the game HUD */
/* hidden but still occupying its place, so the row never changes height */
.cone-streak.is-quiet{visibility:hidden}
.cone-streak{
  font-family:Grandstander,sans-serif; font-weight:800; font-size:.85rem;
  color:var(--ink); background:var(--gold); border:2px solid var(--ink);
  border-radius:999px; padding:.15rem .7rem; transform:rotate(-2deg);
}


/* ── the stamp book (quest three) ──────────────────────────────────── */

/* the complaints desk. Four buttons, four colours — they were three pinks
   and a lilac, which read as one button repeated. The grid keeps them even
   instead of leaving an orphan on its own row. */
.grumbles{display:grid; gap:.7rem; margin-top:1.2rem; grid-template-columns:1fr}
@media (min-width:34rem){
  /* two by two, always even — auto-fit stranded the fourth on its own row */
  .grumbles{grid-template-columns:repeat(2,1fr)}
}
.grumbles .play-btn{justify-content:center; width:100%}

/* the temperature, as a thermometer rather than a checkbox: the track runs
   cold to hot, and the side she has chosen is the side that lights up */
.grumble-temp{
  display:flex; align-items:center; gap:.8rem;
  justify-content:center; flex-wrap:wrap; margin-top:1.1rem;
}
.tempswitch{
  display:inline-flex; align-items:center; gap:.7rem;
  background:var(--block-face); border:3px solid var(--line); border-radius:999px;
  padding:.45rem 1.1rem; cursor:pointer;
  font-family:Grandstander,sans-serif; font-weight:800; font-size:var(--step--1);
}
.tempswitch input{position:absolute; width:1px; height:1px; opacity:0}
.tempswitch i{
  width:3.4rem; height:1.7rem; border-radius:999px; flex:none; position:relative;
  background:linear-gradient(90deg, var(--sky), var(--ember));
  border:2px solid var(--line);
}
.tempswitch i::after{
  content:""; position:absolute; top:.15rem; left:.2rem;
  width:1.15rem; height:1.15rem; border-radius:50%;
  background:var(--milk); border:2px solid var(--ink);
  transition:transform .18s cubic-bezier(.2,1.6,.4,1);
}
.tempswitch input:checked + i::after{transform:translateX(1.65rem)}
.tempswitch input:focus-visible + i{outline:3px dashed var(--focus); outline-offset:3px}
.tempswitch span{display:inline-flex; align-items:center; gap:.35rem; color:var(--text-soft)}
.tempswitch .ico{font-size:1.1rem}
/* whichever side is chosen says so, in its own colour */
.tempswitch:has(input:not(:checked)) .cold{color:var(--sky)}
.tempswitch:has(input:checked) .hot{color:var(--ember)}

/* the reply, wearing the colour of the button that caused it. Its tail
   points up at the controls rather than left at nothing — this section has
   no bunny standing beside the bubble. */
.desk-reply{
  /* the tail sticks 17px above the bubble, so the gap has to clear that
     before it starts looking like a gap at all */
  margin-top:1.7rem;
}
.desk-reply::after{
  left:calc(50% - 14px); top:-17px;
  border-right-color:transparent; border-bottom-color:var(--line);
}
.desk-reply .glyph{
  display:grid; place-items:center; width:3.1rem; height:3.1rem; margin:0 auto .5rem;
  border-radius:50%; border:3px solid var(--ink); background:var(--bubblegum);
  color:var(--ink); font-size:1.6rem;
}
.desk-reply[data-tone="snack"] .glyph{background:var(--gold)}
.desk-reply[data-tone="legs"] .glyph{background:var(--lilac)}
.desk-reply[data-tone="there"] .glyph{background:var(--mint)}
.desk-reply[data-tone="cold"] .glyph{background:var(--sky)}
.desk-reply[data-tone="hot"] .glyph{background:var(--ember)}

/* the tally, as a filed docket rather than a line of italics */
.grumble-tally{margin:1rem 0 0; text-align:center}
.tally-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--surface-2); border:3px solid var(--line); border-radius:999px;
  padding:.35rem 1.1rem; font-family:Caveat,cursive; font-weight:700;
  font-size:1.15rem; color:var(--text-soft);
}
.tally-chip .ico{font-size:1.1rem; color:var(--bubblegum-deep)}

/* the book: pages, navigation, progress */
.book-progress{
  margin:.3rem 0 0; font-family:Caveat,cursive; font-weight:700;
  font-size:1.25rem; color:var(--text-soft);
}
.book-nav{
  display:flex; align-items:center; justify-content:center;
  gap:.8rem; flex-wrap:wrap; margin-top:1rem;
}
.book-nav .play-btn[disabled]{opacity:.45; cursor:not-allowed}
.book-page{margin:0; text-align:center; min-width:12rem}
.book-page b{
  display:block; font-family:Grandstander,sans-serif;
  font-size:var(--step-1); color:var(--bubblegum-deep);
}
.book-page span{font-family:Caveat,cursive; font-weight:700; color:var(--text-soft)}
.book-status{margin:0; font-family:Caveat,cursive; font-weight:700; color:var(--bubblegum-deep)}

ul.page{
  list-style:none; padding:0; margin:1rem 0 0; text-align:left;
  display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));
}
.slot{
  background:var(--surface); border:3px solid var(--line); border-radius:20px;
  padding:.9rem 1rem; display:flex; flex-direction:column; gap:.3rem;
}
.slot-head{display:flex; flex-direction:column; gap:.1rem}
.slot > b, .slot-head b{
  font-family:Grandstander,sans-serif; font-size:var(--step-0); color:var(--bubblegum-deep);
}
.slot-meta{font-family:Caveat,cursive; font-weight:700; font-size:1.1rem; color:var(--text-soft)}
.slot-alts{margin:0; font-size:var(--step--1); color:var(--text-soft)}
.slot-waiting{
  margin:auto 0 0; font-family:Caveat,cursive; font-weight:700;
  font-size:1.1rem; color:var(--text-soft);
}
.slot-ticks{
  margin:.2rem 0 0; font-family:Caveat,cursive; font-weight:700;
  font-size:1.05rem; color:var(--text-soft);
}
.slot-notes{margin:.2rem 0 0; font-size:var(--step--1)}
.slot-photo{
  width:100%; margin-top:.4rem; border-radius:14px; border:3px solid var(--line);
}
/* a card is a narrow column, so the ten mountains share its width rather
   than wrapping onto a second line */
.slot .rating{
  margin-left:0; width:100%; flex-wrap:nowrap; gap:1%;
  align-items:flex-start; font-size:1.3rem;
}
.slot .rating .rating-cell{flex:1 1 0; width:auto; height:auto; aspect-ratio:var(--ar)}
.slot-edit,.stampbtn{align-self:flex-start; margin-top:.4rem}
.slot-edit{
  font:800 var(--step--1) Grandstander,sans-serif; color:var(--text-soft);
  background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:.3rem;
}
.slot-edit:hover{color:var(--bubblegum-deep)}
.slot.editing{grid-column:1 / -1}
.empty-note{
  grid-column:1 / -1; text-align:center; border-style:dashed;
  font-family:Caveat,cursive; font-weight:700; font-size:1.2rem; color:var(--text-soft);
}
.own-actions{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:1rem}

/* the stamp itself — bookstamp, not .stamp: that one is the gold sticker on
   the exam quest's hero, and inheriting its background turned this yellow */
.bookstamp{display:block; width:min(100%,10.5rem); height:auto; margin:.4rem auto}
.bookstamp-ring{fill:none; stroke:var(--bubblegum); stroke-width:4.6}
.bookstamp-ring.thin{stroke-width:2.4; opacity:.55}
.bookstamp-arc{fill:var(--bubblegum); font-family:Grandstander,sans-serif; font-weight:800}
.bookstamp-crown{fill:var(--gold); stroke:var(--bubblegum); stroke-width:2.2; stroke-linejoin:round}
.bookstamp-name{fill:var(--text); font-family:Grandstander,sans-serif; font-weight:800}
.bookstamp-alt{fill:var(--bubblegum); font-family:Caveat,cursive; font-weight:700}

/* the stamping form */
.stampform-title{
  margin:0 0 .4rem; font-family:Grandstander,sans-serif; font-weight:800;
  font-size:var(--step-1); color:var(--bubblegum-deep);
}
fieldset.ticks{
  border:0; padding:0; margin:1rem 0 0;
  display:grid; gap:.45rem; grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));
}
fieldset.ticks legend{
  font-family:Caveat,cursive; font-weight:700; font-size:1.2rem; color:var(--text-soft);
}
/* wins over `.stampform label`, which is block by default in these forms */
.stampform .tickbox{
  display:flex; align-items:center; gap:.5rem; cursor:pointer;
  font-size:var(--step--1); font-family:Nunito,sans-serif; font-weight:600;
  color:var(--text);
}
.stampform .tickbox input{position:absolute; width:1px; height:1px; opacity:0}
.tickmark{
  flex:none; display:grid; place-items:center; width:1.9rem; height:1.9rem;
  border:3px solid var(--line); border-radius:9px; background:var(--block-face);
  color:transparent; transition:color .12s, border-color .12s;
}
.tickmark .ico{font-size:1.05rem}
.stampform .tickbox input:checked + .tickmark{color:var(--bubblegum-deep); border-color:var(--bubblegum)}
.stampform .tickbox input:focus-visible + .tickmark{outline:3px dashed var(--focus); outline-offset:2px}

/* optional-field hint and the brand chip */
.ic-optional{
  font-family:Nunito,sans-serif; font-weight:600; font-size:.7rem;
  color:var(--text-soft); background:var(--milk); border:2px solid var(--line);
  border-radius:999px; padding:.05rem .45rem; margin-left:.3rem; vertical-align:middle;
}
.ic-brand{
  font-family:Nunito,sans-serif; font-weight:700; font-size:.72rem;
  color:var(--ink); background:var(--gold); border:2px solid var(--ink);
  border-radius:999px; padding:.1rem .6rem; letter-spacing:.02em;
}

/* pagination */
.pager{display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:1.4rem}
.pager button{
  font-family:Grandstander,sans-serif; font-weight:800; font-size:var(--step--1);
  color:var(--ink); background:var(--surface); border:3px solid var(--line);
  border-radius:999px; padding:.4rem .9rem; cursor:pointer; min-width:2.6rem;
}
.pager button:hover:not([disabled]){background:var(--surface-2)}
.pager button.current{background:var(--bubblegum); border-color:var(--ink)}
.pager button[disabled]{opacity:.4; cursor:not-allowed}
.pager button:focus-visible{outline:3px dashed var(--focus); outline-offset:3px}
.pager-count{
  text-align:center; margin:.6rem 0 0; font-family:Caveat,cursive;
  font-weight:700; font-size:1.15rem; color:var(--text-soft);
}


/* the route she took, and the link out */
.slot-route{
  margin:.25rem 0 0; display:flex; align-items:flex-start; gap:.4rem;
  font-size:var(--step--1); color:var(--text-soft);
}
.slot-route .ico{flex:none; margin-top:.18rem; color:var(--mint)}
.slot-link{
  align-self:flex-start; margin-top:.5rem; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:.4rem;
  font:800 var(--step--1) Grandstander,sans-serif; color:var(--ink);
  background:var(--sky); border:3px solid var(--ink); border-radius:999px;
  padding:.35rem .9rem; box-shadow:0 4px 0 var(--ink);
  transition:transform .1s, box-shadow .1s;
}
.slot-link:active{transform:translateY(3px); box-shadow:0 1px 0 var(--ink)}
.slot-link:focus-visible{outline:3px dashed var(--focus); outline-offset:3px}

/* the door out: asked before every trip to somebody else's site */
dialog.leaving{
  width:min(100%,30rem); max-width:calc(100vw - 1.5rem); padding:1.4rem 1.5rem 1.2rem;
  border:4px solid var(--line); border-radius:26px;
  background:var(--surface); color:var(--text); text-align:center;
}
dialog.leaving::backdrop{background:rgba(12,24,18,.62)}
.leaving-title{
  margin:0 0 .6rem; font-family:Grandstander,sans-serif; font-weight:800;
  font-size:var(--step-2); color:var(--bubblegum-deep);
}
.leaving-body{margin:0; font-size:var(--step-0); line-height:1.5}
.leaving-body b{color:var(--bubblegum-deep)}
.leaving-where{
  margin:.7rem 0 0; font-family:Caveat,cursive; font-weight:700;
  font-size:1.15rem; color:var(--text-soft);
}
.leaving-btns{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:1.2rem}

/* princess mode toggle — only rendered for her */
.cone-mode{
  display:flex; align-items:center; gap:.5rem; justify-content:center;
  margin:0 0 .6rem; cursor:pointer; user-select:none;
  font-family:Grandstander,sans-serif; font-weight:800; font-size:var(--step--1);
  color:var(--bubblegum-deep);
}
.cone-mode input{width:1.1rem; height:1.1rem; accent-color:var(--bubblegum-deep); cursor:pointer}
.cone-mode span{display:inline-flex; align-items:center; gap:.35rem}
.cone-mode .ico{font-size:1.2rem}
.cone-mode:hover{color:var(--ink)}


/* searching and ordering her own hikes */
.hike-tools{
  display:flex; flex-wrap:wrap; gap:.7rem; align-items:center;
  justify-content:center; margin:1.1rem 0 0;
}
.hike-search{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--surface); border:3px solid var(--line); border-radius:999px;
  padding:.35rem .9rem; color:var(--text-soft);
}
.hike-search input{
  font:600 var(--step--1) Nunito,sans-serif; color:var(--text);
  background:none; border:0; padding:.15rem 0; width:min(52vw,13rem);
}
.hike-search input::placeholder{color:var(--text-soft); font-style:italic; font-weight:400}
.hike-search input:focus{outline:none}
.hike-search:focus-within{outline:3px dashed var(--focus); outline-offset:3px}
.hike-order{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:Caveat,cursive; font-weight:700; font-size:1.2rem; color:var(--text-soft);
}
.hike-order select{
  font:600 var(--step--1) Nunito,sans-serif; color:var(--text);
  background:var(--surface); border:3px solid var(--line); border-radius:999px;
  padding:.35rem .8rem; cursor:pointer;
}
.hike-order select:focus-visible{outline:3px dashed var(--focus); outline-offset:3px}

/* ── the hike wishlist ─────────────────────────────────────────────── */
.wish-actions{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-bottom:1.2rem}
.wish-list{list-style:none; padding:0; margin:0; display:grid; gap:.9rem; text-align:left}
.wish-row{
  background:var(--surface); border:3px solid var(--line); border-radius:22px;
  padding:1rem 1.2rem;
}
.wish-row.editing{border-style:dashed; border-color:var(--bubblegum); background:var(--surface-2)}
.wish-head{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.wish-head b{font-family:Grandstander,sans-serif; font-size:var(--step-1); color:var(--bubblegum-deep)}
.wish-head .ico{font-size:1.5rem; color:var(--bubblegum-deep)}
.wish-alt{
  font-family:Nunito,sans-serif; font-weight:700; font-size:.72rem;
  color:var(--ink); background:var(--gold); border:2px solid var(--ink);
  border-radius:999px; padding:.1rem .6rem;
}
.wish-note{margin:.6rem 0 0; color:var(--text-soft)}
.wish-buttons{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:.9rem}
.wish-buttons .ic-delete{margin-left:auto}
.wish-empty{
  text-align:center; font-family:Caveat,cursive; font-weight:700;
  font-size:1.3rem; color:var(--text-soft); padding:1.5rem;
}
.wish-status{
  min-height:1.5rem; margin:.8rem 0 0; text-align:center;
  font-family:Caveat,cursive; font-weight:700; font-size:1.2rem; color:var(--bubblegum-deep);
}
.wish-form label{display:block; font-family:Caveat,cursive; font-weight:700; font-size:1.15rem; color:var(--text-soft)}
.wish-form input,.wish-form textarea{
  display:block; width:100%; margin-top:.25rem; font:inherit; font-weight:600;
  color:var(--ink); background:var(--milk); border:3px solid var(--line);
  border-radius:14px; padding:.5rem .8rem;
}

/* ── the warrior's post ────────────────────────────────────────────── */
.vis-badge{
  display:inline-flex; align-items:center; gap:.25rem;
  font-family:Nunito,sans-serif; font-weight:700; font-size:.7rem;
  color:var(--ink); background:var(--lilac); border:2px solid var(--ink);
  border-radius:999px; padding:.1rem .55rem;
}
.vis-badge .ico{font-size:.9rem}
.post-answerform{margin-top:.9rem}
.post-answerform input{
  display:block; width:100%; margin-top:.25rem; font:inherit; font-weight:600;
  color:var(--ink); background:var(--milk); border:3px solid var(--line);
  border-radius:14px; padding:.5rem .8rem;
}
.post-answerform label{
  display:block; font-family:Caveat,cursive; font-weight:700;
  font-size:1.15rem; color:var(--text-soft);
}
.post-answer{
  display:flex; align-items:center; gap:.4rem; margin:.9rem 0 0;
  font-weight:600; border-radius:16px; padding:.6rem .9rem;
}
.post-answer .ico{font-size:1.2rem; flex:none}
.post-answer.accepted{background:color-mix(in srgb, var(--mint) 35%, var(--surface)); color:var(--ink)}
.post-answer.declined{background:var(--danger-bg); color:var(--danger)}

/* the who-can-see-this control */
fieldset.vis-picker{
  border:3px solid var(--line); border-radius:18px; margin:1rem 0 0;
  padding:.7rem 1rem 1rem; display:grid; gap:.4rem;
}
fieldset.vis-picker legend{
  font-family:Caveat,cursive; font-weight:700; font-size:1.2rem;
  color:var(--text-soft); padding:0 .4rem;
}
/* The surrounding forms style bare `label` and `input`, and `.ic-form label`
   is more specific than a single class — so these are scoped to the fieldset
   to win outright rather than by source order. */
fieldset.vis-picker .vis-option{
  display:grid; grid-template-columns:auto auto 1fr; align-items:baseline;
  gap:.1rem .6rem; margin:0; cursor:pointer;
  font-family:Nunito,sans-serif; font-size:var(--step--1); font-weight:400;
}
fieldset.vis-picker .vis-option input{
  display:inline-block; width:1.05rem; height:1.05rem; margin:0; padding:0;
  accent-color:var(--bubblegum-deep); cursor:pointer; align-self:center;
  background:none; border:0; border-radius:0;
}
fieldset.vis-picker .vis-label{font-weight:800; color:var(--ink); white-space:nowrap}
fieldset.vis-picker .vis-note{color:var(--text-soft)}
@media (max-width:30rem){
  fieldset.vis-picker .vis-option{grid-template-columns:auto 1fr}
  fieldset.vis-picker .vis-note{grid-column:2}
}

/* waiting on an answer */
.post-waiting{
  display:flex; align-items:center; gap:.4rem; margin:.9rem 0 0;
  font-family:Caveat,cursive; font-weight:700; font-size:1.15rem; color:var(--text-soft);
}
.post-waiting .ico{font-size:1.15rem}

/* ── the chamberlain's guest list ──────────────────────────────────── */
.quest-admin{list-style:none; padding:0; margin:0; display:grid; gap:.9rem; text-align:left}
.quest-admin-row{
  background:var(--surface); border:3px solid var(--line); border-radius:22px;
  padding:1rem 1.2rem; display:grid; gap:.6rem;
}
.quest-admin-name{
  display:flex; align-items:center; gap:.5rem;
  font-family:Grandstander,sans-serif; font-size:var(--step-1); color:var(--bubblegum-deep);
}
.quest-admin-name .ico{font-size:1.4rem}
.quest-admin-row fieldset.vis-picker{margin:0; border-width:2px}
.questvis{margin-left:.4rem; vertical-align:middle}

/* the sidequest composer */
.sq-form{
  background:var(--surface-2); border:3px solid var(--line); border-radius:26px;
  padding:1.2rem clamp(1rem,3vw,1.8rem); margin-bottom:1.6rem; text-align:left;
}
.sq-form label{display:block; font-family:Caveat,cursive; font-weight:700; font-size:1.2rem; color:var(--text-soft)}
.sq-form input,.sq-form textarea{
  display:block; width:100%; margin-top:.25rem; font:inherit; font-weight:600;
  color:var(--ink); background:var(--milk); border:3px solid var(--line);
  border-radius:14px; padding:.5rem .8rem;
}
.sq-urgent{
  font-family:Grandstander,sans-serif; font-weight:800; font-size:.68rem; letter-spacing:.06em;
  color:var(--danger-on-strong); background:var(--danger-strong);
  border:2px solid var(--danger-strong); border-radius:999px; padding:.12rem .6rem;
}

/* ── the summons, on his page ──────────────────────────────────────── */
.post-subhead{
  display:flex; align-items:center; gap:.45rem; margin:2rem 0 .8rem;
  font-family:Grandstander,sans-serif; font-size:var(--step-1); color:var(--bubblegum-deep);
}
.summons-banner{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin:0 0 1rem; padding:.7rem 1rem; text-align:center;
  font-family:Grandstander,sans-serif; font-weight:800; letter-spacing:.04em;
  color:var(--ink); background:var(--gold); border:4px solid var(--ink);
  border-radius:var(--wobble-alt); transform:rotate(-1.2deg);
  animation:summons-nudge 2.4s ease-in-out infinite;
}
.summons-banner .ico{font-size:1.4rem}
@keyframes summons-nudge{0%,92%,100%{transform:rotate(-1.2deg)}96%{transform:rotate(1.6deg) scale(1.02)}}
.summons-card{
  background:var(--surface); border:4px solid var(--bubblegum); border-radius:var(--wobble);
  padding:1.2rem clamp(1rem,3vw,1.6rem); margin-bottom:1rem; text-align:left;
}
.summons-card.immediately{border-color:var(--danger-strong)}
.summons-card.settled{border-style:dashed; opacity:.85}
.summons-cry{
  margin:0 0 .3rem; font-family:Caveat,cursive; font-weight:700;
  font-size:1.2rem; color:var(--bubblegum-deep);
}
.summons-card.immediately .summons-cry{color:var(--danger)}
.summons-title{
  margin:0; font-family:Grandstander,sans-serif; font-weight:800;
  font-size:var(--step-2); line-height:1.15; color:var(--ink);
}
.summons-detail{margin:.5rem 0 0; color:var(--text-soft)}

/* grouping on the warrior's post */
.post-group{
  list-style:none; margin:1.2rem 0 .2rem; font-family:Caveat,cursive;
  font-weight:700; font-size:1.25rem; color:var(--text-soft);
  border-bottom:2px dotted var(--line); padding-bottom:.2rem;
}
.post-group:first-child{margin-top:0}
.post-walked{
  display:flex; align-items:center; gap:.4rem; margin:.7rem 0 0;
  font-family:Caveat,cursive; font-weight:700; font-size:1.15rem; color:var(--text-soft);
}
.post-walked .ico{font-size:1.15rem}


/* ── the eclipse (quest four) ─────────────────────────────────────────
   The stage is one picture in layers. Nothing is repainted on a phase
   change: four skies sit on top of each other and cross-fade, the deep sky
   fades in, the ridges change colour, and the sun's bloom shrinks. All of it
   is CSS, so reduced motion can slow or silence any part of it. */

.ec-hint{
  margin:.8rem 0 0; font-family:Caveat,cursive; font-weight:700;
  font-size:1.2rem; color:var(--text-soft);
  display:inline-flex; align-items:center; gap:.45rem;
}
.ec-seen{
  margin:.8rem 0 0; font-family:Caveat,cursive; font-weight:700;
  font-size:1.15rem; color:var(--gold);
}
.ec-game{max-width:44rem; margin:0 auto}
.ec-stage{
  position:relative; aspect-ratio:5 / 3; width:100%;
  border:3px solid var(--line); border-radius:26px; overflow:hidden;
  box-shadow:var(--shadow-soft); background:#0B0F26;
  touch-action:none;                     /* dragging the lens, not the page */
}
.ec-sky, .ec-lensbox{position:absolute; inset:0; width:100%; height:100%; display:block}
.ec-lensbox{cursor:grab}
.ec-lensbox:active{cursor:grabbing}

/* the four skies */
.ec-layer{opacity:0; transition:opacity 1.3s ease}
/* the warm part of the sky, centred on the sun and moved with it each frame */
.ec-glowlayer{opacity:1; transition:opacity 1.3s ease}
.ec-stage[data-sky="eclipse"] .ec-glowlayer{opacity:.5}
.ec-stage[data-sky="night"] .ec-glowlayer{opacity:0}
.ec-stage[data-sky="glare"] .ec-glowlayer{opacity:1}
.ec-stage[data-sky="dusk"] .ec-layer[data-for="dusk"],
.ec-stage[data-sky="eclipse"] .ec-layer[data-for="eclipse"],
.ec-stage[data-sky="night"] .ec-layer[data-for="night"],
.ec-stage[data-sky="glare"] .ec-layer[data-for="glare"]{opacity:1}
/* the glare is the one that has to arrive slowly and leave quickly */
.ec-stage[data-sky="glare"] .ec-layer[data-for="glare"]{transition-duration:1.5s}
/* night takes its time: the sky, the warmth and the sun all fade at their own
   rates, which is what makes it read as dusk turning over rather than a cut */
.ec-stage[data-sky="night"] .ec-layer[data-for="night"]{transition-duration:2.8s}
.ec-stage[data-sky="night"] .ec-glowlayer{transition-duration:2.6s}
.ec-stage[data-sky="night"] .ec-sunwrap{transition-duration:2.2s}
.ec-stage[data-sky="night"] .ec-stage[data-sky="night"] .ec-ridge{transition-duration:2.6s}

/* stars, milky way, shooting stars: absent by day. Coming out is deliberately
   slower than going in, and lags the sky's own darkening, so night falls in
   stages: colour first, then the faint stars, then the bright ones. */
.ec-deep{opacity:0; transition:opacity 1.6s ease}
.ec-stage[data-sky="night"] .ec-deep{transition:opacity 3s ease .7s}
.ec-stage[data-sky="eclipse"] .ec-deep{opacity:.55}
.ec-stage[data-sky="night"] .ec-deep{opacity:1}
/* Stars come in four tints — mostly white, a few warm, blue and pink. Real
   skies are not monochrome, and four is enough to notice without turning it
   into a fruit bowl. */
.ec-star{fill:#FFFFFF; animation:ec-twinkle 3.4s ease-in-out var(--d,0s) infinite alternate}
.ec-star[data-tint="1"]{fill:#FFF1D2}
.ec-star[data-tint="2"]{fill:#D3E2FF}
.ec-star[data-tint="3"]{fill:#FFDCE8}
@keyframes ec-twinkle{from{opacity:.35}to{opacity:1}}

/* the blurred copies of the whole dot field, sitting under the sharp one: a
   little light around every star, and more of it where they crowd together */
.ec-skybloom{opacity:.66}
.ec-skybloom.wide{opacity:.34}
/* and the band's own wider glow on top of that */
.ec-bandbloom{opacity:.5}
/* the stars emit a little more than the band: enough to read as light
   sources, not enough to turn them back into orbs */
.ec-starbloom{opacity:.42}

/* the galaxy: finer, dimmer, cooler, and it does not twinkle — three hundred
   blinking specks would be a fairground */
/* blue and violet, with white-ish in the mix — the blurred copies pick these
   colours up, so the band's emission is coloured rather than grey */
.ec-mw{fill:#CFE0FF; opacity:var(--o,.4)}
.ec-mw[data-tint="1"]{fill:#A8BEFF}
.ec-mw[data-tint="2"]{fill:#CBAEF7}
.ec-mw[data-tint="3"]{fill:#8FA6F2}
/* A streak made of dots, all riding the same curved path, each starting a
   little later than the one in front so the tail lags, bends and thins out
   behind the head without a single stroke being drawn. */
.ec-spark{
  fill:#FFF7E6; offset-distance:0%; offset-rotate:0deg; opacity:0;
  /* the tail glows like the stars do */
  filter:drop-shadow(0 0 .45px #FFF1D0) drop-shadow(0 0 1.1px #FFC585);
}
.ec-stage[data-sky="night"] .ec-spark{
  animation:ec-fly var(--dur,8s) linear calc(var(--delay,0s) + var(--lag,0s)) infinite;
}
/* a short, quick flight: the streak crosses in about a seventh of the cycle,
   and the tail is long because two dozen dots trail it, not because it lingers */
@keyframes ec-fly{
  0%,78%{offset-distance:0%; opacity:0}
  80%{opacity:var(--a,1)}
  92%{offset-distance:100%; opacity:calc(var(--a,1) * .5)}
  100%{offset-distance:100%; opacity:0}
}

/* the sun: a hot disc and a wide bloom that shrinks as the moon bites in.
   No corona: at 85% covered the sun is a bright crescent, and a corona is
   something you only see at totality. */
.ec-sunwrap{transition:opacity 1.6s ease}
.ec-stage[data-sky="night"] .ec-sunwrap{opacity:0}
/* No hard rim on the sun: a stroke reads as a drawn outline. The glow does
   the work of keeping the crescent legible once the moon has most of the disc. */
.ec-sun{filter:drop-shadow(0 0 1.4px #FF9E7A) drop-shadow(0 0 3px #D8452F)}
.ec-bloom{transition:opacity .9s ease}
.ec-stage[data-sky="eclipse"] .ec-bloom{opacity:.35}
.ec-stage[data-sky="glare"] .ec-bloom{opacity:1}
.ec-stage[data-sky="eclipse"] .ec-stage[data-sky="night"] 
/* the ridges: three depths, each recoloured by the sky */
.ec-ridge{transition:fill 1.3s ease}
/* the valley floor sits deeper than the crests: depth without any geometry
   that could drift out of line with the ridges */
.ec-deepen{opacity:.9; transition:opacity 1.3s ease}
.ec-stage[data-sky="glare"] .ec-deepen{opacity:.15}
.ec-snow{fill:#F3EEFF; opacity:.85; transition:opacity 1.3s ease, fill 1.3s ease}
.ec-stage[data-sky="eclipse"] .ec-snow{opacity:.5; fill:#D9D2F0}
.ec-stage[data-sky="night"] .ec-snow{opacity:.28; fill:#8E9AD8}
.ec-stage[data-sky="glare"] .ec-snow{opacity:1; fill:#FFFFFF}
.ec-ridge.far{fill:#6E6CA6}
.ec-ridge.near{fill:#2A2648}
.ec-stage[data-sky="eclipse"] .ec-ridge.far{fill:#4A4780}
.ec-stage[data-sky="eclipse"] .ec-stage[data-sky="eclipse"] .ec-ridge.near{fill:#1B1833}
.ec-stage[data-sky="night"] .ec-ridge.far{fill:#141838}
.ec-stage[data-sky="night"] .ec-stage[data-sky="night"] .ec-ridge.near{fill:#050615}
/* in the glare only the outlines survive, which is the whole joke */
.ec-stage[data-sky="glare"] .ec-ridge.far{fill:#EFE6D6}
.ec-stage[data-sky="glare"] .ec-stage[data-sky="glare"] .ec-ridge.near{fill:#DCD1BA}

/* the lens she drags */
.ec-lens{cursor:grab; filter:drop-shadow(0 1px 1.4px rgba(0,0,0,.5))}
.ec-lens:active{cursor:grabbing}
.ec-rim{fill:none; stroke:#F3E2C8; stroke-width:.5; opacity:.75; transition:opacity .15s, stroke .15s}
.ec-lens[data-on="true"] .ec-rim{opacity:1; stroke:#FFF3D0; stroke-width:.65}
.ec-glint{fill:none; stroke:#FFFFFF; stroke-width:.55; opacity:.5; stroke-linecap:round}
.ec-handle{stroke:#E8D6B4; stroke-width:1.3; stroke-linecap:round; opacity:.85}
/* the part she actually holds: chunky, and darker so it reads as a grip */
.ec-grip{stroke:#8A6B4A; stroke-width:3.6; stroke-linecap:round}
.ec-gripline{stroke:#D9C09A; stroke-width:.55; stroke-linecap:round; opacity:.75}
/* an invisible, generous touch target around the grip */
.ec-grabpad{fill:transparent}
.ec-lens[data-on="true"] .ec-grip{stroke:#A8814F}
.ec-ring-track{fill:none; stroke:#FFFFFF; stroke-width:.6; opacity:.18}
.ec-ring{
  fill:none; stroke:var(--gold); stroke-width:.85; stroke-linecap:round;
  transform:rotate(-90deg); transform-origin:center;
  transform-box:fill-box; filter:drop-shadow(0 0 .6px var(--gold));
}
.ec-ring[data-full="true"]{stroke:#FFF6DC}
.ec-lens:focus-visible{outline:none}
.ec-lens:focus-visible .ec-ring-track{opacity:.9; stroke-dasharray:1.4 1.6}

/* what the sky says, and the controls under it */
.ec-say{
  margin:.9rem 0 0; min-height:3.2rem; text-align:center;
  font-family:Caveat,cursive; font-weight:700; font-size:1.35rem;
  color:var(--text-soft);
}
.ec-controls{display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; justify-content:center}
.ec-mode{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  font-family:Caveat,cursive; font-weight:700; font-size:1.2rem; color:var(--text-soft);
  background:var(--block-face); border:3px solid var(--line); border-radius:999px;
  padding:.35rem 1rem;
}
.ec-mode input{width:1.1rem; height:1.1rem; accent-color:var(--bubblegum)}

/* the whiteout. Fixed, page-level, and slow on the way in — an abrupt
   full-screen flash is the pattern that hurts photosensitive people. */
.ec-flash{
  position:fixed; inset:0; z-index:80; display:grid; place-content:center;
  gap:1.4rem; padding:2rem; text-align:center;
  background:radial-gradient(circle at 50% 42%, #FFFFFF 0%, #FFF8E6 60%, #FFEFD0 100%);
  opacity:0; pointer-events:none; transition:opacity 1.5s ease;
}
.ec-flash.on{opacity:1; pointer-events:auto}
.ec-flash-line{
  margin:0; max-width:24ch; font-family:Grandstander,sans-serif; font-weight:800;
  font-size:var(--step-2); color:#4A3A22;
}
.ec-flash-btn{justify-self:center}

@media (prefers-reduced-motion: reduce){
  .ec-layer, .ec-deep, .ec-sunwrap, .ec-bloom, .ec-ridge,
  .ec-stage[data-sky="night"] .ec-layer[data-for="night"],
  .ec-stage[data-sky="night"] .ec-glowlayer,
  .ec-stage[data-sky="night"] .ec-sunwrap,
  .ec-stage[data-sky="night"] .ec-ridge{
    transition-duration:.25s;
  }
  .ec-stage[data-sky="night"] .ec-deep{transition:opacity .25s ease}
  .ec-stage[data-sky="glare"] .ec-layer[data-for="glare"]{transition-duration:.3s}
  .ec-flash{transition-duration:.25s}
  .ec-star{animation:none; opacity:.85}
  .ec-shooter{opacity:0}
  .ec-stage[data-sky="night"] .ec-spark{animation:none}
}


/* the page's own shooting stars: behind all the content, never in the way of
   it, and only alive while the game says it is night */
.ec-pagesky{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:0; transition:opacity 2.4s ease .6s;
}
.ec-pagesky svg{width:100%; height:100%; display:block}
:root[data-sky="night"] .ec-pagesky{opacity:.85}
:root[data-sky="night"] .ec-pagesky .ec-spark{
  animation:ec-fly var(--dur,8s) linear calc(var(--delay,0s) + var(--lag,0s)) infinite;
}
@media (prefers-reduced-motion: reduce){
  .ec-pagesky{display:none}
}

/* the wish, which only exists under a sky full of stars */
.ec-wish{margin:1rem auto 0; max-width:32rem; text-align:center}
.ec-wish-last{
  margin:0 0 .6rem; font-family:Caveat,cursive; font-weight:700;
  font-size:1.1rem; color:var(--text-soft); font-style:italic;
}
.ec-wish-row{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center}
.ec-wish-row input{
  flex:1 1 14rem; min-width:0;
  font:600 var(--step-0) Nunito,sans-serif; color:var(--text);
  background:var(--block-face); border:3px solid var(--line); border-radius:999px;
  padding:.6rem 1.1rem;
}
.ec-wish-row input::placeholder{color:var(--text-soft); font-style:italic; font-weight:400}
.ec-wish-row input:focus-visible{outline:3px dashed var(--focus); outline-offset:3px}
.ec-wish-reply{
  margin:.7rem 0 0; min-height:2.4rem;
  display:inline-flex; align-items:flex-start; gap:.45rem;
  font-family:Caveat,cursive; font-weight:700; font-size:1.25rem; color:var(--gold);
}
.ec-wish-reply .ico{font-size:1.3rem; flex:none; margin-top:.1rem}

/* ---- tnpbirds: the bird quest ------------------------------------------ */

/* Cones behind everything, fixed so the page scrolls over them rather than
   dragging them along. Kept faint: it is wallpaper, and the birds are the
   thing being looked at. */
.tnpb{
  background-image:url("../quests/tnpbirds/img/pinecones.svg");
  background-size:240px 240px;
  background-repeat:repeat;
  background-attachment:fixed;
}

.tnpb-mode{display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem;
  font-weight:700;color:var(--text-soft);cursor:pointer}
.tnpb-mode input{width:1.1rem;height:1.1rem;accent-color:var(--bubblegum);cursor:pointer}
.tnpb-mode-note{font-weight:400;color:var(--text-soft)}
.tnpb-progress{display:flex;justify-content:space-between;font-weight:700;color:var(--text-soft)}
.tnpb-play{display:flex;gap:.6rem;align-items:center;justify-content:center;
  width:100%;padding:1.4rem;margin:1rem 0;border:3px solid var(--line);
  border-radius:1.2rem;background:var(--surface);color:var(--text);
  font:inherit;font-size:1.3rem;font-weight:700;cursor:pointer;box-shadow:var(--shadow-sm)}
.tnpb-play:active{transform:translate(3px,3px);box-shadow:none}
.tnpb-play svg{width:1.6em;height:1.6em}
.tnpb-options{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:520px){.tnpb-options{grid-template-columns:1fr}}
.tnpb-opt{display:flex;flex-direction:column;gap:.15rem;padding:.9rem;
  border:3px solid var(--line);border-radius:1rem;background:var(--surface);
  color:var(--text);font:inherit;text-align:left;cursor:pointer}
.tnpb-opt:disabled{cursor:default;opacity:1}
.tnpb-opt.is-right{background:var(--mint);border-color:var(--text)}
.tnpb-opt.is-wrong{background:var(--ember);border-color:var(--text)}
.tnpb-sl{font-weight:700;font-size:1.05rem}
.tnpb-en{font-size:.82rem;color:var(--text-soft)}
.tnpb-onward{margin-top:.9rem;text-align:center}
.tnpb-onward .tnpb-next{margin-top:0}
/* the three lifelines */
.tnpb-help{display:flex;gap:.5rem;justify-content:center;margin-top:.9rem;flex-wrap:wrap}
.tnpb-lifeline{display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .9rem;border:3px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--text);font:inherit;font-weight:700;
  font-size:.9rem;cursor:pointer}
.tnpb-lifeline:hover:not(:disabled){border-color:var(--text)}
.tnpb-lifeline:disabled{opacity:.4;cursor:default;text-decoration:line-through}
.tnpb-lifeline svg{width:1.05em;height:1.05em}

.tnpb-aside:empty{display:none}
.tnpb-aside{margin-top:1rem;padding:.9rem;border:3px dashed var(--line);
  border-radius:1rem;background:var(--surface)}
.tnpb-aside-title{margin:0 0 .6rem;font-weight:700;text-align:center;color:var(--text-soft)}

.tnpb-poll{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.tnpb-poll li{display:grid;grid-template-columns:minmax(6rem,9rem) 1fr 2.6rem;
  align-items:center;gap:.5rem}
.tnpb-poll-name{font-weight:700;font-size:.9rem}
.tnpb-poll-bar{height:.9rem;border:2px solid var(--text);border-radius:999px;
  background:var(--blush);overflow:hidden}
.tnpb-poll-bar i{display:block;height:100%;background:var(--mint)}
.tnpb-poll-pct{text-align:right;font-weight:700;font-size:.85rem}
@media (max-width:420px){.tnpb-poll li{grid-template-columns:1fr 2.6rem}
  .tnpb-poll-bar{grid-column:1 / -1;order:3}}

.tnpb-call{text-align:center}
.tnpb-call-ring{margin:0 0 .4rem;color:var(--text-soft);letter-spacing:.14em}
.tnpb-call-line{margin:.15rem 0;color:var(--text-soft)}
.tnpb-call-name{margin:.5rem 0;font-size:1.35rem;font-weight:800;line-height:1.15}
.tnpb-call-name span{display:block;font-size:.85rem;font-weight:400;color:var(--text-soft)}

.tnpb-reveal{margin-top:1.2rem;text-align:center}
.tnpb-verdict{font-size:1.2rem;font-weight:700}
.tnpb-name{margin:.1rem 0}
.tnpb-what{color:var(--text-soft);font-style:italic}
.tnpb-credit{font-size:.78rem;color:var(--text-soft)}
.tnpb-next,.tnpb-again{margin-top:.8rem;padding:.7rem 1.6rem;border:3px solid var(--text);
  border-radius:999px;background:var(--bubblegum);color:var(--milk);
  font:inherit;font-weight:700;cursor:pointer}
.tnpb-final{text-align:center}
.tnpb-big{font-size:3rem;font-weight:800;margin:.2rem 0}

/* the little info button beside the bird's name, and the photograph it opens */
.tnpb-info{display:inline-flex;align-items:center;justify-content:center;
  width:1.5rem;height:1.5rem;margin-left:.4rem;padding:0;vertical-align:-.3rem;
  border:2px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--text-soft);cursor:pointer}
.tnpb-info:hover{color:var(--text);border-color:var(--text)}
.tnpb-info svg{width:.95rem;height:.95rem}

.tnpb-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  padding:1rem;background:rgba(61,43,28,.55)}
.tnpb-modal-card{position:relative;max-width:min(92vw,34rem);max-height:88vh;
  overflow:auto;padding:1rem;border:3px solid var(--text);border-radius:1.2rem;
  background:var(--surface);text-align:center;box-shadow:var(--shadow-soft)}
.tnpb-modal-card img{display:block;width:100%;height:auto;border-radius:.8rem}
.tnpb-modal-x{position:absolute;top:.5rem;right:.5rem;width:2rem;height:2rem;
  border:2px solid var(--text);border-radius:999px;background:var(--surface);
  color:var(--text);font:inherit;font-size:1.1rem;line-height:1;cursor:pointer}
.tnpb-modal-name{margin:.6rem 0 0}
.tnpb-modal-sci{margin:0;font-style:italic;color:var(--text-soft);font-size:.85rem}
.tnpb-modal-fail{margin:2rem 0;color:var(--text-soft)}

/* the warrior's toast: slides up from the foot, leaves on its own */
.tnpb-toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,150%);
  max-width:min(92vw,26rem);margin:0;padding:.85rem 1.3rem;
  border:3px solid var(--text);border-radius:999px;
  background:var(--gold);color:var(--text);
  font-weight:700;text-align:center;box-shadow:var(--shadow-sm);
  transition:transform .28s ease;z-index:50;pointer-events:none}
.tnpb-toast.is-up{transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.tnpb-toast{transition:none}}

/* ---- long words and pasted links ---------------------------------------

   Anything a person typed can contain a URL with no break opportunity in it.
   One hike note holding a hribi.net link pushed the whole page sideways on a
   phone: the note could not wrap, so its row measured 686px inside a 454px
   screen and every sibling stretched to match. The note was the cause; the
   row and its neighbours were only victims.

   `anywhere` rather than `break-word` for the user-written fields, because
   `anywhere` also shrinks the intrinsic minimum width — which is what a flex
   or grid track measures when deciding how wide to be. `break-word` alone
   wraps the text but leaves the track just as wide. */
#view p, #view li, #view dd, #view td{ overflow-wrap:break-word }

/* Scoped to #view so these outrank the `#view p` safety net above — an id
   selector beats a class, and without this the `anywhere` never applies. */
#view .wish-note, #view .wish-head, #view .desk-reply, #view .ec-wish,
#view .ec-wish-reply, #view .grumbles, #view .vis-note,
#view .leaving-body, #view .cone-msg{ overflow-wrap:anywhere }

/* A flex or grid child refuses to shrink below its content unless told. */
.wish-row, .wish-head, .wish-list > *{ min-width:0 }