/* Theme variables */
:root {
  --bg:#05080d;
  --panel:#0b121b;
  --panel2:#101a26;
  --line:#213247;
  --text:#eaf6ff;
  --muted:#7f98aa;
  --cyan:#35e7ff;
  --pink:#ff3cac;
  --green:#6dff9b;
  --amber:#ffd166;
  --danger:#ff5d73;
  --shadow:0 0 28px rgba(53,
  231,
  255,
  .12)
}
* {
  box-sizing:border-box
}
html,
body,
#app {
  margin:0;
  min-height:100%;
  background:radial-gradient(circle at 20% -10%,
  #10293a 0,
  transparent 32%),
  var(--bg);
  color:var(--text);
  font-family:Inter,
  ui-sans-serif,
  system-ui,
  -apple-system,
  Segoe UI,
  sans-serif
}
button,
input,
select {
  font:inherit
}
.app {
  min-height:100vh;
  padding-bottom:84px
}

/* Header and navigation */
.header {
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:rgba(5,
  8,
  13,
  .92);
  backdrop-filter:blur(14px)
}
.logo {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid var(--cyan);
  clip-path:polygon(25% 0,
  75% 0,
  100% 25%,
  100% 75%,
  75% 100%,
  25% 100%,
  0 75%,
  0 25%);
  box-shadow:0 0 18px rgba(53,
  231,
  255,
  .35);
  color:var(--cyan);
  font-weight:900
}
.title {
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase
}
.subtitle {
  font-size:11px;
  color:var(--muted);
  letter-spacing:.16em
}
.spacer {
  flex:1
}
.icon-btn,
.btn {
  border:1px solid var(--line);
  background:#0b141f;
  color:var(--text);
  border-radius:11px;
  padding:13px 17px;
  min-height:46px;
  cursor:pointer;
  font-weight:700
}
.icon-btn {
  padding:11px 14px;
  min-width:46px
}
.favorite-btn {
  font-size:21px;
  line-height:1;
  padding:9px 12px;
  min-width:46px
}
.favorite-btn.active {
  border-color:var(--amber);
  color:var(--amber);
  background:rgba(255,
  196,
  72,
  .08)
}
.btn:hover,
.icon-btn:hover {
  border-color:var(--cyan)
}
.btn.primary {
  background:linear-gradient(135deg,
  #0d6070,
  #103246);
  border-color:var(--cyan);
  box-shadow:var(--shadow)
}
.btn.pink {
  border-color:var(--pink);
  color:#ffdff2
}
.btn.danger {
  border-color:var(--danger);
  color:#ffdce1
}
.btn:disabled {
  opacity:.4;
  cursor:not-allowed
}
.main {
  max-width:1100px;
  margin:auto;
  padding:18px 14px
}
.hero h1 {
  margin:0 0 4px;
  font-size:clamp(26px,
  5vw,
  42px)
}
.eyebrow {
  color:var(--cyan);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:11px;
  font-weight:800
}
.grid {
  display:grid;
  gap:14px
}
.cols-2 {
  grid-template-columns:repeat(2,
  minmax(0,
  1fr))
}
.cols-4 {
  grid-template-columns:repeat(auto-fit,
  minmax(145px,
  1fr))
}

/* Shared cards and layout components */
.card {
  background:linear-gradient(180deg,
  rgba(16,
  26,
  38,
  .96),
  rgba(8,
  14,
  22,
  .96));
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shadow)
}
.card h2,
.card h3 {
  margin:0 0 10px
}
.muted {
  color:var(--muted)
}
.metric {
  padding:14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#08111a;
  cursor:pointer
}
.metric strong {
  display:block;
  font-size:24px;
  color:var(--cyan)
}
.metric.active {
  border-color:var(--pink);
  box-shadow:0 0 16px rgba(255,
  60,
  172,
  .16)
}
.node-row,
.battle-row,
.activity-row {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:12px 0;
  border-bottom:1px solid rgba(33,
  50,
  71,
  .7)
}
.node-row:last-child,
.battle-row:last-child,
.activity-row:last-child {
  border-bottom:0
}
.node-avatar {
  width:42px;
  height:42px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#091e2a;
  border:1px solid #1e6674;
  color:var(--cyan);
  font-weight:800
}
.node-main {
  min-width:0;
  flex:1
}
.node-name {
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.node-meta {
  font-size:12px;
  color:var(--muted)
}
.badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 8px;
  font-size:11px;
  color:var(--muted)
}
.badge.turn {
  border-color:var(--amber);
  color:var(--amber)
}
.badge.invite {
  border-color:var(--pink);
  color:#ffcce9
}
.badge.active {
  border-color:var(--green);
  color:var(--green)
}
.search {
  width:100%;
  padding:15px 16px;
  min-height:50px;
  border-radius:11px;
  border:1px solid var(--line);
  background:#071019;
  color:var(--text);
  outline:none
}
.search:focus {
  border-color:var(--cyan)
}
.pager {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:14px
}
.bottom-nav {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:25;
  display:grid;
  grid-template-columns:repeat(3,
  1fr);
  padding:8px max(8px,
  env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,
  env(safe-area-inset-left));
  background:rgba(5,
  8,
  13,
  .94);
  border-top:1px solid var(--line);
  backdrop-filter:blur(14px)
}
.nav-btn {
  border:0;
  background:transparent;
  color:var(--muted);
  padding:12px 8px;
  min-height:58px;
  border-radius:10px;
  cursor:pointer
}
.nav-btn.active {
  color:var(--cyan);
  background:#0c1c28
}
.nav-btn span {
  display:block;
  font-size:11px;
  margin-top:3px
}
.arena {
  max-width:720px;
  margin:auto;
  padding-bottom:112px
}
.arena-head {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px
}

