/* A thumb-sized control with the same carved honey and parchment as the HUD. */
#touch-controls { display: none; }
#move-stick { position: absolute; width: 112px; height: 112px; border: 3px solid var(--ink); border-radius: 50%; background: rgb(243 232 207 / 65%); box-shadow: inset 0 0 0 6px rgb(246 197 49 / 45%), var(--ledge); touch-action: none; display: grid; place-items: center; }
#move-stick::before { content: '✦'; color: var(--ink); opacity: .3; font-size: 92px; line-height: 1; }
#move-knob { position: absolute; width: 46px; height: 46px; border: 3px solid var(--ink); border-radius: 50%; background: var(--raised); box-shadow: var(--bevel); pointer-events: none; }
#move-stick.held { background: rgb(243 232 207 / 90%); }
#touch-stop { position: absolute; left: 32px; bottom: 4px; height: 44px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 6px; background: var(--raised); color: var(--ink); font: 800 12px var(--read); }
.touch-help { display: none; }
#btn-menu, #chat-toggle, #tabs #btn-view { display: none; }   /* (a phone's keys: below) */
@media (pointer: coarse), (any-pointer: coarse) and (max-width: 760px) {
  #touch-controls { display: block; position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: calc(8px + env(safe-area-inset-bottom)); width: 112px; height: 164px; z-index: 8; }
  .touch-help { display: block; }
  #view { -webkit-touch-callout: none; }
  #menu { position: fixed; left: max(8px, env(safe-area-inset-left)) !important; right: max(8px, env(safe-area-inset-right)); top: auto !important; bottom: calc(64px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 90px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); width: auto; }
  #menu .opt { min-height: 44px; }
  #menu .opt:last-child { position: sticky; bottom: -5px; background: var(--parchment); }
}

/* Phones put the view first (DESIGN.md: a phone's view comes first). Only what a moment of play needs stays on screen,
   compact and in the thumbs' reach: a slim status card and the minimap at the top; at the bottom the stick on the left,
   and on the right the belts over two keys, the Bag and a Menu that opens the other windows as a sheet above them (ui.js).
   The chat rests as a key beside the stick: the newest line floats up over the world for a few seconds, a honey count
   shows what players said meanwhile, and a tap opens it the whole width to read and type. */
