/* Alternative designs (Dan, 22 October 2026, after Yuri Gokoryan's dark card work): "mono" and its light twin "paper".
   One neutral surface family in a few close steps, hairlines instead of glows, a sunk well with a faint grid behind
   every picture, two type voices (a grotesk for names, a monospace for every label), and colour only where it means
   something: the rarity dot and one gold focal point. Dan chose this as the site's design (Mono by default, Paper by
   the sun and moon button); index.html loads it after app.css and sets html[data-design] before the first paint. */
html[data-design]{--bg:#0a0a0b;--panel:#141415;--raised:#1b1b1d;--sunk:#0f0f10;--line:#ffffff12;--line-hi:#ffffff21;--fill:#ffffff08;--fill-hi:#ffffff10;
  --ink:#ededee;--soft:#a9a9ae;--muted:#838389;--grid:#ffffff0b;--accent:#f6c94a;--shade:#0000008c;
  --font:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',system-ui,sans-serif;--title:var(--font);--mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,monospace}
html[data-design=paper]{color-scheme:light;--bg:#f2f2f0;--panel:#ffffff;--raised:#f7f7f6;--sunk:#efefed;--line:#00000014;--line-hi:#00000026;--fill:#00000008;--fill-hi:#00000010;
  --ink:#151516;--soft:#47474c;--muted:#68686e;--grid:#0000000a;--accent:#a8741a;--shade:#00000024}
/* The faint grey reaches 4.5:1 on every surface in both designs (Dan, 22 October 2026: finish the web UI). */
html[data-design] body{background:var(--bg);color:var(--ink);font-family:var(--font)}
html[data-design] body::before{display:none}
html[data-design] ::selection{background:color-mix(in srgb,var(--accent) 35%,transparent)}

/* Header: flat, one hairline. The sections sit in one quiet track as words, and a raised highlight slides to the chosen
   one (Dan, 22 October 2026: the menu selector could use some work). */
html[data-design] .app-header{background:color-mix(in srgb,var(--bg) 90%,transparent);border-bottom:1px solid var(--line);box-shadow:none}
html[data-design] .section-bar{position:relative;flex:0 1 auto;gap:0;margin:0;padding:4px;border-radius:999px;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 2px #0000002e;-webkit-mask-image:none;mask-image:none}
html[data-design] .section-card{position:relative;z-index:1;flex:0 0 auto;height:32px;min-width:0;padding:0 14px;gap:0;border:0;border-radius:999px;background:none;color:var(--muted);font:500 13px/32px var(--font);letter-spacing:0;text-transform:none;white-space:nowrap;box-shadow:none;transition:color .2s ease-out}
html[data-design] .section-card .game-icon,html[data-design] .section-card svg{display:none}
html[data-design] .section-card.active{background:none;color:var(--ink);box-shadow:none}
html[data-design] .section-card:hover:not(.active){background:none;color:var(--soft)}
html[data-design] .section-card:active{transform:none}
html[data-design] .section-indicator{position:absolute;z-index:0;top:4px;left:0;display:block;height:32px;border-radius:999px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line-hi),inset 0 1px 0 #ffffff14,0 2px 8px #00000059;opacity:0;transition:transform .42s cubic-bezier(.2,.8,.2,1),width .42s cubic-bezier(.2,.8,.2,1),opacity .2s}
html[data-design] .section-indicator.shown{opacity:1}
html[data-design=paper] .section-indicator{background:#fff;box-shadow:0 0 0 1px #00000012,0 2px 6px #0000001f}

/* One compact toolbar (Dan, 22 October 2026: too much empty space at the top): the section track sits beside the logo,
   and search, order and filters share one line, so the items start higher. */
html[data-design] .toolbar-row{gap:18px;min-height:60px}
html[data-design] .main-content{padding-top:12px}
html[data-design] .catalogue-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
html[data-design] .search-row{flex:0 1 380px;max-width:380px;gap:8px}
html[data-design] .chip-row{flex:1 1 auto;min-width:0;margin:0;padding:2px 0}
html[data-design] .chip-row.more-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
html[data-design] .chip-row.more-left{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
html[data-design] .chip-row.more-left.more-right{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 36px),transparent)}
html[data-design] .search-field{height:36px;padding:0 6px 0 12px;border-radius:10px}
html[data-design] .sort-chip{width:36px;height:36px;padding:0;border-radius:10px}
html[data-design] .item-grid{margin-top:12px}

/* Search and filters: one field, mono uppercase chips. */
html[data-design] .search-field{height:42px;border-radius:12px;background:var(--panel);border-color:var(--line)}
html[data-design] .search-field input{font:500 14px/1 var(--font);color:var(--ink)}
html[data-design] .chip,html[data-design] .sort-chip{height:30px;border-radius:999px;background:var(--panel);border-color:var(--line);color:var(--soft);font:500 10.5px/1 var(--mono);letter-spacing:.07em}
html[data-design] .chip.active{background:var(--raised);color:var(--ink);border-color:var(--accent)}
html[data-design] .chip:hover:not(.active){background:var(--raised);color:var(--ink)}
html[data-design] .filter-menu{background:var(--panel);border-color:var(--line-hi);box-shadow:0 24px 60px var(--shade)}
html[data-design] .menu-pill:not(.rarity-pill){background:var(--raised);border-color:var(--line);color:var(--soft);font:500 11px/1.1 var(--mono);letter-spacing:.05em}
html[data-design] .menu-pill.active:not(.rarity-pill){background:var(--panel);color:var(--ink);border-color:var(--accent)}

/* Tiles: the picture on its rarity's colour with no text (Dan, 22 October 2026: he prefers the tiles without text); a
   quiet hairline instead of the glow and sheen. The faint grid is kept for the enlarged view. */
html[data-design] .item-card{border-radius:12px;box-shadow:inset 0 0 0 1px #ffffff1c,inset 0 1px 0 #ffffff2e;transition:transform .2s ease-out,box-shadow .2s ease-out}
html[data-design] .item-card::after{display:none}
html[data-design] .item-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px #ffffff40,inset 0 1px 0 #ffffff40,0 10px 24px var(--shade)}
html[data-design] .item-card:hover .card-image img.loaded{transform:scale(1.04)}
html[data-design] .tile-fav{top:12px;right:12px;background:color-mix(in srgb,var(--panel) 80%,transparent)}
html[data-design] .tile-fav svg{fill:var(--accent)}
html[data-design] .skeleton{background:var(--panel);border-radius:14px}

/* The item card: the picture in a sunk well, then the name, three mono facts and a footer line with the actions. */
html[data-design] dialog::backdrop,html[data-design] .dialog-backdrop{background:color-mix(in srgb,var(--bg) 78%,transparent)}
html[data-design] .detail-dialog{background:var(--panel);border-radius:20px;box-shadow:inset 0 0 0 1px var(--line-hi),0 30px 80px var(--shade)}
html[data-design] .hero-stage{background:var(--panel);box-shadow:none}
html[data-design] .hero-stage::before{display:none}
html[data-design] .hero-art{margin:12px 12px 0;border-radius:14px;background-color:var(--sunk);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;background-position:center}
html[data-design] .hero-art>img{filter:drop-shadow(0 14px 20px var(--shade))}
html[data-design] .hero-caption{position:relative;display:block;min-height:0;padding:16px 20px 16px}
html[data-design] .hero-caption::before{display:none}
html[data-design] .caption-text{display:block;padding:0}
html[data-design] .hero-caption h2{font:500 21px/1.2 var(--font);letter-spacing:-.02em;color:var(--ink);text-shadow:none}
html[data-design] .hero-caption .tag-brand{margin-top:8px;height:24px;padding:0 9px;border-radius:6px;background:var(--fill-hi);color:var(--soft);font:500 10px/24px var(--mono);letter-spacing:.07em}
html[data-design] .card-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line)}
html[data-design] .card-facts dt{color:var(--muted);font:500 9.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
html[data-design] .card-facts dd{margin:4px 0 0;color:var(--ink);font:500 13px/1.3 var(--font);font-variant-numeric:tabular-nums}
html[data-design] .card-facts dd[data-rarity]{color:var(--r)}
html[data-design] .hero-caption .item-actions{position:absolute;right:16px;top:13px;gap:6px}
html[data-design] .hero-caption h2{padding-right:48px}
html[data-design] .hero-caption .icon-button{width:32px;height:32px;padding:7px;border-radius:999px;background:var(--raised);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-hi)}
html[data-design] .hero-caption .favourite-button[aria-pressed=true] svg{fill:var(--accent);stroke:var(--accent)}
html[data-design] .detail-toolbar .icon-button{background:color-mix(in srgb,var(--panel) 75%,transparent);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-hi)}

/* Footer and focus in the design's own colours. */
html[data-design] .site-foot{border-top-color:var(--line);color:var(--muted);font:500 11px/1.5 var(--mono);letter-spacing:.04em}
html[data-design] :focus-visible{outline-color:var(--accent)}
/* Narrower than the whole track (Dan, 22 October 2026: Companions was cut off): the menu takes its own full-width row
   under the logo and buttons; where even that is too narrow it scrolls, with a fade at the edge that has more. */
@media(max-width:1280px){
html[data-design] .toolbar-row{flex-wrap:wrap;row-gap:8px;padding-bottom:10px}
html[data-design] .section-bar{order:3;margin:0;flex:1 1 100%;overflow-x:auto}
html[data-design] .section-bar.more-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
html[data-design] .section-bar.more-left{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
html[data-design] .section-bar.more-left.more-right{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 36px),transparent)}
}
@media(max-width:1100px){
html[data-design] .section-card{padding:0 11px}
}
@media(max-width:760px){
html[data-design] .search-row{flex:1 1 100%;max-width:none}
html[data-design] .toolbar-row{gap:10px;min-height:56px}
html[data-design] .section-card{height:30px;padding:0 11px;font-size:12.5px;line-height:30px}
html[data-design] .section-indicator{height:30px}
html[data-design] .detail-dialog{border-radius:0;box-shadow:none}
html[data-design] .hero-caption{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
}