/* styles.css — Mina Brädspel: cinematiskt konsol-bibliotek.
   Mörk rymdgradient, glas-paneler, genre-styrd accentglöd. iOS + desktop. */
:root {
  --accent-h: 211;                          /* BARA genre-glöd/omslag — driver INTE krom-färgen */
  --accent: #0a84ff;                         /* pinnad Apple-blå (driftar ej längre per genre) */
  --accent-soft: rgba(10,132,255,0.18);
  --on-accent: #ffffff;                      /* text PÅ accent */
  --bg0: #000000;                            /* äkta svart canvas */
  --bg1: #1c1c1e;                            /* kort/sheets/barer */
  --bar: rgba(22,22,24,0.72);                /* translucent material för tabbar/header */
  --txt: #f5f5f7;
  --txt-dim: #98989f;                        /* neutral grå (ej blåtonad) */
  --glass: rgba(255,255,255,0.06);
  --glass-line: rgba(255,255,255,0.12);
  --hairline: rgba(255,255,255,0.16);        /* 0.5px-avdelare */
  --header-h: 64px;
  --tabbar-h: 64px;                          /* flytande tab-bar: innehåll flödar under den → botten-marginal på scroll-ytor */
  /* radie-skala: omslag/lådor 2px, kontroller piller, paneler/sheets större */
  --r-square: 2px;
  --r-ctl: 12px; --r-card: 16px; --r-sheet: 20px; --r-pill: 999px;
  font-synthesis: none;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
/* ren yta (matchar tema-token) så iOS aldrig visar vit standardbakgrund (overscroll/safe-area) */
html { background-color: var(--bg0); }
body {
  background: var(--bg0);
  color: var(--txt);
  font-family: ui-sans-serif, -apple-system, "SF Pro Display", "Segoe UI", Roboto, system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
/* position:fixed + inset:0 fyller HELA visual-viewporten edge-to-edge (iOS standalone-PWA
   gav annars en glipa under tabbaren när 100dvh exkluderade nedre safe-area). */
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* ---------- Header ---------- */
header {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: max(10px, env(safe-area-inset-top)) clamp(14px, 3vw, 28px) 10px;
  padding-top: max(12px, env(safe-area-inset-top));
  position: relative; z-index: 30;
}
.brand { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.brand h1 {
  font-size: clamp(18px, 2.2vw, 26px); font-weight: 700; margin: 0;
  letter-spacing: -0.022em; white-space: nowrap; color: var(--txt);
}
.count-pill {
  font-size: 12px; font-weight: 600; color: var(--txt-dim);
  background: var(--glass); border: 1px solid var(--glass-line);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.count-pill b { color: var(--accent); }
.header-spacer { flex: 1; }
.header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: 999px; padding: 8px 14px; min-width: 0;
  transition: border-color .2s, box-shadow .2s; max-width: 320px; flex: 1 1 200px;
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search svg { flex: 0 0 auto; opacity: .6; }
.search input {
  background: none; border: none; outline: none; color: var(--txt);
  font-size: 15px; width: 100%; min-width: 0;
}
.search input::placeholder { color: var(--txt-dim); }

.view-toggle { display: flex; gap: 2px; background: var(--glass); border: 0.5px solid var(--glass-line); border-radius: var(--r-pill); padding: 3px; flex: 0 0 auto; }
.theme-toggle .tt-opt {
  border: 0; background: none; color: var(--txt-dim); cursor: pointer;
  width: 38px; height: 32px; border-radius: var(--r-pill);
  display: grid; place-items: center; transition: .18s ease;
}
.theme-toggle .tt-opt svg { width: 18px; height: 18px; }
/* aktiv = upphöjd NEUTRAL platta (iOS segmented control), inte accent */
.theme-toggle .tt-opt.active { background: var(--bg1); color: var(--txt); box-shadow: 0 1px 3px rgba(0,0,0,.25); }

/* ---------- Filter rail ---------- */
.filters {
  flex: 0 0 auto; position: relative; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: 4px clamp(14px, 3vw, 28px) 12px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.filters::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--txt-dim);
  background: var(--glass); border: 1px solid var(--glass-line);
  padding: 8px 13px; border-radius: 999px; white-space: nowrap;
  transition: .18s;
}
.chip:hover { color: var(--txt); border-color: rgba(255,255,255,0.2); }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 8px currentColor; }
.chip .n { font-size: 11px; opacity: .65; font-weight: 700; }
.chip.active { color: var(--on-accent); background: var(--c, var(--accent)); border-color: transparent; }
.chip.active .n { opacity: .8; }
.chip.active .dot { box-shadow: none; background: rgba(0,0,0,0.35) !important; }
.chip.toggle.active { color: var(--on-accent); background: #ffd86b; }
.divider { flex: 0 0 auto; width: 1px; height: 22px; background: var(--glass-line); margin: 0 4px; }
.sort-wrap { flex: 0 0 auto; position: relative; }
select.sort {
  appearance: none; cursor: pointer; color: var(--txt-dim); font-weight: 600; font-size: 13px;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 999px;
  padding: 8px 30px 8px 13px; outline: none;
}
.sort-wrap::after { content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--txt-dim); font-size: 11px; }

/* ---------- Stage ---------- */
.stage { flex: 1 1 auto; position: relative; min-height: 0; }
#gl { display: block; width: 100%; height: 100%; touch-action: none; }

/* Focus-HUD (3D) */
.hud {
  position: absolute; left: 50%; bottom: clamp(16px, 4vh, 40px); transform: translateX(-50%);
  width: min(560px, calc(100% - 32px)); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  opacity: 0; transition: opacity .4s;
}
.hud.show { opacity: 1; }
.hud::before {
  content: ""; position: absolute; inset: -28px -60px; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(3,5,12,0.78), transparent 72%); filter: blur(6px);
}
.hud .meta-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.hud h2 {
  margin: 0; font-size: clamp(18px, 2.6vw, 24px); font-weight: 800; letter-spacing: -0.02em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.9);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hud .sub { color: var(--txt-dim); font-size: 14px; }
.hud .open-btn {
  pointer-events: auto; cursor: pointer; margin-top: 4px;
  background: var(--accent); color: var(--on-accent); border: none; font-weight: 700; font-size: 15px;
  padding: 11px 26px; border-radius: 999px; box-shadow: 0 8px 30px var(--accent-soft);
  transition: transform .15s, box-shadow .2s;
}
.hud .open-btn:hover { transform: translateY(-2px); }
.hud .hint { color: var(--txt-dim); font-size: 12px; opacity: .7; }
.nav-arrow {
  position: absolute; top: 45%; transform: translateY(-50%); z-index: 5;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--txt);
  font-size: 22px; display: flex; align-items: center; justify-content: center;
  transition: .2s; backdrop-filter: blur(8px);
}
.nav-arrow:hover { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.nav-arrow.prev { left: clamp(8px, 2vw, 28px); }
.nav-arrow.next { right: clamp(8px, 2vw, 28px); }
@media (hover: none) { .nav-arrow { display: none; } }

/* badges */
.badge {
  font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--txt-dim);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.badge.genre { color: var(--on-accent); }
.badge.fav { background: linear-gradient(90deg,#ffd86b,#ffb13b); color:#3a2700; border-color: transparent; }
.badge.solo { background: hsla(168,80%,45%,0.18); color: #6ff0c8; border-color: hsla(168,80%,45%,0.3); }
.badge.exp { background: hsla(280,70%,60%,0.18); color: #d6a8ff; border-color: hsla(280,70%,60%,0.3); }
.badge.review { background: hsla(40,90%,55%,0.16); color:#ffce6b; border-color: hsla(40,90%,55%,0.3); }

/* ---------- Grid ---------- */
.grid-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 6px clamp(14px, 3vw, 28px) calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom)); }
.grid {
  display: grid; gap: clamp(10px, 1.5vw, 20px);
  grid-template-columns: repeat(var(--cols, 3), 1fr);
}
.card {
  position: relative; aspect-ratio: 5 / 7; border-radius: 14px; overflow: hidden;
  cursor: pointer; background: #0c1120; border: 1px solid var(--glass-line);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, border-color .22s;
  opacity: 0; transform: translateY(14px); animation: cardIn .5s forwards;
}
@keyframes cardIn { to { opacity: 1; transform: none; } }
.card canvas { width: 100%; height: 100%; display: block; }
.card .cover-img { width: 100%; height: 100%; display: block; object-fit: cover; }
.card .ph { position: absolute; inset: 0; }
.card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px var(--accent); z-index: 2; }
.card .corner { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.card .corner .pip { width: 22px; height: 22px; border-radius: 50%; display:flex; align-items:center; justify-content:center; font-size: 12px; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
.empty { text-align: center; color: var(--txt-dim); padding: 60px 20px; font-size: 16px; }

/* ---------- Detail overlay ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: clamp(12px, 4vw, 40px);
}
.overlay.show { display: flex; }
.overlay .scrim { position: absolute; inset: 0; background: rgba(2,4,10,0.72); backdrop-filter: blur(10px); opacity: 0; transition: opacity .3s; }
.overlay.show .scrim { opacity: 1; }
.sheet {
  position: relative; z-index: 1; width: min(820px, 100%); max-height: 90dvh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 0;
  background: linear-gradient(160deg, rgba(20,26,44,0.96), rgba(10,14,26,0.98));
  border: 1px solid var(--glass-line); border-radius: 24px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 0 1px var(--accent-soft);
  transform: translateY(24px) scale(.98); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.overlay.show .sheet { transform: none; opacity: 1; }
.sheet .cover { position: relative; background: #06090f; min-height: 240px; }
.sheet .cover canvas, .sheet .cover .cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheet .cover .glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, var(--accent-soft), transparent 70%); pointer-events: none; }
.sheet .body { padding: clamp(18px, 2.5vw, 30px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet h2 { margin: 0 0 4px; font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.sheet .akaname { color: var(--txt-dim); font-size: 14px; margin-bottom: 14px; }
.sheet .badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 18px; }
.fact { min-width: 0; }
.fact .k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--txt-dim); margin-bottom: 2px; }
.fact .v { font-size: 15px; font-weight: 600; word-wrap: break-word; }
.stars { color: #ffd86b; font-size: 16px; letter-spacing: 2px; }
.stars .off { color: rgba(255,255,255,0.18); }
.notes { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 12px; padding: 12px 14px; font-size: 14px; color: #d6def7; line-height: 1.5; margin-bottom: 16px; }
.notes .k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--txt-dim); }
.taglist { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.taglist .tag { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); color: #c4cde8; }
.desc { font-size: 13.5px; color: #b9c2dc; line-height: 1.6; }
.desc.clamp { max-height: 8.4em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent); mask-image: linear-gradient(180deg, #000 68%, transparent); }
.desc-wrap { margin-bottom: 16px; }
.desc-toggle { margin-top: 6px; background: none; border: none; color: var(--accent); font-weight: 700; font-size: 13px; cursor: pointer; padding: 4px 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  cursor: pointer; border: 1px solid var(--glass-line); background: var(--glass); color: var(--txt);
  font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 12px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px; transition: .18s;
}
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn:hover { transform: translateY(-2px); }
.close-x {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,0.5); border: 1px solid var(--glass-line); color: #fff; cursor: pointer;
  font-size: 18px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px);
}
.close-x:hover { background: var(--accent); color:var(--on-accent); }

/* loader */
#loader { position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; flex-direction: column; gap: 16px; z-index: 200; background: var(--bg0); transition: opacity .5s; }
#loader.hide { opacity: 0; pointer-events: none; }
.spinner { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.12); border-top-color: var(--accent); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#loader .t { color: var(--txt-dim); font-size: 14px; font-weight: 600; }

/* ---------- Hylla (mörk trä-bokhylla) ---------- */
.shelf-scroll {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  padding: 16px clamp(12px, 2.6vw, 30px) calc(34px + env(safe-area-inset-bottom));
  /* mörkt valnötsträ: planka-grain + djup */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0.12) 8%, rgba(0,0,0,0.12) 92%, rgba(0,0,0,0.5)),
    repeating-linear-gradient(91deg, #2a1c0f 0, #34230f 2px, #2d1e0d 5px, #3a2812 7px, #2a1b0e 9px, #322110 12px),
    linear-gradient(180deg, #3c2916, #241608);
}
.shelf {
  --shelf-h: clamp(116px, 16.5vw, 168px);   /* omslagens (rad)höjd */
  --ledge: 22px;                             /* hyllkantens tjocklek = radens vertikala lucka */
  --gap-x: clamp(9px, 1.5vw, 18px);
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--ledge) var(--gap-x);
  /* trä-hyllkant i varje rad-lucka: highlight-egg + planka + skugga, repeterad per rad */
  background-image: repeating-linear-gradient(180deg,
    transparent 0,
    transparent var(--shelf-h),
    rgba(255,226,180,0.16) var(--shelf-h),
    rgba(255,226,180,0.16) calc(var(--shelf-h) + 1.5px),
    #43301a calc(var(--shelf-h) + 2px),
    #2c1d0f calc(var(--shelf-h) + var(--ledge) - 5px),
    rgba(0,0,0,0.65) calc(var(--shelf-h) + var(--ledge) - 1px),
    transparent calc(var(--shelf-h) + var(--ledge)));
  background-repeat: repeat;
}
.shelf-item {
  height: var(--shelf-h); aspect-ratio: 5 / 7; flex: 0 0 auto; position: relative;
  border-radius: 5px; overflow: hidden; background: #0c1120; cursor: pointer;
  /* står på hyllan: kontakt-skugga nedåt */
  box-shadow: 0 9px 13px -5px rgba(0,0,0,0.85), 0 2px 5px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.4);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s;
}
.shelf-item img, .shelf-item canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.shelf-item .ph { position: absolute; inset: 0; }
.shelf-item:hover { transform: translateY(-6px); box-shadow: 0 18px 26px -6px rgba(0,0,0,0.9), 0 0 0 1px var(--accent); z-index: 3; }
.shelf-item:active { transform: translateY(-3px) scale(1.015); }

/* ---------- Installera-som-app ---------- */
.install-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent);
  font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 999px; transition: .18s;
}
.install-btn:hover { background: var(--accent); color: var(--on-accent); }
.install-btn svg { flex: 0 0 auto; }
.install-overlay { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; padding: 20px; }
.install-overlay[hidden] { display: none; }
.install-scrim { position: absolute; inset: 0; background: rgba(2,4,10,0.72); backdrop-filter: blur(10px); opacity: 0; transition: opacity .25s; }
.install-overlay.show .install-scrim { opacity: 1; }
.install-card {
  position: relative; z-index: 1; width: min(420px, 100%);
  background: linear-gradient(160deg, rgba(20,26,44,0.97), rgba(10,14,26,0.99));
  border: 1px solid var(--glass-line); border-radius: 22px; padding: 26px 24px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 0 1px var(--accent-soft);
  transform: translateY(20px) scale(.97); opacity: 0; transition: .3s cubic-bezier(.2,.8,.2,1);
}
.install-overlay.show .install-card { transform: none; opacity: 1; }
.install-card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.install-lede { color: var(--txt-dim); font-size: 14px; margin: 0 0 18px; line-height: 1.5; }
.install-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.install-steps li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; line-height: 1.4; color: #d6def7; }
.install-steps li b { color: #fff; }
.install-steps .ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.install-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,0.4); border: 1px solid var(--glass-line); color: #fff; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.install-x:hover { background: var(--accent); color: var(--on-accent); }

