/* ═══════════════════════════════════════════════════════════════════════
   DBTS MOBILE LAYOUT (V 0.359)

   Every rule in this file is scoped to html.dbts-mobile, which is only set
   by scripts/mobile/dbts-mobile.js when a phone is detected. On a PC none
   of these selectors can match, so the desktop layout is unaffected.

   Sizes inside #gameComposition are authored in the 2048 × 964 stage and
   scaled down with it (roughly ×0.36–0.41 on a landscape phone), which is
   why text sizes here look large.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Global touch behaviour ─────────────────────────────────────────── */
html.dbts-mobile,
html.dbts-mobile body {
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.dbts-mobile body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
html.dbts-mobile input,
html.dbts-mobile textarea,
html.dbts-mobile [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
html.dbts-mobile img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
html.dbts-mobile #viewport,
html.dbts-mobile #table,
html.dbts-mobile #table .card,
html.dbts-mobile #handBrowserOverlay,
html.dbts-mobile #handDock,
html.dbts-mobile .hand-card,
html.dbts-mobile #opponentHandDock {
  touch-action: none;
}
html.dbts-mobile button { touch-action: manipulation; }

/* Hover-only desktop helpers have no meaning on touch. */
html.dbts-mobile #stackTooltip,
html.dbts-mobile .playmat-build,
html.dbts-mobile #spectatorHud,
html.dbts-mobile .hud-live,
html.dbts-mobile .game-icon-tooltip::after {
  display: none !important;
}

/* ── Rotate-your-phone screen ───────────────────────────────────────── */
#dbtsRotateOverlay { display: none; }
@media (orientation: portrait) {
  html.dbts-mobile #dbtsRotateOverlay {
    position: fixed; inset: 0; z-index: 2147483000;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: radial-gradient(ellipse at 50% 40%, #13224a 0%, #050914 70%);
    color: #fff; text-align: center; padding: 24px;
  }
}
html.dbts-mobile .dbts-rotate-phone {
  width: 54px; height: 92px; border: 4px solid #ffd66b; border-radius: 12px;
  position: relative; animation: dbtsRotatePhone 2.2s ease-in-out infinite;
  box-shadow: 0 0 24px rgba(255, 190, 70, .45);
}
html.dbts-mobile .dbts-rotate-phone span {
  position: absolute; left: 50%; bottom: 6px; width: 14px; height: 4px; margin-left: -7px;
  border-radius: 2px; background: #ffd66b;
}
html.dbts-mobile .dbts-rotate-title {
  font: italic 800 26px/1 var(--f-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase;
}
html.dbts-mobile .dbts-rotate-sub { color: rgba(200, 215, 255, .7); font: 600 15px/1.3 var(--f-ui, sans-serif); letter-spacing: .06em; }
@keyframes dbtsRotatePhone {
  0%, 20% { transform: rotate(0deg); }
  55%, 80% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}

/* ── Field switch animation ─────────────────────────────────────────── */
html.dbts-mobile.dbts-view-anim #table {
  transition: transform .42s cubic-bezier(.2, .8, .2, 1) !important;
}

/* ── Top bar ────────────────────────────────────────────────────────── */
#dbtsMobileBar { display: none; }
html.dbts-mobile #dbtsMobileBar {
  display: block;
  position: absolute; left: 0; top: 0; width: 2048px; height: 104px;
  z-index: 9240; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 8, 22, .96), rgba(4, 8, 22, .82));
  box-shadow: 0 1px 0 rgba(120, 170, 255, .22), 0 10px 30px rgba(0, 0, 0, .45);
}

