/* Arenas, weather, doubles layout, move effects, draft, pickers, teambuilder. */

/* ===================================================================== arenas */
.field[data-bg="beach"]  { --sky1: #6fc6f2; --sky2: #cdeefa; --ground1: #f2dca0; --ground2: #e3c27a; --hill: #3fa7d6; --plat1: #fff1c9; --plat2: #ecd290; --plat3: #cfae62; }
.field[data-bg="cave"]   { --sky1: #2b2622; --sky2: #4d433a; --ground1: #6b5a49; --ground2: #4a3d30; --hill: #5a4a3a; --plat1: #9b8670; --plat2: #786450; --plat3: #57483a; }
.field[data-bg="night"]  { --sky1: #0d1640; --sky2: #2b3a78; --ground1: #2f5a3c; --ground2: #1f4029; --hill: #26492f; --plat1: #4f7d5a; --plat2: #3a6345; --plat3: #294a32; }
.field[data-bg="snow"]   { --sky1: #a9c7e3; --sky2: #e6f0f8; --ground1: #f4f8fb; --ground2: #d9e6ef; --hill: #e9f1f7; --plat1: #ffffff; --plat2: #dfeaf2; --plat3: #bccfdc; }
.field[data-bg="desert"] { --sky1: #f2b766; --sky2: #fbe2a6; --ground1: #e7c27d; --ground2: #cf9f55; --hill: #d9ac63; --plat1: #f3dba4; --plat2: #ddb877; --plat3: #bf9050; }
.field[data-bg="volcano"]{ --sky1: #3a1410; --sky2: #8a3a1c; --ground1: #4a3530; --ground2: #2e201c; --hill: #3b2a25; --plat1: #6f5048; --plat2: #523a33; --plat3: #3a2924; }
.field[data-bg="forest"] { --sky1: #5f9e6a; --sky2: #a9d39a; --ground1: #5d9b4a; --ground2: #3f7a33; --hill: #487f3a; --plat1: #8cc070; --plat2: #66a050; --plat3: #4b7f3a; }
.field[data-bg="city"]   { --sky1: #f7a46a; --sky2: #fbd4a3; --ground1: #9aa3ad; --ground2: #7b848e; --hill: #8a939d; --plat1: #c4ccd4; --plat2: #a2acb6; --plat3: #838d97; }
.field[data-bg="space"]  { --sky1: #05040f; --sky2: #1d1440; --ground1: #2a2350; --ground2: #15112e; --hill: #231d45; --plat1: #6a5fb0; --plat2: #4a3f8a; --plat3: #342b66; }
/* Scenery accents layered on the sky. */
.field[data-bg="night"] .field-bg::before, .field[data-bg="space"] .field-bg::before {
  background-image: radial-gradient(1.5px 1.5px at 10% 12%, #fff 50%, transparent), radial-gradient(1px 1px at 25% 30%, #fff 50%, transparent),
    radial-gradient(1.5px 1.5px at 40% 8%, #fff 50%, transparent), radial-gradient(1px 1px at 55% 22%, #fff 50%, transparent),
    radial-gradient(2px 2px at 70% 14%, #fff 50%, transparent), radial-gradient(1px 1px at 85% 32%, #fff 50%, transparent),
    radial-gradient(1px 1px at 92% 6%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 33% 40%, #fff 50%, transparent);
  bottom: 50%; animation: twinkle 4s ease-in-out infinite alternate;
}
.field[data-bg="night"] .field-bg::after { background: radial-gradient(circle at 82% 16%, #fff8d8 0 4%, rgb(255 248 216 / .25) 5%, transparent 9%); bottom: 50%; }
.field[data-bg="space"] .field-bg::after { background: radial-gradient(ellipse at 20% 25%, rgb(160 90 255 / .35), transparent 35%), radial-gradient(ellipse at 75% 15%, rgb(60 150 255 / .25), transparent 30%); bottom: 50%; }
.field[data-bg="volcano"] .field-bg::after { background: radial-gradient(ellipse at 50% 0%, rgb(255 120 40 / .45), transparent 60%); bottom: 50%; }
.field[data-bg="beach"] .field-bg::after { background: linear-gradient(transparent 46%, rgb(255 255 255 / .6) 47%, transparent 49%); }
.field[data-bg="city"] .field-bg::before {
  bottom: 52%; top: 22%; opacity: .55;
  background: linear-gradient(90deg, transparent 0 4%, #6c6f8a 4% 11%, transparent 11% 14%, #585b78 14% 22%, transparent 22% 30%, #6c6f8a 30% 35%, transparent 35% 62%, #585b78 62% 70%, transparent 70% 74%, #6c6f8a 74% 83%, transparent 83% 88%, #585b78 88% 95%, transparent 95%);
}
.field[data-bg="cave"] .field-bg::before { background: radial-gradient(ellipse at 50% 30%, rgb(255 220 160 / .18), transparent 60%); }
.field[data-bg="forest"] .field-bg::before {
  bottom: 52%; top: 10%;
  background: radial-gradient(ellipse 9% 40% at 6% 100%, #2f6a2e 98%, transparent), radial-gradient(ellipse 8% 34% at 20% 100%, #3b7a35 98%, transparent),
    radial-gradient(ellipse 10% 44% at 80% 100%, #2f6a2e 98%, transparent), radial-gradient(ellipse 8% 30% at 94% 100%, #3b7a35 98%, transparent);
}
@keyframes twinkle { to { opacity: .55; } }

/* ===================================================================== weather */
.weather-fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .8s; }
.field[data-weather="RainDance"] .weather-fx, .field[data-weather="PrimordialSea"] .weather-fx {
  opacity: .7; background-image: repeating-linear-gradient(105deg, transparent 0 14px, rgb(190 215 255 / .55) 14px 15px, transparent 15px 40px);
  background-size: 200px 200px; animation: rain .35s linear infinite;
}
.field[data-weather="SunnyDay"] .weather-fx, .field[data-weather="DesolateLand"] .weather-fx {
  opacity: 1; background: radial-gradient(circle at 85% -10%, rgb(255 236 150 / .65), rgb(255 200 80 / .15) 35%, transparent 60%); animation: sun 3s ease-in-out infinite alternate;
}
.field[data-weather="Sandstorm"] .weather-fx {
  opacity: .75; background-image: radial-gradient(2px 1px at 20% 30%, #d9b06a 60%, transparent), radial-gradient(2px 1px at 60% 70%, #c99a50 60%, transparent),
    radial-gradient(3px 1px at 80% 20%, #e2c080 60%, transparent), radial-gradient(2px 1px at 40% 80%, #c99a50 60%, transparent), linear-gradient(rgb(210 170 100 / .25), rgb(210 170 100 / .25));
  background-size: 120px 80px, 160px 90px, 140px 70px, 100px 60px, 100% 100%; animation: sand .6s linear infinite;
}
.field[data-weather="Snowscape"] .weather-fx, .field[data-weather="Snow"] .weather-fx {
  opacity: .9; background-image: radial-gradient(3px 3px at 20% 30%, #fff 60%, transparent), radial-gradient(2px 2px at 60% 70%, #fff 60%, transparent),
    radial-gradient(3px 3px at 80% 20%, #fff 60%, transparent), radial-gradient(2px 2px at 40% 80%, #fff 60%, transparent);
  background-size: 140px 140px, 110px 110px, 170px 170px, 90px 90px; animation: snow 4s linear infinite;
}
@keyframes rain { to { background-position: -40px 200px; } }
@keyframes sun { to { filter: brightness(1.15); } }
@keyframes sand { to { background-position: -120px 10px, -160px -10px, -140px 5px, -100px 0, 0 0; } }
@keyframes snow { to { background-position: 30px 140px, -20px 110px, 20px 170px, -10px 90px; } }

/* ===================================================================== doubles layout */
.field.doubles .platform[data-pos="far0"] { width: 26%; height: 9%; right: 4%; top: 44%; }
.field.doubles .platform[data-pos="far1"] { width: 26%; height: 9%; right: 30%; top: 41%; }
.field.doubles .platform[data-pos="near0"] { width: 32%; height: 12%; left: 0%; bottom: 4%; }
.field.doubles .platform[data-pos="near1"] { width: 32%; height: 12%; left: 30%; bottom: 1%; }
.field.doubles .sprite-wrap[data-pos="far0"] { width: 21cqw; height: 21cqw; right: 6.5%; bottom: 51.5%; }
.field.doubles .sprite-wrap[data-pos="far1"] { width: 21cqw; height: 21cqw; right: 32.5%; bottom: 54.5%; z-index: 1; }
.field.doubles .sprite-wrap[data-pos="near0"] { width: 30cqw; height: 30cqw; left: 1%; bottom: 10%; z-index: 3; }
.field.doubles .sprite-wrap[data-pos="near1"] { width: 30cqw; height: 30cqw; left: 31%; bottom: 7%; z-index: 3; }
.field.doubles .hpbox { width: 28%; min-width: 150px; font-size: clamp(10px, 1.6cqw, 13px); padding: 4px 8px; }
.field.doubles .hpbox[data-pos="far1"] { left: 2%; top: 12%; }
.field.doubles .hpbox[data-pos="far0"] { left: 2%; top: 27%; }
.field.doubles .hpbox[data-pos="near0"] { right: 2%; bottom: 33%; }
.field.doubles .hpbox[data-pos="near1"] { right: 2%; bottom: 17%; }
.hpbox { cursor: help; }

/* ===================================================================== move effects */
.fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.fx-p { position: absolute; transform: translate(-50%, -50%); background: var(--c); will-change: transform, opacity; }
.fx-blob, .fx-dot, .fx-bubble { border-radius: 50%; }
.fx-bubble { background: transparent; border: 2px solid var(--c); }
.fx-orb { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--c) 45%, transparent 72%); box-shadow: 0 0 14px var(--c); }
.fx-drop { border-radius: 50% 50% 50% 0; }
.fx-leaf { border-radius: 0 70% 0 70%; }
.fx-shard { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.fx-chunk { clip-path: polygon(20% 0, 90% 15%, 100% 70%, 45% 100%, 0 60%); }
.fx-star { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.fx-bolt { clip-path: polygon(45% 0, 70% 0, 50% 42%, 80% 42%, 30% 100%, 45% 55%, 20% 55%); }
.fx-streak { border-radius: 99px; height: 3px !important; width: 26px !important; }
.fx-ring { border-radius: 50%; background: transparent; border: 3px solid var(--c); }
.fx-smoke { border-radius: 50%; filter: blur(3px); opacity: .8; }
.fx-flash { border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / .9), var(--c) 40%, transparent 70%); }

/* ===================================================================== battle controls */
.targets { display: flex; gap: 8px; flex-wrap: wrap; }
.target-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 4px; border-radius: 10px; border: 2px solid var(--border); background: var(--panel-2); cursor: pointer; font-weight: 600; }
.target-btn img { width: 40px; height: 40px; image-rendering: pixelated; object-fit: contain; }
.target-btn.foe { border-color: #e06a5a; }
.target-btn.ally, .target-btn.self { border-color: #5a8ae0; }
.target-btn:disabled { opacity: .4; cursor: not-allowed; }
.target-btn:hover:not(:disabled) { filter: brightness(1.08); }
.switch-btn.picked { border-color: var(--accent); opacity: 1; }
.replay-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.replay-bar .speed { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.replay-turn { margin-left: auto; font-weight: 600; }
.log-line a { color: var(--accent); }
.room-list small { color: var(--muted); display: block; font-size: 11px; }

/* ===================================================================== draft */
.draft-board { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 10px; }
.draft-head { display: flex; flex-direction: column; gap: 4px; }
.draft-turn { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.draft-turn.mine { color: var(--accent); }
.draft-timer { font-size: 14px; background: var(--panel-2); border-radius: 99px; padding: 1px 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.draft-timer:empty { display: none; }
.draft-help { color: var(--muted); font-size: 13px; }
.draft-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.draft-team { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; }
.draft-team h3 { margin: 0 0 6px; font-size: 14px; }
.draft-picks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.draft-pick { display: flex; flex-direction: column; align-items: center; font-size: 11px; text-align: center; min-height: 64px; background: var(--panel-2); border-radius: 8px; padding: 2px; overflow: hidden; }
.draft-pick img { width: 48px; height: 48px; image-rendering: pixelated; object-fit: contain; }
.draft-pick.empty { border: 1px dashed var(--border); background: transparent; }
.draft-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.draft-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; cursor: pointer;
  background: var(--panel); border: 2px solid var(--border); border-radius: var(--radius); transition: transform .1s, border-color .15s;
}
.draft-card:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); }
.draft-card:disabled { cursor: default; }
.draft-card.picked { opacity: .45; }
.draft-card.picked.mine { border-color: #3a8cf0; opacity: .7; }
.draft-card.picked.theirs { border-color: #e06a5a; }
.draft-card img { width: 96px; height: 96px; image-rendering: pixelated; object-fit: contain; }
.draft-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 6px; font-size: 10px; color: var(--muted); margin-top: 2px; }
.draft-stats b { color: var(--text); }
.draft-owner { position: absolute; top: 4px; left: 4px; font-size: 10px; font-weight: 700; background: var(--panel-2); border-radius: 99px; padding: 0 6px; }

/* ===================================================================== sound menu */
.sound { position: relative; }
.icon-btn { background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .2); color: #fff; border-radius: 99px; width: 32px; height: 32px; cursor: pointer; font-size: 15px; }
.sound-menu {
  position: absolute; right: 0; top: 40px; z-index: 30; background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; min-width: 200px;
}
.sound-menu label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sound-menu input[type=range] { flex: 1; padding: 0; }
.toast-note.error { border-left-color: var(--danger); }

/* ===================================================================== pickers */
.picker-dialog { width: min(760px, 94vw); }
.picker-dialog h2, .text-dialog h2 { color: var(--text); font-size: 18px; text-transform: none; letter-spacing: 0; }
.picker-dialog .row, .text-dialog .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.team-pick { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.team-pick button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; cursor: pointer; }
.team-pick button:hover { border-color: var(--accent); }
.tb-team-icons { display: flex; }
.tb-team-icons img { width: 34px; height: 34px; image-rendering: pixelated; object-fit: contain; }
.heads-chosen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.head-chip { display: flex; align-items: center; gap: 4px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 99px; padding: 2px 10px 2px 2px; font-size: 13px; cursor: pointer; }
.head-chip img { width: 28px; height: 28px; image-rendering: pixelated; object-fit: contain; }
.head-chip.empty { padding: 6px 18px; color: var(--muted); cursor: default; }
.heads-search { width: 100%; margin-bottom: 8px; }
.heads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; max-height: 46vh; overflow-y: auto; }
.head-card { display: flex; flex-direction: column; align-items: center; gap: 1px; background: var(--panel-2); border: 2px solid transparent; border-radius: 10px; padding: 4px; cursor: pointer; font-size: 12px; }
.head-card img { width: 64px; height: 64px; image-rendering: pixelated; object-fit: contain; }
.head-card small { color: var(--muted); font-size: 10px; }
.head-card.picked { border-color: var(--accent); }
.text-dialog { width: min(640px, 94vw); }
.text-dialog textarea { width: 100%; font: 13px/1.4 ui-monospace, Consolas, monospace; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px; }

/* ===================================================================== teambuilder */
.tb { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; padding: 16px; max-width: 1400px; margin: 0 auto; height: calc(100vh - 52px); overflow-y: auto; }
.tb-teams { align-self: start; position: sticky; top: 0; }
.tb-actions { display: flex; gap: 6px; margin-bottom: 10px; }
.tb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tb-team { width: 100%; text-align: left; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.tb-team.active { border-color: var(--accent); }
.tb-team-name { font-weight: 600; }
.tb-team .tb-team-icons img { width: 26px; height: 26px; }
.tb-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tb-empty { color: var(--muted); }
.tb-header { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.tb-name { flex: 1; min-width: 160px; font-weight: 700; font-size: 16px; }
.tb-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.tb-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--panel-2); border: 2px solid var(--border); border-radius: 10px; padding: 6px; cursor: pointer; min-height: 150px; justify-content: center; }
.tb-slot.active { border-color: var(--accent); }
.tb-slot.add { color: var(--muted); font-weight: 600; border-style: dashed; }
.tb-slot:disabled { opacity: .4; cursor: default; }
.tb-slot img { width: 80px; height: 80px; image-rendering: pixelated; object-fit: contain; }
.tb-slot-moves { font-size: 11px; color: var(--muted); text-align: center; }
.tb-set-top { display: flex; gap: 16px; flex-wrap: wrap; }
.tb-sprite img { width: 192px; height: 192px; image-rendering: pixelated; object-fit: contain; background: var(--panel-2); border-radius: 12px; }
.tb-set-info { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 6px; }
.tb-set-info h3 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tb-fields label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.tb-fields label.check { flex-direction: row; align-items: center; color: var(--text); font-size: 14px; }
.tb-ability-desc { font-size: 12px; color: var(--muted); }
.tb-sprites { margin-top: 10px; }
.tb-sprite-row { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; }
.tb-sprite-opt { flex: none; display: flex; flex-direction: column; align-items: center; background: var(--panel-2); border: 2px solid transparent; border-radius: 8px; padding: 2px; cursor: pointer; font-size: 10px; color: var(--muted); max-width: 84px; }
.tb-sprite-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 78px; }
.tb-sprite-opt.active { border-color: var(--accent); }
.tb-sprite-opt img { width: 72px; height: 72px; image-rendering: pixelated; object-fit: contain; }
.tb-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; margin-top: 12px; }
.tb-moves, .tb-stats { display: flex; flex-direction: column; gap: 6px; }
.tb-move { display: flex; flex-direction: column; gap: 2px; }
.tb-move-info { font-size: 12px; color: var(--muted); min-height: 18px; display: flex; align-items: center; gap: 4px; }
.tb-stat { display: grid; grid-template-columns: 34px 32px 1fr 56px 46px 40px; gap: 6px; align-items: center; font-size: 13px; }
.tb-stat input[type=range] { padding: 0; }
.tb-stat input[type=number] { padding: 3px 4px; }
.tb-stat.plus span:first-child { color: #d0453a; font-weight: 700; }
.tb-stat.minus span:first-child { color: #3a6fd0; font-weight: 700; }
.tb-stat-val { font-weight: 700; text-align: right; }
.tb-picker-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.tb-picker-head h3 { margin: 0; }
.tb-search { flex: 1; min-width: 200px; }
.tb-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; max-height: 60vh; overflow-y: auto; }
.tb-sprite img.shiny { filter: hue-rotate(160deg); }

@media (max-width: 1100px) {
  .tb { grid-template-columns: 1fr; height: auto; }
  .tb-teams { position: static; }
  .tb-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tb-cols { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .draft-teams { grid-template-columns: 1fr; }
  .tb-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field.doubles .hpbox { min-width: 0; width: 40%; }
  .tb-stat { grid-template-columns: 30px 28px 1fr 50px 40px 34px; gap: 4px; }
}
.check-row { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.check-row small { color: var(--muted); font-size: 11px; }

.mv-eff.inline { position: static; margin-left: 4px; }

.tb-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 40px 24px; max-width: 560px; margin: 40px auto; }
.tb-empty img { width: 144px; height: 144px; image-rendering: pixelated; }
.tb-empty h2 { font-size: 22px; color: var(--text); text-transform: none; letter-spacing: 0; margin: 0; }
.tb-empty-actions { display: flex; gap: 8px; margin-top: 6px; }

/* Login: one-click random name. */
.login-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.random-name-btn { padding: 10px; font-size: 15px; }

/* Fusion Lab */
.draft-picks.eight { grid-template-columns: repeat(8, 1fr); }
.draft-card.part img { width: 80px; height: 80px; }
.draft-card.lab-option.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
.lab-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
/* Mystery Box */
.mystery-ball {
  grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff;
  background: radial-gradient(circle at 50% 50%, #fff 0 16%, #333 17% 24%, transparent 25%), linear-gradient(#8a5cf0 48%, #333 48% 54%, #f4f4f4 54%);
  font-size: 0; position: relative;
}
.mystery-ball::after { content: "?"; position: absolute; font-size: 13px; color: #fff; text-shadow: 0 1px 2px #000; top: 1px; }
/* Boss Raid */
.field.raid .sprite-wrap[data-pos="far0"] { width: 30cqw; height: 30cqw; right: 3%; bottom: 46%; filter: drop-shadow(0 0 18px rgb(255 80 60 / .55)); }
.field.raid .platform[data-pos="far0"] { width: 32%; height: 11%; right: 2%; top: 44%; background: radial-gradient(#ff9b8a, #c9483a 60%, #7a2219); }
.boss-tag { font-size: .7em; font-weight: 800; letter-spacing: .12em; color: #fff; background: linear-gradient(90deg, #d6463b, #8a1f17); border-radius: 4px; padding: 0 6px; display: inline-block; margin-bottom: 2px; }
.tag.coop { color: var(--success); }