/* EXPLORE WITH YOUR THUMBS (nav/explore.js): a phone on its side, the whole screen the world, the two controls where the
   thumbs rest: lower left (move), lower right (zoom, and Open). Let go, they shrink in a moment to a soft dot on each
   stick (is-idle); a touch in that corner brings them back, and one on the dot takes hold of the stick. Across the top, the
   explorer's own top menu bar, as the app's page has one: Down the page and the menu, the title, how to use it (its arrow:
   the how shows under the bar, is-told), and Close. Dark, so the photographs carry it; gold for what does something. */
.xp { position: fixed; inset: 0; z-index: 2147483200; background: radial-gradient(ellipse at 50% 40%, #2b2621 0%, #171411 70%); color: #f3ede2; opacity: 0; transition: opacity 0.2s ease; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.xp.is-on { opacity: 1; }
.xp-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.xp-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }

/* ---- the things in it: a card each, shown as much as its size on the screen allows */
.xp-it { position: absolute; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; background: none; color: #f3ede2; text-align: left; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.xp-it .xp-c-ph { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #3a332b; color: #e2c98f; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.7); outline: 3px solid transparent; outline-offset: 3px; transition: outline-color 0.2s ease; }
.xp-it .xp-c-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xp-it .xp-c-ph.is-round { border-radius: 50%; aspect-ratio: 1; }
.xp-it .xp-c-ph svg, .xp-it .xp-c-ph .ar-ic { width: 40%; height: 40%; }
.xp-it b { flex: none; font: 600 13px/1.25 var(--sans); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* (the whole name: up to four lines, never squeezed by the date under it) */
.xp-it small { flex: none; font: 11.5px/1.3 var(--sans); color: rgba(243, 237, 226, 0.65); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xp-it.is-focus .xp-c-ph { outline-color: #e2c98f; }
.xp-it.is-focus b { color: #f0d9a6; }
.xp.is-far .xp-it b, .xp.is-far .xp-it small, .xp.is-mid .xp-it small { visibility: hidden; }
.xp.is-far .xp-it .xp-c-ph { box-shadow: none; }

/* ---- the names of the stretches, kept on the screen */
.xp-labels { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.xp-band { position: absolute; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; white-space: nowrap; margin: 0; padding: 3px 9px 4px; border: 0; border-radius: 9px; background: rgba(18, 15, 12, 0.78); color: inherit; font: inherit; text-align: left; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease; }
.xp-band.is-sm { padding: 1px 8px 2px; border-radius: 7px; }
.xp-band.is-sm b { font-size: 12px; }
.xp-band:active { background: rgba(166, 119, 58, 0.55); }
@media (hover: hover) { .xp-band:hover { background: rgba(40, 33, 26, 0.92); } }
.xp-band.is-h { top: calc(10px + env(safe-area-inset-top)); }
.xp-band.is-v { left: calc(10px + env(safe-area-inset-left)); max-width: 30%; }
.xp-band b { overflow: hidden; text-overflow: ellipsis; font: italic 600 15px/1.2 var(--serif); color: #f0d9a6; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.xp-band small { font: 700 10.5px var(--sans); letter-spacing: 0.08em; color: rgba(243, 237, 226, 0.6); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }

/* ---- the top: what this is (on opening, or at the tab); Menu and Close in the corners */
.xp-top { position: absolute; z-index: 4; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 18px calc(12px + env(safe-area-inset-left)); background: linear-gradient(180deg, rgba(14, 12, 10, 0.92) 40%, rgba(14, 12, 10, 0)); pointer-events: none; transition: transform 0.25s ease, opacity 0.25s ease; }
.xp-top > * { pointer-events: auto; }
.xp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; pointer-events: none; }
.xp-t small { font: 800 10px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #e2c98f; }
.xp-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: italic 600 17px/1.2 var(--serif); }
.xp-top { opacity: 0; visibility: hidden; top: var(--xp-bar-h, 54px); padding-top: 10px; /* (under the top bar: how to use it, when asked) */ transition: opacity 0.6s ease, visibility 0s linear 0.6s; }
.xp.is-told .xp-top { opacity: 1; visibility: visible; transition: opacity 0.6s ease, visibility 0s; }
.xp-top .xp-t > small, .xp-top .xp-t > b { display: none; } /* (the title's in the bar) */
.xp-labels { transition: opacity 0.6s ease; }
.xp.is-told .xp-labels { opacity: 0; }
/* ---- the explorer's own top menu bar: Down the page and the menu, the title, how to use it, and Close, as the app's own
   page has its top bar; its row where the app's top bar is (nav/explore.js placeTL) */
.xp-bar { position: absolute; z-index: 6; left: 0; right: 0; top: 0; padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left)); background: rgba(16, 13, 10, 0.86); border-bottom: 1px solid rgba(255, 255, 255, 0.09); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.xp-barrow { display: flex; align-items: center; gap: 8px; max-width: 100%; box-sizing: border-box; }
.xp-bar .xp-corner, .xp-bar .xp-mode { position: static; flex: none; }
.xp-bt { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: 6px; color: #f3ede2; }
.xp-bt small { font: 800 10px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #e2c98f; }
.xp-bt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: italic 600 17px/1.2 var(--serif); }
.xp-bar .xp-tab { position: relative; left: auto; top: auto; flex: none; width: 38px; height: 38px; margin: 0; border-radius: 50%; opacity: 1; pointer-events: auto; }
.xp-bar .xp-tab::before { inset: 0; } /* (its own: a static button's, the whole bar's, took every click on it, Down the page's and the menu's) */
@media (max-width: 520px) { .xp-bar .xp-mode span { display: none; } .xp-bar .xp-mode { padding: 0 10px; } } /* (narrow: the icon alone, its name still said to a reader) */
/* (Menu and Close: two round buttons that stay where they are) */
.xp-corner { position: absolute; z-index: 6; top: calc(8px + env(safe-area-inset-top)); display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; background: rgba(20, 16, 12, 0.66); color: #f3ede2; cursor: pointer; backdrop-filter: blur(6px); -webkit-tap-highlight-color: transparent; }
.xp-corner svg { width: 18px; height: 18px; }
.xp-corner.is-l { left: calc(12px + env(safe-area-inset-left)); }
.xp-corner.is-r { right: calc(12px + env(safe-area-inset-right)); }
.xp-mode { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 13px 0 10px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: rgba(20, 16, 12, 0.66); color: #f3ede2; font: 700 12.5px var(--sans); cursor: pointer; backdrop-filter: blur(6px); -webkit-tap-highlight-color: transparent; }
.xp-mode svg { width: 18px; height: 18px; }
.xp-mode:active { background: rgba(166, 119, 58, 0.6); }
/* (and on the app's own page, first in its top bar: Across the screen, or Full screen after the explorer's menu) */
.xp-pagepill { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; margin: 0; padding: 0 12px 0 9px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 12.5px var(--sans); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.xp-pagepill[hidden] { display: none; }
.xp-pagepill svg { width: 18px; height: 18px; color: var(--gold); }
.xp-pagepill:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.xp-corner:active { background: rgba(166, 119, 58, 0.6); }
/* (the slim tab at the top that brings the title back) */
.xp-tab { position: absolute; z-index: 6; top: calc(6px + env(safe-area-inset-top)); left: 50%; width: 64px; height: 30px; margin-left: -32px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; transition: opacity 0.6s ease, top 0.3s ease; background: rgba(20, 16, 12, 0.66); color: #e2c98f; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.xp-tab::before { content: ''; position: absolute; inset: -6px -14px -14px; }
.xp-tab svg { width: 16px; height: 16px; transition: transform 0.25s ease; }
.xp.is-told .xp-tab svg { transform: rotate(180deg); } /* (open: it says how to put it away) */
.xp-how { margin: 4px 0 0; max-width: 560px; font: 400 13px/1.45 var(--sans); color: rgba(243, 237, 226, 0.82); white-space: normal; }
.xp:not(.is-told) .xp-how { display: none; } /* (the how, only when asked for: on opening, the name alone) */
.xp.is-detail .xp-tab, .xp.is-detail .xp-top { opacity: 0; pointer-events: none; }
.xp.is-detail .xp-top { background: linear-gradient(180deg, rgba(10, 8, 6, 0.7), transparent); }
.xp.is-detail .xp-t { visibility: hidden; }

/* ---- the thumbs' controls */
.xp-pad { position: absolute; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 3; display: flex; align-items: flex-end; gap: 10px; transition: opacity 0.25s ease, transform 0s; touch-action: none; } /* (back at once to full size, so a stick taken hold of is where it shows) */
.xp-pad.is-l { left: calc(14px + env(safe-area-inset-left)); flex-direction: column; align-items: center; gap: 4px; }
.xp-pad.is-r { right: calc(14px + env(safe-area-inset-right)); }
.xp-pad.is-l { transform-origin: 30% 80%; } .xp-pad.is-r { transform-origin: 40% 70%; }
.xp.is-idle .xp-pad { opacity: 0; transform: scale(0.6); pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease; }
.xp.is-idle .xp-pad * { pointer-events: none; }
/* (Open stays: put away, the right side's zoom stick goes, but Open stays where it is, over the corner's patch, ready to use.
   From the owner: "The open button on the landscape mode timeline needs to just stay on the screen. It disappears too quick
   before you get a chance to use it") */
.xp.is-idle .xp-pad.is-r { z-index: 4; opacity: 1; transform: none; }
.xp.is-idle .xp-pad.is-r .xp-zcol { opacity: 0; transform: scale(0.6); transition: opacity 0.35s ease, transform 0.35s ease; }
.xp.is-idle .xp-pad.is-r .xp-b.is-go { pointer-events: auto; }
/* (put away: a soft dot on each stick, and the corner around it still answers a touch) */
.xp-rest { position: absolute; z-index: 3; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgba(226, 201, 143, 0.5); box-shadow: 0 0 0 5px rgba(226, 201, 143, 0.12), 0 0 12px rgba(226, 201, 143, 0.3); opacity: 0; transform: scale(2.2); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; }
.xp.is-idle .xp-rest { opacity: 1; transform: scale(1); }
.xp-zone { position: absolute; z-index: 3; bottom: 0; width: 260px; height: 230px; pointer-events: none; touch-action: none; }
.xp-zone.is-l { left: 0; } .xp-zone.is-r { right: 0; }
.xp.is-idle .xp-zone { pointer-events: auto; }
/* (an opened one is for reading and looking: no thumb controls, no corner buttons; one gold button at the bottom right to go
   back. From the owner: "Those controls should only be for the timeline landscape view") */
.xp.is-detail .xp-pad, .xp.is-detail .xp-rest, .xp.is-detail .xp-zone, .xp.is-detail .xp-corner, .xp.is-detail .xp-hint { display: none; }
.xp-done { position: absolute; z-index: 3; right: calc(16px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 4px; height: 48px; padding: 0 20px 0 14px; border: 0; border-radius: 999px; background: #e2c98f; color: #221e19; font: 700 15px var(--sans); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.xp-done svg { width: 18px; height: 18px; }
.xp-done:active { transform: scale(0.97); }
.xp-joy { position: relative; grid-area: c; width: 92px; height: 92px; border-radius: 50%; background: rgba(20, 16, 12, 0.55); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(6px); touch-action: none; cursor: grab; }
.xp-knob { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: rgba(243, 237, 226, 0.9); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); transition: transform 0.12s ease-out; pointer-events: none; }
.xp-cap { font: 700 10.5px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(243, 237, 226, 0.6); }
.xp-b { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; background: rgba(20, 16, 12, 0.6); color: #f3ede2; cursor: pointer; backdrop-filter: blur(6px); font: 800 13px var(--sans); }
.xp-b svg { width: 20px; height: 20px; }
.xp-b.is-go { width: 64px; height: 64px; border: 0; background: #e2c98f; color: #221e19; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); }
.xp-b.is-go:disabled { background: rgba(226, 201, 143, 0.3); color: rgba(34, 30, 25, 0.6); }

/* ---- the one, opened: its photograph on the left, its words on the right, the thumbs' controls over both */
/* (the opened one: the photograph whole, in the screen's height, on the left; the words given the most room on the right) */
.xp-detail { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: 38% 62%; grid-template-rows: minmax(0, 1fr); background: #0e0c0a; opacity: 0; transition: opacity 0.2s ease; }
.xp-detail[hidden] { display: none; }
.xp-detail.is-on { opacity: 1; }
.xp-ph { position: relative; min-width: 0; min-height: 0; height: 100%; display: grid; place-items: center; overflow: hidden; background: #0b0a08; }
.xp-ph-in { width: 100%; height: 100%; box-sizing: border-box; padding: calc(10px + env(safe-area-inset-top)) 10px 10px calc(10px + env(safe-area-inset-left)); display: grid; place-items: center; overflow: hidden; touch-action: none; }
.xp-ph-in img { display: block; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; border-radius: 6px; transform-origin: 50% 50%; will-change: transform; }
.xp-ph.is-none { color: #e2c98f; }
.xp-ph > img, .xp-ph > span, .xp-ph > svg { max-width: 70%; max-height: 70%; }
.xp-dots { position: absolute; left: 0; right: 0; bottom: calc(30px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 4px; }
.xp-dots button { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.xp-dots button::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); }
.xp-dots button.is-on::before { background: #e2c98f; }
/* (more than one photograph: before and after, on its sides) */
.xp-phnav { position: absolute; z-index: 2; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; background: rgba(14, 12, 10, 0.6); color: #f3ede2; cursor: pointer; backdrop-filter: blur(6px); -webkit-tap-highlight-color: transparent; }
.xp-phnav svg { width: 18px; height: 18px; }
.xp-phnav.is-prev { left: calc(16px + env(safe-area-inset-left)); } .xp-phnav.is-next { right: 16px; }
.xp-phnav:active { background: rgba(166, 119, 58, 0.6); }
.xp-cred { position: absolute; left: calc(12px + env(safe-area-inset-left)); right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); margin: 0; font: 11px/1.35 var(--sans); color: rgba(243, 237, 226, 0.55); }
.xp-cred a { color: inherit; }
.xp-text { min-width: 0; overflow-y: auto; padding: calc(54px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(190px + env(safe-area-inset-bottom)) 20px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.xp-text > small { font: 800 10.5px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #e2c98f; }
.xp-text h2 { margin: 4px 0 4px; font: italic 600 24px/1.2 var(--serif); }
.xp-when { margin: 0 0 10px; font: 600 13px var(--sans); color: rgba(243, 237, 226, 0.65); }
.xp-body { font: 15px/1.6 var(--sans); color: #ece4d6; }
.xp-body p { margin: 0 0 10px; }
.xp-body .xp-note { padding: 8px 10px; border-left: 3px solid #e2c98f; background: rgba(226, 201, 143, 0.1); border-radius: 0 8px 8px 0; font-size: 14px; }
.xp-body blockquote { margin: 10px 0; padding: 8px 12px; border-left: 3px solid #e2c98f; font: italic 16px/1.55 var(--serif); }
.xp-body a { color: #f0d9a6; }
.xp-go, .xp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.xp-chip { padding: 7px 12px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: #f3ede2; font: 600 13px var(--sans); cursor: pointer; text-decoration: none; }
.xp-chip.is-gold { background: #e2c98f; color: #221e19; border-color: #e2c98f; }
.xp-k { display: block; margin: 12px 0 6px; font: 800 10.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(243, 237, 226, 0.55); }
/* ---- the first time: what each thumb does */
.xp-hint { position: absolute; left: 0; right: 0; bottom: calc(196px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; padding: 0 18px; pointer-events: none; transition: opacity 0.6s ease; }
.xp-hint[hidden] { display: none; }
.xp-hint.is-gone { opacity: 0; }
.xp-hint p { max-width: 220px; margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(20, 16, 12, 0.85); font: 13px/1.4 var(--sans); }
.xp-hint b { color: #e2c98f; }
@media (prefers-reduced-motion: reduce) { .xp, .xp-top, .xp-pad, .xp-knob { transition: none; } }

.xp.is-detail .xp-labels { display: none; }

/* ---- a timeline's world (Explore.strip): its stretches, the line of time, the stems down to each thing */
.xp-s-band { position: absolute; top: 0; height: 100%; background: rgba(243, 237, 226, 0.035); border-left: 1px dashed rgba(226, 201, 143, 0.18); }
.xp-s-band.is-alt { background: rgba(243, 237, 226, 0.065); }
.xp-s-line { position: absolute; height: 4px; border-radius: 2px; background: rgba(226, 201, 143, 0.55); }
.xp-s-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.xp-s-svg path { stroke: rgba(226, 201, 143, 0.4); stroke-width: 1.5; fill: none; }
.xp-s-svg circle { fill: #171411; stroke: #e2c98f; stroke-width: 2; }
/* (the lines joining the one in gold, lit with it: in the timelines, the archaeology timeline, the family tree) */
.xp svg path.is-lit:not(.tr-line):not(.tr-wed) { stroke: #f0d9a6 !important; stroke-width: 4 !important; opacity: 1 !important; stroke-dasharray: none; filter: drop-shadow(0 0 4px rgba(240, 217, 166, 0.55)); transition: stroke-width 0.25s ease; }
/* (the family tree's lines, lit with the one in gold: each in its own color still (its age's, or a wife's), only stronger,
   brighter, and glowing, so its separate connections can be told apart. From the owner: "I don't mind the gold box color,
   but I want their lines to just be highlighted their same colors so you can better distinguish their separate connections") */
.xp svg path.tr-line.is-lit, .xp svg path.tr-wed.is-lit { stroke-width: 4.5 !important; opacity: 1 !important; filter: brightness(1.45) saturate(1.25) drop-shadow(0 0 4px rgba(255, 255, 255, 0.28)); transition: stroke-width 0.25s ease; }
.xp svg path.tr-line.is-lit { stroke-dasharray: none; }
.xp svg path.tr-wed.is-lit { stroke-dasharray: 2 6; }
.xp svg circle.is-lit { fill: #e2c98f; stroke: #f0d9a6; }
.xp-it .xp-c-ph .xp-ini { font: 700 34px var(--serif); color: #e2c98f; }

/* ---- upright: turn it on its side (Explore.turnHint), a phone turning, gently, now and then */
.xp-turn { display: none; align-items: center; gap: 12px; margin: 6px 0 12px; padding: 10px 10px 10px 14px; border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--rule)); border-radius: 16px; background: color-mix(in srgb, var(--gold) 8%, var(--bg-raised)); color: var(--ink); font: 600 14px/1.35 var(--sans); }
@media (orientation: portrait) and (max-width: 700px) { .xp-turn { display: flex; } }
.xp-turn-w { flex: 1; }
/* (floating, over a page that opens past its top: it rises in, stays a while, and goes by itself) */
.xp-turn.is-float { margin: 0; box-shadow: 0 8px 28px rgba(40, 30, 15, 0.22); animation: xp-turn-in 0.45s ease 0.8s both, xp-turn-out 0.5s ease 11s forwards; }
@keyframes xp-turn-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes xp-turn-out { to { opacity: 0; transform: translateY(14px); visibility: hidden; } }
.xp-turn-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--muted); font: 22px/1 var(--sans); cursor: pointer; }
.xp-phone { position: relative; flex: none; width: 34px; height: 34px; color: var(--gold); }
.xp-phone i { position: absolute; left: 10px; top: 3px; width: 14px; height: 26px; border: 2.5px solid currentColor; border-radius: 4px; box-sizing: border-box; animation: xp-turn 3.2s ease-in-out infinite; }
.xp-phone i::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 2px; margin-left: -2px; border-radius: 1px; background: currentColor; }
.xp-turn-ar { position: absolute; left: 0; top: 0; width: 16px; height: 16px; opacity: 0; animation: xp-turn-ar 3.2s ease-in-out infinite; }
@keyframes xp-turn { 0%, 30% { transform: rotate(0deg); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@keyframes xp-turn-ar { 0%, 25% { opacity: 0; } 35%, 55% { opacity: 1; } 65%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .xp-phone i, .xp-turn-ar { animation: none; } }

/* ---- the left thumb: the stick in the middle of four arrows, each a step one way (held, they keep stepping) */
.xp-cross { display: grid; grid-template-columns: 40px 92px 40px; grid-template-rows: 40px 92px 40px; grid-template-areas: ". u ." "l c r" ". d ."; align-items: center; justify-items: center; gap: 2px; }
.xp-ab { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 12px; background: rgba(20, 16, 12, 0.6); color: #f3ede2; cursor: pointer; backdrop-filter: blur(6px); touch-action: none; -webkit-tap-highlight-color: transparent; transition: background 0.12s ease, transform 0.12s ease; }
.xp-ab svg { width: 22px; height: 22px; }
.xp-ab.is-u { grid-area: u; } .xp-ab.is-d { grid-area: d; } .xp-ab.is-l { grid-area: l; } .xp-ab.is-r { grid-area: r; }
.xp-ab.is-on, .xp-ab:active { background: rgba(226, 201, 143, 0.35); transform: scale(0.94); }
.xp-pad.is-l { gap: 0; }
/* ---- the right thumb: the zoom stick, and Open (Close, once something's open) where the thumb rests at the edge */
.xp-pad.is-r { align-items: center; gap: 12px; }
.xp-zcol { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.xp-zjoy { position: relative; width: 58px; height: 132px; border-radius: 29px; background: rgba(20, 16, 12, 0.55); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(6px); touch-action: none; cursor: ns-resize; }
.xp-zknob { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: rgba(243, 237, 226, 0.9); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); transition: transform 0.12s ease-out; pointer-events: none; }
.xp-plus, .xp-minus { position: absolute; left: 0; right: 0; text-align: center; font: 800 18px/1 var(--sans); color: rgba(243, 237, 226, 0.7); pointer-events: none; }
.xp-plus { top: 7px; } .xp-minus { bottom: 8px; }
.xp-b.is-go { align-self: flex-end; margin-bottom: 22px; }
.xp-b.is-go.is-close { background: #f3ede2; }
@media (max-height: 360px) { .xp-cross { grid-template-columns: 36px 80px 36px; grid-template-rows: 36px 80px 36px; } .xp-joy { width: 80px; height: 80px; } .xp-ab { width: 36px; height: 36px; } .xp-zjoy { height: 112px; } .xp-b.is-go { width: 56px; height: 56px; } }
/* (the opened one's words: the whole height, ending above the gold button) */
.xp-text { align-self: stretch; height: 100%; box-sizing: border-box; padding-top: calc(22px + env(safe-area-inset-top)); padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
/* a computer: the same world, without the thumbs (nav/explore.js, stage explore:desk): drag, the wheel, a click, the arrow
   keys; and a quiet − + at the bottom right */
.xp-dz { display: none; }
.xp.is-desk .xp-pad, .xp.is-desk .xp-zone, .xp.is-desk .xp-rest, .xp.is-desk .xp-hint { display: none !important; }
.xp.is-desk .xp-stage { cursor: grab; } .xp.is-desk .xp-stage:active { cursor: grabbing; }
.xp.is-desk .xp-dz { position: absolute; z-index: 6; right: 18px; bottom: 18px; display: flex; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: rgba(23, 20, 17, 0.7); }
.xp-dz-hint { position: absolute; right: calc(100% + 10px); top: 50%; transform: translate(6px, -50%); white-space: nowrap; padding: 7px 12px; border-radius: 999px; background: rgba(23, 20, 17, 0.82); border: 1px solid rgba(255, 255, 255, 0.16); font: 600 13px var(--sans); color: #f3ede2; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; }
.xp-dz-hint.is-on { opacity: 1; transform: translate(0, -50%); }
.xp.is-desk .xp-dz button { border-radius: 999px; width: 42px; height: 38px; padding: 0; border: 0; background: none; color: #f3ede2; font: 600 20px/1 var(--sans); cursor: pointer; }
.xp.is-desk .xp-dz button + button { border-left: 1px solid rgba(255, 255, 255, 0.16); }
.xp.is-desk .xp-dz button:hover { color: var(--gold); }
.xp.is-desk.is-detail .xp-dz, .xp.is-desk:has(.xp-detail:not([hidden])) .xp-dz { display: none; }