/* =======================================================================
   Game "Prediksi & Taklukkan" — tampilan (lihat docs/DESIGN-GAME.md)
   Menu terang + foto besar; battle = layar VS terbelah dua (garis duel).
   Satu keluarga huruf (Archivo), satu aksen (Merah Duel), permukaan datar.
   ======================================================================= */
.rpg{
  --g:#ECEEF1; --g2:#FFFFFF; --g3:#DDE1E6; --ink:#131518; --ink2:#565C66;
  --red:#E2412F; --red-ink:#FFFFFF; --sea:#0E4C57; --gold:#FFD23F;
  --t-C:#4F9A68; --t-B:#2C70C4; --t-A:#B5326A; --t-S:#D99A0E;
  --ok:#2E8A4F; --mid:#B87A00; --bad:#C8321F;
  --gut:clamp(16px,3vw,32px);
  --f:'Archivo',system-ui,sans-serif;
  position:relative; min-height:100dvh; max-width:none !important; margin:0 !important; width:100%; padding:60px var(--gut) 40px; color:var(--ink); background:var(--g);
  font-family:var(--f); font-size:16px; line-height:1.5; font-variant-numeric:tabular-nums;
}
.rpg *{ box-sizing:border-box; }
.rpg .ic{ width:1.2em; height:1.2em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.rpg .t-C{ --tc:var(--t-C); } .rpg .t-B{ --tc:var(--t-B); } .rpg .t-A{ --tc:var(--t-A); } .rpg .t-S{ --tc:var(--t-S); }
.rpg-loading{ padding:30vh 0; text-align:center; color:var(--ink2); font-size:2rem; }
.rpg h2, .rpg h3, .rpg h4{ font-family:var(--f); }

/* ---------- tombol ---------- */
.rpg .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 26px; border:0; border-radius:999px;
  font:800 1rem/1 var(--f); font-stretch:100%; letter-spacing:0; text-transform:none; cursor:pointer; transition:transform .12s cubic-bezier(.2,0,0,1), background .15s; box-shadow:none; }
