/* Pullstring skins — Shōwa retro palettes: shōjo citrus, candy stripes, flower-power plush, hot-pink knit.
   Each skin sets ink, accent, soft, ground, label and the box pattern (inline SVG, crisp at any size).
   Add a skin: add a block here and a SKINS entry in app.js. */

/* 1. Citrus Shōjo — lemon yellow, orange slices, cherry red, sky blue */
:root[data-skin="citrus"] {
  --ink: #1f5fa8; --accent: #e8323c; --soft: #fff1a8; --ground: #fffbe3; --label: #fffdf0;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='%23ffd93b'/%3E%3Cg transform='translate(60 60)'%3E%3Ccircle r='30' fill='%23ff8a2a'/%3E%3Ccircle r='25' fill='%23fff3c4'/%3E%3Cg fill='%23ff9d3b'%3E%3Cpath d='M0 -22 L7 -3 L-7 -3 Z'/%3E%3Cpath d='M0 -22 L7 -3 L-7 -3 Z' transform='rotate(45)'/%3E%3Cpath d='M0 -22 L7 -3 L-7 -3 Z' transform='rotate(90)'/%3E%3Cpath d='M0 -22 L7 -3 L-7 -3 Z' transform='rotate(135)'/%3E%3Cpath d='M0 -22 L7 -3 L-7 -3 Z' transform='rotate(180)'/%3E%3Cpath d='M0 -22 L7 -3 L-7 -3 Z' transform='rotate(225)'/%3E%3Cpath d='M0 -22 L7 -3 L-7 -3 Z' transform='rotate(270)'/%3E%3Cpath d='M0 -22 L7 -3 L-7 -3 Z' transform='rotate(315)'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23e8323c'%3E%3Ccircle cx='14' cy='14' r='7'/%3E%3Ccircle cx='26' cy='18' r='7'/%3E%3Ccircle cx='106' cy='106' r='7'/%3E%3Ccircle cx='94' cy='102' r='7'/%3E%3C/g%3E%3Cg stroke='%234a8a3a' stroke-width='2.5' fill='none' stroke-linecap='round'%3E%3Cpath d='M14 8 Q20 -2 26 12'/%3E%3Cpath d='M106 100 Q100 90 94 96'/%3E%3C/g%3E%3Cg fill='%2360b8ef'%3E%3Ccircle cx='100' cy='20' r='5'/%3E%3Ccircle cx='20' cy='100' r='5'/%3E%3C/g%3E%3C/svg%3E") 0 0/120px 120px, #ffd93b;
}