/* ---------- Hero-spotlight (rutnäts-vyn, Xbox-känsla) ---------- */
.hero {
  grid-column: 1 / -1; position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2.4vw, 28px); align-items: center;
  padding: clamp(16px, 2.2vw, 26px); border-radius: 22px; cursor: pointer;
  border: 1px solid var(--glass-line);
  background: linear-gradient(110deg, rgba(22,30,54,0.65), rgba(8,11,22,0.25));
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--herobg);
  background-size: cover; background-position: center 32%; filter: blur(46px) saturate(1.5);
  opacity: .42; transform: scale(1.4);
}
.hero:hover { transform: translateY(-3px); box-shadow: 0 22px 60px rgba(0,0,0,0.5); border-color: var(--accent); }
.hero .hero-cover { width: clamp(100px, 12vw, 152px); aspect-ratio: 5/7; border-radius: 13px; overflow: hidden; box-shadow: 0 14px 44px rgba(0,0,0,0.6); flex: 0 0 auto; background:#0c1120; }
.hero .hero-cover img, .hero .hero-cover canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero .hero-info { min-width: 0; }
.hero .hero-tag { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 7px; }
.hero .hero-info h2 { margin: 0 0 10px; font-size: clamp(21px, 3vw, 32px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; }
.hero .hero-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.hero .hero-open { display: inline-flex; align-items: center; gap: 7px; background: var(--accent); color: var(--on-accent); border: none; font-weight: 700; font-size: 14px; padding: 11px 22px; border-radius: 999px; cursor: pointer; box-shadow: 0 8px 26px var(--accent-soft); transition: transform .15s; }
.hero .hero-open:hover { transform: translateY(-2px); }

/* tap-feedback för touch (3D saknar hover) */
.card:active { transform: scale(.97); }

/* ---------- Mobil ---------- */
@media (max-width: 720px) {
  header { flex-wrap: wrap; gap: 8px 10px; }
  .brand { order: 1; flex: 0 1 auto; min-width: 0; }   /* krymper (men växer ej) så höger-klustret ALLTID får plats på rad 1 */
  .count-pill { display: none; }                        /* döljs på mobil → titel + höger-kluster får plats på en rad */
  .brand h1 { font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header-spacer { display: none; }
  .header-actions { order: 2; margin-left: auto; }   /* atomiskt höger-kluster (tema+⚙️) — IDENTISKT på alla flikar */
  .view-toggle button { padding: 7px 12px; }
  .install-btn { padding: 8px 11px; }
  .install-btn .lbl { display: none; }          /* ikon-only på mobil */
  .search { order: 3; flex-basis: 100%; max-width: none; }

  /* detalj-panel som botten-sheet */
  .overlay { align-items: flex-end; padding: 0; }
  .sheet {
    display: block;   /* INTE grid på mobil — grid-rad kollapsar med aspect-ratio → överlapp */
    width: 100%; max-width: none; max-height: 90dvh;
    border-radius: 22px 22px 0 0; transform: translateY(100%);
    overflow-y: auto; -webkit-overflow-scrolling: touch;   /* omslag + innehåll skrollar som ETT */
  }
  .overlay.show .sheet { transform: none; }
  .sheet::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.28); z-index: 4; }
  /* omslag: naturlig proportion (JS), inget höjd-tak → helt omslag, INGEN letterbox-ram */
  .sheet .cover, .sheet button.cover { aspect-ratio: 5 / 7; max-height: none; min-height: 0; }
  .sheet .cover img, .sheet .cover canvas { object-fit: cover; object-position: center; }
  .sheet .body { overflow: visible; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

  /* install-popover som botten-sheet */
  .install-overlay { align-items: flex-end; padding: 0; }
  .install-card { width: 100%; border-radius: 22px 22px 0 0; transform: translateY(100%); padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
  .install-overlay.show .install-card { transform: none; }

  /* hero kompakt */
  .hero { gap: 14px; padding: 14px; border-radius: 18px; }
  .hero .hero-info h2 { font-size: 20px; margin-bottom: 8px; }
  .hero .hero-open { padding: 9px 18px; font-size: 13px; }

  .hud h2 { font-size: 22px; }
  .facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .grid { gap: 11px; }
  .grid-scroll { padding-left: 14px; padding-right: 14px; }
}

/* ════════ FAS A: tema, knappar, spelvy, ryggar, täthet, spelsug ════════ */

/* ---------- Ljust läge ---------- */
html[data-theme="light"] {
  --accent: #007aff; --accent-soft: rgba(0,122,255,0.12);
  --bg0: #f5f5f7; --bg1: #ffffff;
  --bar: rgba(255,255,255,0.80);
  --txt: #1c1c1e; --txt-dim: #6c6c72;
  --glass: rgba(0,0,0,0.04); --glass-line: rgba(0,0,0,0.10);
  --hairline: rgba(0,0,0,0.13);
}
html[data-theme="light"] body { background: var(--bg0); }
html[data-theme="light"] .brand h1 { color: var(--txt); }
html[data-theme="light"] .card, html[data-theme="light"] .shelf-item, html[data-theme="light"] .spel-cover { background: #e9e9ee; }

/* ---------- Vy-/tema-knappar ---------- */
.vbtn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 0.5px solid var(--glass-line); background: var(--glass); color: var(--txt);
  font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: var(--r-pill); transition: .18s;
}
.vbtn:hover { border-color: var(--accent); color: var(--accent); }
.vbtn:active { transform: scale(.94); }
.vbtn.icon { width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; color: var(--txt-dim); }
.vbtn.icon svg { width: 20px; height: 20px; }

/* ---------- Täthet (rutnät) ---------- */
.density-bar { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.dbtn { border: 1px solid var(--glass-line); background: var(--glass); color: var(--txt-dim); font-weight: 600; font-size: 12px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.dbtn.active { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.card .corner .pip-badge { min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); }

/* ---------- Spelsug-betyg ---------- */
.spelsug { display: inline-flex; gap: 3px; }
.spelsug .pip { color: var(--txt-dim); opacity: .3; font-size: 13px; }
.spelsug .pip.on { color: var(--accent); opacity: 1; }
.spelsug.big .pip { font-size: 18px; }

/* ---------- Spelvy (ett spel i taget) ---------- */
.spel-view { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 30px); padding-bottom: calc(var(--tabbar-h) + 30px + env(safe-area-inset-bottom)); }
.spel-card { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: clamp(20px, 3vw, 44px); align-items: center; max-width: 840px; width: 100%; }
.spel-cover { aspect-ratio: 5 / 7; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.5); cursor: pointer; background: #0c1120; }
.spel-cover img, .spel-cover canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.spel-info h2 { font-size: clamp(24px, 3.2vw, 38px); font-weight: 800; margin: 10px 0; letter-spacing: -0.02em; line-height: 1.05; }
.spel-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.spel-sug { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.spel-sug-lbl { color: var(--txt-dim); font-size: 14px; }
.spel-quick { display: flex; flex-wrap: wrap; gap: 14px; color: var(--txt-dim); font-size: 14px; margin-bottom: 16px; }
.spel-quick span { white-space: nowrap; }
.spel-info .open-btn { background: var(--accent); color: var(--on-accent); border: none; font-weight: 700; font-size: 15px; padding: 12px 26px; border-radius: 999px; cursor: pointer; box-shadow: 0 8px 30px var(--accent-soft); }
.spel-count { color: var(--txt-dim); font-size: 12px; margin-top: 12px; }
.spel-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px; border-radius: 50%; background: var(--glass); border: 1px solid var(--glass-line); color: var(--txt); font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .2s; }
.spel-nav:hover { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.spel-nav.prev { left: clamp(6px, 2vw, 24px); }
.spel-nav.next { right: clamp(6px, 2vw, 24px); }
/* på touch: visa pilarna (annars osynlig svep-navigering → kändes "fast"). */
@media (hover: none) { .spel-nav { opacity: .92; } }

/* ---------- Ryggar (faux-bokhylla) ---------- */
.spine-wrap {
  --shelf-h: clamp(140px, 22vw, 210px); --ledge: 22px;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ledge) 4px;
  background-image: repeating-linear-gradient(180deg,
    transparent 0, transparent var(--shelf-h),
    rgba(255,226,180,0.16) var(--shelf-h), rgba(255,226,180,0.16) calc(var(--shelf-h) + 1.5px),
    #43301a calc(var(--shelf-h) + 2px), #2c1d0f calc(var(--shelf-h) + var(--ledge) - 5px),
    rgba(0,0,0,0.65) calc(var(--shelf-h) + var(--ledge) - 1px), transparent calc(var(--shelf-h) + var(--ledge)));
}
.spine-item {
  height: var(--shelf-h); flex: 0 0 auto; border-radius: 3px; cursor: pointer; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 9px 2px; overflow: hidden; position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), inset 3px 0 5px rgba(255,255,255,0.12), 0 8px 12px -4px rgba(0,0,0,0.8), 2px 0 4px rgba(0,0,0,0.5);
  transition: transform .16s;
}
.spine-item:hover { transform: translateY(-7px); z-index: 2; }
.spine-title { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; font-size: 12px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 100%; text-shadow: 0 1px 2px rgba(0,0,0,0.6); flex: 1 1 auto; margin: 4px 0; }
.spine-foot { font-size: 9px; opacity: .7; }

/* ---------- Detalj: spelsug-box + ihopfällbar beskrivning ---------- */
.sug-box { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; }
.sug-box .k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--txt-dim); margin-bottom: 5px; }
.sug-row { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }

/* ---------- Mobil (Fas A-element) ---------- */
@media (max-width: 720px) {
  .vbtn { order: 2; padding: 8px 11px; }
  .vbtn .lbl { display: none; }
  #themeToggle { order: 2; }
  .spel-card { grid-template-columns: 1fr; gap: 16px; text-align: center; max-width: 340px; }
  .spel-cover { max-width: 210px; margin: 0 auto; width: 100%; }
  .spel-badges, .spel-sug, .spel-quick { justify-content: center; }
  .spel-info h2 { font-size: 24px; }
}

/* ════════════════════════════════════════════════════════════════════
   FAS A.5 — Apple-UX (tema-ärvande sheet · scrim · typografi/4pt · träffytor)
   100% ADDITIVT, variabel-baserat: mörka default = nuvarande utseende ⇒
   mörkt läge och de fyra vyerna oförändrade. (multi-agent jury-syntes)
   ════════════════════════════════════════════════════════════════════ */

/* ── 0. TOKENS: typroller (rem ⇒ Dynamic Type) + 4pt-skala + sheet-material ── */
:root {
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  --t-large-title: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);     /* 24→36 */
  --t-title:       clamp(1.375rem, 1.1rem + 1.4vw, 1.875rem);/* 22→30 */
  --t-headline:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);  /* 17→20 */
  --t-body:        clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);   /* 15→16 */
  --t-footnote:    0.8125rem;  /* 13 */
  --t-caption:     0.6875rem;  /* 11 */
  --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.5;

  --sheet-bg: linear-gradient(160deg, rgba(20,26,44,0.88), rgba(10,14,26,0.94));
  --sheet-blur: saturate(180%) blur(30px);
  --sheet-line: var(--glass-line);
  --sheet-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 0 1px var(--accent-soft);
  --on-sheet: var(--txt);
  --on-sheet-dim: var(--txt-dim);
  --grabber: rgba(255,255,255,0.30);
  --cover-bg: #06090f;
}
html[data-theme="light"] {
  --sheet-bg: linear-gradient(160deg, rgba(255,255,255,0.84), rgba(244,247,252,0.92));
  --sheet-line: rgba(20,32,64,0.14);
  --sheet-shadow: 0 30px 90px rgba(20,32,64,0.22), 0 0 0 1px rgba(20,32,64,0.06);
  --on-sheet: #1b2333;
  --on-sheet-dim: #5d6883;
  --grabber: rgba(20,32,64,0.26);
  --cover-bg: #d7deec;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --sheet-bg: linear-gradient(160deg, #141a2c, #0a0e1a); }
  html[data-theme="light"] { --sheet-bg: linear-gradient(160deg, #ffffff, #eef2f9); }
}

/* ── 1. TEMA-ÄRVANDE SHEET + INSTALL-KORT (material/vibrancy + grabber) ──── */
.sheet,
.install-card {
  background: var(--sheet-bg);
  -webkit-backdrop-filter: var(--sheet-blur);
  backdrop-filter: var(--sheet-blur);
  border-color: var(--sheet-line);
  color: var(--on-sheet);
  box-shadow: var(--sheet-shadow);
}
.sheet .cover { background: var(--cover-bg); }
.sheet h2,
.sheet .notes,
.install-card h3,
.install-steps li,
.install-steps li b { color: var(--on-sheet); }
.sheet .akaname,
.sheet .desc,
.sheet .taglist .tag,
.install-lede { color: var(--on-sheet-dim); }
.close-x, .install-x { background: rgba(0,0,0,0.5); color: #fff; border-color: var(--sheet-line); }
.close-x:hover, .install-x:hover { background: var(--accent); color: var(--on-accent); }
.sheet > .grabber {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 5px; border-radius: 3px; background: var(--grabber);
  z-index: 4; pointer-events: none;
}
.sheet::before { display: none; }
@media (min-width: 721px) { .sheet .body { padding-top: clamp(22px, 2.5vw, 30px); } }

/* ── 2. ÅTERANVÄNDBAR SCRIM UNDER TEXT-PÅ-BILD (WCAG ≥4.5:1) ── */
.scrim-text { position: relative; isolation: isolate; }
.scrim-text::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg,
    rgba(2,4,10,0.82) 0%, rgba(2,4,10,0.6) 32%, rgba(2,4,10,0.18) 64%, transparent 100%);
}
.hero .hero-info { position: relative; isolation: isolate; }
.hero .hero-info::before {
  content: ""; position: absolute; inset: -8px -14px -8px -16px; z-index: -1;
  pointer-events: none; border-radius: 14px;
  background: linear-gradient(100deg,
    rgba(2,4,10,0.72) 0%, rgba(2,4,10,0.45) 55%, rgba(2,4,10,0.12) 100%);
}
.hero .hero-info h2 { color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,0.6); }
.hero .hero-tag { color: hsl(var(--accent-h), 100%, 80%); text-shadow: 0 1px 10px rgba(0,0,0,0.6); }
.hud::before {
  background: radial-gradient(ellipse at center,
    rgba(2,4,10,0.88), rgba(2,4,10,0.7) 45%, transparent 78%);
  inset: -32px -64px;
}
.hud h2 { color: #fff; }
.hud .sub { color: #cfd6ee; }

/* ── 3. TYPOGRAFI-ROLLER (additivt; bara font-size/line-height) ── */
.spel-info h2        { font-size: var(--t-large-title); line-height: var(--lh-tight); }
.sheet h2            { font-size: var(--t-title);       line-height: var(--lh-tight); }
.hero .hero-info h2  { font-size: var(--t-title);       line-height: var(--lh-tight); }
.install-card h3     { font-size: var(--t-headline);    line-height: var(--lh-snug); }
.fact .v             { font-size: var(--t-body);        line-height: var(--lh-snug); }
.fact .k             { font-size: var(--t-caption); }
.sug-box .k, .notes .k { font-size: var(--t-caption); }
.badge               { font-size: var(--t-footnote); }
.sheet .desc         { font-size: var(--t-body);        line-height: var(--lh-body); }
.sheet .notes        { font-size: var(--t-body);        line-height: var(--lh-body); }

/* ── 4. ≥44px TRÄFFYTOR + DYNAMIC TYPE ── */
.dbtn  { min-height: 44px; display: inline-flex; align-items: center; }
.vbtn  { min-height: 44px; }
.chip  { min-height: 40px; }
select.sort { min-height: 44px; }
.close-x, .install-x { width: 44px; height: 44px; }
.desc-toggle { min-height: 44px; }
.btn, .hero .hero-open, .hud .open-btn, .spel-info .open-btn { min-height: 44px; }
.hud h2 {
  white-space: normal; text-overflow: clip; line-height: var(--lh-tight);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.spel-info h2, .install-card h3 { white-space: normal; overflow: visible; }

/* ── 5. Respektera reducerad rörelse ── */
@media (prefers-reduced-motion: reduce) {
  .card, .sheet, .install-card, .hero, .shelf-item, .spine-item,
  .overlay .scrim, .install-scrim, .nav-arrow, .spel-nav {
    transition-duration: 0.001ms !important; animation-duration: 0.001ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   TEMA-GENOMSYRANDE TRÄ — mörk valnöt (mörkt läge) ⇄ ljus ek (ljust läge)
   så hela sidan känns enhetlig per tema. Variabel-driven; appliceras sist
   ⇒ ersätter de tidigare hårdkodade mörka trä-färgerna. ════════════════ */
/* Hylla & Ryggar — ren Apple-yta (ersätter det gamla trä-temat). Mjuk bakgrund +
   tunna hairline-hyllor per tema, så vyerna matchar resten av utseendet. */
.shelf-scroll {
  background: linear-gradient(180deg, var(--bg0), var(--bg1) 55%, var(--bg0));
}
.shelf, .spine-wrap {
  background-image: repeating-linear-gradient(180deg,
    transparent 0, transparent calc(var(--shelf-h) + var(--ledge) - 1.5px),
    var(--hairline) calc(var(--shelf-h) + var(--ledge) - 1.5px), var(--hairline) calc(var(--shelf-h) + var(--ledge)));
}
.hero { background: linear-gradient(110deg, var(--glass), transparent); }
html[data-theme="light"] .shelf-item { box-shadow: 0 8px 16px -6px rgba(0,0,0,0.20), 0 2px 5px rgba(0,0,0,0.10), 0 0 0 1px var(--glass-line); }

/* ════════════════════════════════════════════════════════════════════
   FAS A.6 — DETALJVY OMBYGGD (MITT vs BGG · emoji-fakta · omslag→zoom)
   100% ADDITIVT, tema-säkert (--on-sheet*/--accent/--cover-bg + color-mix
   m. @supports-fallback). Behåller .sheet 2-kol-grid + mobil-botten-sheet.
   (multi-agent jury-syntes) ════════════════════════════════════════════ */

/* ── OMSLAG som tryckbar knapp ── */
.sheet button.cover {
  appearance: none; -webkit-appearance: none; border: 0; margin: 0; padding: 0;
  width: 100%; height: 100%; min-width: 0; font: inherit; color: inherit; text-align: inherit;
  position: relative; background: var(--cover-bg); min-height: 240px;
  cursor: zoom-in; display: block; overflow: hidden;
}
.sheet button.cover .cover-img,
.sheet button.cover canvas { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.sheet button.cover:hover .cover-img,
.sheet button.cover:hover canvas { transform: scale(1.04); }
.sheet .cover-hint {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: #fff; background: rgba(0,0,0,0.46);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.16);
  opacity: 0; transform: scale(.9); transition: opacity .2s, transform .2s;
}
.sheet button.cover:hover .cover-hint,
.sheet button.cover:focus-visible .cover-hint { opacity: 1; transform: none; }
@media (hover: none) { .sheet .cover-hint { opacity: .9; transform: none; } }

/* ── Rubrik-block ── */
.d-head { margin-bottom: var(--s3); }
.d-head h2 { margin: 0 0 4px; font-size: var(--t-title); line-height: var(--lh-tight);
  font-weight: 800; letter-spacing: -0.02em; color: var(--on-sheet); }
.d-head .sub-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  color: var(--on-sheet-dim); font-size: var(--t-footnote); }
.d-head .yr { font-weight: 700; }
.d-head .aka { opacity: .8; }

/* ── SEKTIONS-KORT (MITT / BGG) ── */
.card-sec {
  position: relative; border-radius: 16px; padding: 12px; margin-bottom: var(--s3);
  background: color-mix(in srgb, var(--on-sheet) 4%, transparent);
  border: 1px solid var(--sheet-line);
}
@supports not (background: color-mix(in srgb, red, blue)) { .card-sec { background: rgba(127,127,127,0.06); } }
.card-sec .sec-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-caption); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-sheet-dim); margin-bottom: 10px;
}
.card-sec .sec-tab .e { font-size: 13px; }
.card-sec.mine { border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent); }
@supports not (background: color-mix(in srgb, red, blue)) { .card-sec.mine { background: var(--accent-soft); } }
.card-sec.mine .sec-tab { color: var(--accent); }
.card-sec.bgg { border-left: 3px solid color-mix(in srgb, var(--on-sheet) 22%, transparent); }
@supports not (background: color-mix(in srgb, red, blue)) { .card-sec.bgg { border-left-color: var(--sheet-line); } }
.card-sec .rev {
  margin-left: 6px; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; text-transform: none;
  background: hsla(40,90%,55%,0.18); color: #c98a18; border: 1px solid hsla(40,90%,55%,0.35);
}
html[data-theme="dark"] .card-sec .rev { color: #ffce6b; }

/* ── MITT: ikon-rad ── */
.mine-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mine-empty { color: var(--on-sheet-dim); font-size: var(--t-footnote); font-style: italic; }
.mc {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-footnote); font-weight: 700; color: var(--on-sheet);
  background: color-mix(in srgb, var(--on-sheet) 7%, transparent);
  border: 1px solid var(--sheet-line); border-radius: 999px;
  padding: 6px 11px; white-space: nowrap; line-height: 1;
}
@supports not (background: color-mix(in srgb, red, blue)) { .mc { background: rgba(127,127,127,0.10); } }
.mc.sug { gap: 7px; }
.mc.sug .spelsug .pip { font-size: 13px; }
.mc.salj { color: #fff; border-color: transparent; }
.mc.salj.sell { background: linear-gradient(90deg,#ff7a59,#ff4d6d); }
.mc.salj.keep { background: linear-gradient(90deg,#2fa36b,#1f8f7a); }
.mc.salj.maybe{ background: linear-gradient(90deg,#d9a21e,#e0791a); }
button.mc.note-open { cursor: pointer; font-family: inherit;
  background: var(--accent); color: var(--on-accent); border-color: transparent; }
button.mc.note-open:hover { filter: brightness(1.06); }
.note-body {
  margin-top: 10px; padding: 11px 13px; border-radius: 11px;
  background: color-mix(in srgb, var(--on-sheet) 6%, transparent);
  border: 1px solid var(--sheet-line);
  color: var(--on-sheet); font-size: var(--t-body); line-height: var(--lh-body);
  white-space: pre-wrap;
}
@supports not (background: color-mix(in srgb, red, blue)) { .note-body { background: rgba(127,127,127,0.07); } }
.sell-slot {
  margin-top: 10px; display: flex; align-items: center; gap: 6px;
  font-size: var(--t-footnote); color: var(--on-sheet-dim);
  border: 1px dashed var(--sheet-line); border-radius: 11px; padding: 8px 12px;
}
.sell-slot b { color: var(--on-sheet); font-weight: 700; }

/* ── BGG: typ-rad ── */
.type-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.tchip { font-size: var(--t-footnote); font-weight: 700; border-radius: 999px;
  padding: 5px 11px; line-height: 1; border: 1px solid var(--sheet-line); color: var(--on-sheet);
  background: color-mix(in srgb, var(--on-sheet) 8%, transparent); }
@supports not (background: color-mix(in srgb, red, blue)) { .tchip { background: rgba(127,127,127,0.10); } }
.tchip.t-main { color: var(--on-accent); border-color: transparent; }
.tchip.t-cat { font-weight: 600; color: var(--on-sheet-dim); }

/* ── BGG: fakta-pärlor ── */
.bf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.bf {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 1px; padding: 9px 6px; border-radius: 12px;
  background: color-mix(in srgb, var(--on-sheet) 5%, transparent);
  border: 1px solid var(--sheet-line); min-width: 0;
}
@supports not (background: color-mix(in srgb, red, blue)) { .bf { background: rgba(127,127,127,0.07); } }
.bf .e { font-size: 17px; line-height: 1.1; }
.bf b { font-size: var(--t-body); font-weight: 800; color: var(--on-sheet);
  line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bf i { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--on-sheet-dim); }

/* ── BGG: läsblock (beskrivning) ── */
.read { margin-bottom: 14px; }
.read-head { display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-footnote); font-weight: 800; color: var(--on-sheet); margin-bottom: 6px; }
.read-body { font-size: var(--t-body); line-height: var(--lh-body); color: var(--on-sheet-dim); }
.read-body.clamp {
  max-height: 8.4em; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 66%, transparent);
  mask-image: linear-gradient(180deg, #000 66%, transparent);
}
.read-more { margin-top: 4px; background: none; border: 0; cursor: pointer;
  color: var(--accent); font-weight: 800; font-size: var(--t-footnote);
  padding: 8px 0; min-height: 44px; font-family: inherit; }

/* ── BGG: metarader ── */
.bm-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.bm { display: flex; align-items: center; gap: 9px; font-size: var(--t-footnote);
  color: var(--on-sheet); line-height: 1.35; }
.bm .e { flex: 0 0 auto; width: 18px; text-align: center; font-size: 14px; opacity: .9; }
.bm span:last-child { min-width: 0; word-break: break-word; }

/* ── BGG: mekanik (ihopfälld) ── */
.mech { margin-top: 2px; }
.mech > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-footnote); font-weight: 700; color: var(--on-sheet-dim);
  padding: 8px 0; min-height: 44px;
}
.mech > summary::-webkit-details-marker { display: none; }
.mech > summary::after { content: "▾"; margin-left: 2px; font-size: 11px; transition: transform .2s; }
.mech[open] > summary::after { transform: rotate(180deg); }
.mech .taglist { margin: 4px 0; }
.mech .tag { font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--on-sheet) 7%, transparent);
  border: 1px solid var(--sheet-line); color: var(--on-sheet-dim); }
@supports not (background: color-mix(in srgb, red, blue)) { .mech .tag { background: rgba(127,127,127,0.08); } }

/* ════ COVER-ZOOM LIGHTBOX ════ */
.zoom-overlay {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(2,4,10,0.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  touch-action: none; overscroll-behavior: contain;
  -webkit-user-select: none; user-select: none;
}
.zoom-overlay.show { display: block; }
.zoom-stage { position: absolute; inset: 0; overflow: hidden; cursor: zoom-out; touch-action: none; }
.zoom-node {
  position: absolute; top: 50%; left: 50%;
  max-width: 96vw; max-height: 92dvh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 40px 120px rgba(0,0,0,0.7);
  transform: translate(-50%,-50%); transform-origin: center center;
  will-change: transform; -webkit-user-drag: none; -webkit-touch-callout: none;
}
.zoom-node.animating { transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.zoom-close {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.18); color: #fff;
  font-size: 19px; display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.zoom-close:hover { background: var(--accent); color: var(--on-accent); }
.zoom-hint {
  position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  color: rgba(255,255,255,0.72); font-size: 12px; font-weight: 600;
  background: rgba(0,0,0,0.4); padding: 6px 13px; border-radius: 999px;
  pointer-events: none; transition: opacity .4s;
}
.zoom-overlay.zoomed .zoom-hint { opacity: 0; }

@media (max-width: 380px) { .bf-row { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .zoom-node { transition-duration: 0.001ms !important; }
  .sheet button.cover .cover-img, .sheet button.cover canvas { transition-duration: 0.001ms !important; }
}

/* ════════════════════════════════════════════════════════════════════
   FAS A.7 — FYRKANTIG DESIGN (omslag + kort skarpa; knappar/chips runda)
   Kim: lådor är fyrkantiga → minimal, konsekvent rundning. --r-square = 2px.
   100% ADDITIVT (override sist i filen vinner på lika specificitet).
   ════════════════════════════════════════════════════════════════════ */

/* omslag → nästan fyrkantiga */
.card, .spel-cover, .hero .hero-cover, .shelf-item, .spine-item,
.sheet button.cover, .zoom-node { border-radius: var(--r-square); }

/* kort/paneler/ytor → nästan fyrkantiga */
.card-sec, .bf, .note-body, .sell-slot, .panel, .sheet, .notes,
.hero, .install-card { border-radius: var(--r-square); }

/* detalj-omslaget: visa HELA framsidan (container får naturlig aspect via JS) */
.sheet button.cover .cover-img, .sheet button.cover canvas { object-fit: cover; }
.sheet button.cover { background: var(--cover-bg); }

/* botten-sheet: skarp topp */
@media (max-width: 720px) {
  .sheet { border-radius: var(--r-square) var(--r-square) 0 0; }
}

/* botten-UX: innehåll flödar under flytande tab-bar → klara baren + home-indicator */
.shelf-scroll, .spine-scroll { padding-bottom: calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom)); }

/* ---------- LISTA (block med omslag + info + universella knappar) ---------- */
.list-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  padding: 8px clamp(12px, 3vw, 24px) calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom)); }
.list-rows { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; }
.list-row { display: flex; gap: 13px; align-items: center; padding: 10px; border-radius: var(--r-card);
  background: var(--glass); border: 1px solid var(--glass-line); }