.rpg .btn:active{ transform:translateY(2px); }
.rpg .btn-primary{ background:var(--red); color:var(--red-ink); }
.rpg .btn-primary:hover{ background:#C9321F; }
.rpg .btn-ghost{ background:var(--g3); color:var(--ink); }
.rpg .btn-ghost:hover{ background:#CDD2D9; }
.rpg .btn-lg{ min-height:58px; padding:0 34px; font-size:1.15rem; }
.rpg .btn[disabled]{ opacity:.4; cursor:not-allowed; transform:none; }
.rpg .btn:focus-visible, .rpg button:focus-visible, .rpg select:focus-visible{ outline:3px solid var(--red); outline-offset:3px; }

/* ---------- bar atas ---------- */
.rpg-top{ position:sticky; top:60px; z-index:6; max-width:1320px; margin:0 auto; display:flex; align-items:center; gap:14px; padding:16px 0; background:var(--g); }
.rpg-title{ flex:1; margin:0; font-weight:800; font-stretch:75%; font-size:clamp(2rem,4.6vw,3.6rem); line-height:.9; letter-spacing:-.02em; text-transform:uppercase; }
.rpg-top-r{ display:flex; align-items:center; gap:8px; }
.rpg-ibtn{ display:grid; place-items:center; width:46px; height:46px; border:0; border-radius:999px; background:var(--g2); color:var(--ink); cursor:pointer; font-size:1.15rem; transition:transform .12s, background .15s; }
.rpg-ibtn:hover{ background:var(--g3); } .rpg-ibtn:active{ transform:translateY(2px); }
.rpg-ibtn.ghost{ visibility:hidden; width:0; margin-right:-14px; }
.rpg-ibtn.sm{ width:40px; height:40px; }
.rpg-gold{ display:flex; align-items:center; gap:6px; height:46px; padding:0 18px; border-radius:999px; background:var(--gold); color:var(--ink); font-weight:800; font-size:1.1rem; }
.rpg-body{ max-width:1320px; margin:0 auto; }
.rpg-lede{ margin:0 0 24px; font-size:1.15rem; color:var(--ink); max-width:60ch; }
.rpg-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* ---------- kartu ---------- */
.rpg-mono{ display:grid; place-items:center; width:100%; height:100%; background:var(--tc,var(--ink)); color:#fff;
  font:800 3rem/1 var(--f); font-stretch:75%; letter-spacing:-.02em; }
.rpg-card{ position:relative; display:flex; flex-direction:column; width:100%; min-width:0; padding:0; border:0; border-radius:16px; overflow:hidden;
  background:var(--tc); color:#fff; text-align:left; cursor:pointer; font:inherit; transition:transform .18s cubic-bezier(.2,0,0,1); }
.rpg-card:hover{ transform:translateY(-6px) rotate(-1deg); }
.rpg-card:active{ transform:translateY(-2px); }
.rpg-card[aria-pressed="true"]{ outline:4px solid var(--ink); outline-offset:3px; }
.rc-art{ display:block; aspect-ratio:3/3.6; overflow:hidden; background:var(--g3); }
.rc-art img{ width:100%; height:100%; object-fit:cover; object-position:50% 14%; display:block; transition:transform .5s cubic-bezier(.2,0,0,1); }
.rpg-card:hover .rc-art img{ transform:scale(1.06); }
.rpg-tier{ position:absolute; top:10px; left:10px; display:grid; place-items:center; min-width:34px; height:34px; padding:0 8px; border-radius:10px;
  background:#fff; color:var(--tc); font:800 1.05rem/1 var(--f); font-stretch:75%; }
.rc-lv{ position:absolute; top:10px; right:10px; height:28px; padding:0 10px; display:grid; place-items:center; border-radius:999px; background:var(--ink); color:#fff; font-weight:700; font-size:.8rem; }
.rc-name{ display:block; padding:10px 12px 0; font-weight:800; font-stretch:85%; font-size:1.05rem; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rc-arch{ display:block; padding:2px 12px 12px; font-size:.85rem; opacity:.85; }
.rpg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:18px; }
.rpg-grid > *{ min-width:0; }
.rpg-grid.sm{ grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:12px; max-height:44vh; overflow:auto; padding:6px 4px 10px; }
.rpg-grid.sm .rc-name{ font-size:.85rem; } .rpg-grid.sm .rc-arch{ display:none; } .rpg-grid.sm .rpg-tier{ min-width:28px; height:28px; font-size:.9rem; }

/* kartu tertutup: belakang Merah Duel dengan garis duel putih */
.flip{ perspective:1100px; min-width:0; }
.flip-in{ position:relative; transition:transform .65s cubic-bezier(.2,.8,.2,1); transform-style:preserve-3d; }
.flip.on .flip-in{ transform:rotateY(180deg); }
.flip-back, .flip-front{ backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.flip-front{ transform:rotateY(180deg); }
.flip-back{ position:absolute; inset:0; padding:0; border:0; border-radius:16px; cursor:pointer; overflow:hidden; background:var(--red); }
.flip-back::before{ content:''; position:absolute; z-index:1; left:50%; top:-10%; width:14%; height:120%; background:#fff; transform:translateX(-50%) rotate(14deg); }
.flip-back::after{ content:''; position:absolute; inset:0; background:var(--sea); clip-path:polygon(57% 0,100% 0,100% 100%,43% 100%); }
.flip:not(.on) .flip-front{ visibility:hidden; }
.flip:not(.on) .flip-back{ position:relative; display:block; width:100%; aspect-ratio:3/4.4; }
.rpg-fan{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; }
.fan-item{ min-width:0; }
.fan-d{ margin:14px 2px 0; font-size:1rem; line-height:1.45; }
.fan-d b{ display:block; font-weight:800; font-stretch:85%; font-size:1.25rem; }

/* ---------- peta ---------- */
.rpg-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px; }
.rpg-tiles.big{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:clamp(200px,24vw,300px); }
.rpg-tiles.big .rpg-tile:first-child{ grid-column:span 2; grid-row:span 2; }
.rpg-tile{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:260px; padding:22px; border:0; border-radius:22px; overflow:hidden;
  color:#fff; text-align:left; cursor:pointer; font:inherit; background:var(--ink) var(--cover) center 28%/cover no-repeat; isolation:isolate; transition:transform .25s cubic-bezier(.2,0,0,1); }
.rpg-tiles.big .rpg-tile{ min-height:0; }
.rpg-tile::before{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.72) 100%); }
.rpg-tile:hover{ transform:translateY(-6px); }
.rt-name{ font-weight:800; font-stretch:75%; font-size:clamp(2rem,3.6vw,3.4rem); line-height:.9; letter-spacing:-.02em; text-transform:uppercase; }
.rpg-tiles.big .rpg-tile:first-child .rt-name{ font-size:clamp(3rem,6.4vw,6rem); }
.rt-sub{ margin-top:8px; font-weight:600; font-size:1rem; }
.rt-bar{ display:block; height:8px; margin-top:12px; border-radius:8px; background:rgba(255,255,255,.28); overflow:hidden; max-width:320px; }
.rt-bar i{ display:block; height:100%; background:var(--gold); }

/* kota = baris lebar */
.rpg-cities{ display:flex; flex-direction:column; gap:12px; }
.rpg-city{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto auto; align-items:center; gap:4px 22px; width:100%;
  padding:14px 18px 14px 14px; border:0; border-radius:20px; background:var(--g2); color:var(--ink); text-align:left; cursor:pointer; font:inherit; transition:transform .18s cubic-bezier(.2,0,0,1), background .15s; }
.rpg-city:hover{ transform:translateX(6px); }
.cy-faces{ grid-row:1 / span 2; display:flex; }
.cy-face{ position:relative; width:72px; aspect-ratio:3/4; border-radius:12px; overflow:hidden; background:var(--tc); outline:4px solid var(--g2); }
.cy-face + .cy-face{ margin-left:-20px; }
.cy-face img{ width:100%; height:100%; object-fit:cover; object-position:50% 14%; display:block; }
.cy-face .rpg-mono{ font-size:1.5rem; }
.cy-face.hidden{ background:var(--ink); }
.cy-face.hidden img, .cy-face.hidden .rpg-mono{ filter:brightness(.22) saturate(0); }
.cy-face.hidden::after{ content:'?'; position:absolute; inset:0; display:grid; place-items:center; font:800 2rem/1 var(--f); color:#fff; }
.cy-name{ display:flex; align-items:center; gap:8px; align-self:end; font-weight:800; font-stretch:85%; font-size:1.5rem; line-height:1.05; }
.cy-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; align-self:start; color:var(--ink2); font-weight:600; font-size:.95rem; }
.cy-gold{ display:inline-flex; align-items:center; gap:5px; color:var(--ink); font-weight:800; }
.cy-done{ display:inline-flex; align-items:center; gap:5px; color:var(--ok); font-weight:700; }
.cy-go{ grid-column:3; grid-row:1 / span 2; display:grid; place-items:center; height:48px; padding:0 24px; border-radius:999px; background:var(--red); color:#fff; font-weight:800; }
.rpg-city.done .cy-go{ background:var(--g3); color:var(--ink); }
.crown{ color:var(--t-S); }
.rpg-city.boss{ background:var(--ink); color:#fff; padding:18px 22px 18px 18px; }
.rpg-city.boss .cy-face{ width:96px; outline-color:var(--ink); }
.rpg-city.boss .cy-name{ font-size:2rem; font-stretch:75%; text-transform:uppercase; }
.rpg-city.boss .cy-meta, .rpg-city.boss .cy-gold{ color:#fff; }
.rpg-city.boss .cy-go{ background:var(--gold); color:var(--ink); }
.risk{ padding:4px 12px; border-radius:999px; font-weight:800; font-size:.85rem; color:#fff; }
.r-mudah{ background:var(--ok); } .r-seimbang{ background:var(--mid); } .r-sulit{ background:var(--bad); }

/* ---------- lembar (overlay) ---------- */
.rpg-ov{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:16px; background:rgba(19,21,24,.7); }
.rpg-sheet{ width:min(900px,100%); max-height:calc(100dvh - 32px); overflow:auto; padding:clamp(20px,3vw,32px); border-radius:26px; background:var(--g2); color:var(--ink); box-shadow:0 30px 80px -20px rgba(0,0,0,.5); }
.rpg-sheet h3{ display:flex; align-items:center; gap:10px; margin:0 0 8px; font-weight:800; font-stretch:75%; font-size:clamp(2rem,4vw,2.8rem); line-height:.95; letter-spacing:-.02em; text-transform:uppercase; }
.ts-head{ display:flex; gap:18px; align-items:center; margin-bottom:22px; }
.ts-foe{ width:92px; aspect-ratio:3/4; border-radius:14px; overflow:hidden; flex:none; background:var(--tc); }
.ts-foe img{ width:100%; height:100%; object-fit:cover; object-position:50% 14%; }
.ts-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:6px 0 0; color:var(--ink2); font-weight:600; }
.tp-slots{ display:grid; grid-template-columns:repeat(3,minmax(0,150px)); gap:14px; align-items:end; }
.tp-slot{ position:relative; display:flex; flex-direction:column; gap:8px; min-width:0; }
.tp-empty{ display:grid; place-items:center; aspect-ratio:3/4.4; border-radius:16px; background:var(--g3); color:var(--ink2); font:800 2.4rem/1 var(--f); }
.tp-slot.full{ cursor:pointer; }
.tp-ord{ font-weight:800; font-size:.95rem; color:var(--ink); }
.tp-slot:first-child .tp-ord{ color:var(--red); }
.tp-hint{ color:var(--ink2); font-size:.95rem; margin:14px 0 12px; }

/* ---------- tutorial ---------- */
.tut{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,5vw,64px); align-items:center; padding:3vh 0; }
.tut-art{ display:grid; place-items:center; min-height:clamp(320px,60vh,600px); border-radius:28px; background:var(--ink); padding:24px; }
.tut-row{ display:flex; align-items:center; gap:14px; justify-content:center; flex-wrap:wrap; }
.tok{ position:relative; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:108px; height:118px; border-radius:22px; background:var(--g2); color:var(--ink); font-size:2.1rem; overflow:hidden; }
.tok b{ font-weight:800; font-size:.9rem; }
.tok.big{ background:var(--red); color:#fff; transform:scale(1.12); }
.tok.hid{ background:var(--red); color:transparent; }
.tok.hid::after{ content:''; position:absolute; left:50%; top:-10%; width:12%; height:120%; background:#fff; transform:translateX(-50%) rotate(14deg); }
.tok.hid b{ color:transparent; }
.vs{ font-weight:800; font-stretch:75%; font-size:2.4rem; color:#fff; text-transform:uppercase; }
.tri{ position:relative; width:320px; height:270px; }
.tri .tok{ position:absolute; z-index:1; }
.tri .tok:nth-child(1){ left:106px; top:0; } .tri .tok:nth-child(2){ right:0; bottom:0; } .tri .tok:nth-child(3){ left:0; bottom:0; }
.tri-arrows{ position:absolute; inset:40px 30px 40px; width:calc(100% - 60px); height:calc(100% - 80px); fill:none; stroke:var(--red); stroke-width:6; }
.tut-t{ margin:0 0 12px; font-weight:800; font-stretch:75%; font-size:clamp(2.6rem,5vw,4.4rem); line-height:.9; letter-spacing:-.02em; text-transform:uppercase; }
.tut-p{ margin:0; font-size:1.25rem; line-height:1.5; max-width:34ch; }
.tut-dots{ display:flex; gap:8px; margin-top:22px; }
.tut-dots i{ width:10px; height:10px; border-radius:10px; background:var(--g3); } .tut-dots i.on{ width:34px; background:var(--red); }
.tut .rpg-cta{ margin-top:26px; }

/* tombol aksi = "tangan" kartu tebal */
.actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:12px 0 4px; }
.act-btn{ position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:8px; width:112px; height:112px; padding:12px; border:0; border-radius:18px;
  background:var(--g2); color:var(--ink); cursor:pointer; text-align:left; font:inherit; transition:transform .15s cubic-bezier(.2,0,0,1), background .15s; }
.act-btn:hover:not([disabled]){ transform:translateY(-8px) rotate(-1.5deg); }
.act-btn:active:not([disabled]){ transform:translateY(-2px); }
.act-btn[disabled]{ opacity:.42; cursor:not-allowed; }
.act-btn.skill{ background:var(--ink); color:#fff; }
.ab-ic{ display:grid; place-items:center; width:38px; height:38px; border-radius:12px; font-size:1.3rem; background:var(--ac,var(--g3)); color:#fff; }
.ab-n{ font-weight:800; font-stretch:85%; font-size:1.05rem; line-height:1.05; }
.ab-c{ display:flex; gap:4px; min-height:10px; font-size:.75rem; font-weight:700; color:var(--ink2); }
.act-btn.skill .ab-c{ color:#B9BEC6; }
.ab-c i{ width:10px; height:10px; border-radius:50%; background:#2C9BE0; }
.a-attack{ --ac:#E2412F; } .a-defend{ --ac:#2C70C4; } .a-counter{ --ac:#D99A0E; } .a-charge{ --ac:#E07A12; }
.a-stun{ --ac:#7A5BC4; } .a-heal{ --ac:#2E8A4F; } .a-flee{ --ac:#565C66; } .act-btn.skill{ --ac:var(--gold); } .act-btn.skill .ab-ic{ color:var(--ink); }

/* ---------- hasil ---------- */
.ov-result{ background:rgba(19,21,24,.82); }
.ov-result .rpg-sheet{ width:min(760px,100%); padding:0; overflow:hidden; background:transparent; box-shadow:none; }
.res{ position:relative; padding:48px 32px 36px; text-align:center; border-radius:26px; overflow:hidden; background:var(--ink); color:#fff; isolation:isolate; }
.res-win{ background:var(--red); }
.res::before{ content:''; position:absolute; z-index:-1; inset:0; background:var(--sea); clip-path:polygon(60% 0,100% 0,100% 100%,46% 100%); }
.res-lose::before, .res-fled::before{ background:#2A2E35; }
.res h3{ justify-content:center; margin:0 0 14px; font-size:clamp(3.4rem,9.5vw,7.2rem) !important; color:#fff; }
.res-gold{ display:inline-flex; align-items:center; justify-content:center; gap:8px; margin:0; padding:10px 20px; border-radius:999px; background:var(--gold); color:var(--ink); font-size:1.3rem; font-weight:800; }
.res-gold small{ font-weight:600; font-size:.9rem; }
.res .rpg-cta{ justify-content:center; }
.res .btn-ghost{ background:#fff; color:var(--ink); }
.res .btn-primary{ background:var(--gold); color:var(--ink); } .res .btn-primary:hover{ background:#F2C21E; }

/* ---------- rebut kartu ---------- */
.cap-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,290px)); gap:clamp(18px,3vw,40px); justify-content:center; margin-top:12px; }
.cap-cards + .rpg-cta, .cap-cards ~ .rpg-cta{ justify-content:center; }
.cap-cards > *{ min-width:0; }
.cap-cards .flip:not(.on) .flip-back{ transition:transform .2s cubic-bezier(.2,0,0,1); }
.cap-cards .flip:not(.on) .flip-back:hover{ transform:translateY(-10px) rotate(-1.5deg); }
.cap-tag{ display:inline-block; margin-top:10px; padding:5px 12px; border-radius:999px; font-weight:800; font-size:.9rem; color:#fff; }
.cap-tag.ok{ background:var(--ok); } .cap-tag.no{ background:var(--bad); }
.flip.no .rpg-card{ filter:grayscale(.85); opacity:.7; }
.ov-meter .rpg-sheet{ width:min(760px,100%); }
.meter-wrap{ display:grid; grid-template-columns:120px minmax(0,1fr); grid-template-areas:"card meter" "card stop"; gap:18px 26px; align-items:center; }
.meter-card{ grid-area:card; width:120px; }
.meter{ grid-area:meter; position:relative; height:84px; border-radius:999px; background:var(--g3); overflow:hidden; }
.meter-fill{ height:100%; width:1%; background:var(--ink); }
.meter-num{ position:absolute; top:10px; bottom:10px; right:10px; display:flex; align-items:center; justify-content:center; min-width:110px; padding:0 18px; border-radius:999px; background:#fff; font-weight:900; font-stretch:75%; font-size:3rem; color:var(--ink); }
.meter.ok .meter-fill{ background:var(--ok); } .meter.no .meter-fill{ background:var(--bad); }
.meter-stop{ grid-area:stop; justify-self:start; min-width:220px; min-height:64px !important; font-size:1.4rem !important; }
.meter-hint{ display:none; }

/* ---------- koleksi & detail ---------- */
.col-team{ display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:16px 24px; align-items:end; margin-bottom:28px; padding:22px; border-radius:24px; background:var(--g2); }
.col-h{ margin:0; font-weight:800; font-stretch:75%; font-size:2.6rem; line-height:.9; text-transform:uppercase; grid-column:1 / -1; }
.col-team .tp-hint{ margin:0; align-self:end; }
.col-filters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:22px; }
.chip{ height:42px; padding:0 18px; border:0; border-radius:999px; background:var(--g2); color:var(--ink); cursor:pointer; font:700 .95rem var(--f); }
.chip.on{ background:var(--ink); color:#fff; }
.col-filters select{ height:42px; padding:0 14px; border:0; border-radius:999px; background:var(--g2); color:var(--ink); font:700 .95rem var(--f); }
.cmp{ width:100%; margin-bottom:22px; border-collapse:collapse; background:var(--g2); border-radius:20px; overflow:hidden; }
.cmp th, .cmp td{ padding:12px 16px; text-align:left; } .cmp th{ color:var(--ink2); font-weight:600; } .cmp td{ font-weight:700; } .cmp td.best{ color:var(--ok); }
.cd{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:28px; }
.cd-art{ position:relative; aspect-ratio:3/4; border-radius:22px; overflow:hidden; background:var(--tc); }
.cd-art img{ width:100%; height:100%; object-fit:cover; object-position:50% 14%; }
.cd-info h3{ margin-bottom:6px; }
.cd-arch{ margin:0 0 10px; color:var(--ink2); font-weight:600; } .cd-arch b{ color:var(--ink); }
.cd-desc{ margin:0 0 18px; font-size:1.05rem; }
.cd-stats{ display:flex; flex-wrap:wrap; gap:22px; margin-bottom:18px; }
.cd-stats span{ display:flex; flex-direction:column; }
.cd-stats small{ color:var(--ink2); font-weight:600; font-size:.85rem; } .cd-stats b{ font-weight:800; font-stretch:75%; font-size:2.4rem; line-height:1; }
.cd-acts{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.cd-act{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:999px; background:var(--g); font-weight:700; font-size:.9rem; }
.cd-skill{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:8px 0; color:var(--ink2); } .cd-skill b{ color:var(--ink); }
.cd-weak{ margin:14px 0 0; padding:10px 14px; border-radius:14px; background:#FFE3DE; color:#8E2414; font-weight:600; }
.cd-tend{ margin-bottom:16px; }
.cd-tend h4{ margin:0 0 8px; font-weight:800; font-size:1rem; }
.cd-tend .bar{ display:grid; grid-template-columns:80px 1fr 44px; align-items:center; gap:10px; font-weight:600; font-size:.9rem; margin-bottom:6px; }
.cd-tend .bar i{ display:block; height:10px; border-radius:6px; background:var(--sea); }
.mx-h{ justify-content:flex-start; }
.mx{ margin:14px 0 18px; border-collapse:separate; border-spacing:6px; }
.mx th{ font-size:1.3rem; color:var(--ink); padding:4px; font-weight:700; } .mx th small{ display:block; font-size:.72rem; }
.mx td{ width:52px; height:46px; text-align:center; border-radius:12px; font-weight:900; font-size:1.1rem; background:var(--g); color:var(--ink2); }
.mx .m-a{ background:var(--ok); color:#fff; } .mx .m-b{ background:var(--bad); color:#fff; }
.mx-n{ color:var(--ink2); line-height:1.7; } .mx-n b{ color:var(--ink); }
.set{ display:flex; align-items:center; gap:12px; padding:14px 0; font-size:1.05rem; font-weight:600; }
.set input{ width:22px; height:22px; accent-color:var(--red); }

/* ---------- ponsel ---------- */
@media (max-width: 860px){
  .rpg-tiles.big{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:190px; }
  .rpg-tiles.big .rpg-tile:first-child{ grid-column:span 2; grid-row:span 1; }
  .rpg-tiles.big .rpg-tile:first-child .rt-name{ font-size:3rem; }
  .tut{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .rpg-title{ font-size:clamp(1.6rem,7vw,2.2rem); }
  .act-btn{ height:92px; } 
  .rpg-fan{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .rpg-city{ grid-template-columns:auto minmax(0,1fr); gap:4px 14px; padding:12px; }
  .cy-go{ grid-column:1 / -1; grid-row:3; height:44px; margin-top:8px; }
  .cy-face{ width:54px; } .cy-face + .cy-face{ margin-left:-16px; }
  .rpg-city.boss .cy-face{ width:64px; }
  .cy-name{ font-size:1.2rem; }
  .actions{ gap:8px; }
  .act-btn{ width:calc(25% - 6px); min-width:76px; height:104px; padding:10px; border-radius:16px; gap:6px; }
  .ab-ic{ width:34px; height:34px; border-radius:11px; font-size:1.2rem; } .ab-n{ font-size:.9rem; }
  .meter-wrap{ grid-template-columns:1fr; grid-template-areas:"card" "meter" "stop"; justify-items:center; }
  .meter{ width:100%; } .meter-stop{ justify-self:stretch; }
  .col-team{ grid-template-columns:1fr; }
  .cd{ grid-template-columns:1fr; } .cd-art{ max-width:240px; }
  .tp-slots{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce){ .rpg *{ animation:none !important; transition:none !important; } }


/* =======================================================================
   KARTU GAYA YU-GI-OH (modern): anatomi klasik, eksekusi datar.
   Bingkai per tier = "jenis kartu": C Normal (coklat muda), B Effect (oranye),
   A Fusion (ungu), S hitam-emas. Ukuran teks memakai cqi (persen lebar kartu).
   ======================================================================= */
.yg{ container-type:inline-size; width:100%; aspect-ratio:59/86; }
.yg-in{ position:relative; height:100%; display:flex; flex-direction:column; gap:1.8cqi; padding:4.2cqi; border-radius:3.6cqi; background:var(--fr); color:var(--frk); text-align:left; }
.t-S .yg-in{ outline:1.4cqi solid var(--fr3); outline-offset:-2.6cqi; }
.yg-name{ display:flex; align-items:center; gap:2cqi; height:12cqi; padding:0 1.6cqi 0 3cqi; border-radius:1.6cqi; background:var(--fr2); box-shadow:inset 0 0 0 .8cqi var(--fr3); }
.yg-name b{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:'Cinzel',serif; font-weight:700; font-size:6.6cqi; line-height:1; letter-spacing:.01em; color:var(--frk); }
.yg-attr{ flex:none; display:grid; place-items:center; width:9cqi; height:9cqi; border-radius:50%; box-shadow:0 0 0 .8cqi var(--fr3); }
.yg-attr svg{ width:5.6cqi; height:5.6cqi; fill:#fff; stroke:none; }
.el-fire{ background:#D8432A; } .el-nature{ background:#2F8F55; } .el-earth{ background:#9C6B2C; } .el-water{ background:#2678C9; } .el-thunder{ background:#8B4FCB; }
.yg-attr.el-nature svg{ fill:none; stroke:#fff; stroke-width:2.4; }
.yg-stars{ display:flex; justify-content:flex-end; gap:.9cqi; height:6cqi; padding-right:1.6cqi; }
.yg-stars i{ width:6cqi; height:6cqi; border-radius:50%; background:#C8321F; box-shadow:inset 0 0 0 .6cqi #7A1A0E; position:relative; }
.yg-stars i::after{ content:''; position:absolute; inset:1.1cqi; background:#FFD23F; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.yg-art{ position:relative; aspect-ratio:1/1; margin:0 2cqi; border-radius:.8cqi; overflow:hidden; background:#14110E; box-shadow:0 0 0 1.2cqi var(--fr3); background-size:cover; background-position:50% 15%; }
.yg-art img{ width:100%; height:100%; object-fit:cover; object-position:50% 14%; display:block; }
.yg-art .rpg-mono{ background:#14110E; color:var(--fr); font-size:22cqi; }
.yg-art.ko{ filter:grayscale(1) brightness(.5); }
.yg-tier{ position:absolute; top:2cqi; left:2cqi; display:grid; place-items:center; min-width:10cqi; height:10cqi; padding:0 2cqi; border-radius:2cqi; background:var(--fr); color:var(--frk); font:800 6cqi/1 var(--f); font-stretch:75%; box-shadow:0 0 0 .7cqi var(--fr3); }
.yg-lv{ position:absolute; right:2cqi; bottom:2cqi; padding:1cqi 2.6cqi; border-radius:999px; background:rgba(0,0,0,.72); color:#fff; font:700 4.6cqi/1.2 var(--f); }
.yg-text{ flex:1; min-height:0; display:flex; flex-direction:column; gap:1cqi; margin-top:1.4cqi; padding:2cqi 3cqi 1.6cqi; border-radius:1.2cqi; background:#F6F0E2; color:#1A1712; box-shadow:inset 0 0 0 .8cqi var(--fr3); overflow:hidden; }
.yg-type{ font-weight:800; font-size:4.4cqi; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.yg-eff{ margin:0; font-size:4.1cqi; line-height:1.25; color:#3A352C; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.yg-stats{ margin-top:auto; display:flex; justify-content:flex-end; gap:4cqi; padding-top:1.2cqi; border-top:.7cqi solid #1A1712; font-size:4.6cqi; font-weight:700; }
.yg-stats b{ font-weight:900; font-size:5.2cqi; }
.yg-hp{ display:flex; align-items:center; gap:2cqi; font-size:4.4cqi; font-weight:800; }
.yg-hp .bs-hp{ position:static; flex:1; height:3.2cqi; border-radius:2cqi; background:#DCD3BF; overflow:hidden; }
.yg-hp .bs-hp i{ display:block; height:100%; background:#2E8A4F; transition:width .6s cubic-bezier(.2,.8,.2,1); }
.yg-hp b{ min-width:9cqi; text-align:right; font-weight:900; font-size:5.4cqi; }
@container (max-width: 175px){ .yg-eff{ display:none; } .yg-type{ font-size:5cqi; } }
@container (max-width: 120px){ .yg-type{ display:none; } .yg-stars{ height:5cqi; } }

/* pembungkus kartu di menu */
.rpg-card{ display:block; padding:0; border:0; background:none; border-radius:3.6%; overflow:visible; }
.rpg-card .yg-in{ transition:transform .18s cubic-bezier(.2,0,0,1); }
.rpg-card:hover{ transform:translateY(-6px) rotate(-1deg); }
.rpg-card[aria-pressed="true"] .yg-in{ outline:4px solid var(--red); outline-offset:3px; }
.rpg-grid{ grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); }
.rpg-grid.sm{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
.flip:not(.on) .flip-back{ aspect-ratio:59/86; }
.tp-empty{ aspect-ratio:59/86; }

/* detail kartu */
.cd{ grid-template-columns:minmax(0,320px) minmax(0,1fr); }
.cd-card{ width:100%; max-width:320px; }
@media (max-width: 760px){
  .cd-card{ max-width:260px; margin:0 auto; }
}


/* =======================================================================
   MEJA DUEL 5 v 5 — lokasi kota jadi latar, meja bergaris di atasnya.
   Tiap sisi: baris zona kartu (tokoh) + baris zona aksi (kartu aksi tertutup).
   Warna bingkai = tier: C batu, B biru, A ungu, S emas.
   ======================================================================= */
.rpg{ --t-C:#8E959C; --t-B:#2F6DB5; --t-A:#7A3FB0; --t-S:#D2A02A; }
.rpg .t-C{ --fr:#A9AFB5; --fr2:#8F969D; --fr3:#41464B; --frk:#15181B; }
.rpg .t-B{ --fr:#3C7CC6; --fr2:#2F67A8; --fr3:#163558; --frk:#FFFFFF; }
.rpg .t-A{ --fr:#7E45B5; --fr2:#69379A; --fr3:#331650; --frk:#FFFFFF; }
.rpg .t-S{ --fr:#D7A532; --fr2:#BC8C1F; --fr3:#5B3F06; --frk:#1C1404; }
.t-S .yg-stars i{ background:#2A1E05; box-shadow:inset 0 0 0 .6cqi #120C01; } .t-S .yg-stars i::after{ background:#F3D27A; }

/* latar lokasi + suasana */
.rpg.is-duel{ --gold-line:rgba(214,170,90,.42); --panel:rgba(22,17,12,.84); --parch:#F4EDDC;
  background:#14100C; color:#F3EAD8; isolation:isolate; overflow-x:clip; }
.rpg.is-duel::before{ content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,9,6,.62) 0%, rgba(12,9,6,.5) 40%, rgba(12,9,6,.88) 100%), var(--loc) 50% 30% / cover no-repeat; }
.rpg.is-duel::after{ content:''; position:fixed; left:0; right:0; top:0; height:200%; z-index:-1; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(2px 2px at 8% 12%, #FFC27A 50%, transparent 52%), radial-gradient(1.5px 1.5px at 23% 34%, #FFD9A8 50%, transparent 52%),
    radial-gradient(2px 2px at 41% 8%, #FFB066 50%, transparent 52%), radial-gradient(1.5px 1.5px at 57% 27%, #FFD9A8 50%, transparent 52%),
    radial-gradient(2.5px 2.5px at 72% 16%, #FFC27A 50%, transparent 52%), radial-gradient(1.5px 1.5px at 88% 38%, #FFB066 50%, transparent 52%),
    radial-gradient(2px 2px at 15% 44%, #FFD9A8 50%, transparent 52%), radial-gradient(1.5px 1.5px at 64% 47%, #FFC27A 50%, transparent 52%);
  background-size:100% 50%; animation:duel-embers 26s linear infinite; }
@keyframes duel-embers{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
.rpg.is-duel .rpg-top{ background:transparent; }
.rpg.is-duel .rpg-title{ color:#F3EAD8; font-family:'Cinzel',serif; font-weight:700; font-stretch:100%; text-transform:none; letter-spacing:.01em; font-size:clamp(1.5rem,2.6vw,2.3rem); }
.rpg.is-duel .rpg-ibtn{ background:rgba(255,255,255,.1); color:#F3EAD8; } .rpg.is-duel .rpg-ibtn:hover{ background:rgba(255,255,255,.18); }
.rpg.is-duel .rpg-body{ max-width:1500px; }

.duel{ --cw:min(clamp(84px, calc((100dvh - 530px) / 2.9), 172px), calc((100vw - 2 * var(--gut) - 360px) / 5.6));
  display:grid; grid-template-columns:minmax(0,1fr) 290px; grid-template-areas:"mat side" "dock dock"; gap:14px; align-items:stretch; }

/* meja: kulit gelap, garis emas ganda */
.mat{ grid-area:mat; position:relative; display:flex; flex-direction:column; justify-content:center; gap:clamp(6px,1.2dvh,12px);
  padding:clamp(12px,1.8vw,22px); border-radius:20px; background:var(--panel); border:1px solid var(--gold-line); }
.mat::before{ content:''; position:absolute; inset:7px; border:1px solid rgba(214,170,90,.18); border-radius:14px; pointer-events:none; }
.mat-side{ display:flex; flex-direction:column; gap:clamp(6px,1dvh,10px); }
.mat-row{ display:grid; grid-template-columns:repeat(var(--n), var(--cw)); justify-content:center; gap:clamp(8px,1.3vw,20px); }
.zone{ position:relative; padding:5px; border-radius:10px; background:rgba(0,0,0,.24); outline:1.5px solid var(--gold-line); }
.zone::before{ content:''; position:absolute; inset:-5px; border:1px solid rgba(214,170,90,.16); border-radius:14px; pointer-events:none; }
.z-card{ outline-color:color-mix(in srgb, var(--fr) 80%, transparent); background:color-mix(in srgb, var(--fr) 16%, rgba(0,0,0,.3)); }
.z-act{ height:clamp(46px,6.6dvh,64px); padding:4px; }
.mat-mid{ display:flex; align-items:center; gap:14px; padding:0 4px; }
.mm-line{ flex:1; height:1px; background:var(--gold-line); }
.mm-round{ position:relative; padding:4px 16px; font:700 .95rem/1.2 'Cinzel',serif; letter-spacing:.06em; color:#E9C77B; border:1px solid var(--gold-line); border-radius:999px; }

/* kartu tokoh di zona */
.fz-card{ position:relative; cursor:pointer; transition:transform .15s cubic-bezier(.2,0,0,1), opacity .2s; }
.mat-side.me .fz-card:hover{ transform:translateY(-4px); }
.fz-card.ko{ cursor:default; } .fz-card.ko .yg{ filter:grayscale(1) brightness(.42); }
.fz-card .yg-art img{ object-position:50% 14%; }
.duel.targeting .fz-card:not(.tgt-ok){ opacity:.4; }
.fz-card.tgt-ok{ outline:3px solid #F2C14E; outline-offset:5px; border-radius:6px; animation:duel-pick .8s ease-in-out infinite alternate; }
@keyframes duel-pick{ from{ transform:scale(1); } to{ transform:scale(1.035); } }
.fz-card.guarded::after{ content:''; position:absolute; z-index:3; top:22%; left:50%; width:30%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%;
  background:#2F6DB5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z'/%3E%3C/svg%3E") center/60% no-repeat; box-shadow:0 0 0 3px #F4EDDC; }
.fz-st{ position:absolute; z-index:3; top:18%; right:-8px; display:flex; flex-direction:column; gap:4px; }
.fs{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font:800 .72rem/1 var(--f); font-style:normal; color:#14100C; background:#F4EDDC; box-shadow:0 0 0 2px #14100C; }
.fs .ic{ width:14px; height:14px; } .fs-charge{ background:#FFD23F; } .fs-stun{ background:#B9A4F0; } .fs-exp{ background:#FF9A88; } .fs-psn{ background:#A7E3B6; } .fs-shd{ background:#A9D3FF; }
.fz-en{ position:absolute; z-index:3; left:50%; bottom:-12px; transform:translateX(-50%); display:flex; gap:3px; padding:3px 5px; border-radius:999px; background:#14100C; }
.fz-en i{ width:9px; height:5px; border-radius:3px; background:rgba(255,255,255,.2); } .fz-en i.on{ background:#5CC8FF; }
.duel .bs-float{ position:absolute; z-index:6; left:0; right:0; top:30%; display:flex; justify-content:center; pointer-events:none; }
.duel .fnum{ position:absolute; font-weight:900; font-stretch:75%; font-size:clamp(1.5rem,2.6vw,2.4rem); line-height:1; color:#fff; -webkit-text-stroke:1.5px #14100C; white-space:nowrap; }
.duel .fnum.heal{ color:#9BF0B3; } .duel .fnum.psn{ color:#C9A2FF; }
.duel .fnum.sys{ padding:4px 10px; border-radius:999px; background:#14100C; color:#F4EDDC; -webkit-text-stroke:0; font:800 .85rem/1.1 var(--f); }

/* kartu aksi di zona aksi */
.az-tile{ display:flex; align-items:center; justify-content:center; gap:8px; height:100%; padding:0 10px; border-radius:7px; color:#14100C; font-size:.82rem; line-height:1.1; overflow:hidden; min-width:0; }
.az-tile b{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.az-tile small{ font-weight:700; color:#5A5246; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.az-tile.set{ justify-content:flex-start; flex-wrap:wrap; align-content:center; column-gap:6px; row-gap:1px; background:var(--parch); cursor:pointer; }
.az-tile.set b{ flex:1; min-width:0; } .az-tile.set small{ flex-basis:100%; padding-left:30px; }
.az-ic{ display:grid; place-items:center; flex:none; width:24px; height:24px; border-radius:7px; background:var(--ac,#565C66); color:#fff; }
.az-ic .ic{ width:15px; height:15px; }
.az-tile.wait{ border:1.5px dashed rgba(244,237,220,.4); color:rgba(244,237,220,.7); font-size:1.2rem; cursor:pointer; }
.az-tile.sel{ outline:2.5px solid #F2C14E; outline-offset:2px; }
.az-tile.wait.sel{ color:#F2C14E; border-color:#F2C14E; }
.az-tile.stunned{ background:#3A2E5E; color:#E7DEFF; } .az-tile.stunned .ic{ width:16px; height:16px; }
.az-tile.empty{ background:transparent; }
/* punggung kartu aksi musuh: merah tua, belah ketupat emas */
.az-tile.back{ position:relative; background:#6A1A12; box-shadow:inset 0 0 0 2px #6A1A12, inset 0 0 0 3.5px #C99A4B; }
.az-tile.back::after{ content:''; width:18px; height:18px; transform:rotate(45deg); border:2px solid #C99A4B; background:#8E2A1D; }
.a-protect{ --ac:#2F6DB5; } .a-skill{ --ac:#B8860B; }

/* panel samping: log ronde + tombol buka aksi */
.duel-side{ grid-area:side; display:flex; flex-direction:column; gap:12px; min-height:0; padding:16px; border-radius:20px; background:var(--panel); border:1px solid var(--gold-line); }
.ds-head{ display:flex; align-items:center; justify-content:space-between; }
.ds-head b{ font:700 1rem/1.2 'Cinzel',serif; color:#E9C77B; letter-spacing:.04em; }
.log{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; overflow:auto; max-height:min(46dvh,430px); font-size:.86rem; line-height:1.35; }
.log li{ padding:6px 10px; border-radius:9px; background:rgba(255,255,255,.05); border-left:3px solid rgba(244,237,220,.25); }
.log li.good{ border-left-color:#E2412F; } .log li.bad{ border-left-color:#E9C77B; } .log li.ok{ border-left-color:#5DBB7E; }
.log .ic{ width:1em; height:1em; vertical-align:-2px; opacity:.85; }
.log b.me{ color:#FFFFFF; } .log b.foe{ color:#E9C77B; } .log .d{ color:#FF8B7A; font-weight:800; } .log .hl{ color:#8FE3A6; font-weight:800; } .log i{ color:#B8AE9C; font-style:normal; }
.log-empty{ margin:0; color:#B8AE9C; font-size:.92rem; }
.duel-hint{ margin:0; padding:10px 12px; border-radius:10px; background:#F2C14E; color:#14100C; font-weight:700; font-size:.86rem; }
.ds-cta{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.ds-cta .btn-lg{ width:100%; } .ds-cta .btn-lg small{ font-weight:700; opacity:.8; }
.rpg.is-duel .ds-cta .btn-ghost{ background:rgba(255,255,255,.1); color:#F3EAD8; }
.ds-note{ margin:0; text-align:center; color:#B8AE9C; font-size:.8rem; }

/* dok bawah: kartu terpilih + aksi */
.dock{ grid-area:dock; display:flex; align-items:center; gap:16px; min-height:104px; padding:10px 16px; border-radius:20px; background:var(--panel); border:1px solid var(--gold-line); }
.dock .actions{ flex:1; justify-content:flex-start; padding:0; gap:8px; }
.dock .act-btn{ width:100px; height:88px; padding:10px; background:var(--parch); border-radius:14px; }
.dock .act-btn.skill{ background:#2A2118; color:#F4EDDC; }
.dock .ab-ic{ width:32px; height:32px; border-radius:10px; font-size:1.1rem; } .dock .ab-n{ font-size:.92rem; }
.dock-who{ flex:none; width:190px; min-width:0; }
.dw-face{ flex:none; width:52px; height:52px; border-radius:10px; overflow:hidden; box-shadow:0 0 0 3px var(--fr); }
.dw-face img{ width:100%; height:100%; object-fit:cover; object-position:50% 14%; display:block; } .dw-face .rpg-mono{ font-size:1rem; }
.dock-who b{ display:block; font:700 1rem/1.15 'Cinzel',serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dock-who small{ display:block; color:#B8AE9C; font-weight:600; }
.dock-who > b, .dock-who > small{ min-width:0; } .dock-who{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; } .dw-face{ grid-row:span 2; }
.dock-msg{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; } .dock-msg b{ font:700 1.05rem/1.2 'Cinzel',serif; } .dock-msg span{ color:#D9CFBD; }
.rpg.is-duel .dock-msg .btn-ghost{ background:rgba(255,255,255,.12); color:#F3EAD8; min-height:40px; }

/* kartu kecil di meja: sisakan gambar + HP */
@container (max-width: 96px){
  .yg-name, .yg-stars, .yg-type, .yg-eff, .yg-stats{ display:none; }
  .yg-in{ gap:3cqi; padding:5cqi; } .yg-art{ margin:0; } .yg-text{ margin-top:0; padding:3cqi 4cqi; flex:none; }
  .yg-hp span{ display:none; } .yg-hp .bs-hp{ height:6cqi; } .yg-hp b{ font-size:10cqi; }
}

/* pilih tim 5 slot */
.tp-slots{ grid-template-columns:repeat(5,minmax(0,140px)); }

@media (max-width: 980px){
  .rpg.is-duel{ --gut:8px; }
  .duel{ --cw:calc((100vw - 2 * var(--gut) - 36px - 4 * clamp(4px,1.6vw,12px)) / 5); grid-template-columns:1fr; grid-template-areas:"mat" "dock" "side"; gap:10px; }
  .mat{ padding:10px 8px; border-radius:16px; } .mat::before{ inset:4px; }
  .mat-row{ gap:clamp(4px,1.6vw,12px); }
  .zone{ padding:2px; border-radius:7px; } .zone::before{ inset:-3px; border-radius:9px; }
  .z-act{ height:42px; padding:2px; }
  .az-tile{ padding:0 4px; gap:4px; font-size:.68rem; } .az-tile.set{ justify-content:center; } .az-tile.set small, .az-tile.set b, .az-tile.stunned b{ display:none; } .az-ic{ width:24px; height:24px; }
  .fz-st{ right:-4px; } .fs{ width:18px; height:18px; font-size:.6rem; } .fs .ic{ width:11px; height:11px; }
  .fz-en{ bottom:-9px; padding:2px 3px; } .fz-en i{ width:6px; height:4px; }
  .dock{ flex-direction:column; align-items:stretch; gap:10px; padding:10px; }
  .dock-who{ width:auto; } .dock .actions{ justify-content:flex-start; }
  .dock .act-btn{ width:calc(25% - 6px); min-width:70px; height:auto; min-height:80px; padding:8px; }
  .ds-cta{ order:-1; margin-top:0; }
  .log{ max-height:none; }
  .tp-slots{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
}
@media (prefers-reduced-motion: reduce){ .rpg.is-duel::after{ animation:none; } .fz-card.tgt-ok{ animation:none; } }