/* 2. Candy Stripe — the shōjo dress: hot pink, cherry, white, lime, sky blue */
:root[data-skin="candy"] {
  --ink: #b81d3a; --accent: #e8323c; --soft: #ffe0ea; --ground: #fff6f8; --label: #fffdf6;
  --pattern: repeating-linear-gradient(90deg, #ff4f9a 0 14px, #fff8e6 14px 22px, #e8323c 22px 34px, #fff8e6 34px 42px, #8fd14f 42px 52px, #fff8e6 52px 60px, #60b8ef 60px 72px, #fff8e6 72px 80px, #ffd93b 80px 92px, #fff8e6 92px 100px);
}

/* 3. Flower Power — lime plush with pink, blue and yellow daisies */
:root[data-skin="flowerpower"] {
  --ink: #1f6b2a; --accent: #e8338a; --soft: #e3f7c2; --ground: #f7fde9; --label: #fffdf2;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%2382d63c'/%3E%3Cg id='f'%3E%3Cg fill='%23ff6fb0'%3E%3Ccircle cx='25' cy='10' r='7'/%3E%3Ccircle cx='25' cy='40' r='7'/%3E%3Ccircle cx='10' cy='25' r='7'/%3E%3Ccircle cx='40' cy='25' r='7'/%3E%3Ccircle cx='14' cy='14' r='7'/%3E%3Ccircle cx='36' cy='36' r='7'/%3E%3Ccircle cx='36' cy='14' r='7'/%3E%3Ccircle cx='14' cy='36' r='7'/%3E%3C/g%3E%3Ccircle cx='25' cy='25' r='8' fill='%23fff3a0'/%3E%3C/g%3E%3Cg fill='%2360b8ef'%3E%3Ccircle cx='75' cy='60' r='7'/%3E%3Ccircle cx='75' cy='90' r='7'/%3E%3Ccircle cx='60' cy='75' r='7'/%3E%3Ccircle cx='90' cy='75' r='7'/%3E%3Ccircle cx='64' cy='64' r='7'/%3E%3Ccircle cx='86' cy='86' r='7'/%3E%3Ccircle cx='86' cy='64' r='7'/%3E%3Ccircle cx='64' cy='86' r='7'/%3E%3C/g%3E%3Ccircle cx='75' cy='75' r='8' fill='%23fff3a0'/%3E%3Cg fill='%23fffdf2'%3E%3Ccircle cx='75' cy='25' r='4'/%3E%3Ccircle cx='25' cy='75' r='4'/%3E%3C/g%3E%3Cg fill='%23e8338a'%3E%3Ccircle cx='0' cy='50' r='3'/%3E%3Ccircle cx='100' cy='50' r='3'/%3E%3Ccircle cx='50' cy='0' r='3'/%3E%3Ccircle cx='50' cy='100' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0/100px 100px, #82d63c;
}

/* 4. Hanagasa — flower crown: orange, pink and yellow blooms on sky blue */
:root[data-skin="hanagasa"] {
  --ink: #0f4f8a; --accent: #ff6a1a; --soft: #d6ecfb; --ground: #f1f9fe; --label: #fffdf4;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Crect width='110' height='110' fill='%2360b8ef'/%3E%3Cg fill='%23ff6a1a'%3E%3Cellipse cx='30' cy='12' rx='8' ry='13'/%3E%3Cellipse cx='30' cy='48' rx='8' ry='13'/%3E%3Cellipse cx='12' cy='30' rx='13' ry='8'/%3E%3Cellipse cx='48' cy='30' rx='13' ry='8'/%3E%3C/g%3E%3Ccircle cx='30' cy='30' r='9' fill='%23fff0a0'/%3E%3Ccircle cx='30' cy='30' r='4' fill='%23b84a10'/%3E%3Cg fill='%23ff6fb0'%3E%3Cellipse cx='85' cy='67' rx='8' ry='13'/%3E%3Cellipse cx='85' cy='103' rx='8' ry='13'/%3E%3Cellipse cx='67' cy='85' rx='13' ry='8'/%3E%3Cellipse cx='103' cy='85' rx='13' ry='8'/%3E%3C/g%3E%3Ccircle cx='85' cy='85' r='9' fill='%23fff0a0'/%3E%3Ccircle cx='85' cy='85' r='4' fill='%23b81d3a'/%3E%3Cg fill='%23ffd93b'%3E%3Ccircle cx='85' cy='30' r='8'/%3E%3Ccircle cx='30' cy='85' r='8'/%3E%3C/g%3E%3Cg fill='%23fffdf4'%3E%3Ccircle cx='85' cy='30' r='3'/%3E%3Ccircle cx='30' cy='85' r='3'/%3E%3C/g%3E%3Cg fill='%232e8a3a'%3E%3Cellipse cx='58' cy='58' rx='9' ry='4' transform='rotate(-45 58 58)'/%3E%3Cellipse cx='3' cy='3' rx='9' ry='4' transform='rotate(-45 3 3)'/%3E%3Cellipse cx='107' cy='107' rx='9' ry='4' transform='rotate(-45 107 107)'/%3E%3C/g%3E%3C/svg%3E") 0 0/110px 110px, #60b8ef;
}

/* 5. Pink Knit — hot pink ground, red-and-white tile medallions, lime trim */
:root[data-skin="pinkknit"] {
  --ink: #8a0f3a; --accent: #c4165a; --soft: #ffd3e4; --ground: #fff3f8; --label: #fffaf0;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff2d8a'/%3E%3Cg transform='translate(40 40)'%3E%3Ccircle r='24' fill='%23fff6ea'/%3E%3Cg fill='%23e8232a'%3E%3Cellipse cx='0' cy='-13' rx='6' ry='9'/%3E%3Cellipse cx='0' cy='13' rx='6' ry='9'/%3E%3Cellipse cx='-13' cy='0' rx='9' ry='6'/%3E%3Cellipse cx='13' cy='0' rx='9' ry='6'/%3E%3C/g%3E%3Ccircle r='5' fill='%232e8a3a'/%3E%3C/g%3E%3Cg fill='%23fff6ea'%3E%3Ccircle cx='0' cy='0' r='7'/%3E%3Ccircle cx='80' cy='0' r='7'/%3E%3Ccircle cx='0' cy='80' r='7'/%3E%3Ccircle cx='80' cy='80' r='7'/%3E%3C/g%3E%3Cg fill='%237ac943'%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3Ccircle cx='80' cy='0' r='3'/%3E%3Ccircle cx='0' cy='80' r='3'/%3E%3Ccircle cx='80' cy='80' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0/80px 80px, #ff2d8a;
}

/* 6. Gwengelica — glow-in-the-dark greenish white, silver lace and stars, a single pure-red rose */
:root[data-skin="gwengelica"] {
  --ink: #2f5f4f; --accent: #c8102e; --soft: #e3f8dc; --ground: #f4fdf0; --label: #ffffff;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='%23d9f7c8'/%3E%3Cg fill='none' stroke='%23b4bec6' stroke-width='3'%3E%3Cpath d='M0 30 Q15 10 30 30 Q45 10 60 30 Q75 10 90 30 Q105 10 120 30'/%3E%3Cpath d='M0 90 Q15 70 30 90 Q45 70 60 90 Q75 70 90 90 Q105 70 120 90'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3Ccircle cx='90' cy='30' r='3'/%3E%3Ccircle cx='30' cy='90' r='3'/%3E%3Ccircle cx='90' cy='90' r='3'/%3E%3C/g%3E%3Cg transform='translate(60 60)'%3E%3Ccircle r='24' fill='%23eefff0' opacity='0.8'/%3E%3Cpath d='M0 -20 L3 -3 L20 0 L3 3 L0 20 L-3 3 L-20 0 L-3 -3 Z' fill='%23c4ccd3'/%3E%3Cpath d='M0 -11 L2 -2 L11 0 L2 2 L0 11 L-2 2 L-11 0 L-2 -2 Z' fill='%23ffffff'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='60' cy='8' r='4'/%3E%3Ccircle cx='60' cy='112' r='4'/%3E%3Ccircle cx='8' cy='60' r='4'/%3E%3Ccircle cx='112' cy='60' r='4'/%3E%3C/g%3E%3Cg fill='%23c4ccd3'%3E%3Cpath d='M20 60 L21.5 57 L24 60 L21.5 63 Z'/%3E%3Cpath d='M100 60 L101.5 57 L104 60 L101.5 63 Z'/%3E%3C/g%3E%3Cg transform='translate(0 0)'%3E%3Ccircle r='6' fill='%23c8102e'/%3E%3Ccircle r='3' fill='%23ee4458'/%3E%3C/g%3E%3Cg transform='translate(120 120)'%3E%3Ccircle r='6' fill='%23c8102e'/%3E%3Ccircle r='3' fill='%23ee4458'/%3E%3C/g%3E%3C/svg%3E") 0 0/120px 120px, #d9f7c8;
}

/* 7. Sakura Card — soft pink with cherry blossoms and little gold stars */
:root[data-skin="sakuracard"] {
  --ink: #9c1f52; --accent: #c2185b; --soft: #ffe3ee; --ground: #fff7fa; --label: #fffdf7;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='%23ffb8d1'/%3E%3Cg transform='translate(36 36)' fill='%23ff6fa3'%3E%3Cpath d='M0 -16 C6 -16 9 -9 6 -4 C9 -9 16 -8 16 -2 C16 4 10 6 5 4 C10 6 11 13 6 16 C1 18 -3 13 -3 8 C-3 13 -9 16 -13 12 C-17 8 -14 2 -9 0 C-14 2 -17 -5 -13 -9 C-9 -13 -3 -11 -3 -6 C-5 -11 -6 -16 0 -16 Z'/%3E%3C/g%3E%3Ccircle cx='36' cy='36' r='4' fill='%23fff0c2'/%3E%3Cg transform='translate(90 90)' fill='%23ff6fa3'%3E%3Cpath d='M0 -16 C6 -16 9 -9 6 -4 C9 -9 16 -8 16 -2 C16 4 10 6 5 4 C10 6 11 13 6 16 C1 18 -3 13 -3 8 C-3 13 -9 16 -13 12 C-17 8 -14 2 -9 0 C-14 2 -17 -5 -13 -9 C-9 -13 -3 -11 -3 -6 C-5 -11 -6 -16 0 -16 Z'/%3E%3C/g%3E%3Ccircle cx='90' cy='90' r='4' fill='%23fff0c2'/%3E%3Cg fill='%23f2c230'%3E%3Cpath d='M90 24 L93 33 L102 33 L95 38 L98 47 L90 41 L82 47 L85 38 L78 33 L87 33 Z'/%3E%3Cpath d='M30 84 L33 93 L42 93 L35 98 L38 107 L30 101 L22 107 L25 98 L18 93 L27 93 Z'/%3E%3C/g%3E%3Cg fill='%23fff6fa'%3E%3Ccircle cx='0' cy='60' r='3'/%3E%3Ccircle cx='120' cy='60' r='3'/%3E%3Ccircle cx='60' cy='0' r='3'/%3E%3Ccircle cx='60' cy='120' r='3'/%3E%3Ccircle cx='60' cy='60' r='2'/%3E%3C/g%3E%3C/svg%3E") 0 0/120px 120px, #ffb8d1;
}

/* 8. Kissaten — coffee-shop cream, chocolate brown, burnt orange; 70s daisies */
:root[data-skin="kissaten"] {
  --ink: #4a2a12; --accent: #d4541c; --soft: #f6e4cc; --ground: #fff6e8; --label: #fff9ee;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='%23f4a63a'/%3E%3Cg fill='%236b3a1e'%3E%3Ccircle cx='60' cy='60' r='9'/%3E%3Cellipse cx='60' cy='36' rx='9' ry='15'/%3E%3Cellipse cx='60' cy='84' rx='9' ry='15'/%3E%3Cellipse cx='36' cy='60' rx='15' ry='9'/%3E%3Cellipse cx='84' cy='60' rx='15' ry='9'/%3E%3Cellipse cx='43' cy='43' rx='9' ry='15' transform='rotate(-45 43 43)'/%3E%3Cellipse cx='77' cy='77' rx='9' ry='15' transform='rotate(-45 77 77)'/%3E%3Cellipse cx='77' cy='43' rx='9' ry='15' transform='rotate(45 77 43)'/%3E%3Cellipse cx='43' cy='77' rx='9' ry='15' transform='rotate(45 43 77)'/%3E%3C/g%3E%3Ccircle cx='60' cy='60' r='10' fill='%23fff3d6'/%3E%3Cg fill='%23e8521a'%3E%3Ccircle cx='0' cy='0' r='7'/%3E%3Ccircle cx='120' cy='0' r='7'/%3E%3Ccircle cx='0' cy='120' r='7'/%3E%3Ccircle cx='120' cy='120' r='7'/%3E%3C/g%3E%3Cg fill='%23fff3d6'%3E%3Ccircle cx='0' cy='60' r='4'/%3E%3Ccircle cx='120' cy='60' r='4'/%3E%3Ccircle cx='60' cy='0' r='4'/%3E%3Ccircle cx='60' cy='120' r='4'/%3E%3C/g%3E%3C/svg%3E") 0 0/120px 120px, #f4a63a;
}

/* 9. Ramune — marble-soda blue, white fizz, a glass marble */
:root[data-skin="ramune"] {
  --ink: #0b3d7a; --accent: #0e7fd6; --soft: #d8ecfb; --ground: #f2f9ff; --label: #fffdf6;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Crect width='90' height='90' fill='%2347b5f0'/%3E%3Cg fill='%23ffffff' opacity='0.9'%3E%3Ccircle cx='15' cy='20' r='5'/%3E%3Ccircle cx='70' cy='12' r='3'/%3E%3Ccircle cx='80' cy='60' r='6'/%3E%3Ccircle cx='28' cy='70' r='4'/%3E%3Ccircle cx='55' cy='40' r='2.5'/%3E%3Ccircle cx='8' cy='85' r='3'/%3E%3C/g%3E%3Cg transform='translate(45 45)'%3E%3Ccircle r='14' fill='%230e7fd6'/%3E%3Ccircle r='14' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Ccircle cx='-5' cy='-5' r='4' fill='%23ffffff' opacity='0.85'/%3E%3C/g%3E%3Cg fill='%23ff4f9a'%3E%3Ccircle cx='0' cy='45' r='3'/%3E%3Ccircle cx='90' cy='45' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0/90px 90px, #47b5f0;
}

/* 10. Tsubaki — camellia red on black, gold stamens; kimono-lacquer mood */
:root[data-skin="tsubaki"] {
  --ink: #1a1a1a; --accent: #c8102e; --soft: #fbe0e0; --ground: #fff6f4; --label: #fffaf0;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='%231a1a1a'/%3E%3Cg transform='translate(42 42)'%3E%3Cg fill='%23e0202e'%3E%3Ccircle cx='0' cy='-14' r='12'/%3E%3Ccircle cx='13' cy='-4' r='12'/%3E%3Ccircle cx='8' cy='12' r='12'/%3E%3Ccircle cx='-8' cy='12' r='12'/%3E%3Ccircle cx='-13' cy='-4' r='12'/%3E%3C/g%3E%3Ccircle r='10' fill='%23c8102e'/%3E%3Cg fill='%23f2c230'%3E%3Ccircle cx='0' cy='-4' r='2'/%3E%3Ccircle cx='4' cy='2' r='2'/%3E%3Ccircle cx='-4' cy='2' r='2'/%3E%3Ccircle cx='0' cy='0' r='1.5'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%232e8a3a'%3E%3Cellipse cx='78' cy='78' rx='16' ry='7' transform='rotate(-40 78 78)'/%3E%3Cellipse cx='96' cy='96' rx='16' ry='7' transform='rotate(30 96 96)'/%3E%3C/g%3E%3Cg fill='%23f2c230'%3E%3Ccircle cx='100' cy='24' r='3'/%3E%3Ccircle cx='20' cy='100' r='3'/%3E%3C/g%3E%3Cg fill='none' stroke='%23f2c230' stroke-width='1.5' opacity='0.5'%3E%3Cpath d='M0 118 L120 118'/%3E%3C/g%3E%3C/svg%3E") 0 0/120px 120px, #1a1a1a;
}