:root {
  --bg: #0b0a12; --ink: #f6f3ff; --dim: rgba(246, 243, 255, .55);
  --glass: rgba(255, 255, 255, .055); --line: rgba(255, 255, 255, .09);
  --hot: linear-gradient(120deg, #ff7ac6, #a98bff 50%, #5ee0ff);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--ink); -webkit-tap-highlight-color: transparent;
  font: 500 15px/1.3 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
button, input { font: inherit; color: inherit; }

/* Slow colour behind everything; transforms only, so it stays cheap on phones. */
.aurora { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.aurora i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .5; will-change: transform; }
.aurora i:nth-child(1) { background: radial-gradient(closest-side, #ff4fb0, transparent); left: -20vmax; top: -25vmax; animation: drift 26s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { background: radial-gradient(closest-side, #6a4dff, transparent); right: -25vmax; top: 10vh; animation: drift 32s ease-in-out -8s infinite alternate-reverse; }
.aurora i:nth-child(3) { background: radial-gradient(closest-side, #19c6ff, transparent); left: 10vw; bottom: -40vmax; opacity: .35; animation: drift 38s ease-in-out -14s infinite alternate; }
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(12vw, 8vh) scale(1.15); }
  100% { transform: translate(-6vw, 14vh) scale(.9); }
}

/* ------------------------------------------------ grid */
.grid {
  position: relative; max-width: 1180px; margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) 18px 120px;
  display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(44vw, 230px), 1fr));
}
.cards .grid { grid-template-columns: repeat(auto-fill, minmax(min(44vw, 190px), 1fr)); padding-top: 84px; }

.tile {
  position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  background: var(--glass); border: 1px solid var(--line); color: inherit; text-decoration: none;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0));
  transition: transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8);
}
.tile.in { animation: rise .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(.96); } }
.tile:hover { --lift: -4px; border-color: rgba(255, 255, 255, .2); box-shadow: 0 28px 50px -24px rgba(120, 80, 255, .55); }
.tile.tilting { transition: transform .12s linear, border-color .3s, box-shadow .5s var(--ease); }
/* Light that follows the pointer. */
.tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .16), transparent 45%);
  mix-blend-mode: screen;
}
.tile:hover::after { opacity: 1; }

.pic { position: relative; aspect-ratio: 1; overflow: hidden; background: rgba(255, 255, 255, .03); }
.cards .pic { aspect-ratio: 5 / 6; }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-user-drag: none; user-select: none; }
.pic .bg { object-fit: cover; filter: blur(26px) saturate(1.6); transform: scale(1.4); opacity: .55; }
.pic .fg { object-fit: contain; padding: 9%; transition: transform .6s var(--ease); filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); }
.cards .pic .fg { padding: 7% 12%; }
.tile:hover .pic .fg { transform: scale(1.05); }
.pic.empty { display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgba(255, 122, 198, .25), transparent 60%), radial-gradient(circle at 80% 90%, rgba(94, 224, 255, .2), transparent 55%); }
.pic.empty svg { width: 34%; opacity: .8; }

/* The Pokémon tile: a hand of the three dearest watched cards. */
.fan { position: absolute; inset: 0; background: radial-gradient(circle at 50% 60%, rgba(255, 215, 90, .28), transparent 62%); }
.fan img { inset: 14% auto auto 50%; width: 42%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 6px; margin-left: -21%;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .5); transform-origin: 50% 120%; transition: transform .7s var(--ease); }
.fan img:nth-child(1) { transform: rotate(-14deg) translateX(-8%); }
.fan img:nth-child(3) { transform: rotate(14deg) translateX(8%); }
.fan img:nth-child(2) { z-index: 1; transform: translateY(-3%); }
.tile:hover .fan img:nth-child(1) { transform: rotate(-24deg) translateX(-22%); }
.tile:hover .fan img:nth-child(3) { transform: rotate(24deg) translateX(22%); }
.tile:hover .fan img:nth-child(2) { transform: translateY(-9%) scale(1.06); }

