/* Touch layout is capability based, so narrow desktop windows keep their keyboard HUD. */
#mobile-controls, #touch-menu-extras, #touch-chat-actions, #touch-loadout-toggle, #touch-utility { display: none; }
.touch-ui #touch-utility { display: flex; gap: 6px; margin-top: 7px; }
.touch-ui #touch-utility button { flex: 1; min-width: 0; min-height: 44px; padding: 4px 2px; border-radius: 7px; font-size: 11px; font-weight: 600; }
.touch-ui #touch-sit[aria-pressed="true"] { border-color: var(--green); color: var(--green); }
.touch-ui #touch-pvp[aria-pressed="true"] { border-color: var(--red); background: var(--red-deep); color: var(--white); }
.touch-ui #pvpflag { display: none !important; }
.touch-ui { --safe-top: env(safe-area-inset-top,0px); --safe-right: env(safe-area-inset-right,0px); --safe-bottom: env(safe-area-inset-bottom,0px); --safe-left: env(safe-area-inset-left,0px); --deck: 208px; }
.touch-ui body { overscroll-behavior: none; }
.touch-ui button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.touch-ui input, .touch-ui select { font-size: 16px; }
.touch-ui #landing { padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }
.touch-ui .control-hints span { display: none; }
.touch-ui .control-hints::after { content: 'TOUCH TO EXPLORE · PORTRAIT OR LANDSCAPE'; font: 10px var(--ui-mono); color: var(--mist); letter-spacing: .07em; }
.touch-ui #landing .btns button, .touch-ui #landing input { min-height: 48px; }
.touch-ui #wrap { height: 100dvh; }
.touch-ui #game { touch-action: none; user-select: none; -webkit-user-select: none; height: calc(100% - var(--deck) - var(--safe-bottom)); }
.touch-ui #hud { bottom: auto; height: 100dvh; }
.touch-ui #mobile-controls { display: block; position: fixed; inset: 0; z-index: 20; pointer-events: none; user-select: none; -webkit-user-select: none; }
.touch-ui body:not(.in-world) #mobile-controls { display: none; }
.touch-ui #touch-deck { position: absolute; bottom: 0; width: 100%; height: calc(var(--deck) + var(--safe-bottom)); }
.touch-ui #mobile-controls button, .touch-ui #touch-stick { pointer-events: auto; touch-action: none; }
.touch-ui #touch-toolbar { position: absolute; top: calc(9px + var(--safe-top)); right: calc(10px + var(--safe-right)); display: flex; gap: 6px; }
.touch-ui #touch-toolbar button { min-height: 44px; padding: 6px 10px; font-size: 16px; background: var(--panel); border-radius: 12px; }
.touch-ui #touch-toolbar span { font-size: 11px; }
.touch-ui #touch-stick { position: absolute; left: calc(20px + var(--safe-left)); bottom: calc(20px + var(--safe-bottom)); width: 136px; height: 136px; border: 1px solid var(--line); border-radius: 50%; background: radial-gradient(circle,var(--panel-top),var(--well)); box-shadow: inset 0 0 0 11px var(--scrim),0 5px 18px var(--shadow); }
.touch-ui #touch-stick > span:not(#stick-thumb) { position: absolute; color: var(--muted); font-size: 22px; line-height: 1; pointer-events: none; }
.stick-up { top: 8px; left: 60px; }.stick-down { bottom: 8px; left: 60px; }.stick-left { left: 12px; top: 54px; }.stick-right { right: 12px; top: 54px; }
.touch-ui #stick-thumb { position: absolute; width: 54px; height: 54px; left: calc(50% - 27px); top: calc(50% - 27px); border-radius: 50%; border: 1px solid var(--edge); background: linear-gradient(145deg,var(--panel-top),var(--panel-solid)); box-shadow: 0 3px 10px var(--shadow),inset 0 1px var(--edge); pointer-events: none; }
.touch-ui #touch-stick.pressed #stick-thumb { border-color: var(--gold); background: var(--hover); }
.touch-ui #touch-actions { position: absolute; right: calc(12px + var(--safe-right)); bottom: calc(15px + var(--safe-bottom)); width: 174px; height: 143px; }
.touch-ui #touch-actions button { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border-radius: 50%; width: 58px; height: 58px; font-size: 27px; line-height: 1; background: linear-gradient(145deg,var(--panel-top),var(--well)); border-color: var(--line); box-shadow: inset 0 1px var(--edge),0 4px 14px var(--shadow); }
.touch-ui #touch-actions small { font-size: 10px; line-height: 1.8; letter-spacing: .02em; }
.touch-ui #touch-actions .touch-glide { left: 10px; top: 0; width: 48px; height: 48px; font-size: 23px; }
.touch-ui #touch-actions .touch-dash { right: 18px; top: 0; color: var(--blue); }
.touch-ui #touch-actions .touch-dash { overflow: hidden; isolation: isolate; }
.touch-ui #touch-actions .touch-dash .slot-caption { position: static; }
.touch-ui #touch-actions .touch-dash.cooling { border-color: var(--faint); }
.touch-ui #touch-actions .touch-attack { left: 0; bottom: 0; width: 72px; height: 72px; color: var(--gold); border-color: var(--gold-deep); }
.touch-ui #touch-actions .touch-jump { right: 0; bottom: 0; width: 82px; height: 82px; color: var(--steel-ink); background: linear-gradient(145deg,var(--pearl-light),var(--pearl-blue)); border: 2px solid var(--edge); font-size: 33px; }
.touch-ui #touch-actions button.pressed { transform: scale(.94); filter: brightness(1.3); box-shadow: inset 0 0 18px var(--line); }
.touch-ui #touch-tip { position: absolute; bottom: calc(var(--deck) + var(--safe-bottom) + 8px); left: 50%; transform: translateX(-50%); margin: 0; padding: 0 4px 0 10px; display: flex; align-items: center; white-space: nowrap; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: 10px; color: var(--muted); }
.touch-ui #touch-tip button { min-width: 44px; min-height: 44px; padding: 0; background: transparent; border: 0; font-size: 19px; }
.touch-ui body:has(#err:not(:empty)) #touch-tip { display: none; }
.touch-ui #touch-challenge { position: absolute; bottom: calc(var(--deck) + var(--safe-bottom) + 62px); left: 50%; transform: translateX(-50%); margin: 0; max-width: 80vw; padding: 4px 9px; border: 1px solid var(--gold); border-radius: 6px; background: var(--panel); color: var(--gold); font-size: 10px; }
.touch-ui #menudock #course { grid-column: 1 / -1; white-space: pre-line; font-size: 11px; color: var(--muted); padding: 8px; line-height: 1.7; }
.touch-ui #resourceband { top: calc(9px + var(--safe-top)); left: calc(10px + var(--safe-left)); width: 156px; min-height: 0; padding: 7px 10px; border-radius: 4px 4px 12px 4px; border-left-width: 2px; }
.touch-ui #resourceband .identity { margin: 0 0 3px; gap: 6px; }
.touch-ui #resourceband .level-seal { min-width: 21px; width: 21px; height: 21px; transform: none; border-radius: 50%; }
.touch-ui #resourceband .level-seal > span { transform: none; }
.touch-ui #resourceband .level-seal small, .touch-ui #resourceband .eyebrow, .touch-ui #playerdetail { display: none; }
.touch-ui #resourceband #playerlevel { font-size: 11px; }
.touch-ui #resourceband #playername { font-size: 12px; white-space: nowrap; }
.touch-ui #resourceband .identity-copy { margin: 0; }
.touch-ui #resourceband .resource { margin-top: 4px; }
.touch-ui #resourceband .resource-label { font-size: 8px; letter-spacing: 0; margin-bottom: 1px; }
.touch-ui #resourceband .resource-track { height: 4px; }
.touch-ui #resourceband .hp .resource-track { height: 6px; }
.touch-ui #resourceband .xp { padding: 0; border: 0; margin-top: 5px; }
.touch-ui #resourceband .xp .resource-label { display: none; }
.touch-ui #resourceband #xpbar { height: 3px; }
.touch-ui #resourceband #xpgain { left: 0; bottom: -18px; font-size: 9px; }
.touch-ui #statuses { position: absolute; top: 100%; left: 0; width: 160px; }
.touch-ui #locationhud { top: calc(58px + var(--safe-top)); left: auto; right: calc(10px + var(--safe-right)); transform: none; min-width: 0; width: 145px; max-width: 44vw; padding: 6px 10px; border-radius: 4px 4px 12px 4px; }
.touch-ui #locationhud #regionname { font-size: 8px; letter-spacing: .1em; }
.touch-ui #locationhud #locationname { font-size: 12px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.touch-ui #locationhud #mapbutton { font-size: 10px; min-height: 30px; padding: 2px 0; width: 100%; text-align: left; }
.touch-ui #locationhud kbd { display: none; }
.touch-ui #questmark { top: calc(136px + var(--safe-top)); right: 10px; left: auto; transform: none; max-width: 55vw; min-width: 0; font-size: 9px; padding: 4px 7px; pointer-events: none; }
.touch-ui #worldrail, .touch-ui #partyframes { display: none; }
.touch-ui .touch-world-open #worldrail { display: flex; top: calc(160px + var(--safe-top)); right: calc(10px + var(--safe-right)); width: 175px; max-height: calc(100dvh - 390px - var(--safe-top)); }
.touch-ui .touch-world-open #partyframes:not([hidden]) { display: flex; top: calc(160px + var(--safe-top)); left: calc(10px + var(--safe-left)); width: 150px; max-height: calc(100dvh - 390px - var(--safe-top)); pointer-events: auto; }
.touch-ui #actiondock { bottom: calc(164px + var(--safe-bottom)); left: 50%; padding: 4px; gap: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--well); box-shadow: none; }
.touch-ui #actiondock .tray-label, .touch-ui #actiondock > div:first-child { display: none; }
.touch-ui .touch-weapons #actiondock > div:first-child { display: block; }
.touch-ui .touch-weapons #actiondock > div:nth-child(2) { display: none; }
.touch-ui #touch-loadout-toggle { display: block; min-width: 44px; height: 44px; margin-left: 6px; padding: 4px; font-size: 10px; border-radius: 7px; color: var(--gold); }
.touch-ui #hotbar, .touch-ui #skills { gap: 6px !important; }
.touch-ui #hotbar .skillbtn, .touch-ui #skills .skillbtn { width: 46px; height: 44px; border-radius: 7px; }
.touch-ui #hotbar .item-art, .touch-ui #skills .skico { width: 27px; height: 27px; margin: 3px auto 0; }
.touch-ui .slot-key { font-size: 8px; top: 2px; left: 3px; }
.touch-ui .slot-caption { font-size: 8px; bottom: 1px; }
.touch-ui #hotbar .skillbtn { cursor: pointer; }
.touch-ui #menudock { display: none; top: calc(60px + var(--safe-top)); right: calc(10px + var(--safe-right)); bottom: auto; width: min(320px,calc(100vw - 20px - var(--safe-left) - var(--safe-right))); max-height: calc(100dvh - 80px - var(--safe-top) - var(--safe-bottom)); overflow-y: auto; padding: 12px; gap: 8px; grid-template-columns: 1fr 1fr; background: var(--panel-solid); border: 1px solid var(--edge); border-radius: 12px; box-shadow: var(--panel-shadow); z-index: 30; }
.touch-ui .touch-menu-open #menudock { display: grid; }
.touch-ui #menudock button { min-height: 48px; font-size: 12px; padding: 8px; }
.touch-ui #menudock kbd { display: none; }
.touch-ui #touch-menu-extras { display: contents; }
.touch-ui #net { bottom: calc(var(--deck) + var(--safe-bottom) + 3px); left: 10px; font-size: 8px; }
.touch-ui #who { display: none; }
.touch-ui #chat { bottom: calc(var(--deck) + var(--safe-bottom) + 78px); left: 10px; max-height: 32px; width: 210px; font-size: 10px; }
.touch-ui #chatin { left: calc(10px + var(--safe-left)); bottom: calc(10px + var(--safe-bottom) + var(--keyboard-inset,0px)); width: calc(100% - 124px - var(--safe-left) - var(--safe-right)); height: 48px; }
.touch-ui .chat-open #touch-chat-actions { display: flex; position: fixed; right: calc(10px + var(--safe-right)); bottom: calc(10px + var(--safe-bottom) + var(--keyboard-inset,0px)); gap: 4px; z-index: 65; }
.touch-ui #touch-chat-actions button { min-width: 44px; height: 48px; padding: 6px; }
.touch-ui #feedback { top: auto; bottom: calc(var(--deck) + var(--safe-bottom) + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 85vw; max-height: 58px; overflow: hidden; text-align: center; pointer-events: none; }
.touch-ui #feedback > span:not(:empty) { font-size: 10px; padding: 4px 8px; }
.touch-ui #pvpflag { top: calc(155px + var(--safe-top)); left: 10px; font-size: 10px; max-width: 45vw; }
.touch-ui #systemwindow, .touch-ui body:has(#questmark:not([hidden])) #systemwindow { top: calc(185px + var(--safe-top)); width: min(270px,80vw); padding: 6px 20px; }
.touch-ui #systemwindow .system-value { display: inline; }
.touch-ui #systemwindow p { display: inline; margin-left: 5px; }
.touch-ui #systemwindow .eyebrow { display: none; }
.touch-ui #systemwindow h2 { font-size: 12px; margin: 0; }.touch-ui #systemwindow .system-value { font-size: 18px; margin-top: 2px; }.touch-ui #systemwindow p { font-size: 10px; margin: 2px 0 2px 6px; }
.touch-ui .system-panel, .touch-ui #inv, .touch-ui #areamap, .touch-ui #cacheoffer { top: calc(8px + var(--safe-top)) !important; bottom: calc(8px + var(--safe-bottom)) !important; left: calc(8px + var(--safe-left)) !important; right: calc(8px + var(--safe-right)) !important; width: auto !important; max-width: none !important; padding: 0 16px 20px !important; overscroll-behavior: contain; touch-action: pan-y; border-radius: 12px; }
.touch-ui #cacheoffer { padding-top: 16px !important; }
.touch-ui .window-header { margin: 0 -16px 16px; padding: 10px 16px; }
.touch-ui .window-header h2 { font-size: 23px; }
.touch-ui .system-panel button, .touch-ui #areamap button, .touch-ui #cacheoffer button { min-height: 44px; min-width: 44px; }
.touch-ui .item-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.touch-ui .item-detail { flex-direction: column; }
.touch-ui .item-detail .item-actions, .touch-ui .binds { flex-wrap: wrap; }
.touch-ui .shop-row { grid-template-columns: 44px minmax(0,1fr) auto; gap: 8px !important; }
.touch-ui .shop-row .item-art { width: 40px; height: 40px; }
.touch-ui .shop-row button { grid-column: 2 / -1; }
.touch-ui #maplandmarks { grid-template-columns: 1fr; }
.touch-ui #tooltip { display: none !important; }
.touch-ui body[data-panel] #touch-deck, .touch-ui body[data-panel] #touch-tip, .touch-ui body[data-panel] #actiondock,
.touch-ui body[data-panel] #touch-challenge,
.touch-ui .touch-menu-open #touch-deck, .touch-ui .touch-menu-open #touch-tip,
.touch-ui .chat-open #touch-deck, .touch-ui .chat-open #touch-tip, .touch-ui .chat-open #actiondock { visibility: hidden; }
@media (orientation: landscape) {
  .touch-ui { --deck: 0px; }
  .touch-ui #game { height: 100%; }
  .touch-ui #touch-deck { height: 160px; background: linear-gradient(180deg,transparent,var(--scrim)); border: 0; }
  .touch-ui #touch-stick { bottom: calc(14px + var(--safe-bottom)); }
  .touch-ui #actiondock { bottom: calc(12px + var(--safe-bottom)); }
  .touch-ui #touch-tip { bottom: calc(72px + var(--safe-bottom)); }
  .touch-ui #locationhud { top: calc(9px + var(--safe-top)); left: 50%; right: auto; transform: translateX(-50%); width: 180px; }
  .touch-ui #questmark { top: calc(90px + var(--safe-top)); right: 50%; transform: translateX(50%); max-width: 38vw; }
  .touch-ui #feedback { bottom: calc(72px + var(--safe-bottom)); max-width: 40vw; }
  .touch-ui #touch-challenge { top: calc(88px + var(--safe-top)); bottom: auto; max-width: 38vw; }
  .touch-ui #chat { left: calc(10px + var(--safe-left)); top: calc(184px + var(--safe-top)); bottom: auto; width: 156px; max-height: 28px; }
  .touch-ui #net { bottom: 1px; left: calc(10px + var(--safe-left)); }
  .touch-ui #systemwindow, .touch-ui body:has(#questmark:not([hidden])) #systemwindow { top: calc(100px + var(--safe-top)); width: 260px; }
  .touch-ui .touch-world-open #worldrail, .touch-ui .touch-world-open #partyframes:not([hidden]) { top: 115px; max-height: calc(100dvh - 140px); }
  .touch-ui #landing .landing-stage { display: grid; grid-template-columns: 1fr minmax(280px,360px); gap: 18px 30px; padding: 24px; }
  .touch-ui #landing .landing-intro { align-self: center; }
  .touch-ui #landing .title { font-size: clamp(36px,7vw,70px); }
  .touch-ui #landing .browser-note { grid-column: 1; grid-row: 2; margin: 0; text-align: center; }
  .touch-ui #landing .login-card { grid-column: 2; grid-row: 1 / 3; padding: 18px 22px; }
  .touch-ui #landing .adventure-features { grid-column: 1 / -1; justify-self: center; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .touch-ui #landing .landing-topbar { min-height: 48px; padding-top: 5px; padding-bottom: 5px; }
  .touch-ui #landing .brand-copy strong { font-size: 24px; }
  .touch-ui #landing .landing-stage { padding: 12px 24px; }
  .touch-ui #landing .login-card { padding: 14px 20px; }
  .touch-ui #landing .login-header { margin-bottom: 10px; }
  .touch-ui #landing .login-header h2 { font-size: 24px; line-height: 1.1; }
  .touch-ui #landing .login-note, .touch-ui #landing .field-help, .touch-ui #landing .login-header > p { display: none; }
  .touch-ui #landing #loginform { gap: 7px; }
  .touch-ui #landing .field { gap: 4px; }
  .touch-ui #landing .field label { line-height: 1.3; }
  .touch-ui #landing .btns { gap: 7px; }
  .touch-ui #landing input, .touch-ui #landing .btns button { min-height: 44px; }
}
@media (max-width: 359px) and (orientation: portrait) {
  .touch-ui #touch-stick { left: 10px; width: 120px; height: 120px; }
  .touch-ui .stick-up, .touch-ui .stick-down { left: 52px; }
  .touch-ui .stick-left, .touch-ui .stick-right { top: 46px; }
  .touch-ui #touch-actions { right: 8px; }
  .touch-ui #touch-toolbar span { font-size: 10px; }
  .touch-ui #touch-toolbar button { padding: 5px; }
  .touch-ui #resourceband { width: 142px; }
}