/* ─────────────────────────────────────────────────────────────
   ANIME SKIN — active when <html data-skin="anime">.
   Dark "magical night" palette (easy on the eyes while watching),
   manga-panel ink outlines, halftone dots, sakura + twinkling stars.
   Art files live in /skins/anime/ and are mapped in app.js → SKINS.anime.art
   ───────────────────────────────────────────────────────────── */
[data-skin="anime"] {
  --bg: #141033; --bg2: #1b1645; --panel: #211b4f; --panel2: #2b2463; --line: #3d3480; --line2: #5a4db0;
  --text: #fff6fb; --muted: #c2b9ee; --dim: #8a80c4;
  --red: #ff3d8b; --red2: #ff6fae; --deep: #5a1a6b; --amber: #ffd84a; --bone: #ffe6f2; --green: #5cf0b0;
  --common: #a9bbff; --uncommon: #3fd0ff; --rare: #ff6fae;
  --ink: #0b0822; --pop: 4px 4px 0 var(--ink);
  --display: "Dela Gothic One", "Arial Black", Impact, sans-serif;
  --body: "M PLUS Rounded 1c", system-ui, -apple-system, Segoe UI, sans-serif;
  --type: "Yusei Magic", "Comic Sans MS", cursive;
}
[data-skin="anime"] body {
  background:
    radial-gradient(#ffffff0d 1.2px, transparent 1.6px) 0 0 / 16px 16px,
    radial-gradient(90% 60% at 50% -10%, #5a2a8a 0%, #2a1a5e 35%, var(--bg) 70%) fixed,
    var(--bg);
}
[data-skin="anime"] .grain { display: none; }

/* decor layer: sakura + twinkles */
[data-skin="anime"] .petal { position: absolute; top: -6vh; width: var(--size); height: var(--size); background: var(--art-sakura) center / contain no-repeat;
  opacity: .75; animation: petal var(--dur) linear var(--delay) infinite; }
@keyframes petal {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(var(--sway), 55vh) rotate(200deg); }
  100% { transform: translate(calc(var(--sway) * -0.5), 112vh) rotate(420deg); }
}
[data-skin="anime"] .twinkle { position: absolute; width: var(--size); height: var(--size); background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: twinkle 3.2s ease-in-out var(--delay) infinite; opacity: .15; }
@keyframes twinkle { 50% { opacity: .85; transform: scale(1.15) rotate(20deg); } }

/* type */
[data-skin="anime"] .h, [data-skin="anime"] .tcard .name { letter-spacing: 0; }
[data-skin="anime"] .tcard .name { font-size: 17px; line-height: 1.15; }
[data-skin="anime"] .trow .tcard .name { font-size: 14px; }
[data-skin="anime"] .h { font-size: 22px; }
[data-skin="anime"] .h.sm { font-size: 17px; }
[data-skin="anime"] .kicker { color: var(--red2); }

/* buttons & inputs */
[data-skin="anime"] .btn { border: 2px solid var(--ink); box-shadow: var(--pop); border-radius: 14px; }
[data-skin="anime"] .btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
[data-skin="anime"] .btn.primary { background: linear-gradient(180deg, #ff86bd, var(--red)); border-color: var(--ink); }
[data-skin="anime"] .btn.amber { background: linear-gradient(180deg, #ffe680, var(--amber)); color: var(--ink); }
[data-skin="anime"] .btn.ghost { box-shadow: none; border-color: var(--line2); }
[data-skin="anime"] .input, [data-skin="anime"] select.input, [data-skin="anime"] .segb, [data-skin="anime"] .toggle { background: #120e2e; border: 2px solid var(--line2); }
[data-skin="anime"] .segb.on { background: var(--amber); color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
[data-skin="anime"] .switch { background: #3d3480; }

/* home marquee → manga title card */
[data-skin="anime"] .home-inner { padding-top: 26px; }
[data-skin="anime"] .marquee { background: linear-gradient(160deg, #ff6fae 0%, #b05cff 55%, #4a3bd1 100%); border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink), 0 0 60px -10px #ff6fae88; padding: 40px 18px 22px; overflow: visible; isolation: isolate; }
[data-skin="anime"] .marquee::before { display: none; }
[data-skin="anime"] .marquee::after { content: ""; position: absolute; inset: 0; border-radius: 15px; z-index: -1;
  background: repeating-conic-gradient(from 0deg at 50% 60%, #ffffff1f 0deg 3deg, transparent 3deg 12deg); }
[data-skin="anime"] .logo { color: #fff; font-size: clamp(40px, 12vw, 56px); line-height: 1; text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 6px 6px 0 #ff3d8b; }
[data-skin="anime"] .logo span { color: var(--amber); }
[data-skin="anime"] .edition { background: var(--ink); color: #fff; border: 0; border-radius: 999px; padding: 5px 14px 4px; letter-spacing: .2em; font-size: 12px; animation: none; }
[data-skin="anime"] .tagline { color: #fff; font-weight: 700; text-shadow: 1px 1px 0 var(--ink); }
[data-skin="anime"] .art-hachimaki { top: -30px; left: 50%; transform: translateX(-52%) rotate(-3deg); width: 108%; max-width: 470px; z-index: 2; filter: drop-shadow(3px 3px 0 var(--ink)); }
[data-skin="anime"] .art-sword { right: -26px; top: -40px; height: 250px; transform: rotate(28deg); z-index: -1; opacity: .95; }
[data-skin="anime"] .art-toast { left: -24px; bottom: -30px; width: 82px; transform: rotate(-14deg); z-index: 3; filter: drop-shadow(3px 3px 0 var(--ink)); animation: bob 3s ease-in-out infinite; }
[data-skin="anime"] .art-star { right: 8px; bottom: -22px; width: 54px; z-index: 3; transform: rotate(12deg); animation: bob 2.6s ease-in-out -1s infinite; }
[data-skin="anime"] .art-ribbon { left: 8px; top: 18px; width: 50px; z-index: 3; transform: rotate(-18deg); }
@keyframes bob { 50% { translate: 0 -6px; } }
[data-skin="anime"] .art-beam { display: block; position: static; width: 100%; height: 64px; object-fit: cover; margin: -8px 0 14px; border-radius: 14px; filter: drop-shadow(0 0 14px #3fd0ff66); }
[data-skin="anime"] .card-panel { position: relative; background: var(--panel); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
[data-skin="anime"] .art-nosebleed { right: -16px; bottom: -22px; width: 66px; transform: rotate(10deg); filter: drop-shadow(3px 3px 0 var(--ink)); }
[data-skin="anime"] .divider { color: var(--muted); }

/* shell */
[data-skin="anime"] .topbar { background: linear-gradient(180deg, #141033f2, #141033d9); border-bottom: 2px solid var(--ink); }
[data-skin="anime"] .mini-logo { font-size: 16px; }
[data-skin="anime"] .mini-logo span, [data-skin="anime"] .phase-pill { color: var(--amber); }
[data-skin="anime"] .code-chip { background: var(--ink); border: 2px dashed var(--red2); }
[data-skin="anime"] .movie-strip { background: #100c29; border-bottom: 2px solid var(--ink); color: var(--bone); }
[data-skin="anime"] .tabbar { background: #110d2cf5; border-top: 2px solid var(--ink); }
[data-skin="anime"] .tab.on { background: var(--panel2); box-shadow: inset 0 -3px 0 var(--red2); }
[data-skin="anime"] .icon-btn { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }

/* manga panels */
[data-skin="anime"] .panel, [data-skin="anime"] .chat { border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); border-radius: 16px; }
[data-skin="anime"] .banner { background: linear-gradient(90deg, #4b1f6e, var(--panel)); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
[data-skin="anime"] .banner.amber { background: linear-gradient(90deg, #5c4a12, var(--panel)); }
[data-skin="anime"] .banner.green { background: linear-gradient(90deg, #12493a, var(--panel)); }
[data-skin="anime"] .art-lobby-toast { right: -10px; top: -22px; width: 64px; transform: rotate(16deg); filter: drop-shadow(3px 3px 0 var(--ink)); }
[data-skin="anime"] .art-lobby-star { right: 52px; top: -14px; width: 34px; transform: rotate(-10deg); }
[data-skin="anime"] .art-results-ribbon { right: 10px; top: -18px; width: 56px; transform: rotate(14deg); }
[data-skin="anime"] .method { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
[data-skin="anime"] .method.mine { background: linear-gradient(170deg, #5c4a12, var(--panel2)); border-color: var(--amber); }

/* cards */
[data-skin="anime"] .tcard { background: linear-gradient(165deg, #33297a 0%, #1f1950 70%); border: 2.5px solid var(--rc); box-shadow: 4px 4px 0 var(--ink); border-radius: 16px; }
[data-skin="anime"] .tcard.rare { box-shadow: 4px 4px 0 var(--ink), 0 0 22px -6px #ff6fae99; }
[data-skin="anime"] .tcard::after { border-top: 2px dashed #ffffff22; }
[data-skin="anime"] .tcard .mod { color: #fff2a8; font-size: 14px; }
[data-skin="anime"] .tcard.hit { background: linear-gradient(165deg, #175c4a 0%, #142c3a 70%); border-color: var(--green); }
[data-skin="anime"] .stamp { background: #0b2a24dd; border-radius: 999px; font-size: 19px; padding: 0 10px; }
[data-skin="anime"] .tcard .call { background: linear-gradient(180deg, #ff86bd, var(--red)); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
[data-skin="anime"] .rsticker { display: block; position: absolute; right: 6px; bottom: 6px; width: 30px; height: 30px; background: center / contain no-repeat; transform: rotate(14deg); opacity: .95; pointer-events: none; }
[data-skin="anime"] .tcard.uncommon .rsticker { background-image: var(--art-star); width: 24px; height: 24px; }
[data-skin="anime"] .tcard.rare .rsticker { background-image: var(--art-ribbon); }
[data-skin="anime"] .tcard.hit .rsticker, [data-skin="anime"] .tcard .call ~ .rsticker, [data-skin="anime"] .tcard .tags ~ .rsticker { display: none; }

/* chat, claims, sheets */
[data-skin="anime"] .msg.hit { background: #5cf0b01a; }
[data-skin="anime"] .claim { background: #1d1748f7; border: 2.5px solid var(--amber); box-shadow: 5px 5px 0 var(--ink), 0 0 30px -10px #ffd84a88; }
[data-skin="anime"] .vbtn { border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
[data-skin="anime"] .sheet { border: 2px solid var(--ink); }
[data-skin="anime"] .act { border: 2px solid var(--ink); }
[data-skin="anime"] .act.red { background: linear-gradient(90deg, #5a1a4b, var(--panel2)); }
[data-skin="anime"] #toast div { background: var(--panel2); border: 2px solid var(--ink); box-shadow: var(--pop); }

/* beam struggle vote meter: SAW IT (blue) pushes from the left, NOPE (orange) from the right */
[data-skin="anime"] .beam { display: block; position: relative; height: 22px; margin: 10px 0 4px; border-radius: 11px; overflow: hidden; background: #0b0822; }
[data-skin="anime"] .beam .b-yes, [data-skin="anime"] .beam .b-no { position: absolute; top: 3px; bottom: 3px; transition: width .4s cubic-bezier(.3,1.4,.5,1); }
[data-skin="anime"] .beam .b-yes { left: 0; width: var(--p); border-radius: 0 8px 8px 0; background: linear-gradient(180deg, #3fb6ff, #fff 50%, #3fb6ff); box-shadow: 0 0 12px #3fb6ff; }
[data-skin="anime"] .beam .b-no { right: 0; width: calc(100% - var(--p)); border-radius: 8px 0 0 8px; background: linear-gradient(180deg, #ff8a2a, #fff 50%, #ff8a2a); box-shadow: 0 0 12px #ff8a2a; }
[data-skin="anime"] .beam .b-clash { position: absolute; top: 50%; left: var(--p); width: 30px; height: 30px; transform: translate(-50%, -50%); transition: left .4s cubic-bezier(.3,1.4,.5,1);
  background: radial-gradient(circle, #fff 0 30%, #ffd84a 45%, transparent 70%); animation: clash .25s steps(2) infinite; }
@keyframes clash { 50% { transform: translate(-50%, -50%) scale(1.3) rotate(45deg); } }
[data-skin="anime"] .claim .bar { height: 3px; margin-top: 6px; }

/* FX */
[data-skin="anime"] .fx-scrim { background:
  repeating-conic-gradient(from 0deg at 50% 46%, #ffffff16 0deg 2deg, transparent 2deg 9deg),
  radial-gradient(circle at 50% 46%, #ff6fae66, #0b0822f0 68%); }
[data-skin="anime"] .fx-stampbig { color: var(--amber); border: 0; background: none; padding: 0; transform: rotate(-10deg);
  text-shadow: 4px 4px 0 var(--ink), -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 0 0 40px #ffd84a; }
[data-skin="anime"] .fx-stampbig { animation-name: slamA; }
@keyframes slamA { 0% { transform: rotate(-10deg) scale(3.2); opacity: 0; } 100% { transform: rotate(-10deg) scale(1); opacity: 1; } }
[data-skin="anime"] .particle { width: 26px; height: 26px; background: var(--art-star) center / contain no-repeat !important; border-radius: 0; }
[data-skin="anime"] .particle:nth-child(3n) { background-image: var(--art-sakura) !important; width: 20px; height: 20px; }
[data-skin="anime"] .fx-pts { color: #fff; text-shadow: 3px 3px 0 var(--ink), 0 0 24px #ff6fae; }
[data-skin="anime"] .fx-mine { background: var(--red2); border: 2px solid var(--ink); box-shadow: var(--pop); }
[data-skin="anime"] .fx-title { color: #fff; text-shadow: 4px 4px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 7px 7px 0 #ff3d8b; }
[data-skin="anime"] .leader { background: #fff6fb; box-shadow: 0 0 0 8px var(--ink), 0 0 0 14px #ff6fae, 0 0 80px #000; }

@media (prefers-reduced-motion: reduce) {
  [data-skin="anime"] .petal, [data-skin="anime"] .twinkle { display: none; }
}