.meta { display: flex; flex-direction: column; gap: 8px; padding: 13px 15px 15px; flex: 1; }
.name { font-weight: 650; font-size: 1.02rem; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.price { margin-top: auto; align-self: flex-start; font-weight: 750; font-size: .92rem; padding: 4px 11px; border-radius: 99px;
  background: var(--hot); color: #140b24; font-variant-numeric: tabular-nums; }
.price:empty { display: none; }

.back { position: fixed; top: max(18px, env(safe-area-inset-top)); left: 18px; z-index: 5; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: var(--glass); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .3s var(--ease); }
.back:hover { transform: translateX(-3px); }
.back svg, .fab svg { width: 22px; height: 22px; }

/* ------------------------------------------------ editing */
.fab { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 20;
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--hot); color: #140b24; box-shadow: 0 14px 34px -10px rgba(169, 139, 255, .8);
  transition: transform .4s var(--ease); }
.fab:hover { transform: scale(1.08) rotate(-8deg); }
.fab:active { transform: scale(.94); }
.fab .done, .editing .fab .pen { display: none; }
.editing .fab .done { display: block; }

.editing .tile { cursor: grab; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; animation: jiggle .32s ease-in-out infinite alternate; }
.editing .tile:nth-child(2n) { animation-delay: -.16s; animation-direction: alternate-reverse; }
@keyframes jiggle { from { rotate: -.7deg; } to { rotate: .7deg; } }
.editing .tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(169, 139, 255, .55); }
.tile.dragging { z-index: 10; cursor: grabbing; animation: none; transition: none; box-shadow: 0 40px 60px -20px rgba(0, 0, 0, .9), 0 0 0 2px #a98bff; }
.sorting .tile:not(.dragging) { animation: none; }
.tile.add { border-style: dashed; border-width: 2px; background: transparent; display: grid; place-items: center; min-height: 160px;
  cursor: pointer; animation: none !important; color: var(--dim); transition: color .3s, border-color .3s, background .3s; }
.tile.add:hover { color: var(--ink); border-color: #a98bff; background: rgba(169, 139, 255, .08); }
.tile.add svg { width: 44px; height: 44px; }
.tile.add::before { display: none; }
.tile.gone { transition: transform .35s var(--ease), opacity .35s; transform: scale(.6); opacity: 0; }

dialog.sheet { border: 1px solid var(--line); border-radius: 26px; padding: 18px; width: min(420px, calc(100vw - 24px)); color: var(--ink);
  background: rgba(22, 19, 34, .92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 40px 80px -20px #000; }
dialog.sheet[open] { animation: pop .38s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(30px) scale(.96); } }
dialog.sheet::backdrop { background: rgba(5, 4, 10, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
@media (max-width: 560px) {
  dialog.sheet { margin: auto 0 0; max-width: 100vw; width: 100vw; border-radius: 26px 26px 0 0; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  @keyframes pop { from { transform: translateY(100%); } }
}
.sheet form { display: flex; flex-direction: column; gap: 10px; }
.drop { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; cursor: pointer;
  border: 2px dashed var(--line); transition: border-color .3s, background .3s; }
.drop.over, .drop:hover { border-color: #a98bff; background: rgba(169, 139, 255, .08); }
.drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.drop img:not([src]), .drop img[src=""] { display: none; }
.drop .plus { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); }
.drop .plus svg { width: 40px; height: 40px; }
.drop img[src]:not([src=""]) + .plus { display: none; }
.sheet input { width: 100%; padding: 13px 15px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05);
  outline: none; transition: border-color .25s, background .25s; }
.sheet input:focus { border-color: #a98bff; background: rgba(169, 139, 255, .08); }
.sheet .row { display: flex; gap: 10px; margin-top: 4px; }
.sheet .row button { height: 50px; border-radius: 14px; border: 0; cursor: pointer; display: grid; place-items: center; transition: transform .2s, background .25s; }
.sheet .row button:active { transform: scale(.95); }
.sheet .row button svg { width: 22px; height: 22px; }
.sheet .save { flex: 1; background: var(--hot); color: #140b24; }
.sheet .del { width: 56px; background: rgba(255, 255, 255, .07); }
.sheet .del.armed { background: #ff4f6d; animation: shake .35s; }
.sheet.shoebox .drop, .sheet.shoebox [name=url], .sheet.shoebox [name=price], .sheet.shoebox .del, .sheet.new .del { display: none; }
.sheet.busy .drop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .12) 50%, transparent 70%) 0 0 / 250% 100%;
  animation: shimmer 1s linear infinite; }
@keyframes shimmer { to { background-position: -250% 0; } }

/* ------------------------------------------------ login */
.login { display: grid; place-items: center; min-height: 100vh; }
.gate { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 20px; }
.gate .bow { width: 96px; height: 96px; animation: float 4s ease-in-out infinite; filter: drop-shadow(0 10px 30px rgba(255, 122, 198, .5)); }
@keyframes float { 50% { transform: translateY(-10px) rotate(-4deg); } }
.gate div { display: flex; gap: 8px; }
.gate input { width: min(260px, 66vw); padding: 15px 20px; border-radius: 99px; border: 1px solid var(--line); background: var(--glass);
  text-align: center; font-size: 1.1rem; letter-spacing: .15em; outline: none; transition: border-color .3s, box-shadow .3s; }
.gate input:focus { border-color: #a98bff; box-shadow: 0 0 0 6px rgba(169, 139, 255, .15); }
.gate button { width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--hot); color: #140b24; font-size: 1.4rem; font-weight: 800; cursor: pointer; }
.wrong .gate div { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}