/* Terrains de l'Arène (public/arena/themes.js) : variables de couleurs par thème (.th-<clé>), utilisées par le terrain,
   le cadre des cartes et le HUD du héros, puis le terrain lui-même (fond, tapis, décor, particules). */

/* ================= Variables par thème ================= */
:root, .th-sanctuaire {
  --t-field: radial-gradient(90% 70% at 50% 40%, #2c2730, #141118 75%), #141118;
  --t-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 40h40v40H0zM60 0h60v60H60zM40 80h50v40H40z' fill='none' stroke='%23ffffff' stroke-opacity='.035' stroke-width='2'/%3E%3C/svg%3E");
  --t-mat: linear-gradient(180deg, rgba(34, 30, 38, 0.92), rgba(22, 19, 26, 0.92));
  --t-mat-line: #c9a24f;
  --t-mat-bw: 2px;
  --t-mat-r: 6px;
  --t-mat-inner: inset 0 0 0 6px rgba(0, 0, 0, 0.25), inset 0 0 0 7px rgba(201, 162, 79, 0.35), inset 0 0 60px rgba(0, 0, 0, 0.6);
  --t-edge: linear-gradient(180deg, #7a1217, #3e070b);
  --t-rim: linear-gradient(145deg, #fff4c8, #f1cf72 22%, #b9852c 48%, #f1cf72 70%, #5e3d0d);
  --t-body: linear-gradient(170deg, color-mix(in oklab, var(--g, #8a7a66) 30%, #2a2229), #17131a 75%);
  --t-ribbon: linear-gradient(180deg, #a3242b, #7a1217 55%, #4a090d);
  --t-ribbon-ink: #fff8e8;
  --t-paper: radial-gradient(120% 90% at 50% 45%, #fbf0d2, #f2dfb2 55%, #d6b981);
  --t-ink: #2b1d10;
  --t-kwc: #8a5a10;
  --t-tag: linear-gradient(180deg, #2c242d, #120e14);
  --t-tag-ink: #fff4c8;
  --t-tag-line: #b9852c;
  --t-title: "Shippori Mincho", serif;
  --t-card-r: 6cqw;
  --t-art-r: 40cqw 40cqw 5cqw 5cqw / 32cqw 32cqw 5cqw 5cqw;
  --t-glow: rgba(255, 200, 90, 0.7);
  --t-face-r: 48% 48% 16% 16% / 42% 42% 14% 14%;
  --t-plate: linear-gradient(180deg, #a3242b, #7a1217 55%, #4a090d);
  --t-plate-ink: #fff8e8;
  --t-tray: rgba(8, 10, 18, 0.8);
  --t-chip: rgba(10, 7, 12, 0.75);
  --t-chip-line: rgba(241, 207, 114, 0.4);
  --t-chip-ink: #e8dcc0;
  --t-icon: #f1cf72;
}
.th-encre {
  --t-field: linear-gradient(180deg, #f3eee2, #e6dfcd);
  --t-pattern: radial-gradient(circle, rgba(20, 18, 16, 0.13) 1.1px, transparent 1.4px) 0 0 / 7px 7px;
  --t-mat: #faf7ef;
  --t-mat-line: #151311;
  --t-mat-bw: 3px;
  --t-mat-r: 2px;
  --t-mat-inner: inset 0 0 0 5px #faf7ef, inset 0 0 0 6.5px #151311;
  --t-edge: repeating-linear-gradient(90deg, #151311 0 14px, transparent 14px 20px), #e6dfcd;
  --t-rim: linear-gradient(145deg, #2a2724, #151311);
  --t-body: #f7f3e8;
  --t-ribbon: linear-gradient(180deg, #232120, #0d0c0b);
  --t-ribbon-ink: #fff;
  --t-paper: radial-gradient(circle, rgba(0, 0, 0, 0.08) 0.6cqw, transparent 0.75cqw) 0 0 / 3cqw 3cqw, #fffdf6;
  --t-ink: #151311;
  --t-kwc: #151311;
  --t-tag: #151311;
  --t-tag-ink: #fff;
  --t-tag-line: #151311;
  --t-title: "Shippori Mincho", serif;
  --t-card-r: 2cqw;
  --t-art-r: 1.5cqw;
  --t-glow: rgba(0, 0, 0, 0.5);
  --t-face-r: 6%;
  --t-plate: #151311;
  --t-plate-ink: #fff;
  --t-tray: rgba(21, 19, 17, 0.88);
  --t-chip: #151311;
  --t-chip-line: #faf7ef;
  --t-chip-ink: #faf7ef;
  --t-icon: #faf7ef;
}
.th-shojo {
  --t-field: radial-gradient(70% 60% at 30% 30%, #ffe3ef, transparent 70%), radial-gradient(60% 60% at 80% 70%, #e6dcff, transparent 70%), linear-gradient(160deg, #ffd6e8, #e8d8ff);
  --t-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M20 14c1 5 3 7 8 8-5 1-7 3-8 8-1-5-3-7-8-8 5-1 7-3 8-8zM60 52c.6 3 2 4.4 5 5-3 .6-4.4 2-5 5-.6-3-2-4.4-5-5 3-.6 4.4-2 5-5z' fill='%23ffffff' fill-opacity='.7'/%3E%3C/svg%3E");
  --t-mat: rgba(255, 255, 255, 0.55);
  --t-mat-line: #fff;
  --t-mat-bw: 3px;
  --t-mat-r: 26px;
  --t-mat-inner: inset 0 0 0 6px rgba(255, 158, 196, 0.35), inset 0 0 40px rgba(255, 180, 210, 0.45);
  --t-edge: repeating-radial-gradient(circle at 12px 0, #fff 0 9px, transparent 10px) 0 0 / 24px 100%, linear-gradient(#ffb3cf, #ff9ec4);
  --t-rim: linear-gradient(145deg, #fff, #ffd1e3 30%, #ff9ec4 55%, #fff 75%, #f5b7d0);
  --t-body: linear-gradient(170deg, #fff0f6, #f3e6ff);
  --t-ribbon: linear-gradient(180deg, #ffa8cb, #ff7aa8);
  --t-ribbon-ink: #fff;
  --t-paper: radial-gradient(120% 90% at 50% 40%, #fff, #fff4f9);
  --t-ink: #6a2a4a;
  --t-kwc: #e0508a;
  --t-tag: linear-gradient(180deg, #ffb3cf, #ff8fb8);
  --t-tag-ink: #fff;
  --t-tag-line: #fff;
  --t-title: "Kalam", cursive;
  --t-card-r: 9cqw;
  --t-art-r: 36cqw 36cqw 10cqw 10cqw;
  --t-glow: rgba(255, 140, 190, 0.8);
  --t-face-r: 50%;
  --t-plate: linear-gradient(180deg, #ffa8cb, #ff7aa8);
  --t-plate-ink: #fff;
  --t-tray: rgba(122, 52, 92, 0.75);
  --t-chip: rgba(255, 255, 255, 0.8);
  --t-chip-line: #ff9ec4;
  --t-chip-ink: #8a2a5a;
  --t-icon: #e0508a;
}
.th-nekketsu {
  --t-field: repeating-conic-gradient(from 0deg at 50% 120%, #ffcf3a 0 4deg, #ffb21a 4deg 9deg), #ffb21a;
  --t-pattern: radial-gradient(circle, rgba(200, 30, 20, 0.22) 1.6px, transparent 2px) 0 0 / 9px 9px;
  --t-mat: #fff6dc;
  --t-mat-line: #111;
  --t-mat-bw: 5px;
  --t-mat-r: 0;
  --t-mat-inner: inset 0 0 0 4px #ff3b30, 6px 6px 0 #111;
  --t-edge: repeating-linear-gradient(-55deg, #111 0 10px, #ffd400 10px 20px);
  --t-rim: linear-gradient(145deg, #111, #2a2a2a);
  --t-body: linear-gradient(170deg, #ff4b2b, #c4101f 70%);
  --t-ribbon: linear-gradient(180deg, #ffe14a, #ffc21a);
  --t-ribbon-ink: #111;
  --t-paper: #fffaf0;
  --t-ink: #111;
  --t-kwc: #c4101f;
  --t-tag: #111;
  --t-tag-ink: #ffd400;
  --t-tag-line: #ffd400;
  --t-title: "Dela Gothic One", sans-serif;
  --t-card-r: 2cqw;
  --t-art-r: 2cqw;
  --t-glow: rgba(255, 212, 0, 0.9);
  --t-face-r: 8%;
  --t-plate: linear-gradient(180deg, #ffe14a, #ffc21a);
  --t-plate-ink: #111;
  --t-tray: rgba(17, 17, 17, 0.88);
  --t-chip: #111;
  --t-chip-line: #ffd400;
  --t-chip-ink: #fff;
  --t-icon: #ffd400;
}
.th-prairie {
  --t-field: radial-gradient(70% 80% at 50% 45%, #b5e48a, #8ccf62 55%, #5ba845);
  --t-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Cpath d='M8 40c0-6 2-10 4-14M14 40c0-4 2-7 4-9M40 40c0-6-2-10-4-14M46 40c0-4-1-7-3-9' stroke='%23366e2a' stroke-opacity='.25' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  --t-mat: linear-gradient(180deg, rgba(238, 224, 180, 0.9), rgba(214, 196, 146, 0.9));
  --t-mat-line: #7a5233;
  --t-mat-bw: 4px;
  --t-mat-r: 18px;
  --t-mat-inner: inset 0 0 0 3px rgba(255, 255, 255, 0.4), inset 0 0 30px rgba(122, 82, 51, 0.25);
  --t-edge: linear-gradient(180deg, #8a6038, #6a4628);
  --t-rim: linear-gradient(145deg, #c8955c, #8a6038 45%, #b98450 70%, #5e3d20);
  --t-body: linear-gradient(170deg, #7cc35a, #3f8f3a 80%);
  --t-ribbon: linear-gradient(180deg, #fff6d8, #efdcaa);
  --t-ribbon-ink: #3f5a20;
  --t-paper: #fffbea;
  --t-ink: #2f4220;
  --t-kwc: #3f8f3a;
  --t-tag: linear-gradient(180deg, #8a6038, #6a4628);
  --t-tag-ink: #fff6d8;
  --t-tag-line: #c8955c;
  --t-title: "Kalam", cursive;
  --t-card-r: 8cqw;
  --t-art-r: 10cqw;
  --t-glow: rgba(255, 240, 150, 0.85);
  --t-face-r: 22%;
  --t-plate: linear-gradient(180deg, #fff6d8, #efdcaa);
  --t-plate-ink: #3f5a20;
  --t-tray: rgba(36, 60, 26, 0.8);
  --t-chip: rgba(255, 251, 234, 0.9);
  --t-chip-line: #8a6038;
  --t-chip-ink: #3f5a20;
  --t-icon: #3f8f3a;
}
.th-ninja {
  --t-field: radial-gradient(80% 70% at 50% 40%, #3a4250, #1b2029 80%);
  --t-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cpath d='M0 30h120M60 0v30M0 60h0M30 30v30M90 30v30' stroke='%23000' stroke-opacity='.18' stroke-width='2'/%3E%3C/svg%3E");
  --t-mat: repeating-linear-gradient(90deg, #5a4030 0 46px, #4c3628 46px 48px), #5a4030;
  --t-mat-line: #b22a22;
  --t-mat-bw: 3px;
  --t-mat-r: 4px;
  --t-mat-inner: inset 0 0 0 6px rgba(0, 0, 0, 0.25), inset 0 0 50px rgba(0, 0, 0, 0.45);
  --t-edge: repeating-linear-gradient(90deg, #b22a22 0 18px, #8a1a14 18px 22px);
  --t-rim: linear-gradient(145deg, #8a929b, #4a5058 40%, #9aa3ad 70%, #2a2e33);
  --t-body: linear-gradient(170deg, #3a4250, #1b2029 80%);
  --t-ribbon: linear-gradient(180deg, #c23a2a, #8a1a14);
  --t-ribbon-ink: #fff;
  --t-paper: radial-gradient(120% 90% at 50% 45%, #f4e8c8, #e8d6a8);
  --t-ink: #2a2014;
  --t-kwc: #8a1a14;
  --t-tag: #1b2029;
  --t-tag-ink: #e8d6a8;
  --t-tag-line: #b22a22;
  --t-title: "Shippori Mincho", serif;
  --t-card-r: 4cqw;
  --t-art-r: 3cqw;
  --t-glow: rgba(255, 90, 70, 0.75);
  --t-face-r: 14% 14% 14% 14% / 10%;
  --t-plate: linear-gradient(180deg, #c23a2a, #8a1a14);
  --t-plate-ink: #fff;
  --t-tray: rgba(16, 20, 26, 0.85);
  --t-chip: rgba(16, 20, 26, 0.85);
  --t-chip-line: #b22a22;
  --t-chip-ink: #e8d6a8;
  --t-icon: #e8d6a8;
}
.th-pirate {
  --t-field: radial-gradient(70% 60% at 50% 50%, #2b6f9a, #123a5a 80%);
  --t-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='30'%3E%3Cpath d='M0 20c10-8 20-8 30 0s20 8 30 0 20-8 20-8' stroke='%23e6f6ff' stroke-opacity='.12' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  --t-mat: repeating-linear-gradient(0deg, #8a6038 0 30px, #6e4a2a 30px 32px), #8a6038;
  --t-mat-line: #c9a05a;
  --t-mat-bw: 4px;
  --t-mat-r: 10px;
  --t-mat-inner: inset 0 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 40px rgba(40, 20, 0, 0.5);
  --t-edge: repeating-linear-gradient(60deg, #c79e62 0 8px, #8a6a3a 8px 12px);
  --t-rim: linear-gradient(145deg, #f0d08a, #c9a05a 30%, #8a6410 60%, #e0b870);
  --t-body: linear-gradient(170deg, #1d4a6e, #0e2a40 80%);
  --t-ribbon: linear-gradient(180deg, #1d4a6e, #0e2a40);
  --t-ribbon-ink: #f0d08a;
  --t-paper: radial-gradient(120% 90% at 50% 45%, #f6e6c0, #e2c88e);
  --t-ink: #3a2410;
  --t-kwc: #7a2a20;
  --t-tag: linear-gradient(180deg, #6e4a2a, #4a3018);
  --t-tag-ink: #f0d08a;
  --t-tag-line: #c9a05a;
  --t-title: "Shippori Mincho", serif;
  --t-card-r: 6cqw;
  --t-art-r: 6cqw;
  --t-glow: rgba(240, 208, 138, 0.8);
  --t-face-r: 50%;
  --t-plate: linear-gradient(180deg, #1d4a6e, #0e2a40);
  --t-plate-ink: #f0d08a;
  --t-tray: rgba(10, 30, 46, 0.85);
  --t-chip: rgba(10, 30, 46, 0.85);
  --t-chip-line: #c9a05a;
  --t-chip-ink: #f0d08a;
  --t-icon: #f0d08a;
}
.th-aura {
  --t-field: radial-gradient(80% 60% at 50% 120%, #ffb347, transparent 70%), linear-gradient(180deg, #3a2a6a, #7a3a4a 45%, #b05a2a);
  --t-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cpath d='M10 70l30-10 20 20 30-30 40 10M60 140l10-40 30-10M0 20l40 10 10-30' stroke='%23200a00' stroke-opacity='.22' stroke-width='3' fill='none'/%3E%3C/svg%3E");
  --t-mat: radial-gradient(70% 70% at 50% 50%, rgba(140, 100, 70, 0.85), rgba(90, 62, 44, 0.9));
  --t-mat-line: #ffd34a;
  --t-mat-bw: 3px;
  --t-mat-r: 30px 8px 30px 8px;
  --t-mat-inner: 0 0 24px rgba(255, 211, 74, 0.55), inset 0 0 40px rgba(40, 20, 0, 0.6);
  --t-edge: linear-gradient(90deg, transparent, #ffd34a 20%, #fff2a8 50%, #ffd34a 80%, transparent);
  --t-rim: linear-gradient(145deg, #fff2a8, #ffb347 35%, #e8590c 65%, #ffd34a);
  --t-body: linear-gradient(170deg, #2a4a9a, #12245a 80%);
  --t-ribbon: linear-gradient(180deg, #ff8a2a, #e8590c);
  --t-ribbon-ink: #fff;
  --t-paper: radial-gradient(120% 90% at 50% 45%, #fffbe8, #ffe9b0);
  --t-ink: #2a1a08;
  --t-kwc: #e8590c;
  --t-tag: linear-gradient(180deg, #12245a, #081236);
  --t-tag-ink: #ffd34a;
  --t-tag-line: #ffb347;
  --t-title: "Dela Gothic One", sans-serif;
  --t-card-r: 5cqw;
  --t-art-r: 5cqw;
  --t-glow: rgba(255, 211, 74, 0.95);
  --t-face-r: 30%;
  --t-plate: linear-gradient(180deg, #ff8a2a, #e8590c);
  --t-plate-ink: #fff;
  --t-tray: rgba(18, 36, 90, 0.85);
  --t-chip: rgba(18, 36, 90, 0.85);
  --t-chip-line: #ffb347;
  --t-chip-ink: #fff2a8;
  --t-icon: #ffd34a;
}
.th-neon {
  --t-field: radial-gradient(80% 60% at 50% 50%, #18204a, #070a1a 80%);
  --t-pattern: linear-gradient(rgba(56, 232, 255, 0.09) 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(90deg, rgba(56, 232, 255, 0.09) 1px, transparent 1px) 0 0 / 34px 34px;
  --t-mat: linear-gradient(180deg, rgba(12, 18, 44, 0.85), rgba(8, 10, 28, 0.9));
  --t-mat-line: #38e8ff;
  --t-mat-bw: 2px;
  --t-mat-r: 0;
  --t-mat-inner: 0 0 18px rgba(56, 232, 255, 0.55), inset 0 0 30px rgba(56, 232, 255, 0.15);
  --t-edge: linear-gradient(90deg, #ff4fd8, #38e8ff);
  --t-rim: linear-gradient(145deg, #e8fbff, #38e8ff 30%, #2a3a6a 55%, #ff4fd8 85%);
  --t-body: linear-gradient(170deg, #1a2350, #0a0e24 80%);
  --t-ribbon: linear-gradient(90deg, #ff4fd8, #8a3aff);
  --t-ribbon-ink: #fff;
  --t-paper: linear-gradient(180deg, #e8faff, #c8eeff);
  --t-ink: #0a1430;
  --t-kwc: #b02ad0;
  --t-tag: #0a0e24;
  --t-tag-ink: #38e8ff;
  --t-tag-line: #38e8ff;
  --t-title: "Zen Kaku Gothic New", sans-serif;
  --t-card-r: 1cqw;
  --t-art-r: 0;
  --t-glow: rgba(56, 232, 255, 0.95);
  --t-face-r: 4%;
  --t-plate: linear-gradient(90deg, #ff4fd8, #8a3aff);
  --t-plate-ink: #fff;
  --t-tray: rgba(8, 10, 28, 0.88);
  --t-chip: rgba(8, 10, 28, 0.88);
  --t-chip-line: #38e8ff;
  --t-chip-ink: #c8f6ff;
  --t-icon: #38e8ff;
}
.th-tenebres {
  --t-field: radial-gradient(60% 50% at 80% 20%, rgba(200, 180, 220, 0.18), transparent 70%), linear-gradient(180deg, #1c1226, #0a060e);
  --t-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M45 10c4 10 10 14 20 16-10 2-16 8-20 18-4-10-10-16-20-18 10-2 16-6 20-16z' fill='%23a080c0' fill-opacity='.06'/%3E%3C/svg%3E");
  --t-mat: linear-gradient(180deg, rgba(36, 24, 46, 0.88), rgba(18, 12, 24, 0.92));
  --t-mat-line: #6a6070;
  --t-mat-bw: 3px;
  --t-mat-r: 40px 40px 4px 4px;
  --t-mat-inner: inset 0 0 0 5px rgba(0, 0, 0, 0.3), inset 0 0 0 6px rgba(176, 16, 42, 0.45), inset 0 0 60px rgba(0, 0, 0, 0.7);
  --t-edge: linear-gradient(180deg, #4a0a18, #1a0208);
  --t-rim: linear-gradient(145deg, #c8c0d0, #6a6070 40%, #2a2430 70%, #9a90a3);
  --t-body: linear-gradient(170deg, #3a1a4a, #140a1a 80%);
  --t-ribbon: linear-gradient(180deg, #8a0a22, #4a0412);
  --t-ribbon-ink: #f4e9d8;
  --t-paper: radial-gradient(120% 90% at 50% 45%, #efe6d8, #d6c8b0);
  --t-ink: #24101a;
  --t-kwc: #8a0a22;
  --t-tag: linear-gradient(180deg, #2a2430, #120c16);
  --t-tag-ink: #d8c8e0;
  --t-tag-line: #6a6070;
  --t-title: "Shippori Mincho", serif;
  --t-card-r: 4cqw;
  --t-art-r: 50% 50% 4cqw 4cqw / 30% 30% 4cqw 4cqw;
  --t-glow: rgba(176, 16, 42, 0.85);
  --t-face-r: 50% 50% 8% 8% / 34% 34% 8% 8%;
  --t-plate: linear-gradient(180deg, #8a0a22, #4a0412);
  --t-plate-ink: #f4e9d8;
  --t-tray: rgba(18, 10, 24, 0.88);
  --t-chip: rgba(18, 10, 24, 0.88);
  --t-chip-line: #6a6070;
  --t-chip-ink: #d8c8e0;
  --t-icon: #c8c0d0;
}
.th-isekai {
  --t-field: radial-gradient(60% 50% at 30% 30%, rgba(143, 216, 255, 0.18), transparent 70%), linear-gradient(180deg, #121a4a, #0a0e2a);
  --t-pattern: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0.8px, transparent 1.2px) 0 0 / 46px 46px, radial-gradient(circle, rgba(200, 230, 255, 0.35) 0.6px, transparent 1px) 23px 17px / 37px 37px;
  --t-mat: radial-gradient(80% 90% at 50% 50%, rgba(40, 60, 140, 0.55), rgba(16, 22, 60, 0.85));
  --t-mat-line: #8fd8ff;
  --t-mat-bw: 2px;
  --t-mat-r: 50px;
  --t-mat-inner: 0 0 22px rgba(143, 216, 255, 0.55), inset 0 0 0 6px rgba(143, 216, 255, 0.12), inset 0 0 50px rgba(143, 216, 255, 0.2);
  --t-edge: linear-gradient(90deg, transparent, #8fd8ff 30%, #d8b4ff 70%, transparent);
  --t-rim: linear-gradient(145deg, #ffffff, #c9e4ff 25%, #7a9ad8 55%, #d8b4ff 85%);
  --t-body: linear-gradient(170deg, #233a8a, #0e1640 80%);
  --t-ribbon: linear-gradient(180deg, #6a7ad8, #3a3a9a);
  --t-ribbon-ink: #fff;
  --t-paper: radial-gradient(120% 90% at 50% 45%, #f6f8ff, #dde6ff);
  --t-ink: #141a40;
  --t-kwc: #5a3ad0;
  --t-tag: linear-gradient(180deg, #233a8a, #0e1640);
  --t-tag-ink: #c9e4ff;
  --t-tag-line: #8fd8ff;
  --t-title: "Shippori Mincho", serif;
  --t-card-r: 7cqw;
  --t-art-r: 50% 50% 8cqw 8cqw / 36% 36% 8cqw 8cqw;
  --t-glow: rgba(143, 216, 255, 0.9);
  --t-face-r: 50%;
  --t-plate: linear-gradient(180deg, #6a7ad8, #3a3a9a);
  --t-plate-ink: #fff;
  --t-tray: rgba(14, 22, 64, 0.85);
  --t-chip: rgba(14, 22, 64, 0.85);
  --t-chip-line: #8fd8ff;
  --t-chip-ink: #e0f0ff;
  --t-icon: #8fd8ff;
}

/* ================= Terrains des protagonistes (HERO_THEMES) : clairs, dans l'esprit de leur manga ================= */
.th-soleil {
  --t-field: radial-gradient(60% 50% at 80% 20%, #fff6c0, transparent 60%), linear-gradient(180deg, #7fe0ef, #34b4d6 70%, #2a98c4);
  --t-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='30'%3E%3Cpath d='M0 20c10-8 20-8 30 0s20 8 30 0 20-8 20-8' stroke='%23ffffff' stroke-opacity='.3' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  --t-mat: repeating-linear-gradient(90deg, #e8c27e 0 46px, #d4a862 46px 48px), #e8c27e;
  --t-mat-line: #fff;
  --t-mat-bw: 4px;
  --t-mat-r: 12px;
  --t-mat-inner: inset 0 0 0 5px rgba(232, 53, 43, 0.5), inset 0 0 30px rgba(140, 80, 20, 0.35);
  --t-edge: repeating-linear-gradient(90deg, #e8352b 0 18px, #fff 18px 36px);
  --t-rim: linear-gradient(145deg, #fff6c0, #ffd23f 30%, #e8a020 60%, #fff0a0);
  --t-body: linear-gradient(170deg, #e8352b, #b0201a 80%);
  --t-ribbon: linear-gradient(180deg, #ffd23f, #e8a020);
  --t-ribbon-ink: #5a2a0a;
  --t-paper: radial-gradient(120% 90% at 50% 45%, #fffaf0, #fbe8c0);
  --t-ink: #4a2a10;
  --t-kwc: #c0281e;
  --t-tag: linear-gradient(180deg, #e8352b, #b0201a);
  --t-tag-ink: #fff6c0;
  --t-tag-line: #ffd23f;
  --t-title: "Dela Gothic One", sans-serif;
  --t-card-r: 7cqw;
  --t-art-r: 6cqw;
  --t-glow: rgba(255, 210, 63, 0.85);
  --t-face-r: 50%;
  --t-plate: linear-gradient(180deg, #e8352b, #b0201a);
  --t-plate-ink: #fff6c0;
  --t-tray: rgba(20, 70, 110, 0.7);
  --t-chip: rgba(255, 255, 255, 0.85);
  --t-chip-line: #e8352b;
  --t-chip-ink: #7a1a10;
  --t-icon: #e8352b;
}
.th-glycine {
  --t-field: radial-gradient(70% 60% at 20% 10%, #efe4ff, transparent 70%), linear-gradient(170deg, #f7f1e3, #e8e0f4);
  --t-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 0h24v24H0zM24 24h24v24H24z' fill='%234a7a5a' fill-opacity='.07'/%3E%3C/svg%3E");
  --t-mat: repeating-linear-gradient(90deg, #ece2b8 0 60px, #dccf9c 60px 62px), #ece2b8;
  --t-mat-line: #4a7a5a;
  --t-mat-bw: 4px;
  --t-mat-r: 4px;
  --t-mat-inner: inset 0 0 0 5px rgba(27, 27, 27, 0.75), inset 0 0 0 7px #b48ae6, inset 0 0 30px rgba(120, 100, 40, 0.25);
  --t-edge: radial-gradient(circle at 50% 100%, transparent 7px, #3a8fd0 8px 10px, transparent 11px) 0 0 / 22px 100%, linear-gradient(#8ac4ee, #5aa4dc);
  --t-rim: linear-gradient(145deg, #f2efe6, #4a7a5a 30%, #1b1b1b 55%, #4a7a5a 80%, #c9a8f0);
  --t-body: linear-gradient(170deg, #f3ecfa, #e2d6f2 80%);
  --t-ribbon: linear-gradient(180deg, #4a7a5a, #2f5a3e);
  --t-ribbon-ink: #fff;
  --t-paper: radial-gradient(120% 90% at 50% 45%, #fffdf6, #f3ecd8);
  --t-ink: #2a2440;
  --t-kwc: #6a3ab0;
  --t-tag: linear-gradient(180deg, #4a7a5a, #2f5a3e);
  --t-tag-ink: #fff;
  --t-tag-line: #b48ae6;
  --t-title: "Shippori Mincho", serif;
  --t-card-r: 4cqw;
  --t-art-r: 3cqw;
  --t-glow: rgba(180, 138, 230, 0.85);
  --t-face-r: 14%;
  --t-plate: linear-gradient(180deg, #4a7a5a, #2f5a3e);
  --t-plate-ink: #fff;
  --t-tray: rgba(60, 40, 90, 0.7);
  --t-chip: rgba(255, 255, 255, 0.85);
  --t-chip-line: #b48ae6;
  --t-chip-ink: #3a2a5a;
  --t-icon: #6a3ab0;
}
.th-crepuscule {
  --t-field: linear-gradient(180deg, #ffcf9e 0%, #ffaa9a 40%, #c8a8e0 75%, #8ab0e0);
  --t-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Ccircle cx='20' cy='20' r='1.6' fill='%23ffffff' fill-opacity='.7'/%3E%3Ccircle cx='66' cy='58' r='1.2' fill='%23ffffff' fill-opacity='.6'/%3E%3C/svg%3E");
  --t-mat: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 240, 230, 0.35));
  --t-mat-line: #fff;
  --t-mat-bw: 2px;
  --t-mat-r: 18px;
  --t-mat-inner: inset 0 0 0 5px rgba(255, 160, 130, 0.3), inset 0 0 40px rgba(255, 200, 170, 0.4);
  --t-edge: linear-gradient(180deg, #8a8a9a 0 30%, #c8c0b8 30% 50%, #8a8a9a 50% 70%, #6a6a7a 70%);
  --t-rim: linear-gradient(145deg, #fff, #ffd0b0 30%, #c8a8e0 60%, #fff 85%);
  --t-body: linear-gradient(170deg, #fff2ea, #ece4f6 80%);
  --t-ribbon: linear-gradient(180deg, #ff9a7a, #e0707a);
  --t-ribbon-ink: #fff;
  --t-paper: radial-gradient(120% 90% at 50% 40%, #fff, #fff6f0);
  --t-ink: #3a2a4a;
  --t-kwc: #c0506a;
  --t-tag: linear-gradient(180deg, #8a7ab8, #6a5a98);
  --t-tag-ink: #fff;
  --t-tag-line: #ffd0b0;
  --t-title: "Zen Kaku Gothic New", sans-serif;
  --t-card-r: 8cqw;
  --t-art-r: 6cqw;
  --t-glow: rgba(255, 170, 140, 0.85);
  --t-face-r: 50%;
  --t-plate: linear-gradient(180deg, #8a7ab8, #6a5a98);
  --t-plate-ink: #fff;
  --t-tray: rgba(90, 60, 110, 0.7);
  --t-chip: rgba(255, 255, 255, 0.85);
  --t-chip-line: #ff9a7a;
  --t-chip-ink: #5a2a4a;
  --t-icon: #c0506a;
}
.th-manoir {
  --t-field: radial-gradient(70% 60% at 50% 40%, #f2f8ff, #cfe2f4 80%);
  --t-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 8c6 10 6 14 0 22-6-8-6-12 0-22zM30 52c-6-10-6-14 0-22 6 8 6 12 0 22zM8 30c10-6 14-6 22 0-8 6-12 6-22 0zM52 30c-10 6-14 6-22 0 8-6 12-6 22 0z' fill='%235a8ac8' fill-opacity='.09'/%3E%3C/svg%3E");
  --t-mat: rgba(255, 255, 255, 0.72);
  --t-mat-line: #8ab4dc;
  --t-mat-bw: 3px;
  --t-mat-r: 16px;
  --t-mat-inner: inset 0 0 0 6px rgba(255, 255, 255, 0.9), inset 0 0 0 8px rgba(90, 138, 200, 0.4), inset 0 0 40px rgba(140, 180, 220, 0.35);
  --t-edge: radial-gradient(circle at 10px 100%, #fff 0 8px, transparent 9px) 0 0 / 20px 100%, linear-gradient(#5a8ac8, #3a6aa8);
  --t-rim: linear-gradient(145deg, #fff, #cfe2f4 30%, #5a8ac8 55%, #fff 80%);
  --t-body: linear-gradient(170deg, #ffffff, #e2eef8 80%);
  --t-ribbon: linear-gradient(180deg, #5a8ac8, #3a6aa8);
  --t-ribbon-ink: #fff;
  --t-paper: radial-gradient(120% 90% at 50% 40%, #fff, #f2f8ff);
  --t-ink: #1e3a5a;
  --t-kwc: #3a6aa8;
  --t-tag: linear-gradient(180deg, #5a8ac8, #3a6aa8);
  --t-tag-ink: #fff;
  --t-tag-line: #fff;
  --t-title: "Shippori Mincho", serif;
  --t-card-r: 8cqw;
  --t-art-r: 36cqw 36cqw 8cqw 8cqw;
  --t-glow: rgba(140, 190, 240, 0.9);
  --t-face-r: 50%;
  --t-plate: linear-gradient(180deg, #5a8ac8, #3a6aa8);
  --t-plate-ink: #fff;
  --t-tray: rgba(30, 58, 90, 0.7);
  --t-chip: rgba(255, 255, 255, 0.88);
  --t-chip-line: #8ab4dc;
  --t-chip-ink: #1e3a5a;
  --t-icon: #3a6aa8;
}
.th-carnet {
  --t-field: linear-gradient(170deg, #f4f4f2, #e2e2e0);
  --t-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 23.5h24M23.5 0v24' stroke='%23000000' stroke-opacity='.06'/%3E%3C/svg%3E");
  --t-mat: linear-gradient(90deg, transparent 54px, #e0262e 54px 56px, transparent 56px), repeating-linear-gradient(180deg, #fff 0 25px, #b8cce0 25px 26px);
  --t-mat-line: #1d1d1f;
  --t-mat-bw: 3px;
  --t-mat-r: 2px;
  --t-mat-inner: inset 0 0 30px rgba(0, 0, 0, 0.06);
  --t-edge: radial-gradient(circle at 50% 50%, #f4f4f2 0 4px, #1d1d1f 5px 7px, transparent 8px) 0 0 / 22px 100%, #e2e2e0;
  --t-rim: linear-gradient(145deg, #fff, #8a8a8e 30%, #1d1d1f 55%, #8a8a8e 80%, #fff);
  --t-body: linear-gradient(170deg, #ffffff, #ececea 80%);
  --t-ribbon: linear-gradient(180deg, #2a2a2e, #1d1d1f);
  --t-ribbon-ink: #fff;
  --t-paper: repeating-linear-gradient(180deg, #fff 0 7cqw, #dfe8f2 7cqw calc(7cqw + 1px));
  --t-ink: #1d1d1f;
  --t-kwc: #c0181e;
  --t-tag: linear-gradient(180deg, #2a2a2e, #1d1d1f);
  --t-tag-ink: #fff;
  --t-tag-line: #e0262e;
  --t-title: "Shippori Mincho", serif;
  --t-card-r: 2cqw;
  --t-art-r: 1cqw;
  --t-glow: rgba(224, 38, 46, 0.7);
  --t-face-r: 6%;
  --t-plate: linear-gradient(180deg, #2a2a2e, #1d1d1f);
  --t-plate-ink: #fff;
  --t-tray: rgba(29, 29, 31, 0.75);
  --t-chip: rgba(255, 255, 255, 0.9);
  --t-chip-line: #1d1d1f;
  --t-chip-ink: #1d1d1f;
  --t-icon: #c0181e;
}
.th-corbeaux {
  --t-field: linear-gradient(180deg, #ffd6a0 0%, #f6a070 40%, #d8706a 75%, #a85a72);
  --t-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cpath d='M0 50c20-6 40-6 60 0s40 6 60 0' stroke='%23ffffff' stroke-opacity='.15' stroke-width='3' fill='none'/%3E%3C/svg%3E");
  --t-mat: linear-gradient(180deg, rgba(255, 236, 214, 0.78), rgba(244, 214, 190, 0.7));
  --t-mat-line: #3a1a24;
  --t-mat-bw: 3px;
  --t-mat-r: 4px;
  --t-mat-inner: inset 0 0 0 5px rgba(232, 53, 43, 0.35), inset 0 0 40px rgba(160, 60, 50, 0.25);
  --t-edge: linear-gradient(180deg, #3a1a24, #5a2a34);
  --t-rim: linear-gradient(145deg, #ffd6a0, #e8352b 35%, #3a1a24 60%, #e8352b 85%);
  --t-body: linear-gradient(170deg, #fff0e2, #f4d6c6 80%);
  --t-ribbon: linear-gradient(180deg, #3a1a24, #24101a);
  --t-ribbon-ink: #ffd6a0;
  --t-paper: radial-gradient(120% 90% at 50% 40%, #fffaf2, #fbe6d2);
  --t-ink: #3a1a24;
  --t-kwc: #b8201a;
  --t-tag: linear-gradient(180deg, #3a1a24, #24101a);
  --t-tag-ink: #ffd6a0;
  --t-tag-line: #e8352b;
  --t-title: "Shippori Mincho", serif;
  --t-card-r: 4cqw;
  --t-art-r: 3cqw;
  --t-glow: rgba(232, 53, 43, 0.8);
  --t-face-r: 50%;
  --t-plate: linear-gradient(180deg, #3a1a24, #24101a);
  --t-plate-ink: #ffd6a0;
  --t-tray: rgba(58, 26, 36, 0.75);
  --t-chip: rgba(255, 246, 236, 0.88);
  --t-chip-line: #e8352b;
  --t-chip-ink: #3a1a24;
  --t-icon: #b8201a;
}
.th-cite {
  --t-field: linear-gradient(170deg, #f2efec, #dcd8d6);
  --t-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 40h80M40 0v80' stroke='%23c22a2a' stroke-opacity='.06' stroke-width='2'/%3E%3C/svg%3E");
  --t-mat: rgba(255, 255, 255, 0.8);
  --t-mat-line: #c22a2a;
  --t-mat-bw: 3px;
  --t-mat-r: 0;
  --t-mat-inner: inset 0 0 0 6px #fff, inset 0 0 0 7px rgba(34, 34, 40, 0.3), inset 0 0 30px rgba(0, 0, 0, 0.05);
  --t-edge: repeating-linear-gradient(90deg, #b0b0b8 0 14px, transparent 14px 16px, #8a8a90 16px 26px, transparent 26px 28px), #e8e4e2;
  --t-rim: linear-gradient(145deg, #fff, #e0453a 30%, #8a1a1a 60%, #e0453a 85%);
  --t-body: linear-gradient(170deg, #ffffff, #ebe7e4 80%);
  --t-ribbon: linear-gradient(180deg, #d0302a, #9a1a1a);
  --t-ribbon-ink: #fff;
  --t-paper: radial-gradient(120% 90% at 50% 40%, #fff, #f6f3f0);
  --t-ink: #222228;
  --t-kwc: #c22a2a;
  --t-tag: linear-gradient(180deg, #2a2a30, #18181c);
  --t-tag-ink: #fff;
  --t-tag-line: #c22a2a;
  --t-title: "Zen Kaku Gothic New", sans-serif;
  --t-card-r: 2cqw;
  --t-art-r: 1.5cqw;
  --t-glow: rgba(224, 69, 58, 0.8);
  --t-face-r: 8%;
  --t-plate: linear-gradient(180deg, #d0302a, #9a1a1a);
  --t-plate-ink: #fff;
  --t-tray: rgba(34, 34, 40, 0.72);
  --t-chip: rgba(255, 255, 255, 0.9);
  --t-chip-line: #c22a2a;
  --t-chip-ink: #222228;
  --t-icon: #c22a2a;
}
.th-remparts {
  --t-field: radial-gradient(50% 40% at 70% 20%, #ffffff, transparent 70%), linear-gradient(180deg, #a8d8f4, #d8eef8 60%, #e8e0c8);
  --t-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60'%3E%3Cpath d='M20 40c8-14 30-14 36-2 10-6 24 0 22 10H18c-6 0-6-8 2-8z' fill='%23ffffff' fill-opacity='.45'/%3E%3C/svg%3E");
  --t-mat: linear-gradient(0deg, rgba(168, 152, 120, 0.25) 2px, transparent 2px) 0 0 / 100% 34px, linear-gradient(90deg, rgba(168, 152, 120, 0.25) 2px, transparent 2px) 0 0 / 68px 34px, #e6dcc2;
  --t-mat-line: #a89878;
  --t-mat-bw: 4px;
  --t-mat-r: 2px;
  --t-mat-inner: inset 0 0 0 5px rgba(58, 90, 60, 0.45), inset 0 0 30px rgba(120, 100, 60, 0.3);
  --t-edge: linear-gradient(90deg, #d8c8a8 0 70%, transparent 70%) 0 0 / 28px 50% repeat-x, linear-gradient(#d8c8a8, #b8a888) 0 100% / 100% 50% no-repeat;
  --t-rim: linear-gradient(145deg, #efe4c8, #a89878 30%, #3a5a3c 60%, #a89878 85%);
  --t-body: linear-gradient(170deg, #f4eedc, #e2d8bc 80%);
  --t-ribbon: linear-gradient(180deg, #3a5a3c, #2a422c);
  --t-ribbon-ink: #f4eedc;
  --t-paper: radial-gradient(120% 90% at 50% 40%, #fffcf2, #f0e8d2);
  --t-ink: #2a2a1e;
  --t-kwc: #3a5a3c;
  --t-tag: linear-gradient(180deg, #5a4a34, #3a3022);
  --t-tag-ink: #f4eedc;
  --t-tag-line: #a89878;
  --t-title: "Shippori Mincho", serif;
  --t-card-r: 3cqw;
  --t-art-r: 2cqw;
  --t-glow: rgba(120, 180, 230, 0.85);
  --t-face-r: 10%;
  --t-plate: linear-gradient(180deg, #3a5a3c, #2a422c);
  --t-plate-ink: #f4eedc;
  --t-tray: rgba(42, 66, 44, 0.72);
  --t-chip: rgba(255, 252, 242, 0.88);
  --t-chip-line: #a89878;
  --t-chip-ink: #2a2a1e;
  --t-icon: #3a5a3c;
}
.th-alchimie {
  --t-field: radial-gradient(70% 60% at 50% 40%, #f8ecd0, #e6d0a0 85%);
  --t-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='60' cy='60' r='40' fill='none' stroke='%23a8322a' stroke-opacity='.08' stroke-width='2'/%3E%3Cpath d='M60 20 95 80H25z' fill='none' stroke='%23a8322a' stroke-opacity='.08' stroke-width='2'/%3E%3C/svg%3E");
  --t-mat: radial-gradient(120% 100% at 50% 50%, rgba(255, 248, 228, 0.85), rgba(236, 216, 172, 0.85));
  --t-mat-line: #b8862b;
  --t-mat-bw: 4px;
  --t-mat-r: 6px;
  --t-mat-inner: inset 0 0 0 5px rgba(168, 50, 42, 0.35), inset 0 0 40px rgba(140, 100, 30, 0.3);
  --t-edge: repeating-linear-gradient(90deg, #b8862b 0 10px, #8a6410 10px 14px);
  --t-rim: linear-gradient(145deg, #fff0c0, #d8a84a 30%, #8a6410 55%, #d8a84a 80%);
  --t-body: linear-gradient(170deg, #b8322a, #7a1a14 80%);
  --t-ribbon: linear-gradient(180deg, #b8322a, #7a1a14);
  --t-ribbon-ink: #fff0c0;
  --t-paper: radial-gradient(120% 90% at 50% 45%, #fbf2da, #ecd8a8);
  --t-ink: #3a2410;
  --t-kwc: #a8322a;
  --t-tag: linear-gradient(180deg, #b8322a, #7a1a14);
  --t-tag-ink: #fff0c0;
  --t-tag-line: #d8a84a;
  --t-title: "Shippori Mincho", serif;
  --t-card-r: 5cqw;
  --t-art-r: 4cqw;
  --t-glow: rgba(110, 190, 255, 0.85);
  --t-face-r: 50%;
  --t-plate: linear-gradient(180deg, #b8322a, #7a1a14);
  --t-plate-ink: #fff0c0;
  --t-tray: rgba(90, 40, 20, 0.72);
  --t-chip: rgba(255, 246, 222, 0.88);
  --t-chip-line: #b8862b;
  --t-chip-ink: #3a2410;
  --t-icon: #a8322a;
}
.th-bizarre {
  --t-field: radial-gradient(60% 50% at 80% 20%, #fff2a0, transparent 60%), linear-gradient(180deg, #b48aff 0%, #ff8ac8 45%, #ffc86a 80%);
  --t-pattern: radial-gradient(circle, rgba(255, 255, 255, 0.28) 1.6px, transparent 2px) 0 0 / 12px 12px;
  --t-mat: radial-gradient(120% 100% at 50% 50%, rgba(255, 236, 170, 0.82), rgba(255, 210, 120, 0.8));
  --t-mat-line: #1a0a2a;
  --t-mat-bw: 4px;
  --t-mat-r: 10px;
  --t-mat-inner: inset 0 0 0 5px #ff4fa0, inset 0 0 0 8px #1a0a2a, inset 0 0 40px rgba(180, 100, 40, 0.25);
  --t-edge: linear-gradient(135deg, #ffd400 25%, #ff4fa0 25% 50%, #ffd400 50% 75%, #ff4fa0 75%) 0 0 / 22px 22px;
  --t-rim: linear-gradient(145deg, #ffd400, #ff4fa0 35%, #7a2ad0 65%, #3fd0ff);
  --t-body: linear-gradient(170deg, #7a2ad0, #4a1890 80%);
  --t-ribbon: linear-gradient(180deg, #ff4fa0, #d0207a);
  --t-ribbon-ink: #fff;
  --t-paper: radial-gradient(120% 90% at 50% 45%, #fffbe6, #ffeeb0);
  --t-ink: #2a0a3a;
  --t-kwc: #a01a80;
  --t-tag: linear-gradient(180deg, #7a2ad0, #4a1890);
  --t-tag-ink: #ffd400;
  --t-tag-line: #ff4fa0;
  --t-title: "Dela Gothic One", sans-serif;
  --t-card-r: 6cqw;
  --t-art-r: 5cqw;
  --t-glow: rgba(255, 79, 160, 0.85);
  --t-face-r: 22%;
  --t-plate: linear-gradient(180deg, #7a2ad0, #4a1890);
  --t-plate-ink: #ffd400;
  --t-tray: rgba(74, 24, 144, 0.72);
  --t-chip: rgba(255, 251, 230, 0.9);
  --t-chip-line: #7a2ad0;
  --t-chip-ink: #2a0a3a;
  --t-icon: #a01a80;
}
/* particules et contrastes propres aux terrains des protagonistes */
.th-glycine .pt-petal { background: linear-gradient(135deg, #e6d6ff, #b48ae6); }
.th-cite .pt-bit { background: #e0453a; box-shadow: 0 0 6px rgba(224, 69, 58, 0.7); }
.th-alchimie .pt-spark { background: #d8f0ff; box-shadow: 0 0 8px 2px #4ab0ff; }
.th-manoir .af-pt > svg, .th-soleil .af-pt > svg, .th-crepuscule .af-pt > svg { filter: drop-shadow(0 0 2px rgba(40, 80, 140, 0.5)); }

/* ================= Terrain : deux moitiés, celle de l'adversaire retournée ================= */
.ar-field { position: fixed; inset: 0; z-index: 14; display: none; pointer-events: none; overflow: hidden; background: #0b090d; }
.ar-field.on { display: block; }
.ar-fieldhalf { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; contain: paint; }
.ar-field > .ar-fieldhalf.me { top: 50%; --hz: var(--mh); }
.ar-field > .ar-fieldhalf.opp { top: 0; --hz: var(--oh); transform: scaleY(-1); }
/* particules : pas retournées (elles tombent ou montent dans le bon sens des deux côtés) */
.ar-field > .ar-fieldhalf.opp .af-parts { transform: scaleY(-1); }
.af-bg { position: absolute; inset: 0; background: var(--t-pattern), var(--t-field); }
.af-mat { position: absolute; left: calc(var(--side) - 6px); right: calc(var(--side) - 6px); top: calc(var(--mid) / 2 + 6px); bottom: calc(var(--hz) + 4px); background: var(--t-mat); border: var(--t-mat-bw) solid var(--t-mat-line); border-radius: var(--t-mat-r); box-shadow: var(--t-mat-inner), 0 8px 24px rgba(0, 0, 0, 0.35); }
.af-corner { position: absolute; width: clamp(18px, 3.2vmin, 42px); line-height: 0; }
.af-corner svg { width: 100%; height: auto; overflow: visible; }
.af-corner.c1 { left: -4px; top: -4px; }
.af-corner.c2 { right: -4px; top: -4px; transform: scaleX(-1); }
.af-corner.c3 { left: -4px; bottom: -4px; transform: scaleY(-1); }
.af-corner.c4 { right: -4px; bottom: -4px; transform: scale(-1, -1); }
.af-edge { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--mid) / 2); background: var(--t-edge); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); opacity: 0.95; }
.af-decor, .af-parts { position: absolute; inset: 0; }
.af-sprite { position: absolute; line-height: 0; transform: rotate(var(--r)) scaleX(var(--f)); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); }
.af-sprite > svg { width: 100%; height: auto; display: block; overflow: visible; }
.af-sprite svg.blur { filter: blur(6px); }
.an-sway > svg { transform-origin: 50% 100%; animation: an-sway 5s ease-in-out infinite; }
.an-glow > svg { animation: an-glow 3.2s ease-in-out infinite; }
.an-flicker > svg { animation: an-flicker 1.6s ease-in-out infinite; }
.an-spin > svg { animation: an-spin 14s linear infinite; }
.an-spin-slow > svg { animation: an-spin 40s linear infinite; }
.an-bob > svg { animation: an-bob 4.5s ease-in-out infinite; }
.an-drift > svg { animation: an-drift 14s ease-in-out infinite alternate; }
@keyframes an-sway { 50% { transform: rotate(3deg); } }
@keyframes an-glow { 50% { filter: brightness(1.35) drop-shadow(0 0 10px rgba(255, 220, 140, 0.6)); } }
@keyframes an-flicker { 30% { transform: scaleY(1.06) skewX(-2deg); opacity: 0.85; } 60% { transform: scaleY(0.96) skewX(2deg); opacity: 1; } }
@keyframes an-spin { to { transform: rotate(360deg); } }
@keyframes an-bob { 50% { transform: translateY(-8%); } }
@keyframes an-drift { to { transform: translateX(8%); } }
/* particules */
.af-pt { position: absolute; left: var(--x); top: var(--y); width: calc(14px * var(--z)); line-height: 0; animation-delay: var(--d); animation-duration: var(--t); animation-iteration-count: infinite; animation-timing-function: linear; opacity: 0; }
.af-pt > svg { width: 100%; height: auto; display: block; }
.pm-fall { top: -6%; animation-name: pm-fall; }
.pm-rise { top: auto; bottom: -6%; animation-name: pm-rise; }
.pm-twinkle { animation-name: pm-twinkle; animation-timing-function: ease-in-out; animation-duration: calc(var(--t) / 2.5); }
.pm-drift { left: -6%; animation-name: pm-drift; }
.pm-streak { left: -20%; animation-name: pm-streak; animation-duration: calc(var(--t) / 3); }
@keyframes pm-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 0.9; } 90% { opacity: 0.9; } 100% { transform: translate(6vw, 56dvh) rotate(540deg); opacity: 0; } }
@keyframes pm-rise { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 0.9; } 85% { opacity: 0.8; } 100% { transform: translate(2vw, -56dvh); opacity: 0; } }
@keyframes pm-twinkle { 0%, 100% { transform: scale(0.3) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@keyframes pm-drift { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 0.9; } 50% { transform: translate(55vw, -3dvh) rotate(200deg); } 90% { opacity: 0.9; } 100% { transform: translate(110vw, 2dvh) rotate(400deg); opacity: 0; } }
@keyframes pm-streak { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 0.7; } 100% { transform: translateX(140vw); opacity: 0; } }
.pt-petal { display: block; width: 100%; aspect-ratio: 1; border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #ffd1e0, #ff9ec0); }
.pt-line { display: block; width: calc(120px * var(--z)); height: 2px; background: linear-gradient(90deg, transparent, #111); }
.pm-streak { width: auto; }
.pt-spark { display: block; width: 6px; height: 6px; border-radius: 50%; background: #fff2a8; box-shadow: 0 0 8px 2px #ffd34a; }
.pt-bit { display: block; width: 5px; height: 5px; background: #38e8ff; box-shadow: 0 0 8px #38e8ff; }
.pt-ember { display: block; width: 5px; height: 5px; border-radius: 50%; background: #ff3a4a; box-shadow: 0 0 8px 2px rgba(255, 40, 60, 0.7); }
.th-pirate .pt-ember, .th-tenebres .pm-drift { }
@media (prefers-reduced-motion: reduce) { .af-pt { display: none; } .af-sprite > svg { animation: none !important; } }

/* ================= Aperçu d'un terrain (sélecteur dans « Mon deck ») =================
   La moitié de terrain est dessinée à une taille d'écran fictive (960 × 400) puis réduite. */
.af-preview { position: relative; width: 100%; aspect-ratio: 960 / 400; overflow: hidden; border-radius: 8px; }
.af-preview .ar-fieldhalf { position: absolute; left: 0; top: 0; width: 960px; height: 400px; transform: scale(calc(var(--pk, 0.2))); transform-origin: 0 0; --side: 170px; --mid: 34px; --hz: 110px; --mh: 110px; }

/* plaques claires ou vives : un léger contour pour la lisibilité */
.th-shojo .ar-plate :is(b, small), .th-isekai .ar-plate :is(b, small), .th-neon .ar-plate :is(b, small) { text-shadow: 0 1px 2px rgba(40, 0, 30, 0.55); }
.th-shojo .ac-hname span { text-shadow: 0 0 2cqw #7a2a52, 0 0.6cqw 0 #7a2a52; }