/* Cake UI: kawaii frosted LED icing-cake finish. Loaded last; every rule is scoped to #top so it beats toy-ui.css. */
:root{
 /* Candy-shop pastels: milky surfaces, saturated icing, berry-tinted rims and shadows. */
 --cake-surface:#fff6e9;--cake-surface-2:#ffe3ee;--cake-mint-cream:#dff7ef;--cake-lav-milk:#ebe3ff;--cake-sky:#dff0ff;
 --cake-icing-peach:#ffb3c7;--cake-icing-mint:#a8ead3;--cake-icing-lilac:#c9b8ff;--cake-icing-butter:#ffe08a;--cake-icing-blue:#a9d8ff;
 --cake-ink:#3a2a4d;--cake-ink-muted:#54406a;--cake-rim:#c98aae;--cake-berry:#9b2f6b;--cake-grape:#5b34a3;
 --cake-rim-peach:#e0799f;--cake-rim-mint:#5fb79c;--cake-rim-lilac:#9a82e6;--cake-rim-butter:#d9a930;--cake-rim-blue:#6ea8de;
 --cake-glow-mint:#7ff5d0;--cake-glow-peach:#ff9ec4;--cake-glow-lilac:#b9a2ff;--cake-glow-lemon:#ffe066;--cake-glow-blue:#8fd0ff;
 --cake-focus:#a3286a;--cake-focus-deep:#7a1f52;
 --cake-bevel:inset 0 2px 0 #fff,inset 0 -4px 6px rgba(196,120,170,.3),0 5px 0 var(--cake-rim-c,var(--cake-rim)),0 10px 18px rgba(110,48,96,.2);
 --cake-bevel-lift:inset 0 2px 0 #fff,inset 0 -4px 8px rgba(255,255,255,.55),0 7px 0 var(--cake-rim-c,var(--cake-rim)),0 14px 22px rgba(110,48,96,.24),0 0 20px var(--cake-led,rgba(255,158,196,.6));
 --cake-bevel-press:inset 0 3px 8px rgba(196,120,170,.45),inset 0 0 14px #fff,0 1px 0 var(--cake-rim-c,var(--cake-rim)),0 3px 8px rgba(110,48,96,.2),0 0 22px rgba(255,158,196,.55);
 --cake-r-s:14px;--cake-r-m:22px;--cake-r-l:30px;--cake-r-xl:42px;
 --cake-t-fast:120ms;--cake-t-base:180ms;--cake-ease:cubic-bezier(.2,.8,.3,1.1);
 /* A row of piped icing beads, used as a background layer along an edge. */
 --cake-beads:radial-gradient(circle at 50% 0,rgba(255,255,255,.9) 0 4px,transparent 4.6px);
 /* Glossy candy shell: a bright top highlight fading out by 60%. */
 --cake-sheen:linear-gradient(180deg,rgba(255,255,255,.78) 0,rgba(255,255,255,.32) 34%,rgba(255,255,255,0) 60%),linear-gradient(0deg,rgba(196,120,170,.14),rgba(196,120,170,0) 42%);
 /* Sugar grain: two offset grids of tiny crystals. */
 --cake-sugar:radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.85) .7px,transparent 1.4px),radial-gradient(circle at 4.5px 5px,rgba(155,47,107,.09) .6px,transparent 1.3px);
 --cake-sugar-size:7px 7px,9px 9px;
}
@keyframes cake-led{0%,100%{opacity:.55;box-shadow:0 0 3px 1px #fff,0 0 7px 2px var(--cake-led,var(--cake-glow-mint))}50%{opacity:1;box-shadow:0 0 4px 1px #fff,0 0 12px 4px var(--cake-led,var(--cake-glow-mint))}}
@keyframes cake-edge{0%,100%{filter:brightness(.85)}50%{filter:brightness(1.15)}}

/* ---------- Shared icing control ---------- */
:root #top :is(.motion-button,.cover .button,.actions button,.actions a,.popup-actions button,.collection-actions button,.save-stall,.saved-filter,.view-switch button,.phrase-arrows button,.phrase-dialog-nav button,.phrase-voice,.modal-voice,.close-button,.map-toolbar button,.maplibregl-ctrl-group button,.discover-tabs button,.text-button,.area-tabs button,.street-heading button){
 background-color:var(--cake-tint,var(--cake-surface));background-image:var(--frost-noise),var(--cake-sheen);
 border:2px solid #fff;color:var(--cake-ink);box-shadow:var(--cake-bevel);
 border-radius:var(--cake-r-m);min-height:44px;min-width:44px;isolation:isolate;
 backdrop-filter:none;filter:none;
 transition:transform var(--cake-t-base) var(--cake-ease),box-shadow var(--cake-t-base) ease,background-color var(--cake-t-fast) ease}
/* Tint families: mint for tools, peach for primary, lilac for voice, butter for saved. */
:root #top :is(.map-toolbar button,.maplibregl-ctrl-group button,.phrase-arrows button,.phrase-dialog-nav button,.close-button,.motion-button,.street-heading button){--cake-tint:var(--cake-icing-mint);--cake-rim-c:var(--cake-rim-mint)}
:root #top :is(.phrase-voice,.modal-voice){--cake-tint:var(--cake-icing-lilac);--cake-rim-c:var(--cake-rim-lilac);--cake-led:var(--cake-glow-lilac)}
:root #top :is(.cover .button,.actions .primary,.discover-tabs button[aria-pressed=true],.view-switch button[aria-pressed=true],.area-tabs button[aria-pressed=true]){--cake-tint:var(--cake-icing-peach);--cake-rim-c:var(--cake-rim-peach);--cake-led:var(--cake-glow-peach)}
:root #top .saved-filter[aria-pressed=true]{--cake-tint:var(--cake-icing-butter);--cake-rim-c:var(--cake-rim-butter)}
:root #top :is(.phrase-voice,.modal-voice)[aria-pressed=true]{box-shadow:var(--cake-bevel-press)}
@media(hover:hover){:root #top :is(.motion-button,.cover .button,.actions button,.actions a,.popup-actions button,.collection-actions button,.save-stall,.saved-filter,.view-switch button,.phrase-arrows button,.phrase-dialog-nav button,.phrase-voice,.modal-voice,.close-button,.map-toolbar button,.maplibregl-ctrl-group button,.discover-tabs button,.text-button,.area-tabs button,.street-heading button):hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--cake-bevel-lift);filter:none}}
:root #top :is(.motion-button,.cover .button,.actions button,.actions a,.popup-actions button,.collection-actions button,.save-stall,.saved-filter,.view-switch button,.phrase-arrows button,.phrase-dialog-nav button,.phrase-voice,.modal-voice,.close-button,.map-toolbar button,.maplibregl-ctrl-group button,.discover-tabs button,.text-button,.area-tabs button,.street-heading button):active:not(:disabled){transform:translateY(4px) scale(1.03,.93);box-shadow:var(--cake-bevel-press);transition-duration:var(--cake-t-fast)}
:root #top :is(button,.button):disabled{opacity:.5;filter:saturate(.4);box-shadow:inset 0 2px 0 #fff,0 2px 0 var(--cake-rim)!important}
/* The LED dot on lit controls follows the tint family. */
:root #top :is(.cover .button,.actions button,.popup-actions button,.collection-actions button,.phrase-voice,.modal-voice,.discover-tabs button)::after{right:9px;top:7px;width:5px;height:5px;background:#fff;animation:cake-led 2.6s ease-in-out infinite}
:root #top :is(.discover-tabs button,.view-switch button,.area-tabs button)[aria-pressed=true]{box-shadow:var(--cake-bevel),0 0 16px rgba(255,150,190,.55)}

/* Focus: a bright LED ring on dark sections, a deep apricot ring on light icing. */
:root #top :is(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--cake-focus);outline-offset:3px}
:root #top :is(.stall-row,.maplibregl-popup-content,.flag-options,.collection-card,.tips p,.phrase-line,#toast) :is(a,button,summary,input,select,[tabindex]):focus-visible{outline-color:var(--cake-focus-deep)}

/* ---------- Header ---------- */
:root #top .header:before{background-color:#1b3244e6;background-image:var(--cake-beads);background-size:18px 9px;background-position:0 100%;background-repeat:repeat-x;border-bottom:2px solid rgba(255,255,255,.4);box-shadow:0 4px 0 rgba(110,48,96,.35),0 10px 22px rgba(110,48,96,.25)}
:root #top #flag-trigger{border-radius:50%;transition:transform var(--cake-t-base) var(--cake-ease)}
:root #top #flag-trigger .flag-circle{border-radius:50%;background:radial-gradient(ellipse 46% 14% at 50% 96%,rgba(127,245,208,.55),transparent 72%)}
:root #top #flag-trigger[aria-expanded=true] .flag-circle img{filter:drop-shadow(0 0 6px rgba(127,245,208,.8)) drop-shadow(0 3px 2px rgba(110,48,96,.3))}
:root #top #flag-trigger:active{transform:translateY(3px) scale(1.04,.92)}
:root #top .flag-options{background-color:var(--cake-surface);background-image:var(--frost-noise),var(--cake-sheen);border:2px solid #fff;border-radius:var(--cake-r-l);box-shadow:inset 0 2px 0 #fff,0 6px 0 var(--cake-rim),0 18px 30px rgba(110,48,96,.4)}
:root #top .flag-options button{border:2px solid transparent;transition:transform var(--cake-t-base) var(--cake-ease),background-color var(--cake-t-fast)}
:root #top .flag-options button[aria-pressed=true]{background:var(--cake-icing-peach);border-color:#fff;box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--cake-rim-peach),0 0 14px rgba(255,150,190,.7)}
@media(hover:hover){:root #top .flag-options button:hover{background:var(--cake-icing-mint);border-color:#fff;transform:translateY(-2px)}}
:root #top .flag-options button:active{transform:translateY(3px) scale(1.04,.92)}
:root #top .motion-button{width:44px;height:44px;border-radius:var(--cake-r-s)}

/* ---------- Cover: an icing-rimmed cake tier with an LED edge that brightens at night ---------- */
:root #top .cover.wrap{border:3px solid rgba(255,255,255,.75);border-radius:var(--cake-r-xl);background-image:var(--frost-noise),var(--cake-beads),radial-gradient(ellipse at 85% 30%,#92cfc63d,transparent 58%),linear-gradient(135deg,#314f63,#254957);background-size:auto,20px 10px,auto,auto;background-repeat:repeat,repeat-x,no-repeat,no-repeat;box-shadow:inset 0 3px 0 rgba(255,255,255,.28),inset 0 -6px 12px rgba(110,48,96,.3),0 7px 0 #5f7f99,0 9px 0 rgba(255,255,255,.5),0 13px 0 #4b6a83,0 24px 44px rgba(110,48,96,.4)}
/* --night is set on #yatai-world by the hero; the glow lives on that element so it inherits the value. */
:root #top #yatai-world::after{content:'';position:absolute;inset:-16px -16px -16px -100vw;border-radius:var(--cake-r-xl);pointer-events:none;z-index:3;opacity:calc(.12 + var(--night,0)*.88);box-shadow:inset 0 0 0 2px rgba(127,245,208,.55),inset 0 0 26px 6px rgba(127,245,208,.32),inset 0 0 60px 10px rgba(185,160,255,.18);animation:cake-edge 2.6s ease-in-out infinite;transition:opacity 600ms ease}
:root #top .cover .button{border-radius:var(--cake-r-m);color:var(--cake-ink)}
:root #top .cover .guide-jump{--cake-tint:var(--cake-icing-mint);--cake-rim-c:var(--cake-rim-mint);--cake-led:var(--cake-glow-mint);background-color:var(--cake-icing-mint)!important;box-shadow:var(--cake-bevel)!important}
@media(hover:hover){:root #top .cover .guide-jump:hover{box-shadow:var(--cake-bevel-lift)!important}}
:root #top .cover .guide-jump:active{box-shadow:var(--cake-bevel-press)!important}

/* ---------- Explorer ---------- */
:root #top .explorer-shell{border:3px solid rgba(255,255,255,.6);border-radius:var(--cake-r-xl);box-shadow:inset 0 3px 0 rgba(255,255,255,.22),0 7px 0 #4b6a83,0 18px 44px rgba(110,48,96,.35)}
:root #top .search-row input{background-color:var(--cake-surface);background-image:var(--frost-noise);color:var(--cake-ink);border:2px solid #fff;border-radius:var(--cake-r-m);box-shadow:inset 0 3px 6px rgba(196,120,170,.45),inset 0 -2px 0 #fff,0 4px 0 var(--cake-rim),0 0 0 1px rgba(196,120,170,.3)}
:root #top .search-row input::placeholder{color:var(--cake-ink-muted);opacity:1}
:root #top .search-row input:focus-visible{outline:3px solid var(--cake-focus);outline-offset:3px;box-shadow:inset 0 3px 6px rgba(196,120,170,.45),0 4px 0 var(--cake-rim),0 0 18px rgba(127,245,208,.55)}
:root #top .text-button{padding:8px 14px;font-size:13px;font-weight:650;border-radius:var(--cake-r-s);--cake-tint:var(--cake-surface-2)}
:root #top .search-row #reset{margin-bottom:5px}
/* Craving coins: round icing discs carrying the food illustration. */
:root #top .craving-grid button{border:2px solid transparent;border-radius:var(--cake-r-m);background:transparent;color:inherit;box-shadow:none;transition:transform var(--cake-t-base) var(--cake-ease)}
:root #top .craving-grid img{border-radius:50%;background:radial-gradient(circle at 42% 32%,#fff 0,var(--cake-surface) 38%,var(--cake-surface-2) 100%);box-shadow:inset 0 2px 0 #fff,inset 0 -4px 6px rgba(196,120,170,.35),0 4px 0 var(--cake-rim),0 8px 12px rgba(110,48,96,.28);filter:none;aspect-ratio:1;width:62px;height:62px;padding:5px;object-fit:contain;transition:transform var(--cake-t-base) var(--cake-ease),box-shadow var(--cake-t-base)}
:root #top .craving-grid button[aria-pressed=true]{background:transparent;border-color:transparent;box-shadow:none;transform:none}
:root #top .craving-grid button[aria-pressed=true] img{background:radial-gradient(circle at 42% 32%,#fff 0,var(--cake-icing-peach) 55%,#ffc6a6 100%);box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--cake-rim-peach),0 0 0 3px rgba(255,255,255,.85),0 0 18px 3px rgba(255,150,190,.75)}
:root #top .craving-grid button[aria-pressed=true]::after{background:var(--cake-ink);color:#fff;box-shadow:0 0 0 2px #fff,0 0 10px rgba(255,150,190,.9)}
@media(hover:hover){:root #top .craving-grid button:hover{background:transparent}:root #top .craving-grid button:hover img{transform:translateY(-3px)}}
:root #top .craving-grid button:active img{transform:translateY(3px) scale(1.06,.9)}
:root #top .area-tabs button{--cake-tint:var(--cake-surface-2);font-weight:650;padding:7px 12px;border-radius:var(--cake-r-m);box-shadow:inset 0 2px 0 #fff,inset 0 -3px 5px rgba(196,120,170,.3),0 4px 0 var(--cake-rim),0 7px 12px rgba(110,48,96,.22)}
:root #top .area-tabs{padding-block:4px 10px}
:root #top .view-switch button,:root #top .saved-filter{min-height:44px;border-radius:var(--cake-r-m)}
:root #top .map-toolbar button{padding:7px 14px;font-size:13px}
:root #top .map-context #map-zoom-hint{display:inline-block;background-color:rgba(243,248,251,.94);color:var(--cake-ink);border:2px solid #fff;border-radius:var(--cake-r-s);font-weight:650;box-shadow:0 3px 0 var(--cake-rim),0 6px 12px rgba(110,48,96,.3)}
:root #top .map-key>span{background:var(--cake-surface);color:var(--cake-ink);border:2px solid #fff;border-radius:var(--cake-r-m);font-weight:650;box-shadow:inset 0 -3px 5px rgba(196,120,170,.25),0 4px 0 var(--cake-rim),0 7px 12px rgba(110,48,96,.22)}
:root #top .map-key b{box-shadow:inset 0 2px 2px #fff,0 0 0 2px #fff,0 0 8px rgba(127,245,208,.6);color:var(--cake-ink)}
:root #top .region-key>span{display:inline-flex;gap:6px;padding:4px 10px;border-radius:var(--cake-r-m);background:var(--cake-surface);color:var(--cake-ink);box-shadow:0 3px 0 var(--cake-rim)}

/* Stall rows: icing slabs. No filters or backdrop blur here (94 rows scroll). */
:root #top #stall-list .stall-row{--text:var(--cake-ink);--muted:var(--cake-ink-muted);border:2px solid #fff;border-radius:var(--cake-r-l);background-image:var(--cake-beads),var(--paper-pattern),linear-gradient(170deg,rgba(255,255,255,.7),rgba(255,255,255,0) 45%);background-size:16px 8px,15px 15px,100% 100%;background-repeat:repeat-x,repeat,no-repeat;background-position:0 0,0 0,0 0;color:var(--cake-ink);box-shadow:inset 0 2px 0 #fff,inset 0 -5px 8px rgba(196,120,170,.22),0 6px 0 color-mix(in srgb,var(--region,#b8d5e8) 45%,var(--cake-rim)),0 12px 18px rgba(110,48,96,.25);transition:transform var(--cake-t-base) var(--cake-ease),box-shadow var(--cake-t-base) ease}
:root #top #stall-list .stall-row.selected{box-shadow:inset 0 2px 0 #fff,0 6px 0 color-mix(in srgb,var(--region,#b8d5e8) 45%,var(--cake-rim)),0 0 0 4px var(--cake-glow-peach),0 0 22px 4px rgba(255,150,190,.55)}
@media(hover:hover){:root #top #stall-list .stall-row:hover{transform:translateY(-2px);box-shadow:inset 0 2px 0 #fff,0 8px 0 color-mix(in srgb,var(--region,#b8d5e8) 45%,var(--cake-rim)),0 16px 22px rgba(110,48,96,.3),0 0 16px rgba(127,245,208,.35)}}
:root #top #stall-list :is(.stall-name,.stall-dish,.stall-address,.stall-meta,.food-tag){color:var(--cake-ink)}
:root #top #stall-list :is(.stall-dish,.stall-address,.food-tag){color:var(--cake-ink-muted)}
:root #top #stall-list .fact-button{min-height:44px;padding-inline:10px;border:2px solid #fff;border-radius:var(--cake-r-s);color:var(--cake-ink);background:rgba(255,255,255,.75);box-shadow:0 3px 0 var(--cake-rim)}
:root #top :is(#stall-list,#collection-cards,.maplibregl-popup-content) .save-stall{width:46px;height:46px;min-width:46px;border-radius:50%;--cake-rim-c:var(--cake-rim)}
:root #top .save-stall[aria-pressed=true]{--cake-rim-c:#c98f93;box-shadow:var(--cake-bevel),0 0 14px rgba(255,180,190,.7)}
:root #top .street-stall{border:2px solid transparent;border-radius:var(--cake-r-m);transition:transform var(--cake-t-base) var(--cake-ease),border-color var(--cake-t-fast)}
:root #top .street-stall[aria-pressed=true]{border-color:rgba(127,245,208,.85);background:rgba(127,245,208,.1);box-shadow:0 0 16px rgba(127,245,208,.35)}
@media(hover:hover){:root #top .street-stall:hover{transform:translateY(-3px);background:rgba(255,255,255,.06)}}
:root #top .street-stall:active{transform:translateY(2px) scale(1.03,.95)}
:root #top .street-heading button{width:44px;height:44px;border-radius:50%;padding:0}

/* ---------- Map ---------- */
:root #top .maplibregl-ctrl-group{gap:12px}
:root #top .maplibregl-ctrl-group button{width:44px;height:44px;border-radius:16px!important;border:2px solid #fff}
:root #top .maplibregl-ctrl-group button+button{border-top:2px solid #fff}
:root #top .maplibregl-popup-content{background-color:var(--cake-surface)!important;background-image:var(--cake-beads),var(--frost-noise)!important;background-size:16px 8px,auto!important;background-repeat:repeat-x,repeat!important;color:var(--cake-ink);border:2px solid #fff;border-radius:var(--cake-r-m)!important;box-shadow:inset 0 2px 0 #fff,inset 0 -4px 8px rgba(196,120,170,.25),0 6px 0 var(--cake-rim),0 14px 28px rgba(110,48,96,.4),0 0 20px rgba(127,245,208,.3)!important}
:root #top .maplibregl-popup-content :is(.popup-dish,.popup-jp,p){color:var(--cake-ink-muted)}
:root #top .maplibregl-popup-tip{border-top-color:var(--cake-rim)!important;border-bottom-color:var(--cake-rim)!important}
:root #top .maplibregl-popup-close-button{min-width:44px;min-height:44px;color:var(--cake-ink)}
:root #top .landmark-popup strong{color:var(--cake-ink)}
:root #top .landmark-popup img{filter:drop-shadow(0 4px 0 rgba(196,120,170,.45))}
:root #top .landmark-popup a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--cake-r-s);background:var(--cake-icing-mint);color:var(--cake-ink);font-weight:650;box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--cake-rim-mint)}
:root #top .map-diorama-canvas{pointer-events:none}

/* ---------- Discover ---------- */
:root #top .discover-tabs button{border-radius:var(--cake-r-m)}
:root #top .collection-card,:root #top .collection-card:hover{--text:var(--cake-ink);--muted:var(--cake-ink-muted);--accent:#2f5874;color:var(--cake-ink);background-color:var(--cake-surface);background-image:var(--cake-beads),var(--frost-noise),var(--cake-sheen);background-size:18px 9px,auto,auto;background-repeat:repeat-x,repeat,no-repeat;border:2px solid #fff;border-radius:var(--cake-r-l);box-shadow:inset 0 2px 0 #fff,inset 0 -5px 10px rgba(196,120,170,.25),0 6px 0 var(--cake-rim),0 10px 0 rgba(255,255,255,.55),0 13px 0 var(--cake-rim),0 22px 30px rgba(110,48,96,.3);margin-bottom:14px}
:root #top .collection-card:nth-child(3n+2){background-color:#fff0e6;--cake-rim:#c49479}
:root #top .collection-card:nth-child(3n){background-color:#eaf7f0;--cake-rim:#86b5a2}
:root #top .collection-card :is(h3,p,.collection-area,.collection-reason){color:var(--cake-ink)}
:root #top .collection-card :is(.collection-reason,p[lang],.collection-area){color:var(--cake-ink-muted)}
:root #top .collection-card .collection-source{color:#2f5874;display:inline-flex;align-items:center;min-height:44px}
:root #top :is(.quiet-details,.directory-sources,.collection-notes) summary{min-height:44px;display:flex;align-items:center;line-height:1.3}
@media(min-width:1100px){:root #top .collection-art{background:radial-gradient(ellipse 48% 16% at 50% 86%,rgba(196,120,170,.4),transparent 72%)}}

/* ---------- Tips: icing slabs ---------- */
:root #top .tips p{--text:var(--cake-ink);--muted:var(--cake-ink-muted);color:var(--cake-ink);background-color:var(--cake-icing-mint);background-image:var(--cake-beads),var(--frost-noise),var(--cake-sheen);background-size:18px 9px,auto,auto;background-repeat:repeat-x,repeat,no-repeat;border:2px solid #fff;border-radius:var(--cake-r-l);box-shadow:inset 0 2px 0 #fff,inset 0 -5px 10px rgba(196,120,170,.22),0 6px 0 var(--cake-rim-mint),0 14px 24px rgba(110,48,96,.3)}
:root #top .tips p:nth-child(3n+2){background-color:var(--cake-icing-butter);box-shadow:inset 0 2px 0 #fff,inset 0 -5px 10px rgba(196,120,170,.22),0 6px 0 var(--cake-rim-butter),0 14px 24px rgba(110,48,96,.3)}
:root #top .tips p:nth-child(3n){background-color:var(--cake-icing-peach);box-shadow:inset 0 2px 0 #fff,inset 0 -5px 10px rgba(196,120,170,.22),0 6px 0 var(--cake-rim-peach),0 14px 24px rgba(110,48,96,.3)}
:root #top .tips strong{color:var(--cake-ink)}
:root #top .rule-ink{background:radial-gradient(ellipse 46% 12% at 50% 90%,rgba(110,48,96,.22),transparent 72%)}
:root #top .tips p a{color:#2f5874}

/* ---------- Phrases: layered cake flashcards with an LED category dot ---------- */
:root #top .phrase-line{--cake-led:var(--cake-glow-lilac);--layer-rim:#829fb7;position:relative;color:var(--cake-ink);border:2px solid #fff;box-shadow:inset 0 2px 0 #fff,inset 0 -6px 10px rgba(196,120,170,.2),0 6px 0 var(--layer-rim),0 9px 0 rgba(255,255,255,.7),0 13px 0 var(--layer-rim),0 22px 26px rgba(110,48,96,.32);transition:transform var(--cake-t-base) var(--cake-ease),box-shadow var(--cake-t-base) ease}
:root #top .phrase-tile:nth-child(3n+2) .phrase-line{--layer-rim:#b48e77;--cake-led:var(--cake-glow-peach)}
:root #top .phrase-tile:nth-child(3n) .phrase-line{--layer-rim:#8bae9f;--cake-led:var(--cake-glow-mint)}
:root #top .phrase-tile:nth-child(6n+4) .phrase-line{--layer-rim:#bba76c;--cake-led:#ffe58f}
:root #top .phrase-tile:nth-child(6n+5) .phrase-line{--layer-rim:#9c95c4;--cake-led:var(--cake-glow-lilac)}
:root #top .phrase-tile:nth-child(6n+6) .phrase-line{--layer-rim:#c08886;--cake-led:#ffb7c0}
:root #top .phrase-line::after{content:'';position:absolute;left:12px;top:12px;width:8px;height:8px;border-radius:50%;background:#fff;pointer-events:none;animation:cake-led 2.6s ease-in-out infinite}
:root #top .phrase-line :is(small,em,strong,[lang=ja]){color:var(--cake-ink)}
@media(hover:hover){:root #top .phrase-line:hover{transform:translateY(-3px);box-shadow:inset 0 2px 0 #fff,0 7px 0 var(--layer-rim),0 10px 0 rgba(255,255,255,.7),0 15px 0 var(--layer-rim),0 26px 30px rgba(110,48,96,.36),0 0 22px color-mix(in srgb,var(--cake-led) 55%,transparent)}}
:root #top .phrase-line:active{transform:translateY(5px) scale(1.01,.98);box-shadow:inset 0 2px 0 #fff,0 2px 0 var(--layer-rim),0 4px 0 rgba(255,255,255,.7),0 6px 0 var(--layer-rim),0 10px 14px rgba(110,48,96,.3)}
:root #top #phrases .phrase-voice{min-height:44px}
:root #top .phrase-arrows button{width:48px;height:48px;border-radius:50%;padding:0}

/* ---------- Dialogs: dark interiors kept for legibility, framed by a thick icing rim ---------- */
:root #top :is(#stall-dialog,#phrase-dialog){border:6px solid var(--cake-icing-lilac);border-radius:var(--cake-r-xl);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 8px 0 #7f78aa,0 12px 0 rgba(255,255,255,.5),0 16px 0 #6b6597,0 30px 70px rgba(80,30,70,.6),0 0 40px rgba(185,160,255,.35)}
:root #top #phrase-dialog{border-color:var(--cake-icing-mint);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 8px 0 #6f9e8b,0 12px 0 rgba(255,255,255,.5),0 16px 0 #5a8a77,0 30px 70px rgba(80,30,70,.6),0 0 40px rgba(127,245,208,.3)}
#stall-dialog::backdrop,#phrase-dialog::backdrop{background:radial-gradient(ellipse at 50% 40%,rgba(64,82,120,.55),rgba(10,22,34,.82));backdrop-filter:blur(3px)}
:root #top .close-button{width:48px;height:48px;border-radius:50%;padding:0;font-size:24px}
:root #top .phrase-dialog-nav button{width:52px;height:52px;border-radius:50%}
:root #top .modal-voice{border-radius:var(--cake-r-m)}
:root #top .dialog-language select{min-height:44px;background-color:var(--cake-surface);color:var(--cake-ink);border:2px solid #fff;border-radius:var(--cake-r-m);font-weight:650;box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--cake-rim),0 8px 14px rgba(110,48,96,.3)}

/* ---------- Footer ---------- */
:root #top .sources summary{min-height:44px;padding:8px 14px;border-radius:var(--cake-r-m);color:#dce8f0;border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.04);transition:border-color var(--cake-t-fast),transform var(--cake-t-base) var(--cake-ease)}
@media(hover:hover){:root #top .sources summary:hover{border-color:rgba(127,245,208,.8);box-shadow:0 0 14px rgba(127,245,208,.3)}}
:root #top .sources details[open] summary{border-color:rgba(255,150,190,.7)}
:root #top .footer{border-top:2px solid rgba(255,255,255,.3);padding-top:18px;background-image:var(--cake-beads);background-size:18px 9px;background-repeat:repeat-x;background-position:0 -2px}
:root #top .back-to-top{min-height:44px;padding:4px 14px 4px 4px;border-radius:var(--cake-r-l);color:#dce8f0;border:2px solid rgba(255,255,255,.35);transition:transform var(--cake-t-base) var(--cake-ease),border-color var(--cake-t-fast)}
@media(hover:hover){:root #top .back-to-top:hover{transform:translateY(-2px);border-color:rgba(127,245,208,.8)}}
:root #top .back-to-top:active{transform:translateY(3px) scale(1.03,.94)}
:root #top #toast{background-color:var(--cake-surface);background-image:var(--frost-noise);color:var(--cake-ink);font-weight:650;border:2px solid #fff;border-radius:var(--cake-r-m);padding:12px 22px;box-shadow:inset 0 2px 0 #fff,0 5px 0 var(--cake-rim),0 14px 26px rgba(110,48,96,.45),0 0 20px rgba(127,245,208,.4)}

/* ---------- Breakpoints ---------- */
@media(max-width:1100px){:root #top .cover.wrap{border-radius:36px}}
@media(max-width:767px){
 :root #top .cover.wrap{border-radius:var(--cake-r-l)}
 :root #top #yatai-world::after{inset:-100vh -18px -14px -18px;border-radius:var(--cake-r-l)}
 :root #top .craving-grid img{width:50px;height:50px;padding:4px}
 :root #top .area-tabs button{padding:6px 10px;font-size:12px}
 :root #top .view-switch button{min-height:44px;padding:6px 13px}
 :root #top .collection-card,:root #top .collection-card:hover{padding:18px}
 :root #top .tips p{border-radius:var(--cake-r-m)}
 :root #top :is(#stall-dialog,#phrase-dialog){border-width:5px;border-radius:var(--cake-r-l)}
}
@media(max-width:679px){:root #top .phrase-line{border-radius:var(--cake-r-m)}}
@media(max-width:360px){
 :root #top #yatai-world::after{inset:-100vh -14px -10px -14px}
 :root #top .phrase-arrows button{width:44px;min-width:44px;height:44px}
 :root #top .text-button{padding-inline:10px}
}

/* ---------- Motion off: no animations, transitions or lift/squash transforms ---------- */
:root[data-motion=paused] #top :is(.phrase-line,#yatai-world,button,a)::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
 :root #top :is(.motion-button,.cover .button,.actions button,.actions a,.popup-actions button,.collection-actions button,.save-stall,.saved-filter,.view-switch button,.phrase-arrows button,.phrase-dialog-nav button,.phrase-voice,.modal-voice,.close-button,.map-toolbar button,.maplibregl-ctrl-group button,.discover-tabs button,.text-button,.area-tabs button,.street-heading button,.craving-grid button,.craving-grid img,.stall-row,.street-stall,.phrase-line,.flag-options button,#flag-trigger,.back-to-top,.sources summary),
 :root #top :is(.motion-button,.cover .button,.actions button,.actions a,.popup-actions button,.collection-actions button,.save-stall,.saved-filter,.view-switch button,.phrase-arrows button,.phrase-dialog-nav button,.phrase-voice,.modal-voice,.close-button,.map-toolbar button,.maplibregl-ctrl-group button,.discover-tabs button,.text-button,.area-tabs button,.street-heading button,.craving-grid button,.craving-grid img,.stall-row,.street-stall,.phrase-line,.flag-options button,#flag-trigger,.back-to-top,.sources summary):is(:hover,:active),
 :root #top .craving-grid button:is(:hover,:active) img{transform:none!important;transition:none!important;animation:none!important}
 :root #top :is(.phrase-line,#yatai-world,button,a)::after{animation:none!important;transition:none!important}
}
:root #top .map-footer a{display:inline-flex;align-items:center;min-height:44px}

/* =====================================================================
   Candy-shop pastel frosting. Overrides the dark harbour page with milky
   cotton-candy jars, glossy bead-edged sweets and berry ink. Still scoped
   to #top so it wins over every earlier sheet; motion rules above still apply.
   ===================================================================== */
:root[data-theme]{background-color:#fbe8f3}
:root #top{--bg:#fff6e9;--surface:#fffaf5;--soft:#ffeef5;--text:var(--cake-ink);--muted:var(--cake-ink-muted);--line:#ebc3da;--accent:var(--cake-berry);--toy-ink:var(--cake-ink);--frost-ink:var(--cake-ink);--gummy-ink:var(--cake-ink);color:var(--cake-ink);color-scheme:light;
 background-color:#f6e8f8;background-image:var(--cake-sugar),radial-gradient(ellipse 60% 40% at 12% 8%,rgba(255,179,199,.55),transparent 70%),radial-gradient(ellipse 50% 35% at 90% 30%,rgba(169,216,255,.5),transparent 70%),linear-gradient(170deg,#ffe3ee 0%,#f4e2ff 24%,#ebe3ff 40%,#dff7ef 60%,#fff6e9 80%,#dff0ff 100%);background-size:var(--cake-sugar-size),100% 100%,100% 100%,100% 100%;background-repeat:repeat,repeat,no-repeat,no-repeat,no-repeat}
/* The dark washi shader canvas would sit over the candy page, so it is hidden. */
:root #top #washi-world{visibility:hidden}

/* ---------- Header: strawberry-milk glass with a pink bead edge ---------- */
:root #top .header:before{background-color:rgba(255,238,246,.92);background-image:radial-gradient(circle at 50% 100%,#ffb3c7 0 4px,transparent 4.6px),var(--cake-sugar),linear-gradient(90deg,rgba(255,227,238,.96),rgba(235,227,255,.96) 50%,rgba(223,247,239,.96));background-size:18px 9px,var(--cake-sugar-size),100% 100%;background-position:0 100%,0 0,0 0,0 0;background-repeat:repeat-x,repeat,repeat,no-repeat;border-bottom:2px solid #fff;box-shadow:0 4px 0 #f2b3cd,0 12px 24px rgba(110,48,96,.14)}
:root #top .header .town-brand>.brand-word{color:var(--cake-berry);text-shadow:0 2px 0 #fff,0 3px 0 #f6a9c7,0 7px 12px rgba(155,47,107,.18)}
:root #top .header .brand-word>span{color:var(--cake-grape);text-shadow:0 2px 0 #fff,0 3px 0 #c9b8ff,0 7px 12px rgba(91,52,163,.16)}
:root #top .header .brand-word small{color:var(--cake-ink-muted);text-shadow:none}
:root #top #flag-trigger .flag-circle{background:radial-gradient(ellipse 46% 14% at 50% 96%,rgba(255,158,196,.6),transparent 72%)}

/* ---------- Candy gradient headings (deep sugar tones so contrast stays above 4.5:1) ---------- */
:root #top :is(.cover h1,.section-card h2,.explore-title h2){width:fit-content;max-width:100%;color:var(--cake-berry);background-image:linear-gradient(100deg,var(--cake-berry) 5%,#8a2f95 50%,var(--cake-grape) 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 0 #fff) drop-shadow(0 3px 0 rgba(255,179,199,.75))}
@media(forced-colors:active){:root #top :is(.cover h1,.section-card h2,.explore-title h2){-webkit-text-fill-color:CanvasText;background:none;filter:none}}

/* ---------- Glossy, bead-edged candy controls ---------- */
:root #top :is(.motion-button,.cover .button,.actions button,.actions a,.popup-actions button,.collection-actions button,.save-stall,.saved-filter,.view-switch button,.phrase-arrows button,.phrase-dialog-nav button,.phrase-voice,.modal-voice,.close-button,.map-toolbar button,.maplibregl-ctrl-group button,.discover-tabs button,.text-button,.area-tabs button,.street-heading button){background-image:var(--frost-noise),var(--cake-sheen),linear-gradient(170deg,color-mix(in srgb,var(--cake-tint,var(--cake-surface)) 40%,#fff) 0,var(--cake-tint,var(--cake-surface)) 72%);border:3px dotted #fff;color:var(--cake-ink)}
:root #top :is(.text-button,.saved-filter,.view-switch button){--cake-tint:var(--cake-icing-blue);--cake-rim-c:var(--cake-rim-blue);--cake-led:var(--cake-glow-blue)}
:root #top .saved-filter[aria-pressed=true]{--cake-tint:var(--cake-icing-butter);--cake-rim-c:var(--cake-rim-butter);--cake-led:var(--cake-glow-lemon)}
:root #top :is(.discover-tabs button,.view-switch button)[aria-pressed=true]{--cake-tint:var(--cake-icing-peach);--cake-rim-c:var(--cake-rim-peach);box-shadow:inset 0 0 0 2px var(--cake-berry),var(--cake-bevel),0 0 18px rgba(255,158,196,.7);font-weight:800}
:root #top :is(#stall-list,#collection-cards,.maplibregl-popup-content) .save-stall{--cake-tint:#fff0f6}
:root #top .save-stall[aria-pressed=true]{--cake-tint:var(--cake-icing-peach);--cake-rim-c:var(--cake-rim-peach);box-shadow:var(--cake-bevel),0 0 16px rgba(255,158,196,.85)}
/* Area tabs: a box of macarons. Rotating flavours; the chosen one gets a berry ring. */
:root #top .area-tabs button:nth-child(5n+1){--cake-tint:var(--cake-icing-peach);--cake-rim-c:var(--cake-rim-peach)}
:root #top .area-tabs button:nth-child(5n+2){--cake-tint:var(--cake-icing-mint);--cake-rim-c:var(--cake-rim-mint)}
:root #top .area-tabs button:nth-child(5n+3){--cake-tint:var(--cake-icing-lilac);--cake-rim-c:var(--cake-rim-lilac)}
:root #top .area-tabs button:nth-child(5n+4){--cake-tint:var(--cake-icing-butter);--cake-rim-c:var(--cake-rim-butter)}
:root #top .area-tabs button:nth-child(5n){--cake-tint:var(--cake-icing-blue);--cake-rim-c:var(--cake-rim-blue)}
:root #top .area-tabs button{box-shadow:inset 0 2px 0 #fff,inset 0 -3px 5px rgba(255,255,255,.4),0 4px 0 var(--cake-rim-c),0 7px 12px rgba(110,48,96,.18)}
:root #top .area-tabs button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--cake-berry),inset 0 2px 0 #fff,0 4px 0 var(--cake-rim-c),0 0 0 2px #fff,0 0 18px 2px rgba(255,158,196,.8);font-weight:800}
/* Craving discs: sugared almonds in rotating flavours. */
:root #top .craving-grid button:nth-child(6n+1){--disc:var(--cake-icing-peach);--disc-rim:var(--cake-rim-peach)}
:root #top .craving-grid button:nth-child(6n+2){--disc:var(--cake-icing-mint);--disc-rim:var(--cake-rim-mint)}
:root #top .craving-grid button:nth-child(6n+3){--disc:var(--cake-icing-lilac);--disc-rim:var(--cake-rim-lilac)}
:root #top .craving-grid button:nth-child(6n+4){--disc:var(--cake-icing-butter);--disc-rim:var(--cake-rim-butter)}
:root #top .craving-grid button:nth-child(6n+5){--disc:var(--cake-icing-blue);--disc-rim:var(--cake-rim-blue)}
:root #top .craving-grid button:nth-child(6n){--disc:#ffc7a8;--disc-rim:#e08f69}
:root #top .craving-grid img{background:radial-gradient(circle at 38% 28%,#fff 0,#fff 14%,color-mix(in srgb,var(--disc,var(--cake-icing-peach)) 55%,#fff) 34%,var(--disc,var(--cake-icing-peach)) 70%,color-mix(in srgb,var(--disc,var(--cake-icing-peach)) 82%,#b85a8e) 100%);box-shadow:inset 0 2px 0 #fff,inset 0 -4px 7px rgba(255,255,255,.45),0 4px 0 var(--disc-rim,var(--cake-rim)),0 8px 12px rgba(110,48,96,.2)}
:root #top .craving-grid button[aria-pressed=true] img{background:radial-gradient(circle at 38% 28%,#fff 0,#fff 14%,var(--disc,var(--cake-icing-peach)) 62%,color-mix(in srgb,var(--disc,var(--cake-icing-peach)) 75%,#b85a8e) 100%);box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--disc-rim,var(--cake-rim)),0 0 0 3px #fff,0 0 0 6px var(--cake-berry),0 0 20px 6px var(--disc,var(--cake-glow-peach))}
:root #top .craving-grid button[aria-pressed=true]::after{background:var(--cake-berry);box-shadow:0 0 0 2px #fff,0 0 10px rgba(255,158,196,.9)}

/* ---------- Cover: cotton-candy sky tier ---------- */
:root #top .cover.wrap{border:3px solid #fff;background-color:#ece4ff;background-image:var(--cake-sugar),var(--cake-beads),radial-gradient(ellipse at 78% 38%,rgba(255,255,255,.85),transparent 55%),linear-gradient(135deg,#ffd3e4 0%,#e6dbff 48%,#cdeeff 100%);background-size:var(--cake-sugar-size),20px 10px,auto,auto;background-repeat:repeat,repeat,repeat-x,no-repeat,no-repeat;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.8),inset 0 -12px 26px rgba(185,160,255,.3),0 7px 0 #eaa6c7,0 10px 0 #fff,0 14px 0 #bea2ea,0 26px 46px rgba(110,48,96,.2)}
:root #top .cover-copy>p{color:var(--cake-ink-muted)}
:root #top #yatai-world::after{box-shadow:inset 0 0 0 2px rgba(255,158,196,.75),inset 0 0 26px 6px rgba(185,160,255,.42),inset 0 0 60px 12px rgba(127,245,208,.26)}

/* ---------- Frosted candy jars for every section ---------- */
:root #top :is(.section-card.wrap,.explorer-shell){--jar-a:#ffe3ee;--jar-b:#fff1f7;--jar-rim:#eaa2c3;border:3px solid #fff;background-color:color-mix(in srgb,var(--jar-a) 70%,var(--jar-b));background-image:var(--cake-sugar),linear-gradient(180deg,rgba(255,255,255,.75) 0,rgba(255,255,255,0) 90px),linear-gradient(140deg,var(--jar-a),var(--jar-b) 60%,var(--jar-a));background-size:var(--cake-sugar-size),auto,auto;background-repeat:repeat,repeat,no-repeat,no-repeat;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.85),inset 0 -16px 30px rgba(255,255,255,.5),0 8px 0 var(--jar-rim),0 11px 0 #fff,0 15px 0 var(--jar-rim),0 30px 50px rgba(110,48,96,.16)}
:root #top .explorer-shell{--jar-a:#fff6e9;--jar-b:#fffaf3;--jar-rim:#e8b98f}
:root #top .first-time.section-card{--jar-a:#dff7ef;--jar-b:#effcf7;--jar-rim:#86cdb3}
:root #top .phrase-guide.section-card{--jar-a:#ebe3ff;--jar-b:#f5f1ff;--jar-rim:#b29ced}
:root #top .explorer-sidebar{background:transparent}
:root #top .map-panel{background-color:#ece4ff;background-image:var(--cake-sugar),linear-gradient(160deg,#efe8ff,#e2f0ff);background-size:var(--cake-sugar-size),auto;background-repeat:repeat,repeat,no-repeat;box-shadow:inset 0 0 0 2px #fff}
:root #top #map{box-shadow:0 0 0 3px #fff,0 0 0 6px #d9c8ff}
:root #top :is(.north-arrow,.phrase-position,.map-context,.street-shelf,.map-footer){color:var(--cake-ink)}
:root #top .map-context #map-zoom-hint{background-color:rgba(255,246,233,.95)}
:root #top .street-stall[aria-pressed=true]{border-color:#fff;background:rgba(255,179,199,.35);box-shadow:0 0 0 2px var(--cake-rim-peach),0 0 16px rgba(255,158,196,.6)}
@media(hover:hover){:root #top .street-stall:hover{background:rgba(255,255,255,.5)}}
:root #top :is(#map,.maplibregl-map) :is(button,a):focus-visible{outline-color:#ffd1e6}

/* Stall slabs: rotating milk flavours. Plain colours only (long scrolling list). */
:root #top #stall-list .stall-row{background-color:#fff0f6}
:root #top #stall-list .stall-row:nth-child(5n+2){background-color:#e4f9f1}
:root #top #stall-list .stall-row:nth-child(5n+3){background-color:#efe9ff}
:root #top #stall-list .stall-row:nth-child(5n+4){background-color:#fff4d9}
:root #top #stall-list .stall-row:nth-child(5n){background-color:#e4f2ff}

/* Featured stalls: macaron shells. */
:root #top .collection-card:nth-child(3n+1),:root #top .collection-card:nth-child(3n+1):hover{background-color:#ffe6f0;--cake-rim:var(--cake-rim-peach)}
:root #top .collection-card:nth-child(3n+2),:root #top .collection-card:nth-child(3n+2):hover{background-color:#dff8ee;--cake-rim:var(--cake-rim-mint)}
:root #top .collection-card:nth-child(3n),:root #top .collection-card:nth-child(3n):hover{background-color:#ece5ff;--cake-rim:var(--cake-rim-lilac)}
:root #top .collection-card{background-image:var(--cake-beads),var(--cake-sugar),var(--cake-sheen);background-size:18px 9px,var(--cake-sugar-size),auto,auto}
:root #top :is(.collection-card .collection-source,.tips p a){color:var(--cake-berry)}

/* Tips: candy slabs in six flavours. */
:root #top .tips p{--slab:#c4f2e2;--slab-rim:var(--cake-rim-mint);background-color:var(--slab);background-image:var(--cake-beads),var(--cake-sugar),var(--cake-sheen),linear-gradient(165deg,color-mix(in srgb,var(--slab) 45%,#fff),var(--slab) 65%);background-size:18px 9px,var(--cake-sugar-size),auto,auto,auto;background-repeat:repeat-x,repeat,repeat,no-repeat,no-repeat,no-repeat;box-shadow:inset 0 2px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.7),inset 0 -5px 10px rgba(255,255,255,.4),0 6px 0 var(--slab-rim),0 14px 24px rgba(110,48,96,.16)}
:root #top .tips p:nth-child(6n+2){--slab:#ffeba8;--slab-rim:var(--cake-rim-butter)}
:root #top .tips p:nth-child(6n+3){--slab:#ffd0de;--slab-rim:var(--cake-rim-peach)}
:root #top .tips p:nth-child(6n+4){--slab:#dcd1ff;--slab-rim:var(--cake-rim-lilac)}
:root #top .tips p:nth-child(6n+5){--slab:#cde8ff;--slab-rim:var(--cake-rim-blue)}
:root #top .tips p:nth-child(6n){--slab:#ffd9c4;--slab-rim:#e08f69}

/* Phrases: layered macaron flashcards. */
:root #top .phrase-tile .phrase-line{--card:#dcd1ff;--layer-rim:var(--cake-rim-lilac);--cake-led:var(--cake-glow-lilac);background-color:var(--card);background-image:var(--cake-sugar),var(--cake-sheen),linear-gradient(165deg,color-mix(in srgb,var(--card) 40%,#fff),var(--card) 70%);background-size:var(--cake-sugar-size),auto,auto,auto;background-repeat:repeat,repeat,no-repeat,no-repeat,no-repeat}
:root #top .phrase-tile:nth-child(6n+2) .phrase-line{--card:#ffd0de;--layer-rim:var(--cake-rim-peach);--cake-led:var(--cake-glow-peach)}
:root #top .phrase-tile:nth-child(6n+3) .phrase-line{--card:#c4f2e2;--layer-rim:var(--cake-rim-mint);--cake-led:var(--cake-glow-mint)}
:root #top .phrase-tile:nth-child(6n+4) .phrase-line{--card:#ffeba8;--layer-rim:var(--cake-rim-butter);--cake-led:var(--cake-glow-lemon)}
:root #top .phrase-tile:nth-child(6n+5) .phrase-line{--card:#cde8ff;--layer-rim:var(--cake-rim-blue);--cake-led:var(--cake-glow-blue)}
:root #top .phrase-tile:nth-child(6n) .phrase-line{--card:#ffc9e0;--layer-rim:#d8659a;--cake-led:var(--cake-glow-peach)}

/* ---------- Dialogs: light frosted pastel interiors in a thick candy-pink frame ---------- */
:root #top :is(#stall-dialog,#phrase-dialog){--surface:#fffaf5;--soft:#ffeef5;--bg:#fff6e9;background-color:#fffaf5;background-image:var(--cake-sugar);background-size:var(--cake-sugar-size);border:8px solid var(--cake-icing-peach);box-shadow:inset 0 0 0 2px #fff,0 8px 0 var(--cake-rim-peach),0 12px 0 #fff,0 16px 0 #c45d8a,0 30px 70px rgba(80,30,70,.45),0 0 44px rgba(255,158,196,.55)}
:root #top #phrase-dialog{border-color:var(--cake-icing-mint);box-shadow:inset 0 0 0 2px #fff,0 8px 0 var(--cake-rim-mint),0 12px 0 #fff,0 16px 0 #3f9a7e,0 30px 70px rgba(80,30,70,.45),0 0 44px rgba(127,245,208,.45)}
#stall-dialog::backdrop,#phrase-dialog::backdrop{background:radial-gradient(ellipse at 50% 40%,rgba(255,200,226,.55),rgba(96,52,110,.72))}
:root #top .detail-media{background-color:#ffeef5;background-image:var(--cake-sugar),linear-gradient(160deg,#ffe3ee,#ebe3ff);background-size:var(--cake-sugar-size),auto}

/* ---------- Footer & toast ---------- */
:root #top :is(.sources summary,.back-to-top){color:var(--cake-ink);border:3px dotted #fff;background-color:#fff0f6;background-image:var(--cake-sheen);box-shadow:0 4px 0 var(--cake-rim),0 8px 14px rgba(110,48,96,.14)}
@media(hover:hover){:root #top :is(.sources summary,.back-to-top):hover{border-color:#fff;box-shadow:0 4px 0 var(--cake-rim),0 0 16px rgba(255,158,196,.6)}}
:root #top .sources details[open] summary{background-color:var(--cake-icing-peach)}
:root #top .footer{border-top:2px solid #fff;background-image:radial-gradient(circle at 50% 0,#ffb3c7 0 4px,transparent 4.6px)}
:root #top #toast{background-image:var(--cake-sugar),var(--cake-sheen);background-size:var(--cake-sugar-size),auto,auto;box-shadow:inset 0 2px 0 #fff,0 5px 0 var(--cake-rim),0 14px 26px rgba(110,48,96,.3),0 0 20px rgba(255,158,196,.5)}
:root #top .street-shelf{background-color:#fff0f6;background-image:var(--cake-sugar),linear-gradient(180deg,#ffe8f1,#f1eaff);background-size:var(--cake-sugar-size),auto;background-repeat:repeat,repeat,no-repeat;border-top:3px dotted #fff}
/* Dusk-candy veil over the dark map tiles: screen-blended so pins and labels stay crisp. */
:root #top #map .maplibregl-canvas-container::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;mix-blend-mode:screen;background:linear-gradient(160deg,rgba(255,170,210,.32),rgba(190,160,255,.28) 55%,rgba(150,230,215,.24))}
:root #top .line-badge{background-image:linear-gradient(rgba(30,10,40,.3),rgba(30,10,40,.3))}