/* SCI-FI SKIN — "Starship HUD". Active when <html data-skin="scifi">.
   Deep space, holographic cyan HUD, bracket corners, scanlines, drifting starfield. Art: /skins/scifi/ */
[data-skin="scifi"] {
  --bg: #04060f; --bg2: #070b1c; --panel: #08112acc; --panel2: #0d1a3d; --line: #17305e; --line2: #26508f;
  --text: #e6fbff; --muted: #8fb3d9; --dim: #5a7aa6;
  --red: #ff5e7a; --red2: #ff8aa0; --deep: #4a0f2a; --amber: #5ef2ff; --bone: #bdeeff; --green: #6dffb0;
  --common: #8fb3d9; --uncommon: #5ef2ff; --rare: #ff5e7a;
  --display: "Orbitron", "Exo 2", system-ui, sans-serif; --body: "Exo 2", system-ui, sans-serif; --type: "Orbitron", monospace;
  --holo: #5ef2ff;
  --corners: linear-gradient(var(--holo), var(--holo)) top left / 14px 2px, linear-gradient(var(--holo), var(--holo)) top left / 2px 14px,
    linear-gradient(var(--holo), var(--holo)) top right / 14px 2px, linear-gradient(var(--holo), var(--holo)) top right / 2px 14px,
    linear-gradient(var(--holo), var(--holo)) bottom left / 14px 2px, linear-gradient(var(--holo), var(--holo)) bottom left / 2px 14px,
    linear-gradient(var(--holo), var(--holo)) bottom right / 14px 2px, linear-gradient(var(--holo), var(--holo)) bottom right / 2px 14px;
}
[data-skin="scifi"] body { background: radial-gradient(80% 50% at 80% 0%, #1a1450 0%, transparent 60%), radial-gradient(60% 40% at 0% 100%, #062a3a 0%, transparent 60%), var(--bg); }
[data-skin="scifi"] .grain { display: none; }
[data-skin="scifi"] .starfield { position: absolute; inset: -50% 0 0; background-repeat: repeat; }
[data-skin="scifi"] .starfield.s1 { background-image: radial-gradient(1.2px 1.2px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, #cfefff, transparent), radial-gradient(1.4px 1.4px at 200px 160px, #fff, transparent), radial-gradient(1px 1px at 60px 200px, #9ef3ff, transparent);
  background-size: 240px 240px; animation: drift 90s linear infinite; opacity: .7; }
[data-skin="scifi"] .starfield.s2 { background-image: radial-gradient(1.8px 1.8px at 50px 90px, #fff, transparent), radial-gradient(1.6px 1.6px at 300px 250px, #ffd2dc, transparent), radial-gradient(2px 2px at 180px 340px, #fff, transparent);
  background-size: 420px 420px; animation: drift 45s linear infinite; opacity: .8; }
@keyframes drift { to { transform: translateY(50%); } }
[data-skin="scifi"] .scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #5ef2ff08 0 1px, transparent 1px 4px); }

[data-skin="scifi"] .h, [data-skin="scifi"] .tcard .name { letter-spacing: .04em; font-weight: 800; }
[data-skin="scifi"] .tcard .name { font-size: 15px; line-height: 1.25; text-transform: uppercase; }
[data-skin="scifi"] .trow .tcard .name { font-size: 12.5px; }
[data-skin="scifi"] .h { font-size: 20px; text-transform: uppercase; }
[data-skin="scifi"] .h.sm { font-size: 15px; }
[data-skin="scifi"] .kicker { color: var(--holo); }

[data-skin="scifi"] .btn { background: #0d1a3d99; border: 1px solid var(--line2); border-radius: 4px; text-transform: uppercase; letter-spacing: .1em; font-size: 14px; }
[data-skin="scifi"] .btn.primary { background: linear-gradient(180deg, #5ef2ff33, #5ef2ff14); border-color: var(--holo); color: #e6fbff; box-shadow: 0 0 18px -4px #5ef2ff99, inset 0 0 12px #5ef2ff33; }
[data-skin="scifi"] .btn.amber { background: var(--holo); color: #021018; border-color: var(--holo); }
[data-skin="scifi"] .input, [data-skin="scifi"] select.input, [data-skin="scifi"] .segb, [data-skin="scifi"] .toggle { background: #050b1e; border-color: var(--line2); border-radius: 4px; }
[data-skin="scifi"] .segb.on { background: var(--holo); color: #021018; border-color: var(--holo); }

/* home */
[data-skin="scifi"] .marquee { background: #08112ab3; border: 1px solid var(--line2); border-radius: 6px; box-shadow: 0 0 60px -10px #5ef2ff55; padding: 34px 18px 22px; overflow: visible; isolation: isolate; }
[data-skin="scifi"] .marquee::before { display: block; animation: none; filter: none; -webkit-mask: none; mask: none; background: var(--corners); background-repeat: no-repeat; inset: -1px; border-radius: 0; }
[data-skin="scifi"] .logo { font-size: clamp(32px, 10vw, 46px); color: #e6fbff; letter-spacing: .06em; text-shadow: 0 0 12px #5ef2ff, 0 0 30px #5ef2ff88; }
[data-skin="scifi"] .logo span { color: var(--holo); }
[data-skin="scifi"] .edition { color: var(--holo); border-color: #5ef2ff66; border-radius: 2px; font-size: 11px; letter-spacing: .4em; }
[data-skin="scifi"] .tagline { color: var(--muted); }
[data-skin="scifi"] .sk-s-planet { right: -30px; top: -22px; width: 150px; aspect-ratio: 220 / 160; z-index: -1; animation: float 7s ease-in-out infinite; }
[data-skin="scifi"] .sk-s-reticle { left: -16px; bottom: -18px; width: 62px; opacity: .8; animation: spin 14s linear infinite; }
[data-skin="scifi"] .sk-s-lobby { right: 10px; top: 10px; width: 40px; opacity: .6; animation: spin 14s linear infinite; }
@keyframes float { 50% { translate: 0 -8px; } }
@keyframes spin { to { rotate: 360deg; } }

/* shell & HUD panels */
[data-skin="scifi"] .topbar { background: #04060fe6; border-bottom: 1px solid #5ef2ff55; }
[data-skin="scifi"] .mini-logo, [data-skin="scifi"] .mini-logo span { color: var(--holo); }
[data-skin="scifi"] .code-chip { background: #0d1a3d; border: 1px solid var(--holo); color: var(--holo); }
[data-skin="scifi"] .phase-pill, [data-skin="scifi"] .ms-clock { color: var(--holo); }
[data-skin="scifi"] .movie-strip { background: #050b1e; }
[data-skin="scifi"] .tabbar { background: #04060ff2; border-top: 1px solid #5ef2ff44; }
[data-skin="scifi"] .tab.on { background: #0d1a3d; box-shadow: inset 0 -2px 0 var(--holo); }
[data-skin="scifi"] .panel, [data-skin="scifi"] .card-panel, [data-skin="scifi"] .chat { border-radius: 4px; background: var(--corners), #08112acc; background-repeat: no-repeat; backdrop-filter: blur(4px); }
[data-skin="scifi"] .banner { border-radius: 4px; background: linear-gradient(90deg, #4a0f2a99, #08112acc); border-color: #ff5e7a66; }
[data-skin="scifi"] .banner.amber { background: linear-gradient(90deg, #0d3a4a, #08112acc); border-color: #5ef2ff66; }

/* cards: holo panels with bracket corners */
[data-skin="scifi"] .tcard { border-radius: 4px; border-width: 1px; background: linear-gradient(var(--rc), var(--rc)) top left / 14px 2px, linear-gradient(var(--rc), var(--rc)) top left / 2px 14px,
    linear-gradient(var(--rc), var(--rc)) bottom right / 14px 2px, linear-gradient(var(--rc), var(--rc)) bottom right / 2px 14px, linear-gradient(170deg, #0f1f48e6, #070f26e6);
  background-repeat: no-repeat; border-color: color-mix(in srgb, var(--rc) 40%, transparent); box-shadow: 0 0 18px -8px var(--rc); }
[data-skin="scifi"] .tcard::after { border-top: 1px dashed #5ef2ff33; }
[data-skin="scifi"] .tcard.hit { background: linear-gradient(170deg, #0d3a2ae6, #062018e6); border-color: var(--green); }
[data-skin="scifi"] .stamp { color: var(--green); border-color: var(--green); background: #021a10dd; border-radius: 2px; font-family: var(--display); font-size: 14px; }
[data-skin="scifi"] .rsticker { display: block; position: absolute; right: 6px; bottom: 6px; width: 28px; height: 28px; background: center / contain no-repeat; opacity: .8; pointer-events: none; }
[data-skin="scifi"] .tcard.rare .rsticker { background-image: var(--art-reticle); }
[data-skin="scifi"] .tcard:not(.rare) .rsticker, [data-skin="scifi"] .tcard.hit .rsticker, [data-skin="scifi"] .tcard .call ~ .rsticker, [data-skin="scifi"] .tcard .tags ~ .rsticker { display: none; }
[data-skin="scifi"] .tcard .call { border-radius: 3px; background: linear-gradient(180deg, #ff5e7a55, #ff5e7a22); border: 1px solid var(--red); color: #fff; font-size: 13px; letter-spacing: .14em; box-shadow: 0 0 14px -4px var(--red); }
[data-skin="scifi"] .claim { background: #08112af2; border: 1px solid var(--holo); border-radius: 4px; box-shadow: 0 0 30px -8px #5ef2ffaa; }
[data-skin="scifi"] .vbtn { border-radius: 3px; font-size: 15px; }

/* FX */
[data-skin="scifi"] .fx-scrim { background: repeating-linear-gradient(0deg, #5ef2ff0f 0 1px, transparent 1px 4px), radial-gradient(circle at 50% 46%, #0d3a4acc, #04060ff2 70%); }
[data-skin="scifi"] .fx-flash { background: #9ef3ff; }
[data-skin="scifi"] .fx-stampbig { font-size: clamp(34px, 10vw, 64px); color: var(--holo); background: transparent; border: 2px solid var(--holo); border-radius: 4px; transform: none; letter-spacing: .08em;
  text-shadow: 0 0 14px #5ef2ff; box-shadow: 0 0 30px #5ef2ff66, inset 0 0 20px #5ef2ff33; animation-name: hudIn; }
[data-skin="scifi"] .fx-stampbig.long { font-size: clamp(28px, 8vw, 52px); }
@keyframes hudIn { 0% { opacity: 0; clip-path: inset(50% 0 50% 0); } 60% { opacity: 1; clip-path: inset(0 0 0 0); } 70% { opacity: .4; } 100% { opacity: 1; } }
[data-skin="scifi"] .particle { width: 2px; height: 22px; border-radius: 1px; box-shadow: 0 0 6px currentColor; }
[data-skin="scifi"] .fx-title { color: #e6fbff; text-shadow: 0 0 14px #5ef2ff, 0 0 40px #5ef2ff88; letter-spacing: .08em; }
[data-skin="scifi"] .fx-pts { color: var(--holo); text-shadow: 0 0 20px #5ef2ff; }
[data-skin="scifi"] .leader { background: #0d1a3d; box-shadow: 0 0 0 4px var(--holo), 0 0 60px #5ef2ff88; }
[data-skin="scifi"] .leader .num { color: var(--holo); }
@media (prefers-reduced-motion: reduce) { [data-skin="scifi"] .starfield { animation: none; } }