*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* Prevent 300ms tap delay on all interactive elements without disabling gestures */
button, input, select, textarea, [onclick], .tog, .action-pip, .weapon-card, .med-member, .cond-badge, .cond-x, .has-tooltip {
  touch-action: manipulation;
}
:root {
  /* Backgrounds — deep navy scale */
  --bg:        #0d1117;
  --bg2:       #161b24;
  --bg3:       #1c2333;
  --bg4:       #242d40;
  /* Borders */
  --border:    #2a3650;
  --border2:   #3a4f72;
  /* Blue accent — primary brand color, WCAG AA on dark backgrounds */
  --blue:      #4a9eff;
  --blue-dim:  #2563a8;
  --blue-muted:#1e3a5f;
  /* Amber — secondary accent for numbers/stats */
  --amber:     #f0a430;
  --amber-dim: #8a5c10;
  /* Red / Green — semantic */
  --red:       #e05252;
  --red-b:     #ff7070;
  --green:     #2d8a4e;
  --green-b:   #4ec87a;
  /* Text — high contrast on dark bg */
  --text:      #e2e8f4;   /* ~14:1 on --bg  */
  --text2:     #a8b8cc;   /* ~7:1  on --bg  */
  --text3:     #6e8097;   /* ~4.5:1 on --bg (hints/labels/muted) */
  /* HP bar */
  --hp-full:   #2d8a4e;
  --hp-mid:    #d48a10;
  --hp-low:    #c03030;
}
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  min-width: 330px;
}

/* Shell: centred column that owns the full height */
#shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 330px;
  max-width: 700px;
  height: 100%;
  background: var(--bg);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

@media (min-width: 701px) {
  body { background: #080c12; }
}

/* Two-column card grid on wider panels */
@media (min-width: 520px) {
  .panel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .panel-cols .card { margin-bottom: 0; }
  .panel-cols .card-full { grid-column: 1 / -1; }
}
@media (max-width: 519px) {
  .panel-cols { display: block; }
  .panel-cols .card { margin-bottom: 10px; }
}

/* Loading */
#loading {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px;
  background: var(--bg); z-index: 999;
}
#loading .spin {
  width: 32px; height: 32px; border: 2px solid var(--border2);
  border-top-color: var(--blue); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loading p { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px; color: var(--text3); letter-spacing: 1px; }


/* Header: flex child of shell, never scrolls */
#header {
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0;
}
/* Top identity row: avatar + name/hp block */
.hdr-top {
  display: flex;
  align-items: stretch;
  gap: 0;
}
/* Avatar */
.hdr-avatar {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  background: var(--bg3);
  border-right: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.hdr-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  border-radius: 50%;
  border: 2px solid var(--blue-dim);
  box-shadow: 0 0 0 1px var(--bg3) inset;
  display: block;
}
.hdr-avatar svg { width: 100%; height: 100%; display: block; }
/* Right side: name, subtitle, HP bar + controls */
.hdr-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 10px 6px;
  gap: 3px;
}
.char-name {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 15px; color: var(--blue); letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.char-sub {
  font-size: 10px; color: var(--text3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* HP row: bar + number side by side */
.hp-bar-row {
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
}
.hp-nums {
  font-family: 'DM Mono', monospace; font-weight: 600;
  font-size: 13px; white-space: nowrap;
}
.hp-nums .cur { color: var(--blue); }
.hp-bar-wrap {
  flex: 1; height: 7px; border-radius: 4px;
  border: 1px solid var(--border); overflow: hidden; background: var(--bg4);
}
.hp-bar-track { display: flex; height: 100%; width: 100%; }
.hp-bar-seg { height: 100%; transition: width 0.3s, background 0.3s; flex-shrink: 0; }
.hp-bar-temp { background: var(--blue); opacity: 0.85; }
/* Control row: amount input + 4 buttons — all fit at 360px min width */
/* Both HP strips (Saske header + Haki companion) share this */
.hp-strip {
  display: flex;
  align-items: stretch;
  gap: 3px;
  padding: 5px 8px 6px;
  border-top: 1px solid var(--border);
  max-width: 600px;
}
.hp-strip .hp-in,
.hp-strip .strip-btn,
.tmp-strip .hp-in,
.tmp-strip .strip-btn {
  flex: 1;
  min-width: 0;
}
.hp-strip .strip-btn {
  padding: 5px 2px;
  text-align: center;
}

/* Temp HP — inline collapsible row */
.tmp-strip {
  display: flex; align-items: stretch; gap: 3px;
  padding: 5px 8px 6px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  max-width: 600px;
}
.tmp-label { font-size: 10px; font-weight: 600; color: var(--blue); letter-spacing: 0.04em; white-space: nowrap; }
.tmp-current { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--blue); font-weight: 500; min-width: 24px; }
.strip-btn.tmp-set { border-color: var(--blue); color: var(--blue); }
.strip-btn.tmp-clr { border-color: var(--border2); color: var(--text3); }
/* Temp HP toggle — highlights when temp HP is active */
.strip-btn.tmp-toggle { border-color: var(--border2); color: var(--text3); }
.strip-btn.tmp-toggle.tmp-toggle-active { border-color: var(--blue); color: var(--blue); background: var(--blue-muted); }
.btn.tmp-toggle { border-color: var(--border2); color: var(--text3); }
.btn.tmp-toggle.tmp-toggle-active { border-color: var(--blue); color: var(--blue); background: var(--blue-muted); }
.strip-btn {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px;
  border: 1px solid var(--border2); background: var(--bg3); color: var(--text);
  padding: 5px 4px; border-radius: 4px; cursor: pointer; white-space: nowrap;
  text-align: center;
}
.strip-btn:active { background: var(--bg4); }
.strip-btn.dmg  { border-color: var(--red);   color: var(--red-b);   }
.strip-btn.heal { border-color: var(--green);  color: var(--green-b); }
.hp-in {
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 3px; color: var(--text); font-family: 'Inter', sans-serif;
  font-size: 16px; font-weight: 600; text-align: center; padding: 3px 2px;
  /* font-size: 16px prevents iOS zoom on focus */
}
.hp-in:focus { outline: 2px solid var(--blue-dim); outline-offset: 1px; }

/* Disabled state — applies to all interactive elements */
button:disabled, input:disabled, select:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
#tabs { display: flex; border-top: 1px solid var(--border); }
.tab {
  flex: 1; text-align: center; padding: 5px 2px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 9px; letter-spacing: 0.5px;
  color: var(--text3); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s; user-select: none;
}
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }

/* ── Panels ── */
#panels { flex: 1; overflow: hidden; min-height: 0; }
.panels-track { display: flex; height: 100%; transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); will-change: transform; }
.panel { flex: 0 0 100%; width: 100%; height: 100%; overflow-y: auto; padding: 12px 14px 40px; -webkit-overflow-scrolling: touch; }

@media (pointer: coarse) {
  .tab {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .strip-btn,
  .hp-in,
  .btn,
  .text-in,
  .cond-select,
  .cond-level-input {
    min-height: 40px;
  }
  .tog {
    width: 48px;
    height: 28px;
    border-radius: 14px;
  }
  .tog-knob {
    width: 24px;
    height: 24px;
  }
  .tog.on .tog-knob { left: 21px; }
}