/* Load with styles.css. Skins change color tokens only; Classic inherits unchanged.
   Every skin uses the same neutral surface ladder as Classic plus its own strong accent;
   shop/member/error/hill tokens inherit Classic. Contrast table: docs/renk-temasi.md.
   Mana pips, card art, semantic error colors and motion preferences stay untouched. */
:root[data-skin="magic"][data-theme="light"] {
  --bg:#f6f4ef; --surface:#ffffff; --surface-2:#ebe7de;
  --line:#dcd6ca; --line-strong:#8a847a; --text:#1b1915; --muted:#504b43; --faint:#645e55;
  --accent:#b04a00; --accent-hover:#8f3c00; --accent-soft:#fdeadb; --on-accent:#ffffff; --focus:#b04a00;
  --sky:#2f6390; --wheat:#7c5c00;
}
:root[data-skin="magic"][data-theme="dark"] {
  --bg:#161719; --surface:#1f2023; --surface-2:#292b2f;
  --line:#35373b; --line-strong:#6d7076; --text:#eeedea; --muted:#aeaca7; --faint:#96948e;
  --accent:#ff9f43; --accent-hover:#ffb66e; --accent-soft:#3d2a19; --on-accent:#2a1300; --focus:#ff9f43;
  --sky:#8fbde3; --wheat:#e8c36a;
}
:root[data-skin="pokemon"][data-theme="light"] {
  --bg:#f2f4f8; --surface:#ffffff; --surface-2:#e5e9f1;
  --line:#d4dae6; --line-strong:#848ca0; --text:#141a26; --muted:#4a5468; --faint:#5d677b;
  --accent:#2a5bd7; --accent-hover:#2049b3; --accent-soft:#dbe5ff; --on-accent:#ffffff; --focus:#2a5bd7;
  --sky:#2a5bd7; --wheat:#805c00;
}
:root[data-skin="pokemon"][data-theme="dark"] {
  --bg:#15181f; --surface:#1d212b; --surface-2:#272c38;
  --line:#323846; --line-strong:#687085; --text:#eceff5; --muted:#a8afbf; --faint:#8b93a5;
  --accent:#ffcb3d; --accent-hover:#ffd96e; --accent-soft:#3a3320; --on-accent:#2a2000; --focus:#ffcb3d;
  --sky:#8fb8ff; --wheat:#ffcb3d;
}
:root[data-skin="onepiece"][data-theme="light"] {
  --bg:#f4f3f1; --surface:#ffffff; --surface-2:#e9e6e2;
  --line:#dbd7d1; --line-strong:#8a857d; --text:#1a1816; --muted:#514c46; --faint:#645e57;
  --accent:#b8321c; --accent-hover:#982815; --accent-soft:#fadcd5; --on-accent:#ffffff; --focus:#b8321c;
  --sky:#26688a; --wheat:#8a5a00;
}
:root[data-skin="onepiece"][data-theme="dark"] {
  --bg:#16191b; --surface:#1e2224; --surface-2:#282d30;
  --line:#33393c; --line-strong:#6a7276; --text:#eceff0; --muted:#a9b0b3; --faint:#8c9497;
  --accent:#ff7a5c; --accent-hover:#ff9a82; --accent-soft:#3e2520; --on-accent:#2b0c04; --focus:#ff7a5c;
  --sky:#8cc4e0; --wheat:#f0b54e;
}
:root[data-skin="cyberpunk"][data-theme="light"] {
  --bg:#f2f3f4; --surface:#ffffff; --surface-2:#e6e8ea;
  --line:#d5d9dc; --line-strong:#848a90; --text:#121517; --muted:#4b5257; --faint:#5e656b;
  --accent:#006f86; --accent-hover:#005a6d; --accent-soft:#d2eef4; --on-accent:#ffffff; --focus:#006f86;
  --sky:#006f86; --wheat:#7a6400;
}
:root[data-skin="cyberpunk"][data-theme="dark"] {
  --bg:#121416; --surface:#1a1d20; --surface-2:#23272b;
  --line:#2e3338; --line-strong:#676e75; --text:#eef0f2; --muted:#a6adb4; --faint:#8a9299;
  --accent:#f3e600; --accent-hover:#fff35c; --accent-soft:#3a3714; --on-accent:#1d1b00; --focus:#f3e600;
  --sky:#3fd8ff; --wheat:#f0b54e;
}

