/* Oc2cO shared skin v1 (2026-11-04) — cosmic backdrop + glass + type. Applied to every page.
   data-skin="game" on <html> = light mode: no card restyling, so game boards keep their own look. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@500;700;900&display=swap');
:root{
  --o-bg:#060A14; --o-text:#DCEEFF; --o-text2:rgba(200,228,255,.66); --o-cyan:#00E5FF; --o-blue:#64D4FF;
  --o-violet:#9B7BFF; --o-gold:#FFC966; --o-glass:rgba(14,26,46,.72); --o-edge:rgba(120,210,255,.2);
}
html{background:var(--o-bg)!important;scroll-behavior:smooth}
body{background:transparent!important;color:var(--o-text);font-family:Inter,system-ui,sans-serif!important;-webkit-font-smoothing:antialiased}
#o-cosmos{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
#o-glow{position:fixed;width:520px;height:520px;left:0;top:0;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(0,229,255,.09),rgba(155,123,255,.05) 40%,transparent 70%);transition:opacity .4s;mix-blend-mode:screen}
::selection{background:rgba(0,229,255,.35);color:#fff}
h1,h2,h3{font-family:Orbitron,Inter,sans-serif!important;letter-spacing:.02em}
h1{background:linear-gradient(90deg,var(--o-cyan),var(--o-violet) 55%,var(--o-cyan));-webkit-background-clip:text;background-clip:text;color:transparent!important;
  background-size:200% 100%;animation:o-sheen 9s linear infinite}
@keyframes o-sheen{to{background-position:-200% 0}}
a{color:var(--o-blue)}
a:hover{color:var(--o-cyan)}
:focus-visible{outline:2px solid var(--o-cyan)!important;outline-offset:3px}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#060A14}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--o-cyan),var(--o-violet));border-radius:10px}

/* nav: one glass bar look everywhere */
nav,.site-nav,.nav,.navbar,header nav{background:linear-gradient(180deg,rgba(6,10,20,.82),rgba(6,10,20,.45))!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(120,210,255,.1)!important}
nav a,.site-nav a{color:var(--o-text2)!important;text-decoration:none!important;transition:color .2s}
nav a:hover,.site-nav a:hover{color:var(--o-cyan)!important}

/* buttons */
.pill-btn,.btn,.button,button:not([class*="cell"]):not([class*="tile"]):not([class*="card"]):not(.o-keep){
  border-radius:999px;border:1px solid var(--o-edge);background:linear-gradient(90deg,rgba(0,229,255,.16),rgba(155,123,255,.16));
  color:var(--o-text);transition:transform .2s,box-shadow .25s,border-color .25s}
.pill-btn:hover,.btn:hover,.button:hover,button:not([class*="cell"]):not([class*="tile"]):not([class*="card"]):not(.o-keep):hover{
  transform:translateY(-1px);border-color:var(--o-cyan);box-shadow:0 0 24px rgba(0,229,255,.32)}

/* surfaces (pages only) */
html:not([data-skin="game"]) :is(.glass-card,.card,.panel,.product,.product-card,.feature,.tier,.plan,.checkout-card,.glass){
  background:var(--o-glass)!important;border:1px solid var(--o-edge)!important;border-radius:20px!important;
  box-shadow:0 20px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);transition:transform .25s,border-color .3s,box-shadow .3s}
html:not([data-skin="game"]) :is(.glass-card,.card,.product,.product-card,.feature,.tier,.plan):hover{
  border-color:rgba(0,229,255,.45)!important;box-shadow:0 24px 70px rgba(0,0,0,.45),0 0 34px rgba(0,229,255,.14)}
html:not([data-skin="game"]) .page-bg-layer{opacity:.25!important}
/* game pages: let the board sit on a soft glass stage */
html[data-skin="game"] :is(main,.game-container,.container,.wrap){position:relative;z-index:1}

/* scroll reveal (added by skin JS) */
.o-rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.o-rv.o-in{opacity:1;transform:none}
footer{border-top:1px solid rgba(120,210,255,.1);color:var(--o-text2)}
@media (prefers-reduced-motion:reduce){h1{animation:none}.o-rv{opacity:1;transform:none;transition:none}#o-glow{display:none}}

/* v1.1 2026-11-04: cross-page View Transitions -- pages dissolve into each other like a portal.
   Same-origin navigations only; browsers without support just navigate normally. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: o-vt-out .32s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: o-vt-in .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes o-vt-out { to { opacity: 0; transform: scale(.985); filter: blur(4px); } }
@keyframes o-vt-in { from { opacity: 0; transform: scale(1.015); filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }