/* Phones (portrait, or landscape with a short screen). ui.js uses the same query (UI.mobile): one window at a time, no dragging. */
.chip .short:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: none; }
@media (max-width: 760px), (max-height: 500px) {
  #top:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { gap: 5px; padding: 0 6px; padding-left: max(6px, env(safe-area-inset-left)); }
  #top .logo:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), #top .chip.where:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: none; }
  .chip:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { padding: 2px 8px; font-size: 13px; gap: 4px; }
  .chip .xp:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 34px; }
  .chip .full:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: none; } .chip .short:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: inline; }/* Auto Hunt: a big floating button above the dock instead of a chip at the far end of the top bar */
  
  #top .chip.hunt:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: fixed; right: 10px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 45; font-size: 16px; padding: 10px 16px; border-radius: 24px; border-width: 2px; box-shadow: 0 4px 14px #000c; }
  body.has-win #top .chip.hunt:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: none; }/* dock: all 8 buttons on one row */
  
  #dock:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; padding: 0 4px env(safe-area-inset-bottom); height: calc(60px + env(safe-area-inset-bottom)); justify-content: stretch; overflow: hidden; }
  #dock button:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { min-width: 0 !important; width: 100%; height: 52px; padding: 0; font-size: 10px; border-radius: 8px; }
  #dock kbd:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: none; }
  #field:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { bottom: calc(60px + env(safe-area-inset-bottom)); }
  #desk:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { inset: 44px 0 calc(60px + env(safe-area-inset-bottom)) 0; }/* windows are full-screen sheets between the top bar and the dock */
  
  .win:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { left: 0 !important; top: 44px !important; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); width: auto !important; max-width: none; max-height: none; border-radius: 0; border-left: 0; border-right: 0; }
  .win-bar:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { cursor: default; border-radius: 0; padding: 6px 6px 6px 12px; }
  .win-x:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 38px; height: 32px; font-size: 16px; }
  .win-body:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { flex: 1; padding: 8px 10px 16px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .win button:not(.slot):not(.evo):not(.tnode):not(.region):not(.win-x):not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { min-height: 32px; }
  .win .tabs:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { flex-wrap: wrap; }/* field: map name on the right, the Journey tracker on the left under the top bar */
  
  .banner:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { left: auto; right: 6px; transform: none; top: 6px; font-size: 15px; padding: 2px 10px; max-width: 52%; }
  .banner small:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-size: 10px; }
  #tracker:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { left: 6px; right: auto; top: 50px; width: min(300px, calc(100vw - 12px)); font-size: 12px; padding: 6px 8px; }
  #tracker:has(#trShow):not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: auto; padding: 4px; }
  .partner img:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 96px; height: 96px; }
  .wander img:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: calc(68px * var(--sz, 1)); height: calc(68px * var(--sz, 1)); }
  .wander .lbl:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-size: 11px; }
  .npcs:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { top: 96px; max-height: calc(100% - 200px); }
  .modal:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { padding: 8px; }
  .modal-box:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { max-height: calc(100vh - 16px); overflow: auto; }
  #toasts:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { left: 8px; right: 8px; top: 120px; transform: none; width: auto; }
  .walking:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { left: 6px; right: 6px; transform: none; flex-wrap: wrap; }
}/* very short landscape phones: smaller dock */

@media (max-height: 500px) and (min-width: 761px) {
  #dock:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { grid-template-columns: repeat(8, minmax(0, 90px)); justify-content: center; }
}/* ---------- login page, account panel ---------- */


