html.m{--mh:calc(52px + env(safe-area-inset-top));--md:calc(62px + env(safe-area-inset-bottom));
  /* popups and menus: a 480-design-pixel phone, so text lands at ~11-15px;
     capped, so a tablet gets a roomier sheet rather than giant type */
  --u:calc(min(100vw,560px)/480)}
/* desktop chrome a phone does not use: the header art and its hotspots, the
   bottom nav art and its numbers, and the knob (the dock replaces it) */
html.m #topbar-img,html.m #hb-data,html.m #nav-img,html.m #knob,html.m #hd-auto-label,
html.m [id$="-hotspot"],html.m .hd-caret,html.m .nav-num,html.m #empire-active,
html.m #empire-label,html.m #hd-inbox-badge,html.m #hd-alerts-badge,html.m #rank-disabled{display:none!important}
html.m #stage{inset:var(--mh) 0 var(--md) 0}
/* region names and towns, in map units: larger on a phone, where the region
   view is a narrower slice of the map (the towns line moves down to match) */
html.m .rlabel{font-size:14px}
/* the gold kingdom line reads heavy on a narrow screen: a third lighter */
html.m #svg:not(.kview) .kb{stroke-width:4}
html.m .rtowns{font-size:10.5px;transform:translateY(5px)}
html.m svg.tview .rlabel{font-size:8px}html.m svg.tview .rspec{font-size:5.5px}   /* terrain view: the towns take the room */
#m-head,#m-dock,#m-zoom,#m-more{display:none}
html.m #m-head,html.m #m-dock,html.m #m-zoom{display:flex}