.lr-cover { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 10px; overflow: hidden; background: var(--bg1);
  display: grid; place-items: center; cursor: pointer; }
.lr-cover .cover-img, .lr-cover canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.lr-cover .ph { width: 100%; height: 100%; }
.lr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lr-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--txt); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-facts { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--txt-dim); }
.lr-facts span { white-space: nowrap; }

/* universella kort-knappar (lista + wishlist): BGG frostad · spelsug 🔥 · notering ✎ */
.card-acts { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.act-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 4px 11px;
  border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--txt);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.act-btn .dim { color: var(--txt-dim); font-weight: 600; }
.act-btn.sug-btn.has { border-color: color-mix(in srgb, #ff7a1a 55%, transparent); }
.act-btn.note-btn { min-width: 38px; justify-content: center; font-size: 15px; }
.act-btn.note-btn.has { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.act-btn:active { transform: scale(.94); }

/* spelsug-popup (1–5) + notering-editor (återanvänder .sheet2-*) */
.sug-opts { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.sug-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--glass-line); background: var(--glass); color: var(--txt); font: inherit; cursor: pointer; text-align: left; }
.sug-opt .sug-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; background: color-mix(in srgb, var(--txt) 10%, transparent); }
@supports not (background: color-mix(in srgb, red, blue)) { .sug-opt .sug-n { background: rgba(127,127,127,0.16); } }
.sug-opt .sug-t { font-size: 14px; font-weight: 600; }
.sug-opt.active { border-color: var(--accent); background: var(--accent-soft); }
.sug-opt.active .sug-n { background: var(--accent); color: var(--on-accent); }
.sug-opt:active { transform: scale(.99); }
.sug-clear { width: 100%; padding: 11px; border-radius: 12px; border: 1px solid var(--glass-line);
  background: transparent; color: var(--txt-dim); font: inherit; font-weight: 700; cursor: pointer; }
.note-ta { width: 100%; box-sizing: border-box; margin: 4px 0 12px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--glass-line); background: var(--glass); color: var(--txt); font: inherit; font-size: 15px;
  line-height: 1.4; resize: vertical; min-height: 90px; }
