/* Whisker Wars — phone layout.
   The in-match HUD gets .phone plus .portrait or .landscape; <html> gets .phone for the menus. */

.hud.phone { --pbg: rgba(30, 18, 44, .9); }
.hud.phone button { touch-action: manipulation; -webkit-touch-callout: none; }

/* ---------- top bar ---------- */
.hud.phone .ph-top {
  position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 6px;
  padding: calc(env(safe-area-inset-top) + 4px) calc(env(safe-area-inset-right) + 6px) 5px calc(env(safe-area-inset-left) + 6px);
  background: linear-gradient(rgba(30, 18, 44, .92), rgba(30, 18, 44, .7));
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.hud.phone .pcard { min-width: 0; max-width: 100%; gap: 6px; padding: 2px 8px 2px 2px; border-width: 2px; border-radius: 12px; box-shadow: none; backdrop-filter: none; }
.hud.phone .pcard.opp { padding: 2px 2px 2px 8px; }
.hud.phone .pcard .portrait { width: 30px; height: 30px; flex: 0 0 30px; box-shadow: 0 0 0 2px var(--tc); }
.hud.phone .pinfo { min-width: 0; }
.hud.phone .pname { font-size: 12px; max-width: 100%; }
.hud.phone .phero { display: none; }
.hud.phone .pmeta { font-size: 10px; gap: 5px; }
.hud.phone .pcard .stars { letter-spacing: 0; }
.hud.phone .hud-center { gap: 3px; }
.hud.phone .timer { font-size: 15px; min-width: 52px; padding: 0 6px; border-width: 1.5px; border-radius: 9px; }
.hud.phone .armybar { width: 26vw; max-width: 150px; height: 12px; border-width: 1.5px; }
.hud.phone .armybar span { font-size: 9px; }
.hud.phone .armybar .l { left: 4px; }
.hud.phone .armybar .r { right: 4px; }
.hud.phone .ph-top .rule-icons { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-size: 12px; }
.hud.phone .ping { top: calc(env(safe-area-inset-top) + 46px); right: 8px; font-size: 9px; }

/* ---------- dock ---------- */
.hud.phone .ph-dock { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
.hud.phone .ph-dock button, .hud.phone .ph-dock .pct { pointer-events: auto; }
.hud.phone .pct { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 3px; border-radius: 13px; background: rgba(255, 255, 255, .08); }
.hud.phone .pct-btn { min-width: 0; padding: 0; height: 36px; font-size: 16px; border-radius: 10px; }
.hud.phone .pct-btn small { font-size: 10px; opacity: .8; margin-left: 1px; }
.hud.phone .pct-btn.on { box-shadow: 0 2px 0 var(--pink-d); }
.hud.phone .mystat { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; font-weight: 700; font-size: 11px; line-height: 1.1; color: #fff; }
.hud.phone .mystat .stars { font-size: 11px; letter-spacing: 0; white-space: nowrap; }
.hud.phone .catnip { min-width: 0; width: 100%; height: 16px; border-width: 1.5px; }
.hud.phone .catnip-txt { font-size: 10px; }
.hud.phone .all-btn {
  height: 60px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .1); color: #fff;
  font-size: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; padding: 0; cursor: pointer;
}
.hud.phone .all-btn span { font-size: 10px; font-weight: 700; margin-top: 3px; letter-spacing: .5px; }
.hud.phone .all-btn.on { background: linear-gradient(#ffe07a, #ffb84d); border-color: #fff; color: #4a3200; box-shadow: 0 0 14px rgba(255, 210, 90, .7); }
.hud.phone .spells { display: flex; gap: 5px; }
.hud.phone .spell { width: 56px; height: 60px; border-radius: 14px; border-width: 2.5px; }
.hud.phone .spell:hover { transform: none; }
.hud.phone .spell:active { transform: scale(.93); }
.hud.phone .spell .sicon { font-size: 28px; }
.hud.phone .spell .scost { font-size: 10px; top: 2px; left: 3px; padding: 0 4px; }
.hud.phone .spell .scdtxt { font-size: 18px; }
.hud.phone .ph-actions { display: flex; flex-direction: column; gap: 4px; }
.hud.phone .ph-actions button {
  width: 36px; height: 28px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .1);
  color: #fff; font-size: 16px; padding: 0; line-height: 1; cursor: pointer;
}
.hud.phone .mystat .emote-pop { position: absolute; bottom: calc(100% + 70px); left: 0; transform: scale(0); white-space: nowrap; }
.hud.phone .mystat .emote-pop.show { animation: emotePop2 2.4s ease forwards; }

/* ---------- portrait: opponent at the top (like the field), you at the bottom ---------- */
.hud.phone.portrait .pcard.me { display: none; }
.hud.phone.portrait .pcard.opp { grid-column: 1; grid-row: 1; justify-self: start; flex-direction: row; padding: 2px 8px 2px 2px; text-align: left; }
.hud.phone.portrait .pcard.opp .pmeta { justify-content: flex-start; }
.hud.phone.portrait .hud-center { grid-column: 2; grid-row: 1; }
.hud.phone.portrait .ph-dock {
  display: flex; flex-direction: column; gap: 6px;
  padding: 7px calc(env(safe-area-inset-right) + 6px) calc(env(safe-area-inset-bottom) + 7px) calc(env(safe-area-inset-left) + 6px);
  background: linear-gradient(rgba(30, 18, 44, .78), rgba(30, 18, 44, .95) 40%);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .25);
}
.hud.phone.portrait .ph-row { display: flex; align-items: stretch; gap: 6px; }
.hud.phone.portrait .mystat { flex: 1 1 0; min-width: 56px; }
.hud.phone.portrait .all-btn { flex: 0 0 50px; }
.hud.phone.portrait .spells { flex: 0 0 auto; }

/* ---------- landscape: send buttons down the left edge, spells down the right edge ---------- */
.hud.phone.landscape .ph-top { padding-top: calc(env(safe-area-inset-top) + 3px); padding-bottom: 3px; }
.hud.phone.landscape .pcard.opp { justify-self: end; }
.hud.phone.landscape .ph-dock { top: 44px; }
.hud.phone.landscape .ph-row { position: static; }
.hud.phone.landscape .pct { position: absolute; left: calc(env(safe-area-inset-left) + 6px); top: calc(50% - 124px); grid-template-columns: 1fr; width: 56px; background: var(--pbg); }
.hud.phone.landscape .pct-btn { height: 42px; }
.hud.phone.landscape .all-btn { position: absolute; left: calc(env(safe-area-inset-left) + 6px); top: calc(50% + 74px); width: 56px; height: 50px; background: var(--pbg); }
.hud.phone.landscape .mystat { position: absolute; right: calc(env(safe-area-inset-right) + 6px); top: calc(50% - 126px); width: 58px; }
.hud.phone.landscape .mystat .stars, .hud.phone.landscape .mystat .bcount { display: none; }
.hud.phone.landscape .catnip { height: 20px; }
.hud.phone.landscape .spells { position: absolute; right: calc(env(safe-area-inset-right) + 6px); top: calc(50% - 98px); flex-direction: column; }
.hud.phone.landscape .spell { width: 58px; height: 54px; }
.hud.phone.landscape .ph-actions { position: absolute; right: calc(env(safe-area-inset-right) + 6px); top: calc(50% + 84px); flex-direction: row; gap: 4px; width: 58px; }
.hud.phone.landscape .ph-actions button { width: 27px; height: 36px; font-size: 15px; }
@media (max-height: 340px) {
  .hud.phone.landscape .pct-btn { height: 36px; }
  .hud.phone.landscape .pct { top: calc(50% - 108px); }
  .hud.phone.landscape .all-btn { top: calc(50% + 62px); height: 44px; }
  .hud.phone.landscape .spell { height: 48px; }
  .hud.phone.landscape .mystat { top: calc(50% - 112px); }
  .hud.phone.landscape .spells { top: calc(50% - 86px); }
  .hud.phone.landscape .ph-actions { top: calc(50% + 72px); }
}

/* ---------- overlays ---------- */
.hud.phone .toasts { top: calc(env(safe-area-inset-top) + 50px); gap: 4px; width: min(94vw, 420px); }
.hud.phone .toast { font-size: 12px; padding: 5px 10px; }
.hud.phone .targeting-hint {
  bottom: auto; top: calc(env(safe-area-inset-top) + 50px); display: flex; align-items: center; gap: 8px; white-space: normal;
  width: min(94vw, 420px); font-size: 14px; padding: 7px 8px 7px 12px; pointer-events: auto; z-index: 6;
}
.hud.phone .targeting-hint .th-t { flex: 1; }
.hud.phone .targeting-hint .th-d { font-size: 11px; opacity: .8; margin-top: 2px; }
.hud.phone .targeting-hint .th-x { flex: 0 0 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(74, 50, 0, .15); color: #4a3200; font-size: 18px; font-weight: 700; }
.hud.phone .spell-tip { width: min(92vw, 300px); left: 50% !important; transform: translateX(-50%); bottom: auto !important; top: calc(env(safe-area-inset-top) + 50px); }
.hud.phone .emote-wheel { right: 8px; bottom: calc(env(safe-area-inset-bottom) + 130px); grid-template-columns: repeat(4, 46px); }
.hud.phone .emote-wheel button { width: 46px; height: 46px; font-size: 24px; }
.hud.phone.landscape .emote-wheel { bottom: 10px; right: 76px; }
.hud.phone .bmenu { width: auto; padding: 6px; border-radius: 14px; }
.hud.phone .bmenu .bm-h { font-size: 12px; justify-content: center; margin-bottom: 4px; gap: 4px; }
.hud.phone .bmenu .bm-h .lv { font-size: 10px; }
.hud.phone .bm-row { display: flex; gap: 5px; }
.hud.phone .bm-row button {
  position: relative; width: 44px; height: 46px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 3px 0 #e2cfb8;
  font-size: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; padding: 0; color: var(--ink);
}
.hud.phone .bm-row button span { font-size: 10px; font-weight: 700; color: var(--ink2); margin-top: 2px; }
.hud.phone .bm-row .bm-up { width: 52px; background: linear-gradient(#8fe0a8, var(--mint)); box-shadow: 0 3px 0 var(--mint-d); color: #fff; font-weight: 700; }
.hud.phone .bm-row .bm-up span { color: #fff; }
.hud.phone .bm-row .bm-x { width: 32px; background: #f0e2cf; box-shadow: none; font-size: 14px; margin: 0; }
.hud.phone .bm-row .off { filter: grayscale(.8); opacity: .55; }
.hud.phone .cd-num { font-size: 120px; }
.hud.phone .banner-t { font-size: clamp(54px, 16vw, 120px); }
.hud.phone .banner-s { font-size: 16px; }
.hud.phone .pause-card { padding: 16px; gap: 10px; max-height: 90dvh; overflow-y: auto; }
.hud.phone .help-mini { font-size: 12px; }
.hud.phone .waiting-card { font-size: 15px; padding: 16px 18px; }

/* ---------- menus on phones ---------- */
/* Practice: keep Start Battle in reach instead of at the bottom of a long scroll */
html.phone .screens:has(.setup .btn.huge.start) { padding-bottom: calc(env(safe-area-inset-bottom) + 96px); }
html.phone .setup .btn.huge.start {
  position: fixed; left: calc(env(safe-area-inset-left) + 14px); right: calc(env(safe-area-inset-right) + 14px);
  bottom: calc(env(safe-area-inset-bottom) + 12px); z-index: 15; margin: 0; width: auto; box-shadow: 0 6px 0 var(--pink-d), 0 10px 30px rgba(0, 0, 0, .45);
}
html.phone .screens { padding-left: calc(env(safe-area-inset-left) + 12px); padding-right: calc(env(safe-area-inset-right) + 12px); }
html.phone .lobby-bar { padding-bottom: calc(env(safe-area-inset-bottom) + 10px); }