.starter-screen.login:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { justify-content: flex-start; padding-top: max(32px, 8vh); }
.loginwrap:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: min(420px, 100%); display: flex; flex-direction: column; gap: 14px; }
.lcard:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: linear-gradient(#22304a, #161f30); border: 2px solid var(--ui-line); border-radius: 14px; padding: 12px 14px; }
.lcard h3:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin: 0 0 8px; font-weight: 400; font-size: 16px; color: var(--ui-accent); }
.lacc:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; gap: 6px; margin-top: 6px; }
.lplay:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { flex: 1; display: flex; align-items: center; gap: 10px; text-align: left; background: #0e141e; border: 2px solid var(--ui-line); border-radius: 10px; padding: 6px 10px; color: var(--ui-text); font: inherit; cursor: pointer; min-height: 56px; }
.lplay:hover:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .lplay:focus-visible:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { border-color: var(--ui-gold); }
.lplay span:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lplay b:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-weight: 400; font-size: 18px; color: var(--ui-gold); }
.lplay small:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: var(--ui-muted); }
.lplay i:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-style: normal; color: #7fe0a0; }
.lx:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: none; border: 1px solid var(--ui-line); border-radius: 10px; color: var(--ui-muted); cursor: pointer; font: inherit; padding: 0 12px; }
.lx.armed:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: #fff; background: #7a2232; border-color: #ff8a9a; }
.ltabs:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; gap: 6px; margin-bottom: 10px; }
.ltabs button:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { flex: 1; background: #0e141e; border: 1px solid var(--ui-line); border-radius: 8px; color: var(--ui-muted); font: inherit; padding: 8px; cursor: pointer; }
.ltabs button.on:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #2e2610; border-color: var(--ui-gold); color: var(--ui-gold); }
.lcard form:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; flex-direction: column; gap: 10px; }
.lcard label:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; flex-direction: column; gap: 4px; color: var(--ui-muted); font-size: 13px; }
.lcard label.chk:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { flex-direction: row; align-items: flex-start; gap: 8px; }
.lcard input:not([type=checkbox]):not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font: inherit; font-size: 17px; background: #0b111c; color: var(--ui-text); border: 1px solid var(--ui-line); border-radius: 8px; padding: 10px; }
.lcard input:focus:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { outline: none; border-color: var(--ui-gold); }
.lgo:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font: inherit; font-size: 18px; padding: 10px; border-radius: 10px; border: 2px solid #6fe39a; background: #1f5a34; color: #e8ffe8; cursor: pointer; }
.lgo:disabled:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: .6; }
.lmsg:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { min-height: 18px; color: #ff9a9a; text-align: center; }
.lnote:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin: 0 0 10px !important; text-align: left !important; color: #ffe08a !important; font-size: 14px; background: #2e2610; border-radius: 8px; padding: 8px 10px; }
.lfoot:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-size: 12px; }
.lfoot a:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: #8fd0ff; text-decoration: underline; cursor: pointer; display: inline-block; margin-top: 8px; }
.accrow:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.accname:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-weight: 400; font-size: 20px; color: var(--ui-gold); }
.row.wrap:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { flex-wrap: wrap; gap: 6px; }
#ac-pwf:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } #ac-pwf.hidden:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: none; } #ac-pwf input:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { flex: 1; min-width: 120px; }
.chip.acct:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { cursor: pointer; color: var(--ui-text); }
#syncwarn:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: fixed; left: 50%; top: 52px; transform: translateX(-50%); z-index: 950; width: min(460px, calc(100vw - 16px)); background: #2a1418f4; border: 2px solid #ff8a9a; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
#syncwarn .row:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
#syncwarn button:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font: inherit; background: #2c3e60; border: 1px solid var(--ui-line); color: var(--ui-text); border-radius: 6px; padding: 6px 10px; cursor: pointer; }

.chip.acct .acc-ico:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 14px; height: 14px; border-radius: 50%; flex: none; background: radial-gradient(circle at 50% 36%, #cfe0f8 0 26%, transparent 28%), radial-gradient(ellipse at 50% 100%, #cfe0f8 0 48%, transparent 50%), #2c3e60; }
.chip.acct .acc-n:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px), (max-height: 500px) { .chip.acct .acc-n:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { max-width: 64px; } }/* v0.48 offline badge rides above the floating Stop Hunt button on phones */

@media (max-width: 760px), (max-height: 500px) {
  #top .offbadge:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: fixed; right: 14px; bottom: calc(124px + env(safe-area-inset-bottom)); z-index: 45; width: 40px; height: 40px; font-size: 20px; box-shadow: 0 3px 10px #000b; }
  body.has-win #top .offbadge:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: none; }
}