/* Per-skin UI. Scoped by [data-theme] on <html> (game) or on a preview panel (themes.html). */

/* ================= Paper & Clay ================= */
[data-theme="paper"] { --font: "Fraunces", Georgia, serif; --ink: #3b2a1c; --cream: #f6eedc; --terra: #d65a35; --mustard: #e6c240; --fern: #3f7a4f; --indigo: #3d5ca6; color: var(--ink); }
[data-theme="paper"] #home, [data-theme="paper"] #game, [data-theme="paper"].panel .stage {
  background: radial-gradient(circle, rgba(120,90,50,.09) 1.2px, transparent 1.4px) 0 0 / 22px 22px, #f1e6d0;
}
[data-theme="paper"] .home-board { color: var(--ink); background: var(--cream); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); border-radius: 12px; }
[data-theme="paper"] .icon-btn { background: var(--cream); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); border-radius: 10px; }
[data-theme="paper"] .pill { background: var(--cream); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); text-shadow: none; border-radius: 10px; }
[data-theme="paper"] .big-btn { background: var(--terra); color: #fff8ec; border: 2.5px solid var(--ink); box-shadow: 0 5px 0 var(--ink); text-shadow: none; border-radius: 14px; font-style: italic; }
[data-theme="paper"] .big-btn:active { box-shadow: 0 1px 0 var(--ink); }
[data-theme="paper"] .big-btn.green { background: var(--fern); }
[data-theme="paper"] .big-btn.blue { background: var(--indigo); }
[data-theme="paper"] .big-btn.red { background: #a8361f; }
[data-theme="paper"] .booster { background: var(--mustard); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); border-radius: 12px; }
[data-theme="paper"] .booster:active { box-shadow: 0 1px 0 var(--ink); }
[data-theme="paper"] .booster .badge { background: var(--terra); border: 2px solid var(--ink); color: #fff8ec; }
[data-theme="paper"] .booster .badge.plus { background: var(--fern); }
[data-theme="paper"] .booster .lbl { color: var(--ink); opacity: .85; font-style: italic; }
[data-theme="paper"] .card { background: var(--cream); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink); border-radius: 18px; }
[data-theme="paper"] .card.lose { background: #f4dccf; }
[data-theme="paper"] .card h2 { text-shadow: none; font-style: italic; }
[data-theme="paper"] .price { background: rgba(255,255,255,.25); }
[data-theme="paper"] .tip, [data-theme="paper"] .toast { background: var(--ink); color: var(--cream); }
[data-theme="paper"] .tier.hard, [data-theme="paper"] .tier.veryhard, [data-theme="paper"] .node .tag { background: var(--terra); box-shadow: 0 2px 0 var(--ink); border: 1.5px solid var(--ink); }
[data-theme="paper"] .logo { transform: rotate(-2deg); }
[data-theme="paper"] .logo span { color: var(--terra); -webkit-text-stroke: 2px var(--ink); text-shadow: 0 5px 0 var(--ink); font-style: italic; }
[data-theme="paper"] .logo span + span { color: var(--indigo); }
[data-theme="paper"] .node { background: var(--mustard); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); text-shadow: none; }
[data-theme="paper"] .node.done { background: #8fb662; }
[data-theme="paper"] .node.current { background: var(--terra); color: #fff8ec; box-shadow: 0 5px 0 var(--ink), 0 0 0 6px rgba(214,90,53,.2); }
[data-theme="paper"] .link, [data-theme="paper"] .link.done { background: repeating-linear-gradient(var(--ink) 0 5px, transparent 5px 9px); width: 4px; box-shadow: none; }
[data-theme="paper"] .bubbles { display: none; }
[data-theme="paper"] .toggle { border-color: rgba(59,42,28,.2); }
[data-theme="paper"] .toggle i { background: rgba(59,42,28,.2); }
[data-theme="paper"] .toggle input:checked + i { background: var(--fern); }
[data-theme="paper"] .coin { box-shadow: inset 0 0 0 2px var(--ink); }

/* ================= Neon Arcade ================= */
[data-theme="neon"] { --font: "Orbitron", "Audiowide", sans-serif; --cy: #00e5ff; --mg: #ff3df2; --ink: #e8fdff; color: var(--ink); }
[data-theme="neon"] #home, [data-theme="neon"] #game, [data-theme="neon"].panel .stage {
  background: linear-gradient(transparent 60%, rgba(255,61,242,.08)), linear-gradient(#05051a, #120a33 60%, #22093d);
}
[data-theme="neon"] .icon-btn { background: rgba(0,229,255,.08); border: 1.5px solid var(--cy); box-shadow: 0 0 12px rgba(0,229,255,.55), inset 0 0 8px rgba(0,229,255,.25); border-radius: 8px; }
[data-theme="neon"] .pill { background: rgba(10,10,40,.8); color: #fff; border: 1.5px solid var(--mg); box-shadow: 0 0 10px rgba(255,61,242,.55); text-shadow: 0 0 8px var(--mg); border-radius: 8px; font-size: 15px; letter-spacing: 1px; }
[data-theme="neon"] .big-btn { background: rgba(255,61,242,.12); color: #fff; border: 2px solid var(--mg); box-shadow: 0 0 18px rgba(255,61,242,.65), inset 0 0 14px rgba(255,61,242,.35); text-shadow: 0 0 10px var(--mg); border-radius: 10px; letter-spacing: 2px; font-size: 22px; }
[data-theme="neon"] .big-btn:active { box-shadow: 0 0 30px rgba(255,61,242,.9); }
[data-theme="neon"] .big-btn.green { border-color: #00ffa3; background: rgba(0,255,163,.1); box-shadow: 0 0 18px rgba(0,255,163,.6), inset 0 0 14px rgba(0,255,163,.3); text-shadow: 0 0 10px #00ffa3; }
[data-theme="neon"] .big-btn.blue { border-color: var(--cy); background: rgba(0,229,255,.1); box-shadow: 0 0 18px rgba(0,229,255,.6), inset 0 0 14px rgba(0,229,255,.3); text-shadow: 0 0 10px var(--cy); }
[data-theme="neon"] .big-btn.red { border-color: #ff3b5c; background: rgba(255,59,92,.12); box-shadow: 0 0 18px rgba(255,59,92,.6); text-shadow: 0 0 10px #ff3b5c; }
[data-theme="neon"] .booster { background: rgba(0,229,255,.06); border: 1.5px solid var(--cy); box-shadow: 0 0 14px rgba(0,229,255,.5), inset 0 0 10px rgba(0,229,255,.2); border-radius: 10px; }
[data-theme="neon"] .booster:active { box-shadow: 0 0 26px rgba(0,229,255,.9); }
[data-theme="neon"] .booster .badge { background: #120a33; border: 1.5px solid var(--mg); box-shadow: 0 0 8px var(--mg); font-size: 12px; }
[data-theme="neon"] .booster .badge.plus { border-color: #00ffa3; box-shadow: 0 0 8px #00ffa3; }
[data-theme="neon"] .booster .lbl { color: var(--cy); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
[data-theme="neon"] .card { background: rgba(12,10,40,.94); color: #fff; border: 1.5px solid var(--cy); box-shadow: 0 0 30px rgba(0,229,255,.45), inset 0 0 30px rgba(0,229,255,.12); border-radius: 14px; }
[data-theme="neon"] .card.win { border-color: #ffe600; box-shadow: 0 0 30px rgba(255,230,0,.45), inset 0 0 30px rgba(255,230,0,.1); }
[data-theme="neon"] .card.lose { border-color: #ff3b5c; box-shadow: 0 0 30px rgba(255,59,92,.5), inset 0 0 30px rgba(255,59,92,.12); }
[data-theme="neon"] .card h2 { font-size: 24px; letter-spacing: 2px; text-shadow: 0 0 12px var(--cy); }
[data-theme="neon"] .card.win .burst { display: none; }
[data-theme="neon"] .tip, [data-theme="neon"] .toast { background: rgba(12,10,40,.94); border: 1px solid var(--cy); box-shadow: 0 0 14px rgba(0,229,255,.4); font-size: 13px; }
[data-theme="neon"] .tier.hard, [data-theme="neon"] .tier.veryhard, [data-theme="neon"] .node .tag { background: rgba(255,59,92,.15); border: 1px solid #ff3b5c; box-shadow: 0 0 8px #ff3b5c; font-size: 10px; }
[data-theme="neon"] .logo span { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 0 10px var(--mg), 0 0 30px var(--mg); letter-spacing: 3px; font-size: .78em; }
[data-theme="neon"] .logo span + span { text-shadow: 0 0 10px var(--cy), 0 0 30px var(--cy); }
[data-theme="neon"] .node { background: rgba(12,10,40,.9); color: #fff; border: 2px solid var(--cy); box-shadow: 0 0 14px rgba(0,229,255,.6); text-shadow: 0 0 8px var(--cy); font-size: 22px; }
[data-theme="neon"] .node.done { border-color: #00ffa3; box-shadow: 0 0 12px rgba(0,255,163,.6); }
[data-theme="neon"] .node.current { border-color: var(--mg); box-shadow: 0 0 24px rgba(255,61,242,.9), inset 0 0 18px rgba(255,61,242,.4); text-shadow: 0 0 12px var(--mg); }
[data-theme="neon"] .link, [data-theme="neon"] .link.done { background: var(--cy); width: 2px; box-shadow: 0 0 8px var(--cy); }
[data-theme="neon"] .bubbles i { background: none; border-color: rgba(0,229,255,.35); box-shadow: 0 0 6px rgba(0,229,255,.4); }
[data-theme="neon"] .toggle { border-color: rgba(0,229,255,.2); font-size: 15px; }
[data-theme="neon"] .toggle i { background: rgba(255,255,255,.1); border: 1px solid var(--cy); }
[data-theme="neon"] .toggle input:checked + i { background: rgba(0,229,255,.5); }
[data-theme="neon"] .reward { text-shadow: 0 0 10px #ffe600; }

/* ================= Soft Glass ================= */
:is([data-theme="glass"], [data-theme="clayglass"]) { --font: "Nunito", system-ui, sans-serif; --ink: #4a5578; color: var(--ink); }
:is([data-theme="glass"], [data-theme="clayglass"]) #home, :is([data-theme="glass"], [data-theme="clayglass"]) #game, :is([data-theme="glass"], [data-theme="clayglass"]).panel .stage {
  background: radial-gradient(circle at 15% 20%, rgba(151,117,250,.25), transparent 45%), radial-gradient(circle at 90% 50%, rgba(34,184,207,.2), transparent 45%), radial-gradient(circle at 30% 95%, rgba(255,146,43,.18), transparent 45%), linear-gradient(135deg, #e3ecff, #fbe9f5 50%, #fff3df);
}
:is([data-theme="glass"], [data-theme="clayglass"]) .icon-btn { background: rgba(255,255,255,.72); border: 1px solid #fff; box-shadow: 0 6px 16px rgba(70,80,140,.15); border-radius: 50%; backdrop-filter: blur(8px); }
:is([data-theme="glass"], [data-theme="clayglass"]) .pill { background: rgba(255,255,255,.72); color: var(--ink); border: 1px solid #fff; box-shadow: 0 6px 16px rgba(70,80,140,.12); text-shadow: none; border-radius: 999px; font-weight: 900; backdrop-filter: blur(8px); }
:is([data-theme="glass"], [data-theme="clayglass"]) .big-btn { background: linear-gradient(135deg, #9775fa, #f06595); color: #fff; box-shadow: 0 12px 26px rgba(151,117,250,.42); text-shadow: none; border-radius: 999px; font-weight: 900; }
:is([data-theme="glass"], [data-theme="clayglass"]) .big-btn:active { box-shadow: 0 4px 12px rgba(151,117,250,.42); }
:is([data-theme="glass"], [data-theme="clayglass"]) .big-btn.green { background: linear-gradient(135deg, #20c997, #22b8cf); box-shadow: 0 12px 26px rgba(32,201,151,.38); }
:is([data-theme="glass"], [data-theme="clayglass"]) .big-btn.blue { background: linear-gradient(135deg, #4c6ef5, #22b8cf); box-shadow: 0 12px 26px rgba(76,110,245,.38); }
:is([data-theme="glass"], [data-theme="clayglass"]) .big-btn.red { background: linear-gradient(135deg, #ff6b6b, #f06595); box-shadow: 0 12px 26px rgba(255,107,107,.38); }
:is([data-theme="glass"], [data-theme="clayglass"]) .booster { background: rgba(255,255,255,.75); border: 1px solid #fff; box-shadow: 0 8px 20px rgba(70,80,140,.16); border-radius: 22px; backdrop-filter: blur(8px); }
:is([data-theme="glass"], [data-theme="clayglass"]) .booster:active { box-shadow: 0 3px 10px rgba(70,80,140,.16); }
:is([data-theme="glass"], [data-theme="clayglass"]) .booster .badge { background: linear-gradient(135deg, #9775fa, #f06595); border: 2px solid #fff; }
:is([data-theme="glass"], [data-theme="clayglass"]) .booster .badge.plus { background: linear-gradient(135deg, #20c997, #22b8cf); }
:is([data-theme="glass"], [data-theme="clayglass"]) .booster .lbl { color: var(--ink); font-weight: 800; }
:is([data-theme="glass"], [data-theme="clayglass"]) .home-board { color: var(--ink); background: rgba(255,255,255,.72); border: 1px solid #fff; box-shadow: 0 6px 16px rgba(70,80,140,.12); border-radius: 20px; backdrop-filter: blur(8px); }
:is([data-theme="glass"], [data-theme="clayglass"]) .card { background: rgba(255,255,255,.88); color: var(--ink); border: 1px solid #fff; box-shadow: 0 24px 50px rgba(70,80,140,.25); border-radius: 30px; backdrop-filter: blur(14px); }
:is([data-theme="glass"], [data-theme="clayglass"]) .card h2 { text-shadow: none; font-weight: 900; background: linear-gradient(135deg, #9775fa, #f06595); -webkit-background-clip: text; background-clip: text; color: transparent; }
:is([data-theme="glass"], [data-theme="clayglass"]) .card.win .burst { background: repeating-conic-gradient(rgba(151,117,250,.15) 0 10deg, transparent 10deg 20deg); }
:is([data-theme="glass"], [data-theme="clayglass"]) .price { background: rgba(255,255,255,.25); }
:is([data-theme="glass"], [data-theme="clayglass"]) .tip, :is([data-theme="glass"], [data-theme="clayglass"]) .toast { background: rgba(74,85,120,.92); color: #fff; border-radius: 18px; }
:is([data-theme="glass"], [data-theme="clayglass"]) .tier.hard, :is([data-theme="glass"], [data-theme="clayglass"]) .tier.veryhard, :is([data-theme="glass"], [data-theme="clayglass"]) .node .tag { background: linear-gradient(135deg, #ff6b6b, #f06595); box-shadow: none; border-radius: 999px; }
:is([data-theme="glass"], [data-theme="clayglass"]) .logo span { color: transparent; -webkit-text-stroke: 0; background: linear-gradient(135deg, #9775fa, #f06595); -webkit-background-clip: text; background-clip: text; text-shadow: none; font-weight: 900; filter: drop-shadow(0 6px 12px rgba(151,117,250,.35)); }
:is([data-theme="glass"], [data-theme="clayglass"]) .logo span + span { background: linear-gradient(135deg, #22b8cf, #4c6ef5); -webkit-background-clip: text; background-clip: text; }
:is([data-theme="glass"], [data-theme="clayglass"]) .node { background: rgba(255,255,255,.8); color: var(--ink); box-shadow: 0 10px 22px rgba(70,80,140,.18); text-shadow: none; border: 1px solid #fff; }
:is([data-theme="glass"], [data-theme="clayglass"]) .node.done { color: #20c997; }
:is([data-theme="glass"], [data-theme="clayglass"]) .node.current { background: linear-gradient(135deg, #9775fa, #f06595); color: #fff; box-shadow: 0 14px 30px rgba(151,117,250,.45), 0 0 0 8px rgba(255,255,255,.5); }
:is([data-theme="glass"], [data-theme="clayglass"]) .link, :is([data-theme="glass"], [data-theme="clayglass"]) .link.done { background: rgba(255,255,255,.9); width: 6px; border-radius: 3px; box-shadow: none; }
:is([data-theme="glass"], [data-theme="clayglass"]) .bubbles i { background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.2) 60%); border-color: rgba(255,255,255,.6); }
:is([data-theme="glass"], [data-theme="clayglass"]) .toggle { border-color: rgba(74,85,120,.12); }
:is([data-theme="glass"], [data-theme="clayglass"]) .toggle i { background: rgba(74,85,120,.15); }
:is([data-theme="glass"], [data-theme="clayglass"]) .toggle input:checked + i { background: linear-gradient(135deg, #20c997, #22b8cf); }