/* Optional Spielwiese design. The default appearance and game-owned geometry stay intact. */

/* The design chooser is shared by both designs. */
.design-opener { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 0; border:0; background:transparent; color:var(--ink); font-size:12px; font-weight:700; white-space:nowrap; }
.design-opener svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.design-opener:hover { color:var(--accent-ink); }
.appearance-dialog { width:min(650px,calc(100vw - 48px)); }
.appearance-dialog .hub-dialog-content > p:first-child { margin:0 0 20px; }
.design-options { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.design-option { min-width:0; padding:12px; text-align:left; border:2px solid var(--line); border-radius:12px; background:var(--page); color:var(--ink); }
.design-option[aria-pressed="true"] { border-color:var(--accent-ink); }
.design-option:hover { background:var(--surface-hover); }
.design-option-heading { display:flex; align-items:center; justify-content:space-between; margin:12px 2px 3px; font-size:17px; font-weight:700; }
.design-option-description { display:block; margin:0 2px; color:var(--muted); font-size:12px; line-height:1.5; }
.design-selected { visibility:hidden; color:var(--accent-ink); }
.design-option[aria-pressed="true"] .design-selected { visibility:visible; }
.design-sample { display:flex; align-items:center; justify-content:center; gap:10px; height:105px; overflow:hidden; border-radius:6px; }
.design-sample i { display:block; width:42px; height:56px; }
.design-sample-classic { background:#e9ede6; }
.design-sample-classic i { border-radius:5px; background:#a4bb8c; }
.design-sample-classic i:nth-child(2) { background:#cbf56b; }
.design-sample-classic i:nth-child(3) { background:#375b17; }
.design-sample-spielwiese { background:#f5e9d6; }
.design-sample-spielwiese i { border:1.5px solid #282b35; box-shadow:3px 3px 0 #282b35; }
.design-sample-spielwiese i:first-child { background:#278477; border-radius:22px 22px 8px 8px; transform:rotate(-13deg); }
.design-sample-spielwiese i:nth-child(2) { background:#ef806b; border-radius:50%; width:51px; height:51px; }
.design-sample-spielwiese i:nth-child(3) { background:#bfafe2; border-radius:9px; transform:rotate(12deg); }
.appearance-color-row { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:24px; font-size:13px; }
.appearance-colors { display:flex; gap:6px; }
.appearance-colors button { padding:8px 13px; border:1px solid var(--line); border-radius:7px; background:var(--page); color:var(--ink); font-size:13px; }
.appearance-colors button[aria-pressed="true"] { border-color:var(--accent-ink); background:var(--accent-soft); color:var(--accent-ink); }
.appearance-dialog .appearance-current { margin:18px 0 0; font-size:12px; }
.spielwiese-artwork { display:none; }

/* Yellow remains the common highlight because game controls also use dark text on --accent. */
:root[data-design="spielwiese"] {
  --page:#fbf5e9;
  --surface:#fffcf5;
  --surface-alt:#f1e8d9;
  --surface-hover:#e8dfcf;
  --ink:#253a38;
  --muted:#66645e;
  --line:#d5cbbb;
  --accent:#f3ca58;
  --accent-hover:#e9b936;
  --accent-ink:#176d63;
  --accent-soft:#dcebe2;
  --danger:#ae3939;
  --focus:#176d63;
  --shadow:0 5px 0 #253a3814;
  --sw-primary:#176d63;
  --sw-primary-hover:#10574f;
  --sw-primary-text:#fffdf5;
  --sw-coral:#b64a38;
  --sw-coral-soft:#f8d5c7;
  --sw-lilac:#e7def4;
  --sw-yellow:#f8e7ac;
  --sw-outline:#29413c;
  --sw-display:Georgia, 'Times New Roman', serif;
}
:root[data-design="spielwiese"][data-theme="dark"] {
  --page:#211d2b;
  --surface:#2c2738;
  --surface-alt:#363142;
  --surface-hover:#433c50;
  --ink:#f7efdf;
  --muted:#c4bacc;
  --line:#575060;
  --accent-ink:#95dac6;
  --accent-soft:#283f3c;
  --danger:#ff9d96;
  --focus:#f3ca58;
  --shadow:0 5px 0 #0003;
  --sw-primary:#a4ddc9;
  --sw-primary-hover:#bde9db;
  --sw-primary-text:#193c33;
  --sw-coral:#ffa18e;
  --sw-coral-soft:#513440;
  --sw-lilac:#403650;
  --sw-yellow:#493f2d;
  --sw-outline:#8b8197;
}

/* Display typography is deliberately excluded from game content and its measured HUDs. */
:root[data-design="spielwiese"] body:not(.game-page) { --display:var(--sw-display); }
:root[data-design="spielwiese"] body:not(.game-page) :is(h1,h2,h3) { font-weight:700; letter-spacing:-.045em; }
:root[data-design="spielwiese"] .site-header { border-bottom:1px solid var(--sw-outline); }
:root[data-design="spielwiese"] .brand { font-family:var(--sw-display); font-weight:700; font-size:31px; letter-spacing:-.075em; }
:root[data-design="spielwiese"] .brand-light { font-weight:400; }
:root[data-design="spielwiese"] .brand-dot { color:var(--sw-coral); }
:root[data-design="spielwiese"] .brand-symbol { gap:3px; transform:rotate(-8deg); }
:root[data-design="spielwiese"] .brand-symbol i { background:#278477; border:1px solid var(--ink); border-radius:5px 5px 2px 2px; }
:root[data-design="spielwiese"] .brand-symbol i:nth-child(2) { background:#ef806b; border-radius:50%; }
:root[data-design="spielwiese"] .brand-symbol i:nth-child(3) { background:#f3ca58; border-radius:50% 2px 50% 50%; }
:root[data-design="spielwiese"] .brand-symbol i:nth-child(4) { background:#bfafe2; }
:root[data-design="spielwiese"] .nav-login { border-color:var(--sw-outline); border-radius:24px; }
:root[data-design="spielwiese"] .nav-login:hover { background:var(--sw-yellow); }
:root[data-design="spielwiese"] .theme-switch { border-color:var(--line); border-radius:22px; }
:root[data-design="spielwiese"] .theme-switch button { border-radius:50%; }
:root[data-design="spielwiese"] .theme-switch button[aria-pressed="true"] { background:var(--sw-yellow); }
:root[data-design="spielwiese"] .user-chip { text-decoration:underline; text-decoration-color:var(--sw-coral); text-underline-offset:5px; text-decoration-thickness:2px; }

/* The hub is a shared play table: printed shapes, open space, crisp edges. */
:root[data-design="spielwiese"] .hero { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:30px; min-height:453px; padding:38px 0 34px; }
:root[data-design="spielwiese"] .hero h1 { font-size:clamp(49px,5.1vw,73px); line-height:1.04; margin:22px 0; letter-spacing:-.06em; }
:root[data-design="spielwiese"] .hero .eyebrow { color:var(--accent-ink); letter-spacing:.12em; }
:root[data-design="spielwiese"] .hero .live-dot { width:9px; height:9px; background:var(--sw-coral); box-shadow:5px -3px 0 var(--accent); }
:root[data-design="spielwiese"] .headline-outline { color:var(--sw-coral); font-style:italic; }
:root[data-design="spielwiese"] .hero p { max-width:450px; font-size:16px; line-height:1.75; }
:root[data-design="spielwiese"] .hero .hero-footnote { display:block; margin-top:22px; font-size:11px; }
:root[data-design="spielwiese"] .play-composition { display:none; }
:root[data-design="spielwiese"] .spielwiese-artwork { display:block; position:relative; width:100%; max-width:540px; justify-self:end; color:var(--sw-outline); }
.spielwiese-artwork svg { display:block; width:100%; height:auto; }
.spielwiese-artwork .sw-orbit { opacity:.55; }
.spielwiese-artwork .sw-swoop { opacity:.35; }
.spielwiese-art-caption { display:block; padding-left:18%; color:var(--muted); font-size:11px; letter-spacing:.035em; transform:rotate(-3deg); }
:root[data-design="spielwiese"] .intro-strip { display:grid; padding:19px 23px; border:1px solid var(--line); border-radius:6px 24px 6px 24px; background:var(--surface); font-size:13px; }
:root[data-design="spielwiese"] .intro-strip b { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background:var(--accent-soft); color:var(--ink); font-size:11px; font-weight:700; }
:root[data-design="spielwiese"] .intro-strip > span:nth-child(2) b { background:var(--sw-coral-soft); }
:root[data-design="spielwiese"] .intro-strip > span:nth-child(3) b { background:var(--sw-lilac); }
:root[data-design="spielwiese"] .intro-strip > span:not(:first-child) { border-left:1px dashed var(--line); }
:root[data-design="spielwiese"] .dashboard-top { padding:32px 0 26px; border-bottom:3px solid var(--sw-coral); margin-bottom:23px; }
:root[data-design="spielwiese"] .dashboard-top .eyebrow { display:block; color:var(--accent-ink); }
:root[data-design="spielwiese"] .dashboard-top h1 { font-size:44px; margin:9px 0; }
:root[data-design="spielwiese"] .matches-section .game-activity { background:var(--surface); border-radius:6px 15px 6px 6px; }
:root[data-design="spielwiese"] .matches-section .game-card-icon { border-radius:50%; }
:root[data-design="spielwiese"] .compact-heading { border-top:0; }
:root[data-design="spielwiese"] .hub-empty { background:var(--surface); border-radius:0 0 14px 14px; }

/* Shared controls change silhouette on hub pages; game buttons keep their existing dimensions. */
:root[data-design="spielwiese"] body:not(.game-page) .button { border-radius:8px 8px 8px 2px; border-color:var(--sw-outline); box-shadow:3px 3px 0 var(--sw-outline); transition:background .18s,transform .18s,box-shadow .18s; }
:root[data-design="spielwiese"] body:not(.game-page) .button:hover:not(:disabled) { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--sw-outline); }
:root[data-design="spielwiese"] body:not(.game-page) .button:active:not(:disabled) { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--sw-outline); }
:root[data-design="spielwiese"] body:not(.game-page) .button-primary { background:var(--sw-primary); color:var(--sw-primary-text); }
:root[data-design="spielwiese"] body:not(.game-page) .button-primary:hover { background:var(--sw-primary-hover); }
:root[data-design="spielwiese"] body:not(.game-page) .button-secondary { background:var(--surface); }
:root[data-design="spielwiese"] body:not(.game-page) .button-secondary:hover { background:var(--sw-yellow); }
:root[data-design="spielwiese"] .hero .text-link { text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--sw-coral); }

/* Artwork remains module-owned. This is only the common catalog frame. */
:root[data-design="spielwiese"] .library-heading { margin:37px 0 20px; }
:root[data-design="spielwiese"] .library-heading h2 { display:flex; align-items:center; gap:12px; font-size:36px; }
:root[data-design="spielwiese"] .library-heading h2::before { content:""; width:24px; height:24px; flex:none; background:var(--sw-coral); clip-path:polygon(50% 0,61% 30%,85% 15%,70% 39%,100% 50%,70% 61%,85% 85%,61% 70%,50% 100%,39% 70%,15% 85%,30% 61%,0 50%,30% 39%,15% 15%,39% 30%); }
:root[data-design="spielwiese"] .library-filters { padding:18px 21px; background:transparent; border:0; border-block:1px solid var(--line); border-radius:0; }
:root[data-design="spielwiese"] .library-filter { border-radius:24px; background:var(--surface); padding:7px 12px; }
:root[data-design="spielwiese"] .library-filter:has(input:checked) { background:var(--accent-soft); border-color:var(--accent-ink); box-shadow:0 2px 0 var(--accent-ink); }
:root[data-design="spielwiese"] .library-filters legend { color:var(--ink); font-weight:700; }
:root[data-design="spielwiese"] .library-favorite-note { margin:14px 0 20px; }
:root[data-design="spielwiese"] .game-catalog-card { border:1px solid var(--sw-outline); border-radius:17px 17px 7px 7px; box-shadow:4px 4px 0 var(--line); transition:box-shadow .18s,border-color .18s; }
:root[data-design="spielwiese"] .game-catalog-card:hover { border-color:var(--accent-ink); box-shadow:4px 5px 0 var(--accent-ink); }
:root[data-design="spielwiese"] .game-catalog-preview { border-bottom:1px solid var(--sw-outline); }
:root[data-design="spielwiese"] .game-catalog-info { position:relative; padding:24px 22px 23px; }
:root[data-design="spielwiese"] .game-catalog-info::before { content:""; position:absolute; top:-5px; left:22px; width:42px; height:9px; border:1px solid var(--sw-outline); background:#ef806b; border-radius:3px; }
:root[data-design="spielwiese"] .library-entry:nth-child(3n + 2) .game-catalog-info::before { background:#f3ca58; }
:root[data-design="spielwiese"] .library-entry:nth-child(3n) .game-catalog-info::before { background:#bfafe2; }
:root[data-design="spielwiese"] .game-catalog-info h3 { font-size:30px; }
:root[data-design="spielwiese"] .game-catalog-description { line-height:1.75; }
:root[data-design="spielwiese"] .game-catalog-status { border-radius:12px; padding:3px 9px; }
:root[data-design="spielwiese"] .game-catalog-info > .button { margin-top:9px; }
:root[data-design="spielwiese"] .favorite-toggle { border-radius:50%; }
:root[data-design="spielwiese"] .how-it-works { padding:35px 0 10px; margin-top:52px; border-top:2px solid var(--sw-outline); }
:root[data-design="spielwiese"] .how-it-works h2 { font-size:34px; }
:root[data-design="spielwiese"] .how-it-works .eyebrow { color:var(--sw-coral); }

/* Forms and shared dialogs carry the same paper-and-ink language. */
:root[data-design="spielwiese"] body:not(.game-page) .account-form { border:1px solid var(--sw-outline); border-top:5px solid var(--sw-coral); border-radius:9px 20px 9px 9px; box-shadow:5px 5px 0 var(--line); }
:root[data-design="spielwiese"] body:not(.game-page) .account-form input:not([type="hidden"]) { background:var(--page); border-radius:5px; border-color:var(--line); }
:root[data-design="spielwiese"] body:not(.game-page) .account-form input:focus { border-color:var(--accent-ink); }
:root[data-design="spielwiese"] .hub-dialog { border:1px solid var(--sw-outline); border-radius:18px 18px 8px 8px; box-shadow:8px 8px 0 #0003,0 24px 90px #0005; }
:root[data-design="spielwiese"] .hub-dialog-heading { border-bottom:1px solid var(--sw-outline); background:var(--surface-alt); }
:root[data-design="spielwiese"] .hub-dialog-heading h2 { font-family:var(--sw-display); font-weight:700; }
:root[data-design="spielwiese"] .design-option { border-radius:9px 16px 9px 9px; }
:root[data-design="spielwiese"] .design-option[aria-pressed="true"] { box-shadow:3px 3px 0 var(--accent-ink); }
:root[data-design="spielwiese"] .site-footer { border-top:1px solid var(--sw-outline); background:var(--surface-alt); }
:root[data-design="spielwiese"] .footer-brand { font-family:var(--sw-display); font-weight:700; }

/* Desktop density: keep the choice reachable alongside a full account navigation. */
@media (min-width:1000px) and (max-width:1450px) {
  .header-actions:has(.design-opener) { gap:14px; }
  :root[data-design="spielwiese"] .hero h1 { font-size:64px; }
}
@media (prefers-reduced-motion:reduce) {
  :root[data-design="spielwiese"] *, :root[data-design="spielwiese"] *::before, :root[data-design="spielwiese"] *::after { scroll-behavior:auto; transition:none !important; animation:none !important; }
}
/* Navigation uses the same hierarchy in both designs. */
:root[data-design="spielwiese"] .primary-navigation>a[aria-current]::after { background:var(--sw-coral); }
:root[data-design="spielwiese"] .account-menu[open] .account-menu-trigger { border-color:var(--sw-outline); }
:root[data-design="spielwiese"] .account-menu-panel { border-color:var(--sw-outline); box-shadow:4px 4px 0 var(--line); }