@media (max-width: 760px), (pointer: coarse) {
  #game { height: 100dvh; }
  /* The status card: health and mana side by side over a thin experience bar (the portrait and the name are desktop's). */
  #hud-left { left: max(8px, env(safe-area-inset-left)); top: max(8px, env(safe-area-inset-top)); width: calc(100% - 146px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-width: 230px; gap: 6px; }
  #hud { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 6px; align-items: center; padding: 6px 8px 7px; }
  #hud > .hud-top { display: none; }
  #hud > .meter { margin: 0; gap: 4px; }
  #hud > .meter.xp, #hud > .hud-foot { grid-column: 1 / -1; }
  #hud .bar:not(.xp) span { font-size: 13px; padding-right: 5px; }
  #hud .bar:not(.xp) span .max { font-size: 10px; }   /* (what you have large, the most in small: all of it fits a slim card, ui.js fitBar) */
  #hud .meter.xp .bar { height: 9px; }
  #hud .meter.xp .lv, #hud .meter.xp #xp-text { display: none; }
  #hud .hud-foot { margin: 0; gap: 4px; }
  #hud .hud-foot:has(#hud-flags:empty):has(#btn-notes.on) { display: none; }
  #hud-flags span { font-size: 10px; padding: 0 4px; height: 22px; }
  #players-online { display: none; }
  #btn-notes { height: 26px; font-size: 0; gap: 0; padding: 0 8px; }
  #btn-notes.on { display: none; }   /* (the folded notes show themselves: a tap opens them, x puts them away) */
  /* The field notes fold to a chip under the card (a tap opens or folds them; a new note opens for a few seconds: ui.js
     freshNote). */
  #journey-card { width: min(280px, calc(100vw - 150px - env(safe-area-inset-left) - env(safe-area-inset-right))); max-height: min(210px, 32dvh); overflow-y: auto; }   /* (clear of the minimap's zoom, its close key in reach) */
  #journey-card:not(.open) { width: auto; padding: 5px 38px 5px 10px; cursor: pointer; }
  #journey-card:not(.open) > :not(h2):not(.close) { display: none !important; }
  #journey-card:not(.open) h2 { margin: 1px 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #journey-card:not(.open) h2::after { content: ' +'; color: var(--brown); }
  #journey-card.fresh { animation: note-fresh 1.2s ease-out 2; }
  /* The minimap, with its zoom in a row under it. */
  #compass { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: 114px; height: 114px; padding: 5px; }
  #minimap { width: 98px; height: 98px; }
  #mm-tools { left: 8px; bottom: -42px; flex-direction: row; gap: 6px; }
  #mm-tools button { width: 42px; height: 36px; }
  #mm-tools #mm-eye { display: none; }   /* (the first-person key is in the Menu, and beside Stop on a touch screen: the zoom's row keeps to + and -) */
  /* The dock: the Bag and the Menu, bottom right. The Bag stays put while the Menu opens the other windows above them. */
  #side { top: auto; left: auto; right: max(8px, env(safe-area-inset-right)); bottom: calc(8px + env(safe-area-inset-bottom)); }
  #side:not(.menu-open) #tabs > :not([data-tab="inventory"]) { display: none; }
  #side.menu-open #tabs { position: absolute; right: 0; bottom: calc(100% + 10px); display: grid; grid-template-columns: repeat(4, 64px); gap: 6px; padding: 8px; background: var(--parchment); border: 3px solid var(--ink); border-radius: 12px; corner-shape: bevel; box-shadow: var(--bevel), var(--ledge); }
  #tabs button[data-tab="inventory"] { position: fixed; right: calc(max(8px, env(safe-area-inset-right)) + 58px); bottom: calc(8px + env(safe-area-inset-bottom)); }
  /* The sheet comes up over whatever is open (the panel beside it, a window); and of the panel and a window, the one
     opened last is in front (ui.js panelFront). */
  #side.menu-open, body:has(.window:not(.hidden)) #side.front { z-index: 16; }
  #side.menu-open #tabs { z-index: 1; }
  #tabs button, #btn-menu, #chat-toggle { width: 52px; height: 52px; min-width: 0; padding: 3px 0; flex-direction: column; justify-content: center; align-items: center; gap: 1px; }
  #side.menu-open #tabs > :not([data-tab="inventory"]) { width: 64px; height: 58px; }
  #tabs button .px-icon, #btn-menu .px-icon, #chat-toggle .px-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; }
  #tabs button .px-icon canvas, #btn-menu .px-icon canvas, #chat-toggle .px-icon canvas { width: 28px; height: 28px; }
  #tabs .dock-label, #btn-menu .dock-label { display: block; flex: none; max-width: 100%; overflow: hidden; font-size: 9px; }
  #tabs kbd { display: none; }
  #tabs button:hover:not(.active) { transform: none; }
  #btn-menu, #chat-toggle {
    display: flex; position: relative; background: var(--raised); border: 2px solid var(--ink); border-radius: 8px; corner-shape: bevel;
    box-shadow: inset 0 0 0 1px #d0b580, inset 0 2px 0 #fffdf5, inset 0 -3px 0 #dec596, 0 3px 0 rgba(43, 29, 14, .4);
    color: var(--ink); font: 800 13px var(--read); cursor: pointer;
  }
  #btn-menu[aria-expanded="true"], #side:has(#tabs > button.active:not([data-tab="inventory"])) #btn-menu { background: linear-gradient(#e8f2d8, #cadfac); color: #24482e; box-shadow: inset 0 0 0 2px #62905a, inset 0 3px 0 #f4f9e9, 0 3px 0 rgba(43, 29, 14, .4); }
  #btn-menu:active, #chat-toggle:active { transform: translateY(1px); }
  /* The sheet's last key steps into the first-person view and back (first-person.js): honey while you look through your
     own eyes, NEW until it has been tried in this browser. */
  #side.menu-open #tabs > #btn-view { display: flex; }
  #btn-view .eye-icon { width: 28px; height: 28px; margin: 0; flex: none; }
  #tabs #btn-view.on { background: linear-gradient(#fff0a8, var(--honey)); box-shadow: inset 0 2px 0 rgba(150, 90, 10, 0.32), 0 3px 0 rgba(43, 29, 14, .4); }
  body.fp-new #btn-view::after { content: 'NEW'; position: absolute; top: -8px; right: -6px; padding: 1px 4px; background: var(--honey); border: 2px solid var(--ink); border-radius: 5px; corner-shape: bevel; color: var(--ink); font: 8px/10px var(--blocks); pointer-events: none; }
  #side:not(.menu-open):has(#tabs .plot-attention:not([hidden])) #btn-menu::after { content: ''; position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; box-sizing: border-box; background: #f3cd6b; border: 2px solid var(--ink); border-radius: 50%; }   /* (a plot offer waits under Friends: kit.css plot-attention) */
  #panel { position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: min(360px, calc(100vw - 16px)); max-width: calc(100vw - 16px); max-height: calc(100dvh - 82px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; }
  #panel .close, #panel button, #worldmap button { min-height: 40px; }
  .panel-head .close, .window .close { width: 40px; height: 40px; top: 4px; right: 5px; font-size: 18px; }   /* (a thumb's size: every window closes) */
  .panel-head, .window h3 { padding-right: 52px; }
  #shop > h3, #bank > h3 { min-height:52px; padding-right:60px; }
  #shop > .close, #bank > .close { width:44px; height:44px; min-height:44px; top:4px; right:5px; padding:0; }
  #shop > .stock { grid-template-columns: repeat(auto-fill, 46px); }   /* (as many to a row as fit) */
  /* The chat: a key at rest, the whole width open. */
  #chat { left: max(8px, env(safe-area-inset-left)); right: auto; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-width: none; }
  #chat:not(.open) { padding: 0; background: none; border: 0; box-shadow: none; }
  #chat-toggle .px-icon canvas { width: 26px; height: 26px; }
  /* With voice on, a phone holds its chat key to talk (voice.js): a microphone mark on it, honey while held. The key
     above a desktop's chat is not needed here. */
  #talk-key, body.voice-on #talk-key { display: none; }
  body.voice-on #chat-toggle::after { content: ''; position: absolute; left: -6px; bottom: -6px; width: 18px; height: 18px; box-sizing: border-box; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12' shape-rendering='crispEdges'%3E%3Cpath d='M3 1h4v6H3z' fill='%232b1d0e'/%3E%3Cpath d='M1 5h1v2h6V5h1v3H6v2H4V8H1z' fill='%232b1d0e'/%3E%3C/svg%3E") center / 10px 12px no-repeat; border: 2px solid var(--ink); border-radius: 50%; }
  body.voice-talking #chat-toggle { background: linear-gradient(#fff0a8, var(--honey)); }
  #chat-unread { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 5px; background: var(--honey); border: 2px solid var(--ink); border-radius: 11px; color: var(--ink); font: 800 11px/18px var(--read); text-align: center; pointer-events: none; }
  #chat-unread[hidden], #chat:not(.open) #chatline, #chat.open #chat-toggle { display: none; }
  #chat:not(.open) #messages {
    position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: calc(184px + env(safe-area-inset-bottom)); width: max-content; max-width: min(340px, calc(100vw - 24px));
    height: auto; max-height: none; overflow: hidden; padding: 3px 9px; background: rgba(29, 52, 38, 0.78); border-radius: 8px; corner-shape: bevel;
    -webkit-mask-image: none; mask-image: none; font-size: 12px; opacity: 0; pointer-events: none;
  }
  #chat:not(.open) #messages > :not(:last-child) { display: none; }
  #chat.fresh:not(.open) #messages { animation: chat-fresh 6s forwards; }
  #chat.open { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); z-index: 10; }
  #messages { height: 110px; font-size: 12px; padding: 2px 4px; }
  #messages:focus { outline: none; }
  #chatline { min-height: 40px; padding: 0 6px; gap: 5px; }
  #chat-prompt { display: none; }
  #chat-input { font-size: 16px; width: 100%; }
  /* The belts: over the dock, frameless, only what can be used (spells you can cast, the food you carry). */
  #bars { right: max(8px, env(safe-area-inset-right)); bottom: calc(70px + env(safe-area-inset-bottom)); width: auto; max-width: calc(100% - 150px - env(safe-area-inset-left) - env(safe-area-inset-right)); gap: 5px; }
  #hotbar, #foodbar { padding: 0; background: none; border: 0; box-shadow: none; }
  /* A belt longer than the room scrolls sideways within itself only: never up and down inside its own box (on an iPhone
     it could, and its slots showed cut in half), and never on into the page. */
  #hotbar, #foodbar { overflow: auto hidden; overscroll-behavior: contain; touch-action: pan-x; scrollbar-width: none; }
  #hotbar { display: flex; max-width: 100%; gap: 6px; }
  #hotbar .hslot { flex: 0 0 46px; width: 46px; height: 54px; }
  #hotbar .hslot.locked { display: none; }   /* (the belt keeps to spells you can cast; the Spells window shows what is to come) */
  #foodbar { max-width: 100%; gap: 6px; }
  #foodbar .hslot { flex-shrink: 0; }
  #foodbar .hslot.empty, #foodbar:not(:has(.hslot:not(.empty))) { display: none; }
  #worldmap { width: calc(100vw - 16px); max-height: calc(100dvh - 80px); }
  #worldmap .mapwrap { width: min(560px, calc(100vw - 48px), calc(100dvh - 230px)); height: auto; aspect-ratio: 1; }
  #bossbar { top: calc(max(8px, env(safe-area-inset-top)) + 164px); width: min(460px, calc(100vw - 32px)); min-width: 0; }   /* (under the card and the minimap's zoom, below an iPhone's clock too) */
  #eye-target { top: calc(max(8px, env(safe-area-inset-top)) + 164px); width: min(320px, calc(100vw - 32px)); }   /* (under the card and the minimap's zoom) */
}
/* A finger has no hover to explain: the hint that follows a mouse is a mouse's alone (a narrow desktop window keeps it). */
@media (hover: none) { #hint { display: none !important; } }
@keyframes chat-fresh { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes note-fresh { 0%, 100% { box-shadow: var(--ledge); } 40% { box-shadow: 0 0 0 3px var(--honey), var(--ledge); } }
@media (prefers-reduced-motion: reduce) { #journey-card.fresh { animation: none; } }
/* With the stick on screen, the chat's key rests beside it. */
@media (pointer: coarse), (any-pointer: coarse) and (max-width: 760px) {
  #chat:not(.open) { left: calc(132px + env(safe-area-inset-left)); }
}
/* Landscape: height is what a phone lacks. The keys are icons alone (the Menu's sheet keeps its labels), the minimap's
   zoom stands beside it, and the belts rest just above the dock. */
@media (pointer: coarse) and (max-height: 500px) {
  #hud-left { max-width: 210px; }
  #hud .meter.xp { display: none; }   /* (the card keeps to health, mana and what is true right now; Skills shows the experience) */
  #touch-controls { width: 96px; height: 148px; bottom: calc(6px + env(safe-area-inset-bottom)); }
  #move-stick { width: 96px; height: 96px; }
  #touch-stop { left: 24px; }
  /* A dragon's bar and your foe's at eye level: in the gap between the card and the minimap's zoom, centred in it. */
  #bossbar, #eye-target { left: calc(50% + (max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right)) + 42px) / 2); width: min(300px, calc(100vw - 394px - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right)))); min-width: 0; }
  #bossbar { top: calc(12px + env(safe-area-inset-top)); }
  #eye-target { top: calc(8px + env(safe-area-inset-top)); }
  #mm-tools { left: auto; right: calc(100% + 6px); top: 44px; bottom: auto; flex-direction: column; gap: 4px; }
  #side { bottom: calc(6px + env(safe-area-inset-bottom)); }
  #tabs button[data-tab="inventory"] { right: calc(max(8px, env(safe-area-inset-right)) + 52px); bottom: calc(6px + env(safe-area-inset-bottom)); }
  #tabs button, #btn-menu, #chat-toggle { width: 46px; height: 46px; }
  #tabs .dock-label, #btn-menu .dock-label { display: none; }
  #side.menu-open #tabs > :not([data-tab="inventory"]) { width: 60px; height: 52px; }
  #side.menu-open #tabs > :not([data-tab="inventory"]) .dock-label { display: block; }
  #chat:not(.open) { left: calc(114px + env(safe-area-inset-left)); bottom: calc(6px + env(safe-area-inset-bottom)); }
  #chat:not(.open) #messages { bottom: calc(162px + env(safe-area-inset-bottom)); max-width: min(460px, calc(100vw - 260px)); }
  #chat.open #messages { height: 72px; }
  #bars { bottom: calc(60px + env(safe-area-inset-bottom)); max-width: calc(100% - 140px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  #hotbar .hslot { height: 46px; padding-top: 0; justify-content: center; }   /* (a spell's picture alone, as the keys: its name is a hold away) */
  #hotbar .hslot .sp { display: none; }
  /* The world map on its side: the map down the left, as tall as the window lets it be, with its keys, its key to the
     colours and its notes beside it (held upright they stack under the title). */
  #worldmap { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 12px; align-items: start; }
  #worldmap > h3 { grid-column: 1 / -1; }
  #worldmap .mapwrap { grid-column: 1; grid-row: 2 / -1; width: min(calc(100dvh - 140px), calc(100vw - 320px)); margin: 0 0 4px; }
  #worldmap .maptools { grid-column: 2; grid-row: 2; flex-wrap: wrap; }
  #worldmap .maplegend { grid-column: 2; grid-row: 3; margin-top: 8px; }
  #worldmap .sub { grid-column: 2; grid-row: 4; }
}

#worldmap-canvas { touch-action: none; }

/* A belt slot's name while a finger is held on it (ui.js beltHold): on its side a phone's belt shows pictures alone. */
#belt-name { position: fixed; z-index: 30; transform: translate(-50%, -100%); padding: 3px 8px; background: var(--parchment); border: 2px solid var(--ink); border-radius: 6px; corner-shape: bevel; box-shadow: var(--ledge); font: 800 12px var(--read); color: var(--ink); white-space: nowrap; pointer-events: none; }
#belt-name[hidden] { display: none; }

/* A shop on a phone: held upright, a sheet along the bottom under the Bag it sells from, which keeps to the room above
   it meanwhile; on its side, down the left beside the Bag, narrowed to its six columns. */
@media (max-width: 760px) and (min-height: 501px) {
  #shop:not(.pet-shop) { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-height: calc(46dvh - 12px - env(safe-area-inset-bottom)); transform: none; }
  body:has(#shop:not(.hidden):not(.pet-shop)) #panel { max-height: calc(54dvh - 4px - max(10px, env(safe-area-inset-top))) !important; }
}
@media (pointer: coarse) and (max-height: 500px) {
  #shop:not(.pet-shop) { left: max(8px, env(safe-area-inset-left)); right: calc(max(8px, env(safe-area-inset-right)) + 324px); top: max(8px, env(safe-area-inset-top)); bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-height: none; transform: none; }
  body:has(#shop:not(.hidden):not(.pet-shop)) #panel { width: 316px; }
}

/* Short portrait phones reserve a compact strip for the optional first action. */
@media(max-width:760px) and (min-height:501px) and (max-height:680px){
 body.first-adventure #hud .meter.xp, body.first-adventure #hud #hud-flags, body.first-adventure #hud #btn-notes { display:none; }
 body.first-adventure #journey-card.first-steps {position:fixed;left:8px;right:8px;top:174px;width:auto;max-height:122px;padding:7px 10px;z-index:10;}
 body.first-adventure #journey-card .journey-eyebrow {display:none;}
 body.first-adventure #journey-card h2 {font-size:12px;margin:0 30px 5px 0;}
 body.first-adventure #journey-card p {font-size:11px;line-height:1.35;}
 body.first-adventure #first-steps-dismiss {margin:5px 0 0;padding:4px 7px;position:sticky;bottom:0;}
}

/* A finger held on the world fills a honey ring round the fingertip until its action menu opens (touch.js ring): it
   shows only once the hold outlasts a tap (150 ms) and fills over the rest of the half second. */
#hold-ring { position: fixed; left: 0; top: 0; width: 72px; height: 72px; margin: -36px 0 0 -36px; pointer-events: none; z-index: 30; opacity: 0; visibility: hidden; }
#hold-ring.on { visibility: visible; animation: hold-show 0s linear 150ms forwards; }
#hold-ring circle { fill: none; transform: rotate(-90deg); transform-origin: 36px 36px; }
#hold-ring .rim { stroke: rgb(43 29 14 / 55%); stroke-width: 10; }
#hold-ring .fill { stroke: var(--honey); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 182.2; stroke-dashoffset: 182.2; }
#hold-ring.on .fill { animation: hold-fill 350ms linear 150ms forwards; }
@keyframes hold-show { to { opacity: 1; } }
@keyframes hold-fill { to { stroke-dashoffset: 0; } }

/* Settings on a phone: how to play full screen from the home screen (install.js). */
#install-row[hidden], #btn-install[hidden] { display: none !important; }
#install-row button { display: block; margin-top: 6px; }

/* The first-person view's eye on a phone: beside Stop, the two side by side under the stick in the thumb's reach and
   clear of the chat (desktop keeps it under the minimap's zoom). */
#touch-eye { display: none; }
@media (pointer: coarse), (any-pointer: coarse) and (max-width: 760px) {
  #touch-stop { left: 6px; }
  #touch-eye { display: block; position: absolute; left: 62px; bottom: 4px; width: 44px; height: 44px; padding: 0; border: 2px solid var(--ink); border-radius: 6px; background: var(--raised); }
  #touch-eye .eye-icon { width: 26px; height: 26px; }
}
@media (pointer: coarse) and (max-height: 500px) { #touch-stop { left: 0; } #touch-eye { left: 55px; width: 42px; } }

/* A touch screen's page stays put (DESIGN.md: a phone's page stays put). A drag that starts on the HUD neither pans nor
   bounces the page, and a pinch never zooms it (the world's own pinch zooms the camera: touch.js); lists and belts still
   scroll within themselves. Text fields are at least 16 px, as an iPhone zooms in on a smaller one when it is touched
   and never back out. Should anything still shift the page, ui.js keepPageHome puts it back. */
@media (pointer: coarse), (any-pointer: coarse) and (max-width: 760px) {
  html, body { overscroll-behavior: none; }
  html { touch-action: pan-x pan-y; }
  #hud, #compass, #side, #touch-controls, #chat-toggle { touch-action: none; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: max(16px, 1em) !important; }   /* (over each field's own size) */
}