/* A label.skin-option[data-skin] wrapping a radio + .skin-preview is sufficient.
   Previews may also carry data-skin themselves. No motion or external artwork. */
.skin-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }
.skin-option {
  position:relative; display:grid; align-content:start; gap:9px; min-width:0;
  padding:10px; border:1px solid var(--line-strong); border-radius:12px;
  background:var(--surface); color:var(--text); text-align:left;
  cursor:pointer; font:600 13px/1.4 var(--body); text-transform:none; letter-spacing:0;
}
.skin-option input[type="radio"] { position:absolute; inset:0; z-index:1; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:pointer; }
.skin-option small { font:400 12px/1.45 var(--body); color:var(--muted); }
.skin-option:hover { border-color:var(--accent); }
.skin-option:has(input:checked), .skin-option[aria-checked="true"] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:var(--accent-soft); }
.skin-option:has(input:focus-visible), .skin-option:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.skin-option, .skin-preview {
  --preview-bg:#e8eaee; --preview-surface:#ffffff; --preview-accent:#00775a; --preview-detail:#8f5a00;
}
.skin-preview {
  position:relative; display:block; width:100%; height:64px; overflow:hidden; isolation:isolate;
  border-radius:6px; background:var(--preview-bg); pointer-events:none;
}
:root[data-theme="dark"] :is(.skin-option,.skin-preview) { --preview-bg:#2a2c31; --preview-surface:#6c7079; --preview-accent:#2fd39f; --preview-detail:#f2b445; }
.skin-preview::before, .skin-preview::after { content:""; position:absolute; }
.skin-preview::before { inset:13px 30% 13px 13px; border:1px solid var(--preview-accent); border-radius:4px; background:var(--preview-surface); transform:rotate(-5deg); }
.skin-preview::after { width:25px; height:25px; right:15px; bottom:13px; border:6px solid var(--preview-detail); border-radius:50%; opacity:.8; }
:is(.skin-option,.skin-preview)[data-skin="magic"] { --preview-bg:#ebe7de; --preview-surface:#ffffff; --preview-accent:#b04a00; --preview-detail:#7c5c00; }
:is(.skin-option,.skin-preview)[data-skin="pokemon"] { --preview-bg:#e5e9f1; --preview-surface:#ffffff; --preview-accent:#2a5bd7; --preview-detail:#805c00; }
:is(.skin-option,.skin-preview)[data-skin="onepiece"] { --preview-bg:#e9e6e2; --preview-surface:#ffffff; --preview-accent:#b8321c; --preview-detail:#8a5a00; }
:is(.skin-option,.skin-preview)[data-skin="cyberpunk"] { --preview-bg:#e6e8ea; --preview-surface:#ffffff; --preview-accent:#006f86; --preview-detail:#7a6400; }
:root[data-theme="dark"] :is(.skin-option,.skin-preview)[data-skin="magic"] { --preview-bg:#292b2f; --preview-surface:#6d7076; --preview-accent:#ff9f43; --preview-detail:#e8c36a; }
:root[data-theme="dark"] :is(.skin-option,.skin-preview)[data-skin="pokemon"] { --preview-bg:#272c38; --preview-surface:#687085; --preview-accent:#ffcb3d; --preview-detail:#ffcb3d; }
:root[data-theme="dark"] :is(.skin-option,.skin-preview)[data-skin="onepiece"] { --preview-bg:#282d30; --preview-surface:#6a7276; --preview-accent:#ff7a5c; --preview-detail:#f0b54e; }
:root[data-theme="dark"] :is(.skin-option,.skin-preview)[data-skin="cyberpunk"] { --preview-bg:#23272b; --preview-surface:#676e75; --preview-accent:#f3e600; --preview-detail:#f0b54e; }
/* Inherit the option's palette; the defaults above serve standalone previews. */
.skin-option[data-skin] .skin-preview { --preview-bg:inherit; --preview-surface:inherit; --preview-accent:inherit; --preview-detail:inherit; }
:is(.skin-option[data-skin="magic"] .skin-preview,.skin-preview[data-skin="magic"])::after { border-radius:50% 50% 3px 3px; transform:rotate(45deg); }
:is(.skin-option[data-skin="pokemon"] .skin-preview,.skin-preview[data-skin="pokemon"])::after { border-width:5px; box-shadow:0 0 0 4px var(--preview-bg),0 0 0 5px var(--preview-accent); }
:is(.skin-option[data-skin="onepiece"] .skin-preview,.skin-preview[data-skin="onepiece"])::after { width:68px; right:-8px; bottom:-10px; border-radius:50%; border-width:2px; box-shadow:0 -8px 0 -1px var(--preview-bg),0 -10px 0 -1px var(--preview-accent); }
:is(.skin-option[data-skin="cyberpunk"] .skin-preview,.skin-preview[data-skin="cyberpunk"])::before { border-radius:0; transform:skew(-12deg); border-right:5px solid var(--preview-detail); }
:is(.skin-option[data-skin="cyberpunk"] .skin-preview,.skin-preview[data-skin="cyberpunk"])::after { width:24px; height:3px; border:0; border-radius:0; background:var(--preview-accent); box-shadow:5px -8px 0 var(--preview-detail); }
@media(max-width:480px) { .skin-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } }
@media(prefers-reduced-motion:reduce) { .skin-option,.skin-preview,.skin-preview::before,.skin-preview::after { animation:none; transition:none; } }

/* Game character comes from stationary typography, silhouettes and low-contrast
   geometry. No downloaded art, continuous animation, filters or fixed overlays. */
:root[data-skin="magic"]{--r:8px;--r-sm:4px;--skin-trim:color-mix(in srgb,var(--accent) 35%,transparent)}
/* Magic: one planeswalker-orange accent, gold only as the small secondary; no texture or double frames. */
:root[data-skin="magic"] body{background-image:radial-gradient(ellipse at 90% 0,color-mix(in srgb,var(--accent) 7%,transparent),transparent 65%);background-size:100% 900px;background-repeat:no-repeat}
:root[data-skin="magic"] :is(h1,h2){letter-spacing:-.025em}
:root[data-skin="magic"] .discover-section>.ws-heading{border-bottom:1px solid var(--skin-trim);padding-bottom:14px}

:root[data-skin="pokemon"]{--r:16px;--r-sm:10px;--skin-blue:#34567d;--skin-yellow:#c8ae58;--skin-pop:rgba(197,163,57,.10);--skin-bubble:rgba(73,119,176,.06)}
:root[data-skin="pokemon"][data-theme="dark"]{--skin-blue:#a1bddc;--skin-yellow:#d8c479;--skin-pop:rgba(216,196,121,.055);--skin-bubble:rgba(119,164,220,.035)}
:root[data-skin="pokemon"] body{background-image:radial-gradient(circle at 92% 8%,var(--skin-pop) 0 90px,transparent 91px),radial-gradient(circle at 5% 55%,var(--skin-bubble) 0 125px,transparent 126px);background-size:100% 980px}
:root[data-skin="pokemon"] :is(.discover-shortcuts a,.discover-collection,.swap-card,.discover-card){border-radius:18px;border-top:3px solid var(--skin-blue)}
:root[data-skin="pokemon"] .discover-shortcuts a:nth-child(2){border-top-color:var(--skin-yellow)}
:root[data-skin="pokemon"] :is(.discover-section h2,.app-hero h1){color:var(--skin-blue);font-weight:800}
:root[data-skin="pokemon"] :is(button.primary,.btn.primary){border-radius:24px;box-shadow:0 3px 0 var(--skin-yellow)}
:root[data-skin="pokemon"] :is(.collection-games button[aria-pressed="true"],nav.tabs a.on){text-decoration-color:var(--skin-yellow)}
:root[data-skin="pokemon"] .discover-preview{border-radius:14px;background-image:radial-gradient(circle at 100% 0,var(--skin-pop) 0 50px,transparent 51px)}

:root[data-skin="onepiece"]{--r:12px;--r-sm:6px;--skin-rope:rgba(147,116,66,.38);--skin-red:#a2473b;--skin-wave:rgba(40,102,107,.07)}
:root[data-skin="onepiece"][data-theme="dark"]{--skin-rope:rgba(214,182,130,.25);--skin-red:#d68e7f;--skin-wave:rgba(139,196,189,.035)}
:root[data-skin="onepiece"] body{background-image:radial-gradient(ellipse at 50% 100%,var(--skin-wave) 0 32%,transparent 33%),radial-gradient(ellipse at 50% 0,transparent 0 49%,var(--skin-wave) 50% 52%,transparent 53%);background-size:170px 170px,170px 170px;background-position:0 0,85px 85px}
:root[data-skin="onepiece"] :is(.discover-shortcuts a,.discover-collection,.swap-card){border:1px dashed var(--skin-rope);box-shadow:inset 0 0 0 3px var(--surface),inset 0 0 0 4px var(--skin-rope)}
:root[data-skin="onepiece"] .discover-shortcuts a>span{color:var(--skin-red)}
:root[data-skin="onepiece"] .discover-section h2{border-left:3px solid var(--skin-red);padding-left:12px}
:root[data-skin="onepiece"] .discover-preview{border-bottom:3px solid var(--accent);border-radius:8px 8px 24px 8px}
:root[data-skin="onepiece"] :is(button.primary,.btn.primary){border-radius:8px 16px 8px 16px}

:root[data-skin="cyberpunk"]{--r:2px;--r-sm:2px;--skin-grid:rgba(48,103,112,.055);--skin-yellow:#8b702d;--skin-cyan:#306770;--skin-corner:rgba(139,112,45,.45)}
:root[data-skin="cyberpunk"][data-theme="dark"]{--skin-grid:rgba(143,198,207,.04);--skin-yellow:#c6b176;--skin-cyan:#8fc6cf;--skin-corner:rgba(198,177,118,.4)}
:root[data-skin="cyberpunk"] body{background-image:linear-gradient(var(--skin-grid) 1px,transparent 1px),linear-gradient(90deg,var(--skin-grid) 1px,transparent 1px);background-size:28px 28px}
:root[data-skin="cyberpunk"] :is(.discover-shortcuts a,.discover-collection,.swap-card,.discover-card){border-radius:2px;border-left:2px solid var(--skin-cyan);border-top:1px solid var(--skin-corner);background-image:linear-gradient(135deg,transparent calc(100% - 14px),var(--skin-corner) calc(100% - 14px),var(--skin-corner) calc(100% - 12px),transparent calc(100% - 12px))}
:root[data-skin="cyberpunk"] :is(.app-hero .eyebrow,.discover-section>.ws-heading>h2){color:var(--skin-cyan);letter-spacing:.045em}
:root[data-skin="cyberpunk"] :is(button.primary,.btn.primary){border-radius:2px;border-right:4px solid var(--skin-yellow)}
:root[data-skin="cyberpunk"] .discover-preview{border-radius:0;border-bottom:2px solid var(--skin-yellow)}
:root[data-skin="cyberpunk"] :is(.collection-games button,.account-dropdown,.search-dialog,.swap-dialog){border-radius:3px}

/* Each radio previews its own game's geometry, independently of the active skin. */
:is(.skin-option[data-skin="cyberpunk"] .skin-preview,.skin-preview[data-skin="cyberpunk"]){border-radius:2px;background-image:linear-gradient(#72939b25 1px,transparent 1px),linear-gradient(90deg,#72939b25 1px,transparent 1px);background-size:10px 10px}
:is(.skin-option[data-skin="pokemon"] .skin-preview,.skin-preview[data-skin="pokemon"]){border-radius:14px;background-image:radial-gradient(circle at 90% 10%,#c8ae5830 0 24px,transparent 25px)}
:is(.skin-option[data-skin="magic"] .skin-preview,.skin-preview[data-skin="magic"]){border:1px solid var(--preview-accent)}
:is(.skin-option[data-skin="onepiece"] .skin-preview,.skin-preview[data-skin="onepiece"]){border:1px dashed var(--preview-detail);border-bottom:3px solid var(--preview-accent)}
@media(prefers-reduced-motion:reduce){:root[data-skin] body{background-attachment:scroll}:root[data-skin] .discover-preview{animation:none;transition:none}}