/* Page 40 · kill effects. On 40_fx.css. */
.fxp code { font-size: 12.5px; color: #FFE7A8; background: rgba(0, 0, 0, 0.28); padding: 1px 5px; border-radius: 5px; }

/* 01 today */
.today-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.beats h3 { font-size: 22px; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; margin-bottom: 12px; }
.beat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: b; }
.beat-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; color: var(--cream-2); line-height: 1.4; }
.beat-list li i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 400 14px/1 var(--f-display); font-style: normal; color: var(--ink); background: var(--yellow); border: 2.5px solid var(--ink); box-shadow: 1px 2px 0 var(--ink); }
.beat-list li b { display: block; font: 400 14.5px/1.15 var(--f-display); letter-spacing: 0.04em; color: #fff; }
.have { margin-top: 14px; display: grid; gap: 8px; }
.have div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.26); }
.have b { font: 400 22px/1 var(--f-display); color: var(--yellow); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-align: center; }
.have span { font-size: 13px; color: var(--cream-2); line-height: 1.35; }
.have em { font-style: normal; color: #FF9AA8; font-weight: 800; }
.wordwall { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 16px; border: 4px solid var(--ink); border-radius: 22px; background: radial-gradient(70% 120% at 50% 0%, rgba(255, 210, 63, 0.08), transparent 60%), linear-gradient(180deg, #221C3E, #15112A); box-shadow: 3px 7px 0 var(--ink); }
.ww { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 4px 6px; border-radius: 10px; border: 2.5px solid var(--ink); background: linear-gradient(180deg, #3D3563, #2A2448); box-shadow: 2px 3px 0 var(--ink); transform: rotate(var(--r, 0deg)); transition: transform 0.2s var(--spring); }
.ww:hover { transform: rotate(0deg) scale(1.08); }
.ww i { width: 40px; height: 20px; flex: none; }
.ww i canvas { width: 40px; height: 20px; display: block; }
.ww b { font: 400 15px/1 var(--f-display); letter-spacing: 0.03em; color: var(--c); -webkit-text-stroke: 3.4px var(--ink); paint-order: stroke fill; }

/* 02 controls */
.famrow { margin-top: 12px; }
.fam-seg button { padding: 4px 10px 4px 6px; grid-auto-flow: column; gap: 6px; align-items: center; }
.fam-ic { width: 44px; height: 22px; display: block; }
.fam-ic canvas { width: 44px; height: 22px; display: block; }
.skin-seg button { grid-auto-flow: row; padding: 5px 11px; }
.skin-seg button > i, .sk-dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--ink); vertical-align: -1px; margin-right: 5px; }
.skin-seg.is-off { opacity: 0.38; pointer-events: none; }
.sk-classic { background: conic-gradient(#2F7BFF 0 25%, #FF8A1F 0 50%, #1FBF5C 0 75%, #FF4FA3 0); }
.sk-gold { background: radial-gradient(circle at 35% 35%, #FFF3B0, #FFC21A 55%, #C27A00); }
.sk-neon { background: #1E1B2B; box-shadow: inset 0 0 0 2px #3FEAF5, 0 0 6px #3FEAF5; }
.sk-camo { background: radial-gradient(circle at 30% 30%, #A89060 0 30%, transparent 31%), radial-gradient(circle at 70% 65%, #46562A 0 32%, transparent 33%), #7A8C45; }
.sk-cartoon { background: linear-gradient(135deg, #FF3352 0 50%, #FFD23F 50%); }
.sk-ice { background: radial-gradient(circle at 35% 35%, #FFFFFF, #BFEAFF 55%, #4A9FD0); }
.sk-taped { background: repeating-linear-gradient(-45deg, #FFD23F 0 4px, #1D1B24 4px 6px); }
.studio { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.side { display: grid; gap: 10px; align-content: start; }
.famlist { font: 700 14px/1.35 var(--f-body) !important; color: #fff !important; margin-bottom: 6px !important; }

/* the nine families */
.fam-head { margin-top: 28px; }
.fam-head h3 { margin: 0 0 12px; font: 400 24px/1 var(--f-display); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.fam-head h3 small { font: 700 12.5px/1 var(--f-body); color: var(--cream-3); -webkit-text-stroke: 0; margin-left: 8px; letter-spacing: 0.04em; }
.fam-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fg { margin: 0; display: grid; gap: 7px; }
.fg figcaption { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; }
.fg figcaption b { font: 400 16px/1 var(--f-display); letter-spacing: 0.04em; color: #fff; }
.fg .fg-w { justify-self: end; font: 400 14px/1 var(--f-display); color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.fg small { grid-column: 1 / -1; font-size: 12px; color: var(--cream-3); line-height: 1.3; }

/* 03 skins */
.layopts { margin-top: 18px; }
.gallery-head { margin-top: 34px; }
.gallery-head h3 { margin: 0 0 12px; font: 400 24px/1 var(--f-display); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.gallery-head h3 small { font: 700 12.5px/1 var(--f-body); color: var(--cream-3); -webkit-text-stroke: 0; margin-left: 8px; letter-spacing: 0.04em; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gallery figure { margin: 0; display: grid; gap: 8px; }
.gallery figcaption { font-size: 13px; color: var(--cream-2); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gallery figcaption b { font: 400 15px/1 var(--f-display); letter-spacing: 0.04em; color: #fff; margin-right: 4px; }

/* 04 who wins */
.prec { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.prec-side { display: grid; gap: 14px; }
.loadout { display: grid; gap: 10px; }
.loadout h3 { -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; font-size: 20px; }
.tg { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; align-items: center; cursor: pointer; font-size: 14px; color: var(--cream-2); }
.tg input { position: absolute; opacity: 0; pointer-events: none; }
.tg__sw { position: relative; width: 54px; height: 30px; border-radius: 99px; border: 3px solid var(--ink); background: #3A3458; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.35), 1px 3px 0 var(--ink); transition: background 0.2s; }
.tg__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #FFF6E0; border: 2.5px solid var(--ink); transition: transform 0.25s var(--spring); }
.tg input:checked + .tg__sw { background: var(--green); }
.tg input:checked + .tg__sw::after { transform: translateX(24px); }
.tg input:focus-visible + .tg__sw { outline: 3px solid var(--yellow); outline-offset: 2px; }
.prec-out { padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); border: 2px dashed rgba(255, 246, 224, 0.22); display: grid; gap: 4px; }
.prec-out #precOut { font: 400 20px/1.1 var(--f-display); letter-spacing: 0.03em; color: var(--mint); }
.prec-out #precOut b { color: var(--yellow); }
.prec-out #precOut small { display: block; font: 700 12px/1.2 var(--f-body); color: var(--cream-3); letter-spacing: 0.04em; }
.pr-list { display: grid; gap: 10px; }
.pr { position: relative; cursor: pointer; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: stretch; border: 3px solid var(--ink); border-radius: 18px; background: linear-gradient(180deg, #2E2850, #1E1A33); box-shadow: 2px 5px 0 var(--ink); transition: box-shadow 0.2s, transform 0.2s var(--out), background 0.2s; }
.pr:hover { transform: translateX(3px); }
.pr-top { display: contents; }
.pr-top .fx-letter { grid-row: 1 / span 3; width: auto; height: auto; border-radius: 15px 0 0 15px; border: 0; border-right: 3px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35); font-size: 30px; background: linear-gradient(180deg, #4A4270, #2E2850); color: rgba(255, 246, 224, 0.7); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; transition: background 0.2s; }
.pr.on .pr-top .fx-letter { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 60%, var(--yellow-lo)); color: #fff; }
.pr-top b { grid-column: 2; padding: 12px 14px 0; font: 400 18px/1 var(--f-display); letter-spacing: 0.03em; color: #fff; }
.pr .pr-rec { position: absolute; right: 12px; top: -12px; transform: rotate(3deg); font-size: 10.5px; padding: 4px 8px 3px; }
.pr p { grid-column: 2; margin: 0; padding: 5px 14px 0; font-size: 13px; color: var(--cream-2); line-height: 1.35; }
.pr .pick { grid-column: 2; justify-self: start; margin: 8px 14px 12px; }
.pr.on { background: linear-gradient(180deg, #3A3366, #241E40); box-shadow: 2px 5px 0 var(--ink), 0 0 0 3px var(--mint); }
.pr.on::after { content: "\25B6  PLAYING"; position: absolute; right: 12px; bottom: 12px; font: 800 9.5px/1 var(--f-body); letter-spacing: 0.12em; color: var(--mint); }
.pr.is-picked { box-shadow: 2px 5px 0 var(--ink), 0 0 0 3px var(--yellow); }

/* 05 eight */
.eight { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.rules { margin-top: 14px; }

@media (max-width: 1080px) {
  .today-grid, .studio, .prec, .eight { grid-template-columns: minmax(0, 1fr); }
  .fam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .gallery, .fam-grid { grid-template-columns: minmax(0, 1fr); }
  .fam-seg button { font-size: 13px; }
  .fam-ic, .fam-ic canvas { width: 34px; height: 17px; }
  .have div { grid-template-columns: 56px minmax(0, 1fr); }
  .ww b { font-size: 13px; }
}