/* Clash-Bases game-UI upgrade (design mode 'game', approved prototype 2026-11-03).
   Loaded after main.css + clash-font.css only when CbDesign::game() is on. Colours stay the live tokens;
   this file changes how components are built: bevelled material, game-button physics, illustrated icons.
   Sections: 1 tokens · 2 icons · 3 buttons · 4 header · 5 mobile nav · 6 category badges · 7 base cards ·
             8 forms · 9 home (hero console, goal cards, TH grid, categories) · 10 shared page polish · 11 responsive */

/* ── 1. Tokens (live palette + derived materials) ─────────────────────────────────────────── */
:root{
  --g-mat-slot:radial-gradient(120% 90% at 50% 0%,#2a2018 0%,#1a1410 55%,#110a0d 100%);
  --g-mat-panel:linear-gradient(180deg,#1d1612,#130d0b);
  --g-mat-card:linear-gradient(180deg,#221a14,#16100c);
  --g-mat-gold:linear-gradient(180deg,#fff3c2 0%,#f5d76e 34%,#e0b33a 68%,#b8861c 100%);
  --g-mat-go:linear-gradient(180deg,#c6f58c 0%,#86d443 42%,#62b02a 72%,#46881a 100%);
  --g-mat-dark:linear-gradient(180deg,#352a20 0%,#231a14 55%,#1a1410 100%);
  --g-gold-lip:#6b4a0e;--g-gold-edge:#3d2804;--g-go-lip:#2c5c0c;--g-go-edge:#173304;
  --g-war:#ff6b5e;--g-cwl:#6cb8ff;--g-trophy:#f5d76e;--g-farming:#9be35a;
  --g-outline:0 2px 0 #000,1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;
  --g-ease:cubic-bezier(.2,.8,.2,1);--g-pop:cubic-bezier(.34,1.56,.64,1);
}

/* ── 2. Icons ─────────────────────────────────────────────────────────────────────────────── */
.cbi{display:inline-block;flex:0 0 auto;object-fit:contain;vertical-align:middle}

/* ── 3. Game buttons: dark outline, light band, bottom lip, press-down ────────────────────── */
.gbtn,.btn,.v2-btn,.v2-search-btn,.nav-cta{position:relative;isolation:isolate;transition:transform .12s var(--g-ease),box-shadow .12s var(--g-ease),filter .15s}
.gbtn{--bg:var(--g-mat-dark);--lip:#000;--edge:#000;--ink:var(--gold-bright);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;
  border:2px solid var(--edge);border-radius:14px;background:var(--bg);color:var(--ink);cursor:pointer;white-space:nowrap;font:800 16px/1 var(--font-display);letter-spacing:.02em;text-decoration:none;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),0 4px 0 var(--lip),0 9px 16px rgba(0,0,0,.45)}
.gbtn::before,.btn::before,.v2-btn::before,.v2-search-btn::before,.nav-cta::before{content:"";position:absolute;inset:2px 7px auto;height:46%;z-index:-1;border-radius:11px 11px 18px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.04));pointer-events:none}
.gbtn:hover,.btn:hover,.v2-btn:hover,.v2-search-btn:hover,.nav-cta:hover{filter:brightness(1.07) saturate(1.05);transform:translateY(-1px)}
.gbtn:active,.btn:active,.v2-btn:active,.v2-search-btn:active,.nav-cta:active{transform:translateY(3px)}
.gbtn:active{box-shadow:inset 0 -1px 0 rgba(0,0,0,.22),0 1px 0 var(--lip),0 3px 6px rgba(0,0,0,.4)}
.gbtn[disabled],.btn[disabled]{cursor:not-allowed;filter:grayscale(.9) brightness(.6);transform:none}
.gbtn[aria-busy=true]{pointer-events:none}
.gbtn[aria-busy=true]::after{content:"";width:16px;height:16px;border-radius:50%;border:3px solid currentColor;border-right-color:transparent;animation:g-spin .8s linear infinite}
@keyframes g-spin{to{transform:rotate(360deg)}}
.gbtn-gold{--bg:var(--g-mat-gold);--lip:var(--g-gold-lip);--edge:var(--g-gold-edge);--ink:#2a1a04}
.gbtn-gold>span{text-shadow:0 1px 0 rgba(255,250,225,.7)}
.gbtn-go{--bg:var(--g-mat-go);--lip:var(--g-go-lip);--edge:var(--g-go-edge);--ink:#fff}
.gbtn-go>span{text-shadow:0 2px 0 var(--g-go-edge),1px 1px 0 var(--g-go-edge),-1px -1px 0 var(--g-go-edge),1px -1px 0 var(--g-go-edge),-1px 1px 0 var(--g-go-edge)}
.gbtn-dark>span{text-shadow:0 2px 0 #000}
.gbtn-sm{min-height:42px;padding:0 14px;font-size:15px;border-radius:12px}
.gbtn-xl{min-height:72px;padding:0 30px 0 12px;font-size:clamp(19px,1.8vw,23px);border-radius:20px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2),0 6px 0 var(--lip),0 16px 30px rgba(0,0,0,.55)}
.gbtn-xl:active{transform:translateY(5px)}
.gbtn-ring{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#2d2218,#120c08);border:2px solid var(--g-gold-edge);box-shadow:inset 0 2px 0 rgba(255,255,255,.12)}
.gbtn-block{flex:1;min-width:0}
.gbtn-icon{width:48px;padding:0;flex:0 0 48px}
/* Live buttons get the same material without markup changes */
.btn-primary,.v2-btn-gold,.v2-search-btn,.nav-cta{background:var(--g-mat-gold)!important;color:#2a1a04!important;border:2px solid var(--g-gold-edge)!important;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 4px 0 var(--g-gold-lip),0 9px 16px rgba(0,0,0,.4)!important;text-shadow:0 1px 0 rgba(255,250,225,.6)}
.btn-secondary,.btn-ghost,.v2-btn-ghost{background:var(--g-mat-dark)!important;color:var(--gold-bright)!important;border:2px solid #000!important;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),0 4px 0 #000,0 9px 16px rgba(0,0,0,.4)!important}
.btn-primary:active,.v2-btn-gold:active,.v2-search-btn:active,.nav-cta:active{box-shadow:0 1px 0 var(--g-gold-lip)!important}

/* ── 4. Header: illustrated icons, fewer top-level items ──────────────────────────────────── */
.site-header .nav .nav-link{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.site-header .nav .nav-link .cbi{width:24px;height:24px;transition:transform .3s var(--g-pop)}
.site-header .nav .nav-link:hover .cbi{transform:translateY(-2px) rotate(-6deg)}
.site-header .nav>a[href="/battle-tested.php"]{display:none}       /* moved into "Mehr" (link kept in the menu) */
.site-header .nav>a[href="/upload.php"].nav-link{min-height:42px;padding:0 14px;border:2px solid var(--g-go-edge);border-radius:12px;background:var(--g-mat-go);color:#fff;
  font-family:var(--font-display);text-shadow:0 2px 0 var(--g-go-edge),1px 1px 0 var(--g-go-edge),-1px -1px 0 var(--g-go-edge);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 4px 0 var(--g-go-lip)}
.site-header .nav-link-feature{background:none!important;border-color:transparent!important}
.site-header .nav-link-feature::before{display:none}
.nav-more-menu a{display:flex!important;align-items:center;gap:10px}
.nav-more-menu .cbi{width:22px;height:22px}

/* ── 5. Mobile nav: illustrated icons, raised gold Finder in the middle ──────────────────── */
@media (max-width:1024px){
  .mobile-app-nav:has(.mobile-app-nav-hero){grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}
  .mobile-app-nav-item .cbi{width:28px;height:28px}
  .mobile-app-nav-item.is-active .cbi,.mobile-app-nav-item[aria-current=page] .cbi{filter:drop-shadow(0 0 6px rgba(245,215,110,.6))}
  .mobile-app-nav-hero{justify-content:flex-end;padding-bottom:6px;color:var(--text-bright)}
  .mobile-app-nav-hero.is-active{background:transparent}
  .mobile-app-nav-disc{display:grid;place-items:center;width:60px;height:60px;margin-top:-30px;margin-bottom:2px;border-radius:50%;background:var(--g-mat-gold);border:2px solid var(--g-gold-edge);box-shadow:0 4px 0 var(--g-gold-lip),0 8px 18px rgba(0,0,0,.6)}
  .mobile-app-nav-disc .cbi{width:44px;height:44px}
  .mobile-app-nav-hero:active .mobile-app-nav-disc{transform:translateY(3px);box-shadow:0 1px 0 var(--g-gold-lip)}
}

/* ── 6. Category badges: fixed meaning (war red, CWL blue, trophy gold, farming green), word always kept ── */
.g-tone-war{--t:var(--g-war)}.g-tone-cwl{--t:var(--g-cwl)}.g-tone-trophy{--t:var(--g-trophy)}.g-tone-farming{--t:var(--g-farming)}
.base-card-cat[class*=" base-cat-"],.badge-cat[class*=" g-tone-"],.base-cat-badge[class*=" base-cat-"]{--t:var(--g-trophy);display:inline-flex;align-items:center;gap:4px;
  background:rgba(10,6,8,.86)!important;border:1px solid #000!important;color:var(--text-bright)!important;box-shadow:inset 0 -3px 0 var(--t)!important;font-family:var(--font-display);text-shadow:0 1px 0 #000}
.base-cat-war{--t:var(--g-war)}.base-cat-cwl{--t:var(--g-cwl)}.base-cat-farming,.base-cat-hybrid{--t:var(--g-farming)}.base-cat-trophy,.base-cat-legend,.base-cat-ranked{--t:var(--g-trophy)}

/* ── 7. Base cards (browse .base-card, home .v2-bcard): layout first, TH crest, one action ── */
.base-card,.v2-bcard{border-radius:20px!important;background:var(--g-mat-card)!important;border:0!important;
  box-shadow:inset 0 1px 0 rgba(255,240,200,.08),0 0 0 1px rgba(0,0,0,.85),0 14px 30px rgba(0,0,0,.5)!important;transition:transform .25s var(--g-ease),box-shadow .25s var(--g-ease)!important}
.base-card:hover,.v2-bcard:hover{transform:translateY(-4px)!important;box-shadow:inset 0 1px 0 rgba(255,240,200,.1),0 0 0 1px rgba(245,215,110,.45),0 22px 40px rgba(0,0,0,.6)!important}
.base-card-image,.v2-bcard-thumb{margin:7px 7px 0;border-radius:14px!important;overflow:hidden}
.base-card-th,.badge-th{display:inline-flex!important;align-items:center;gap:2px;height:34px;padding:0 11px 0 2px!important;border-radius:11px!important;background:rgba(10,6,8,.86)!important;border:1px solid #000!important;
  color:var(--gold-bright)!important;font:800 15px/1 var(--font-display)!important;text-shadow:0 2px 0 #000;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.g-th-crest{width:42px;height:42px;margin:-10px -2px -6px -6px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.7))}
.base-card-title,.v2-bcard-title{font-weight:700;color:var(--text-bright)}
.g-card-open{display:flex;gap:8px;margin-top:10px}

/* ── 8. Forms: inset wells, gold focus; selects with a game chevron ───────────────────────── */
.form-input,.form-select,.form-textarea,.v2-search-wrap,.browse-filter-form select,.browse-filter-form input[type=text]{background:#0e0909!important;border:2px solid #000!important;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.7),0 1px 0 rgba(245,215,110,.16)!important}
.form-input:focus,.form-select:focus,.form-textarea:focus,.v2-search-wrap:focus-within,.browse-filter-form select:focus,.browse-filter-form input[type=text]:focus{outline:none;box-shadow:inset 0 3px 10px rgba(0,0,0,.7),0 0 0 3px rgba(245,215,110,.45)!important}
.browse-filter-form select,.form-select{appearance:none;padding-right:44px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='22' height='22' rx='7' fill='%23e0b33a' stroke='%233d2804' stroke-width='2'/%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%232a1a04' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 10px center!important;background-size:22px!important}

@media (prefers-reduced-motion:reduce){.gbtn,.btn,.v2-btn,.cbi,.base-card,.v2-bcard{transition:none!important}}

/* ── 9. Home: hero picks, selector console, TH grid ───────────────────────────────────────── */
.v2-hero{min-height:0!important}
@media (min-width:1181px){.v2-hero-inner{padding-top:calc(var(--header-h) + 28px)!important;gap:40px!important}.v2-hero-copy{flex:1 1 640px!important;max-width:none!important}}
@media (max-width:1180px){.v2-hero-copy{max-width:none!important}}
.v2-h1{font-size:clamp(2.6rem,5vw,4.6rem)!important;white-space:nowrap}
.v2-h1 br{display:inline}
.g-quick{margin-top:18px!important;padding-top:16px;border-top:1px solid rgba(245,215,110,.1)}
.v2-hero-inner{padding-bottom:20px!important;align-items:flex-end!important}
.g-eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:var(--gold);font:800 .8rem/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase}
.g-picks{flex:0 1 600px;min-width:0;position:relative;z-index:2}
.g-picks-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Base card (game) */
.g-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:7px;border-radius:20px;background:var(--g-mat-card);
  box-shadow:inset 0 1px 0 rgba(255,240,200,.08),0 0 0 1px rgba(0,0,0,.85),0 14px 30px rgba(0,0,0,.5);transition:transform .25s var(--g-ease),box-shadow .25s var(--g-ease)}
.g-card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,240,200,.1),0 0 0 1px rgba(245,215,110,.45),0 22px 40px rgba(0,0,0,.6)}
.g-card-shot{display:block;overflow:hidden;aspect-ratio:4/3;border-radius:14px;background:#000}
.g-card-shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--g-ease)}
.g-card:hover .g-card-shot img{transform:scale(1.05)}
.g-card-th{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:2px;height:36px;padding:0 12px 0 2px;border-radius:12px;background:rgba(10,6,8,.86);border:1px solid #000;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.g-card-th b{font:800 16px/1 var(--font-display);color:var(--gold-bright);text-shadow:0 2px 0 #000}
.g-card-cat{--t:var(--g-trophy);position:absolute;right:14px;top:14px;display:flex;align-items:center;gap:5px;height:30px;padding:0 10px 0 6px;border-radius:10px;background:rgba(10,6,8,.86);border:1px solid #000;
  box-shadow:inset 0 -3px 0 var(--t);color:var(--text-bright);font:800 13px/1 var(--font-display);text-shadow:0 1px 0 #000}
.g-card-body{display:flex;flex-direction:column;gap:8px;flex:1;padding:12px 6px 4px}
.g-card-title{margin:0;font:700 1rem/1.3 var(--font-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.g-card-title a{color:var(--text-bright)}
.g-card-title a::after{content:"";position:absolute;inset:0;border-radius:20px}
.g-card-meta{display:flex;align-items:center;gap:12px;margin:0;color:var(--text-muted);font-size:13px;font-weight:600}
.g-card-meta span{display:inline-flex;align-items:center;gap:4px}
.g-card-by{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.g-card-actions{position:relative;z-index:1;display:flex;gap:8px;margin-top:auto}
.g-card-open{display:flex;flex:1;margin:0}

/* Console */
.g-console{position:relative;z-index:2;width:calc(100% - 2*var(--space-md));max-width:var(--container);margin:6px auto 40px;padding:22px 26px 26px;border-radius:28px;background:var(--g-mat-panel);
  box-shadow:inset 0 1px 0 rgba(255,240,200,.07),0 0 0 1px rgba(0,0,0,.9),0 24px 60px rgba(0,0,0,.5)}
.g-step+.g-step{margin-top:18px}
.g-step-title{display:flex;align-items:center;gap:10px;margin:0 0 10px;color:var(--text);font:800 15px/1 var(--font-display);letter-spacing:.04em}
.g-step-title b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--g-mat-gold);color:#2a1a04;font-size:14px;box-shadow:0 2px 0 var(--g-gold-lip),inset 0 1px 0 rgba(255,255,255,.6)}
.g-step-title em{font:600 13px/1 var(--font-body);color:var(--text-dim);font-style:normal;letter-spacing:0}
.g-ths{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:10px;padding-top:12px}
.g-th{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;height:118px;padding:0 4px 9px;border-radius:18px;background:var(--g-mat-slot);color:inherit;text-decoration:none;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.7),inset 0 -1px 0 rgba(255,240,200,.06),0 0 0 1px rgba(0,0,0,.9);transition:background .2s,box-shadow .2s}
.g-th>img,.g-th>.cbi{width:78px;height:78px;margin-top:-14px;filter:drop-shadow(0 8px 6px rgba(0,0,0,.75)) saturate(.85);transition:transform .35s var(--g-pop),filter .25s}
.g-th b{font:800 15px/1 var(--font-display);color:var(--text-bright);text-shadow:var(--g-outline)}
.g-th small{color:var(--text-dim);font-size:12px;font-weight:700}
.g-th:hover>img,.g-th:hover>.cbi{transform:translateY(-5px) scale(1.04)}
.g-th.is-on{background:radial-gradient(110% 80% at 50% 10%,rgba(245,215,110,.32),rgba(212,175,55,.08) 55%,transparent 75%),var(--g-mat-slot);
  box-shadow:inset 0 0 0 2px var(--gold-bright),inset 0 -14px 24px rgba(212,175,55,.12),0 0 24px rgba(245,215,110,.22),0 0 0 1px #000}
.g-th.is-on>img,.g-th.is-on>.cbi{transform:translateY(-10px) scale(1.12);filter:drop-shadow(0 14px 10px rgba(0,0,0,.8)) drop-shadow(0 0 14px rgba(245,215,110,.45))}
.g-th.is-on b{color:var(--gold-bright)}.g-th.is-on small{color:var(--gold)}
.g-th.is-on::after,.g-mode.is-on::after{content:"";position:absolute;right:-6px;top:-6px;width:24px;height:24px;border-radius:50%;
  background:#86d443 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  border:2px solid var(--g-go-edge);box-shadow:0 2px 0 var(--g-go-lip);animation:g-pop .3s var(--g-pop)}
@keyframes g-pop{from{transform:scale(.3)}}
.g-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding-top:22px}
.g-mode{--t:var(--g-trophy);position:relative;display:grid;grid-template-columns:116px minmax(0,1fr);align-items:center;gap:6px;min-height:104px;padding:10px 14px 10px 6px;border-radius:20px;color:inherit;text-decoration:none;
  background:radial-gradient(70% 120% at 18% 70%,color-mix(in srgb,var(--t) 26%,transparent),transparent 70%),linear-gradient(180deg,#241b15,#16100c);
  box-shadow:inset 0 1px 0 rgba(255,240,200,.08),inset 0 -3px 0 color-mix(in srgb,var(--t) 55%,#000),0 0 0 1px #000,0 10px 20px rgba(0,0,0,.45);transition:transform .2s var(--g-ease),box-shadow .2s}
.g-mode.g-tone-war{--t:var(--g-war)}.g-mode.g-tone-cwl{--t:var(--g-cwl)}.g-mode.g-tone-trophy{--t:var(--g-trophy)}.g-mode.g-tone-farming{--t:var(--g-farming)}
.g-mode-art{position:relative;align-self:end;height:100%;min-height:96px}
.g-mode-art img{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);height:132px;width:auto;max-width:124px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 8px 8px rgba(0,0,0,.7));transition:transform .35s var(--g-pop)}
.g-mode-art-trophy img{height:96px;bottom:4px}
.g-mode-art-farming img{height:104px;bottom:-4px;-webkit-mask-image:linear-gradient(180deg,#000 75%,transparent);mask-image:linear-gradient(180deg,#000 75%,transparent)}
.g-mode-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.g-mode-text b{font:800 21px/1 var(--font-display);color:var(--text-bright);text-shadow:var(--g-outline);white-space:nowrap}
.g-mode-text small{color:var(--text-muted);font-size:13px;line-height:1.3}
.g-mode-count{align-self:flex-start;margin-top:4px;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.45);color:var(--text);font:800 12px/1.2 var(--font-body)}
.g-mode:hover{transform:translateY(-3px)}
.g-mode:hover .g-mode-art img{transform:translateX(-50%) translateY(-6px) rotate(-3deg)}
.g-mode.is-on{background:radial-gradient(70% 120% at 18% 70%,color-mix(in srgb,var(--t) 42%,transparent),transparent 72%),linear-gradient(180deg,#2c2118,#1a120d);
  box-shadow:inset 0 0 0 2px var(--t),inset 0 -3px 0 var(--t),0 0 26px color-mix(in srgb,var(--t) 30%,transparent),0 0 0 1px #000}
.g-console-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.g-th:focus-visible,.g-mode:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px}

/* TH grid further down: real slots instead of empty boxes */
.v2-th-card{background:var(--g-mat-slot)!important;border:0!important;box-shadow:inset 0 2px 10px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.9)!important;border-radius:18px!important}
.v2-th-card img{width:84px!important;height:84px!important;filter:drop-shadow(0 8px 6px rgba(0,0,0,.75))!important}
.v2-th-card:hover{box-shadow:inset 0 0 0 2px rgba(245,215,110,.6),0 0 0 1px #000!important}
.v2-th-lbl{font-family:var(--font-display)!important;font-size:1rem!important;color:var(--text-bright)!important;text-shadow:var(--g-outline)}
.v2-tilt{transform:none!important}

/* ── 11. Responsive ───────────────────────────────────────────────────────────────────────── */
@media (max-width:1180px){.v2-h1{white-space:normal}.g-ths{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:18px}.g-modes{grid-template-columns:repeat(2,minmax(0,1fr))}.v2-hero-inner{flex-direction:column;align-items:stretch!important}.g-picks{flex-basis:auto;max-width:720px}}
@media (max-width:860px){
  .v2-hero-inner{padding-bottom:8px!important}
  .g-picks{order:3}
  .g-console{width:calc(100% - 20px);border-radius:22px;padding:14px 12px 18px;margin-bottom:24px}
  .g-ths{display:flex;overflow-x:auto;gap:8px;padding:20px 12px 6px;margin:0 -12px;scroll-snap-type:x proximity;scrollbar-width:none}
  .g-ths::-webkit-scrollbar{display:none}
  .g-th{flex:0 0 82px;height:104px;scroll-snap-align:start}.g-th>img,.g-th>.cbi{width:66px;height:66px}
  .g-th.is-on{box-shadow:inset 0 0 0 2px var(--gold-bright),inset 0 -14px 24px rgba(212,175,55,.12),0 0 0 1px #000}
  .g-th.is-on>img{filter:drop-shadow(0 10px 8px rgba(0,0,0,.8))}
  .g-modes{gap:10px;padding-top:18px}
  .g-mode{grid-template-columns:74px minmax(0,1fr);min-height:84px;padding:8px 10px 8px 4px;border-radius:16px;gap:4px}
  .g-mode-art{min-height:72px}.g-mode-art img{height:86px;max-width:84px}.g-mode-art-trophy img{height:58px}.g-mode-art-farming img{height:66px;max-width:66px}
  .g-mode-text b{font-size:17px}.g-mode-text small{display:none}
  .g-console-cta{flex-direction:column;align-items:stretch;gap:12px}
  .g-console-cta .gbtn{width:100%;min-width:0;white-space:normal}
  .gbtn-xl{justify-content:flex-start}
}
@media (max-width:560px){.g-picks-row{grid-template-columns:1fr}.g-picks-row .g-card:nth-child(2){display:none}}
@media (max-width:520px){
  .g-modes{grid-template-columns:1fr;gap:8px;padding-top:12px}
  .g-mode{grid-template-columns:64px minmax(0,1fr);min-height:66px;padding:6px 12px 6px 4px;border-radius:14px}
  .g-mode-art{min-height:60px}.g-mode-art img{height:72px;max-width:70px;bottom:-4px}.g-mode-art-trophy img{height:50px;bottom:6px}.g-mode-art-farming img{height:58px;max-width:58px}
  .g-mode-text{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:8px}.g-mode-text small{display:block;flex-basis:100%;order:3;font-size:12px}.g-mode-count{margin:0}
}
@media (max-width:360px){.g-th{flex-basis:74px}.gbtn-xl{font-size:17px;padding-right:14px;min-height:62px}.gbtn-ring{width:44px;height:44px}.gbtn-ring .cbi{width:34px;height:34px}}
/* Phones: copy → selector → popular cards (the main task first) */
@media (max-width:860px){
  .v2-hero:has(.g-console) .v2-hero-inner{display:contents}
  .v2-hero:has(.g-console) .v2-hero-copy{order:1;position:relative;z-index:2;width:100%;padding:44px var(--space-md) 0}
  .v2-hero:has(.g-console) .g-console{order:2}
  .v2-hero:has(.g-console) .g-picks{order:3;width:100%;max-width:none;padding:0 var(--space-md) 28px}
}

/* ── 10. Base detail + shared page polish ─────────────────────────────────────────────────── */
.base-copy-form .btn,.base-copy-form button[type=submit],.base-mobile-copybar .btn-primary{background:var(--g-mat-go)!important;color:#fff!important;border:2px solid var(--g-go-edge)!important;
  min-height:62px;font-family:var(--font-display);font-size:1.2rem!important;text-shadow:0 2px 0 var(--g-go-edge),1px 1px 0 var(--g-go-edge),-1px -1px 0 var(--g-go-edge),1px -1px 0 var(--g-go-edge),-1px 1px 0 var(--g-go-edge)!important;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 5px 0 var(--g-go-lip),0 12px 24px rgba(0,0,0,.5)!important}
.base-copy-form .btn:active,.base-mobile-copybar .btn-primary:active{box-shadow:0 1px 0 var(--g-go-lip)!important}
.base-sidebar .btn-primary:not(.base-copy-form .btn){background:var(--g-mat-dark)!important;color:var(--gold-bright)!important;border:2px solid #000!important;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),0 4px 0 #000!important;text-shadow:0 2px 0 #000}
.base-image-wrap{padding:7px;border-radius:22px!important;background:var(--g-mat-card)!important;box-shadow:inset 0 1px 0 rgba(255,240,200,.08),0 0 0 1px #000,0 24px 50px rgba(0,0,0,.55)!important;border:0!important}
.base-image-wrap img,.base-image{border-radius:16px!important}
.base-th-badge{background:var(--g-mat-gold)!important;color:#2a1a04!important;border:2px solid var(--g-gold-edge)!important;font-family:var(--font-display)}
.base-sidebar>:is(div,section,aside):not(form){border:0!important;background:var(--g-mat-panel)!important;box-shadow:inset 0 1px 0 rgba(255,240,200,.07),0 0 0 1px #000!important;border-radius:18px!important}
.card,.auth-card,.feed-card{border:0!important;background:var(--g-mat-panel)!important;box-shadow:inset 0 1px 0 rgba(255,240,200,.07),0 0 0 1px #000,0 14px 30px rgba(0,0,0,.4)!important;border-radius:20px!important}

/* Mobile layer order: copybar sits above the raised Finder disc; support yields while the copybar shows */
@media (max-width:1024px){
  .base-mobile-copybar{bottom:calc(var(--mobile-app-nav-height,64px) + var(--mobile-safe-bottom,0px) + 24px)!important}
  .base-mobile-copybar .btn{white-space:nowrap;font-size:1rem!important;min-height:52px}
  body:has(.base-mobile-copybar) .support-fab{display:none!important}
}
/* Base Finder: the drop zone is the search device (illustrated magnifier, recessed well, gold dashes) */
.image-search-drop{position:relative;border:3px dashed rgba(245,215,110,.45)!important;border-radius:20px!important;background:var(--g-mat-slot)!important;box-shadow:inset 0 3px 14px rgba(0,0,0,.7)!important}
.image-search-drop-inner::before{content:"";display:block;width:84px;height:84px;margin:0 auto 10px;background:url("/assets/game/icons/search-128.webp") center/contain no-repeat;filter:drop-shadow(0 8px 6px rgba(0,0,0,.7));transition:transform .35s var(--g-pop)}
.image-search-drop:hover .image-search-drop-inner::before{transform:translateY(-4px) rotate(-8deg)}
.image-search-drop-icon{display:none!important}
.image-search-panel{border:0!important;background:var(--g-mat-panel)!important;box-shadow:inset 0 1px 0 rgba(255,240,200,.07),0 0 0 1px #000,0 20px 44px rgba(0,0,0,.5)!important;border-radius:24px!important}
.image-search-drop .image-search-icon{display:none!important}
@media (max-width:400px){.earn-grid{grid-template-columns:minmax(0,1fr)!important}.earn-card{min-width:0}}

/* Recently viewed bases (filled by cb-recent.js, hidden until there is something to show) */
.cb-recent[hidden]{display:none}
.cb-recent{margin:var(--space-lg,1.5rem) 0}
.cb-recent-page{order:3;width:100%;max-width:var(--container,1200px);margin-inline:auto;padding-inline:var(--space-md,16px)}
.cb-recent-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.cb-recent-head h2{margin:0;font-size:1.1rem;color:var(--text-bright)}
.cb-recent-clear{border:0;background:none;color:var(--text-muted);font:inherit;font-size:.8rem;cursor:pointer;text-decoration:underline;min-height:40px}
.cb-recent-grid{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.cb-recent-grid::-webkit-scrollbar{display:none}
.cb-recent-card{flex:0 0 160px;display:flex;flex-direction:column;gap:4px;min-width:0;color:inherit;text-decoration:none}
.cb-recent-card img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;border-radius:10px;border:1px solid var(--border-subtle)}
.cb-recent-title{font-size:.82rem;font-weight:700;color:var(--text-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-recent-meta{font-size:.74rem;color:var(--text-muted)}

/* Desktop header: the real labels with icons need about 1520px at full size (German is the longest).
   The bar may use more than the page container, and shrinks step by step before the burger menu takes over at 1180px. */
@media (min-width:1180px){
  .site-header .header-bar{max-width:min(1600px,100%)}
}
@media (min-width:1480px) and (max-width:1599px){
  .site-header .nav .nav-link,.site-header .nav-more>summary{font-size:13.76px;padding-inline:12px}
}
@media (min-width:1180px) and (max-width:1449px){
  .site-header .nav>.nav-link:not([href="/upload.php"]) .cbi,.site-header .nav-more>summary .cbi{display:none}
  .site-header .nav-discord{font-size:0;gap:0;padding-inline:10px}
}
@media (min-width:1180px) and (max-width:1299px){
  .site-header .brand-text{display:none}
}