/* LøkkaMon — AliFilm glass chrome around a pixel game. Dark is the default. */

:root {
  --ground: #ffffff;
  --text: #1c2a5e;
  --text-muted: #6f82c8;
  --accent: #4a5c88;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.9);
  --border: rgba(28, 42, 94, 0.14);
  --rim: rgba(255, 255, 255, 0.9);
  --card: rgba(28, 42, 94, 0.05);
  --sel: #d61f4d;
  --sel-rgb: 214, 31, 77;
  --cta: linear-gradient(120deg, #f0334f, #8e0e3a);
  --toggle-on: #2a3a5e;
  --toggle-on-text: #ffffff;
  --pad: #e8ecf4;
  --pad-key: linear-gradient(180deg, #fcfdff, #e8ecf4 46%, #ccd4e2 54%, #eef2f8);
  --pad-text: #2b3a5e;
  --stage: #eef1f8;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
html[data-theme='dark'] {
  --ground: #000;
  --text: #f3f5fc;
  --text-muted: #b9c2dd;
  --accent: #c6cff5;
  --glass: rgba(10, 12, 20, 0.58);
  --glass-strong: rgba(16, 20, 32, 0.88);
  --border: rgba(255, 255, 255, 0.2);
  --rim: rgba(255, 255, 255, 0.22);
  --card: rgba(255, 255, 255, 0.05);
  --sel: #ff6b86;
  --sel-rgb: 255, 107, 134;
  --toggle-on: #e3e8ff;
  --toggle-on-text: #0a0c12;
  --pad: #0a0c12;
  --pad-key: linear-gradient(180deg, #2a2f3e, #1a1d28 50%, #12141c);
  --pad-text: #e3e8ff;
  --stage: #0a0c12;
}
html[data-theme='black'] {
  --ground: #000;
  --text: #fff;
  --text-muted: #cdd4e8;
  --accent: #d8def9;
  --glass: rgba(0, 0, 0, 0.72);
  --glass-strong: rgba(0, 0, 0, 0.92);
  --border: rgba(255, 255, 255, 0.24);
  --rim: rgba(255, 255, 255, 0.18);
  --card: rgba(255, 255, 255, 0.035);
  --sel: #ff6b86;
  --sel-rgb: 255, 107, 134;
  --toggle-on: #f0f3ff;
  --toggle-on-text: #000;
  --pad: #000;
  --pad-key: #000;
  --pad-text: #f0f3ff;
  --stage: #000;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ground);
  color: var(--text);
  font: 14px/1.4 var(--font);
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; cursor: pointer; }

#app {
  height: 100dvh;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* header */
.top {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
}
.brand { font-weight: 800; letter-spacing: 0.16em; font-size: 12px; }
.pill {
  margin-left: auto;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-muted);
}
.pill.live { color: var(--text); }
.pill.live::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #3fd07a; margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 6px #3fd07a; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--glass); border: 1px solid var(--border);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
}

/* the game frame */
#stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 16px; }
#frame {
  position: relative;
  width: min(100%, 960px, calc((100dvh - 120px) * 1.5));
  aspect-ratio: 3 / 2;
  container-type: inline-size;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px var(--border), 0 18px 50px rgba(0, 0, 0, 0.35);
}
#screen { width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.keys { font-size: 11px; color: var(--text-muted); margin: 10px 0 0; }

/* glass surface used inside the frame */
.glass, #dialog, .menu, .bcard, #banner {
  background: rgba(14, 16, 26, 0.78);
  color: #f3f5fc;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
}
html[data-theme='light'] #dialog, html[data-theme='light'] .menu, html[data-theme='light'] .bcard, html[data-theme='light'] #banner {
  background: rgba(255, 255, 255, 0.86); color: #1c2a5e; border-color: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 #fff, 0 8px 24px rgba(28, 42, 94, 0.25);
}
html[data-theme='black'] #dialog, html[data-theme='black'] .menu, html[data-theme='black'] .bcard, html[data-theme='black'] #banner {
  background: rgba(0, 0, 0, 0.86); border-color: rgba(255, 255, 255, 0.24); box-shadow: none;
}

#dialog {
  position: absolute; left: 2%; right: 2%; bottom: 3%;
  min-height: 25%;
  border-radius: 14px;
  padding: 2.2cqw 3cqw;
  font-size: clamp(11px, 3.4cqw, 21px); font-weight: 600; line-height: 1.35;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.15s, transform 0.2s cubic-bezier(0.34, 1.4, 0.55, 1);
}
#dialog.show { opacity: 1; transform: none; pointer-events: auto; }
#dialog .caret { position: absolute; right: 2.4cqw; bottom: 1.4cqw; font-size: 0.7em; opacity: 0; color: var(--sel); }
#dialog.waiting .caret { opacity: 1; animation: bob 0.7s infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }

#banner {
  position: absolute; left: 2.5%; top: 4%;
  padding: 1cqw 2.6cqw; border-radius: 999px;
  font-size: clamp(9px, 2.4cqw, 14px); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
}
#banner.show { animation: banner 2.6s ease forwards; }
@keyframes banner { 0% { opacity: 0; transform: translateY(-8px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
#fade.on { opacity: 1; }

/* menus inside the frame */
#overlay { position: absolute; inset: 0; pointer-events: none; }
#overlay > * { pointer-events: auto; }
.menu {
  position: absolute; right: 2%; bottom: 31%;
  min-width: 42%; max-width: 70%; max-height: 66%; overflow-y: auto;
  border-radius: 14px; padding: 1cqw;
  font-size: clamp(11px, 3cqw, 18px);
  animation: pop 0.22s cubic-bezier(0.34, 1.4, 0.55, 1);
}
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
.menu-title { font-size: 0.72em; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; padding: 0.6cqw 1.6cqw 0.8cqw; }
.menu-list { display: flex; flex-direction: column; gap: 2px; }
.menu-list.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8cqw; }
.menu-item {
  display: flex; align-items: baseline; gap: 2cqw;
  text-align: left; background: transparent; border: 1px solid transparent;
  padding: 1.2cqw 1.8cqw; border-radius: 999px; font-weight: 700;
}
.menu-item .sub { margin-left: auto; font-size: 0.75em; font-weight: 600; opacity: 0.65; white-space: nowrap; }
.menu-item.sel { background: rgba(var(--sel-rgb), 0.18); border-color: rgba(var(--sel-rgb), 0.7); box-shadow: 0 0 0 2px rgba(var(--sel-rgb), 0.15); }
.menu-item.sel .lbl::after { content: ' ◂'; color: var(--sel); font-size: 0.8em; }
.menu-item.disabled { opacity: 0.35; }
.menu-item.chip .lbl::before { content: ''; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--chip); margin-right: 0.5em; vertical-align: 0.05em; }

.menu.battle-menu { left: 2%; right: 2%; bottom: 3%; max-width: none; min-height: 25%; }
.menu.battle-menu .menu-item { border-color: rgba(255, 255, 255, 0.12); }
html[data-theme='light'] .menu.battle-menu .menu-item { border-color: rgba(28, 42, 94, 0.12); }
.menu.battle-menu .menu-item.sel { border-color: rgba(var(--sel-rgb), 0.7); }
.menu.title-menu { left: 50%; right: auto; transform: translateX(-50%); bottom: 6%; min-width: 46%; animation: none; }
.menu.title-menu .menu-item { justify-content: center; }
.menu.title-menu .menu-item .sub { margin-left: 0; }
.menu.side-menu { top: 4%; bottom: auto; right: 2%; min-width: 46%; }

/* battle HUD */
#battlehud { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.25s; }
#battlehud.show { opacity: 1; }
.bcard { position: absolute; border-radius: 14px; padding: 1.2cqw 2cqw 1.4cqw; width: 46%; font-size: clamp(10px, 2.8cqw, 17px); }
#card-foe { left: 3%; top: 5%; }
#card-me { right: 3%; top: 49%; }
body.tall .menu:not(.battle-menu):not(.title-menu):not(.side-menu) { bottom: 22%; }
.bcard .row1 { display: flex; align-items: baseline; gap: 1cqw; font-weight: 800; }
.bcard .lv { margin-left: auto; font-weight: 700; opacity: 0.75; font-size: 0.85em; }
.bcard .row2 { display: flex; justify-content: space-between; font-size: 0.8em; font-weight: 700; margin-top: 0.4cqw; opacity: 0.9; }
.bcard .status { font-size: 0.7em; font-weight: 800; letter-spacing: 0.1em; color: #b58cff; }
.types { display: flex; gap: 4px; margin: 0.4cqw 0 0.6cqw; flex-wrap: wrap; }
.type {
  display: inline-block; font-size: 0.68em; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.15em 0.6em; border-radius: 999px;
  background: color-mix(in srgb, var(--chip) 26%, transparent); border: 1px solid color-mix(in srgb, var(--chip) 70%, transparent);
}
.hpbar { height: max(5px, 1.3cqw); border-radius: 999px; background: rgba(127, 127, 140, 0.3); overflow: hidden; }
.hpfill { height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #3fd07a, #8ee87a); transition: width 0.6s ease; }
.hpfill[data-level='mid'] { background: linear-gradient(90deg, #f2b83a, #ffd84a); }
.hpfill[data-level='lo'] { background: linear-gradient(90deg, #f0334f, #ff6b86); }
.xpbar { height: max(3px, 0.7cqw); border-radius: 999px; background: rgba(127, 127, 140, 0.25); overflow: hidden; margin-top: 0.6cqw; }
.xpfill { height: 100%; width: 0; background: linear-gradient(90deg, #6aa8ff, #b58cff); transition: width 0.6s ease; }

/* panels: full modals over everything */
.panel {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px)); max-height: min(86dvh, 680px);
  display: flex; flex-direction: column;
  background: var(--glass-strong); color: var(--text);
  border: 1px solid var(--border); border-radius: 22px;
  box-shadow: inset 0 1px 0 var(--rim), 0 30px 80px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
  z-index: 20;
  animation: panelIn 0.28s cubic-bezier(0.34, 1.4, 0.55, 1);
  user-select: text; -webkit-user-select: text;
}
@keyframes panelIn { from { opacity: 0; transform: translate(-50%, -46%) scale(0.98); } }
.panel-head { display: flex; align-items: center; padding: 16px 16px 8px 20px; }
.panel-title { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.panel-head .close { margin-left: auto; }
.panel-body { overflow-y: auto; padding: 4px 16px 18px; -webkit-overflow-scrolling: touch; }

.section { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin: 16px 4px 8px; }
.hint, .empty { font-size: 12px; color: var(--text-muted); margin: 12px 4px 0; }
.empty { text-align: center; padding: 16px 0; }
.row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border-radius: 999px; min-height: 34px;
  background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-weight: 700; font-size: 13px;
  text-decoration: none;
}
.ghost:hover { color: var(--text); border-color: rgba(var(--sel-rgb), 0.6); }
.quiet { background: none; border: none; color: var(--text-muted); font-size: 12px; padding: 6px 4px; }
.quiet.danger:hover { color: #f0334f; }
.cta {
  width: 100%; margin-top: 16px; padding: 13px 18px; border: none; border-radius: 999px;
  background: var(--cta); color: #fff; font-weight: 800; letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 22px rgba(190, 20, 60, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 26px rgba(190, 20, 60, 0.5); }
.cta:active { transform: scale(0.97); }

.mon-row {
  width: 100%; display: flex; gap: 12px; align-items: center; text-align: left;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 8px 12px; margin-bottom: 8px;
}
.mon-row:hover { border-color: rgba(var(--sel-rgb), 0.6); }
.mon-row.disabled { opacity: 0.4; }
.mini { width: 48px; height: 48px; image-rendering: pixelated; flex: none; }
.mini.px { width: 32px; height: 32px; }
.mon-info { flex: 1; min-width: 0; }
.mon-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.mon-top .lv, .detail-name .lv { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.mon-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-weight: 600; }

.detail { display: flex; gap: 14px; align-items: center; margin-top: 4px; }
.big { width: 112px; height: 112px; image-rendering: pixelated; background: var(--card); border-radius: 18px; border: 1px solid var(--border); flex: none; }
.detail-name { font-size: 20px; font-weight: 800; }
.detail-title { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 14px; }
.stats div { display: flex; justify-content: space-between; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 7px 12px; font-size: 13px; }
.stats span { color: var(--text-muted); font-weight: 600; }
.moves { display: grid; gap: 6px; }
.move { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 7px 12px; font-size: 13px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.move small { margin-left: auto; color: var(--text-muted); }
.dex-text { font-size: 13px; line-height: 1.5; margin: 14px 4px 0; }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; border: 1px solid var(--border); }

.dex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dex-cell {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 8px 4px 10px;
}
.dex-cell.caught { border-color: rgba(var(--sel-rgb), 0.45); }
.dex-cell img { width: 64px; height: 64px; image-rendering: pixelated; }
.dex-cell img.unseen { filter: brightness(0); opacity: 0.5; }
.dex-cell .no { font-size: 10px; color: var(--text-muted); font-weight: 700; align-self: flex-start; padding-left: 4px; }
.dex-cell .nm { font-size: 12px; font-weight: 700; }
.dex-cell .dot { position: absolute; top: 6px; right: 8px; font-size: 11px; }

.player-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); background: var(--card); border-radius: 14px; margin-bottom: 6px; }
.player-row .rank { width: 18px; font-weight: 800; color: var(--text-muted); font-size: 12px; }
.player-row .sub { margin-left: auto; font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* setup */
.setup { display: flex; flex-direction: column; gap: 12px; }
.setup .preview { width: 96px; height: 96px; image-rendering: pixelated; align-self: center; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.field input {
  font: 600 16px var(--font); color: var(--text); text-transform: none; letter-spacing: 0;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); outline: none;
}
.field input:focus { border-color: var(--sel); box-shadow: 0 0 0 3px rgba(var(--sel-rgb), 0.2); }
.shake { animation: shake 0.35s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.sw { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border); }
.sw.on { border-color: var(--sel); box-shadow: 0 0 0 3px rgba(var(--sel-rgb), 0.25); }
.seg { display: flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.seg-btn { flex: 1; border: none; background: none; padding: 7px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.seg-btn.on { background: var(--toggle-on); color: var(--toggle-on-text); }

/* toasts */
#toasts { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 30; pointer-events: none; width: min(420px, calc(100vw - 32px)); }
.toast {
  background: rgba(14, 16, 26, 0.86); color: #f3f5fc; border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  padding: 10px 16px; border-radius: 16px; font-size: 13px; font-weight: 600; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.25s, transform 0.4s cubic-bezier(0.34, 1.4, 0.55, 1);
}
.toast.show { opacity: 1; transform: none; }
html[data-theme='black'] .toast { background: #000; }

/* touch pad */
#pad {
  display: none;
  flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  padding: 8px 18px 16px;
  gap: 10px;
}
#pad .cam { flex: 1 0 100%; display: flex; justify-content: center; gap: 8px; }
.dpad { position: relative; width: 138px; height: 138px; flex: none; }
.dpad .d {
  position: absolute; width: 46px; height: 46px; border: 1px solid var(--border);
  background: var(--pad-key); border-radius: 12px;
  box-shadow: inset 0 1px 0 var(--rim), 0 4px 10px rgba(0, 0, 0, 0.2);
}
.dpad .d::after { content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border: 7px solid transparent; }
.dpad .up { left: 46px; top: 0; } .dpad .up::after { border-bottom-color: var(--pad-text); top: -8px; }
.dpad .down { left: 46px; bottom: 0; } .dpad .down::after { border-top-color: var(--pad-text); bottom: -8px; }
.dpad .left { left: 0; top: 46px; } .dpad .left::after { border-right-color: var(--pad-text); left: -8px; }
.dpad .right { right: 0; top: 46px; } .dpad .right::after { border-left-color: var(--pad-text); right: -8px; }
.dpad .hub { position: absolute; left: 46px; top: 46px; width: 46px; height: 46px; background: var(--pad-key); border-left: 0; }
.dpad .d.pressed, .round.pressed, .pillbtn.pressed { transform: scale(0.94); filter: brightness(0.9); }
.mid { display: flex; flex-direction: column; align-items: center; }
.pillbtn {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--glass);
  color: var(--text-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
.ab { position: relative; width: 124px; height: 104px; flex: none; }
.round {
  position: absolute; width: 62px; height: 62px; border-radius: 50%;
  font-weight: 800; font-size: 18px; border: none; color: #fff;
}
.round.a { right: 0; top: 0; background: var(--cta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 22px rgba(190, 20, 60, 0.4); }
.round.b { left: 0; bottom: 0; background: var(--pad-key); color: var(--pad-text); border: 1px solid var(--border); box-shadow: inset 0 1px 0 var(--rim), 0 4px 10px rgba(0, 0, 0, 0.2); }

@media (pointer: coarse), (max-width: 700px) {
  #pad { display: flex; }
  .keys { display: none; }
  #stage { padding: 0 8px; }
  #frame { width: min(100%, calc((100dvh - 260px) * 1.5)); border-radius: 14px; }
  body.tall #frame { width: 100%; }
  body.tall #dialog { min-height: 17%; font-size: clamp(13px, 4.2cqw, 18px); }
  body.tall .menu { font-size: clamp(13px, 4cqw, 18px); }
  body.tall .menu.battle-menu { min-height: 17%; }
  body.tall .bcard { font-size: clamp(11px, 3.6cqw, 16px); }
}
@media (max-width: 380px) {
  .stick { transform: scale(0.88); transform-origin: left center; }
  .ab { transform: scale(0.88); transform-origin: right center; }
}

/* wardrobe */
.wardrobe { display: flex; flex-direction: column; gap: 10px; }
.wpreview {
  width: 100%; aspect-ratio: 70 / 17; image-rendering: pixelated;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 10px 14px;
  position: sticky; top: 0; z-index: 1; backdrop-filter: blur(12px);
}
.wsec .section { margin: 6px 4px 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip-btn {
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; min-height: 32px;
}
.chip-btn.on { background: var(--toggle-on); color: var(--toggle-on-text); border-color: transparent; }
.swatches .sw { width: 30px; height: 30px; }
.sw.none { background: repeating-linear-gradient(45deg, transparent 0 4px, var(--border) 4px 6px); }
.paint-btn { align-self: flex-start; margin-top: 4px; }

/* pixel editor */
.pe { display: flex; flex-direction: column; gap: 10px; }
.pe-stage { display: flex; gap: 10px; align-items: flex-start; }
.pe-canvas { flex: 1; min-width: 0; width: 100%; max-width: 300px; aspect-ratio: 1; image-rendering: pixelated; border-radius: 12px; border: 1px solid var(--border); touch-action: none; cursor: crosshair; }
.pe-anim { width: 64px; height: 64px; image-rendering: pixelated; background: var(--card); border: 1px solid var(--border); border-radius: 14px; flex: none; }
.pe-pal { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.pe-pal .sw { width: 100%; height: auto; aspect-ratio: 1; }

/* ===== pixel-game skin (overrides the glass look above) ===== */
:root {
  --font: 'Pixelify Sans', 'Inter', -apple-system, sans-serif;
  --px-bg: #f8f4e6; --px-fg: #23202e; --px-mid: #6a6478;
  --px-line: #23202e; --px-inner: #c9c0a8; --px-sel: #d8423a;
  --px-btn: #e8e2d0; --px-btn-hi: #ffffff; --px-btn-lo: #a8a090;
}
html[data-theme='dark'] {
  --px-bg: #1c1f30; --px-fg: #f3f5fc; --px-mid: #9aa3c8;
  --px-line: #e8eaf6; --px-inner: #3a4062; --px-sel: #ff6b86;
  --px-btn: #2c3150; --px-btn-hi: #4a5280; --px-btn-lo: #151827;
}
html[data-theme='black'] {
  --px-bg: #000; --px-fg: #fff; --px-mid: #b8bcd0;
  --px-line: #fff; --px-inner: #333; --px-sel: #ff6b86;
  --px-btn: #111; --px-btn-hi: #444; --px-btn-lo: #000;
}
body { font-family: var(--font); -webkit-font-smoothing: none; font-smooth: never; }
button, input { font-family: var(--font); }

/* the classic double-bordered box */
#dialog, .menu, .bcard, #banner, .panel, .toast, .pill, .icon-btn {
  background: var(--px-bg) !important; color: var(--px-fg) !important;
  border: 3px solid var(--px-line) !important; border-radius: 0 !important;
  box-shadow: inset 0 0 0 3px var(--px-inner), 4px 4px 0 rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
#dialog { font-weight: 500; letter-spacing: 0.02em; line-height: 1.3; padding: 2.4cqw 3.4cqw; }
#dialog .caret { color: var(--px-sel); animation: bob 0.5s steps(2) infinite; }
#banner { letter-spacing: 0.12em; font-weight: 700; }
.menu { padding: 1.2cqw; animation: none; }
.menu-title { opacity: 1; color: var(--px-mid); font-weight: 600; }
.menu-item { border-radius: 0 !important; border: none !important; box-shadow: none !important; padding: 0.9cqw 1.6cqw 0.9cqw 3.6cqw; position: relative; font-weight: 600; }
.menu-item.sel { background: transparent !important; }
.menu-item.sel .lbl::after { content: none; }
.menu-item.sel::before { content: '▶'; position: absolute; left: 0.9cqw; color: var(--px-sel); font-size: 0.75em; top: 50%; transform: translateY(-50%); animation: blink 0.8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.menu-item.chip .lbl::before { border-radius: 0; }
.menu.battle-menu .menu-item { border: none !important; }

/* HP & XP bars: chunky, segmented */
.hpbar, .xpbar { border-radius: 0; background: var(--px-line); padding: 2px; height: max(9px, 1.9cqw); }
.xpbar { height: max(6px, 1.1cqw); }
.hpfill, .xpfill { border-radius: 0; background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0, 0, 0, 0.18) 6px 7px), linear-gradient(#5ee08a, #3fb86a) !important; transition: width 0.6s steps(12); }
.hpfill[data-level='mid'] { background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0, 0, 0, 0.18) 6px 7px), linear-gradient(#ffd84a, #e0a830) !important; }
.hpfill[data-level='lo'] { background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0, 0, 0, 0.18) 6px 7px), linear-gradient(#ff6b6b, #d8423a) !important; }
.xpfill { background-image: linear-gradient(#8ab8ff, #5a7ad8) !important; }
.type { border-radius: 0; background: var(--chip) !important; color: #16121c; border: 2px solid var(--px-line); font-weight: 700; }
.bcard .status { color: #b58cff; }

/* panels & controls */
.panel { width: min(440px, calc(100vw - 24px)); animation: none; }
.panel-title { font-size: 15px; letter-spacing: 0.1em; }
.section { color: var(--px-mid); font-size: 12px; letter-spacing: 0.1em; }
.hint, .empty, .mon-sub, .detail-title { color: var(--px-mid); }
.mon-row, .dex-cell, .stats div, .move, .player-row, .big, .wpreview, .setup .preview, .pe-anim, .pe-canvas, .photos img {
  border-radius: 0 !important; border: 2px solid var(--px-line) !important; background: transparent;
}
.mon-row:hover, .dex-cell:hover { outline: 2px solid var(--px-sel); outline-offset: -6px; }
.ghost, .chip-btn, .seg-btn, .cta, .quiet, .pillbtn, .icon-btn, .field input {
  border-radius: 0 !important;
}
.ghost, .chip-btn, .seg-btn, .pillbtn {
  background: var(--px-btn) !important; color: var(--px-fg) !important; border: 2px solid var(--px-line) !important;
  box-shadow: inset 2px 2px 0 var(--px-btn-hi), inset -2px -2px 0 var(--px-btn-lo) !important;
  font-weight: 600;
}
.ghost:active, .chip-btn:active, .seg-btn:active, .pillbtn:active { box-shadow: inset -2px -2px 0 var(--px-btn-hi), inset 2px 2px 0 var(--px-btn-lo) !important; }
.chip-btn.on, .seg-btn.on { background: var(--px-sel) !important; color: #fff !important; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px -2px 0 rgba(0, 0, 0, 0.3) !important; }
.seg { border: none; padding: 0; gap: 4px; flex-wrap: wrap; }
.cta {
  background: #d8423a !important; border: 3px solid var(--px-line) !important; color: #fff;
  box-shadow: inset 3px 3px 0 #ff8a7a, inset -3px -3px 0 #8e1a22, 3px 3px 0 rgba(0, 0, 0, 0.4) !important;
  letter-spacing: 0.06em; font-size: 16px;
}
.cta:hover { transform: none; filter: brightness(1.08); }
.cta:active { transform: translate(2px, 2px); box-shadow: inset -3px -3px 0 #ff8a7a, inset 3px 3px 0 #8e1a22 !important; }
.sw { border-radius: 0 !important; border: 2px solid var(--px-line) !important; }
.sw.on { box-shadow: 0 0 0 3px var(--px-sel) !important; }
.field input { border: 2px solid var(--px-line); background: var(--px-btn); color: var(--px-fg); }
.field span { color: var(--px-mid); }
.toast { font-weight: 600; }
.pill.live::before { border-radius: 0; box-shadow: none; }
#frame { border-radius: 0; box-shadow: 0 0 0 3px var(--px-line), 0 0 0 6px var(--px-inner), 6px 6px 0 6px rgba(0, 0, 0, 0.4); }
.brand { font-family: var(--font); font-size: 16px; font-weight: 700; letter-spacing: 0.14em; }

/* touch pad: chunky pixel buttons */
.dpad .d, .dpad .hub { border-radius: 0; background: var(--px-btn); border: 3px solid var(--px-line); box-shadow: inset 3px 3px 0 var(--px-btn-hi), inset -3px -3px 0 var(--px-btn-lo); }
.dpad .hub { border: none; box-shadow: none; }
.round { border-radius: 0; border: 3px solid var(--px-line) !important; font-family: var(--font); font-size: 22px; }
.round.a { background: #d8423a; box-shadow: inset 3px 3px 0 #ff8a7a, inset -3px -3px 0 #8e1a22, 3px 3px 0 rgba(0, 0, 0, 0.4); }
.round.b { background: var(--px-btn); box-shadow: inset 3px 3px 0 var(--px-btn-hi), inset -3px -3px 0 var(--px-btn-lo), 3px 3px 0 rgba(0, 0, 0, 0.4); }
.dpad .d.pressed, .round.pressed, .pillbtn.pressed { transform: translate(2px, 2px); filter: none; }

.credit { font-size: 10px; color: var(--px-mid); margin-top: 6px; text-decoration: none; }
.credit:hover { text-decoration: underline; }

/* no double-tap zoom or text selection anywhere in the game (iOS) */
*, *::before, *::after { touch-action: manipulation; }
#pad, #pad *, #screen { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* aura popups */
.aurapop {
  position: absolute; left: 50%; top: 14%; transform: translateX(-50%); z-index: 5; pointer-events: none;
  font-family: var(--font); font-weight: 700; font-size: clamp(11px, 3.4cqw, 16px); white-space: nowrap;
  padding: 3px 10px; border: 2px solid var(--px-line); background: var(--px-bg);
  animation: aurapop 2.2s steps(22) forwards;
}
.aurapop.good { color: #5ee08a; }
.aurapop.bad { color: #ff6b86; }
@keyframes aurapop { 0% { opacity: 0; transform: translate(-50%, 10px); } 12%, 70% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -18px); } }
.drip { font-weight: 700; color: #ffd84a; text-align: center; }
.chip-btn.locked { opacity: 0.45; }

/* high-five quick-time event */
.qte {
  position: absolute; left: 6%; right: 6%; top: 30%; z-index: 6; padding: 3cqw 4cqw;
  background: var(--px-bg); color: var(--px-fg); border: 3px solid var(--px-line);
  box-shadow: inset 0 0 0 3px var(--px-inner), 4px 4px 0 rgba(0,0,0,0.45);
  font-family: var(--font); text-align: center; cursor: pointer; touch-action: none;
}
.qte-title { font-weight: 700; font-size: clamp(13px, 4cqw, 20px); margin-bottom: 2.4cqw; }
.qte-bar { position: relative; height: max(18px, 5cqw); background: var(--px-btn); border: 2px solid var(--px-line); }
.qte-zone { position: absolute; top: 0; bottom: 0; background: #e0a830; }
.qte-perfect { position: absolute; top: 0; bottom: 0; background: #ffe680; }
.qte-mark { position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; background: #d8423a; box-shadow: 0 0 0 2px var(--px-line); }
.qte-hint { margin-top: 2cqw; color: var(--px-mid); font-size: clamp(11px, 3cqw, 15px); }
.qte.hit { border-color: #5ee08a; } .qte.hit .qte-hint { color: #5ee08a; font-weight: 700; }
.qte.missed { border-color: #ff6b86; } .qte.missed .qte-hint { color: #ff6b86; font-weight: 700; }

.mapwrap { max-height: 60vh; overflow: auto; border: 2px solid var(--px-line); touch-action: pan-x pan-y; }
.mapwrap canvas { display: block; image-rendering: pixelated; }

/* joystick + camera buttons */
.stick { position: relative; width: 124px; height: 124px; flex: none; border-radius: 50%; background: var(--px-btn); border: 3px solid var(--px-line); box-shadow: inset 3px 3px 0 var(--px-btn-hi), inset -3px -3px 0 var(--px-btn-lo); }
.stick .knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: #ffd84a; border: 3px solid var(--px-line); box-shadow: inset 3px 3px 0 #fff0a0, inset -3px -3px 0 #b08a10; pointer-events: none; }
.cambtn { height: 34px; padding: 0 12px; background: var(--px-btn); border: 3px solid var(--px-line); box-shadow: inset 3px 3px 0 var(--px-btn-hi), inset -3px -3px 0 var(--px-btn-lo); font-family: var(--font); font-size: 18px; color: var(--text); }
.cambtn.pressed { transform: translate(2px, 2px); }

/* a new Løkkadex entry after a catch */
.dex-reveal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 8, 16, 0.72); animation: dex-fade 0.25s ease-out; cursor: pointer; }
.dex-card { width: min(100%, 360px); max-height: 100%; overflow-y: auto; padding: 14px 16px 12px; text-align: center; color: var(--text); background: var(--glass-strong); border: 2px solid rgba(var(--sel-rgb), 0.6); border-radius: 18px; animation: dex-rise 0.35s ease-out; }
.dex-top { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.dex-scan { position: relative; width: 128px; height: 128px; margin: 10px auto 8px; overflow: hidden; border-radius: 14px; background: rgba(var(--sel-rgb), 0.12); }
.dex-scan img { width: 100%; height: 100%; image-rendering: pixelated; }
.dex-scan::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; background: rgba(var(--sel-rgb), 0.9); animation: dex-scan 1s ease-in-out 2; opacity: 0; }
.dex-no { font-size: 12px; font-weight: 800; color: var(--text-muted); }
.dex-reveal .types { justify-content: center; }
.dex-reveal .dex-text { margin: 10px 2px 8px; text-align: left; }
.dex-count { font-size: 11px; color: var(--text-muted); }
.dex-reveal.legendary .dex-card { border-color: #e0b860; }
.dex-reveal.legendary .dex-no { color: #e0b860; }
@keyframes dex-fade { from { opacity: 0; } }
@keyframes dex-rise { from { transform: translateY(18px) scale(0.96); opacity: 0; } }
@keyframes dex-scan { 0% { top: 0; opacity: 1; } 100% { top: 100%; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dex-reveal, .dex-card { animation: none; } .dex-scan::after { display: none; } }

/* the aura bar: rank, number and how far to the next rank */
#aurabar { position: absolute; right: 2%; top: 2%; width: 34%; min-width: 118px; z-index: 4; pointer-events: none; display: none; font-family: var(--font); font-size: clamp(9px, 2.8cqw, 13px); font-weight: 700; color: #f3f5fc; padding: 3px 6px 4px; border: 2px solid var(--px-line); background: var(--px-bg); }
#aurabar.on { display: block; }
.ab-top { display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; margin-bottom: 3px; }
.ab-rank { overflow: hidden; text-overflow: ellipsis; }
.ab-val { color: #c9a8ff; }
.ab-track { height: 6px; background: rgba(255, 255, 255, 0.14); }
.ab-track i { display: block; height: 100%; width: 0; background: #b07aff; transition: width 0.45s steps(12); }
#aurabar.neg .ab-val { color: #ff6b86; }
#aurabar.neg .ab-track i { background: #ff6b86; }
#aurabar.up { animation: aura-up 0.5s steps(5); }
#aurabar.down { animation: aura-down 0.5s steps(5); }
@keyframes aura-up { 40% { box-shadow: 0 0 0 2px #5ee08a; } }
@keyframes aura-down { 20% { transform: translateX(-3px); box-shadow: 0 0 0 2px #ff6b86; } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) { #aurabar.up, #aurabar.down { animation: none; } .ab-track i { transition: none; } }

/* crashing into another player: a split screen like a fighting game */
.crash { position: absolute; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; background: rgba(10, 8, 16, 0.55); animation: crash-out 2.9s steps(40) forwards; }
.crash-side { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1%; font-family: var(--font); color: #fff; }
.crash-side.left { left: 0; width: 58%; background: #2f5fb8; clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%); padding-right: 16%; animation: crash-in-left 0.42s cubic-bezier(.2, 1.4, .4, 1) both; }
.crash-side.right { right: 0; width: 58%; background: #c8302a; clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%); padding-left: 16%; animation: crash-in-right 0.42s cubic-bezier(.2, 1.4, .4, 1) both; }
.crash-side canvas { width: 46%; aspect-ratio: 1; image-rendering: pixelated; }
.crash-side.right canvas { transform: scaleX(-1); }
.crash-name { font-weight: 800; font-size: clamp(12px, 4cqw, 20px); }
.crash-swag { font-weight: 700; font-size: clamp(10px, 3cqw, 15px); color: #ffe08a; }
.crash-side.lost { animation-name: crash-in-left, crash-lose; animation-duration: 0.42s, 0.9s; animation-delay: 0s, 1.05s; animation-fill-mode: both, forwards; animation-timing-function: cubic-bezier(.2, 1.4, .4, 1), ease-in; }
.crash-side.right.lost { animation-name: crash-in-right, crash-lose; }
.crash-side.lost canvas { animation: crash-fall 0.9s 1.05s ease-in forwards; }
.crash-side.right.lost canvas { animation-name: crash-fall-right; }
.crash-line { position: absolute; left: 50%; top: -5%; bottom: -5%; width: 6px; margin-left: -3px; background: #fff; transform: rotate(9.5deg) scaleY(0); animation: crash-line 0.2s 0.38s steps(4) forwards; box-shadow: 0 0 14px #fff; }
.crash-word { position: absolute; left: 50%; top: 42%; font-family: var(--font); font-weight: 900; font-size: clamp(26px, 11cqw, 56px); letter-spacing: 0.04em; color: #ffe08a; -webkit-text-stroke: 2px #16121c; transform: translate(-50%, -50%) scale(0) rotate(-8deg); animation: crash-word 0.5s 0.45s cubic-bezier(.2, 1.8, .4, 1) forwards; }
.crash-result { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font); font-weight: 800; font-size: clamp(13px, 4.4cqw, 22px); padding: 4px 12px; border: 2px solid var(--px-line); background: var(--px-bg); opacity: 0; animation: crash-show 0.2s 1.5s steps(3) forwards; }
.crash-result.good { color: #5ee08a; }
.crash-result.bad { color: #ff6b86; }
@keyframes crash-in-left { from { transform: translateX(-100%); } }
@keyframes crash-in-right { from { transform: translateX(100%); } }
@keyframes crash-line { to { transform: rotate(9.5deg) scaleY(1); } }
@keyframes crash-word { to { transform: translate(-50%, -50%) scale(1) rotate(-8deg); } }
@keyframes crash-show { to { opacity: 1; } }
@keyframes crash-lose { to { filter: grayscale(1) brightness(0.55); } }
@keyframes crash-fall { to { transform: translateY(45%) rotate(-90deg); } }
@keyframes crash-fall-right { to { transform: scaleX(-1) translateY(45%) rotate(-90deg); } }
@keyframes crash-out { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .crash-side, .crash-side canvas, .crash-word, .crash-line { animation-duration: 0.01s !important; animation-delay: 0s !important; } }

/* the phone and Sveip */
.phone { margin: 0 auto; width: min(300px, 100%); padding: 10px; background: #14141c; border: 3px solid var(--px-mid, #6a6e7a); border-radius: 18px; }
.phone-screen { height: 440px; display: flex; flex-direction: column; gap: 8px; padding: 10px; overflow: hidden; background: #22222e; border-radius: 8px; color: #f3f5fc; }
.phone-clock { text-align: center; font-size: 34px; font-weight: 800; margin-top: 24px; }
.phone-date { text-align: center; font-size: 12px; opacity: .75; margin-bottom: 18px; }
.phone-app { position: relative; align-self: flex-start; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
.app-icon { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; font-size: 28px; color: #fff; background: #e0364f; border-radius: 12px; }
.app-badge { display: inline-block; min-width: 16px; padding: 0 4px; font-size: 11px; text-align: center; color: #fff; background: #e0202a; border-radius: 8px; }
.phone-app .app-badge { position: absolute; top: -4px; right: -6px; }
.sv-bar { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.sv-title { font-weight: 800; }
.sv-back, .sv-link { background: none; border: 0; color: #c6cff5; font: inherit; font-size: 13px; cursor: pointer; padding: 4px; }
.sv-back { font-size: 22px; line-height: 1; }
.sv-bar .sv-link { margin-left: auto; }
.sv-text { font-size: 13px; line-height: 1.4; }
.sv-text p { margin: 0 0 8px; }
.sv-card { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px; background: #e8e4dc; color: #1d1c25; border-radius: 10px; touch-action: none; user-select: none; cursor: grab; }
.sv-face { image-rendering: pixelated; }
.sv-name { font-size: 20px; font-weight: 800; margin-top: 8px; }
.sv-sub { font-size: 12px; color: #4a4a56; }
.sv-row { display: flex; justify-content: center; gap: 26px; padding: 4px; }
.sv-no, .sv-yes { width: 54px; height: 54px; font-size: 24px; color: #fff; border: 0; border-radius: 50%; cursor: pointer; }
.sv-no { background: #4a4a56; } .sv-yes { background: #e0364f; }
.sv-match { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; color: inherit; text-align: left; background: #2e2e3c; border: 0; border-radius: 6px; font: inherit; cursor: pointer; }
.sv-mt { min-width: 0; flex: 1; }
.sv-mn { font-weight: 700; font-size: 14px; }
.sv-ml { font-size: 12px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-on { font-size: 11px; font-weight: 400; color: #8fd078; }
.sv-log { flex: 1; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.sv-msg { align-self: flex-start; max-width: 80%; padding: 6px 8px; font-size: 13px; word-break: break-word; background: #3a3a48; border-radius: 8px; }
.sv-msg.me { align-self: flex-end; background: #e0364f; }
.sv-form { display: flex; gap: 6px; }
.sv-input { flex: 1; min-width: 0; padding: 8px; font: inherit; font-size: 16px; color: #1d1c25; background: #f3f5fc; border: 0; border-radius: 6px; }
.sv-send { padding: 8px 10px; color: #fff; background: #e0364f; border: 0; border-radius: 6px; font: inherit; cursor: pointer; }
.sv-send:disabled, .sv-input:disabled { opacity: .5; }