/* Field switch — the big arrow in the middle of the top bar */
html.dbts-mobile #dbtsFieldSwitch {
  --sw-rgb: 60, 160, 255;
  position: absolute; left: 1218px; top: 10px; width: 392px; height: 84px;
  display: flex; align-items: center; gap: 18px; padding: 0 24px 0 20px;
  border: 0; border-radius: 0; cursor: pointer; pointer-events: auto;
  color: #fff; text-align: left;
  background:
    linear-gradient(135deg, rgba(var(--sw-rgb), .42), rgba(var(--sw-rgb), .08) 60%),
    linear-gradient(180deg, rgba(16, 30, 68, .98), rgba(5, 10, 26, .98));
  box-shadow: inset 0 0 0 2px rgba(var(--sw-rgb), .85), 0 0 26px rgba(var(--sw-rgb), .35);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  transition: transform .12s ease, filter .12s ease;
}
html.dbts-mobile #dbtsFieldSwitch[data-target="p1"] { --sw-rgb: 255, 64, 64; }
html.dbts-mobile #dbtsFieldSwitch[data-target="p2"] { --sw-rgb: 60, 160, 255; }
html.dbts-mobile #dbtsFieldSwitch:active { transform: scale(.97); filter: brightness(1.25); }
html.dbts-mobile .dbts-switch-arrow {
  flex: none; width: 0; height: 0;
  border-left: 26px solid transparent; border-right: 26px solid transparent;
  border-bottom: 32px solid rgb(var(--sw-rgb));
  filter: drop-shadow(0 0 10px rgba(var(--sw-rgb), .9));
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
html.dbts-mobile #dbtsFieldSwitch[data-dir="down"] .dbts-switch-arrow { transform: rotate(180deg); }
html.dbts-mobile .dbts-switch-text { display: grid; gap: 6px; min-width: 0; }
html.dbts-mobile .dbts-switch-label {
  font: italic 800 34px/1 var(--f-ui, sans-serif); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dbts-mobile .dbts-switch-sub {
  color: rgba(210, 225, 255, .75); font: 700 20px/1 var(--f-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
}
html.dbts-mobile .dbts-switch-ping {
  position: absolute; right: 16px; top: 14px; width: 18px; height: 18px; border-radius: 50%;
  background: #ffd66b; box-shadow: 0 0 14px #ffb341; opacity: 0; transform: scale(.4);
}
html.dbts-mobile #dbtsFieldSwitch.has-activity .dbts-switch-ping { opacity: 1; transform: scale(1); animation: dbtsPing 1.1s ease-in-out infinite; }
html.dbts-mobile #dbtsFieldSwitch.has-activity { animation: dbtsSwitchNudge .9s ease-out 1; }
@keyframes dbtsPing { 0%, 100% { box-shadow: 0 0 6px #ffb341; } 50% { box-shadow: 0 0 22px 6px #ffb341; } }
@keyframes dbtsSwitchNudge {
  0% { filter: brightness(1); } 30% { filter: brightness(1.7); } 100% { filter: brightness(1); }
}

/* Latest opponent action, shown under the bar while you view your field */
html.dbts-mobile #dbtsActivityTicker {
  --tk-rgb: 60, 160, 255;
  position: absolute; left: 50%; top: 114px; max-width: 1100px;
  transform: translate(-50%, -12px); opacity: 0;
  padding: 12px 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #fff; font: 700 28px/1.1 var(--f-ui, sans-serif); letter-spacing: .03em;
  background: rgba(5, 10, 26, .94);
  box-shadow: inset 0 0 0 2px rgba(var(--tk-rgb), .7), 0 8px 24px rgba(0, 0, 0, .5);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: opacity .2s ease, transform .25s ease;
  pointer-events: none;
}
html.dbts-mobile #dbtsActivityTicker[data-seat="p1"] { --tk-rgb: 255, 64, 64; }
html.dbts-mobile #dbtsActivityTicker.show { opacity: 1; transform: translate(-50%, 0); }

/* Toolbar icons — bigger touch targets, left end of the bar */
html.dbts-mobile .settings-button,
html.dbts-mobile .multiplayer-button,
html.dbts-mobile .change-seat-button,
html.dbts-mobile .chat-history-toggle-button {
  top: 14px !important;
  width: 76px !important; height: 76px !important;
  z-index: 9300 !important;
}
html.dbts-mobile #settingsButton { left: 14px !important; }
html.dbts-mobile #multiplayerButton { left: 100px !important; }
html.dbts-mobile #changeSeatButton { left: 186px !important; }
html.dbts-mobile #chatHistoryToggleButton { left: 272px !important; }
html.dbts-mobile .settings-button img,
html.dbts-mobile .multiplayer-button img,
html.dbts-mobile .change-seat-button img,
html.dbts-mobile .chat-history-toggle-button img {
  width: 38px !important; height: 38px !important;
}
html.dbts-mobile #spectatorIndicator { top: 116px !important; left: 14px !important; }

/* ── Player HUD: only the field on screen, as one compact row ───────── */
html.dbts-mobile .hud-plates {
  left: 366px !important; top: 10px !important;
  width: 836px !important; height: 84px !important;
  z-index: 9260 !important;
}
html.dbts-mobile[data-dbts-view="mine"] .hud-plate[data-pos="top"],
html.dbts-mobile[data-dbts-view="opp"] .hud-plate[data-pos="bottom"] {
  display: none !important;
}
html.dbts-mobile .hud-plate {
  top: 0 !important; bottom: auto !important; left: 0 !important;
  width: 836px !important; height: 84px !important;
  padding: 8px 14px !important;
  display: grid !important;
  grid-template-columns: 210px 132px 1fr;
  align-items: center; column-gap: 12px;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px) !important;
}
html.dbts-mobile .hud-plate-head { margin: 0 !important; align-items: center; gap: 10px; min-width: 0; }
html.dbts-mobile .hud-seat-gem { width: 16px; height: 16px; }
html.dbts-mobile .hud-identity { gap: 6px; }
html.dbts-mobile .hud-name { font-size: 26px !important; }
html.dbts-mobile .hud-player-name { font-size: 20px !important; }
html.dbts-mobile .hud-tag { display: none; }
html.dbts-mobile .hud-life {
  display: flex !important; align-items: baseline; gap: 10px;
  padding: 0 !important; border: 0 !important;
}
html.dbts-mobile .hud-life-label { font-size: 18px !important; letter-spacing: .16em !important; grid-column: auto !important; }
html.dbts-mobile .hud-life-val { font-size: 58px !important; line-height: .9 !important; }
html.dbts-mobile .hud-life-pips,
html.dbts-mobile .hud-turn-flag { display: none !important; }
html.dbts-mobile .hud-stats {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 6px !important; padding: 0 !important;
}
html.dbts-mobile .hud-stat {
  flex-direction: column; align-items: center !important; justify-content: center !important;
  gap: 4px !important; padding: 6px 2px !important; min-width: 0;
}
html.dbts-mobile .hud-stat b { font-size: 15px !important; letter-spacing: .06em !important; white-space: nowrap; }
html.dbts-mobile .hud-stat span { font-size: 30px !important; }
html.dbts-mobile .hud-stat span small { font-size: 20px !important; }

/* ── Turn tracker: compact, right end of the bar ────────────────────── */
html.dbts-mobile #turnTracker.turn-tracker {
  left: 1622px !important; top: 10px !important; bottom: auto !important; right: auto !important;
  width: 412px !important; height: 84px !important;
  padding: 8px 10px !important;
  grid-template-columns: 104px 1fr !important; gap: 10px !important;
  align-items: center; z-index: 9270 !important;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px) !important;
}
html.dbts-mobile .turn-head { flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
html.dbts-mobile .turn-kicker { font-size: 16px !important; letter-spacing: .2em !important; }
html.dbts-mobile .turn-num { font-size: 44px !important; }
html.dbts-mobile #turnTracker .turn-sub { display: none !important; }
html.dbts-mobile #endTurnButton {
  min-height: 66px !important; height: 66px; font-size: 30px !important; letter-spacing: .1em !important;
}

/* ── Your hand: always fully visible under your field ───────────────── */
html.dbts-mobile #handDock,
html.dbts-mobile #handDock.hand-drag-out {
  transform: translateY(0) !important;
}
html.dbts-mobile #handDock .hand-label { display: none; }
html.dbts-mobile .hand-card:hover,
html.dbts-mobile .hand-card.hand-hover { scale: 1 !important; --hand-shift-y: 0px !important; }
html.dbts-mobile #handBrowserOverlay {
  transition: opacity .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