/* Battle arena */
.board-wrap {
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:#08101a;
  margin-bottom:12px
}
.board-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:9px
}
.board {
  display:grid;
  grid-template-columns:repeat(8,
  1fr);
  gap:4px;
  width:min(100%,
  560px);
  margin:auto;
  aspect-ratio:1
}
.cell {
  border:1px solid #28425a;
  background:#0a1926;
  border-radius:5px;
  cursor:pointer;
  min-width:0;
  position:relative
}
.cell:hover {
  border-color:var(--cyan)
}
.cell.shape {
  background:linear-gradient(135deg,
  #0c6b7c,
  #153b54);
  border-color:var(--cyan)
}
.cell.target {
  background:linear-gradient(135deg,
  #7c1f62,
  #3b1939);
  border-color:var(--pink)
}
.cell.miss:after,
.cell.hit:after {
  content:"";
  position:absolute;
  inset:30%;
  border-radius:50%
}
.cell.miss:after {
  background:#91a5b2
}
.cell.hit {
  background:#4a1420;
  border-color:var(--danger)
}
.cell.hit:after {
  background:var(--danger);
  box-shadow:0 0 10px var(--danger)
}
.cell.incoming {
  border-color:var(--amber)
}
.arena-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center
}
.sticky-battle-actions {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:24;
  padding:12px max(14px,
  env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(14px,
  env(safe-area-inset-left));
  background:rgba(5,
  8,
  13,
  .96);
  border-top:1px solid var(--line);
  backdrop-filter:blur(14px);
  box-shadow:0 -10px 30px rgba(0,
  0,
  0,
  .35)
}
.sticky-battle-actions .btn {
  min-width:150px
}
.notice {
  padding:10px 12px;
  border-left:3px solid var(--cyan);
  background:#091923;
  color:#bfeff6;
  border-radius:6px;
  margin:10px 0
}
.notice.warn {
  border-color:var(--amber);
  color:#ffe6a3
}
.notice.danger {
  border-color:var(--danger);
  color:#ffd8df
}
.logs {
  max-height:260px;
  overflow:auto;
  font:12px/1.45 ui-monospace,
  SFMono-Regular,
  Menlo,
  monospace;
  background:#04070b;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--line);
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.log-line {
  padding:4px 0;
  border-bottom:1px solid #101a24
}
.protocol {
  font:12px ui-monospace,
  SFMono-Regular,
  Menlo,
  monospace;
  color:#bff8ff;
  overflow-wrap:anywhere
}
.empty {
  text-align:center;
  padding:36px 16px;
  color:var(--muted)
}
.rules li {
  margin:8px 0
}
.demo-banner {
  border:1px solid var(--pink);
  color:#ffd5ed;
  background:rgba(255,
  60,
  172,
  .08);
  padding:10px 12px;
  border-radius:10px;
  margin-bottom:12px
}
.footer {
  text-align:center;
  color:var(--muted);
  font-size:12px;
  padding:22px;
  display: flex;
  justify-content: center;
}
.invite-toast {
  position:fixed;
  top:76px;
  left:50%;
  transform:translateX(-50%);
  z-index:60;
  width:min(620px,
  calc(100% - 24px));
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:linear-gradient(135deg,
  rgba(23,
  14,
  35,
  .98),
  rgba(8,
  22,
  31,
  .98));
  border:1px solid var(--pink);
  border-radius:14px;
  box-shadow:0 14px 45px rgba(0,
  0,
  0,
  .55),
  0 0 24px rgba(255,
  60,
  172,
  .18);
  backdrop-filter:blur(16px)
}
.invite-toast .node-main {
  min-width:0
}
.invite-toast-actions {
  display:flex;
  gap:8px;
  align-items:center
}

/* Modals, notices, and toast messages */
.modal {
  position:fixed;
  inset:0;
  z-index:50;
  display:grid;
  place-items:center;
  background:rgba(0,
  0,
  0,
  .72);
  padding:14px
}
.node-row.clickable {
  cursor:pointer
}
.node-row.clickable:hover {
  background:rgba(53,
  231,
  255,
  .035)
}
.danger-menu {
  position:relative
}
.danger-menu summary {
  list-style:none
}
.danger-menu summary::-webkit-details-marker {
  display:none
}
.danger-panel {
  position:absolute;
  right:0;
  top:52px;
  z-index:12;
  width:260px;
  padding:12px;
  background:#090f17;
  border:1px solid var(--danger);
  border-radius:12px;
  box-shadow:0 14px 40px rgba(0,
  0,
  0,
  .5)
}
.detail-grid {
  display:grid;
  grid-template-columns:repeat(2,
  minmax(0,
  1fr));
  gap:10px
}
.detail-item {
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#071019
}
.detail-item span {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:3px
}
.detail-item strong {
  overflow-wrap:anywhere
}
.modal-card {
  width:min(520px,
  100%);
  background:var(--panel);
  border:1px solid var(--pink);
  border-radius:16px;
  padding:18px;
  box-shadow:0 0 42px rgba(255,
  60,
  172,
  .2)
}
.footer-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
.footer-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.welcome-card {
  max-width:520px;
  line-height:1.6;
}
.welcome-card p {
  color:var(--muted);
}
.welcome-card strong {
  color:var(--cyan);
}
.welcome-brand {
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line)
}
.welcome-logo-row {
  display:flex;
  justify-content:center;
  align-items:center;
  margin:18px 0 8px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#071019
}
.welcome-logo {
  width:min(220px,
  72%);
  height:54px;
  object-fit:contain
}
.welcome-kicker {
  margin:0;
  color:var(--cyan);
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase
}
.welcome-card h2 {
  margin:2px 0 0;
  font-size:28px
}
.welcome-card h3 {
  margin:18px 0 6px;
  font-size:15px;
  color:var(--text)
}
.welcome-dismiss {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:18px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#071019;
  cursor:pointer
}
.welcome-dismiss input {
  margin-top:3px;
  accent-color:var(--cyan)
}
.welcome-dismiss span {
  font-size:13px;
  color:var(--muted)
}
.toast-stack {
  position:fixed;
  top:74px;
  left:50%;
  transform:translateX(-50%);
  z-index:70;
  width:min(480px,
  calc(100% - 24px));
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none
}
.toast-card {
  pointer-events:auto;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:13px 14px;
  background:linear-gradient(135deg,
  rgba(10,
  18,
  28,
  .98),
  rgba(8,
  13,
  21,
  .98));
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 14px 40px rgba(0,
  0,
  0,
  .52);
  backdrop-filter:blur(16px);
  animation:toastIn .2s ease-out
}
.toast-card.info {
  border-color:var(--cyan)
}
.toast-card.success {
  border-color:var(--green)
}
.toast-card.warn {
  border-color:var(--amber)
}
.toast-card.error {
  border-color:var(--danger)
}
.toast-card.invite {
  border-color:var(--pink)
}
.toast-icon {
  font-size:20px;
  line-height:1.2
}
.toast-body {
  min-width:0;
  flex:1
}
.toast-title {
  font-weight:900
}
.toast-message {
  font-size:12px;
  color:var(--muted);
  margin-top:3px
}
.toast-actions {
  display:flex;
  gap:7px;
  align-items:center;
  margin-top:9px
}
.toast-close {
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:20px;
  padding:0 2px
}
.confirm-card {
  width:min(440px,
  100%);
  background:var(--panel);
  border:1px solid var(--danger);
  border-radius:16px;
  padding:20px;
  box-shadow:0 20px 60px rgba(0,
  0,
  0,
  .65)
}
@keyframes toastIn {
  from {
    opacity:0;
    transform:translateY(-10px)
  }
  to {
    opacity:1;
    transform:none
  }
}

/* Responsive layouts */
@media(max-width:720px) {
  .cols-2,
  .cols-4 {
    grid-template-columns:1fr 1fr
  }
  .header .subtitle {
    display:none
  }
  .main {
    padding:12px 10px
  }
  .card {
    padding:13px
  }
  .node-row {
    align-items:flex-start
  }
  .node-row .btn {
    padding:11px 13px;
    font-size:13px;
    min-height:44px
  }
  .board {
    gap:3px
  }
  .board-wrap {
    padding:9px
  }
  .cell {
    border-radius:3px
  }
}
@media(max-width:420px) {
  .cols-4 {
    grid-template-columns:1fr 1fr
  }
  .header {
    padding:10px
  }
  .title {
    font-size:14px
  }
  .logo {
    width:35px;
    height:35px
  }
  .icon-btn {
    padding:8px
  }
  .metric strong {
    font-size:21px
  }
}
/* Desktop command-center layout */ .mobile-page-hidden {
  display:none
}
@media(min-width:1100px) {
  .app {
    padding-bottom:0
  }
  .main {
    max-width:1680px;
    padding:16px 18px
  }
  .bottom-nav {
    display:none
  }
  .desktop-dashboard {
    display:grid;
    grid-template-columns:minmax(290px,
    .8fr) minmax(440px,
    1.25fr) minmax(320px,
    .95fr);
    gap:16px;
    align-items:start
  }
  .desktop-dashboard>section {
    display:block!important;
    min-width:0;
    max-height:calc(100vh - 92px);
    overflow:auto;
    padding-right:3px;
    scrollbar-width:thin
  }
  .desktop-dashboard .hero {
    position:sticky;
    top:0;
    z-index:4;
    padding:4px 0 9px;
  }
  .desktop-dashboard .hero h1 {
    font-size:28px
  }
  .desktop-dashboard .card {
    padding:14px
  }
  .desktop-dashboard .cols-4 {
    grid-template-columns:repeat(2,
    minmax(0,
    1fr))
  }
  .desktop-dashboard .node-row {
    gap:8px
  }
  .desktop-dashboard .node-row .btn {
    padding:10px 12px;
    min-height:42px
  }
  .desktop-dashboard .footer {
    padding:14px
  }
  .arena {
    max-width:none;
    height:calc(100vh - 78px);
    padding:0;
    display:grid;
    grid-template-columns:minmax(0,
    1fr) minmax(0,
    1fr);
    grid-template-rows:auto auto minmax(0,
    1fr) auto;
    gap:10px;
    overflow:hidden
  }
  .arena-head,
  .arena>.notice,
  .arena>.sticky-battle-actions,
  .arena>details {
    grid-column:1/-1
  }
  .arena-head {
    margin:0
  }
  .arena>.notice {
    margin:0
  }
  .arena>.board-wrap {
    margin:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    padding:10px
  }
  .arena>.board-wrap .board {
    width:min(100%,
    calc(100vh - 250px));
    max-width:560px;
    max-height:calc(100vh - 250px)
  }
  .sticky-battle-actions {
    position:static;
    padding:8px;
    background:rgba(8,
    14,
    22,
    .96);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:none
  }
  .arena>details {
    margin:0!important;
    max-height:42px;
    overflow:hidden
  }
  .arena>details[open] {
    position:fixed;
    right:18px;
    bottom:18px;
    width:min(620px,
    45vw);
    max-height:55vh;
    overflow:auto;
    z-index:35
  }
}
@media(max-width:1099px) {
  .desktop-dashboard {
    display:block
  }
  .desktop-dashboard>section.mobile-page-hidden {
    display:none
  }
}


/* Browser-provided PWA install action. Hidden until installation is available. */
.pwa-install-button {
  position: fixed;
  right: 16px;
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 80;
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  background: linear-gradient(135deg, #0d6070, #103246);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), var(--shadow);
}

.pwa-install-button:hover {
  transform: translateY(-1px);
}

@media (min-width: 1100px) {
  .pwa-install-button {
    bottom: 18px;
  }
}