/* Starlight: a capiz parol at dusk. Night ground, lit ivory panes, bamboo-gold ribs. */

@font-face {
  font-family: "Gloock";
  src: url("/fonts/gloock.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-next.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-next-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --night-0: #0f1528;
  --night: #151d33;
  --night-1: #1c2541;
  --night-2: #283456;
  --line: rgba(222, 204, 170, 0.16);
  --text: #f1ecf7;
  --text-soft: #bab6d0;
  --text-faint: #8f8ba8;

  --ivory: #f7efe1;
  --ivory-2: #efe3cd;
  --pane-ink: #2b2230;
  --pane-soft: #5c4f5f;

  --rib: #c9a46b;
  --rib-deep: #7a5826;
  --amber: #f0b46a;
  --amber-hi: #f6c487;
  --rose: #e6a0a6;
  --sea: #8fcbb8;
  --danger: #f19a9a;
  --danger-ink: #8f2a31;

  --display: "Gloock", "Iowan Old Style", Georgia, serif;
  --text-face: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  background: var(--night);
  color-scheme: dark;
  scrollbar-color: var(--night-2) var(--night-0);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 400 17px/1.55 var(--text-face);
  caret-color: var(--amber);
  background: var(--night);
}
::selection { background: var(--amber); color: #2b1d0e; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
h1 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 6.5vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-top: 0.4rem;
}
h2 { font-family: var(--display); font-size: 1.55rem; line-height: 1.15; }
a { color: var(--amber-hi); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lede { color: var(--text-soft); max-width: 58ch; margin: 0.7rem 0 0; font-size: 1.05rem; }
.muted { color: var(--text-soft); }

.skip {
  position: absolute; left: 1rem; top: -3rem; padding: 0.5rem 0.8rem; border-radius: 8px;
  background: var(--amber); color: #2b1d0e; font-weight: 700; z-index: 10;
}
.skip:focus { top: 1rem; }

/* Night sky */
.sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sky i {
  position: absolute; width: var(--s); height: var(--s); border-radius: 50%;
  background: #f1ecf7; opacity: var(--o);
  animation: twinkle var(--t) ease-in-out var(--d) infinite;
}
.sky i:nth-child(5n) { background: #f6e3bf; }
@keyframes twinkle { 50% { opacity: calc(var(--o) * 0.25); } }
.shoot {
  position: absolute; width: 140px; height: 1.5px; border-radius: 2px; background: #f8ecd4;
  transform-origin: 0 50%; rotate: -28deg; opacity: 0;
  animation: shoot var(--t) linear var(--d) infinite;
}
.shoot::before {
  content: ""; position: absolute; left: -2px; top: -1.5px; width: 4.5px; height: 4.5px; border-radius: 50%; background: #fffaf0;
}
@keyframes shoot {
  0% { opacity: 0; translate: 0 0; scale: 0.2 1; }
  1% { opacity: 1; }
  5% { opacity: 0.9; scale: 1 1; }
  8% { opacity: 0; translate: -340px 180px; scale: 0.6 1; }
  100% { opacity: 0; translate: -340px 180px; }
}

/* Parol */
.parol { display: block; overflow: visible; }
.parol .pane-a, .parol .pane-b { stroke: none; }
.parol .parol-frame { fill: none; stroke: var(--rib); stroke-width: 2.2; stroke-linejoin: round; }
.parol .parol-rib { stroke: var(--rib); stroke-width: 1.1; opacity: 0.75; }
.parol .parol-hub { fill: var(--ivory); stroke: var(--rib); stroke-width: 1.6; }
.parol .parol-tassels path { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.parol .parol-initial { font-family: var(--display); font-size: 21px; fill: var(--pane-ink); }
.parol .parol-photo-ring { fill: none; stroke: var(--rib); stroke-width: 3; }
.tone-amber .pane-a { fill: #f6c98a; } .tone-amber .pane-b { fill: #fbe4c0; } .tone-amber .parol-tassels path { stroke: var(--amber); }
.tone-rose .pane-a { fill: #efb2b8; } .tone-rose .pane-b { fill: #f9dbde; } .tone-rose .parol-tassels path { stroke: var(--rose); }
.tone-lilac .pane-a { fill: #c9b6ea; } .tone-lilac .pane-b { fill: #e8dff7; } .tone-lilac .parol-tassels path { stroke: #c9b6ea; } .tone-lilac .parol-bead { fill: #c9b6ea; }
.tone-amber .parol-bead { fill: var(--amber); } .tone-rose .parol-bead { fill: var(--rose); } .tone-sea .parol-bead { fill: var(--sea); }
.parol .parol-disc { fill: none; stroke: var(--rib); stroke-width: 2.2; }
.parol .parol-ray { stroke: var(--rib); stroke-width: 1.2; stroke-linejoin: round; }
.tone-sea .pane-a { fill: #a6d8c7; } .tone-sea .pane-b { fill: #d7efe6; } .tone-sea .parol-tassels path { stroke: var(--sea); }

/* Home: a string of lanterns */
.lanterns {
  list-style: none; margin: 2.2rem 0 0; padding: 0;
  display: grid; gap: 1.6rem 1rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.lantern {
  display: grid; justify-items: center; gap: 0.2rem; padding: 0.4rem 0.4rem 1rem; border-radius: 16px;
  color: var(--text); text-decoration: none;
}
.lantern .parol {
  transform-origin: 50% 0;
  transition: transform 0.5s var(--ease-out);
  animation: sway 7s ease-in-out infinite;
}
.lanterns li:nth-child(3n + 2) .parol { animation-duration: 8.5s; animation-delay: -2s; }
.lanterns li:nth-child(3n) .parol { animation-duration: 7.8s; animation-delay: -4s; }
.lantern:hover .parol { transform: translateY(-4px) scale(1.04); }
.lantern-name { font-family: var(--display); font-size: 1.3rem; margin-top: 0.2rem; }
.lantern.is-me .lantern-name { color: var(--amber-hi); }
.lantern-meta { color: var(--text-soft); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
@keyframes sway { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.6deg; } }

/* Sections */
.shelf { margin-top: 2.6rem; }
.shelf-head { margin-bottom: 1rem; }
.shelf-head h2 { display: flex; align-items: center; gap: 0.55rem; }
.shelf-head h2 .icon { color: var(--amber); flex: none; }
.shelf-head .muted { margin: 0.25rem 0 0; font-size: 0.98rem; }
.count {
  font: 700 0.8rem/1 var(--text-face); color: var(--text-soft); background: var(--night-2);
  padding: 0.3rem 0.55rem; border-radius: 999px; font-variant-numeric: tabular-nums;
}

/* Capiz panes */
.panes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.pane {
  position: relative; display: grid; grid-template-columns: 3.4rem 1fr; column-gap: 1rem;
  padding: 0.95rem 1rem 0.95rem 0; border-radius: 14px; color: var(--pane-ink);
  background: var(--ivory);
  border: 1.5px solid var(--rib);
  transition: background 0.4s var(--ease-out);
}
/* The rank strip is the capiz window: shell discs in a bamboo lattice. */
.rank {
  grid-row: 1 / span 3; align-self: stretch; margin: -0.95rem 0; padding-top: 0.85rem;
  display: flex; justify-content: center;
  border-right: 1.5px solid var(--rib); border-radius: 12px 0 0 12px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.75) 0 5px, transparent 6px) 0 0 / 16px 16px,
    #eedcb8;
  font-family: var(--display); font-size: 1.75rem; line-height: 1; color: var(--rib-deep);
  font-variant-numeric: tabular-nums;
}
.pane-body { min-width: 0; }
.pane-title { font: 700 1.1rem/1.3 var(--text-face); overflow-wrap: anywhere; }
.pane-title a { color: var(--pane-ink); text-decoration-color: var(--rib); }
.pane-title a .icon { display: inline; vertical-align: -2px; margin-left: 0.3rem; color: var(--rib-deep); }
.pane-price { margin: 0.2rem 0 0; font-weight: 700; color: var(--rib-deep); font-variant-numeric: tabular-nums; }
.pane-note { margin: 0.3rem 0 0; color: var(--pane-soft); white-space: pre-line; }
.pane-actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.75rem; }
.pane-actions form { margin: 0; }

.pane.is-claimed {
  background: #d6c9b0;
}
.pane.is-claimed .rank { background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0 5px, transparent 6px) 0 0 / 16px 16px, #d2bd96; }
.pane.is-claimed .pane-title, .pane.is-claimed .pane-price, .pane.is-claimed .pane-note { opacity: 0.78; }
.stamp {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.38rem 0.75rem; border-radius: 999px;
  font-weight: 700; font-size: 0.9rem; color: #4a3612; background: rgba(122, 88, 38, 0.16);
}
.pane.is-mine .stamp { color: #1f4a3e; background: rgba(60, 140, 115, 0.2); }
.pane.is-removed .pane-title { text-decoration: line-through; }
.pane.is-removed { background: #e2d7c3; }
.flag { grid-column: 2; margin: 0.55rem 0 0; font-weight: 700; color: var(--danger-ink); font-size: 0.92rem; }
.size-tag {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 700;
  color: var(--rib-deep); padding: 0.2rem 0.55rem; border-radius: 999px; background: rgba(122, 88, 38, 0.12);
}
.pane > .size-tag { grid-row: 1; align-self: start; justify-self: end; margin-top: 0.1rem; }

/* Buttons */
.btn {
  font: 700 1rem/1 var(--text-face); display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.8rem 1.25rem; border-radius: 12px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--amber); color: #2b1d0e;
  transition: background 0.2s, transform 0.2s var(--ease-out);
}
.btn:hover { background: var(--amber-hi); }
.btn:active { transform: translateY(1px); }
.btn.small { padding: 0.55rem 0.9rem; font-size: 0.92rem; border-radius: 10px; }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover { background: rgba(241, 236, 247, 0.06); }
.btn.danger { background: var(--danger-ink); color: #fff; box-shadow: none; }
.pane .btn { background: var(--pane-ink); color: var(--ivory); }
.pane .btn:hover { background: #3d3245; }
.pane .btn.ghost { background: transparent; color: var(--pane-ink); box-shadow: inset 0 0 0 1.5px rgba(43, 34, 48, 0.3); }
.pane .btn.ghost:hover { background: rgba(255, 255, 255, 0.45); }
.pane .btn.danger { background: var(--danger-ink); color: #fff; }

.icon-btn {
  width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 10px; cursor: pointer;
  color: var(--pane-ink); background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(43, 34, 48, 0.16);
  list-style: none; transition: background 0.2s;
}
.icon-btn:hover { background: #fff; }
.icon-btn:disabled { opacity: 0.3; cursor: default; background: transparent; }
details.confirm { display: inline-flex; align-items: center; gap: 0.45rem; }
details.confirm > summary::-webkit-details-marker { display: none; }
details.confirm[open] > summary { background: #fff; }

/* Composer and forms */
.composer {
  margin-top: 1.8rem; padding: 1.1rem 1.2rem; border-radius: 16px;
  background: var(--night-1); box-shadow: inset 0 0 0 1px var(--line);
}
.composer > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.65rem;
  font-family: var(--display); font-size: 1.35rem;
}
.composer > summary::-webkit-details-marker { display: none; }
.composer > summary::before {
  content: ""; width: 26px; height: 26px; border-radius: 8px; flex: none;
  background:
    linear-gradient(#2b1d0e, #2b1d0e) center / 12px 2px no-repeat,
    linear-gradient(#2b1d0e, #2b1d0e) center / 2px 12px no-repeat,
    var(--amber);
  transition: rotate 0.3s var(--ease-out);
}
.composer[open] > summary { margin-bottom: 1rem; }
.composer[open] > summary::before { rotate: 45deg; }
.composer.is-open { margin-top: 1.4rem; }

.stack { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.35rem; min-width: 0; }
.label { font-weight: 700; font-size: 0.95rem; color: var(--text); }
.optional { font-weight: 400; color: var(--text-faint); margin-left: 0.35rem; font-size: 0.88rem; }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--night-0); width: 100%;
  border: 1.5px solid rgba(241, 236, 247, 0.14); border-radius: 10px; padding: 0.7rem 0.8rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(240, 180, 106, 0.2); }
input[aria-invalid="true"], textarea[aria-invalid="true"], .has-error input { border-color: var(--danger); }
input:user-invalid { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: 0.9rem; font-weight: 600; }
.field-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1.6fr; } }
.peso-input { position: relative; display: block; }
.peso-input > span { position: absolute; left: 0.85rem; top: 50%; translate: 0 -50%; color: var(--text-soft); font-weight: 700; }
.peso-input input { padding-left: 1.9rem; font-variant-numeric: tabular-nums; }

fieldset.sizes { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
fieldset.sizes legend { margin-bottom: 0.4rem; }
fieldset.sizes .field-error { flex-basis: 100%; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; font-weight: 700;
  padding: 0.55rem 0.95rem; border-radius: 999px; background: var(--night-0);
  box-shadow: inset 0 0 0 1.5px rgba(241, 236, 247, 0.14);
}
.chip input { width: auto; margin: 0; accent-color: var(--amber); }
.chip .icon { color: var(--amber); }
.chip:has(input:checked) { background: rgba(240, 180, 106, 0.14); box-shadow: inset 0 0 0 1.5px var(--amber); }
.form-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.banner { margin: 1rem 0; padding: 0.8rem 1rem; border-radius: 12px; font-weight: 600; background: rgba(143, 203, 184, 0.14); color: #c6eadf; }
.banner.err { background: rgba(241, 154, 154, 0.13); color: #f8c4c4; }
.composer > .banner { margin-top: 0; }

.empty {
  margin: 0; padding: 1.2rem; text-align: center; border-radius: 14px; color: var(--text-soft);
  box-shadow: inset 0 0 0 1.5px var(--line); background: rgba(28, 37, 65, 0.5);
}

/* Login, set PIN, errors */
.door { max-width: 400px; margin: 1.5rem auto 0; text-align: center; }
.door .parol { margin: 0 auto 0.6rem; }
.door .lede { margin-inline: auto; }
.door form { text-align: left; margin-top: 1.6rem; padding: 1.2rem; border-radius: 16px; background: var(--night-1); box-shadow: inset 0 0 0 1px var(--line); }
.door .btn { width: 100%; }
.door p:last-child .btn { width: auto; margin-top: 1.4rem; }
input.pin { font-size: 1.5rem; letter-spacing: 0.6em; text-align: center; padding-left: 1.4rem; font-variant-numeric: tabular-nums; }

/* Timeline */
.timeline { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; }
.timeline li { position: relative; padding: 0 0 1.4rem 1.6rem; border-left: 1.5px solid var(--line); margin-left: 0.4rem; }
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: 0.3rem; width: 12px; height: 12px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 4px var(--night);
}
.timeline li.is-unclaim::before { background: var(--night); box-shadow: inset 0 0 0 2px var(--rose), 0 0 0 4px var(--night); }
.timeline time { display: block; font-size: 0.85rem; font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.timeline p { margin: 0.2rem 0 0; }
.timeline .size-tag { color: var(--amber-hi); background: rgba(240, 180, 106, 0.12); }

/* Claiming dims a pane in place across the page load. */
@view-transition { navigation: auto; }
:root { view-transition-name: none; }
::view-transition-group(*) { animation-duration: 0.45s; animation-timing-function: var(--ease-out); }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .pane { grid-template-columns: 2.7rem 1fr; column-gap: 0.8rem; }
  .rank { font-size: 1.45rem; }
  .lanterns { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .sky i { animation: none; }
  .shoot { display: none; }
  .lantern .parol { animation: none; transition: none; }
  ::view-transition-group(*) { animation: none; }
  * { scroll-behavior: auto; }
}

input[type="range"] { accent-color: var(--amber); padding: 0; border: 0; background: transparent; }

/* Lanterns: bigger, and each one sways on its own clock. */
.lantern .parol { width: min(168px, 100%); height: auto; }
.lanterns li:nth-child(4n + 1) .parol { animation-duration: 6.4s; }
.lanterns li:nth-child(4n + 2) .parol { animation-duration: 8.1s; animation-delay: -3s; }
.lanterns li:nth-child(4n + 3) .parol { animation-duration: 7.3s; animation-delay: -1.5s; }
.lanterns li:nth-child(4n) .parol { animation-duration: 9s; animation-delay: -5s; }

/* Before the animation script runs, keep animated pieces hidden so they do not flash. */
.js-anim .lanterns .lantern, .js-anim .panes .pane, .js-anim .hang, .js-anim main h1 { opacity: 0; }

/* Day scene: a snowy blue-hour sky. Night scene: stars and shooting stars. */
[data-scene="day"] {
  --night-0: #22355c;
  --night: #2c416c;
  --night-1: #2f4573;
  --night-2: #3b5280;
  --danger: #ffb3b3;
  --line: rgba(236, 240, 250, 0.2);
  --text-soft: #d3d6ea;
  --text-faint: #b8bdd8;
  --village: #1d2d50;
  --ridge-far: #4a6290;
  --ridge-mid: #34497a;
  --paddy-a: #8ea3c9;
  --paddy-b: #9cb0d3;
  --dike: #c5d2ea;
  --dirt: #6f7f9f;
  --near: #17233f;
  --sprout: #6a80aa;
  --win: #9fb3d9;
}
[data-scene="night"] { --village: #0b1020; --win: #f0b46a; --ridge-far: #222e4e; --ridge-mid: #161f38; --paddy-a: #0e1527; --paddy-b: #111a2f; --dike: #1c2743; --dirt: #1d2234; --near: #04070e; --sprout: #23304f; }
[data-scene="day"] .sky { display: none; }
[data-scene="night"] .snow, html:not([data-scene]) .snow { display: none; }

.snow { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.snow i {
  position: absolute; top: -12px; width: var(--s); height: var(--s); border-radius: 50%;
  background: #f7f9ff; opacity: var(--o);
  animation: snowfall var(--t) linear var(--d) infinite;
}
@keyframes snowfall {
  0% { translate: 0 -2vh; }
  25% { translate: var(--w) 25vh; }
  50% { translate: calc(var(--w) * -0.4) 50vh; }
  75% { translate: calc(var(--w) * 0.7) 75vh; }
  100% { translate: 0 104vh; }
}

/* Lanterns hanging in the side margins. */
.hangings { position: absolute; inset: 0 0 auto 0; height: 0; pointer-events: none; z-index: 0; display: none; }
@media (min-width: 1180px) { .hangings { display: block; } }
.hang { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; animation: sway var(--t) ease-in-out infinite; }
.hang-string { width: 1.5px; height: var(--len); background: var(--rib); opacity: 0.6; }
.hang .parol { margin-top: -6px; }

/* Sparks when claiming or adding. */
.spark { position: fixed; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--amber); pointer-events: none; z-index: 50; }
.spark.is-star { width: 13px; height: 13px; margin: -6.5px; border-radius: 0; background: #fff3d6; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }

@media (prefers-reduced-motion: reduce) {
  .snow i { animation: none; top: auto; bottom: var(--s); }
  .hang { animation: none; }
}

/* ===== App shell ===== */
.appbar, main, footer, .tabbar { position: relative; z-index: 1; }
.appbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--night) 92%, transparent);
  border-bottom: 1px solid var(--line);
}
.appbar-inner {
  max-width: 1120px; margin: 0 auto; padding: 0.7rem 1.25rem;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--text); font-family: var(--display); font-size: 1.4rem; letter-spacing: -0.01em; white-space: nowrap; }
.brand .parol { margin-top: -4px; }
.tabs { display: flex; justify-content: center; gap: 0.25rem; }
.tabs a {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.85rem; border-radius: 10px;
  color: var(--text-soft); text-decoration: none; font-weight: 600; font-size: 0.95rem;
}
.tabs a:hover { color: var(--text); background: rgba(241, 236, 247, 0.06); }
.tabs a[aria-current="page"] { color: #2b1d0e; background: var(--amber); }
.appbar-end { display: flex; align-items: center; gap: 0.35rem; }
.appbar-end form { margin: 0; }
.me-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.25rem 0.75rem 0.25rem 0.35rem; border-radius: 999px;
  color: var(--text); text-decoration: none; font-weight: 700; font-size: 0.92rem; box-shadow: inset 0 0 0 1px var(--line);
}
.me-chip:hover, .me-chip[aria-current="page"] { background: rgba(241, 236, 247, 0.07); }
.me-chip .parol { margin: -4px 0 -10px; }
.icon-ghost { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; color: var(--text-soft); cursor: pointer; }
.icon-ghost:hover { color: var(--text); background: rgba(241, 236, 247, 0.07); }

.page { max-width: 820px; margin: 0 auto; padding: 2.2rem 1.25rem 4rem; }
.page.is-wide { max-width: 1120px; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.8rem; }
.page-head h1 { margin: 0; }
.page-head .lede { margin-top: 0.5rem; }
.page-head.is-center { flex-direction: column; align-items: center; text-align: center; margin-bottom: 1.2rem; }
.page-head.is-center .lede { margin-inline: auto; }
.accent { color: var(--amber-hi); }

.facts { list-style: none; margin: 0 0 2.2rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.facts li { padding: 0.45rem 0.9rem; border-radius: 999px; background: var(--night-1); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-soft); font-size: 0.92rem; }
.facts strong { color: var(--text); font-variant-numeric: tabular-nums; }
.facts.is-left { justify-content: flex-start; margin: 1rem 0 0; }

/* Home lanterns: centered string, not a left-aligned grid. */
.lanterns { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem 1.2rem; margin: 0; }
.lanterns > li { width: 200px; }

/* My list: composer on the left, the list on the right. */
.split { display: grid; gap: 2rem; }
.split-aside .composer { margin-top: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: 340px 1fr; align-items: start; }
  .split-aside { position: sticky; top: 84px; }
  .split-main .shelf:first-child { margin-top: 0; }
}

/* Friend's list and claims: two columns on wide screens. */
.profile {
  display: flex; align-items: center; gap: 1.4rem; margin-bottom: 2rem; padding: 1.2rem 1.4rem;
  border-radius: 20px; background: var(--night-1); box-shadow: inset 0 0 0 1px var(--line);
}
.profile .parol { flex: none; margin: -6px 0 -18px; }
.profile h1 { margin: 0; }
.columns { display: grid; gap: 0 2rem; }
@media (min-width: 900px) {
  .columns { grid-template-columns: 1fr 1fr; align-items: start; }
  .columns > .shelf { margin-top: 0; }
}
.columns > .shelf { padding: 1.1rem 1.1rem 1.2rem; border-radius: 18px; background: color-mix(in srgb, var(--night-1) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 899px) { .columns > .shelf + .shelf { margin-top: 1.4rem; } }

/* Timeline as a centered feed. */
.timeline { max-width: 640px; }

/* Settings: label column on the left, card on the right. */
.settings-row { display: grid; gap: 0.9rem 2rem; padding: 1.6rem 0; border-top: 1px solid var(--line); }
.settings-row:first-of-type { border-top: 0; padding-top: 0; }
.settings-label h2 { font-size: 1.3rem; }
.settings-label .muted { margin: 0.35rem 0 0; font-size: 0.95rem; max-width: 34ch; }
@media (min-width: 900px) { .settings-row { grid-template-columns: 280px 1fr; } }
.settings-card { padding: 1.2rem; border-radius: 16px; background: var(--night-1); box-shadow: inset 0 0 0 1px var(--line); }
.settings-card > .parol { margin: 0 auto 1rem; }
.settings-card form + form { margin-top: 0.8rem; }
.photo-adjust { display: grid; gap: 0.9rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--night-0); }
.photo-adjust canvas { display: block; max-width: 100%; height: auto; margin: 0 auto; touch-action: none; cursor: grab; }
.photo-adjust canvas:active { cursor: grabbing; }
.photo-adjust .muted { margin: 0; }

/* Admin: invite bar and a member table. */
.invite-card { margin-bottom: 1.6rem; }
.invite-card h2 { font-size: 1.3rem; margin-bottom: 0.8rem; }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; }
.inline-form .field { flex: 1 1 220px; }
.admin-members { list-style: none; padding: 0; margin: 0; border-radius: 16px; background: var(--night-1); box-shadow: inset 0 0 0 1px var(--line); }
.admin-member { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.2rem; padding: 0.9rem 1.1rem; }
.admin-member + .admin-member { border-top: 1px solid var(--line); }
.admin-member-head { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.admin-member-head .parol { flex: none; margin: -4px 0 -12px; }
.admin-member-head h2 { font-size: 1.2rem; display: flex; align-items: center; gap: 0.5rem; }
.status { margin: 0.15rem 0 0; font-size: 0.88rem; }
.status::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.4rem; vertical-align: 1px; }
.status.is-active { color: #bfe6d9; } .status.is-active::before { background: var(--sea); }
.status.is-pending { color: var(--amber-hi); } .status.is-pending::before { background: var(--amber); }
.admin-badge { padding: 0.12rem 0.5rem; border-radius: 999px; color: #2b1d0e; background: var(--amber); font: 700 0.75rem/1.4 var(--text-face); }
.admin-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.admin-actions form { margin: 0; }
details.popover { position: relative; }
details.popover > summary { list-style: none; }
details.popover > summary::-webkit-details-marker { display: none; }
details.popover[open] > form {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: min(320px, 80vw); padding: 0.9rem;
  border-radius: 14px; background: var(--night-2); box-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.6);
}
.invite-result { max-width: 640px; margin: 0 auto; }
.invite-result h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.invite-link { font-variant-numeric: tabular-nums; }

/* Footer town. */
footer { text-align: center; color: var(--text-faint); font-size: 0.9rem; padding: 2rem 0 0; }
footer p { margin: 0 1rem 1.2rem; }
.village { display: block; width: 100%; height: clamp(230px, 29vw, 390px); }
.village .ridge-far path:first-child { fill: var(--ridge-far, #1f2a47); }
.village .ridge-mid path:first-child { fill: var(--ridge-mid, #141c33); }
.village .peak-snow { fill: #eef2fb; opacity: 0; }
[data-scene="day"] .village .peak-snow { opacity: 0.9; }
.village .house rect:not(.win), .village .house path:not(.snowcap), .village .ground, .village .pole rect { fill: var(--village, #0b1020); }
.village .palm path { fill: none; stroke: var(--village, #0b1020); stroke-width: 6; stroke-linecap: round; }
.village .palm .frond { stroke-width: 5; }
.village .win { fill: var(--win, #f0b46a); }
.village .win.dim { opacity: 0.45; }
.village .snowcap { fill: #f4f6fb; display: none; }
[data-scene="day"] .village .snowcap { display: inline; }
.village .wires path { fill: none; stroke: color-mix(in srgb, var(--village, #0b1020) 80%, #8a8fa8); stroke-width: 1.4; }
.village .light { animation: twinkle-light 2.4s ease-in-out var(--d) infinite; }
.village .l-amber { fill: var(--amber); } .village .l-rose { fill: var(--rose); } .village .l-sea { fill: var(--sea); } .village .l-lilac { fill: #c9b6ea; }
[data-scene="day"] .village .light { opacity: 0.75; animation: none; }
@keyframes twinkle-light { 50% { opacity: 0.25; } }
.village .wire-parol line { stroke: var(--rib); stroke-width: 8; }
.village .wire-parol polygon { stroke: var(--rib); stroke-width: 6; }

/* Phones: bottom tab bar, compact app bar. */
.tabbar { display: none; }
@media (max-width: 760px) {
  .tabs { display: none; }
  .appbar-inner { grid-template-columns: 1fr auto; padding: 0.55rem 1rem; }
  .me-chip span { display: none; }
  .me-chip { padding: 0.25rem; }
  .page { padding-top: 1.4rem; }
  body.has-nav { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 0.35rem 0.4rem calc(0.35rem + env(safe-area-inset-bottom));
    background: var(--night-0); border-top: 1px solid var(--line);
  }
  .tabbar a {
    display: grid; justify-items: center; gap: 0.15rem; padding: 0.4rem 0.2rem; border-radius: 12px;
    color: var(--text-faint); text-decoration: none; font-size: 0.72rem; font-weight: 700;
  }
  .tabbar a[aria-current="page"] { color: var(--amber-hi); background: rgba(240, 180, 106, 0.12); }
  .profile { flex-direction: column; text-align: center; }
  .profile .facts.is-left { justify-content: center; }
  .lanterns > li { width: calc(50% - 0.6rem); }
}

.split-aside .field-row { grid-template-columns: 1fr; }

/* Near field and foreground. */
.village .paddy-a { fill: var(--paddy-a, #0e1527); }
.village .paddy-b { fill: var(--paddy-b, #111a2f); }
.village .dike { fill: var(--dike, #1c2743); }
.village .sprouts { fill: none; stroke: var(--sprout, #23304f); stroke-width: 1.6; stroke-linecap: round; }
.village .path { fill: var(--dirt, #1d2234); }
.village .firefly { fill: #f6e7a8; animation: twinkle-light 3s ease-in-out var(--d) infinite; }
[data-scene="day"] .village .firefly { display: none; }
.village .fence rect, .village .tufts, .village .bamboo { fill: var(--near, #04070e); }
.village .fence path, .village .bamboo-arm, .village .hang-line { fill: none; stroke: var(--near, #04070e); stroke-width: 5; stroke-linecap: round; }
.village .hang-line { stroke-width: 2; }
@media (prefers-reduced-motion: reduce) { .village .light, .village .firefly { animation: none; } }

/* Phones see only the middle of the town, so bring the near fence and parol into view. */
@media (max-width: 760px) {
  .village .fence { transform: translate(250px, 0); }
  .village .near-parol { transform: translate(-260px, 0); }
}