@font-face{font-family:'League Spartan';src:url('fonts/leaguespartan.otf') format('opentype');font-weight:700 900;font-display:swap}
@font-face{font-family:'Red Hat Display';src:url('fonts/redhatd_bold.otf') format('opentype');font-weight:400 900;font-display:swap}
:root{color-scheme:dark;--bg:#0d1218;--panel:#131a22;--raised:#1a2330;--line:#ffffff14;--line-hi:#ffffff2b;--fill:#ffffff0d;--fill-hi:#ffffff17;--ink:#f4f7fa;--muted:#8794a1;--soft:#c6d0da;--font:'Red Hat Display',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;--title:'League Spartan','Red Hat Display',Arial,sans-serif;--ease:cubic-bezier(.22,.9,.24,1);--spring:cubic-bezier(.34,1.56,.64,1);--header-h:102px;--r:#9aabbb}

/* Springs sampled from a damped oscillator (bounce 0.25, and 0 for settling surfaces). */
@supports (transition-timing-function:linear(0,1)){:root{--spring:linear(0, 0.016, 0.057, 0.117, 0.189, 0.267, 0.349, 0.43, 0.509, 0.583, 0.652, 0.714, 0.77, 0.819, 0.862, 0.898, 0.929, 0.954, 0.975, 0.991, 1.004, 1.013, 1.02, 1.024, 1.027, 1.028, 1.028, 1.027, 1.026, 1.024, 1.022, 1.02, 1.017, 1.015, 1.013, 1.011, 1.009, 1.007, 1.006, 1.005, 1.003, 1.002, 1.002, 1);--ease:linear(0, 0.036, 0.12, 0.225, 0.334, 0.438, 0.533, 0.616, 0.688, 0.748, 0.797, 0.838, 0.872, 0.898, 0.92, 0.937, 0.951, 0.962, 0.97, 0.977, 0.982, 0.986, 0.989, 0.992, 0.994, 0.995, 0.996, 0.997, 0.998, 0.998, 0.999, 1)}}

/* Rarity hues follow the game's own ItemMacros quality enums: Grey, Black, Green, Blue, Purple, Pink, Red and Golden.
   The exact shades are display choices. Each tile runs from the medium shade to the dark one inside a light outline. */
:root{--r-med:#6e6e6e;--r-dark:#282828;--r-light:#6b6b6b}
[data-rarity=standard]{--r:#b4bec8;--r-med:#9e9e9e;--r-dark:#424242;--r-light:#a8a8a8}
[data-rarity=common]{--r:#a7b1bb;--r-med:#6e6e6e;--r-dark:#282828;--r-light:#6b6b6b}
[data-rarity=uncommon]{--r:#56d68f;--r-med:#2fbf5f;--r-dark:#145a2b;--r-light:#45d27a}
[data-rarity=rare]{--r:#4fa9ff;--r-med:#3a9eff;--r-dark:#143a6b;--r-light:#4c98f5}
[data-rarity=epic]{--r:#b680ff;--r-med:#a855f7;--r-dark:#3b1d6b;--r-light:#b878ff}
[data-rarity=legendary]{--r:#ff78c4;--r-med:#f0369b;--r-dark:#7a1650;--r-light:#ff5cb0}
[data-rarity=mythic]{--r:#ff5d5d;--r-med:#f03a26;--r-dark:#7a1f15;--r-light:#ff4a38}
[data-rarity=fabled]{--r:#ffc847;--r-med:#ffc600;--r-dark:#7a5c00;--r-light:#ffbb1a}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--font);-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(1100px 620px at 12% -14%,#18324d8c,transparent 64%),radial-gradient(820px 700px at 112% 112%,#2a1d4a66,transparent 62%)}
button,input,select{font:inherit}
button{cursor:pointer;color:inherit}
button:disabled{opacity:.4;cursor:default}
button,input,select,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
svg{width:24px;height:24px;display:block;flex-shrink:0}
button>span[data-icon]{display:flex;align-items:center}
/* Keyboard focus in the palette's gold, following each control's own shape; the logo glows instead of being boxed
   (Dan, 20 October 2026: no white box round the logo). */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--lab-gold);outline-offset:2px}
.brand:focus-visible{outline:none}
.brand:focus-visible .brand-mark{transform:scale(1.08);filter:drop-shadow(0 0 10px #f6c94ab3)}
::selection{background:#f6c94a59;color:#fff}
.sr{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Header and tabs */
.app-header{position:sticky;top:calc(var(--title-h,56px) * -1);z-index:10;background:#0d1218f0;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid var(--line);transition:box-shadow .35s var(--ease)}
body.scrolled .app-header{box-shadow:0 14px 34px #000b}
.toolbar-row{display:flex;align-items:center;gap:14px;max-width:1400px;min-height:56px;margin:auto;padding:10px 20px}
/* The logo: the gold parachute crate on its own, without the app tile (Dan, 15 October 2026); the name is the address
   (and the page heading for screen readers). */
.brand{display:flex;align-items:center;gap:9px;min-width:0;animation:titleIn .8s var(--ease) backwards}
.brand{flex-shrink:0}
.brand-mark{flex-shrink:0;width:36px;height:39px;filter:drop-shadow(0 4px 12px #f07a1a40);transition:transform .45s var(--spring)}
.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.05)}
.brand:active .brand-mark{transform:scale(.94)}
.header-actions{flex-shrink:0;display:flex;align-items:center;gap:6px;margin-left:auto}
.icon-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;padding:8px;background:transparent;color:var(--ink);flex-shrink:0;border-radius:12px;transition:background .2s,transform .3s var(--spring)}
.icon-button svg{transition:transform .5s var(--spring)}
.header-actions svg{width:23px;height:23px}
.connection-status{font-size:11px;font-weight:800;border-radius:999px;padding:4px 10px;background:var(--fill);color:#ffd38a;border:1px solid #ffd38a55}
/* Sections: one row of cards, icon above name; the chosen card is light. It scrolls sideways on phones. */
.section-bar{flex:1 1 auto;min-width:0;display:flex;gap:7px;margin:0;padding:2px 2px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding:0 8px}
.section-bar.more-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
.section-bar.more-left{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px);mask-image:linear-gradient(90deg,transparent,#000 14px)}
.section-bar.more-left.more-right{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 26px),transparent)}
.section-bar::-webkit-scrollbar{display:none}
.section-card{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:70px;height:62px;padding:8px 11px 7px;border-radius:14px;border:1px solid var(--line);background:var(--fill);color:var(--soft);font:800 10.5px/1 var(--title);letter-spacing:.7px;text-transform:uppercase;white-space:nowrap;scroll-snap-align:center;transition:background .3s var(--ease),color .3s,border-color .3s,box-shadow .3s,transform .4s var(--spring)}
.section-card svg{width:24px;height:24px}
.section-card:active{transform:scale(.94)}
.section-card.active{background:var(--ink);color:var(--bg);border-color:transparent;box-shadow:0 8px 20px #0009}
/* The game's symbols are white sprites used as masks, so they take the colour of the text around them. */
.game-icon{position:relative;display:block;flex-shrink:0;width:26px;height:26px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.game-icon .icon-badge{position:absolute;right:-3px;top:-2px;width:11px;height:11px}
.game-icon:has(.icon-badge){-webkit-mask:none;mask:none;background:none}
.game-icon:has(.icon-badge)::before{content:'';position:absolute;inset:0;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.section-card .game-icon{width:31px;height:31px;margin:-4px 0 -3px}
.menu-pill .game-icon{width:28px;height:28px;margin:-3px -3px}
.chip .game-icon{width:22px;height:22px;margin:-3px -2px}
.tile-glyph .game-icon{width:40%;height:40%;color:var(--r-light);opacity:.42}
.item-card .missing-picture .game-icon{width:100%;height:100%;max-width:50px;max-height:50px;color:var(--r-light);opacity:.55}
.hero-art .missing-picture .game-icon{width:76px;height:76px;color:var(--r-light);opacity:.7}

/* Search and filters */
/* The list slides in sideways when the tab changes; clip it so a phone never zooms out to fit the movement. */
.main-content{max-width:1400px;margin:0 auto;padding:14px 16px 96px;overflow-x:clip}
/* The tools sit above the grid so their menus open over the tiles. */
.catalogue-tools{position:relative;z-index:6;animation:rise .6s var(--ease) backwards}
.search-field{display:flex;align-items:center;gap:10px;min-width:0;max-width:760px;height:46px;padding:0 6px 0 14px;border-radius:14px;background:var(--fill);border:1px solid var(--line);color:var(--muted);transition:background .25s,border-color .25s,box-shadow .3s var(--ease)}
.search-field:focus-within{background:var(--fill-hi);border-color:#ffffff40;box-shadow:0 0 0 4px #ffffff0d}
.search-icon svg{width:19px;height:19px;stroke-width:2.4;transition:transform .35s var(--spring),color .3s}
.search-field:focus-within .search-icon svg{color:var(--ink);transform:scale(1.08) rotate(-8deg)}
.search-field input{width:100%;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:700 16px/1 var(--font)}
.search-field input::placeholder{color:#85929e;opacity:1}
.search-field input::-webkit-search-cancel-button{display:none}
.search-field .icon-button{width:34px;height:34px;padding:8px;border-radius:50%;color:var(--soft)}
.random-button.rolling svg{animation:roll .75s var(--ease)}
/* Filters are compact chips; each opens a menu of the choices that still find something. A chosen filter shows its value and a cross. */
.chip-row{display:flex;align-items:center;gap:7px;margin:10px -2px 0;padding:2px;overflow-x:auto;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 11px 0 14px;border-radius:999px;border:1px solid var(--line);background:var(--fill);color:var(--soft);font:800 11.5px/1 var(--title);letter-spacing:.9px;text-transform:uppercase;white-space:nowrap;transition:background .25s,color .25s,border-color .25s,transform .4s var(--spring)}
.chip svg{width:15px;height:15px;stroke-width:2;transition:transform .4s var(--spring)}
.chip:active{transform:scale(.95)}
.chip[aria-expanded=true]{background:var(--fill-hi);border-color:var(--line-hi);color:var(--ink)}
.chip[aria-expanded=true]>svg:last-child{transform:rotate(180deg)}
.chip.active{background:var(--ink);color:var(--bg);border-color:transparent;padding:0 5px 0 12px}
.chip.active>svg:first-child{width:17px;height:17px;stroke-width:1.6}
.chip-clear{display:flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:2px;border-radius:50%;background:#0d121814}
.chip-clear svg{width:13px;height:13px;stroke-width:2.4}
.chip-swatch{width:14px;height:14px;border-radius:4px;background:linear-gradient(145deg,var(--r-med),var(--r-dark));box-shadow:inset 0 0 0 1px #ffffff40}
#rarity-chip.active{background:linear-gradient(145deg,var(--r-med),var(--r-dark));color:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--r-light) 60%,transparent),0 6px 16px color-mix(in srgb,var(--r) 35%,transparent)}
#rarity-chip.active .chip-swatch{display:none}
#rarity-chip.active .chip-clear{background:#0000002e}
/* Search and order share one row: order is a square icon button at the search box's height. */
.search-row{display:flex;gap:8px;align-items:center;max-width:820px}
.search-row .search-field{flex:1;max-width:none}
.sort-chip{position:relative;flex:none;justify-content:center;width:46px;height:46px;padding:0;border-radius:14px}
.sort-chip svg{width:19px;height:19px}
.sort-chip.active{padding:0}
.filter-menu{position:absolute;z-index:8;left:var(--menu-left,0);top:var(--menu-top,104px);width:min(440px,100%);max-height:min(62vh,470px);display:flex;flex-direction:column;overflow:hidden;padding:0;border-radius:18px;border:1px solid var(--line-hi);background:#151d27f7;background:color-mix(in srgb,var(--raised) 92%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 26px 60px #000d;transform-origin:20% 0}
.menu-scroll{flex:0 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px}
.filter-menu.opening{animation:menuIn .3s var(--spring)}
.filter-menu.closing{animation:menuOut .16s var(--ease) forwards}
/* Menu choices size to their names and fill each row, so a name never breaks onto a second line (Dan, 15 October 2026). */
.menu-grid{display:flex;flex-wrap:wrap;gap:7px}
.menu-grid>.menu-pill{flex:1 0 auto;max-width:100%;white-space:nowrap}
.menu-pill{display:flex;align-items:center;gap:9px;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--fill);color:var(--soft);font:800 11.5px/1.1 var(--title);letter-spacing:.6px;text-transform:uppercase;text-align:left;transition:background .25s,color .25s,box-shadow .3s,transform .35s var(--spring)}
.menu-pill svg{width:21px;height:21px;flex-shrink:0}
.menu-pill:active{transform:scale(.95)}
.menu-pill.active{background:var(--ink);color:var(--bg);border-color:transparent}
/* Rarities in an even grid, every pill the same size (Dan, 22 October 2026: Mythic and Legendary looked larger). */
.rarity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.rarity-grid>.menu-pill{flex:none;min-width:0}
.rarity-pill{justify-content:center;color:#fff;border-color:color-mix(in srgb,var(--r-light) 60%,transparent);background:linear-gradient(145deg,var(--r-med),var(--r-dark));text-shadow:0 1px 2px #0009;box-shadow:inset 0 1px 0 #ffffff2e}
.rarity-pill.active{background:linear-gradient(145deg,var(--r-med),var(--r-dark));color:#fff;box-shadow:inset 0 1px 0 #ffffff2e,0 0 0 2px var(--raised),0 0 0 4px #fff}
/* A year's versions on one row at every width (a game year has at most six), so none is left alone on a row of its own. */
.version-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.version-grid .menu-pill{justify-content:center;padding:0;font-size:13px;letter-spacing:.4px}
.version-grid.earlier{margin-top:12px;grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.menu-heading{margin:14px 2px 7px;font:800 11px/1 var(--font);letter-spacing:1.5px;color:var(--muted)}
.menu-heading:first-child{margin-top:2px}
.menu-list{display:grid;gap:2px}
.menu-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:0 12px;border:0;border-radius:11px;background:none;color:var(--soft);font:700 14.5px/1.2 var(--font);text-align:left;transition:background .2s,color .2s}
.menu-row svg{width:19px;height:19px;stroke-width:2.2}
.menu-row.active{background:var(--fill-hi);color:var(--ink)}
.menu-empty{margin:6px 4px;color:var(--muted);font-size:13px}

/* Results */
/* Nine columns (six for guns) on desktop: tiles about 140 px, so a 256 px picture is not enlarged on a retina screen (Dan,
   20 October 2026: some pictures looked low resolution). */
.item-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px;align-items:start;margin-top:14px}
/* Guns are wide: wide tiles, two to a row on phones, so a 2:1 picture is not a strip in a square. */
body[data-section=weapons] .item-grid,body[data-section=gunlab] .item-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
/* Weapon tiles are smaller (Dan, 21 October 2026): a 256 x 128 gun picture fills one at its own pixels, so the older
   finishes show sharp. */
body[data-section=weapons] .item-grid{grid-template-columns:repeat(9,minmax(0,1fr))}
.item-card.wide{aspect-ratio:1.75/1}
.item-card.wide .card-image{inset:9% 7%}

/* Tiles. Pictured tiles carry no text: the name is in the tile's tooltip and its detail view.
   Tiles without artwork show their class icon with the name beneath it. */
.item-card{position:relative;min-width:0;aspect-ratio:1/1;border-radius:14px;overflow:hidden;isolation:isolate;background:linear-gradient(160deg,var(--r-med) 0%,var(--r-dark) 52%,#0b1016 100%);background:radial-gradient(95% 80% at 50% 40%,color-mix(in srgb,var(--r-med) 60%,transparent) 0%,transparent 66%),linear-gradient(160deg,var(--r-med) 0%,var(--r-dark) 52%,#0b1016 100%);box-shadow:inset 0 0 0 1px var(--r-light),inset 0 1px 0 #ffffff40,0 8px 18px #0008;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--r-light) 55%,transparent),inset 0 1px 0 #ffffff40,0 8px 18px #0008;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.item-card::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:2;pointer-events:none;background:linear-gradient(100deg,transparent,#ffffff45,transparent);transform:skewX(-14deg);opacity:0}
.item-card[data-rarity=fabled]::after{opacity:1;animation:tileSheen 1.3s var(--ease) both;animation-delay:calc(.35s + var(--i,0) * 55ms)}
.item-card.no-art{background:linear-gradient(160deg,#1a2330,#0f151c);background:radial-gradient(90% 70% at 50% 34%,color-mix(in srgb,var(--r-dark) 75%,transparent),transparent 72%),linear-gradient(160deg,#1a2330,#0f151c);box-shadow:inset 0 0 0 1px #ffffff1a,0 6px 14px #0006;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--r-light) 28%,transparent),0 6px 14px #0006}
.item-card:active{transform:scale(.96)}
/* A whole section is in the grid; the browser skips drawing the tiles far off screen. */
/* Blocks of 72 tiles (app.js): each spans the grid with the same columns, and one off screen is skipped as a whole. Its
   paint is contained, so it reaches 32px past its tiles for their hover lift and shadow, and lets clicks through. */
.tile-block{grid-column:1/-1;display:grid;grid-template-columns:inherit;gap:inherit;align-items:inherit;margin:-32px;padding:32px;content-visibility:auto;pointer-events:none}
.tile-block>*{pointer-events:auto}
.item-grid.animate .item-card{animation:rise .28s var(--ease) backwards;animation-delay:calc(var(--i,0) * 8ms)}
/* Tiles added while scrolling appear at once; only the first screen of a new list rises in. */
.item-grid .item-card.still,.item-card.still::after{animation:none}
.card-open{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:none;color:inherit;text-align:center}
.card-image{position:absolute;inset:7%;display:flex;align-items:center;justify-content:center}
.card-image img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;opacity:0;transition:opacity .15s linear}
.card-image img.loaded{opacity:1}
/* Weapon renders face right where the game's pictures face left: mirrored (the scale property, so hover and bob still work). */
img.mirrored{scale:-1 1}
/* A picture framed to its visible artwork (app.js visibleArea): drawn larger than its box, its empty margin outside. */
.card-image img.framed,#hero-image.framed{flex:none;max-width:none;max-height:none;translate:var(--fx,0) var(--fy,0)}
.tile-glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .35s var(--ease)}
.tile-glyph svg{width:34%;height:34%;color:var(--r-light);opacity:.42}
.card-image img.loaded~.tile-glyph{opacity:0}
.card-image.icon-art{inset:20% 18%}
.card-image.icon-art img{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--r-light) 70%,transparent))}
.card-image.missing{inset:16% 30% 46%}
.missing-picture{display:flex;align-items:center;justify-content:center;gap:5px;flex-direction:column;font-size:10px;line-height:1.2;color:var(--soft);text-align:center}
.missing-picture svg{width:30px;height:30px;opacity:.7;color:var(--r-light);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--r) 45%,transparent))}
.item-card .missing-picture svg{width:100%;height:100%;max-width:44px;max-height:44px;color:var(--r-light);opacity:.55;filter:none}
.card-copy{display:none}
.card-meta,.card-facts{display:none}
.section-indicator{display:none}
.item-card.no-art .card-copy{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;height:46%;padding:0 8px 6px}
.card-title{font-size:11.5px;font-weight:800;line-height:1.2;color:var(--soft);text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.pop svg{animation:pop .5s var(--spring)}

/* States and floating controls */
.skeleton{aspect-ratio:1/1;border-radius:14px;background:linear-gradient(105deg,#151c25 30%,#212b37 50%,#151c25 70%);background-size:200% 100%;animation:shimmer 1.4s infinite}
.empty-state{text-align:center;padding:56px 24px;max-width:460px;margin:auto;animation:rise .5s var(--ease) backwards}
.empty-state h3{font:800 23px var(--title);margin:8px 0 20px}
.empty-state p{color:var(--muted);font-size:13px;margin-bottom:22px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:8px 18px;background:var(--fill-hi);color:var(--ink);border:1px solid var(--line-hi);border-radius:999px;font-weight:800;transition:transform .3s var(--spring),background .3s,border-color .3s}
.button:active{transform:scale(.96)}
.button-subtle{font-size:12px}
.button-outline{background:var(--fill)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:11px 20px;border:1px solid var(--line-hi);border-radius:999px;background:#1a2330f2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font-size:12px;font-weight:800;box-shadow:0 10px 28px #0009;z-index:20;width:max-content;max-width:calc(100vw - 28px);animation:toastIn .45s var(--spring)}
.toast.leaving{animation:toastOut .24s var(--ease) forwards}
.noscript{padding:20px;background:var(--panel);color:#fff}
body.dialog-open{overflow:hidden}

/* Dialogs */
dialog{color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:0;box-shadow:0 30px 90px #000d;overscroll-behavior:contain}
dialog[open]{animation:dialogIn .42s var(--ease)}
dialog::backdrop{background:#03060ac2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
dialog[open]::backdrop{animation:fade .35s ease}
dialog.closing{animation:dialogOut .24s var(--ease) forwards}
dialog.closing::backdrop{animation:fadeOut .24s ease forwards}
/* Tabs: the new list arrives from the side of the chosen tab. */
.item-grid.enter-next{animation:enterNext .34s var(--ease)}
.item-grid.enter-prev{animation:enterPrev .34s var(--ease)}
/* The item card opens without showModal: a modal dialog makes the rest of the page inert, and the browser then restyles
   every tile, about 200 ms each way with 7,000 tiles on the page (Dan, 22 October 2026: clicking tiles lagged). It sits
   over its own backdrop instead, and app.js keeps the focus in it and closes it with Esc or a click outside. */
#detail-dialog{position:fixed;inset:0;z-index:60;margin:auto}
/* Safari focuses the card itself when it opens and outlined it; the buttons inside keep their focus ring. */
#detail-dialog:focus,#detail-dialog:focus-visible{outline:none}
.dialog-backdrop{position:fixed;inset:0;z-index:59;background:#03060ac2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fade .35s ease}
.dialog-backdrop.closing{animation:fadeOut .24s ease forwards}
/* The picture in flight between a tile and the card (app.js fly()). */
.flight{position:fixed;z-index:70;pointer-events:none;transform-origin:0 0;will-change:transform}
.flight>img{display:block;width:100%;height:100%}
.eyebrow{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Gun Lab and X-Suit levels, drawn like the game's Lab and X-Suit workshop lists: a progress line, then each level by
   name with a gold mark once reached, a padlock or outline star ahead, and a gold bar behind the chosen one. */
:root{--lab-gold:#f6c94a;--lab-gold-soft:#f6c94a4d}
.title-level{color:var(--lab-gold);white-space:nowrap}
@keyframes labBar{from{opacity:0;transform:scaleX(.3)}to{opacity:1;transform:none}}

/* The item page's 3D view for Gun Lab guns with a model: a Picture / 3D switch, and the view's tools in 3D. */
.stage-mode{position:absolute;z-index:4;left:12px;bottom:12px;display:flex;padding:3px;border-radius:999px;border:1px solid var(--line-hi);background:#0d1218c4;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.stage-mode button{height:32px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--soft);font:800 11px/1 var(--title);letter-spacing:.9px;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s}
.stage-mode button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.stage-mode button:not([aria-pressed=true]):hover{color:var(--ink)}
.stage-tools{position:absolute;z-index:4;right:12px;bottom:12px;display:flex;gap:6px;animation:fade .3s var(--ease)}
.stage-tools[hidden]{display:none}
.stage-tools>*{display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;border:1px solid var(--line-hi);background:#0d1218c4;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);cursor:pointer;transition:color .2s,transform .3s var(--spring)}
.stage-tools>*:active{transform:scale(.9)}
.stage-tools svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stage-tools [aria-pressed=false]{color:var(--muted)}
.stage-3d-view{position:absolute;inset:0;z-index:3;overflow:hidden;border-radius:inherit;animation:fade .45s var(--ease)}
.stage-3d-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.stage-3d-canvas:active{cursor:grabbing}
.hero-stage.mode-3d .hero-art,.hero-stage.mode-3d .kill-banner{visibility:hidden}
.hero-stage.mode-3d+.hero-dots{visibility:hidden}
.hero-stage.loading-3d::after{content:'';position:absolute;z-index:5;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid #ffffff1f;border-top-color:var(--ink);animation:spin .9s linear infinite}

/* The Favourites star in the header (gold when the Favourites list is open) and the one-line notice at the end. */
.favourites-button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;transition:fill .2s,stroke .2s,transform .4s var(--spring)}
.favourites-button[aria-pressed=true] svg{fill:var(--lab-gold);stroke:var(--lab-gold)}
.favourites-button:hover svg{transform:rotate(-12deg) scale(1.06)}
.missing-picture.locked-picture{gap:10px;color:var(--ink);text-align:center}
.site-foot{max-width:1400px;margin:28px auto 0;padding:18px 20px calc(26px + env(safe-area-inset-bottom));border-top:1px solid var(--line);color:var(--muted);font:600 12px/1.5 var(--font);text-align:center}
.foot-link{padding:0;border:0;background:none;color:var(--soft);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.foot-link:hover{color:var(--ink)}

/* Favourites: a gold star on a kept tile; the item page's star and like buttons sit beside its close button. */
.tile-fav{position:absolute;z-index:2;top:7px;right:7px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#0d1218b8;opacity:0;transform:scale(.4);transition:opacity .2s,transform .4s var(--spring);pointer-events:none}
.tile-fav svg{width:13px;height:13px;fill:var(--lab-gold)}
.item-card.fav .tile-fav{opacity:1;transform:none}

.favourite-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;transition:fill .2s,stroke .2s}
.favourite-button[aria-pressed=true] svg{fill:var(--lab-gold);stroke:var(--lab-gold)}
.like-button{display:inline-flex;align-items:center;gap:6px;height:44px;min-width:44px;padding:0 13px 0 11px;border-radius:999px;border:1px solid var(--line-hi);background:#0d1218a8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink);font:800 13px/1 var(--font);cursor:pointer;pointer-events:auto}
.like-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;transition:fill .2s,stroke .2s}
.like-button[aria-pressed=true] svg{fill:#ff5c7a;stroke:#ff5c7a}
.like-count:empty{display:none}
.favourite-button.pop svg,.like-button.pop svg{animation:pop .45s var(--spring)}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}

.hero-caption .like-button{height:40px;border:0;background:#070a0e59;-webkit-backdrop-filter:none;backdrop-filter:none}
/* The item page: the name, its tags as icons, then one icon per level with the chosen level named beneath. */
.detail-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0}
.tag{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 9px;border-radius:12px;border:1px solid var(--line);background:var(--fill);color:var(--soft)}
.tag svg,.tag .game-icon{width:20px;height:20px}
.tag svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tag-rarity svg{fill:var(--r);stroke:none;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--r) 45%,transparent))}
.tag-rarity .gem-cut{fill:none;stroke:#0d1218;stroke-opacity:.4;stroke-width:1.2}
.tag-edition{color:var(--lab-gold)}
.tag-edition.master svg{fill:var(--lab-gold);stroke:none}
.tag-brand{font:800 12px/1 var(--title);letter-spacing:.7px;text-transform:uppercase;color:var(--ink);cursor:pointer;transition:background .2s}
.tag-brand:hover{background:var(--fill-hi)}
.effect-tags{margin-top:8px}
.levels{margin:18px 0 4px}
.level-icons{display:flex;gap:7px}
.level-icon{display:grid;place-items:center;flex:0 1 44px;min-width:32px;height:44px;padding:0;border-radius:12px;border:1px solid var(--line);background:var(--fill);color:var(--lab-gold);cursor:pointer;transition:transform .35s var(--spring),background .2s,color .2s,box-shadow .3s}
.feature-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.level-icon:hover:not(.current){background:var(--fill-hi);transform:translateY(-2px)}
.level-icon:active{transform:scale(.92)}
.level-icon.current{background:var(--lab-gold);color:#1b1606;border-color:transparent;box-shadow:0 0 0 4px #f6c94a2e,0 8px 18px #0006}
.level-number{font:800 14px/1 var(--title)}
.level-caption{margin:10px 0 0;color:var(--soft);font:700 13.5px/1.3 var(--font);animation:fade .3s var(--ease)}
.level-caption b{margin-right:4px;color:var(--lab-gold)}


/* About: what the site is, where the data comes from, the not-affiliated notice and privacy. */
.about-dialog{width:560px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px)}
.about-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 14px 10px 24px;background:var(--panel)}
.about-head h2{margin:0;font:800 22px/1.1 var(--title);letter-spacing:-.2px}
.about-body{padding:0 24px 24px;color:var(--soft);font-size:14.5px;line-height:1.55}
.about-body h3{margin:20px 0 6px;font:800 11.5px/1 var(--title);letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}
.about-body p{margin:0;max-width:62ch}
.about-body a{color:inherit;text-underline-offset:3px}.about-body a:hover{color:var(--ink)}
.about-lead{color:var(--ink);font-size:16px}
.about-version{margin-top:22px!important;color:var(--muted);font-size:12.5px}

/* Item detail: one card, the item's rarity stage, sized round its picture (stageFit in app.js), with the name and two
   actions on its lower edge (Dan, 20 October 2026: no empty space; the picture and the words read as one surface).
   Inspecting grows the same card round a larger picture while the words step aside. */
.detail-dialog{width:fit-content;max-width:calc(100vw - 48px);max-height:calc(100dvh - 48px);overflow:hidden auto;scrollbar-width:none;background:var(--r-dark,#121a24);border:0;border-radius:26px;box-shadow:0 40px 100px #000c}
.detail-toolbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:flex-end;height:64px;margin-bottom:-64px;padding:12px;pointer-events:none}
.detail-toolbar>div{display:flex;gap:6px;pointer-events:auto}
.detail-toolbar .icon-button,.hero-caption .icon-button{width:40px;height:40px;padding:9px;border:0;border-radius:50%;background:#070a0e59;color:#fff;transition:background .15s ease-out,transform .3s var(--spring)}
.detail-toolbar .icon-button:hover,.hero-caption .icon-button:hover{background:#070a0ea6}
.detail-toolbar .icon-button:active,.hero-caption .icon-button:active{transform:scale(.92)}
.detail-toolbar .icon-button[hidden]{display:none}
.detail-toolbar .icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.detail-layout{display:block}
/* The stage takes its tile's rarity colours (the picture moves from the tile without a change of scene), with a soft light
   behind the item and the slow rays turning over it (Dan, 15 October 2026: the dark stage looked dull). */
.hero-stage{position:relative;isolation:isolate;display:flex;flex-direction:column;width:var(--art-w,360px);max-width:100%;overflow:hidden;border-radius:inherit;background:linear-gradient(160deg,var(--r-med),var(--r-dark));background:radial-gradient(62% 56% at 50% 44%,#ffffff38 0%,#ffffff12 45%,transparent 72%),radial-gradient(130% 100% at 50% 30%,color-mix(in srgb,var(--r-med) 88%,#fff) 0%,var(--r-med) 32%,var(--r-dark) 82%,color-mix(in srgb,var(--r-dark) 75%,#000) 100%);box-shadow:inset 0 1px 0 #ffffff2e;touch-action:pan-y}
.hero-stage::before{content:'';position:absolute;inset:-45%;opacity:.9;z-index:-1;background:conic-gradient(from 0deg,transparent 0deg,#ffffff1c 20deg,transparent 40deg,transparent 120deg,#ffffff1c 140deg,transparent 160deg,transparent 240deg,#ffffff1c 260deg,transparent 280deg);animation:spin 28s linear infinite;pointer-events:none;mix-blend-mode:soft-light}
.hero-art{position:relative;z-index:1;flex:none;display:flex;align-items:center;justify-content:center;height:var(--art-h,340px);padding:64px 0 12px;transition:opacity .35s var(--ease)}
.hero-caption{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;min-height:84px;padding:2px 14px 16px 24px;transition:opacity .2s var(--ease)}
.hero-caption::before{content:'';position:absolute;inset:-48px 0 0;z-index:-1;background:linear-gradient(to bottom,transparent,#0000004d);pointer-events:none}
.caption-text{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0;padding-bottom:5px}
.hero-caption h2{margin:0;font:800 24px/1.12 var(--title);letter-spacing:-.3px;color:#fff;text-wrap:balance;overflow-wrap:anywhere;text-shadow:0 1px 14px #0000004d}
.hero-caption .item-actions{display:flex;gap:6px;flex-shrink:0}
.hero-caption .tag-brand{height:26px;padding:0 11px;border:0;border-radius:999px;background:#070a0e59;color:#fff;font:800 11px/26px var(--title);letter-spacing:.8px}
.hero-caption .tag-brand:hover{background:#070a0ea6}
/* Emotes: a play button on the stage; the figure fades in over the icon while it plays. */
.stage-play{position:absolute;right:14px;bottom:14px;z-index:4;display:flex;align-items:center;justify-content:center;width:54px;height:54px;padding:0;border-radius:50%;border:1px solid var(--line-hi);background:#0d1218b8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;box-shadow:0 10px 24px #000a;transition:transform .4s var(--spring),background .25s,opacity .25s;animation:popIn .45s var(--spring)}
.stage-play svg{width:24px;height:24px;fill:currentColor;stroke:none;margin-left:2px}
.stage-play.again svg{fill:none;stroke:currentColor;stroke-width:2.2;margin:0}
.stage-play:active{transform:scale(.9)}
.stage-play:disabled{opacity:.7}
/* While the figure plays, the play control steps aside until it can play again. */
.hero-stage.playing .stage-play:disabled{opacity:0;pointer-events:none}
.hero-stage.emote-loading .stage-play{box-shadow:0 0 0 0 color-mix(in srgb,var(--r) 60%,transparent),0 10px 24px #000a;animation:ring 1.1s var(--ease) infinite}
.emote-view{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .45s var(--ease)}
.emote-view canvas{display:block;width:100%!important;height:100%!important}
.hero-stage.playing .emote-view{opacity:1}
.hero-stage.playing .hero-art{opacity:0}
.hero-art>img{position:relative;z-index:1;display:block;max-width:100%;max-height:100%;filter:drop-shadow(0 16px 20px #000a);animation:bob 6s ease-in-out 1s infinite}
.hero-art.icon-art>img{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--r-light) 70%,transparent))}
.hero-art .missing-picture{font-size:12px;gap:10px}
.hero-art .missing-picture svg{width:64px;height:64px}
.detail-kicker{display:flex;gap:.7em;margin:0 0 9px;font:800 11.5px/1 var(--font);letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.detail-kicker .kicker-rarity{color:var(--r)}
/* The picture dots sit over the stage's lower edge, so their late arrival never moves the layout. */
.hero-dots{position:absolute;left:0;right:0;bottom:22px;z-index:3;display:flex;justify-content:center;gap:2px;padding:0;pointer-events:none}
.hero-dots button{pointer-events:auto}
.hero-dots[hidden]{display:none}
.hero-dots button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;background:none}
.hero-dots button::before{content:'';width:7px;height:7px;border-radius:4px;background:#ffffff47;transition:width .4s var(--spring),background .3s}
.hero-dots button[aria-pressed=true]::before{width:20px;background:#fff}
.detail-added{margin:-2px 0 0;font:700 13.5px/1.4 var(--font);color:var(--soft)}
.detail-added span{margin-left:.35em;color:var(--muted)}
/* Levels run along one track: stops in their own rarity colours, the line filled up to the level shown. */
/* Gun Lab levels: a list like the game's upgrade screen, each level labelled with what it unlocks. */
.level-art{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 4px 52px;animation:fade .35s var(--ease)}
.kill-banner{position:relative;display:block;width:min(100%,320px);aspect-ratio:8/1;border-radius:4px;overflow:hidden}
.kill-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.kill-banner .kill-icon{inset:12% auto 12% 50%;width:auto;height:76%;transform:translateX(-50%);object-fit:contain}
.kill-counter{display:block;width:min(100%,256px);height:auto;aspect-ratio:4/1;object-fit:contain}
.item-emotes{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.level-emote{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:4px 14px 4px 8px;border-radius:999px;border:1px solid var(--line);background:var(--fill-hi);color:var(--ink);font:700 13px/1.2 var(--font)}
.level-emote svg{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--r-med,#e8a33a);fill:#fff}
.detail-loading,.detail-error{padding:35px;color:var(--soft)}
.detail-loading{animation:fade .4s ease .15s backwards}
.detail-error h2{font:800 25px var(--title)}

/* Pointer-only hover effects, so touch screens do not keep a stuck hover state */
@media(hover:hover){
.icon-button:hover{background:var(--fill-hi)}
.section-card:hover:not(.active),.chip:hover:not(.active),.menu-pill:hover:not(.active):not(.rarity-pill){background:var(--fill-hi);color:var(--ink)}
.rarity-pill:hover{filter:brightness(1.12)}
.menu-row:hover{background:var(--fill);color:var(--ink)}
.random-button:hover svg{transform:rotate(-14deg) scale(1.08)}
.item-card:hover{z-index:5;transform:translateY(-4px) scale(1.03);box-shadow:inset 0 0 0 1px var(--r-light),inset 0 1px 0 #ffffff59,0 18px 34px #000a}
.item-card:hover::after{opacity:1;animation:tileSheen .9s var(--ease)}
.item-card:hover .card-image img.loaded{transform:scale(1.08)}
.button:hover{transform:translateY(-2px);background:#ffffff21}
}

/* Motion */
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes titleIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes dialogIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes roll{0%{transform:rotate(0) scale(1)}45%{transform:rotate(-220deg) scale(.82)}100%{transform:rotate(-360deg) scale(1)}}
@keyframes pop{0%{transform:scale(1)}30%{transform:scale(1.5)}60%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes tileSheen{from{transform:translateX(0) skewX(-14deg)}to{transform:translateX(420%) skewX(-14deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes shadowBob{0%,100%{transform:scaleX(1);opacity:.5}50%{transform:scaleX(.8);opacity:.3}}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,18px) scale(.94)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes fadeOut{to{opacity:0}}
@keyframes dialogOut{to{opacity:0;transform:translateY(18px) scale(.98)}}
@keyframes sheetDown{to{transform:translateY(100%)}}
@keyframes enterNext{from{opacity:0;transform:translateX(56px)}}
@keyframes enterPrev{from{opacity:0;transform:translateX(-56px)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,14px) scale(.96)}}
@keyframes popIn{from{opacity:0;transform:scale(.6)}}
@keyframes ring{70%{box-shadow:0 0 0 14px transparent,0 10px 24px #000a}100%{box-shadow:0 0 0 0 transparent,0 10px 24px #000a}}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px) scale(.96)}}
@keyframes menuOut{to{opacity:0;transform:translateY(-6px) scale(.97)}}
@keyframes panelIn{from{opacity:0;transform:translateY(-10px)}}

/* Responsive */
@media(min-width:1101px){
/* The section row fills the header between the logo and the actions. */
.section-card{flex:1 1 auto}
.section-bar,.section-bar.more-left,.section-bar.more-right{-webkit-mask-image:none;mask-image:none}
}
@media(max-width:1100px){
.item-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
body[data-section=weapons] .item-grid,body[data-section=gunlab] .item-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
body[data-section=weapons] .item-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.toolbar-row{padding-inline:16px}
}
@media(max-width:760px){
.main-content{padding:10px 10px 96px}
.item-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
body[data-section=weapons] .item-grid,body[data-section=gunlab] .item-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
body[data-section=weapons] .item-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.filter-menu{left:0;width:100%}
.detail-dialog{width:100%;height:100dvh;max-width:100%;max-height:100dvh;margin:0;border-radius:0;box-shadow:none}
.detail-dialog[open]{animation:sheetUp .45s var(--ease)}
.detail-dialog.closing{animation:sheetDown .26s var(--ease) forwards}
#detail-content,.detail-layout{height:100%}
.hero-stage{width:100%;height:100%;border-radius:0}
.hero-art{flex:1;height:auto;padding-top:calc(64px + env(safe-area-inset-top))}
.hero-caption{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.hero-caption h2{font-size:26px}
.detail-toolbar{padding-top:calc(12px + env(safe-area-inset-top));height:calc(64px + env(safe-area-inset-top));margin-bottom:calc(-64px - env(safe-area-inset-top))}
}
@media(max-width:480px){
.toolbar-row{gap:10px;padding:8px 12px;min-height:54px}
.brand-mark{width:31px;height:34px}
.header-actions{gap:2px}
.header-actions .icon-button{width:40px;height:40px}
.section-card{min-width:64px;height:58px;padding:7px 9px 6px;font-size:10px;letter-spacing:.5px}
.section-card svg{width:22px;height:22px}
.search-field{height:44px}
.main-content{padding:8px 8px 96px}
.item-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
body[data-section=weapons] .item-grid,body[data-section=gunlab] .item-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-section=weapons] .item-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.card-title{font-size:11px}
}
@media(max-width:350px){
.section-card{min-width:60px}
.search-field input{font-size:15px}
.item-grid{gap:5px}
.card-title{font-size:10px}
}
.pill-count{flex-shrink:0;margin-left:auto;padding-left:6px;font:700 11px/1 var(--font);letter-spacing:0;color:var(--muted)}
/* A name never runs into its count: one-word brand names (TRANSFORMERS) get wider columns, and as a last resort a long word wraps. */
.menu-pill>span:not(.pill-count):not(.game-icon){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-grid>.menu-pill,.wide-grid>.menu-pill{min-width:140px}
.filter-menu.scrolls:not(.at-end) .menu-scroll{-webkit-mask-image:linear-gradient(#000 calc(100% - 52px),transparent);mask-image:linear-gradient(#000 calc(100% - 52px),transparent)}
.menu-pill.active .pill-count{color:inherit;opacity:.65}
.detail-brand{display:flex;flex-wrap:wrap;align-items:center;gap:7px 10px;margin:11px 0 0;font:700 13px/1.4 var(--font)}
.brand-link{display:inline-flex;align-items:center;gap:3px;min-height:30px;padding:0 8px 0 12px;border-radius:999px;border:1px solid var(--line);background:var(--fill);color:var(--ink);font:800 12px/1 var(--title);letter-spacing:.6px;text-transform:uppercase}
.brand-link svg{width:14px;height:14px;transform:rotate(-90deg)}
.brand-link:active{transform:scale(.95)}
.special-badge{padding:5px 10px 4px;border-radius:999px;border:1px solid #ffc24e;color:#ffc24e;font:800 11px/1 var(--title);letter-spacing:.8px;text-transform:uppercase}
.masterpiece-badge{padding:6px 10px 5px;border-radius:999px;background:linear-gradient(135deg,#ffd25c,#f07a1a);color:#1a1206;font:800 11px/1 var(--title);letter-spacing:.8px;text-transform:uppercase}
/* Sports cars: Brand and Edition lead the chips; the grid runs in the Workshop's brand order, without headings. */
body[data-section="sportscars"] #brand-chip{order:-3}
body[data-section="sportscars"] #edition-chip{order:-2}
body[data-section="sportscars"] #type-chip{order:-1}
.menu-row .pill-count{margin-left:auto}
/* Two-level menus: the game's upper level (a vehicle category, a gun type, a car brand) heads its entries and picks them all. */
.menu-group{display:flex;align-items:center;gap:9px;width:100%;min-height:42px;margin:12px 0 7px;padding:0 12px;border-radius:12px;border:1px solid transparent;background:none;color:var(--ink);font:800 13px/1.1 var(--title);letter-spacing:.8px;text-transform:uppercase;text-align:left;transition:background .2s,color .2s}
.menu-group:first-child,.menu-heading+.menu-group{margin-top:2px}
.menu-group .pill-count{margin-left:auto}
.menu-group .game-icon{width:28px;height:28px;margin:-3px -3px}
.menu-group:active{transform:scale(.98)}
.menu-group.active{background:var(--ink);color:var(--bg)}
.menu-group+.menu-group{margin-top:0}
.detail-effects{margin:14px 0 0;animation:fade .35s var(--ease)}
.effects-title{margin:0 0 8px;font:800 11px/1 var(--font);letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.effects-list{display:flex;flex-wrap:wrap;gap:6px}
.effects-list span{padding:7px 11px 6px;border-radius:999px;background:var(--fill-hi);color:var(--soft);font:700 12.5px/1 var(--font)}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
.card-image img{opacity:1;transform:none}
}

.theme-toggle svg{width:22px;height:22px}