/* ================= SERBU BENTENG: BERANDA BERBARIS-BARIS (online-feed.js) ================= */
.ox-wrap > * { min-width: 0; }
.fx-bar { margin-bottom: 0; }
.sheet.ol-sheet .ol-msg.bad { color: #FCA5A5; }

/* ---- Api kesulitan ---- */
.fx-fl { display: inline-flex; gap: 1px; }
.fx-fl svg { width: 12px; height: 14px; fill: rgba(255,255,255,.2); }
.fx-fl svg.on { fill: var(--tc, #FACC15); filter: drop-shadow(0 0 3px var(--tc, #FACC15)); }

/* ---- Hero "Untukmu" ---- */
.fx-hero { display: flex; flex-direction: column; gap: 8px; }
.fx-hh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fx-hrib { display: inline-flex; align-items: center; gap: 8px; padding: 5px 22px 6px 12px; background: linear-gradient(180deg, #FEF08A, #EAB308); border: 3px solid #1E1A24;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); }
.fx-hrib i { font-style: normal; font-size: 19px; }
.fx-hrib b { font: 400 16px Bungee, Impact, sans-serif; color: #3A2A00; letter-spacing: .5px; }
.fx-hcount { font: 800 13px Nunito, system-ui, sans-serif; color: #CBD5E1; }
.fx-hcount b { color: #FDE68A; font-size: 17px; }
.fx-hscroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 3px 14px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.fx-hscroll::-webkit-scrollbar { display: none; }
.fx-slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); overflow: hidden; cursor: pointer;
  border: 4px solid #1E1A24; border-radius: 24px; background: linear-gradient(135deg, #2A1F55, #120C2A); box-shadow: 0 9px 0 rgba(0,0,0,.5), 0 0 0 3px var(--tc, #FACC15);
  transition: transform .26s ease, opacity .26s ease; }
.fx-slide.out { transform: translateX(-24%) scale(.9); opacity: 0; }
.fx-slide.hell.on { animation: fxHell 2.2s ease-in-out infinite; }
.fx-hv { position: relative; min-height: clamp(150px, 30vw, 270px); background: #0F172A; overflow: hidden; }
.fx-hv canvas, .fx-pv canvas, .fx-rv-pv canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; opacity: 0; transition: opacity .5s, object-position 5s ease-in-out; }
.fx-hv canvas.ready, .fx-pv canvas.ready, .fx-rv-pv canvas { opacity: 1; }
.fx-slide.on .fx-hv canvas.ready { animation: fxPan 20s ease-in-out .8s infinite alternate; }
.fx-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,8,25,.18), rgba(10,8,25,0) 35%, rgba(10,8,25,.7)); }
.fx-sweep { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%); transform: translateX(-120%); animation: obhShine 5s ease-in-out infinite; }
.fx-lg { position: absolute; z-index: 2; top: 6px; left: 6px; width: 34px; height: 34px; }
.fx-lg .ox-lg { width: 100%; height: 100%; }
.fx-lg.big { top: 12px; left: 12px; width: 54px; height: 54px; }
.fx-new { position: absolute; z-index: 3; left: -5px; top: 46px; font: 800 10px Nunito, system-ui, sans-serif; font-style: normal; letter-spacing: .8px; color: #fff; background: #2563EB; border: 2px solid #1E1A24; padding: 2px 10px 2px 8px;
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%); }
.fx-lg.big ~ .fx-new { top: 74px; left: -4px; font-size: 12px; padding: 3px 14px 3px 12px; }
.fx-hi { display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 14px 16px; min-width: 0; }
.fx-why { font: 700 12.5px/1.35 Nunito, system-ui, sans-serif; color: #FDE68A; }
.fx-hname { margin: 0; font: 400 clamp(20px, 4vw, 30px)/1.08 Bungee, Impact, sans-serif; color: #fff; text-shadow: 0 3px 0 #1E1A24, 0 0 16px var(--tc); overflow-wrap: anywhere; }
.fx-hby { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fx-hby .ox-av { width: 34px; height: 34px; }
.fx-hby-t { display: flex; flex-direction: column; min-width: 0; }
.fx-hby-t b { font: 800 14px Nunito, system-ui, sans-serif; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-hby-t small { font: 700 11.5px Nunito, system-ui, sans-serif; color: #94A3B8; }
.fx-htier { display: flex; align-items: center; gap: 8px; }
.fx-htier .fx-fl svg { width: 18px; height: 21px; }
.fx-htier em { font: 400 14px Bungee, Impact, sans-serif; font-style: normal; color: var(--tc); text-shadow: 0 2px 0 #1E1A24; }
.fx-hmed { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fx-hmed > span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px; background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.12); border-radius: 12px; }
.fx-hmed i { font-style: normal; font-size: 14px; }
.fx-hmed b { font: 400 13px Bungee, Impact, sans-serif; color: #fff; }
.fx-hact { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-hact .big { flex: 1 1 140px; }
.fx-hfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fx-dots { display: inline-flex; align-items: center; }
.fx-dots i { width: 8px; height: 8px; margin: 0 3px; border-radius: 4px; background: rgba(255,255,255,.28); transition: width .2s, background .2s; }
.fx-dots i.on { width: 22px; background: #FACC15; }
.fx-hero.done { align-items: center; text-align: center; padding: 18px; gap: 4px; border: 3px dashed rgba(255,255,255,.25); border-radius: 18px; color: #E2E8F0; }
.fx-hero.done b { font: 400 17px Bungee, Impact, sans-serif; color: #FDE68A; }
.fx-hero.done small { font: 700 12.5px Nunito, system-ui, sans-serif; color: #CBD5E1; }

/* ---- Serbu Acak ---- */
.fx-dice { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.fx-dice-main { position: relative; overflow: hidden; flex: 1 1 250px; display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 10px; text-align: left; cursor: pointer; color: #fff;
  border: 3px solid #1E1A24; border-radius: 18px; background: linear-gradient(180deg, #A78BFA, #6D28D9); box-shadow: 0 6px 0 #2E1065, inset 0 2px 0 rgba(255,255,255,.35); transition: transform .12s, filter .12s; }
.fx-dice-main:hover { filter: brightness(1.08); transform: translateY(-2px); }
.fx-dice-main:active { transform: translateY(4px); box-shadow: 0 2px 0 #2E1065; }
.fx-dice-ic { flex: 0 0 auto; width: 50px; height: 50px; }
.fx-dice-ic svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.fx-dice-g { transform-box: view-box; transform-origin: 24px 24px; animation: fxWobble 3.2s ease-in-out infinite; }
.fx-dice-main.roll .fx-dice-g { animation: fxRoll .45s linear infinite; }
.fx-dice-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-dice-tx b { font: 400 20px Bungee, Impact, sans-serif; text-shadow: 0 3px 0 #1E1A24; }
.fx-dice-tx small { font: 700 12px Nunito, system-ui, sans-serif; color: #EDE9FE; }
.fx-tiers { flex: 2 1 300px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fx-tierbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 7px 2px; cursor: pointer; color: #fff;
  border: 3px solid #1E1A24; border-radius: 14px; background: linear-gradient(180deg, rgba(38,32,74,.96), rgba(12,10,26,.96)); box-shadow: 0 5px 0 rgba(0,0,0,.5), 0 0 0 2px var(--tc); transition: transform .12s; }
.fx-tierbtn b { font: 400 12px Bungee, Impact, sans-serif; color: var(--tc); }
.fx-tierbtn .fx-fl svg { width: 14px; height: 17px; }
.fx-tierbtn:hover { transform: translateY(-3px); }
.fx-tierbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.5), 0 0 0 2px var(--tc); }

/* ---- Baris tematik ---- */
.fx-row { --rc: #FACC15; --rc2: #B45309; display: flex; flex-direction: column; gap: 6px; animation: fxRowIn .55s cubic-bezier(.2, 1.2, .4, 1) backwards; animation-delay: calc(var(--ri, 0) * 90ms); }
.fx-row.t-blue { --rc: #60A5FA; --rc2: #1D4ED8; }
.fx-row.t-green { --rc: #4ADE80; --rc2: #15803D; }
.fx-row.t-red { --rc: #FB7185; --rc2: #B91C1C; }
.fx-row.t-purple { --rc: #C084FC; --rc2: #6D28D9; }
.fx-row.t-steel { --rc: #94A3B8; --rc2: #334155; }
.fx-row.t-teal { --rc: #2DD4BF; --rc2: #0F766E; }
.fx-row.t-slate { --rc: #CBD5E1; --rc2: #475569; }
.fx-rh { display: flex; align-items: center; gap: 10px; }
.fx-ric { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; font-size: 21px; border-radius: 50%; border: 3px solid #1E1A24;
  background: linear-gradient(180deg, var(--rc), var(--rc2)); box-shadow: 0 4px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.35); }
.fx-rtx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fx-rtx b { font: 400 clamp(16px, 3vw, 21px) Bungee, Impact, sans-serif; color: #fff; text-shadow: 0 3px 0 #1E1A24, 0 0 12px var(--rc); }
.fx-rtx small { font: 700 12px Nunito, system-ui, sans-serif; color: #CBD5E1; }
.fx-all { flex: 0 0 auto; cursor: pointer; font: 800 12px Nunito, system-ui, sans-serif; color: #E2E8F0; background: rgba(30,41,59,.9); border: 1.5px solid rgba(255,255,255,.28); border-radius: 999px; padding: 6px 12px; }
.fx-all:hover { color: #fff; border-color: var(--rc); }
.fx-rw { position: relative; }
.fx-rs { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  padding: 12px 14px 16px; margin: 0 -14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%); }
.fx-rs::-webkit-scrollbar { display: none; }
.fx-arr { display: none; position: absolute; top: 50%; z-index: 5; width: 40px; height: 40px; margin-top: -26px; place-items: center; cursor: pointer; font: 400 24px/1 Bungee, Impact, sans-serif; color: #3A2A00;
  border: 3px solid #1E1A24; border-radius: 50%; background: linear-gradient(180deg, #FEF08A, #EAB308); box-shadow: 0 4px 0 #854D0E; }
.fx-arr.l { left: -8px; } .fx-arr.r { right: -8px; }
.fx-arr:active { transform: translateY(3px); box-shadow: 0 1px 0 #854D0E; }
@media (hover: hover) and (pointer: fine) { .fx-rw:hover .fx-arr { display: grid; } }

/* ---- Kartu benteng ---- */
.fx-card { --tc: #60A5FA; position: relative; flex: 0 0 auto; width: clamp(172px, 46vw, 214px); display: flex; flex-direction: column; scroll-snap-align: start; cursor: pointer; overflow: hidden;
  border: 3px solid #1E1A24; border-radius: 18px; background: linear-gradient(180deg, #26204A, #120E26); box-shadow: 0 6px 0 rgba(0,0,0,.5), 0 0 0 2px var(--tc);
  transition: transform .18s cubic-bezier(.2, 1.4, .4, 1), box-shadow .18s; animation: fxCardIn .5s cubic-bezier(.2, 1.3, .4, 1) backwards; animation-delay: calc(var(--ci, 0) * 55ms + var(--ri, 0) * 80ms); }
.fx-card:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: 0 12px 0 rgba(0,0,0,.45), 0 0 0 2px var(--tc), 0 0 18px var(--tc); }
.fx-card:hover .fx-pv canvas.ready { object-position: 12% 50%; }
.fx-card:active { transform: translateY(3px) scale(.98); }
.fx-card.hell { box-shadow: 0 6px 0 rgba(0,0,0,.5), 0 0 0 2px var(--tc), 0 0 14px rgba(244,63,94,.55); }
.fx-pv { position: relative; height: 112px; overflow: hidden; background: #0F172A; border-bottom: 3px solid #1E1A24; }
.fx-pv .ox-stamp { top: auto; bottom: 8px; right: 6px; font-size: 14px; z-index: 3; }
.fx-pv .ox-rev-badge { display: none; }
.fx-tier { position: absolute; z-index: 2; top: 6px; right: 6px; display: inline-flex; padding: 3px 7px; border-radius: 999px; background: rgba(10,8,25,.72); border: 2px solid var(--tc); }
.fx-rank { position: absolute; z-index: 2; left: 8px; bottom: -8px; font: 400 54px/1 Bungee, Impact, sans-serif; color: #FDE047; pointer-events: none;
  text-shadow: 3px 0 #1E1A24, -3px 0 #1E1A24, 0 3px #1E1A24, 0 -3px #1E1A24, 2px 2px #1E1A24, -2px 2px #1E1A24, 2px -2px #1E1A24, -2px -2px #1E1A24, 0 6px 0 #1E1A24; }
.fx-body { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 4px; }
.fx-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 32px; font: 400 14px/1.15 Bungee, Impact, sans-serif; color: #fff; overflow-wrap: anywhere; }
.fx-by { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fx-by .ox-av { width: 22px; height: 22px; }
.fx-by small { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 11.5px Nunito, system-ui, sans-serif; color: #CBD5E1; }
.fx-rt { flex: 0 0 auto; font: 800 11px Nunito, system-ui, sans-serif; color: #FDE68A; }
.fx-meter { position: relative; display: block; height: 17px; overflow: hidden; border: 2px solid #1E1A24; border-radius: 9px; background: rgba(255,255,255,.1); }
.fx-meter i { position: absolute; inset: 0 auto 0 0; background: var(--tc); transition: width .8s cubic-bezier(.2, 1, .3, 1); }
.fx-meter i::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: rgba(255,255,255,.28); }
.fx-meter em { position: absolute; inset: 0; display: grid; place-items: center; font: 800 10.5px Nunito, system-ui, sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.fx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.fx-stats > span { text-align: center; padding: 2px 0; font: 800 11.5px Nunito, system-ui, sans-serif; color: #E2E8F0; background: rgba(255,255,255,.07); border-radius: 8px; }
.fx-go { margin: 4px 10px 10px; padding: 7px 10px; }
.fx-go svg { width: 20px; height: 20px; }

/* ---- Pengungkapan lawan (Serbu Acak) ---- */
.fx-reveal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(6,8,20,.84); animation: otaFade .2s ease; }
.fx-rv-card { --tc: #FACC15; width: min(88vw, 340px); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 14px 12px; text-align: center;
  border: 4px solid #1E1A24; border-radius: 22px; background: linear-gradient(180deg, #2A1F55, #120C2A); box-shadow: 0 9px 0 rgba(0,0,0,.5), 0 0 0 3px var(--tc), 0 0 40px var(--tc); animation: fxPop .5s cubic-bezier(.2, 1.5, .4, 1) both; }
.fx-reveal { --tc: #FACC15; }
.fx-rv-card > small { font: 400 13px Bungee, Impact, sans-serif; letter-spacing: 1px; color: #FDE68A; }
.fx-rv-pv { position: relative; width: 100%; height: 110px; overflow: hidden; border: 3px solid #1E1A24; border-radius: 14px; background: #0F172A; }
.fx-rv-pv canvas { animation: fxPan 6s ease-in-out infinite alternate; }
.fx-rv-name { font: 400 22px/1.1 Bungee, Impact, sans-serif; color: #fff; text-shadow: 0 3px 0 #1E1A24, 0 0 14px var(--tc); overflow-wrap: anywhere; animation: fxFlip .6s cubic-bezier(.2, 1.4, .4, 1) .15s both; }
.fx-rv-by { display: inline-flex; align-items: center; gap: 8px; font: 800 14px Nunito, system-ui, sans-serif; color: #E2E8F0; }
.fx-rv-by .ox-av { width: 28px; height: 28px; }
.fx-rv-tier { display: inline-flex; align-items: center; gap: 8px; }
.fx-rv-tier .fx-fl svg { width: 20px; height: 24px; }
.fx-rv-tier em { font: 400 16px Bungee, Impact, sans-serif; font-style: normal; color: var(--tc); text-shadow: 0 2px 0 #1E1A24; }
.fx-rv-bar { display: block; width: 100%; height: 8px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.14); }
.fx-rv-bar i { display: block; height: 100%; background: linear-gradient(90deg, #FEF08A, #EAB308); animation: fxBar 1.5s linear forwards; }

/* ---- Kerangka muat (skeleton) ---- */
.fx-sk-hero, .fx-sk-h, .fx-sk-row i { background: linear-gradient(100deg, rgba(255,255,255,.06) 30%, rgba(255,255,255,.17) 50%, rgba(255,255,255,.06) 70%) 0 0 / 220% 100%; animation: fxShim 1.3s linear infinite; }
.fx-sk-hero { height: clamp(230px, 46vw, 300px); border: 4px solid #1E1A24; border-radius: 24px; }
.fx-sk { display: flex; flex-direction: column; gap: 16px; }
.fx-sk-row { display: flex; flex-direction: column; gap: 10px; }
.fx-sk-h { display: block; width: min(240px, 70%); height: 34px; border-radius: 17px; }
.fx-sk-row > div { display: flex; gap: 12px; overflow: hidden; }
.fx-sk-row i { flex: 0 0 clamp(172px, 46vw, 214px); height: 236px; border: 3px solid #1E1A24; border-radius: 18px; }

@keyframes fxPan { from { object-position: 100% 50%; } to { object-position: 0% 50%; } }
@keyframes fxHell { 0%, 100% { box-shadow: 0 9px 0 rgba(0,0,0,.5), 0 0 0 3px var(--tc), 0 0 0 rgba(244,63,94,0); } 50% { box-shadow: 0 9px 0 rgba(0,0,0,.5), 0 0 0 3px var(--tc), 0 0 26px rgba(244,63,94,.7); } }
@keyframes fxRowIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fxCardIn { from { opacity: 0; transform: translateX(26px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes fxWobble { 0%, 78%, 100% { transform: rotate(0); } 82% { transform: rotate(-14deg); } 88% { transform: rotate(12deg); } 94% { transform: rotate(-6deg); } }
@keyframes fxRoll { to { transform: rotate(360deg); } }
@keyframes fxShim { to { background-position: -220% 0; } }
@keyframes fxPop { from { opacity: 0; transform: scale(.6) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes fxFlip { from { opacity: 0; transform: rotateX(90deg); } to { opacity: 1; transform: none; } }
@keyframes fxBar { from { width: 0; } to { width: 100%; } }

@media (max-width: 700px) {
  .fx-slide { grid-template-columns: 1fr; }
  .fx-hi { padding: 12px 14px 14px; }
  .fx-hv { min-height: 150px; }
  .fx-tiers { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-slide.on .fx-hv canvas.ready, .fx-slide.hell.on, .fx-dice-g, .fx-sweep, .fx-row, .fx-card, .fx-rv-pv canvas, .fx-sk-hero, .fx-sk-h, .fx-sk-row i { animation: none !important; }
}

/* ---- Tombol Bangun tetap berlabel di layar pendek (aturan lama menyembunyikan label tombol bilah) ---- */
.fx-bar #olBuild span { display: inline; }

/* ---- HP mendatar / layar pendek: hero dan kartu diringkas supaya hero + baris pertama muat dalam satu layar ---- */
@media (max-height: 520px) {
  .fx-hrib { padding: 2px 16px 3px 8px; }
  .fx-hrib b { font-size: 12.5px; }
  .fx-hrib i { font-size: 15px; }
  .fx-hcount { font-size: 12px; }
  .fx-hscroll { padding-bottom: 8px; }
  .fx-slide { border-width: 3px; border-radius: 18px; box-shadow: 0 6px 0 rgba(0,0,0,.5), 0 0 0 2px var(--tc, #FACC15); }
  .fx-hv { min-height: 150px; }
  .fx-lg.big { top: 8px; left: 8px; width: 42px; height: 42px; }
  .fx-lg.big ~ .fx-new { top: 56px; font-size: 10px; padding: 2px 10px 2px 8px; }
  .fx-hi { gap: 5px; padding: 8px 12px; }
  .fx-why { display: none; }
  .fx-hname { font-size: 20px; }
  .fx-hby .ox-av { width: 26px; height: 26px; }
  .fx-hby-t b { font-size: 13px; }
  .fx-htier .fx-fl svg { width: 14px; height: 16px; }
  .fx-htier em { font-size: 12px; }
  .fx-hmed { gap: 4px; }
  .fx-hmed > span { padding: 2px 1px; border-radius: 9px; }
  .fx-hmed i { font-size: 11px; }
  .fx-hmed b { font-size: 11.5px; }
  .fx-hact { gap: 6px; flex-wrap: nowrap; }
  .fx-hact .ox-btn { padding: 5px 10px; font-size: 12px; }
  .fx-hact .ox-btn.big { padding: 5px 14px; font-size: 15px; }
  .fx-hact .big { flex: 1 1 auto; }
  .fx-dice { gap: 7px; flex-wrap: nowrap; }
  .fx-dice-main { flex: 1 1 0; padding: 4px 10px 4px 7px; border-radius: 14px; box-shadow: 0 4px 0 #2E1065, inset 0 2px 0 rgba(255,255,255,.35); }
  .fx-dice-ic { width: 34px; height: 34px; }
  .fx-dice-tx b { font-size: 15px; }
  .fx-dice-tx small { font-size: 10.5px; }
  .fx-tiers { flex: 1.6 1 0; gap: 6px; }
  .fx-tierbtn { padding: 4px 2px; gap: 1px; border-radius: 12px; box-shadow: 0 4px 0 rgba(0,0,0,.5), 0 0 0 2px var(--tc); }
  .fx-tierbtn b { font-size: 10.5px; }
  .fx-tierbtn .fx-fl svg { width: 11px; height: 13px; }
  .fx-ric { width: 34px; height: 34px; font-size: 17px; }
  .fx-rtx b { font-size: 15px; }
  .fx-rtx small { font-size: 11px; }
  .fx-rs { padding-top: 8px; padding-bottom: 12px; }
  .fx-card { width: 168px; border-radius: 15px; }
  .fx-pv { height: 84px; }
  .fx-lg { width: 28px; height: 28px; }
  .fx-tier { padding: 2px 5px; }
  .fx-tier .fx-fl svg { width: 10px; height: 12px; }
  .fx-rank { font-size: 42px; bottom: -6px; }
  .fx-body { gap: 4px; padding: 6px 8px 2px; }
  .fx-name { font-size: 12.5px; min-height: 28px; }
  .fx-meter { height: 15px; }
  .fx-meter em { font-size: 10px; }
  .fx-stats > span { font-size: 11px; padding: 1px 0; }
  .fx-go { margin: 3px 8px 8px; padding: 5px 8px; font-size: 13px; }
  .fx-rv-card { gap: 5px; padding: 10px 12px 10px; }
  .fx-rv-pv { height: 76px; }
  .fx-rv-name { font-size: 18px; }
  .fx-sk-hero { height: 176px; }
  .fx-sk-row i { flex-basis: 168px; height: 215px; }
  .fx-sk-h { height: 28px; }
}
.fx-rank ~ .fx-new { display: none; }

/* Aturan global `canvas { touch-action: none }` (game.css) mematikan geseran jari yang dimulai di atas gambar.
   Kanvas pratinjau hanya hiasan: biarkan sentuhan menembus ke kartu/penggulir di bawahnya. */
.fx-hv canvas, .fx-pv canvas, .fx-rv-pv canvas { pointer-events: none; touch-action: pan-x pan-y; cursor: pointer; }
.fx-slide, .fx-card, .fx-hv, .fx-pv { touch-action: pan-x pan-y; }