html.dbts-mobile[data-dbts-view="opp"] #handBrowserOverlay {
  opacity: 0; pointer-events: none !important;
}
html.dbts-mobile[data-dbts-view="opp"] #handBrowserOverlay * { pointer-events: none !important; }

/* ── Opponent hand: only above their field ──────────────────────────── */
html.dbts-mobile #opponentHandDock {
  top: 112px !important; height: 138px !important;
  padding-top: 0 !important;
  transition: opacity .25s ease;
}
html.dbts-mobile #opponentFan {
  transform: scale(1.55); transform-origin: top center;
}
html.dbts-mobile #opponentHandCount { display: none !important; }
html.dbts-mobile[data-dbts-view="mine"] #opponentHandDock {
  opacity: 0; visibility: hidden; pointer-events: none !important;
}

/* ── Playmat readability ────────────────────────────────────────────── */
html.dbts-mobile .zone-label-overlay { font-size: 16px !important; }

/* ── Chat & Game History: a drawer from the toolbar button ──────────── */
html.dbts-mobile .game-side-panels,
html.dbts-mobile #gameComposition .game-side-panels {
  left: 14px !important; top: 112px !important; bottom: 14px !important;
  width: 980px !important; min-width: 0 !important;
  z-index: 9700 !important;
  flex-direction: row !important; gap: 14px !important;
  padding: 14px; pointer-events: auto;
  background: rgba(3, 6, 18, .96);
  box-shadow: inset 0 0 0 2px rgba(120, 170, 255, .3), 0 20px 60px rgba(0, 0, 0, .7);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
