/* TPC Open House 2026, v6. Shared by / and /map/.
   Ground: an atmospheric dusk, deep violet into lilac with a soft bloom and faint stars, never one flat slab.
   The campaign art carries the magic (the pearl key visual, then each kingdom's own sky). Cream is for accents.
   Type: Taviraj for Thai display, Cinzel for the kingdom names and codes, LINE Seed Sans TH (CI) for everything else. */

@font-face{font-family:"LINE Seed Sans TH";src:url(fonts/LINESeedSansTH_W_Rg.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"LINE Seed Sans TH";src:url(fonts/LINESeedSansTH_W_Bd.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Taviraj";src:url(fonts/taviraj-thai-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Taviraj";src:url(fonts/taviraj-digits-600.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0020-0021,U+0028-0029,U+002C-002E,U+0030-003A}
@font-face{font-family:"Cinzel";src:url(fonts/cinzel-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --dusk-0:#130C27;     /* deepest night */
  --dusk-1:#1D1438;     /* page ground */
  --dusk-2:#2A1D50;     /* raised surface */
  --dusk-3:#3B2A6C;     /* horizon */
  --lilac:#9C86D6;
  --cream:#F9F4DE;      /* CI cream: text, buttons, pills */
  --pearl:#DCD1F0;      /* secondary text on dusk (11:1) */
  --mist:#B9AAD9;       /* tertiary text on dusk (7:1) */
  --ink:#1C1730;        /* text on cream pills and buttons */
  --rule:rgba(220,209,240,.18);
  --gold:#FFD27A;
  --focus:#FFD27A;
  /* CI kingdom colours, and a light tint of each that reads on dusk */
  --violet:#7B00FF; --blue:#015DFE; --green:#6EC419; --red:#FE1703;
  --t-lumeria:#D2B0FF; --t-aurelis:#9CC0FF; --t-valoria:#B4E37A; --t-regalia:#FFA08A;
  /* map: zones (buildings with faculty activities) */
  --z-lumeria:#D8BDFF; --z-aurelis:#B6CFFF; --z-valoria:#CDEDA2; --z-regalia:#FFBCA8;
  --sans:"LINE Seed Sans TH",system-ui,-apple-system,"Noto Sans Thai",sans-serif;
  --thai:"Taviraj","LINE Seed Sans TH",Georgia,serif;
  --latin:"Cinzel","Times New Roman",serif;
  --gut:16px;
  --ease:cubic-bezier(.22,1,.36,1);
  --z-art:0; --z-light:1; --z-mid:2; --z-text:3; --z-front:4; --z-ui:5; --z-skip:10;
}
[data-k=lumeria]{--k:var(--violet);--kt:var(--t-lumeria)}
[data-k=aurelis]{--k:var(--blue);--kt:var(--t-aurelis)}
[data-k=valoria]{--k:var(--green);--kt:var(--t-valoria)}
[data-k=regalia]{--k:var(--red);--kt:var(--t-regalia)}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px;background:var(--dusk-1)}
body{position:relative;isolation:isolate;background:var(--dusk-1);color:var(--cream);font:400 17px/1.75 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
/* The dusk: layered tones, a bloom of light from above, a faint scatter of stars. Fixed behind everything. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23F4ECFF'%3E%3Ccircle cx='18' cy='30' r='.9' opacity='.8'/%3E%3Ccircle cx='96' cy='12' r='.7' opacity='.6'/%3E%3Ccircle cx='160' cy='64' r='1.2' opacity='.75'/%3E%3Ccircle cx='52' cy='118' r='.7' opacity='.35'/%3E%3Ccircle cx='200' cy='150' r='.9' opacity='.65'/%3E%3Ccircle cx='130' cy='196' r='.6' opacity='.3'/%3E%3Ccircle cx='12' cy='186' r='1' opacity='.4'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(90% 45% at 50% -6%,rgba(150,124,220,.55),transparent 72%),
    radial-gradient(110% 55% at 50% 112%,rgba(170,140,230,.42),transparent 70%),
    radial-gradient(55% 40% at 100% 45%,rgba(98,70,170,.35),transparent 70%),
    radial-gradient(55% 40% at 0% 60%,rgba(70,44,140,.4),transparent 70%),
    linear-gradient(#1B1236,#2A1C55 50%,#20154A)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.3em;text-decoration-thickness:1px}
ul,ol{list-style:none}
h1,h2,h3{font-weight:700;line-height:1.35;text-wrap:balance}
p{text-wrap:pretty}
button{font:inherit;color:inherit}
a,button,summary,[role=button]{cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--gut);top:-80px;z-index:var(--z-skip);background:var(--cream);color:var(--ink);padding:10px 16px;border-radius:8px;font-weight:700}
.skip:focus{top:12px}
.wrap{width:min(100% - 2*var(--gut),1120px);margin-inline:auto}
.band{position:relative;padding-block:clamp(56px,11vw,120px)}
/* Thai display headings in Taviraj: high contrast like the logo, and room for vowels and tone marks. */
.h2,.tdisp{font-family:var(--thai);font-weight:600;line-height:1.4;letter-spacing:0}
.h2{font-size:clamp(30px,7.6vw,46px)}

/* The one solid button: cream on dusk. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:12px 30px;border-radius:10px;background:var(--cream);color:var(--ink);font:700 19px/1.3 var(--sans);text-decoration:none;box-shadow:0 2px 8px rgba(8,4,20,.35);transition:background-color .2s var(--ease),transform .2s var(--ease)}
.btn:hover{background:#fff}
.btn:active{transform:scale(.98)}

.reg{display:grid;justify-items:center;gap:12px;text-align:center}
.reg-note{font-size:15px;line-height:1.7;color:var(--pearl)}
.reg-note strong{color:var(--cream)}
.reg-left{color:var(--gold);font-weight:700;white-space:nowrap}
.reg-closed{font-size:20px;line-height:1.5;font-weight:700}
.soon{color:var(--pearl)}

/* ---------- Home: hero, the key visual crisp and in its own pearl light ---------- */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;min-height:min(100svh - 104px,980px);overflow:hidden;text-align:center}
.hero-world{position:absolute;inset:-7% 0 0;z-index:var(--z-art);will-change:transform;
  -webkit-mask-image:linear-gradient(#000 50%,rgba(0,0,0,.45) 68%,transparent 82%);mask-image:linear-gradient(#000 50%,rgba(0,0,0,.45) 68%,transparent 82%)} /* fully faded before the hero's clip edge, even at the 40px depth drift */
.hero-world picture,.hero-world img{width:100%;height:100%}
.hero-world img{object-fit:cover;object-position:50% 58%}
/* A soft violet bloom behind the logo so its pearl-lilac edges read on the pale sky. Painted light, not a box. */
.bloom{position:absolute;left:50%;top:clamp(70px,12svh,130px);width:clamp(320px,96vw,720px);aspect-ratio:1;transform:translateX(-50%);z-index:var(--z-light);pointer-events:none;
  background:radial-gradient(closest-side,rgba(74,48,140,.34),rgba(120,92,190,.16) 55%,transparent)}
.motes{position:absolute;inset:0;width:100%;height:100%;z-index:var(--z-light);pointer-events:none}
.topnav{position:absolute;top:max(10px,env(safe-area-inset-top));right:var(--gut);z-index:var(--z-ui)}
.topnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:10px;background:var(--cream);color:var(--ink);font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 2px 6px rgba(28,23,48,.25);transition:background-color .2s var(--ease)}
.topnav a:hover{background:#fff}
/* The logo sits above every light and mist layer, with nothing on it (CI: no effects on the logo). */
.hero h1{position:relative;z-index:var(--z-ui);margin-top:clamp(84px,14svh,140px)}
.hero-logo{width:clamp(200px,56vw,360px)}
/* The foot of the hero falls into the dusk of the page. */
.hero::after{content:"";position:absolute;inset:auto 0 0;height:48%;z-index:var(--z-mid);pointer-events:none;
  background:linear-gradient(transparent,rgba(29,20,56,.4) 40%,rgba(29,20,56,.6) 75%,transparent)}
.hero-meta{position:relative;z-index:var(--z-ui);margin-top:auto;padding:24px var(--gut) clamp(20px,3svh,32px);color:var(--cream);text-shadow:0 1px 12px rgba(20,10,36,.7)}
.hero-when{display:inline-block;margin-bottom:8px;padding:2px 14px;border-radius:999px;background:var(--gold);color:var(--ink);font-weight:700;font-size:15px;line-height:1.7;text-shadow:none}
.hero-when[hidden]{display:none}
.hero-date{font:600 clamp(32px,8.8vw,52px)/1.35 var(--thai)}
.hero-venue{margin-top:6px;font-size:clamp(16px,4.2vw,19px);line-height:1.6;max-width:28rem;margin-inline:auto;text-wrap:balance;color:var(--pearl)}

/* Entrance (once a visit, under 1.6s, skipped by any tap, key or scroll, never under reduced motion):
   the mist parts to either side, light blooms behind the logo, the logo and date fade up. */
.mist{display:none}
.intro .mist{display:block;position:absolute;inset:0;z-index:var(--z-front);pointer-events:none}
.mist i{position:absolute;top:-10%;bottom:-10%;width:75%;background:radial-gradient(closest-side,rgba(250,248,252,.98),rgba(244,240,250,.9) 55%,rgba(244,240,250,0));animation:part-l 1.4s var(--ease) both}
.mist i:first-child{left:-12%}
.mist i:last-child{right:-12%;animation-name:part-r}
.intro .hero-world img{animation:world 1.4s var(--ease) both}
.intro .bloom{animation:bloom 1.4s var(--ease) .1s both}
.intro .hero-logo{animation:settle 1s var(--ease) .45s both}
.intro .hero-meta{animation:rise .7s var(--ease) .85s both}
@keyframes part-l{from{transform:none;opacity:1}to{transform:translateX(-70%);opacity:0}}
@keyframes part-r{from{transform:none;opacity:1}to{transform:translateX(70%);opacity:0}}
@keyframes world{from{transform:scale(1.06)}to{transform:none}}
@keyframes bloom{from{opacity:0;transform:translateX(-50%) scale(.6)}to{opacity:1;transform:translateX(-50%)}}
@keyframes settle{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- Home: register, find your faculty ---------- */
.join{padding-top:8px;padding-bottom:clamp(48px,9vw,80px)}
.join .wrap{display:grid;gap:clamp(48px,9vw,72px);justify-items:center}
.finder{display:grid;justify-items:center;gap:6px;width:min(100%,560px);text-align:center;text-decoration:none}
.parade{display:flex;justify-content:center;margin-bottom:12px}
.parade img{width:48px;height:48px;margin-inline:-6px;border-radius:50%;background:var(--dusk-3);box-shadow:0 0 0 3px var(--dusk-1)}
.parade img:nth-child(n+8){display:none}
.finder-th{font:600 clamp(32px,8.6vw,46px)/1.4 var(--thai)}
.finder-sub{margin-top:2px;text-wrap:balance;color:var(--pearl);font-size:16px;line-height:1.65}
.finder-go{margin-top:14px;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:10px;border:2px solid var(--cream);font-weight:700;transition:background-color .2s var(--ease),color .2s var(--ease)}
.finder:hover .finder-go{background:var(--cream);color:var(--ink)}
.finder-go svg{width:18px;height:18px}
.realms-intro{text-align:center;max-width:34rem}
.lede{margin-top:10px;color:var(--pearl);text-wrap:balance}

/* ---------- Home: four kingdoms, four skies ---------- */
/* Each sky is full-bleed (cover), rises softly out of the colour above (--prev) and settles into its own night (--bot). */
.world{position:relative;isolation:isolate;overflow-x:clip;color:var(--cream);
  background:linear-gradient(var(--prev) 0,var(--prev) 2%,var(--bot) var(--sky),var(--bot));
  --sky:clamp(440px,max(62vw,min(125vw,700px)),1100px)}
.world + .world{margin-top:-1px}
.world-sky{position:relative;height:var(--sky)}
.world-sky .sky-bg{position:absolute;left:-6%;top:-6%;width:112%;max-width:none;height:112%;object-fit:cover;object-position:50% 0;filter:blur(18px) saturate(1.1);
  -webkit-mask-image:linear-gradient(transparent 0,transparent 12%,rgba(0,0,0,.25) 24%,rgba(0,0,0,.7) 36%,#000 46%,#000 56%,transparent 80%);mask-image:linear-gradient(transparent 0,transparent 12%,rgba(0,0,0,.25) 24%,rgba(0,0,0,.7) 36%,#000 46%,#000 56%,transparent 80%)}
/* Behind: the poster's own top sky, enlarged and softened into a full-bleed colour field.
   In front: the island as a true cutout, no mask, a large soft light in the kingdom colour behind it. */
.island-wrap{position:absolute;left:50%;top:48%;width:min(92vw,860px);transform:translate(-50%,-50%)}
.island-wrap::before{content:"";position:absolute;inset:-35% -30%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--kt) 30%,transparent),color-mix(in srgb,var(--kt) 10%,transparent) 55%,transparent)}
.island{display:block;width:100%;height:auto;will-change:transform;filter:drop-shadow(0 26px 30px rgba(0,0,0,.35))}
.crystal{position:absolute;z-index:var(--z-mid);top:calc(var(--sky) * .38);width:clamp(84px,18vw,190px);pointer-events:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.world:nth-child(odd) .crystal{left:max(-4%,calc(50% - 640px))}
.world:nth-child(even) .crystal{right:max(-4%,calc(50% - 640px))}
.world-body{position:relative;z-index:var(--z-text);margin-top:calc(var(--sky) * -.12);padding-bottom:clamp(36px,6vw,56px);display:grid;justify-items:center;text-align:center;max-width:40rem}
.world-name{font:500 clamp(42px,12.5vw,84px)/1.1 var(--latin);letter-spacing:.07em;color:var(--kt);text-shadow:0 2px 14px rgba(0,0,0,.5)}
.world-th{margin-top:8px;font:600 clamp(20px,5.2vw,26px)/1.45 var(--thai)}
.world-desc{margin-top:14px;text-align:left;color:#EDE6D6;line-height:1.8}
.world-cast{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 6px;margin-top:26px}
.world-cast li{display:grid;justify-items:center;gap:4px;width:64px;font-size:13px;font-weight:700;line-height:1.2}
.world-cast img,.world-cast .mono{width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--k) 30%,var(--bot))}
.world-go{margin-top:26px;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 20px;border-radius:10px;border:2px solid var(--kt);font-weight:700;text-decoration:none;transition:background-color .2s var(--ease)}
.world-go:hover{background:color-mix(in srgb,var(--kt) 18%,transparent)}

/* ---------- Home: back into the dusk after the last sky ---------- */
.night{background:linear-gradient(#2A1F45,rgba(29,20,56,0) 260px);color:var(--cream)}
.night .notices{padding-top:clamp(24px,5vw,56px)}
.notices .wrap{display:grid;gap:40px}
.notice h2{font:600 clamp(24px,6.4vw,32px)/1.4 var(--thai)}
.notice .soon{margin-top:6px}
.list li{padding:10px 0;border-bottom:1px solid var(--rule)}
.list-time{opacity:.8;font-variant-numeric:tabular-nums}
.sponsors{text-align:center;padding-top:0}
.tier{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:10px 28px;margin-top:22px}
.tier li{line-height:1.3}
.tier img{max-height:72px;width:auto}
.tier-e{font-size:clamp(26px,7vw,38px);font-weight:700}
.tier-d{font-size:clamp(23px,6vw,31px);font-weight:700}
.tier-c{font-size:clamp(20px,5vw,25px);font-weight:700}
.tier-b{font-size:19px;color:var(--pearl)}
.tier-a{font-size:16px;color:var(--pearl)}
.tier-c img{max-height:52px}.tier-b img{max-height:42px}.tier-a img{max-height:34px}

/* ---------- Footer ---------- */
.foot{padding-block:44px max(40px,env(safe-area-inset-bottom));background:linear-gradient(rgba(19,12,39,.4),var(--dusk-0));color:var(--cream);border-top:1px solid var(--rule)}
.foot .wrap{display:grid;gap:20px;justify-items:center;text-align:center}
.org{display:grid;justify-items:center;gap:10px;font-size:15px}
.org img{width:88px;height:88px}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-weight:700;transition:color .2s var(--ease)}
.foot-links a:hover{color:var(--gold)}
.fine{font-size:13px;color:var(--mist)}

/* ---------- Map page ---------- */
.mhead{position:relative;isolation:isolate;overflow:hidden}
.mhead-sky{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;z-index:-1;opacity:.55}
.mhead::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(42,29,80,.35),rgba(29,20,56,.8) 75%,var(--dusk-1))}
.mhead .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding-block:18px 14px}
.mhead-brand{display:block;border-radius:8px}
.mhead-logo{width:46px;height:auto}
.mhead h1{font:600 24px/1.4 var(--thai)}
.mhead-meta{font-size:14px;line-height:1.5;color:var(--pearl)}
.mhead-home{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;background:var(--cream);color:var(--ink);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;transition:background-color .2s var(--ease)}
.mhead-home:hover{background:#fff}

.tool-h{font:600 21px/1.45 var(--thai);margin-bottom:10px}
.finder-tool{padding-block:18px 8px}
.search{display:grid;gap:6px;margin-bottom:12px}
.search label{font-weight:700;font-size:15px}
.search input{width:100%;min-height:48px;padding:0 14px;border-radius:10px;border:1.5px solid rgba(220,209,240,.4);background:var(--dusk-0);color:var(--cream);font:400 17px var(--sans)}
.search input::placeholder{color:var(--mist)}
.search input:focus-visible{outline-offset:1px}
.search-none{color:var(--pearl);font-size:15px}
.pick-group{margin-top:12px}
.pick-k{font:500 15px/1 var(--latin);letter-spacing:.12em;color:var(--kt);margin-bottom:6px;display:flex;align-items:center;gap:10px}
.pick-k::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--kt) 35%,transparent)}
.pick-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.pick{display:grid;justify-items:center;align-content:start;gap:2px;min-height:92px;padding:6px 2px;border-radius:12px;text-decoration:none;transition:background-color .2s var(--ease)}
.pick img,.pick .mono{width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--k) 35%,var(--dusk-2))}
.pick-code{font-weight:700;font-size:14px;line-height:1.3;text-align:center;letter-spacing:.02em}
.pick:hover{background:rgba(249,244,222,.07)}
.pick[aria-current=true]{background:color-mix(in srgb,var(--k) 30%,var(--dusk-1));box-shadow:inset 0 0 0 2px var(--kt)}
.pick-list li[hidden],.pick-group[hidden]{display:none}
.mono{display:grid;place-items:center;font:500 17px/1 var(--latin);letter-spacing:.04em;color:#fff;background:var(--k)!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75),inset 0 0 0 5px var(--k),inset 0 0 0 6px rgba(255,255,255,.5)}

.mapband{padding-block:14px 8px}
.map{position:relative;width:100%;aspect-ratio:1490/1404;margin-inline:auto;overflow:hidden;border-radius:14px;background:#1A1E36;touch-action:pan-y;user-select:none;-webkit-user-select:none;box-shadow:0 0 0 1px var(--rule),0 12px 30px rgba(8,4,20,.4)}
.map.zoomed{touch-action:none;cursor:grab}
.map-canvas{--s:1;position:absolute;inset:0;transform-origin:0 0}
.map-canvas.anim{transition:transform .6s var(--ease)}
.map-canvas.anim .pins>*{transition:transform .6s var(--ease)}
.campus{display:block;width:100%;height:100%}
.campus text{font-family:var(--sans);font-weight:700}
.campus .land{fill:#1E1A3A}
.campus .museum{fill:#252042}
.campus .road{fill:#3A3563}
.campus .river{fill:url(#river)}
.campus .ground{fill:#2E2A58;stroke:#625C96;stroke-width:4}
.campus .fence{fill:#2F3A4A;stroke:#625C96;stroke-width:3}
.campus .track{fill:#8A5446}
.campus .pitch{fill:#4C8A3C;stroke:#E9E3CF;stroke-width:3}
.campus .field.is-on .pitch{fill:#64AD4E;stroke:#FFD27A;stroke-width:8}
.campus .trees circle{fill:#3E7A3A}
.campus .hub{fill:#4E4378;stroke:#E8C27A;stroke-width:5;stroke-dasharray:16 10}
.campus .hub.is-on{fill:#8A7440;stroke:#FFD27A}
.campus .statue{fill:#9AA2C6}
.campus .court{fill:#363062;stroke:#625C96;stroke-width:3}
.campus .walk{fill:none;stroke:#FFF3CF;stroke-width:7;stroke-dasharray:20 16;stroke-linecap:round}
.campus .shadows{fill:#0A0718;opacity:.6}
.campus .bld{fill:#EFE6D4;stroke:#FFFBEE;stroke-width:2;transition:fill .3s}
.campus .bld-dome{fill:#E3B04A}
.campus .bld-hist{fill:#D8A95A}
#map .campus .bld.is-on{fill:#FFD27A;stroke:#fff;stroke-width:8}
.campus .area text{fill:#B3ABD8;font-size:56px}
.campus .area .on-road{fill:#CFCAE8;font-size:30px} /* fits inside the 36-unit road band */
.campus .river-label{fill:#D5E2FF;font-size:60px;letter-spacing:.04em}
.campus .north circle{fill:#16122E;stroke:#B3ABD8;stroke-width:4}
.campus .north path{fill:#F9F4DE}
.campus .north text{fill:#F9F4DE;font-size:56px;font-family:var(--latin)}

/* Labels on the map (2D and 3D share them): small pills and dots, faculty pins, gates. */
.pins{position:absolute;inset:0;pointer-events:none}
.pins>*{position:absolute;pointer-events:auto;transform:translate(calc(-50% + var(--ox,0) * 46px / var(--s)),calc(-50% + var(--oy,0) * 58px / var(--s))) scale(calc(1 / var(--s)))}
.clash{visibility:hidden}
.clash.is-on{visibility:visible}
.in-cluster{display:none!important}
.expand .in-cluster{display:grid!important}
.expand .cluster{display:none}
.dot{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;z-index:0}
.dot i{width:12px;height:12px;border-radius:50%;background:#F2E9D2;box-shadow:0 0 0 3px #16122E,0 1px 4px rgba(0,0,0,.5);transition:background-color .2s var(--ease)}
.dot span{display:none;position:absolute;left:50%;bottom:32px;transform:translateX(-50%);padding:1px 8px;border-radius:6px;background:var(--gold);color:var(--ink);font-size:12px;font-weight:700;line-height:1.5;width:max-content;max-width:min(220px,55vw);text-align:center}
.dot:hover i{background:var(--gold)}
.dot.is-on{z-index:3}
.dot.is-on i{background:var(--gold)}
.dot.is-on span{display:block}
.lm{min-height:26px;padding:1px 9px;border:0;border-radius:999px;background:var(--cream);color:var(--ink);font-size:12px;font-weight:700;line-height:1.6;white-space:nowrap;pointer-events:none;box-shadow:0 2px 5px rgba(0,0,0,.45);transition:background-color .2s var(--ease)}
.lm.is-on{background:var(--gold)}
.hubtag{display:grid;justify-items:center;padding:2px 10px;border-radius:10px;background:var(--gold);color:var(--ink);font-size:13px;font-weight:700;line-height:1.4;white-space:nowrap;pointer-events:none;box-shadow:0 2px 5px rgba(0,0,0,.45)}
.hubtag small{font-size:12px;font-weight:400}
.cluster{display:grid;justify-items:center;width:auto;padding:0;border:0;background:none;z-index:1}
.stack{display:flex;padding-left:10px}
.stack img,.stack .mono{width:28px;height:28px;margin-left:-10px;border-radius:50%;background:#3A3F66;box-shadow:0 0 0 2px #F2E9D2,0 2px 5px rgba(0,0,0,.45)}
.stack .mono{font-size:10px}
.cluster>span:last-child{margin-top:3px;padding:0 6px;border-radius:5px;background:#16122E;color:var(--cream);font-size:12px;font-weight:700;line-height:1.5;white-space:nowrap}
.cluster.is-on .stack img,.cluster.is-on .stack .mono{box-shadow:0 0 0 2px var(--gold),0 2px 5px rgba(0,0,0,.45)}
.pin{display:grid;justify-items:center;align-content:center;width:46px;min-height:52px;text-decoration:none;z-index:1}
.pin.is-on{z-index:2}
.pin img,.pin .mono{width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--k) 35%,#16122E);box-shadow:0 0 0 3px var(--kt),0 3px 6px rgba(0,0,0,.45);transition:transform .25s var(--ease)}
.pin .mono{font-size:12px}
.pin>span[lang]{margin-top:3px;padding:0 5px;border-radius:5px;background:#16122E;color:var(--cream);font-size:12px;font-weight:700;line-height:1.5}
/* Overview: pins are small avatars (code hidden until zoomed in or selected); the 44px hit area stays. */
.map-canvas:not(.expand) .pin:not(.is-on),.l3:not(.expand) .pin:not(.is-on){width:44px;min-height:44px}
.map-canvas:not(.expand) .pin:not(.is-on) img,.map-canvas:not(.expand) .pin:not(.is-on) .mono,
.l3:not(.expand) .pin:not(.is-on) img,.l3:not(.expand) .pin:not(.is-on) .mono{width:28px;height:28px;box-shadow:0 0 0 2px var(--kt),0 2px 5px rgba(0,0,0,.45)}
.map-canvas:not(.expand) .pin:not(.is-on)>span[lang],.l3:not(.expand) .pin:not(.is-on)>span[lang]{display:none}
.map-canvas:not(.expand) .pin:not(.is-on) .mono,.l3:not(.expand) .pin:not(.is-on) .mono{font-size:9px}
/* Pins that meet merge: the one in front carries a "+N" chip and a second avatar edge behind it. */
.pin .more{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--gold);color:var(--ink);font-size:11px;font-weight:700;line-height:18px;text-align:center}
.pin .more:empty{display:none}
.pin.stacked img,.pin.stacked .mono{box-shadow:0 0 0 2px var(--kt),5px -3px 0 1px #3A3F66,5px -3px 0 3px #F2E9D2,0 2px 5px rgba(0,0,0,.45)}
.pin.is-on img,.pin.is-on .mono{box-shadow:0 0 0 3px var(--gold),0 3px 6px rgba(0,0,0,.45);transform:scale(1.15)}
.map-canvas .gate-r{transform:translate(-100%,-50%) scale(calc(1 / var(--s)));transform-origin:100% 50%}
.map-canvas .gate-l{transform:translate(0,-50%) scale(calc(1 / var(--s)));transform-origin:0 50%}
.gate{padding:0 7px;border-radius:999px;background:var(--cream);color:var(--ink);font-size:12px;font-weight:700;line-height:1.6;white-space:nowrap;pointer-events:none;box-shadow:0 2px 4px rgba(0,0,0,.4)}
.place{padding:2px 8px;border-radius:6px;background:var(--gold);color:var(--ink);font-size:12px;font-weight:700;white-space:nowrap}
.map-zoom{position:absolute;right:8px;bottom:8px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.map-zoom button,.mode{min-width:44px;height:44px;padding:0 10px;border:0;border-radius:10px;background:var(--cream);color:var(--ink);font-weight:700;font-size:22px;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.4);transition:background-color .2s var(--ease),transform .15s var(--ease)}
.map-zoom button:hover,.mode:hover{background:#fff}
.map-zoom button:active,.mode:active{transform:scale(.96)}
.map-zoom svg{width:22px;height:22px;display:block;margin:auto}
.map-zoom button[hidden]{display:none}

/* 3D view (map3d.js). The 2D plan stays underneath as the fallback. */
.map.is-3d{aspect-ratio:1/1.08;max-height:calc(100svh - 80px);touch-action:auto;background:#2C2A4A}
.map.is-3d .map-canvas{display:none}
.map3d{position:absolute;inset:0;isolation:isolate} /* labels stack inside, always under the buttons */
.map3d canvas{display:block;width:100%;height:100%;cursor:grab}
.map3d canvas:active{cursor:grabbing}
.l3{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.l3>*{position:absolute;left:0!important;top:0!important;pointer-events:none;will-change:transform} /* the map takes every press; map3d.js routes taps to the pin under them */
.t3{padding:0 6px;border-radius:5px;background:rgba(22,18,46,.72);color:#E6E1F6;font-size:12px;font-weight:700;line-height:1.6;white-space:nowrap;pointer-events:none}
.t3-river{background:none;color:#D5E2FF;font-size:14px;letter-spacing:.04em}
.m3-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:2px 12px;border-radius:999px;background:rgba(22,18,46,.78);color:var(--cream);font-size:13px;font-weight:700;line-height:1.7;white-space:nowrap;pointer-events:none;transition:opacity .4s var(--ease)}
.m3-hint:empty,.m3-hint.gone{opacity:0}
.mode{position:absolute;right:8px;top:8px;z-index:3;padding:0 12px;font-size:14px}
.mode[hidden]{display:none}

.map-card:empty{display:none}
.map-card{margin-top:12px;padding:14px 16px;border-radius:12px;background:var(--dusk-2);box-shadow:inset 0 0 0 1px var(--rule);min-height:76px}
.card-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.card-code{font:500 28px/1.2 var(--latin);letter-spacing:.06em}
.card-k{font:500 13px/1 var(--latin);letter-spacing:.12em;color:var(--kt)}
.card-name{margin-top:4px;font-weight:700;font-size:16px;line-height:1.55}
.card-b,.card-here,.card-soon{margin-top:8px;display:flex;align-items:center;gap:10px;font-size:15px;line-height:1.5;color:var(--pearl)}
.ic{flex:none;width:26px;height:26px;fill:var(--cream)}
.ic-none{fill:none;stroke:var(--mist);stroke-width:2;stroke-dasharray:3 3}
.w-k{font-weight:700;color:var(--cream)}

.key{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:12px;font-size:14px;line-height:1.6;color:var(--pearl)}
.key-pin,.key-hub{flex-basis:100%}
.key-hub::before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border-radius:3px;background:#4E4378;box-shadow:inset 0 0 0 2px #E8C27A}
.key-k{display:inline-flex;align-items:center;gap:6px;font:500 13px/1.6 var(--latin);letter-spacing:.08em;color:var(--kt)}
.key-k::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--k)}
.blist{margin-top:14px;border-top:1px solid var(--rule)}
.blist summary{display:flex;align-items:center;min-height:48px;font:600 19px/1.45 var(--thai)}
.blist ol{display:grid;gap:0 16px}
.bl{display:flex;align-items:center;width:100%;min-height:48px;padding:6px 8px;border:0;border-bottom:1px solid var(--rule);background:none;text-align:left;font-size:15px;line-height:1.45;border-radius:6px;transition:background-color .2s var(--ease)}
.bl:hover{background:rgba(249,244,222,.07)}
.bl.is-on{background:rgba(255,210,122,.2)}
.map-src{margin-top:12px;font-size:13px;line-height:1.6;color:var(--mist)}

/* Kingdom sections on /map/: practical lists, each washed in its kingdom's colour. */
.realm{position:relative;padding-block:clamp(40px,8vw,72px);scroll-margin-top:8px;border-top:1px solid var(--rule);background:linear-gradient(color-mix(in srgb,var(--k) 22%,transparent),transparent 360px)}
.realm-head{display:flex;align-items:center;gap:14px}
.realm-art{flex:none;width:92px;height:92px;border-radius:50%;object-fit:cover;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}
.realm-name{font:500 clamp(32px,8.6vw,50px)/1.15 var(--latin);letter-spacing:.07em;color:var(--kt)}
.realm-th{font:600 clamp(17px,4.6vw,21px)/1.45 var(--thai)}
.cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px;margin-top:22px}
.fac{display:grid;grid-template-columns:84px 1fr;align-items:center;gap:12px;padding:12px;border-radius:12px;background:color-mix(in srgb,var(--k) 16%,var(--dusk-1));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--kt) 22%,transparent);scroll-margin-top:24px;transition:box-shadow .3s}
.fac img{height:100px;width:84px;object-fit:contain}
.mono-lg{width:72px;height:72px;margin:6px;border-radius:50%;font-size:22px}
.fac-code{font:500 21px/1.3 var(--latin);letter-spacing:.06em}
.fac-name{font-size:15px;line-height:1.55}
.fac-where{margin-top:2px;font-size:14px;line-height:1.5;color:var(--pearl)}
.fac:focus{outline:none}
.to-map{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--kt);text-decoration-thickness:2px}
.fac:target,.fac.is-on{box-shadow:inset 0 0 0 2px var(--kt)}
.fac.flash{animation:flash 1.4s var(--ease)}
@keyframes flash{0%,40%{background:color-mix(in srgb,var(--k) 36%,var(--dusk-1))}}
.map-foot{text-align:center;border-top:1px solid var(--rule)}

/* Wide screens show the KV's pale upper fog behind the date, so the date goes dark on a pearl halo. */
@media (min-aspect-ratio:1/1){
  .hero-meta{color:var(--ink);text-shadow:0 0 14px rgba(249,244,222,.95),0 0 4px rgba(249,244,222,.9);padding-bottom:clamp(20px,3svh,32px)}
  .hero-venue{color:#3A3155}
  .hero-meta::before{content:"";position:absolute;inset:-10% -30% 18%;z-index:-1;background:radial-gradient(closest-side,rgba(249,244,222,.8),rgba(249,244,222,.4) 60%,transparent)}
}
@media (min-width:760px){
  .notices .wrap{grid-template-columns:1fr 1fr}
  .mhead .wrap{padding-block:26px 20px}
  .mhead-logo{width:56px}
  .mhead h1{font-size:28px}
  .blist ol{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
  .mapgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
  .mapgrid .finder-tool{padding-top:28px;grid-column:1;grid-row:1} /* the map comes first in the page (phones open on it); on wide screens the picker stays left */
  .mapgrid .mapband{grid-column:2;grid-row:1}
  .mapgrid .mapband{padding-top:28px}
  .map{max-height:calc(100svh - 120px);width:auto}
  .map.is-3d{aspect-ratio:4/5}
  .pick-list{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .motes,.mist{display:none!important}
}