/* ── header: name, day, gold; inbox, alerts, menu ── */
#m-head{position:fixed;left:0;right:0;top:0;height:var(--mh);padding:env(safe-area-inset-top) 10px 0 12px;
  z-index:70;align-items:center;gap:9px;font-family:'Times New Roman',Times,serif;
  background:linear-gradient(180deg,#14202c,#0b131c);border-bottom:2px solid #8d660f;
  box-shadow:0 2px 0 #caa33855,0 4px 14px rgba(0,0,0,.6)}
#m-head .mh-id{min-width:0;flex:1 1 auto;line-height:1.1}
/* the player's portrait (same image and crop as the desktop header); hidden
   until it loads, so no broken-image box when there is none */
#m-head .mh-ava{display:none;width:38px;height:38px;flex:0 0 38px;border-radius:50%;object-fit:cover;
  border:2px solid #8d660f;box-shadow:0 0 0 1px #caa33855}
#m-head .mh-ava.ok{display:block}
#m-head .mh-name{color:#E3C069;font-weight:700;font-size:17px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#m-head .mh-sub{color:#C9A94E;font-size:11.5px;font-style:italic;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#m-head .mh-sov{display:flex;align-items:center;gap:4px;color:#E3C069;font-weight:700;font-size:14px;white-space:nowrap}
#m-head .mh-sov img{width:18px;height:18px;object-fit:contain}
#m-head .mh-btn{position:relative;width:34px;height:34px;flex:0 0 34px;border-radius:50%;border:1px solid #8d660f;
  background:radial-gradient(circle at 50% 35%,#22384a,#0e1a25);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
#m-head .mh-btn svg{width:18px;height:18px;fill:none;stroke:#E3C069;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#m-head .mh-btn.on{border-color:#de2b29;background:radial-gradient(circle at 50% 35%,#4a1c1c,#1c0d0d)}
#m-head .mh-badge{position:absolute;top:-4px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:#de2b29;color:#fff;font:700 10px/16px 'Times New Roman',serif;text-align:center;box-shadow:0 0 4px rgba(224,52,47,.8)}

/* ── dock: the knob's six wedges as a tab bar ── */
#m-dock{position:fixed;left:0;right:0;bottom:0;height:var(--md);padding-bottom:env(safe-area-inset-bottom);z-index:70;
  background:linear-gradient(0deg,#0b131c,#14202c);border-top:2px solid #8d660f;box-shadow:0 -2px 0 #caa33855,0 -4px 14px rgba(0,0,0,.6)}
#m-dock button{flex:1 1 0;min-width:0;background:none;border:0;border-top:3px solid transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:3px 0 2px}
#m-dock .md-ico{width:34px;height:29px;background-image:url("../ui/knob_icons.png");background-repeat:no-repeat;filter:drop-shadow(0 1px 1px #000)}
#m-dock .md-lbl{font:700 9px/1 'Times New Roman',serif;letter-spacing:.05em;color:#C9A94E;text-transform:uppercase}
#m-dock button.on{border-top-color:#de2b29;background:linear-gradient(180deg,rgba(222,43,41,.28),transparent)}
#m-dock button.on .md-lbl{color:#f4e4b8}
/* the narrowest phones (360px): CHARACTERS would touch its neighbour */
@media (max-width:370px){#m-dock .md-lbl{font-size:8px;letter-spacing:0}}

/* ── map controls: zoom in / out, home to your kingdom ── */
#m-zoom{position:fixed;right:10px;bottom:calc(var(--md) + 12px);z-index:30;flex-direction:column;gap:8px}
#m-zoom button{width:42px;height:42px;border-radius:50%;border:1px solid #caa338;cursor:pointer;
  background:radial-gradient(circle at 50% 35%,#22384a,#0e1a25);color:#E3C069;font:700 24px/1 'Times New Roman',serif;
  box-shadow:0 3px 10px rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:0}
#m-zoom button svg{width:20px;height:20px;fill:none;stroke:#E3C069;stroke-width:1.8;stroke-linejoin:round}

/* ── every popup becomes a sheet between the header and the dock ── */
html.m .hdr-popup,html.m #knob-popup{left:0!important;top:var(--mh)!important;right:auto!important;bottom:auto!important;
  width:100vw!important;height:calc(100dvh - var(--mh) - var(--md))!important;min-width:0!important;min-height:0!important;
  max-width:none!important;border-width:12px!important;z-index:64!important;cursor:default;
  /* the frame art is see-through in the middle; over a full screen the map
     behind it is noise, so a phone sheet gets a solid base */
  background:#0b131c;background-clip:padding-box}
html.m .ls-rz,html.m .pp-resize{display:none!important}
html.m .hdr-popup .lp-close,html.m #knob-popup .pp-close{top:-8px!important;right:-8px!important;width:40px!important}
html.m .hdr-popup .lp-title{cursor:default}
/* header drop-downs open as a full-width list under the header */
html.m .hdr-menu{left:0!important;right:0!important;top:var(--mh)!important;width:100vw!important;
  background:#0e1a25!important;border-bottom:2px solid #8d660f;padding:6px 14px 10px!important;z-index:69!important;
  box-shadow:0 8px 24px rgba(0,0,0,.7)}
html.m .hdr-menu .lm-item{font-size:17px;padding:12px 4px}
html.m .hdr-menu .lm-ico{font-size:18px}

/* ── the More sheet: everything the desktop header and bottom nav hold ── */
#m-more{position:fixed;left:0;top:var(--mh);width:100vw;height:calc(100dvh - var(--mh) - var(--md));z-index:68;
  flex-direction:column;overflow-y:auto;background:#0b131c;font-family:'Times New Roman',Times,serif}
html.m #m-more.open{display:flex}
#m-more .mm-h{color:#E3C069;font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:16px 18px 6px}
#m-more .mm-row{display:flex;align-items:center;gap:14px;padding:13px 18px;border:0;border-top:1px solid #1f2d3a;
  color:#f4e4b8;font-size:18px;cursor:pointer;background:none;text-align:left;font-family:inherit;width:100%}
#m-more .mm-row:active{background:rgba(202,163,56,.14)}
#m-more .mm-i{width:26px;text-align:center;color:#C9A94E;font-size:19px}
#m-more .mm-go{margin-left:auto;color:#8d660f;font-size:22px}
#m-more .mm-quit{color:#e58a7c}
#m-more #mm-god.on{color:#ff8a7a}
#m-more #mm-god.on .mm-gv{color:#ff8a7a!important}
/* what the phone header has no room for: level, XP, type and playing style */
#m-more .mm-card{margin:14px 14px 4px;padding:12px 14px;border:1px solid #8d660f;border-radius:10px;
  background:linear-gradient(180deg,#14202c,#0e1a25)}
#m-more .mm-card .n{color:#E3C069;font-weight:700;font-size:19px;letter-spacing:.06em}
#m-more .mm-card .l{display:flex;justify-content:space-between;color:#C9A94E;font-size:13px;margin-top:6px}
#m-more .mm-card .bar{height:6px;border-radius:3px;background:#1f2d3a;margin-top:5px;overflow:hidden}
#m-more .mm-card .bar i{display:block;height:100%;background:linear-gradient(90deg,#8d660f,#d19717)}
#m-more .mm-card .t{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
#m-more .mm-card .mm-signin{display:inline-block;margin-top:9px;padding:6px 16px;border:1px solid #caa338;border-radius:6px;
  color:#E3C069;font-family:inherit;font-size:inherit;font-weight:700;text-decoration:none;background:#16202a;cursor:pointer}
#m-more .mm-card .t span{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#E8DCC8;
  border:1px solid #3b4247;border-radius:4px;padding:3px 7px}

/* ── Inspector: full width above the dock, its own artwork's proportions ── */
html.m #inspector{--iw:min(100vw,calc((100dvh - var(--mh) - var(--md) - 10px)*507/807));--u:calc(var(--iw)/507);
  width:var(--iw)!important;left:calc((100vw - var(--iw))/2)!important;right:auto!important;
  top:auto!important;bottom:calc(var(--md) + 5px)!important;z-index:66;cursor:default!important}

/* a phone held sideways: the Inspector docks to the right, full height, so
   the map stays in view beside it */
@media (max-height:500px){
  html.m #inspector{left:auto!important;right:8px!important}
}

/* ── the village: as tall as the screen, swiped side to side ── */
html.m #regionDetail{inset:var(--mh) 0 var(--md) 0;overflow-x:auto;overflow-y:hidden;z-index:60;-webkit-overflow-scrolling:touch}
html.m .rd-frame{position:relative;inset:auto;margin:0;height:100%;width:auto;max-width:none;max-height:none}
html.m #rd-back{top:calc(var(--mh) + 10px);z-index:61}
html.m #pop{max-width:calc(100vw - 20px)}