html.dbts-mobile .game-side-panels > section { flex: 1 1 0 !important; min-width: 0; height: auto !important; }
html.dbts-mobile .game-history-head,
html.dbts-mobile .game-chat-head { font-size: 28px !important; padding: 14px 18px !important; }
html.dbts-mobile .game-history-messages,
html.dbts-mobile .game-chat-messages { font-size: 26px !important; line-height: 1.3 !important; }
html.dbts-mobile .game-history-line,
html.dbts-mobile .game-chat-line,
html.dbts-mobile .game-history-messages *,
html.dbts-mobile .game-chat-messages * { font-size: inherit !important; }
html.dbts-mobile .game-chat-compose { gap: 12px !important; padding: 12px !important; }
/* 48px keeps the computed size >= 16px, which stops iOS zooming on focus. */
html.dbts-mobile .game-chat-compose .game-chat-input { font-size: 48px !important; min-height: 76px !important; }
html.dbts-mobile .game-chat-compose .game-chat-send { font-size: 30px !important; min-height: 76px !important; padding: 0 26px !important; }

/* ── Menus and popups (screen-space, outside the scaled stage) ──────── */
html.dbts-mobile .context-menu {
  max-height: calc(100vh - 12px);
  max-height: calc(100dvh - 12px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
html.dbts-mobile .context-menu {
  min-width: 170px !important; max-width: min(250px, calc(100vw - 16px)) !important;
  padding: 4px 0 !important;
}
html.dbts-mobile .context-menu button {
  min-height: 30px !important;
  padding: 0 12px 0 14px !important;
  font-size: 13px !important; letter-spacing: .04em !important;
}
html.dbts-mobile .context-menu button:hover:not(:disabled) { padding-left: 14px !important; }
html.dbts-mobile .context-menu .menu-divider { margin: 3px 0 !important; }
/* Long menus become two columns so they fit a landscape phone's height. */
html.dbts-mobile .context-menu:has(button:nth-of-type(9)) {
  display: none;
  grid-template-columns: 1fr 1fr; column-gap: 2px;
  max-width: min(420px, calc(100vw - 16px)) !important; width: min(420px, calc(100vw - 16px));
}
html.dbts-mobile .context-menu:has(button:nth-of-type(9))[style*="display: block"] { display: grid !important; }
html.dbts-mobile .context-menu:has(button:nth-of-type(9)) .menu-divider { grid-column: 1 / -1; }

/* Chat / history drawer button (4th toolbar slot) */
#dbtsChatButton { display: none; }
html.dbts-mobile #dbtsChatButton {
  display: grid; place-items: center;
  position: absolute; left: 272px; top: 14px; width: 76px; height: 76px;
  padding: 0; border: 0; border-radius: 0; cursor: pointer; pointer-events: auto;
  color: #fff;
  background: var(--glass-soft, rgba(20, 34, 70, .7));
  box-shadow: inset 0 0 0 1px var(--line-2, rgba(120, 170, 255, .3)), inset 0 1px 0 rgba(255, 255, 255, .08);
}
html.dbts-mobile #dbtsChatButton svg { width: 40px; height: 40px; filter: drop-shadow(0 0 4px rgba(90, 200, 255, .5)); }
html.dbts-mobile #dbtsChatButton.is-open { box-shadow: inset 0 0 0 3px rgba(90, 200, 255, .9), 0 0 18px rgba(90, 200, 255, .45); }
html.dbts-mobile #dbtsChatButton:active { transform: scale(.94); }
html.dbts-mobile .dbts-chat-dot {
  position: absolute; right: 8px; top: 8px; width: 16px; height: 16px; border-radius: 50%;
  background: #ffd66b; box-shadow: 0 0 12px #ffb341; display: none;
}
html.dbts-mobile #dbtsChatButton.has-unread .dbts-chat-dot { display: block; animation: dbtsPing 1.1s ease-in-out infinite; }

/* The hand lives above the stage; tuck it away while the drawer is open. */
html.dbts-mobile body:not(.chat-history-hidden) #handBrowserOverlay {
  opacity: 0; pointer-events: none !important;
}
html.dbts-mobile body:not(.chat-history-hidden) #handBrowserOverlay * { pointer-events: none !important; }

