/* world-touch.css · The World on a phone (2026-10-09). Every rule sits under body.phone, which only js/world-touch.js
   adds, only on a touch screen. A mouse never sees any of this. The eye (phone.js) keeps its corner, bottom right. */

body.phone { overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.phone #w { touch-action: none; cursor: default; }
body.phone #ph { font-family: var(--serif); }
body.phone #ph button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* the desktop's HUD, put away */
body.phone #tr, body.phone #list, body.phone #help, body.phone #where, body.phone #mapctl, body.phone #walking,
body.phone #target, body.phone #aim, body.phone #hint, body.phone #build { display: none !important; }

/* what stays: the door home, the edge's sentence, the hall's and the block's lines */
body.phone #tl { top: calc(12px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; font-size: 10px; letter-spacing: .14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.phone #tl .tl-sub { margin-left: .6rem; }
body.phone #edge { top: calc(56px + env(safe-area-inset-top, 0px)); left: 16px; font-size: 1.5rem; max-width: 14ch; }
body.phone #hallmsg, body.phone #buildmsg { top: calc(44px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; width: auto; max-width: none; transform: none; font-size: .95rem; line-height: 1.4; padding: 9px 12px; text-align: left; }

/* the status line: under the top line, centred */
body.phone #ph-status { position: fixed; z-index: 3; top: calc(40px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; margin: 0; text-align: center; font-size: 1rem; color: #FFD27A; opacity: 0; transition: opacity .25s; pointer-events: none; text-shadow: 0 1px 8px rgba(12,8,18,.9); }
body.phone #ph-status.on { opacity: 1; }
body.phone.inside #ph-status { color: #111110; text-shadow: none; }

/* the one pill: Enter X, or Stop. Above the stick, in the middle */
body.phone #ph-act { position: fixed; z-index: 3; left: 50%; transform: translateX(-50%); bottom: calc(24px + 136px + 16px + env(safe-area-inset-bottom, 0px)); background: var(--red); color: #fff; border: 0; border-radius: 2px; padding: 0 22px; height: 48px; font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
body.phone #ph-act[hidden] { display: none; }
body.phone #ph-act.stop { background: rgba(12,8,18,.85); color: #F2E9D8; border: 1px solid rgba(242,233,216,.5); }

/* the stick: bottom left, under the left thumb */
body.phone #ph-stick { position: fixed; z-index: 3; left: 20px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: 136px; height: 136px; border-radius: 50%; background: rgba(12,8,18,.45); border: 1px solid rgba(242,233,216,.35); touch-action: none; -webkit-tap-highlight-color: transparent; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
body.phone #ph-stick[hidden] { display: none; }
body.phone #ph-stick::before { content: ""; position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; border: 1px dashed rgba(242,233,216,.22); }
body.phone #ph-stick .ph-knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: #F2E9D8; box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(17,17,16,.2); transition: transform .18s cubic-bezier(.2,.8,.2,1); }
body.phone #ph-stick .ph-knob::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--red); }
body.phone #ph-stick.on { border-color: rgba(242,233,216,.7); }
body.phone #ph-stick.on .ph-knob { transition: none; }
body.phone.inside #ph-stick { background: rgba(242,233,216,.35); border-color: rgba(17,17,16,.35); }
body.phone.inside #ph-stick .ph-knob { background: #111110; }

/* the three buttons: a column over the eye, under the right thumb. Map nearest, then Rooms, then ? */
body.phone #ph-bar { position: fixed; z-index: 3; right: max(20px, calc(env(safe-area-inset-right, 0px) + 20px)); bottom: calc(16px + 56px + 14px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column-reverse; gap: 10px; }
body.phone #ph-bar[hidden] { display: none; }
body.phone #ph-bar button { width: 48px; height: 48px; padding: 0; border-radius: 50%; background: rgba(12,8,18,.82); color: #F2E9D8; border: 1px solid rgba(242,233,216,.45); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.phone #ph-bar button[data-help] { font-size: 16px; letter-spacing: 0; }
body.phone.inside #ph-bar button { background: rgba(242,233,216,.9); color: #111110; border-color: rgba(17,17,16,.4); }

/* the map's bar: bottom left, where the stick was */
body.phone #ph-mapbar { position: fixed; z-index: 3; left: 16px; right: calc(16px + 56px + 14px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 8px; }
body.phone #ph-mapbar[hidden] { display: none; }
body.phone #ph-mapbar button { height: 48px; min-width: 48px; padding: 0 16px; background: rgba(12,8,18,.82); color: #F2E9D8; border: 1px solid rgba(242,233,216,.45); border-radius: 2px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.phone #ph-mapbar button[data-in], body.phone #ph-mapbar button[data-out] { padding: 0; width: 48px; font-size: 20px; letter-spacing: 0; }
body.phone #ph-mapbar button[data-me] { padding: 0 10px; }
body.phone #ph-mapbar button[data-down] { padding: 0 10px; border-color: var(--red); }

/* the block panel */
body.phone #ph-build { position: fixed; z-index: 3; left: 16px; right: 16px; top: calc(40px + env(safe-area-inset-top, 0px)); background: rgba(12,8,18,.92); border: 1px solid rgba(242,233,216,.35); padding: 12px 14px 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* at the top: the ground you tap is at the bottom */
body.phone #ph-build[hidden] { display: none; }
body.phone .ph-bk { margin: 0 0 6px; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #9A8AA8; }
body.phone .ph-bline { margin: 0 0 8px; font-size: .95rem; line-height: 1.4; color: #F2E9D8; min-height: 2.8em; }
body.phone #ph-swatch #swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
body.phone #ph-swatch #swatches button { width: 38px; height: 38px; }
body.phone .ph-brow { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.phone #ph-bchosen { color: #F2E9D8; text-transform: capitalize; font-size: 1rem; }
body.phone .ph-brow button { height: 44px; padding: 0 18px; background: var(--red); color: #fff; border: 0; border-radius: 2px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }

/* the rooms sheet */
body.phone #ph-scrim { position: fixed; inset: 0; z-index: 19; background: rgba(12,8,18,.55); }
body.phone #ph-scrim[hidden] { display: none; }
body.phone #ph-sheet { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; max-height: 82vh; max-height: 82dvh; overflow: auto; -webkit-overflow-scrolling: touch; background: #0C0812; color: #F2E9D8; border-top: 1px solid rgba(242,233,216,.35); padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
body.phone #ph-sheet[hidden] { display: none; }
body.phone .ph-sh { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; }
body.phone .ph-sh h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.5rem; }
body.phone .ph-sh button { width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; color: #9A8AA8; font: 400 28px/1 var(--serif); }
body.phone #ph-count #count { position: static; margin: 0 0 14px; font-family: var(--display); font-size: 1.25rem; line-height: 1.3; max-width: none; letter-spacing: 0; text-transform: none; }
body.phone #ph-count #count b { color: var(--red); font-weight: 400; }
body.phone #ph-count #count small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #9A8AA8; margin-top: 6px; }
body.phone .ph-k { margin: 0 0 4px; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #9A8AA8; }
body.phone #ph-rooms #rooms { list-style: none; margin: 0 0 16px; padding: 0; max-height: none; overflow: visible; }
body.phone #ph-rooms #rooms li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(242,233,216,.1); font-size: 1.1rem; line-height: 1.25; }
body.phone #ph-rooms #rooms li i { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #7A6A8A; }
body.phone #ph-rooms #rooms li.lit { color: #F2E9D8; } body.phone #ph-rooms #rooms li.lit i { background: #FFD27A; border-color: #FFD27A; }
body.phone #ph-rooms #rooms li.dark { color: #7A6A88; }
body.phone #ph-rooms #rooms 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; }
body.phone #ph-rooms #rooms li.sub { padding-left: 18px; font-size: .95rem; }
body.phone #ph-more .hud { position: static; transform: none; display: block; margin: 0 0 14px; max-width: none; white-space: normal; text-align: left; font-family: var(--serif); font-size: 1rem; line-height: 1.4; color: #C8BCD4; text-transform: none; letter-spacing: 0; }
body.phone #ph-more #temple, body.phone #ph-more #second { cursor: pointer; }
body.phone #ph-more #temple b, body.phone #ph-more #second b { font-weight: 400; color: #F2E9D8; }
body.phone #ph-more #temple span, body.phone #ph-more #second span { color: var(--red); border-bottom: 1px solid rgba(224,58,31,.5); }
body.phone #ph-more #gods { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body.phone #ph-more #gods span { width: 100%; margin: 0 0 2px; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #9A8AA8; }
body.phone #ph-more #gods button { min-height: 40px; font-size: .95rem; padding: 6px 12px 6px 9px; }
body.phone #ph-more #before { font-size: .95rem; color: #9A8AA8; }
body.phone #ph-more #walkbtn { display: inline-block; height: 44px; padding: 0 16px; line-height: 42px; margin: 0 0 16px; }
body.phone .ph-links { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #9A8AA8; }
body.phone .ph-links a { color: #F2E9D8; text-decoration: none; border-bottom: 1px solid rgba(242,233,216,.35); padding-bottom: 2px; }

/* the hint, once: the desktop's card, a size down */
body.phone #ph-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); padding: 16px; }
body.phone #ph-hint[hidden] { display: none; }
body.phone #ph-hint .h-card { width: min(440px, 100%); padding: 20px 20px 18px; }
body.phone #ph-hint .h-card h2 { font-size: 1.6rem; }
body.phone #ph-hint .h-card ol { font-size: 1.02rem; line-height: 1.45; margin-bottom: 16px; }
body.phone #ph-hint .h-card button { width: 100%; height: 48px; }

/* the hand-off hides the phone chrome too */
body.phone.go #ph { transition: opacity .3s; opacity: 0; }
/* when the sheet is open, the bar and the pill step back */
body.phone.ph-open #ph-bar, body.phone.ph-open #ph-act, body.phone.ph-open #ph-stick { visibility: hidden; }
/* while placing blocks the panel is at the top; the stick stays, the buttons step aside */
body.phone.building #ph-bar { visibility: hidden; }
/* a short screen (landscape): a smaller stick, the pill beside it */
@media (max-height: 460px) { body.phone #ph-stick { width: 104px; height: 104px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } body.phone #ph-stick::before { width: 64px; height: 64px; margin: -32px 0 0 -32px; } body.phone #ph-stick .ph-knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; } body.phone #ph-act { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: 140px; transform: none; } body.phone #ph-bar { flex-direction: row-reverse; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: calc(16px + 56px + 14px + env(safe-area-inset-right, 0px)); } }
html.ph-site body.phone.ph-open .ph-fab.ph-eye, html.ph-site body.phone.building .ph-fab.ph-eye { opacity: 0; pointer-events: none; }
body.phone.building #ph-status { display: none; }

/* 2026-10-09: the weather's one line, at the top on a phone (the stick and the buttons own the bottom) */
body.phone #wx { top: calc(44px + env(safe-area-inset-top, 0px)); bottom: auto; left: 16px; right: 16px; width: auto; max-width: none; transform: none; font-size: .95rem; }