/* Idle Odyssey base styles: an 8-bit look made from pixel fonts, hard borders and stepped shadows.
   Colours are variables so themes can swap them (see [data-theme] at the bottom). */
@font-face { font-family: 'PS2P'; src: url('/fonts/press-start-2p-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'VT'; src: url('/fonts/vt323-latin-400-normal.woff2') format('woff2'); font-display: swap; }

:root {
  --card: var(--bg2); --well: #0b0a14;          /* plain values; refined below where color-mix works */
  --bg: #14101f; --bg2: #1d1730; --panel: #251d3d; --panel2: #2e2450; --line: #5b4a94; --line2: #3b2f66;
  --text: #ece6ff; --dim: #a89ccf; --accent: #ffd34d; --accent2: #6be3ff; --good: #5fe08a; --bad: #ff6b7a; --warn: #ffb347;
  --xp: #6be3ff; --hp: #ff6b7a; --focus: #7c8cff;
  --common: #b0b0b0; --uncommon: #5fbf5f; --rare: #4f8fe8; --epic: #b05fe0; --legendary: #ffb02e; --mythic: #ff4f6f;
  --font-head: 'PS2P', monospace; --font: 'VT', 'Courier New', monospace;
  --nav-h: 58px; --safe-b: env(safe-area-inset-bottom, 0px);
}
@supports (color: color-mix(in srgb, red, blue)) { :root { --card: color-mix(in srgb, var(--bg) 60%, var(--panel)); --well: color-mix(in srgb, var(--bg) 70%, #000); } }
:root[data-theme="ember"] { --bg: #1a0f0f; --bg2: #271414; --panel: #35191a; --panel2: #4a2224; --line: #a04a3a; --line2: #6a2f28; --accent: #ffb347; --accent2: #ff7a59; }
:root[data-theme="forest"] { --bg: #0d1a12; --bg2: #13261a; --panel: #1b3324; --panel2: #25452f; --line: #4a9a63; --line2: #2f6641; --accent: #d8f56b; --accent2: #6be3b0; }
:root[data-theme="parchment"] { --bg: #e9dcc0; --bg2: #dccca8; --panel: #f4ead2; --panel2: #e9dcbc; --line: #8a6a3a; --line2: #b89a68; --text: #2e2414; --dim: #6b5a3a; --accent: #a8561f; --accent2: #2f6a8a; --good: #2f7a3f; --bad: #a82a2a; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: calc(22px * var(--ts, 1)); line-height: 1.15; }
body { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: normal; margin: 0 0 10px; line-height: 1.5; letter-spacing: 0; }
h1 { font-size: calc(16px * var(--ts, 1)); } h2 { font-size: calc(13px * var(--ts, 1)); color: var(--accent); } h3 { font-size: calc(11px * var(--ts, 1)); color: var(--accent2); } h4 { font-size: calc(10px * var(--ts, 1)); }
a { color: var(--accent2); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #000; }

/* ---- pixel panels: a hard 3px border with a stepped shadow */
.panel { background: var(--panel); border: 3px solid var(--line); box-shadow: 3px 3px 0 #000; padding: 10px; margin: 0 0 12px; position: relative; }
.panel.flat { box-shadow: none; }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 6px; }
.grow { flex: 1 1 auto; min-width: 0; }
.grid { display: grid; gap: 8px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.dim { color: var(--dim); } .good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); } .accent { color: var(--accent); }
.small { font-size: calc(18px * var(--ts, 1)); } .tiny { font-size: calc(15px * var(--ts, 1)); }
.right { text-align: right; } .center { text-align: center; } .nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.mono { font-family: 'Courier New', monospace; }

/* ---- buttons and inputs */
.btn { font-family: var(--font-head); font-size: calc(10px * var(--ts, 1)); line-height: 1.4; padding: 8px 10px; background: var(--panel2); border: 3px solid var(--line); box-shadow: 2px 2px 0 #000; cursor: pointer; color: var(--text); text-transform: uppercase; }
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: #1a1205; border-color: #fff8; }
.btn.danger { background: #5a1f2a; border-color: var(--bad); }
.btn.good { background: #1f4a2a; border-color: var(--good); }
.btn.small { font-size: calc(8px * var(--ts, 1)); padding: 5px 7px; }
input[type=text], input[type=password], input[type=number], select, textarea { background: var(--bg); border: 3px solid var(--line2); padding: 6px 8px; width: 100%; font-size: calc(22px * var(--ts, 1)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent2); }
label.field { display: block; margin-bottom: 8px; } label.field > span { display: block; color: var(--dim); font-size: calc(18px * var(--ts, 1)); margin-bottom: 2px; }

/* ---- bars */
.bar { position: relative; height: 14px; background: var(--bg); border: 2px solid var(--line2); overflow: hidden; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--good); width: 0; transition: width .25s steps(8); }
.bar.xp > i { background: var(--xp); } .bar.hp > i { background: var(--hp); } .bar.focus > i { background: var(--focus); } .bar.gold > i { background: var(--accent); }
.bar > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(14px * var(--ts, 1)); text-shadow: 1px 1px 0 #000; color: #fff; }
.bar.tall { height: 20px; }

/* ---- tags, rarity, icons */
.tag { display: inline-block; font-size: calc(16px * var(--ts, 1)); padding: 0 6px; border: 2px solid var(--line2); background: var(--bg2); color: var(--dim); }
.tag.good { border-color: var(--good); color: var(--good); } .tag.bad { border-color: var(--bad); color: var(--bad); } .tag.accent { border-color: var(--accent); color: var(--accent); }
.rar-common { color: var(--common); } .rar-uncommon { color: var(--uncommon); } .rar-rare { color: var(--rare); } .rar-epic { color: var(--epic); } .rar-legendary { color: var(--legendary); } .rar-mythic { color: var(--mythic); }
.icon { display: inline-block; vertical-align: middle; width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.icon.sm { width: 24px; height: 24px; } .icon.lg { width: 48px; height: 48px; } .icon.xl { width: 64px; height: 64px; }
.slot { position: relative; width: 52px; height: 52px; border: 3px solid var(--line2); background: var(--bg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.slot:hover { border-color: var(--accent); }
.slot .qty { position: absolute; right: 1px; bottom: -1px; font-size: calc(15px * var(--ts, 1)); text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.slot.empty { opacity: .6; border-style: dashed; }

/* ---- layout: sidebar on wide screens, bottom tabs on phones */
#app { min-height: 100%; display: flex; flex-direction: column; }
.shell { display: flex; min-height: 100vh; }
.nav { width: 178px; background: var(--bg2); border-right: 3px solid var(--line2); padding: 8px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; flex: none; }
.nav .brand { font-family: var(--font-head); font-size: calc(12px * var(--ts, 1)); color: var(--accent); padding: 8px 4px 12px; line-height: 1.6; }
.nav button { display: flex; align-items: center; gap: 8px; text-align: left; background: none; border: 3px solid transparent; padding: 6px 8px; cursor: pointer; font-family: var(--font-head); font-size: calc(9px * var(--ts, 1)); line-height: 1.5; color: var(--dim); position: relative; }
.nav button:hover { color: var(--text); border-color: var(--line2); }
.nav button.on { color: var(--accent); border-color: var(--line); background: var(--panel); }
.nav .badge { margin-left: auto; background: var(--bad); color: #fff; font-size: calc(8px * var(--ts, 1)); padding: 1px 5px; }
.main { flex: 1 1 auto; min-width: 0; padding: 12px; max-width: 1100px; }
.topbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.topbar .who { flex: 1 1 200px; min-width: 0; }
.topbar .events { flex: 1 1 100%; flex-wrap: wrap; gap: 6px; align-items: center; }
.topbar .events .tag { font-family: inherit; cursor: pointer; }
.currency { display: flex; gap: 12px; font-size: calc(20px * var(--ts, 1)); }
.taskbar { margin-bottom: 12px; }
.screen-title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

@media (max-width: 760px) {
  html, body { font-size: calc(20px * var(--ts, 1)); }
  .shell { flex-direction: column; }
  .nav { position: fixed; bottom: 0; left: 0; right: 0; top: auto; width: 100%; height: calc(var(--nav-h) + var(--safe-b)); flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-top: 3px solid var(--line2); padding: 4px 4px calc(4px + var(--safe-b)); z-index: 20; gap: 2px; }
  .nav .brand { display: none; }
  .nav button { flex-direction: column; justify-content: center; gap: 2px; font-size: calc(7px * var(--ts, 1)); padding: 3px 6px; min-width: 62px; }
  .main { padding: 8px 8px calc(var(--nav-h) + 20px + var(--safe-b)); }
}

/* ---- toasts and modals */
#toasts { position: fixed; top: 8px; right: 8px; z-index: 100; display: flex; flex-direction: column; gap: 6px; max-width: min(360px, 92vw); pointer-events: none; }
.toast { background: var(--panel2); border: 3px solid var(--line); box-shadow: 3px 3px 0 #000; padding: 8px 10px; animation: toast-in .2s steps(4); font-size: calc(20px * var(--ts, 1)); }
.toast.good { border-color: var(--good); } .toast.bad { border-color: var(--bad); } .toast.accent { border-color: var(--accent); }
@keyframes toast-in { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-back { position: fixed; inset: 0; background: #000a; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 10px; }
.modal { background: var(--panel); border: 3px solid var(--accent); box-shadow: 5px 5px 0 #000; max-width: 560px; width: 100%; max-height: 90vh; overflow: auto; padding: 14px; }
.modal h2 { margin-bottom: 10px; }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }

/* ---- auth screen */
.auth { max-width: 460px; margin: 6vh auto; padding: 10px; width: 100%; }
.auth h1 { text-align: center; color: var(--accent); font-size: calc(18px * var(--ts, 1)); margin-bottom: 4px; }
.auth .sub { text-align: center; color: var(--dim); margin-bottom: 16px; }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.tabs button { font-family: var(--font-head); font-size: calc(9px * var(--ts, 1)); padding: 8px 10px; background: var(--bg2); border: 3px solid var(--line2); color: var(--dim); cursor: pointer; }
.tabs button.on { background: var(--panel2); border-color: var(--accent); color: var(--accent); }
.err { color: var(--bad); min-height: 1.2em; margin: 6px 0; }
.scan::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #0000 0 2px, #0000000d 2px 3px); z-index: 200; }
:root[data-theme="ocean"] { --bg: #08131f; --bg2: #0d1d2e; --panel: #12283d; --panel2: #18344f; --line: #3f86b8; --line2: #24577d; --accent: #ffe08a; --accent2: #5fe0d9; }
:root[data-theme="royal"] { --bg: #120a1f; --bg2: #1c1030; --panel: #2a1747; --panel2: #36205c; --line: #9b6be0; --line2: #5e3a96; --accent: #ffcf3f; --accent2: #e07bff; }
:root[data-theme="sakura"] { --bg: #1f0f18; --bg2: #2b1522; --panel: #3a1c2e; --panel2: #4a253b; --line: #e07aa8; --line2: #934a6b; --accent: #ffd1e3; --accent2: #9be3c4; }
:root[data-theme="desert"] { --bg: #1e140a; --bg2: #2a1c0e; --panel: #3a2814; --panel2: #4a331a; --line: #c9944a; --line2: #85602e; --accent: #ffd36b; --accent2: #6bd0e3; }
:root[data-theme="gameboy"] { --bg: #0f380f; --bg2: #1d4a1d; --panel: #306230; --panel2: #3a723a; --line: #8bac0f; --line2: #5a8a1a; --text: #e0f8d0; --dim: #b5d68a; --accent: #9bbc0f; --accent2: #c4e06b; --good: #c4f06b; --bad: #f0d06b; }
:root[data-theme="void"] { --bg: #000; --bg2: #0a0a0a; --panel: #111; --panel2: #1a1a1a; --line: #fff; --line2: #888; --text: #fff; --dim: #ccc; --accent: #ffea00; --accent2: #00e5ff; }

/* ---- purchase complete (ui.js purchased): stays until the X is pressed, the item floats on a pulsing glow with slow rays */
.bought-back { position: fixed; inset: 0; z-index: 95; background: #000c; display: flex; align-items: center; justify-content: center; padding: 16px; animation: bought-fade .25s ease-out; }
.bought { position: relative; width: min(420px, 100%); background: var(--panel); border: 3px solid var(--accent); box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 45%, transparent), 6px 6px 0 #000; padding: 22px 18px 24px; text-align: center; animation: bought-pop .45s cubic-bezier(.2, 1.6, .4, 1); overflow: hidden; }
.bought-x { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; font-size: calc(28px * var(--ts, 1)); line-height: 1; background: transparent; border: 2px solid var(--dim); color: var(--text); cursor: pointer; z-index: 2; }
.bought-x:hover, .bought-x:focus-visible { border-color: var(--accent); color: var(--accent); }
.bought-stage { position: relative; height: 190px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.bought-aura { position: absolute; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 85%, #fff) 0%, color-mix(in srgb, var(--accent) 45%, transparent) 40%, transparent 70%); filter: blur(4px); animation: bought-pulse 2.2s ease-in-out infinite; }
.bought-rays { position: absolute; width: 260px; height: 260px; background: repeating-conic-gradient(color-mix(in srgb, var(--accent) 30%, transparent) 0 10deg, transparent 10deg 30deg); mask: radial-gradient(circle, #000 20%, transparent 68%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); animation: bought-spin 14s linear infinite; }
.bought-item { position: relative; z-index: 1; animation: bought-float 3s ease-in-out infinite; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 80%, #fff)); }
.bought-item .bought-art { width: 112px; height: 112px; image-rendering: pixelated; }
.bought-item > *:not(.bought-art) { max-width: 140px; max-height: 140px; }
.bought-item .tc-swatch { width: 120px; height: 80px; }
.bought-title { font-family: var(--font-head); color: var(--accent); font-size: 1.5rem; margin: 0 0 6px; text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }
.bought-text { margin: 0; font-size: 1.05rem; color: var(--text); }
@keyframes bought-fade { from { opacity: 0 } }
@keyframes bought-pop { from { transform: scale(.6); opacity: 0 } }
@keyframes bought-pulse { 50% { transform: scale(1.15); opacity: .75 } }
@keyframes bought-spin { to { transform: rotate(360deg) } }
@keyframes bought-float { 50% { transform: translateY(-8px) } }
@media (prefers-reduced-motion: reduce) { .bought, .bought-back, .bought-aura, .bought-rays, .bought-item { animation: none } }