/* ── Popups: desktop-sized windows, shrunk to fit a phone ───────────── */
html.dbts-mobile .settings-overlay,
html.dbts-mobile .multiplayer-overlay,
html.dbts-mobile .room-dialog-overlay,
html.dbts-mobile .board-sync-overlay,
html.dbts-mobile .dice-roll-overlay,
html.dbts-mobile .search-top-overlay,
html.dbts-mobile .deck-search-overlay,
html.dbts-mobile #deckImportPopup,
html.dbts-mobile #cardImportPopup,
html.dbts-mobile .card-modifier-overlay {
  padding: 8px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
html.dbts-mobile #settingsModal,
html.dbts-mobile #multiplayerModal,
html.dbts-mobile #changeSeatModal,
html.dbts-mobile .room-dialog,
html.dbts-mobile .board-sync-window,
html.dbts-mobile .dice-roll-modal,
html.dbts-mobile .search-top-modal,
html.dbts-mobile #deckImportModal,
html.dbts-mobile #cardImportModal,
html.dbts-mobile .card-modifier-modal,
html.dbts-mobile .player-profile-popup {
  zoom: .62;
  max-height: none !important;
  flex-shrink: 0;
}
html.dbts-mobile .deck-search-modal {
  zoom: .62;
  height: calc((100vh - 16px) / .62) !important;
  max-height: none !important;
}
html.dbts-mobile #settingsModal textarea,
html.dbts-mobile #settingsModal input:not([type="checkbox"]):not([type="range"]),
html.dbts-mobile #multiplayerModal input:not([type="checkbox"]),
html.dbts-mobile #deckImportModal textarea,
html.dbts-mobile #cardImportModal textarea,
html.dbts-mobile .deck-search-modal input,
html.dbts-mobile .search-top-modal input,
html.dbts-mobile .card-modifier-modal input {
  font-size: 26px !important; /* ×0.62 ≈ 16px: stops iOS zooming on focus */
}
html.dbts-mobile #toast { max-width: calc(100vw - 24px); }
/* Live deck / stack search keeps your hand usable under the panel. */
html.dbts-mobile .deck-search-overlay.card-search-active {
  align-items: flex-start !important;
  padding: 6px 8px calc(218px * var(--dbts-game-scale, .36) + 6px) !important;
}
html.dbts-mobile .deck-search-overlay.card-search-active .deck-search-modal {
  height: calc((100vh - 14px - 218px * var(--dbts-game-scale, .36)) / .62) !important;
}

/* Phone Layout setting (only injected on touch devices) */
.dbts-phone-layout-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dbts-phone-layout-setting select {
  min-width: 120px; padding: 6px 10px; font: inherit; color: #fff;
  background: rgba(8, 16, 40, .9); border: 1px solid rgba(120, 170, 255, .45); border-radius: 0;
}