.note-acts { display: flex; justify-content: flex-end; }
.note-save { padding: 11px 22px; border-radius: 12px; border: 0; background: var(--accent); color: var(--on-accent);
  font: inherit; font-weight: 800; cursor: pointer; }
.note-save:active { transform: scale(.97); }
.wl-sort-dir { margin-left: auto; font-weight: 800; color: var(--accent); }

/* önskelistans kontrollrad (antal + sortering) */
.wl-ctrl { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }

/* detaljpanel: redigerbara knappar + utgåva-piller + notering + ägda expansioner */
.d-acts { margin: 4px 0 10px; }
.d-acts .card-acts { flex-wrap: wrap; }
.ed-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.ed-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--glass-line); background: var(--glass); color: var(--txt); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ed-pill.ed-ks { border-color: color-mix(in srgb, #ff5c39 55%, transparent); color: #ff7a53; }
.ed-pill.ed-gf { border-color: color-mix(in srgb, #34c759 55%, transparent); color: #46d267; }
.ed-pill.ed-dlx { border-color: color-mix(in srgb, #ffd60a 60%, transparent); color: #e8bf2e; }
/* ljust läge: mörkare, läsbara textfärger (dark-tonade hues faller under WCAG på ljus bakgrund) */
html[data-theme="light"] .ed-pill.ed-ks { color: #c2410c; }
html[data-theme="light"] .ed-pill.ed-gf { color: #1f8f4d; }
html[data-theme="light"] .ed-pill.ed-dlx { color: #9a7400; }
.ed-pill:active { transform: scale(.95); }
.d-note-text { margin: 4px 0 6px; padding: 10px 12px; border-radius: 12px; background: var(--glass);
  border: 1px solid var(--glass-line); font-size: 14px; line-height: 1.45; color: var(--txt); white-space: pre-wrap; }
.d-exp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--txt-dim); }
.d-exp-lbl { font-weight: 700; }
.exp-link { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass);
  color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.exp-link:active { transform: scale(.95); }
.ed-info { font-size: 16px; font-weight: 700; color: var(--txt); margin: 4px 0 8px; }
.ed-note { font-size: 13px; line-height: 1.5; color: var(--txt-dim); padding-bottom: 6px; }

/* toast (diskret kvitto/varning) + ✓-puls på bekräftad DB-skrivning + moln-prick på ⚙️ */
#toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(12px); z-index: 400; max-width: min(86vw, 420px);
  padding: 11px 18px; border-radius: 999px; background: var(--bg1); color: var(--txt);
  border: 1px solid var(--glass-line); box-shadow: 0 10px 30px rgba(0,0,0,.35);
  font-size: 13.5px; font-weight: 600; text-align: center; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@keyframes savePulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, #34c759 55%, transparent); }
  100% { box-shadow: 0 0 0 9px rgba(52,199,89,0); } }
.save-pulse { animation: savePulse .6s ease-out 1; border-color: color-mix(in srgb, #34c759 60%, transparent) !important; }
@supports not (background: color-mix(in srgb, red, blue)) {
  @keyframes savePulse { 0% { box-shadow: 0 0 0 0 rgba(52,199,89,.5); } 100% { box-shadow: 0 0 0 9px rgba(52,199,89,0); } } }
#settingsBtn { position: relative; }
#settingsBtn.cloud-on::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px;
  border-radius: 50%; background: #34c759; box-shadow: 0 0 0 2px var(--bg0); }
.anon-hint { margin-top: 10px; font-size: 12px; color: var(--txt-dim); text-align: center; }

/* lägg till / ta bort spel (ägare) */
.ctrl-btn.ctrl-add { min-width: 40px; justify-content: center; font-size: 17px; font-weight: 800; color: var(--accent); }
.ag-preview { border: 1px solid var(--glass-line); border-radius: 14px; padding: 10px; background: var(--glass); }
.ag-row { display: flex; gap: 12px; align-items: center; }
.ag-cover { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 10px; overflow: hidden; background: var(--bg1); }
.ag-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-meta { min-width: 0; }
.ag-meta b { font-size: 15px; }
.ag-dupe { margin-top: 9px; font-size: 12.5px; color: #e8bf2e; }
html[data-theme="light"] .ag-dupe { color: #9a7400; }
.btn.det-del { flex: 0 0 auto; min-width: 48px; }
.btn.det-del:active { transform: scale(.95); }

/* antal-badge på Önskelista-fliken */
.tabbar .tab .ti { position: relative; }
.tab-badge { position: absolute; top: -4px; right: -9px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 9.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1; }
.set-row.set-act { width: 100%; font: inherit; cursor: pointer; text-align: left; }
.set-row.set-act b { color: var(--accent); }
.set-road-note { margin-top: 6px; font-size: 11.5px; color: var(--txt-dim); }

/* ägar-reglage i detaljen (pris + sälj-toggle) — bara inloggad ägare ser dem */
.d-owner { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.own-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--glass-line); background: var(--glass); color: var(--txt); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.own-btn .dim { color: var(--txt-dim); font-weight: 600; }
.own-btn.price-btn.has { border-color: color-mix(in srgb, #34c759 50%, transparent); }
.own-btn.sell-btn.on { background: color-mix(in srgb, #ff453a 22%, transparent); border-color: color-mix(in srgb, #ff453a 55%, transparent); color: #ff6b5e; }
@supports not (background: color-mix(in srgb, red, blue)) { .own-btn.sell-btn.on { background: rgba(255,69,58,0.18); } }
html[data-theme="light"] .own-btn.sell-btn.on { color: #c0392b; }
.own-btn:active { transform: scale(.95); }
.price-in { width: 100%; box-sizing: border-box; margin: 4px 0 12px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--glass-line); background: var(--glass); color: var(--txt); font: inherit; font-size: 15px; }

/* ════════ SKAPARE-VÄLJARE (designer/artist typeahead) ════════ */
.pp-overlay { position: fixed; inset: 0; z-index: 180; display: none; }
.pp-overlay.show { display: block; }
.pp-scrim { position: absolute; inset: 0; background: rgba(2,4,10,0.62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pp-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(440px, 92vw); max-height: 80dvh; display: flex; flex-direction: column;
  background: var(--sheet-bg, var(--bg1, #0a0f1d)); border: 1px solid var(--sheet-line);
  border-radius: var(--r-square); overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,0.6);
}
.pp-head { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--sheet-line); }
.pp-head input {
  flex: 1 1 auto; min-width: 0; background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: 999px; padding: 10px 15px; color: var(--on-sheet); font: inherit; font-size: 15px;
}
.pp-head input::placeholder { color: var(--on-sheet-dim); }
.pp-x {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--on-sheet);
  font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.pp-hint { padding: 9px 15px 4px; font-size: 12px; color: var(--on-sheet-dim); }
.pp-list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px; }
.pp-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: var(--r-square); padding: 10px 12px;
  cursor: pointer; color: var(--on-sheet); font: inherit; min-height: 44px;
}
.pp-row:hover, .pp-row:focus-visible {
  background: color-mix(in srgb, var(--on-sheet) 9%, transparent); outline: none;
}
@supports not (background: color-mix(in srgb, red, blue)) { .pp-row:hover { background: rgba(127,127,127,0.10); } }
.pp-tag { flex: 0 0 auto; width: 22px; text-align: center; font-size: 15px; }
.pp-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-count { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border-radius: 999px; padding: 2px 9px; }
.pp-empty { padding: 26px; text-align: center; color: var(--on-sheet-dim); font-size: 14px; }

/* ════════════════════════════════════════════════════════════════════
   VERSUS — duell-ranker. Helskärms-overlay (lazy i versus.js).
   FYRKANTIGT: omslag + kort = 2px radie. Knappar/chips runda.
   TEMA-SÄKERT: --accent / --on-sheet / --on-sheet-dim / --cover-bg / --sheet-line
   (color-mix med @supports-fallback för äldre WebKit).
   ════════════════════════════════════════════════════════════════════ */
html.vs-lock, html.vs-lock body { overflow: hidden; }

.vs-overlay {
  position: fixed; inset: 0; z-index: 300; display: none;
  flex-direction: column;
  background:
    radial-gradient(1100px 760px at 50% -8%, hsla(var(--accent-h), 70%, 28%, 0.42), transparent 62%),
    var(--sheet-bg, linear-gradient(160deg, #141a2c, #0a0e1a));
  -webkit-backdrop-filter: saturate(160%) blur(22px); backdrop-filter: saturate(160%) blur(22px);
  color: var(--on-sheet, #eef2ff);
  padding: max(12px, env(safe-area-inset-top)) clamp(12px, 3vw, 28px) max(16px, env(safe-area-inset-bottom));
  overscroll-behavior: contain; outline: none;
}
.vs-overlay.vs-show { display: flex; animation: vs-in .26s ease both; }
@keyframes vs-in { from { opacity: 0; } to { opacity: 1; } }

/* ── topp-bar: framsteg + ställning + avbryt ── */
.vs-top { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.vs-prog {
  flex: 1 1 auto; height: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--on-sheet) 12%, transparent); overflow: hidden;
}
@supports not (background: color-mix(in srgb, red, blue)) { .vs-prog { background: rgba(255,255,255,0.14); } }
.vs-prog-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), hsl(var(--accent-h), 95%, 72%));
  box-shadow: 0 0 12px var(--accent-soft); transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.vs-counter { flex: 0 0 auto; font-size: var(--t-footnote, 13px); font-weight: 700; color: var(--on-sheet-dim, #97a1bd); white-space: nowrap; }

.vs-pill {
  flex: 0 0 auto; cursor: pointer; border-radius: 999px; min-height: 44px;
  padding: 9px 16px; font-size: var(--t-footnote, 13px); font-weight: 700;
  color: var(--on-sheet); background: color-mix(in srgb, var(--on-sheet) 8%, transparent);
  border: 1px solid var(--sheet-line, rgba(255,255,255,0.12)); transition: .16s;
  display: inline-flex; align-items: center; gap: 8px;
}
@supports not (background: color-mix(in srgb, red, blue)) { .vs-pill { background: rgba(255,255,255,0.08); } }
.vs-pill:hover { border-color: var(--accent); }
.vs-pill.vs-primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.vs-pill.vs-primary:hover { filter: brightness(1.06); }
.vs-iconbtn {
  flex: 0 0 auto; cursor: pointer; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
  color: var(--on-sheet); background: color-mix(in srgb, var(--on-sheet) 8%, transparent);
  border: 1px solid var(--sheet-line, rgba(255,255,255,0.12)); transition: .16s;
}
@supports not (background: color-mix(in srgb, red, blue)) { .vs-iconbtn { background: rgba(255,255,255,0.08); } }
.vs-iconbtn:hover { background: var(--accent); color: var(--on-accent); }

/* ── kombo-bubbla ── */
.vs-combo {
  position: absolute; top: clamp(56px, 9vh, 88px); left: 50%; transform: translateX(-50%);
  pointer-events: none; z-index: 5; font-weight: 900; letter-spacing: .01em;
  font-size: clamp(15px, 4.4vw, 22px); color: hsl(var(--accent-h), 100%, 76%);
  text-shadow: 0 2px 18px rgba(0,0,0,0.5); opacity: 0;
}
.vs-combo.vs-pop { animation: vs-combo .62s cubic-bezier(.2,.9,.2,1) both; }
@keyframes vs-combo {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.7); }
  35% { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1.12); }
  70% { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(1); }
}

/* ── DUELL-SCEN ── */
.vs-duel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 2.4vh, 22px); }
.vs-question {
  flex: 0 0 auto; font-size: var(--t-headline, 20px); font-weight: 800; letter-spacing: -0.01em;
  color: var(--on-sheet); text-align: center;
}
.vs-arena {
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: 960px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(8px, 2vw, 20px);
}
.vs-arena.vs-enter .vs-card-a { animation: vs-slide-l .34s cubic-bezier(.2,.85,.2,1) both; }
.vs-arena.vs-enter .vs-card-b { animation: vs-slide-r .34s cubic-bezier(.2,.85,.2,1) both; }
@keyframes vs-slide-l { from { opacity: 0; transform: translateX(-22px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes vs-slide-r { from { opacity: 0; transform: translateX(22px) scale(.97); } to { opacity: 1; transform: none; } }

.vs-badge {
  flex: 0 0 auto; align-self: center; font-weight: 900; font-size: clamp(13px, 3vw, 19px);
  color: var(--on-sheet-dim); letter-spacing: .08em;
  width: clamp(34px, 9vw, 52px); height: clamp(34px, 9vw, 52px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--sheet-line, rgba(255,255,255,0.14));
  background: color-mix(in srgb, var(--on-sheet) 6%, transparent);
}
@supports not (background: color-mix(in srgb, red, blue)) { .vs-badge { background: rgba(255,255,255,0.06); } }

/* DUELLKORT — fyrkantigt (2px). Stort tappbart omslag. */
.vs-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; cursor: pointer;
  background: none; border: none; padding: 0; color: inherit; text-align: center;
  -webkit-tap-highlight-color: transparent; transition: transform .14s ease;
}
.vs-card:active { transform: scale(.985); }
.vs-card:disabled { cursor: default; }
.vs-cover {
  position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 2px; overflow: hidden;
  background: var(--cover-bg, #06090f);
  border: 2px solid hsla(var(--card-h, 220), 70%, 55%, 0.55);
  box-shadow: 0 18px 44px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.25) inset;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.vs-card:hover .vs-cover { border-color: var(--accent); box-shadow: 0 22px 60px rgba(0,0,0,0.6), 0 0 0 3px var(--accent-soft); }
.vs-card:focus-visible { outline: none; }
.vs-card:focus-visible .vs-cover { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.vs-cover-img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; background: var(--cover-bg, #06090f); }
.vs-card-name { font-size: var(--t-body, 15px); font-weight: 800; color: var(--on-sheet); line-height: 1.2;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.vs-card-sub { font-size: var(--t-caption, 11px); font-weight: 600; color: var(--on-sheet-dim); }

/* valt/icke-valt feedback */
.vs-card.vs-pick .vs-cover { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 26px 70px rgba(0,0,0,0.6); transform: translateY(-4px) scale(1.02); }
.vs-card.vs-fade { opacity: .42; transform: scale(.96); }

/* platshållar-omslag (spel utan g.img + onerror) — fyrkantigt */
.vs-ph {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 12px; text-align: center;
  background:
    linear-gradient(160deg, hsl(var(--ph-h, 220), 55%, 30%), hsl(var(--ph-h, 220), 60%, 14%));
}
.vs-ph-title { font-size: 14px; font-weight: 800; color: #fff; line-height: 1.2;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.vs-ph-year { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.78); }

/* oavgjort + tangent-hint */
.vs-draw-wrap { flex: 0 0 auto; }
.vs-draw { gap: 9px; min-height: 44px; padding: 11px 20px; }
.vs-draw-key {
  font-size: 11px; font-weight: 700; color: var(--on-sheet-dim);
  border: 1px solid var(--sheet-line, rgba(255,255,255,0.14)); border-radius: 6px;
  padding: 2px 7px; letter-spacing: .03em;
}
.vs-keyhint { flex: 0 0 auto; font-size: var(--t-caption, 11px); font-weight: 600; color: var(--on-sheet-dim); text-align: center; }

/* ── RESULTAT-SCEN (cinematisk topplista) ── */
/* viktigt: [hidden] måste vinna över display:flex (annars syns båda scenerna) */
.vs-duel[hidden], .vs-result[hidden] { display: none !important; }
.vs-result { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
.vs-result-head { flex: 0 0 auto; text-align: center; animation: vs-pop-in .5s cubic-bezier(.2,.9,.2,1) both; }
@keyframes vs-pop-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
.vs-result-title {
  margin: 4px 0 2px; font-size: var(--t-large-title, 30px); font-weight: 900; letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--on-sheet), var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.vs-result-sub { font-size: var(--t-footnote, 13px); font-weight: 600; color: var(--on-sheet-dim); }
.vs-result-note {
  flex: 0 0 auto; text-align: center; font-size: var(--t-footnote, 13px); font-weight: 600;
  color: var(--on-sheet-dim); padding: 2px 8px;
}
.vs-result-note[hidden] { display: none !important; }

.vs-board { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  list-style: none; margin: 0; padding: 4px 2px 8px; display: flex; flex-direction: column; gap: 8px; }
.vs-board::-webkit-scrollbar { width: 8px; }
.vs-board::-webkit-scrollbar-thumb { background: var(--sheet-line); border-radius: 8px; }

.vs-row {
  display: grid; grid-template-columns: 40px 46px 1fr; align-items: center; gap: 12px;
  padding: 8px 12px 8px 8px; border-radius: 10px;
  background: color-mix(in srgb, var(--on-sheet) 5%, transparent);
  border: 1px solid var(--sheet-line, rgba(255,255,255,0.1));
  border-left: 3px solid hsl(var(--row-h, 220), 70%, 55%);
  animation: vs-row-in .5s cubic-bezier(.2,.85,.2,1) both;
}
@supports not (background: color-mix(in srgb, red, blue)) { .vs-row { background: rgba(255,255,255,0.05); } }
.vs-row.vs-noanim { animation: none; }
@keyframes vs-row-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.vs-rank { font-size: 20px; font-weight: 900; color: var(--on-sheet-dim); text-align: center; }
.vs-row.vs-gold   { border-left-color: #ffcf4d; box-shadow: 0 0 0 1px rgba(255,207,77,0.35), 0 8px 22px rgba(255,180,40,0.18); }
.vs-row.vs-gold   .vs-rank { color: #ffcf4d; }
.vs-row.vs-silver { border-left-color: #cfd6e6; }
.vs-row.vs-silver .vs-rank { color: #cfd6e6; }
.vs-row.vs-bronze { border-left-color: #e0a06a; }
.vs-row.vs-bronze .vs-rank { color: #e0a06a; }
.vs-thumb {
  width: 46px; height: 46px; border-radius: 2px; overflow: hidden; flex: 0 0 auto;
  background: var(--cover-bg, #06090f); border: 1px solid var(--sheet-line);
}
.vs-thumb img, .vs-thumb .vs-ph { width: 100%; height: 100%; object-fit: cover; }
.vs-thumb .vs-ph-title { font-size: 8px; -webkit-line-clamp: 2; } .vs-thumb .vs-ph-year { display: none; }
.vs-row-info { min-width: 0; }
.vs-row-name { font-size: var(--t-body, 15px); font-weight: 800; color: var(--on-sheet); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-row-stat { font-size: var(--t-caption, 11px); font-weight: 600; color: var(--on-sheet-dim); }
.vs-row-tie {
  margin-top: 2px; font-size: var(--t-caption, 11px); font-weight: 600; color: var(--on-sheet-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.vs-result-actions { flex: 0 0 auto; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding-top: 2px; }
.vs-result-actions .vs-pill { min-height: 44px; }

/* clipboard-fallback (gömt) */
.vs-clip { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* egen toast (för-få-spel etc.) — tema-säker, ingen alert */
.vs-toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(16px);
  z-index: 400; max-width: min(90vw, 420px); text-align: center;
  background: var(--sheet-bg, #141a2c); color: var(--on-sheet, #fff);
  border: 1px solid var(--sheet-line, rgba(255,255,255,0.14)); border-radius: 12px;
  padding: 12px 18px; font-size: var(--t-footnote, 13px); font-weight: 700;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.vs-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* tablet/desktop: lite mer luft + lägre kort så de inte blir gigantiska */
@media (min-width: 721px) {
  .vs-cover { max-height: 56vh; aspect-ratio: 3 / 4; }
  .vs-arena { gap: clamp(16px, 3vw, 40px); }
}
/* riktigt smala skärmar: krymp VS-badge så korten får plats */
@media (max-width: 360px) {
  .vs-badge { width: 30px; height: 30px; font-size: 12px; }
  .vs-card-name { font-size: 13px; }
}

/* respektera reducerad rörelse */
@media (prefers-reduced-motion: reduce) {
  .vs-overlay, .vs-overlay.vs-show, .vs-arena.vs-enter .vs-card-a, .vs-arena.vs-enter .vs-card-b,
  .vs-combo.vs-pop, .vs-result-head, .vs-row, .vs-card, .vs-prog-fill, .vs-toast {
    animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;
  }
  .vs-card.vs-pick .vs-cover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   FAS A.8 — APP-FLIKAR (botten-meny: Spel / Listor / Upptäck / AI)
   Tema-säkert (--bg1/--txt/--txt-dim/--accent). Fyrkantigt (kort 2px, chips runda).
   ════════════════════════════════════════════════════════════════════ */

/* botten-meny */
.tabbar {
  /* FLYTANDE, kant-till-kant: baren tas ur flödet och läggs över botten → innehållet flödar
     UNDER den frostade ytan (ingen solid "död" remsa; scroll-ytorna får botten-marginal så
     inget göms bakom baren). Home-indikatorns safe-area målas frostad, ej solid glipa. */
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; display: flex;
  background: linear-gradient(var(--bar), var(--bar)), transparent;
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border-top: 0.5px solid var(--hairline);
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .tabbar { background: var(--bg1); } }
.tabbar .tab {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 8px 3px 6px; min-height: 50px; cursor: pointer;
  background: none; border: 0; font: inherit; font-size: 10px; font-weight: 590; letter-spacing: -0.02em;
  white-space: nowrap; color: var(--txt-dim); transition: color .18s ease;
}
.tabbar .tab .ti { display: grid; place-items: center; width: 26px; height: 26px; transition: transform .15s; }
.tabbar .tab .ti svg { width: 25px; height: 25px; display: block; }
.tabbar .tab.active { color: var(--accent); }   /* enda accent-användningen i navigeringen */
.tabbar .tab:active .ti { transform: scale(.9); }

/* flik-sektioner (utöver #stage) */
.tabview { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: clamp(14px, 3.5vw, 26px) clamp(14px, 3.5vw, 26px) calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom)); }

/* dölj Spel-specifika kontroller utanför Spel-fliken */
html:not([data-tab="spel"]) #filters,
html:not([data-tab="spel"]) .search,
html:not([data-tab="spel"]) #countPill,
html:not([data-tab="spel"]) #viewCycle { display: none; }

/* gemensam flik-rubrik */
.tabhead { margin-bottom: 16px; }
.tabhead h2 { margin: 0 0 4px; font-size: clamp(20px, 4.5vw, 26px); font-weight: 800; letter-spacing: -0.02em; color: var(--txt); }
.tabhead p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--txt-dim); }
.tabview h3 { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-dim); margin: 18px 0 10px; }

/* ── LISTOR ── */
.lists-make { background: color-mix(in srgb, var(--txt) 4%, transparent); border: 1px solid rgba(127,127,127,0.18);
  border-radius: var(--r-square); padding: 14px; }
@supports not (background: color-mix(in srgb, red, blue)) { .lists-make { background: rgba(127,127,127,0.06); } }
.lm-label { font-size: 15px; font-weight: 800; color: var(--txt); margin-bottom: 12px; }
.lm-sub { font-size: 12px; color: var(--txt-dim); margin: 14px 0 8px; }
.vs-scopes, .vs-scope-genres { display: flex; flex-wrap: wrap; gap: 8px; }
.vs-scope { background: color-mix(in srgb, var(--txt) 8%, transparent); border: 1px solid rgba(127,127,127,0.2);
  color: var(--txt); font: inherit; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 9px 15px; cursor: pointer; }
@supports not (background: color-mix(in srgb, red, blue)) { .vs-scope { background: rgba(127,127,127,0.1); } }
.vs-scope .n { opacity: .6; font-weight: 600; margin-left: 3px; }
.vs-scope.prim { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.vs-scope:active { transform: scale(.97); }
.lists-saved { margin-top: 22px; }
.lists-saved h3 { display: flex; align-items: baseline; gap: 8px; }
.ll-meta { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--txt-dim); }
.ll-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-square);
  background: color-mix(in srgb, var(--txt) 4%, transparent); border: 1px solid rgba(127,127,127,0.14); margin-bottom: 6px; }
@supports not (background: color-mix(in srgb, red, blue)) { .ll-row { background: rgba(127,127,127,0.06); } }
.ll-rank { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--accent); background: var(--accent-soft); }
.ll-name { font-size: 14px; font-weight: 600; color: var(--txt); }

/* ── UPPTÄCK ── */
.disc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.disc-stats .st { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px;
  padding: 11px 6px; border-radius: var(--r-square); background: color-mix(in srgb, var(--txt) 4%, transparent);
  border: 1px solid rgba(127,127,127,0.16); min-width: 0; }
@supports not (background: color-mix(in srgb, red, blue)) { .disc-stats .st { background: rgba(127,127,127,0.06); } }
.disc-stats .st-e { font-size: 18px; }
.disc-stats .st b { font-size: 14px; font-weight: 800; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.disc-stats .st i { font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--txt-dim); }
.disc-sec { }
.disc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.disc-chip { display: inline-flex; align-items: center; gap: 7px; background: color-mix(in srgb, var(--txt) 8%, transparent);
  border: 1px solid rgba(127,127,127,0.2); color: var(--txt); font: inherit; font-size: 13px; font-weight: 700;
  border-radius: 999px; padding: 8px 14px; cursor: pointer; }
@supports not (background: color-mix(in srgb, red, blue)) { .disc-chip { background: rgba(127,127,127,0.1); } }
.disc-chip .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.disc-chip .n { opacity: .6; font-weight: 600; }
.disc-big { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; margin-bottom: 8px;
  background: color-mix(in srgb, var(--txt) 5%, transparent); border: 1px solid rgba(127,127,127,0.18);
  border-radius: var(--r-square); padding: 14px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; color: var(--txt); }
@supports not (background: color-mix(in srgb, red, blue)) { .disc-big { background: rgba(127,127,127,0.07); } }
.disc-big .n { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 10px; }
.disc-big:active { transform: scale(.99); }

/* Upptäck-framsida: spotlights + AI-ingång + snabbval */
.disc-spots { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 2px 12px; margin: 0 -2px 8px; scroll-snap-type: x proximity; }
.disc-spots::-webkit-scrollbar { display: none; }
.disc-spot { flex: 0 0 auto; width: 140px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font: inherit; }
.ds-cover { width: 140px; height: 140px; border-radius: var(--r-card); overflow: hidden; background: var(--bg1); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.ds-cover .cover-img, .ds-cover canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-cover .ph { width: 100%; height: 100%; }
.ds-lbl { font-size: 12px; font-weight: 800; color: var(--accent); letter-spacing: -0.01em; }
.ds-name { font-size: 13px; font-weight: 700; color: var(--txt); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.disc-spot:active { transform: scale(.97); }

.disc-ai { display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0 4px; padding: 14px 16px;
  border-radius: var(--r-card); border: 1px solid var(--glass-line);
  background: linear-gradient(120deg, var(--accent-soft), transparent 70%), var(--glass); color: var(--txt); font: inherit; cursor: pointer; text-align: left; }
.dai-e { font-size: 24px; flex: 0 0 auto; }
.dai-t { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dai-t b { font-size: 15px; font-weight: 800; }
.dai-t i { font-size: 12.5px; color: var(--txt-dim); font-style: normal; }
.dai-go { flex: 0 0 auto; font-size: 20px; font-weight: 800; color: var(--accent); }
.disc-ai:active { transform: scale(.99); }

.disc-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.disc-jbtn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--glass-line); background: var(--glass); color: var(--txt); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.disc-jbtn .n { color: var(--txt-dim); font-weight: 700; }
.disc-jbtn:active { transform: scale(.96); }

/* ── AI ── */
#aiView:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
#aiView .tabhead { flex: 0 0 auto; }
.ai-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 12px; }
.ai-msg { max-width: 86%; padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.ai-user { align-self: flex-end; background: var(--accent); color: var(--on-accent); font-weight: 600; border-bottom-right-radius: 4px; }
.ai-bot { align-self: flex-start; background: color-mix(in srgb, var(--txt) 8%, transparent); color: var(--txt); border-bottom-left-radius: 4px; }
@supports not (background: color-mix(in srgb, red, blue)) { .ai-bot { background: rgba(127,127,127,0.12); } }
.ai-bot.ai-pending { color: var(--txt-dim); animation: aiPulse 1.3s ease-in-out infinite; }
.ai-bot.ai-pending::after { content: "…"; display: inline-block; width: 1.1em; text-align: left; animation: aiDots 1.3s steps(4, end) infinite; }
@keyframes aiPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes aiDots { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
.ai-bot.ai-err { background: hsla(0,70%,55%,0.14); color: #e88; }
/* AI-svar med formatering (markdown → HTML): tajta marginaler i bubblan */
.ai-bot.ai-rich { white-space: normal; }
.ai-rich p { margin: 0 0 8px; }
.ai-rich p:last-child { margin-bottom: 0; }
.ai-rich ul, .ai-rich ol { margin: 4px 0 8px; padding-left: 1.4em; }
.ai-rich li { margin: 2px 0; }
.ai-rich .ai-h { font-weight: 800; margin: 8px 0 4px; font-size: 1.02em; }
.ai-rich .ai-h:first-child { margin-top: 0; }
.ai-rich strong { font-weight: 800; color: var(--txt); }
.ai-rich code { background: rgba(127,127,127,0.18); border-radius: 5px; padding: 1px 5px; font-size: .92em; }
.ai-acts { margin-top:8px; padding-top:8px; border-top:1px solid var(--sheet-line); font-size:.82rem; font-weight:600; color:var(--accent); }

/* AI-flikens tomtillstånd: designad hero med förslags-kort (döljs när tråden börjat) */
.ai-thread:empty { flex:0 0 0; padding:0; }
.ai-hero { flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; padding:8px 2px 12px; }
.ai-hero[hidden] { display:none; }
.aih-ic { font-size:32px; line-height:1; color:var(--accent); background:var(--accent-soft); width:72px; height:72px; border-radius:24px; display:grid; place-items:center; margin-bottom:8px; }
.aih-t { font-size:1.15rem; font-weight:800; color:var(--txt); }
.aih-s { margin:0 0 16px; color:var(--txt-dim); font-size:.88rem; max-width:300px; line-height:1.45; }
.aih-grid { display:flex; flex-direction:column; gap:8px; width:100%; max-width:420px; }
.aih-card { display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:10px 14px; background:var(--glass); border:1px solid var(--glass-line); border-radius:16px; color:var(--txt); cursor:pointer; text-align:left; transition:transform .15s ease, background .15s ease; }
.aih-card:active { transform:scale(.98); }
.aih-e { font-size:20px; flex:0 0 auto; }
.aih-tx { min-width:0; }
.aih-tx b { display:block; font-size:.95rem; }
.aih-tx span { display:block; color:var(--txt-dim); font-size:.8rem; margin-top:1px; }
.ai-rules-btn { flex:0 0 auto; width:46px; height:46px; border-radius:50%; border:1px solid var(--glass-line); background:var(--glass); font-size:18px; cursor:pointer; display:grid; place-items:center; transition:transform .15s; }
.ai-rules-btn:active { transform:scale(.92); }

/* Upptäck: BGG-hetlista + dagens briefing */
.hot-own { position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.hot-spot .ds-cover { position:relative; }
.brief-card { background:var(--glass); border:1px solid var(--glass-line); border-radius:16px; padding:14px 16px; }
.brief-body { font-size:.9rem; line-height:1.5; color:var(--txt); }
.brief-body p { margin:0 0 10px; }
.brief-body p:last-child { margin-bottom:0; }
.brief-more { margin-top:10px; background:none; border:0; color:var(--accent); font-weight:700; font-size:.88rem; cursor:pointer; padding:6px 0 0; }
.hot-sheet-b { display:flex; flex-direction:column; gap:10px; padding:6px 0 4px; }
.hot-sheet-b .vbtn { justify-content:center; min-height:46px; border-radius:12px; text-align:center; text-decoration:none; display:flex; align-items:center; }
.hot-sheet-b .vbtn.prim { background:var(--accent); color:#fff; border:1px solid var(--accent); font-weight:600; }
.hot-bgg { border:1px solid var(--sheet-line); color:var(--on-sheet); }
.hot-note { text-align:center; color:var(--on-sheet-dim); font-size:.9rem; padding:4px 0; }
.ai-chips {flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 0; }
.ai-chip { background: color-mix(in srgb, var(--txt) 8%, transparent); border: 1px solid rgba(127,127,127,0.2);
  color: var(--txt); font: inherit; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 7px 13px; cursor: pointer; }
@supports not (background: color-mix(in srgb, red, blue)) { .ai-chip { background: rgba(127,127,127,0.1); } }
.ai-input { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 0 calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); }
.ai-input input { flex: 1 1 auto; min-width: 0; background: color-mix(in srgb, var(--txt) 7%, transparent);
  border: 1px solid rgba(127,127,127,0.25); border-radius: 999px; padding: 12px 16px; color: var(--txt); font: inherit; font-size: 15px; }
@supports not (background: color-mix(in srgb, red, blue)) { .ai-input input { background: rgba(127,127,127,0.1); } }
.ai-input input::placeholder { color: var(--txt-dim); }
.ai-send { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: var(--on-accent); font-size: 17px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ai-send:active { transform: scale(.95); }

/* ===== LIVE: inloggning + sparade listor (2026-06) ===== */
.brand.owner h1::after { content:"🔑"; font-size:.55em; margin-left:7px; vertical-align:middle; opacity:.85; }
.count-pill .lf-x { background:none; border:0; color:var(--on-sheet-dim,#8a93a8); cursor:pointer; font-size:.9em; padding:0 4px; line-height:1; }
.count-pill .lf-x:hover { color:var(--accent); }

.login-overlay { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
.login-overlay.show { display:flex; }
.login-scrim { position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); }
.login-card { position:relative; z-index:1; width:min(380px,100%); background:var(--sheet-bg); backdrop-filter:var(--sheet-blur); -webkit-backdrop-filter:var(--sheet-blur); border:1px solid var(--sheet-line); border-radius:18px; box-shadow:var(--sheet-shadow); color:var(--on-sheet); padding:22px 20px; }
.login-card h2 { margin:0 0 6px; font-size:1.2rem; }
.login-sub { color:var(--on-sheet-dim); font-size:.9rem; margin:0 0 14px; line-height:1.45; }
.login-card input { width:100%; box-sizing:border-box; padding:12px 14px; min-height:46px; border-radius:12px; border:1px solid var(--sheet-line); background:rgba(127,127,127,.10); color:var(--on-sheet); font-size:16px; margin-bottom:12px; }
.login-x { position:absolute; top:8px; right:8px; background:none; border:0; color:var(--on-sheet-dim); font-size:18px; cursor:pointer; min-width:44px; min-height:44px; }
.login-card .vbtn.prim { width:100%; justify-content:center; background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:12px; min-height:46px; font-weight:600; }
.login-card .vbtn.prim:hover { filter:brightness(1.06); color:#fff; }
.login-msg { margin-top:10px; font-size:.85rem; color:var(--on-sheet-dim); min-height:1.2em; line-height:1.4; }
.login-card .vbtn { width:100%; justify-content:center; border-radius:12px; min-height:46px; font-weight:600; }
.login-step2 { margin-top:2px; }
.login-step2 input { text-align:center; font-variant-numeric:tabular-nums; font-weight:600; }

.lists-mine { margin:2px 0 20px; }
.lists-mine h3, .lists-saved h3 { display:flex; align-items:center; gap:10px; font-size:1rem; margin:0 0 10px; }
.ll-add { margin-left:auto; background:var(--accent-soft); color:var(--accent); border:0; border-radius:999px; padding:7px 13px; min-height:36px; font-size:.8rem; font-weight:600; cursor:pointer; white-space:nowrap; }
.ll-add:hover { filter:brightness(1.12); }
.ll-list { display:flex; flex-direction:column; gap:8px; }
.ll-empty { color:var(--on-sheet-dim,#8a93a8); font-size:.85rem; padding:6px 2px; line-height:1.4; }
.ll-item { display:flex; align-items:center; gap:6px; }
.ll-open { flex:1; text-align:left; background:rgba(127,127,127,.08); border:1px solid var(--sheet-line,rgba(127,127,127,.18)); border-radius:12px; padding:11px 14px; min-height:44px; color:inherit; cursor:pointer; font-size:.92rem; }
.ll-open:hover { border-color:var(--accent); }
.ll-open .ll-n { color:var(--on-sheet-dim,#8a93a8); font-size:.8rem; margin-left:6px; }
.ll-ren, .ll-del { background:rgba(127,127,127,.08); border:1px solid var(--sheet-line,rgba(127,127,127,.18)); border-radius:10px; min-width:42px; min-height:44px; cursor:pointer; font-size:14px; color:inherit; }
.ll-ren:hover, .ll-del:hover { border-color:var(--accent); }

/* ════════════ UX-omdesign 2026-06-29: topbar/filter-hub/listor ════════════ */
/* Topbar: dölj "+"-ikonen (install bor nu i vy-popupen), kompakt tema-switch + vy-ikon */
.install-btn { display: none !important; }

/* Kontrollrad (ersätter chip-railen): [⌖ Filter ·N] [↕ Sortera] */
.ctrl-btn { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:0.5px solid var(--glass-line); background:var(--glass); color:var(--txt); font:inherit; font-weight:600; font-size:14px; letter-spacing:-0.01em; padding:9px 15px 9px 13px; border-radius:var(--r-pill); min-height:40px; }
.ctrl-btn svg { width:18px; height:18px; opacity:.85; }
.ctrl-count { flex:0 0 auto; align-self:center; font-size:13px; font-weight:700; color:var(--txt-dim); padding:0 6px 0 2px; white-space:nowrap; }
.ctrl-btn:active { transform:scale(.97); }
.ctrl-btn.is-active, .ctrl-btn.is-active svg { border-color:var(--accent); color:var(--accent); opacity:1; }
.cb-badge { background:var(--accent); color:var(--on-accent); border-radius:var(--r-pill); padding:0 7px; font-size:11px; font-weight:700; min-width:18px; text-align:center; font-variant-numeric:tabular-nums; }

/* Generisk bottom-sheet (vy-popup, filter-hub, wizard, handplock, rank) */
.sheet2-overlay { position:fixed; inset:0; z-index:120; display:none; }
.sheet2-overlay.show { display:block; }
.sheet2-scrim { position:absolute; inset:0; background:rgba(0,0,0,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.sheet2-card { position:absolute; left:0; right:0; bottom:0; max-height:88dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--bg1); border-top-left-radius:20px; border-top-right-radius:20px; border-top:1px solid var(--glass-line);
  padding:8px clamp(14px,4vw,24px) calc(16px + env(safe-area-inset-bottom)); box-shadow:0 -12px 40px rgba(0,0,0,.5);
  animation:sheet2Up .26s cubic-bezier(.22,1,.36,1); }
@keyframes sheet2Up { from { transform:translateY(100%); } to { transform:translateY(0); } }
@media (min-width:721px) { .sheet2-card { left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%,-50%); width:min(440px,92vw); border-radius:18px; border:1px solid var(--glass-line); max-height:86vh; animation:none; } }
.sheet2-grab { width:40px; height:5px; border-radius:3px; background:var(--glass-line); margin:6px auto 8px; }
.sheet2-h { font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--txt-dim); margin:8px 2px; }
.sheet2-x { flex:0 0 auto; background:var(--glass); border:1px solid var(--glass-line); color:var(--txt); width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:14px; }
.pp-overlay { z-index:150; }   /* personväljaren ovanför sheets */

/* Vy + täthet-popup */
.vp-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vp-tile { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; border:1px solid var(--glass-line); background:var(--glass); color:var(--txt); font:inherit; font-weight:700; font-size:13px; padding:16px; border-radius:14px; }
.vp-ic { font-size:22px; }
.vp-tile.active { background:var(--accent); color:var(--on-accent); border-color:transparent; }
.vp-dens-row { display:flex; gap:7px; flex-wrap:wrap; }
.vp-dens-row.vp-dim { opacity:.45; }
.vp-dens { flex:1; min-width:64px; cursor:pointer; border:1px solid var(--glass-line); background:var(--glass); color:var(--txt-dim); font:inherit; font-weight:700; font-size:12px; padding:10px; border-radius:10px; }
.vp-dens.active { background:var(--accent); color:var(--on-accent); border-color:transparent; }
.vp-install { width:100%; margin-top:14px; cursor:pointer; border:1px solid var(--glass-line); background:var(--glass); color:var(--txt); font:inherit; font-weight:700; padding:12px; border-radius:12px; }

/* Filter & sortering-hub */
.fh-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fh-sec { padding:11px 0; border-top:1px solid var(--glass-line); }
.fh-sec:first-of-type { border-top:0; }
.fh-lbl { display:flex; justify-content:space-between; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--txt-dim); margin-bottom:8px; }
.fh-val { color:var(--accent); font-weight:800; text-transform:none; }
.fh-row, .fh-grid { display:flex; flex-wrap:wrap; gap:7px; }
.fh-chip { cursor:pointer; border:1px solid var(--glass-line); background:var(--glass); color:var(--txt-dim); font:inherit; font-size:13px; font-weight:600; padding:8px 13px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; }
.fh-chip .n { opacity:.6; font-size:11px; font-weight:700; }
.fh-chip .dot { width:8px; height:8px; border-radius:50%; background:var(--c,var(--accent)); }
.fh-chip.active { background:var(--accent); color:var(--on-accent); border-color:transparent; }
.fh-chip.genre.active { background:var(--c,var(--accent)); }
.fh-chip.genre.active .dot { background:rgba(0,0,0,.35); }
.fh-seg-row { display:flex; gap:8px; margin-top:8px; }
.fh-seg { flex:1; cursor:pointer; border:1px solid var(--glass-line); background:var(--glass); color:var(--txt-dim); font:inherit; font-weight:700; font-size:13px; padding:10px; border-radius:12px; }
.fh-seg.active { background:var(--accent); color:var(--on-accent); border-color:transparent; }
.fh-person { width:100%; text-align:left; cursor:pointer; border:1px solid var(--glass-line); background:var(--glass); color:var(--txt); font:inherit; font-weight:600; padding:11px 14px; border-radius:12px; }
.fh-person-x { margin-top:8px; background:none; border:0; color:var(--txt-dim); cursor:pointer; font:inherit; text-decoration:underline; }
.fh-foot { position:sticky; bottom:0; display:flex; gap:10px; padding:12px 0 4px; margin-top:6px; background:linear-gradient(to top, var(--bg1) 75%, transparent); }
.fh-clear { flex:0 0 auto; cursor:pointer; border:1px solid var(--glass-line); background:var(--glass); color:var(--txt); font:inherit; font-weight:700; padding:13px 18px; border-radius:14px; }
.fh-apply { flex:1; cursor:pointer; border:0; background:var(--accent); color:var(--on-accent); font:inherit; font-weight:800; font-size:15px; padding:13px; border-radius:14px; }
.fh-apply:disabled { opacity:.5; cursor:default; }

/* Dubbel-thumb range-slider (speltid + komplexitet) */
.fh-range { position:relative; height:38px; display:flex; align-items:center; }
.fh-track { position:absolute; left:10px; right:10px; height:5px; border-radius:3px; background:var(--glass-line); }
.fh-range input[type=range] { position:absolute; left:0; right:0; width:100%; margin:0; height:38px; background:none; pointer-events:none; -webkit-appearance:none; appearance:none; }
.fh-range input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; pointer-events:auto; width:22px; height:22px; border-radius:50%; background:var(--accent); border:2px solid var(--bg1); box-shadow:0 2px 8px rgba(0,0,0,.4); cursor:pointer; }
.fh-range input[type=range]::-moz-range-thumb { pointer-events:auto; width:22px; height:22px; border-radius:50%; background:var(--accent); border:2px solid var(--bg1); cursor:pointer; }
.fh-range input[type=range]::-webkit-slider-runnable-track { background:none; border:none; }
.fh-range input[type=range]::-moz-range-track { background:none; }

/* List-wizard + handplock + rank-själv */
.wiz-top { display:flex; align-items:center; gap:10px; }
.wiz-step { margin-left:auto; font-size:12px; font-weight:700; color:var(--txt-dim); }
.wiz-body { padding:8px 0 4px; }
.wiz-field { display:block; margin-bottom:14px; }
.wiz-field span { display:block; font-size:12px; font-weight:700; text-transform:uppercase; color:var(--txt-dim); margin-bottom:6px; }
.wiz-field input { width:100%; background:var(--glass); border:1px solid var(--glass-line); border-radius:12px; padding:12px 14px; color:var(--txt); font:inherit; font-size:16px; }
.wiz-lbl { font-size:12px; font-weight:700; text-transform:uppercase; color:var(--txt-dim); margin:10px 0 8px; }
.wiz-opts { display:flex; gap:10px; }
.wiz-opt { flex:1; display:flex; flex-direction:column; gap:4px; text-align:left; cursor:pointer; border:1px solid var(--glass-line); background:var(--glass); color:var(--txt); font:inherit; padding:14px; border-radius:14px; }
.wiz-opt b { font-size:15px; }
.wiz-opt span { font-size:12px; color:var(--txt-dim); }
.wiz-opt.active { border-color:var(--accent); background:var(--accent-soft); }
.wiz-note { margin-top:12px; color:var(--accent); font-weight:700; font-size:13px; }
.wiz-foot { display:flex; align-items:center; gap:10px; margin-top:18px; }
.wiz-back { cursor:pointer; border:1px solid var(--glass-line); background:var(--glass); color:var(--txt); font:inherit; font-weight:700; padding:12px 18px; border-radius:12px; }
.wiz-next { margin-left:auto; cursor:pointer; border:0; background:var(--accent); color:var(--on-accent); font:inherit; font-weight:800; padding:12px 22px; border-radius:12px; }
.wiz-next:disabled { opacity:.5; cursor:default; }
.pick-search input { width:100%; background:var(--glass); border:1px solid var(--glass-line); border-radius:12px; padding:11px 14px; color:var(--txt); font:inherit; font-size:16px; margin-bottom:10px; }
.pick-list { display:flex; flex-direction:column; gap:4px; max-height:48dvh; overflow-y:auto; }
.pick-row { display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer; border:1px solid transparent; background:var(--glass); color:var(--txt); font:inherit; font-size:14px; padding:10px 12px; border-radius:10px; }
.pick-row .pick-cb { flex:0 0 auto; width:20px; height:20px; border-radius:6px; border:1px solid var(--glass-line); display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--on-accent); }
.pick-row.on { border-color:var(--accent); }
.pick-row.on .pick-cb { background:var(--accent); border-color:transparent; }
.rs-list { display:flex; flex-direction:column; gap:6px; max-height:56dvh; overflow-y:auto; }
.rs-row { display:flex; align-items:center; gap:10px; background:var(--glass); border:1px solid var(--glass-line); border-radius:10px; padding:8px 10px; }
.rs-num { width:24px; text-align:center; font-weight:800; color:var(--accent); }
.rs-name { flex:1; font-size:14px; }
.rs-mv { width:36px; height:36px; border-radius:8px; border:1px solid var(--glass-line); background:var(--glass); color:var(--txt); cursor:pointer; }
.rs-mv:disabled { opacity:.3; cursor:default; }

/* Listor: rena block + skapa-knapp */
.lblock { display:flex; align-items:stretch; gap:6px; }
.lblock-open { flex:1; display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer; border:1px solid var(--glass-line); background:var(--glass); color:var(--txt); font:inherit; padding:14px 16px; border-radius:14px; }
.lb-ic { font-size:20px; }
.lb-txt { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.lb-txt b { font-size:15px; }
.lb-meta { font-size:12px; color:var(--txt-dim); }
.lb-go { color:var(--txt-dim); font-size:20px; }
.lb-ren, .lb-del { flex:0 0 auto; width:44px; border:1px solid var(--glass-line); background:var(--glass); color:var(--txt); border-radius:12px; cursor:pointer; font-size:15px; }
.lb-ren:hover, .lb-del:hover { border-color:var(--accent); }
.ll-new { width:100%; margin-top:14px; cursor:pointer; border:1px dashed var(--glass-line); background:var(--accent-soft); color:var(--accent); font:inherit; font-weight:800; font-size:15px; padding:15px; border-radius:14px; }

/* AI: reset-knapp */
.ai-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ai-actions { flex:0 0 auto; display:flex; align-items:center; gap:6px; }
.ai-iconbtn { background:var(--glass); border:1px solid var(--glass-line); color:var(--txt); width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:15px; display:grid; place-items:center; transition:transform .15s, background .15s; }
.ai-iconbtn:active { transform:scale(.9); }
.ai-reset { flex:0 0 auto; background:var(--glass); border:1px solid var(--glass-line); color:var(--txt); width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:16px; transition:transform .3s; }
.ai-reset:active { transform:rotate(-180deg); }
/* arkiv-sheet (Tidigare chatter) */
.arch-list { display:flex; flex-direction:column; gap:8px; max-height:60vh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; }
.arch-empty { color:var(--txt-dim); font-size:14px; line-height:1.5; padding:14px 4px; }
.arch-row { display:flex; align-items:stretch; gap:8px; }
.arch-open { flex:1 1 auto; min-width:0; text-align:left; background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-ctl); padding:10px 12px; cursor:pointer; display:flex; flex-direction:column; gap:3px; color:var(--txt); }
.arch-open:active { background:var(--glass-line); }
.arch-title { font-size:14px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arch-meta { font-size:11.5px; color:var(--txt-dim); }
.arch-tools { flex:0 0 auto; display:flex; flex-direction:column; gap:4px; justify-content:center; }
.arch-tool { background:var(--glass); border:1px solid var(--glass-line); color:var(--txt-dim); border-radius:8px; font-size:10.5px; font-weight:700; padding:3px 7px; cursor:pointer; }
.arch-tool:active { background:var(--glass-line); }
.arch-del { color:#ff6b6b; }
/* regelfråge-läge */
.ai-chip-rules { background:var(--accent-soft); border-color:transparent; color:var(--accent); font-weight:700; }
.ai-mode { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--accent-soft); border:1px solid var(--glass-line); border-radius:var(--r-ctl); padding:8px 12px; margin:0 0 8px; font-size:13px; color:var(--txt); }
.ai-mode[hidden] { display:none; }   /* display:flex vann annars över hidden → tom kapsel syntes alltid */
.ai-mode .aim-txt { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aim-x { flex:0 0 auto; background:none; border:0; color:var(--txt-dim); font-size:15px; cursor:pointer; padding:2px 6px; }
.ai-note { align-self:center; text-align:center; font-size:12.5px; color:var(--txt-dim); background:var(--glass); border:1px dashed var(--glass-line); border-radius:12px; padding:7px 12px; max-width:92%; margin:4px 0; }
.rules-list { display:flex; flex-direction:column; gap:8px; max-height:60vh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; }
.rules-item { text-align:left; background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-ctl); padding:12px 14px; cursor:pointer; color:var(--txt); font-size:14.5px; font-weight:600; }
.rules-item:active { background:var(--glass-line); }
/* Intresselista (wishlist) */
.wl-add { flex:0 0 auto; background:var(--accent); color:var(--on-accent); border:0; border-radius:var(--r-pill); font-weight:700; font-size:13.5px; padding:9px 14px; cursor:pointer; }
.wl-add:active { filter:brightness(.92); }
.wl-empty { text-align:center; color:var(--txt-dim); padding:40px 16px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.wl-empty-ic { font-size:40px; }
.wl-empty-btn { background:var(--accent); color:var(--on-accent); border:0; border-radius:var(--r-pill); font-weight:700; padding:11px 18px; cursor:pointer; }
.wl-list { display:flex; flex-direction:column; gap:10px; }
.wl-card { display:flex; gap:12px; align-items:stretch; background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-card); padding:10px; }
.wl-cover { flex:0 0 auto; width:58px; height:80px; border-radius:var(--r-square); overflow:hidden; background:var(--bg1); }
.wl-cover .cover-img, .wl-cover canvas { width:100%; height:100%; object-fit:cover; display:block; }
.wl-body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; justify-content:center; }
.wl-name { font-size:15px; font-weight:680; line-height:1.2; }
.wl-year { color:var(--txt-dim); font-weight:500; font-size:13px; }
.wl-fire { font-size:13px; letter-spacing:1px; }
.wl-note { font-size:12.5px; color:var(--txt-dim); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bgg-btn, .wl-bgg { display:inline-flex; align-items:center; gap:5px; align-self:flex-start; min-height:30px; background:var(--glass); border:1px solid var(--glass-line); color:var(--txt); text-decoration:none; font-weight:700; font-size:13px; padding:4px 13px; border-radius:999px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:.16s; }
.card-acts .bgg-btn { align-self:center; }   /* matcha spelsug/note-knapparnas höjd i knappraden */
.bgg-btn:hover, .wl-bgg:hover { border-color:var(--accent); color:var(--accent); }
.bgg-btn:active, .wl-bgg:active { transform:scale(.96); }
.wl-tools { flex:0 0 auto; display:flex; flex-direction:column; gap:6px; justify-content:center; }
.wl-tool { background:var(--glass); border:1px solid var(--glass-line); color:var(--txt-dim); width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:13px; }
.wl-tool:active { background:var(--glass-line); }
.wl-del { color:#ff6b6b; }
/* wishlist add/edit-form */
.wl-form { display:flex; flex-direction:column; gap:12px; padding-bottom:6px; }
.wl-field { display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--txt-dim); }
.wl-field input, .wl-field textarea { background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-ctl); color:var(--txt); font:inherit; font-size:15px; padding:10px 12px; width:100%; }
.wl-field textarea { resize:vertical; }
.wl-fire-pick { display:flex; gap:6px; }
.wl-fbtn { background:var(--glass); border:1px solid var(--glass-line); border-radius:10px; font-size:20px; width:46px; height:42px; cursor:pointer; filter:grayscale(1) opacity(.45); transition:filter .12s, transform .12s; }
.wl-fbtn.on { filter:none; }
.wl-fbtn:active { transform:scale(.9); }
.wl-facts { font-size:12px; color:var(--txt-dim); }
.wl-bgg-row { display:flex; gap:8px; align-items:stretch; }
.wl-bgg-row input { flex:1 1 auto; }
.wl-fetch { flex:0 0 auto; background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent); border-radius:var(--r-ctl); font:inherit; font-size:14px; font-weight:700; padding:0 16px; cursor:pointer; white-space:nowrap; transition:transform .12s; }
.wl-fetch:active { transform:scale(.96); }
.wl-fetch:disabled { opacity:.5; cursor:default; }
.wl-fetch-status { font-size:12px; color:var(--txt-dim); line-height:1.35; }
.wl-fetch-status.ok { color:#39b56a; }
.wl-fetch-status.err { color:#ff6b6b; }
.wl-card.is-tappable .wl-cover, .wl-card.is-tappable .wl-body { cursor:pointer; }
/* wishlist detaljvy (tryck på kort) */
.wd-head { display:flex; gap:14px; align-items:flex-start; margin-bottom:12px; }
.wd-cover { flex:0 0 auto; width:100px; height:138px; border-radius:var(--r-ctl); overflow:hidden; background:var(--bg1); box-shadow:0 10px 28px rgba(0,0,0,.28); }
.wd-cover .cover-img, .wd-cover canvas { width:100%; height:100%; object-fit:cover; display:block; }
.wd-meta { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px; }
.wd-name { font-size:19px; font-weight:720; line-height:1.15; }
.wd-note { font-size:14px; color:var(--txt); line-height:1.5; margin-bottom:8px; white-space:pre-wrap; }
.wl-enrich { width:100%; background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent); border-radius:var(--r-ctl); font:inherit; font-size:14px; font-weight:700; padding:11px; cursor:pointer; margin-bottom:10px; }
/* ⚙️ Inställningar */
.set-list { display:flex; flex-direction:column; gap:0; margin-bottom:6px; }
.set-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--glass-line); font-size:14px; color:var(--txt-dim); text-decoration:none; }
.set-row b { color:var(--txt); font-weight:650; }
.set-row.link b { color:var(--accent); }
.set-h { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-dim); margin:14px 0 6px; }
.set-p { font-size:13px; line-height:1.55; color:var(--txt); margin:0 0 4px; }
.set-road { display:flex; flex-direction:column; gap:6px; font-size:13px; line-height:1.45; color:var(--txt); }
.set-road b { font-weight:700; }
.wl-form-foot { display:flex; gap:10px; margin-top:4px; }
.wl-cancel { flex:1; background:var(--glass); border:1px solid var(--glass-line); color:var(--txt); border-radius:var(--r-ctl); font-weight:600; padding:12px; cursor:pointer; }
.wl-save { flex:1; background:var(--accent); color:var(--on-accent); border:0; border-radius:var(--r-ctl); font-weight:700; padding:12px; cursor:pointer; }