/* A shared safe area and visual system for game screens and Administration. */
:root {
  --ui-fallback-top:0px;
  --ui-fallback-bottom:0px;
  --ui-safe-top:max(env(safe-area-inset-top,0px),var(--ui-fallback-top));
  --ui-safe-bottom:max(env(safe-area-inset-bottom,0px),var(--ui-fallback-bottom));
  --ui-safe-left:env(safe-area-inset-left,0px);
  --ui-safe-right:env(safe-area-inset-right,0px);
  --bg:#071b2d;
  --panel:#123347;
  --panel2:#1a4155;
  --text:#f0fafc;
  --muted:#acc7d3;
  --line:rgba(178,222,229,.17);
  --accent:#96e5cc;
  --danger:#ffb0b5;
  --ui-shadow:0 12px 30px rgba(3,20,35,.22);
}
html.ui-standalone-ios {--ui-fallback-top:44px;--ui-fallback-bottom:20px;}
@media(orientation:landscape) {html.ui-standalone-ios {--ui-fallback-top:0px;--ui-fallback-bottom:0px;}}
html {scroll-padding-top:calc(var(--ui-safe-top) + 20px);}
body {overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body::before {content:'';position:fixed;z-index:250;left:0;right:0;top:0;height:var(--ui-safe-top);background:rgba(7,27,45,.88);pointer-events:none;}
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button {touch-action:manipulation;}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {outline:2px solid #a6f1da;outline-offset:3px;}
input:not([type=checkbox]):not([type=radio]),select {min-height:48px;max-width:100%;font-size:16px;}
input[type=checkbox],input[type=radio] {width:24px;height:24px;min-height:24px;flex:0 0 24px;accent-color:#89dfc7;}
.primary,.secondary {min-height:48px;border-radius:14px;}
.primary {background:linear-gradient(120deg,#b3efd4,#83dace);color:#0c2c32;}
.secondary {background:rgba(136,205,217,.07);border-color:var(--line);}

/* Map chrome: compact header, balanced floating controls, contained bottom bar. */
.topbar {top:0;padding:calc(var(--ui-safe-top) + 17px) calc(var(--ui-safe-right) + 86px) 28px calc(var(--ui-safe-left) + 16px);min-height:calc(var(--ui-safe-top) + 78px);background:linear-gradient(180deg,rgba(7,27,45,.76),rgba(7,27,45,.30) 65%,transparent);}
.topbar .brand {font-size:18px;line-height:1.3;letter-spacing:-.035em;min-width:0;max-width:100%;font-weight:850;}
.topbar .version {display:block;margin:3px 0 0;color:#d0e3eb;font-size:11px;font-weight:600;letter-spacing:.015em;}
.camera-compass {right:calc(var(--ui-safe-right) + 13px);top:calc(var(--ui-safe-top) + 12px);width:58px;height:70px;min-height:70px;border:0;border-radius:18px;padding:0 0 12px;background:transparent;box-shadow:none!important;backdrop-filter:none;display:block;overflow:visible;}
.camera-compass::before {content:none;}
.compass-image {display:block;width:58px;height:58px;object-fit:contain;transform-origin:50% 50%;transform:rotate(var(--needle-rotation,0deg));transition:transform .16s linear;filter:drop-shadow(0 4px 8px rgba(8,31,46,.24));pointer-events:none;}
.camera-compass::after {content:attr(data-mode-label);position:absolute;bottom:0;left:50%;transform:translateX(-50%);min-width:38px;padding:3px 6px;border-radius:999px;background:rgba(7,27,45,.88);border:1px solid rgba(176,229,222,.25);color:#ecfff9;font-size:10px;line-height:1.1;font-weight:750;white-space:nowrap;}
.camera-compass.auto::after {background:#176862;border-color:#a0ebd6;}
.camera-compass:active {transform:scale(.96);}
.reach-status {top:calc(var(--ui-safe-top) + 91px);max-width:calc(100% - var(--ui-safe-left) - var(--ui-safe-right) - 36px);font-size:12px;line-height:1.2;padding:8px 13px;border:1px solid rgba(186,240,227,.3);background:rgba(14,61,69,.84);box-shadow:0 4px 18px rgba(5,30,42,.12);}
.gps-status {top:calc(var(--ui-safe-top) + 132px);font-size:12px;padding:8px 12px;}
.map-actions {right:calc(var(--ui-safe-right) + 13px);bottom:calc(var(--ui-safe-bottom) + 100px);gap:10px;}
.map-actions .round {width:52px;height:52px;min-height:52px;font-size:27px;border:1px solid rgba(188,231,232,.3);background:linear-gradient(145deg,rgba(19,66,81,.97),rgba(9,40,61,.97));box-shadow:var(--ui-shadow);}
.map-actions .dev-button {min-height:44px;padding:8px 14px;font-size:12px;border-radius:999px;background:rgba(9,40,61,.92);}
.emote-dock {left:calc(var(--ui-safe-left) + 13px);bottom:calc(var(--ui-safe-bottom) + 101px);}
.emote-toggle {width:54px;height:54px;min-height:54px;border-width:1px;box-shadow:var(--ui-shadow);}
.emote-toggle>small {font-size:9px;letter-spacing:.025em;}
.emote-menu {bottom:64px;width:min(350px,calc(100vw - var(--ui-safe-left) - var(--ui-safe-right) - 26px));max-height:min(62dvh,calc(100dvh - var(--ui-safe-top) - var(--ui-safe-bottom) - 190px));padding:14px;border-radius:22px;}
.emote-library-head strong {font-size:16px;}
.emote-library-head small,.emote-library-source,.emote-library-status {font-size:11px;white-space:normal;line-height:1.4;}
.emote-menu .emote-library-item {min-height:64px;border-radius:14px;}
.emote-library-words strong {font-size:13px;}
.emote-library-words small {font-size:10px;}
.emote-search input {min-height:44px;font-size:16px;}
.bottom-hud.pogo-dock {left:calc(var(--ui-safe-left) + 12px);right:calc(var(--ui-safe-right) + 12px);bottom:calc(var(--ui-safe-bottom) + 13px);width:auto;transform:none;grid-template-columns:minmax(0,1fr) 58px minmax(0,1.3fr);gap:8px;align-items:center;}
.bottom-hud.pogo-dock>* {min-width:0;}
.bottom-hud.pogo-dock .trainer-dock {width:100%;min-width:0;height:64px;min-height:64px;display:grid;grid-template-columns:42px minmax(0,1fr);gap:6px;padding:7px 8px 7px 5px;border-radius:18px;background:rgba(9,40,61,.9)!important;border:1px solid rgba(170,225,225,.25);}
.pogo-dock .trainer-avatar {width:42px;height:42px;min-width:42px;border-width:2px;}
.pogo-dock .trainer-avatar span {width:28px;height:28px;}
.trainer-summary {display:block;min-width:0;color:#f1fbfc;font-size:11px;line-height:1.3;text-shadow:none;-webkit-line-clamp:unset;}
.trainer-summary-name,.trainer-summary-stats {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.trainer-summary-name {font-weight:800;margin-bottom:4px;}
.trainer-summary-stats {font-size:10px;color:#b9d7e0;}
.pogo-dock .main-orb {width:58px;height:58px;min-height:58px;border-width:3px;border-radius:50%;transform:none;box-shadow:0 6px 18px rgba(5,24,39,.23);}
.bottom-hud.pogo-dock .nearby-dock {width:100%;height:64px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;border:1px solid rgba(189,235,224,.75);border-radius:18px;background:rgba(239,253,246,.9);overflow:hidden;}
.nearby-dock>div {min-width:0;padding:7px 2px;}
.nearby-dock strong {font-size:16px;line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums;}
.nearby-dock span {font-size:9px;letter-spacing:0;text-transform:none;margin-top:4px;}
.trainer-menu {left:calc(var(--ui-safe-left) + 12px);bottom:calc(var(--ui-safe-bottom) + 89px);width:min(300px,calc(100vw - var(--ui-safe-left) - var(--ui-safe-right) - 24px));padding:16px;border-radius:22px;}
.trainer-menu-head strong {overflow-wrap:anywhere;}
.trainer-reset-button {min-height:58px;}
.spawn-admin-panel {right:calc(var(--ui-safe-right) + 12px);bottom:calc(var(--ui-safe-bottom) + 205px);max-height:calc(100dvh - var(--ui-safe-top) - var(--ui-safe-bottom) - 225px);overflow:auto;}
.toast {bottom:calc(var(--ui-safe-bottom) + 88px);max-width:calc(100% - var(--ui-safe-left) - var(--ui-safe-right) - 28px);font-size:13px;line-height:1.5;padding:11px 16px;border-radius:16px;}
.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right {bottom:calc(var(--ui-safe-bottom) + 84px);}

/* Every full-screen view and modal honors the same insets. */
.collection-panel {padding:calc(var(--ui-safe-top) + 16px) calc(var(--ui-safe-right) + 16px) calc(var(--ui-safe-bottom) + 24px) calc(var(--ui-safe-left) + 16px);overscroll-behavior:contain;}
.collection-head {align-items:center;gap:12px;margin-bottom:16px;}
.collection-head h2 {font-size:23px;line-height:1.2;letter-spacing:-.035em;margin-bottom:5px;}
.collection-head .round {width:46px;height:46px;min-height:46px;flex:none;}
.collection-player,.collection-head .muted {font-size:12px;}
.collection-card,.bag-card {border-radius:18px;border-color:rgba(179,222,226,.18);background:linear-gradient(145deg,rgba(24,64,85,.95),rgba(15,43,64,.97));}
.collection-copy .pet-name {font-size:17px;line-height:1.25;overflow-wrap:anywhere;}
.pet-action,.bag-use,.bag-discard,.field-guide-show,.collection-filter {min-height:44px;}
.bag-copy small {font-size:12px;line-height:1.5;}
.settings-card,.credits-card {padding:17px;border-radius:19px;background:rgba(130,190,212,.07);border-color:var(--line);}
.settings-card h3 {font-size:17px;letter-spacing:-.02em;}
.settings-action {min-height:62px;border-radius:14px;}
.pvp-setting {min-height:64px;align-items:center;}
.pvp-setting small {font-size:12px;line-height:1.5;}
.admin-link {display:flex;align-items:center;justify-content:center;text-decoration:none;min-height:48px;}
dialog.pvp-dialog,dialog#logsDialog {max-height:calc(100dvh - var(--ui-safe-top) - var(--ui-safe-bottom) - 28px);max-width:calc(100vw - var(--ui-safe-left) - var(--ui-safe-right) - 24px);top:var(--ui-safe-top);bottom:var(--ui-safe-bottom);margin:auto;overflow:auto;border-color:var(--line);border-radius:24px;box-shadow:0 24px 80px rgba(0,10,26,.45);}
.pvp-dialog .pvp-header {align-items:center;gap:12px;}
.pvp-dialog .pvp-close {width:46px;height:46px;min-height:46px;}
.pvp-dialog h2 {font-size:22px;letter-spacing:-.025em;}
.pvp-dialog .pvp-primary,.pvp-dialog .pvp-secondary {min-height:48px;border-radius:14px;}
.pvp-dialog .pvp-primary {background:linear-gradient(120deg,#b3efd4,#83dace);color:#0c2c32;}
.social-content.pvp-dialog {max-height:none;max-width:none;border-radius:0;box-shadow:none;}
#encounterSheet.encounter-screen,#playAreaSheet.play-area-screen {padding-top:calc(var(--ui-safe-top) + 16px)!important;padding-bottom:calc(var(--ui-safe-bottom) + 14px)!important;padding-left:calc(var(--ui-safe-left) + 14px)!important;padding-right:calc(var(--ui-safe-right) + 14px)!important;}
#poiSheet.poi-sheet {padding-top:calc(var(--ui-safe-top) + 14px)!important;padding-bottom:calc(var(--ui-safe-bottom) + 14px)!important;}
#poiSheet.poi-sheet .poi-sheet-card {max-height:calc(100dvh - var(--ui-safe-top) - var(--ui-safe-bottom) - 28px);}
.intro-skip-button {top:calc(var(--ui-safe-top) + 12px);right:calc(var(--ui-safe-right) + 14px);}
.intro-progress {top:calc(var(--ui-safe-top) + 17px);left:calc(var(--ui-safe-left) + 14px);}
.intro-tap-hint {bottom:calc(var(--ui-safe-bottom) + 18px);}
.avatar-view {padding-top:calc(var(--ui-safe-top) + 14px);padding-bottom:calc(var(--ui-safe-bottom) + 14px);}
.avatar-creator-shell {height:calc(100dvh - var(--ui-safe-top) - var(--ui-safe-bottom) - 28px);}

/* Admin shares the game palette, with a safe toolbar and readable update notes. */
.admin-shell {width:min(940px,100%);padding:calc(var(--ui-safe-top) + 16px) calc(var(--ui-safe-right) + 16px) calc(var(--ui-safe-bottom) + 36px) calc(var(--ui-safe-left) + 16px);}
.admin-header {display:block;margin:0 0 22px;}
.admin-toolbar {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;}
.admin-toolbar .back {display:inline-flex;align-items:center;min-height:44px;gap:8px;padding:8px 12px;border-radius:13px;background:rgba(147,215,220,.08);border:1px solid var(--line);font-size:14px;}
.admin-toolbar .badge {font-size:12px;line-height:1.2;min-height:34px;padding:8px 11px;border-radius:999px;color:#c2f4e4;white-space:nowrap;background:rgba(136,224,204,.08);}
.admin-eyebrow {font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9cd5cb;font-weight:750;}
.admin-header h1 {font-size:29px;line-height:1.2;letter-spacing:-.035em;margin:5px 0 9px;}
.admin-header p {font-size:12px;line-height:1.5;}
.admin-shell .card {padding:20px;border-radius:22px;background:linear-gradient(145deg,rgba(19,52,70,.96),rgba(11,34,53,.98));border-color:var(--line);box-shadow:0 10px 30px rgba(3,20,35,.13);margin:14px 0;min-width:0;}
.admin-shell .card h2 {font-size:18px;letter-spacing:-.025em;margin-bottom:7px;}
.admin-shell .card p {font-size:13px;line-height:1.6;}
.admin-shell .file-picker {font-size:13px;gap:10px;margin:18px 0 12px;}
.admin-shell .file-picker input {font-size:13px;min-height:58px;min-width:0;max-width:100%;padding:10px;background:rgba(8,26,43,.7);border:1px dashed rgba(161,218,223,.32);border-radius:15px;}
.admin-shell input::file-selector-button {min-height:38px;padding:8px 11px;margin-right:9px;border:1px solid rgba(152,217,219,.2);border-radius:10px;color:#d7f4ed;background:#1b4657;font:inherit;font-size:12px;}
.admin-shell .actions {display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0;}
.admin-shell button {min-height:48px;font-size:13px;border-radius:13px;padding:10px 13px;white-space:normal;}
.admin-shell .status {font-size:12px;line-height:1.6;padding:13px;border-radius:14px;background:rgba(131,190,204,.07);overflow-wrap:anywhere;}
.admin-shell .status.error {background:rgba(167,61,75,.09);border-color:rgba(247,155,167,.35);}
.admin-shell .preview {padding:15px;border-radius:14px;background:rgba(136,224,204,.06);border-left-color:#8ce5cb;}
.admin-shell .preview strong {font-size:15px;}
.admin-shell .preview p {font-size:12px;white-space:pre-line;overflow-wrap:anywhere;}
.admin-shell .preview small {font-size:11px;color:var(--muted);}
.admin-details {border-top:1px solid var(--line);padding-top:12px;margin-top:15px;}
.admin-details summary {font-size:12px;min-height:40px;display:list-item;cursor:pointer;color:#a9d8d3;}
.admin-details .helper {font-size:12px;line-height:1.6;}
.admin-shell .row {padding:14px;border:1px solid rgba(156,207,218,.1);background:rgba(130,190,212,.065);border-radius:15px;}
.admin-shell .row strong {font-size:13px;overflow-wrap:anywhere;}
.admin-shell .row small {font-size:11px;margin-top:4px;}
.admin-shell .facts div {border:1px solid var(--line);border-radius:13px;background:rgba(131,190,204,.07);padding:12px;}
.admin-shell .facts dd {font-size:13px;}
.dialog-head {position:sticky;top:0;background:#123347;gap:12px;z-index:1;}
.dialog-head button {width:46px;height:46px;min-height:46px;padding:0;flex:none;font-size:24px;}

@media(min-width:700px) {
  .bottom-hud.pogo-dock {left:50%;right:auto;transform:translateX(-50%);width:min(620px,calc(100vw - 48px));grid-template-columns:minmax(0,1.2fr) 64px minmax(0,1fr);gap:14px;}
  .pogo-dock .main-orb {width:64px;height:64px;min-height:64px;}
  .trainer-summary {font-size:13px;}.trainer-summary-stats {font-size:11px;}
  .nearby-dock strong {font-size:19px;}.nearby-dock span {font-size:11px;}
  .collection-panel {width:min(620px,calc(100vw - var(--ui-safe-left) - var(--ui-safe-right)));min-width:0;}
  .topbar .brand {font-size:21px;}.topbar .version {display:inline-block;margin-left:8px;}
}
@media(max-width:359px) {
  .bottom-hud.pogo-dock {left:calc(var(--ui-safe-left) + 8px);right:calc(var(--ui-safe-right) + 8px);grid-template-columns:minmax(0,.9fr) 52px minmax(0,1.4fr);gap:6px;}
  .bottom-hud.pogo-dock .trainer-dock {grid-template-columns:36px minmax(0,1fr);gap:4px;padding:7px 5px;}
  .pogo-dock .trainer-avatar {width:36px;height:36px;min-width:36px;}
  .pogo-dock .main-orb {width:52px;height:52px;min-height:52px;}
  .trainer-summary-name {font-size:10px;}.trainer-summary-stats {font-size:9px;}
  .nearby-dock strong {font-size:14px;}.nearby-dock span {font-size:8px;}
  .admin-shell .actions {grid-template-columns:1fr;}
}
@media(max-height:560px) and (orientation:landscape) {
  .reach-status {top:calc(var(--ui-safe-top) + 68px);max-width:60%;}
  .topbar {min-height:72px;}.topbar .brand {font-size:16px;}
  .camera-compass {width:50px;height:62px;}.compass-image {width:50px;height:50px;}
  .emote-menu {max-height:calc(100dvh - var(--ui-safe-top) - var(--ui-safe-bottom) - 155px);}
}
@media(prefers-reduced-motion:reduce) {.compass-image {transition:none;}}