/* world.css · the world (world.html): a walkable, wrong-coloured block world of the site. 2026-10-04 */
html, body { height: 100%; margin: 0; }
body.world { background: #0C0812; color: #F2E9D8; overflow: hidden; font-family: var(--serif); }

#w { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#w:active { cursor: grabbing; }
#labels { position: fixed; inset: 0; pointer-events: none; }
.hud { position: fixed; z-index: 2; font-family: var(--mono); font-size: var(--mono-a); letter-spacing: var(--mono-a-track); text-transform: uppercase; }
.hud a { color: #F2E9D8; text-decoration: none; border-bottom: 1px solid rgba(242,233,216,.35); padding-bottom: 2px; }
.hud a:hover { border-color: var(--red); }
#tl { top: 18px; left: 22px; }
#tr { top: 18px; right: 22px; }
#list { top: 56px; right: 22px; width: 190px; text-transform: none; letter-spacing: 0; font-family: var(--serif); }
#list h2 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; font: 400 var(--mono-b)/1 var(--mono); letter-spacing: var(--mono-b-track); text-transform: uppercase; color: #9A8AA8; }
#list h2 button { background: none; border: 0; color: #9A8AA8; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
#list h2 button:hover { color: #F2E9D8; }
#list ol { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 230px); overflow: auto; }
#list li { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; font-size: 0.92rem; line-height: 1.25; }
#list li i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid #7A6A8A; }
#list li.lit { color: #F2E9D8; }
#list li.lit i { background: #FFD27A; border-color: #FFD27A; }
#list li.dark { color: #6A5A78; }
#list li.dark span::after { content: ' · not yet'; font-family: var(--mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); vertical-align: 1px; }
#list li.sub { padding-left: 14px; font-size: 0.82rem; }
#list li:hover span { text-decoration: underline; text-decoration-color: rgba(242,233,216,.4); }
#list p { margin: 8px 0 0; font: 400 9px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #6A5A78; }
#list.off ol, #list.off p { display: none; }
#touch li.sub { padding-left: 16px; }
#touch li.sub a { font-size: 1rem; }
#count { bottom: 22px; left: 22px; font-family: var(--display); font-size: clamp(1.1rem, 1.6vw, 1.5rem); letter-spacing: 0; text-transform: none; line-height: 1.3; max-width: 34ch; }
#count b { color: var(--red); font-weight: 400; }
#count small { display: block; font-family: var(--mono); font-size: var(--mono-b); letter-spacing: var(--mono-b-track); text-transform: uppercase; color: #9A8AA8; margin-top: 8px; }
#where { bottom: 22px; right: 22px; background: none; border: 1px solid rgba(242,233,216,.4); color: #F2E9D8; padding: 10px 14px; border-radius: 2px; cursor: pointer; font: inherit; font-family: var(--mono); font-size: var(--mono-a); letter-spacing: var(--mono-a-track); text-transform: uppercase; }
#where:hover, #where.on { border-color: var(--red); color: #fff; }
#help { bottom: 22px; left: 50%; transform: translateX(-50%); color: #9A8AA8; text-align: center; white-space: nowrap; }
#help kbd { font: inherit; color: #F2E9D8; }
#aim { position: fixed; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(242,233,216,.75); pointer-events: none; z-index: 2; }
#aim.hit { background: var(--red); box-shadow: 0 0 0 3px rgba(224,58,31,.25); }
#target { position: fixed; left: 50%; top: 50%; transform: translate(-50%, 22px); font-family: var(--display); font-size: 1.15rem; color: #F2E9D8; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .15s; text-align: center; }
#target.on { opacity: 1; }
#target { font-size: 1rem; white-space: nowrap; }
#target small { display: block; font-family: var(--mono); font-size: var(--mono-c); letter-spacing: var(--mono-c-track); text-transform: uppercase; color: #9A8AA8; margin-top: 4px; }
#touch { display: none; position: fixed; inset: 0; z-index: 5; background: #0C0812; padding: 28px 22px 40px; overflow: auto; }
body.touch #touch { display: block; }
body.touch #w, body.touch #labels, body.touch #aim, body.touch #target, body.touch #help, body.touch #where { display: none; }
#touch h1 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; margin: 40px 0 6px; }
#touch p { color: #9A8AA8; max-width: 38ch; margin: 0 0 24px; }
#touch ol { list-style: none; padding: 0; margin: 0; }
#touch li { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(242,233,216,.12); }
#touch li a { color: #F2E9D8; text-decoration: none; font-family: var(--display); font-size: 1.15rem; }
#touch li.dark a { color: #5A4A68; }
#touch li span { font-family: var(--mono); font-size: var(--mono-c); letter-spacing: var(--mono-c-track); text-transform: uppercase; color: #9A8AA8; }
#touch li.dark span { color: var(--red); }
@media (max-width: 900px) { #help { display: none; } #count { max-width: 60vw; } }

/* ── The door, in the HUD ── */
#tl .tl-sub { color: #9A8AA8; margin-left: .8rem; }
#tr .plain { border: 1px solid var(--red); color: #fff; background: rgba(224,58,31,.18); padding: 9px 14px; border-radius: 2px; }
#tr .plain:hover { background: var(--red); }
#list { top: 56px; }
#list p a { color: #9A8AA8; }
#door { top: 72px; left: 22px; width: min(440px, calc(100vw - 44px)); text-transform: none; letter-spacing: 0; font-family: var(--serif); pointer-events: auto; }
.d-head { display: none; position: relative; background: rgba(12,8,18,.78); border: 1px solid rgba(242,233,216,.25); padding: 16px 40px 14px 18px; margin-bottom: 10px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#door.first .d-head { display: block; }
.d-h { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.08; margin: 0 0 .5rem; color: #F2E9D8; letter-spacing: -0.01em; }
.d-h del { color: #9A8AA8; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.d-h em .bar { background: #F2E9D8; color: #F2E9D8; border-radius: 2px; }
.d-line { margin: 0; font-size: .92rem; line-height: 1.45; color: #C8BCD4; }
.d-line b { font-weight: 400; color: var(--red); }
.d-x { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: #9A8AA8; font: 400 20px/1 var(--serif); cursor: pointer; }
.d-x:hover { color: #F2E9D8; }
.d-dials { display: flex; gap: 10px; flex-wrap: wrap; }
.d-dial { flex: 1 1 180px; }
.d-k { display: block; font-family: var(--mono); font-size: var(--mono-c); letter-spacing: var(--mono-c-track); text-transform: uppercase; color: #9A8AA8; margin-bottom: 5px; }
.d-seg { display: flex; border: 1px solid rgba(242,233,216,.35); border-radius: 2px; overflow: hidden; background: rgba(12,8,18,.7); }
.d-seg button { flex: 1; background: none; border: 0; border-left: 1px solid rgba(242,233,216,.15); color: #C8BCD4; font-family: var(--serif); font-size: .88rem; padding: .5rem .4rem .42rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.d-seg button:first-child { border-left: 0; }
.d-seg button small { font-family: var(--mono); font-size: 7.5px; letter-spacing: .1em; text-transform: uppercase; color: #7A6A88; }
.d-seg button[aria-checked="true"] { background: #F2E9D8; color: #111110; }
.d-seg button[aria-checked="true"] small { color: #5A4A68; }
.d-seg button:hover:not([aria-checked="true"]) { background: rgba(242,233,216,.08); color: #F2E9D8; }
@media (max-width: 900px) { #door { display: none; } }

/* ── Dummy-proofing: the hint card, the walking line, the plain help ── */
#help { text-transform: none; letter-spacing: 0; font-family: var(--serif); font-size: .95rem; color: #C8BCD4; }
#help button { background: none; border: 1px solid rgba(242,233,216,.35); color: #F2E9D8; font: inherit; font-size: .85rem; padding: 4px 10px; margin-left: 10px; border-radius: 2px; cursor: pointer; }
#help button:hover { border-color: var(--red); }
#walking { bottom: 56px; left: 50%; transform: translateX(-50%); font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 1rem; color: #FFD27A; opacity: 0; transition: opacity .25s; pointer-events: none; }
#walking.on { opacity: 1; }
#hint { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(12,8,18,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#hint[hidden] { display: none; }
.h-card { width: min(520px, calc(100vw - 48px)); background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: 26px 30px 24px; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.h-k { margin: 0 0 10px; font-family: var(--mono); font-size: var(--mono-b); letter-spacing: var(--mono-b-track); text-transform: uppercase; color: var(--muted); }
.h-card h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 14px; line-height: 1.1; }
.h-card ol { margin: 0 0 20px; padding-left: 1.3em; font-size: 1.05rem; line-height: 1.5; }
.h-card li { margin: 4px 0; }
.h-card b { font-weight: 600; }
.h-card button { background: var(--red); color: #fff; border: 0; padding: 12px 22px; font-family: var(--mono); font-size: var(--mono-a); letter-spacing: var(--mono-a-track); text-transform: uppercase; cursor: pointer; }
.h-card button:hover { background: var(--ink); }
#target { font-size: 1.15rem; }
#target small { font-size: 10px; color: #F2E9D8; opacity: .8; }
#target { background: rgba(12,8,18,.86); border: 1px solid rgba(242,233,216,.35); padding: 8px 14px 9px; border-radius: 2px; }
#target small { margin-top: 3px; }
#hallmsg { top: 60px; left: 50%; transform: translateX(-50%); font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 1.05rem; color: #111110; background: rgba(242,233,216,.92); padding: 10px 18px; border: 1px solid #111110; opacity: 0; transition: opacity .3s; pointer-events: none; max-width: 60ch; text-align: center; }
#hallmsg.on { opacity: 1; }
body.inside #count, body.inside #count b { color: #111110; } body.inside #count small { color: #5A4A68; }
body.inside #help { color: #3A3040; } body.inside #help button { color: #111110; border-color: rgba(17,17,16,.4); }
body.inside #tl a, body.inside #tr a { color: #111110; border-color: rgba(17,17,16,.4); } body.inside #tl .tl-sub { color: #5A4A68; }
body.inside #where { color: #111110; border-color: rgba(17,17,16,.5); }
body.inside #list { background: rgba(242,233,216,.9); padding: 10px 12px; border: 1px solid rgba(17,17,16,.3); }
body.inside #list li.lit { color: #111110; } body.inside #list li.dark { color: #8A7A98; }
body.inside #target { background: rgba(242,233,216,.95); color: #111110; border-color: #111110; } body.inside #target small { color: #5A4A68; }

/* ── Transitions: the hand-off to a page, and the blink for a jump in place ── */
#blink { position: fixed; inset: 0; z-index: 40; background: #0C0812; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
#blink.on { opacity: 1; transition: opacity .2s ease-in; }
#leave { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; background: var(--paper); opacity: 0; pointer-events: none; transition: opacity .55s ease .2s; }
#leave.on { opacity: 1; pointer-events: auto; }
#leave .plate { display: flex; align-items: center; gap: 16px; padding: 18px 28px 17px 22px; background: #1A1420; color: #F2E9D8; border: 1px solid #F2E9D8; box-shadow: 0 20px 60px rgba(0,0,0,.25); font-family: var(--mono); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; line-height: 1; transform: translateY(18px) scale(.94); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1) .3s, opacity .4s ease .3s; }
#leave.on .plate { transform: none; opacity: 1; }
#leave .pip { width: 10px; height: 10px; border-radius: 50%; background: #FFD27A; flex: none; }
#leave .pip.new { background: none; border: 1.5px solid #E03A1F; }
#leave b { font-weight: 700; font-size: 17px; letter-spacing: .2em; }
body.go .hud, body.go #labels, body.go #target, body.go #aim { transition: opacity .3s; opacity: 0; }
/* The eye sits bottom-right on every page; the Map button steps left of it. */
html.ph-site #where { right: calc(16px + 56px + 18px); }

/* ── world2 (2026-10-08): the nine new things ── */
#before { top: 18px; left: 50%; transform: translateX(-50%); font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: .95rem; color: #9A8AA8; white-space: nowrap; }
#second { bottom: 112px; left: 22px; font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 1rem; color: #C8BCD4; cursor: pointer; max-width: 34ch; line-height: 1.35; }
#second b { font-weight: 400; color: #F2E9D8; } #second span { color: var(--red); border-bottom: 1px solid rgba(224,58,31,.5); }
#second:hover span { color: #fff; }
#gods { bottom: 64px; left: 50%; transform: translateX(-50%); justify-content: center; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; text-transform: none; letter-spacing: 0; font-family: var(--serif); }
#gods span { font-family: var(--mono); font-size: var(--mono-c); letter-spacing: var(--mono-c-track); text-transform: uppercase; color: #9A8AA8; margin-right: 6px; }
#gods button { display: inline-flex; align-items: center; gap: 7px; background: rgba(12,8,18,.6); border: 1px solid rgba(242,233,216,.3); color: #F2E9D8; font: inherit; font-size: .88rem; padding: 5px 10px 5px 7px; border-radius: 2px; cursor: pointer; }
#gods button i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
#gods button:hover { border-color: #F2E9D8; }
#gods button.on { border-color: var(--red); background: rgba(224,58,31,.2); }
#count { bottom: 22px; }
@media (max-height: 760px) { #second, #temple { display: none; } }
#edge { top: 56px; left: 22px; font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2.2rem); max-width: 18ch; line-height: 1.1; text-transform: none; letter-spacing: 0; color: #C8BCD4; opacity: 0; transition: opacity .6s; pointer-events: none; }
#edge.on { opacity: 1; }
#buildmsg { top: 60px; left: 50%; transform: translateX(-50%); font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 1.05rem; color: #F2E9D8; background: rgba(26,20,32,.92); border: 1px solid rgba(242,233,216,.4); padding: 10px 18px; opacity: 0; transition: opacity .3s; pointer-events: none; max-width: 60ch; text-align: center; }
#buildmsg.on { opacity: 1; }
#walkbtn { bottom: 72px; right: 22px; background: none; border: 1px solid rgba(242,233,216,.4); color: #F2E9D8; padding: 10px 14px; border-radius: 2px; cursor: pointer; font: inherit; font-family: var(--mono); font-size: var(--mono-a); letter-spacing: var(--mono-a-track); text-transform: uppercase; }
#walkbtn:hover { border-color: var(--red); color: #fff; }
html.ph-site #walkbtn { right: calc(16px + 56px + 18px); }
#build { top: 56px; left: 50%; transform: translateX(-50%); width: min(520px, calc(100vw - 44px)); background: rgba(12,8,18,.9); border: 1px solid rgba(242,233,216,.35); padding: 14px 18px 14px; text-transform: none; letter-spacing: 0; font-family: var(--serif); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 3; }
#build[hidden] { display: none; }
.b-k { margin: 0 0 10px; font-family: var(--mono); font-size: var(--mono-c); letter-spacing: var(--mono-c-track); text-transform: uppercase; color: #9A8AA8; }
#swatches { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
#swatches button { width: 30px; height: 30px; border: 2px solid rgba(242,233,216,.25); border-radius: 2px; cursor: pointer; padding: 0; }
#swatches button:hover { border-color: #F2E9D8; }
#swatches button.on { border-color: var(--red); box-shadow: 0 0 0 2px rgba(224,58,31,.35); }
.b-line { margin: 0; font-size: .95rem; line-height: 1.45; color: #C8BCD4; }
.b-line b { font-weight: 400; color: #F2E9D8; }
.b-line button { background: none; border: 1px solid rgba(242,233,216,.35); color: #F2E9D8; font: inherit; font-size: .85rem; padding: 3px 9px; margin-left: 6px; border-radius: 2px; cursor: pointer; }
body.building #aim { background: var(--red); box-shadow: 0 0 0 3px rgba(224,58,31,.25); }
#walkcard { position: fixed; inset: 0; z-index: 46; display: grid; place-items: center; background: rgba(12,8,18,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#walkcard[hidden] { display: none; }
.wc { background: var(--paper); border: 1px solid var(--ink); padding: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.55); max-width: min(560px, calc(100vw - 48px)); }
.wc img { display: block; width: 100%; height: auto; max-height: calc(100vh - 140px); object-fit: contain; }
.wc p { margin: 12px 0 0; display: flex; gap: 10px; align-items: center; font-family: var(--mono); font-size: var(--mono-a); letter-spacing: var(--mono-a-track); text-transform: uppercase; }
.wc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); }
.wc button { background: none; border: 1px solid var(--ink); color: var(--ink); font: inherit; padding: 6px 10px; cursor: pointer; }
.wc button[data-close] { margin-left: auto; }
body.building #before, body.building #gods, body.building #walking, body.building #temple, body.building #second, body.inside #before, body.inside #second, body.inside #temple, body.inside #gods, body.inside #walkbtn, body.inside #edge, body.map #temple, body.map #second { display: none; }
#walking { top: 96px; bottom: auto; }
#before { max-width: 60vw; white-space: normal; text-align: center; }

/* ── 2026-10-09: ease of use. Bigger plain help, the temple's line, the map you can drag, the three-step block panel ── */
#help { font-size: 1rem; color: #D8CCE4; }
#help b { font-weight: 400; color: #F2E9D8; border: 1px solid rgba(242,233,216,.3); border-radius: 3px; padding: 0 5px; }
#help button { font-size: .95rem; padding: 5px 12px; }
.h-card ol { font-size: 1.12rem; line-height: 1.5; }
.h-card li { margin: 7px 0; }
#temple { bottom: 200px; left: 22px; font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 1rem; color: #C8BCD4; cursor: pointer; max-width: 34ch; line-height: 1.35; }
#temple b { font-weight: 400; color: #F2E9D8; } #temple span { color: var(--red); border-bottom: 1px solid rgba(224,58,31,.5); }
#temple:hover span { color: #fff; }
#second { bottom: 112px; }
@media (max-height: 860px) { #temple { display: none; } }
#mapctl { display: none; bottom: 22px; left: 50%; transform: translateX(-50%); align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-family: var(--serif); }
body.map #mapctl { display: flex; }
#mapctl p { margin: 0 8px 0 0; font-size: .95rem; color: #D8CCE4; max-width: 46ch; }
#mapctl button { background: rgba(12,8,18,.7); border: 1px solid rgba(242,233,216,.4); color: #F2E9D8; font: inherit; font-size: 1.1rem; line-height: 1; min-width: 38px; height: 38px; padding: 0 12px; border-radius: 2px; cursor: pointer; }
#mapctl button[data-me] { font-size: .9rem; }
#mapctl button:hover { border-color: var(--red); }
body.map #help, body.map #gods, body.map #walking, body.map #before, body.map #walkbtn { display: none; }
#mapctl button { white-space: nowrap; }
#build { width: min(560px, calc(100vw - 44px)); }
.b-steps { list-style: none; margin: 0 0 10px; padding: 0; }
.b-steps li { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 9px; font-size: 1rem; line-height: 1.45; color: #D8CCE4; }
.b-steps li > b { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff; font: 600 13px/24px var(--mono); text-align: center; }
.b-steps li div b { font-weight: 400; color: #F2E9D8; }
#chosen { color: #F2E9D8; text-transform: capitalize; }
#swatches { margin: 6px 0 0; }
#swatches button { width: 36px; height: 36px; }

/* 2026-10-09: the weather where you are (js/world-weather.js), said once when it first shows */
#wx { top: 60px; left: 50%; transform: translateX(-50%); font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 1.05rem; color: #D8CCE4; text-align: center; width: max-content; max-width: min(46ch, 86vw); line-height: 1.4; opacity: 0; transition: opacity 1.2s; pointer-events: none; text-shadow: 0 1px 10px rgba(12,8,18,.9); }
#wx.on { opacity: 1; }
#wx small { display: block; margin-top: 4px; font-family: var(--mono); font-size: var(--mono-b); letter-spacing: var(--mono-b-track); text-transform: uppercase; color: #9A8AA8; }
body.inside #wx, body.map #wx, body.building #wx, body.touch #wx { display: none; }