/* Visual interactive play — distinct from PS's pixel-art battlefield.
   Soft gradient backdrop, large clear sprites, big HP bars, type-colored
   move buttons. Animated sprites come from play.pokemonshowdown.com/sprites/
   over the network (so the user doesn't need the sibling client repo). */

/* Play-specific variables — extends theme.css shared vars.
   Light off-white theme. */
:root {
	--bg-row-active: #eae7e0;
	--bg-row-active-border: #5b7ff5;
	--bg-stage: linear-gradient(180deg, #e8e4dd 0%, #ece9e3 60%, #f0ede8 100%);
	--bg-stage-foe: rgba(220, 80, 80, 0.08);
	--bg-stage-mine: rgba(60, 120, 220, 0.08);
	--text-item: #5a78b8;
	--text-ability: #3a8a58;
	--hp-green: #3ab850;
	--hp-yellow: #d8a020;
	--hp-red: #d04040;
	--hp-bg: #ddd9d2;
	--note-bg: #eceae5;
	--cat-status-bg: #e2e0da;
	--cat-status-fg: #4a4a48;
}

[data-theme="dark"] {
	--bg-stage: linear-gradient(180deg, #141c30 0%, #181e34 60%, #1a2238 100%);
	--bg-stage-foe: rgba(220, 80, 80, 0.10);
	--bg-stage-mine: rgba(60, 120, 220, 0.10);
	--text-item: #7a9ad8;
	--text-ability: #50b070;
	--hp-bg: #2a3048;
	--note-bg: #1a2038;
	--cat-status-bg: #222a44;
	--cat-status-fg: #9aa0b4;
}

body {
	padding: 16px;
	min-height: 100vh;
}

#header {
	display: flex; justify-content: space-between; align-items: flex-end;
	gap: 16px; margin-bottom: 12px;
}
#header h1 { font-size: 18px; margin: 0 0 4px; font-weight: 600; }
#header #field { display: flex; gap: 6px; }
.field-tag {
	padding: 3px 9px; border-radius: 12px; font-size: 11px; font-weight: 500;
	background: var(--bg-panel); border: 1px solid var(--border); color: var(--text);
}
.field-tag.weather { background: rgba(196, 138, 40, 0.12); border-color: rgba(196, 138, 40, 0.3); color: #8a6818; }
.field-tag.terrain { background: rgba(50, 150, 100, 0.12); border-color: rgba(50, 150, 100, 0.3); color: #2a7850; }
.field-tag.hazard { background: rgba(200, 60, 60, 0.12); border-color: rgba(200, 60, 60, 0.3); color: #b03030; }
.field-tag.pseudo { background: rgba(130, 70, 190, 0.12); border-color: rgba(130, 70, 190, 0.3); color: #6a3aaa; }

/* Per-side effect chips, shown inside each stage row (hazards / screens /
   tailwind / etc.). Spikes-style entries show as "×N" (layers); reflect /
   screens / tailwind / safeguard / etc. show "(Nt)" turns-left. */
.side-effects { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.side-fx {
	font-size: 10px; padding: 2px 7px; border-radius: 10px;
	background: var(--bg-panel); border: 1px solid var(--border);
	color: var(--text);
}
.side-fx.stealthrock, .side-fx.spikes, .side-fx.toxicspikes, .side-fx.stickyweb {
	background: rgba(200, 60, 60, 0.10); border-color: rgba(200, 60, 60, 0.25); color: #b03030;
}
.side-fx.reflect, .side-fx.lightscreen, .side-fx.auroraveil {
	background: rgba(60, 100, 200, 0.10); border-color: rgba(60, 100, 200, 0.25); color: #3060b0;
}
.side-fx.tailwind, .side-fx.safeguard, .side-fx.mist, .side-fx.luckychant {
	background: rgba(50, 150, 100, 0.10); border-color: rgba(50, 150, 100, 0.25); color: #2a7850;
}
.badge a { color: var(--accent); text-decoration: none; font-size: 13px; }
.badge a:hover { text-decoration: underline; }

/* ===== Main 3-column layout: trays | stage+actions | log ===== */
#layout {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) minmax(440px, 2fr) minmax(280px, 1.2fr);
	gap: 14px;
	align-items: start;
}
.col { display: flex; flex-direction: column; gap: 12px; }

/* ===== Panels ===== */
.panel {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 12px;
	box-shadow: var(--shadow-soft);
}
.panel h2 {
	font-size: 12px; margin: 0 0 10px; color: var(--text-muted);
	text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600;
}

/* ===== Stage ===== */
#stage {
	background: var(--bg-stage);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 16px;
	min-height: 380px;
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 12px;
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: background 400ms ease;
}
/* Weather/terrain-reactive backdrops. Subtle wash over the base gradient so
   the stage feels like it's set in the right environment without resorting
   to pixel-art battlefields. */
#stage.weather-sunnyday, #stage.weather-desolateland {
	background: linear-gradient(180deg, #f0e4c8 0%, #eedcb8 55%, #ede0c4 100%);
}
#stage.weather-raindance, #stage.weather-primordialsea {
	background: linear-gradient(180deg, #d8e4f0 0%, #ccdcec 55%, #d4e0ee 100%);
}
#stage.weather-sandstorm {
	background: linear-gradient(180deg, #ece0c8 0%, #e4d8bc 55%, #e8dcc4 100%);
}
#stage.weather-snow, #stage.weather-snowscape, #stage.weather-hail {
	background: linear-gradient(180deg, #e4eaf0 0%, #dce4ee 55%, #e0e6f0 100%);
}
#stage.weather-deltastream {
	background: linear-gradient(180deg, #e0e2e8 0%, #d8dce4 55%, #dce0e6 100%);
}
#stage.terrain-electricterrain { box-shadow: inset 0 0 40px rgba(220, 180, 30, 0.20), var(--shadow-card); }
#stage.terrain-grassyterrain   { box-shadow: inset 0 0 40px rgba(80, 170, 60, 0.18), var(--shadow-card); }
#stage.terrain-mistyterrain    { box-shadow: inset 0 0 40px rgba(220, 130, 160, 0.20), var(--shadow-card); }
#stage.terrain-psychicterrain  { box-shadow: inset 0 0 40px rgba(220, 70, 120, 0.15), var(--shadow-card); }

/* Scenario backdrop — a tinted image painted behind the stage content via a
   ::before pseudo-element so it doesn't interfere with z-ordering of the
   stage rows. multiply blend keeps weather/terrain cues visible. */
#stage { position: relative; }
#stage.has-backdrop::before {
	content: ''; position: absolute; inset: 0;
	background-image: var(--backdrop-url);
	background-size: cover; background-position: center;
	mix-blend-mode: multiply;
	opacity: 0.55;
	pointer-events: none;
	border-radius: inherit;
}
#stage > .stage-side { position: relative; z-index: 1; }
.stage-side { display: flex; flex-direction: column; gap: 8px; }
.stage-side.doubles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stage-side.doubles .stage-row { min-height: 0; }

/* Trainer overlays — large semi-transparent sprites pinned to the corners of
   the battle box. Decorative; ignore pointer events so they don't intercept
   tooltip / hover. The foe sits top-right and mirrors-faces left toward the
   action; the player sits bottom-left. */
.trainer-overlay {
	position: absolute;
	width: 200px; height: 200px;
	object-fit: contain;
	image-rendering: pixelated;
	pointer-events: none;
	z-index: 0;          /* below stage rows, above the backdrop */
	opacity: 0.35;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
	transition: opacity 200ms;
}
.trainer-overlay.foe  { top: -14px;    right: -16px; transform: scaleX(-1); }
.trainer-overlay.mine { bottom: -14px; left:  -16px; }
#stage:hover .trainer-overlay { opacity: 0.45; }

/* Pseudo-weather visual indicators. Trick Room flips the stage vertically by
   a hair (the "inverted speed" feel); Gravity adds a soft downward fade;
   Magic Room desaturates items implicitly via a vignette. Each effect can be
   toggled independently via classes that play.js maintains. */
#stage.pseudo-trickroom {
	box-shadow: var(--shadow-card),
		inset 0 0 0 3px rgba(140, 80, 200, 0.35),
		inset 0 0 60px rgba(140, 80, 200, 0.12);
}
#stage.pseudo-trickroom::after {
	content: 'TRICK ROOM';
	position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
	font-size: 10px; font-weight: 800; letter-spacing: 3px;
	color: rgba(120, 60, 180, 0.7);
	pointer-events: none; z-index: 2;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}
#stage.pseudo-gravity {
	box-shadow: var(--shadow-card),
		inset 0 -40px 60px rgba(100, 80, 50, 0.20);
}
#stage.pseudo-magicroom {
	box-shadow: var(--shadow-card),
		inset 0 0 50px rgba(180, 180, 180, 0.25);
}
#stage.pseudo-wonderroom {
	box-shadow: var(--shadow-card),
		inset 0 0 0 3px rgba(255, 165, 100, 0.45);
}
#stage.pseudo-fairylock {
	box-shadow: var(--shadow-card),
		inset 0 0 50px rgba(255, 192, 220, 0.30);
}
.stage-row {
	display: grid; grid-template-columns: 1fr auto;
	gap: 14px; align-items: center;
	padding: 10px; border-radius: 8px;
	min-height: 0;
}
.stage-row[hidden] { display: none; }
.stage-row.foe { background: var(--bg-stage-foe); }
.stage-row.mine { background: var(--bg-stage-mine); grid-template-columns: auto 1fr; }
.stage-row .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; }
.stage-info {
	display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.stage-name-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.stage-species { font-weight: 700; font-size: 17px; }
.stage-level { color: var(--text-muted); font-size: 12px; }
.stage-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 10px; flex-wrap: wrap; }
.stage-meta .mon-item { color: var(--text-item); }
.stage-meta .mon-ability { color: var(--text-ability); }

.sprite-wrap {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	width: 144px; height: 144px;
	flex-shrink: 0;
}
.sprite-wrap img {
	max-width: 100%; max-height: 100%;
	image-rendering: pixelated;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
	transition: opacity 300ms ease, transform 300ms ease, filter 300ms ease;
}
.sprite-wrap.fainted img { opacity: 0.3; filter: grayscale(1); }

/* ----- Battle animations ----- */

/* Switch: new mon slides in from offscreen */
@keyframes slide-in-foe {
	from { transform: translateX(60px) scale(0.7); opacity: 0; }
	to   { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes slide-in-mine {
	from { transform: translateX(-60px) scale(0.7); opacity: 0; }
	to   { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes slide-out-foe {
	from { transform: translateX(0) scale(1); opacity: 1; }
	to   { transform: translateX(60px) scale(0.7); opacity: 0; }
}
@keyframes slide-out-mine {
	from { transform: translateX(0) scale(1); opacity: 1; }
	to   { transform: translateX(-60px) scale(0.7); opacity: 0; }
}
.sprite-wrap.anim-enter-foe img  { animation: slide-in-foe 400ms ease-out both; }
.sprite-wrap.anim-enter-mine img { animation: slide-in-mine 400ms ease-out both; }
.sprite-wrap.anim-exit-foe img   { animation: slide-out-foe 300ms ease-in both; }
.sprite-wrap.anim-exit-mine img  { animation: slide-out-mine 300ms ease-in both; }

/* Faint: grayscale then drop into nothing */
@keyframes faint-gray {
	from { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.18)); }
	to   { filter: grayscale(1) drop-shadow(0 4px 8px rgba(0,0,0,0.18)); }
}
@keyframes faint-drop {
	0%   { transform: translateY(0); opacity: 1; }
	60%  { transform: translateY(50px); opacity: 0.3; }
	100% { transform: translateY(60px); opacity: 0; }
}
.sprite-wrap.anim-faint-gray img { animation: faint-gray 400ms ease-out forwards; }
.sprite-wrap.anim-faint-drop img {
	animation: faint-drop 700ms ease-in forwards;
	filter: grayscale(1) drop-shadow(0 4px 8px rgba(0,0,0,0.18));
}

/* Damage: shake */
@keyframes damage-shake {
	0%, 100% { transform: translateX(0); }
	15%  { transform: translateX(-6px); }
	30%  { transform: translateX(5px); }
	45%  { transform: translateX(-4px); }
	60%  { transform: translateX(3px); }
	75%  { transform: translateX(-2px); }
	90%  { transform: translateX(1px); }
}
.sprite-wrap.anim-damage img { animation: damage-shake 350ms ease-out; }

/* Damage flash: brief white overlay */
@keyframes damage-flash {
	0%   { opacity: 0; }
	20%  { opacity: 0.5; }
	100% { opacity: 0; }
}
.sprite-wrap.anim-damage::after {
	content: '';
	position: absolute; inset: 0;
	background: white; border-radius: 8px;
	animation: damage-flash 300ms ease-out both;
	pointer-events: none;
}

/* Heal: brief green glow */
@keyframes heal-glow {
	0%   { box-shadow: 0 0 0 0 rgba(60, 200, 88, 0); }
	40%  { box-shadow: 0 0 20px 6px rgba(60, 200, 88, 0.4); }
	100% { box-shadow: 0 0 0 0 rgba(60, 200, 88, 0); }
}
.sprite-wrap.anim-heal { animation: heal-glow 600ms ease-out; }

/* Boost up: brief upward pulse */
@keyframes boost-up {
	0%   { box-shadow: 0 0 0 0 rgba(100, 180, 255, 0); }
	40%  { box-shadow: 0 -4px 16px 4px rgba(100, 180, 255, 0.35); }
	100% { box-shadow: 0 0 0 0 rgba(100, 180, 255, 0); }
}
@keyframes boost-down {
	0%   { box-shadow: 0 0 0 0 rgba(255, 100, 100, 0); }
	40%  { box-shadow: 0 4px 16px 4px rgba(255, 100, 100, 0.35); }
	100% { box-shadow: 0 0 0 0 rgba(255, 100, 100, 0); }
}
.sprite-wrap.anim-boost-up   { animation: boost-up 500ms ease-out; }
.sprite-wrap.anim-boost-down { animation: boost-down 500ms ease-out; }

/* Status inflicted: brief purple pulse */
@keyframes status-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(200, 160, 240, 0); }
	40%  { box-shadow: 0 0 18px 5px rgba(200, 160, 240, 0.4); }
	100% { box-shadow: 0 0 0 0 rgba(200, 160, 240, 0); }
}
.sprite-wrap.anim-status { animation: status-pulse 500ms ease-out; }

/* Action panel fade-in */
@keyframes actions-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
#actions { animation: actions-fade 200ms ease-out; }

/* Log event slide-in */
@keyframes log-slide {
	from { opacity: 0; transform: translateX(-8px); }
	to   { opacity: 1; transform: translateX(0); }
}
.log-ev { animation: log-slide 150ms ease-out; }

/* ===== HP bar ===== */
.hp-bar-row { display: flex; gap: 8px; align-items: center; }
.hp-bar {
	flex: 1; height: 10px; background: var(--hp-bg); border-radius: 5px;
	overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.hp-fill {
	height: 100%; background: var(--hp-green);
	transition: width 350ms ease-out, background-color 200ms;
	border-radius: 5px;
}
.hp-fill.warn { background: var(--hp-yellow); }
.hp-fill.danger { background: var(--hp-red); }
.hp-text {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 12px; color: var(--text-muted); min-width: 70px; text-align: right;
}

/* ===== Status & boosts ===== */
.status-badge {
	display: inline-block; padding: 1px 7px; border-radius: 3px;
	font-size: 10px; font-weight: 700; text-transform: uppercase;
}
.status-brn { background: #f55; color: white; }
.status-par { background: #fc3; color: #553; }
.status-psn, .status-tox { background: #a4a; color: white; }
.status-slp { background: #aab; color: white; }
.status-frz { background: #8cc; color: white; }
.tera-badge {
	display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10px;
	background: linear-gradient(90deg, #fdf, #cdf); color: #535;
	font-weight: 600;
}
.boosts { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 2px; }
.boost {
	padding: 1px 5px; border-radius: 3px;
	font-size: 10px; font-family: ui-monospace, monospace; font-weight: 600;
}
.boost.up { background: #cfd; color: #262; }
.boost.down { background: #fcc; color: #722; }

/* ===== Effect toast (popup over stage row) ===== */
.stage-row { position: relative; }
.effect-toast {
	position: absolute;
	top: 4px;
	left: 50%;
	transform: translateX(-50%) translateY(-8px);
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 20;
	text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.effect-toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.effect-toast.item    { background: #fdf4e0; color: #7a5c10; border: 1px solid #d8c080; }
.effect-toast.ability { background: #e8f0fa; color: #2a5080; border: 1px solid #90b8e0; }
.effect-toast.move    { background: #f0e8f8; color: #5a3080; border: 1px solid #b890d8; }
.effect-toast.status  { background: #fce8e8; color: #8a2020; border: 1px solid #e0a0a0; }

/* ===== Boost annotation (floats near mon box on stat change) ===== */
.boost-annotation {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 700;
	font-family: ui-monospace, monospace;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s ease, transform 0.25s ease;
	z-index: 20;
}
.boost-annotation.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.boost-annotation.up   { background: rgba(40, 140, 40, 0.9); color: #fff; }
.boost-annotation.down { background: rgba(180, 40, 40, 0.9); color: #fff; }

/* ===== Animation engine FX container ===== */
.anim-fx-container {
	position: absolute; inset: 0;
	pointer-events: none; overflow: hidden; z-index: 25;
}
.anim-bg-effect {
	position: absolute; inset: 0;
	pointer-events: none; z-index: 0;
}

/* ===== Team tray ===== */
.tray-list { display: flex; flex-direction: column; gap: 4px; }
.tray-mon {
	display: grid; grid-template-columns: 36px 1fr auto;
	gap: 6px; align-items: center;
	padding: 4px 6px; border-radius: 5px;
	border: 1px solid transparent;
	background: var(--bg-row);
}
.tray-mon.active { background: var(--bg-row-active); border-color: var(--bg-row-active-border); font-weight: 600; }
.tray-mon.fainted { opacity: 0.45; }
.tray-mon.fainted .tray-name { text-decoration: line-through; }
.tray-icon {
	width: 36px; height: 32px; display: flex; align-items: center; justify-content: center;
	background: rgba(127, 127, 127, 0.10); border-radius: 4px;
}
.tray-icon img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.tray-info { font-size: 12px; min-width: 0; }
.tray-name { color: var(--text); }
.tray-hp-sub {
	font-family: ui-monospace, monospace; font-size: 10px; color: var(--text-muted);
}
.tray-hp-bar {
	width: 50px; height: 4px; background: var(--hp-bg); border-radius: 2px; overflow: hidden;
}
.tray-hp-fill { height: 100%; background: var(--hp-green); }
.tray-hp-fill.warn { background: var(--hp-yellow); }
.tray-hp-fill.danger { background: var(--hp-red); }
.tray-hp-fill.fainted { background: #999; }

/* ===== Actions ===== */
#actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}
#actions .action-note {
	grid-column: 1 / -1;
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
	color: var(--text-muted); padding: 6px 0 2px;
}
.move-btn, .switch-btn {
	display: flex; flex-direction: column; gap: 3px; align-items: stretch;
	padding: 8px 10px;
	border: 1px solid var(--border); border-radius: 6px;
	background: var(--bg-panel);
	cursor: pointer;
	font: inherit; color: var(--text); text-align: left;
	transition: transform 80ms ease-out, box-shadow 120ms;
}
.move-btn:hover:not(:disabled), .switch-btn:hover:not(:disabled) {
	transform: translateY(-1px); box-shadow: var(--shadow-soft); border-color: var(--accent);
}
.move-btn:disabled, .switch-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.move-top { display: flex; justify-content: space-between; align-items: center; }
.move-name { font-weight: 600; font-size: 13px; }
.move-meta { font-size: 10px; color: var(--text-muted); display: flex; gap: 6px; align-items: center; }
.type-tag {
	padding: 2px 8px; border-radius: 3px; color: white;
	font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
}
.cat-tag {
	padding: 1px 5px; border-radius: 3px; font-size: 10px; font-weight: 600;
	background: var(--cat-status-bg); color: var(--cat-status-fg);
}
.cat-tag.Physical { background: #f6e0c0; color: #6b3d10; }
.cat-tag.Special { background: #c8e0f0; color: #1a3f55; }
.cat-tag.Status  { background: var(--cat-status-bg); color: var(--cat-status-fg); }
.switch-btn {
	background: var(--bg-row);
	display: grid; grid-template-columns: 28px 1fr auto; gap: 6px; align-items: center;
	padding: 6px 8px;
}
.switch-btn .tray-icon { width: 28px; height: 26px; background: transparent; }
button.tera-move {
	border-color: #9050e0; box-shadow: inset 0 0 0 1px rgba(144, 80, 224, 0.12);
}
button.tera-move .move-name { color: #6a30b0; }
button.mega-move {
	border-color: #d05030; box-shadow: inset 0 0 0 1px rgba(208, 80, 48, 0.12);
}
button.mega-move .move-name { color: #b04020; }
button.z-move {
	border-color: #c8a020; box-shadow: inset 0 0 0 1px rgba(200, 160, 32, 0.12);
}
button.z-move .move-name { color: #8a6c10; }
button.dynamax-move {
	border-color: #d03050; box-shadow: inset 0 0 0 1px rgba(208, 48, 80, 0.12);
}
button.dynamax-move .move-name { color: #b02040; }

/* ===== Gimmick toggle button ===== */
.gimmick-toggle-wrap {
	display: flex; justify-content: center; padding: 4px 0 2px;
	grid-column: 1 / -1;
}
.gimmick-toggle-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 6px 22px; border-radius: 20px;
	font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.3px;
	cursor: pointer; position: relative; overflow: hidden;
	transition: all 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
	border: 1px solid var(--border);
	background: var(--bg-panel); color: var(--text-muted);
}
.gimmick-toggle-btn:hover:not(.active) {
	border-color: var(--accent); color: var(--text);
}

.gimmick-toggle-btn.gimmick-mega.active {
	background: linear-gradient(135deg, #c84828, #e06040);
	border-color: #e87858; color: white;
	box-shadow: 0 0 14px rgba(208,80,48,0.45);
	animation: gimmick-glow-mega 2s ease-in-out infinite;
}
.gimmick-toggle-btn.gimmick-zmove.active {
	background: linear-gradient(135deg, #a88018, #d0a828);
	border-color: #e0c050; color: white;
	box-shadow: 0 0 14px rgba(200,160,32,0.45);
	animation: gimmick-glow-zmove 2s ease-in-out infinite;
}
.gimmick-toggle-btn.gimmick-dmax.active {
	background: linear-gradient(135deg, #b82040, #d84060);
	border-color: #e85878; color: white;
	box-shadow: 0 0 14px rgba(208,48,80,0.45);
	animation: gimmick-glow-dmax 2s ease-in-out infinite;
}
.gimmick-toggle-btn.gimmick-tera.active {
	background: linear-gradient(135deg, #7030b8, #9848e8);
	border-color: #b870ff; color: white;
	box-shadow: 0 0 14px rgba(144,80,224,0.45);
	animation: gimmick-glow-tera 2s ease-in-out infinite;
}

@keyframes gimmick-glow-mega {
	0%,100% { box-shadow: 0 0 10px rgba(208,80,48,0.35); }
	50%     { box-shadow: 0 0 22px rgba(208,80,48,0.65), 0 0 40px rgba(208,80,48,0.15); }
}
@keyframes gimmick-glow-zmove {
	0%,100% { box-shadow: 0 0 10px rgba(200,160,32,0.35); }
	50%     { box-shadow: 0 0 22px rgba(200,160,32,0.65), 0 0 40px rgba(200,160,32,0.15); }
}
@keyframes gimmick-glow-dmax {
	0%,100% { box-shadow: 0 0 10px rgba(208,48,80,0.35); }
	50%     { box-shadow: 0 0 22px rgba(208,48,80,0.65), 0 0 40px rgba(208,48,80,0.15); }
}
@keyframes gimmick-glow-tera {
	0%,100% { box-shadow: 0 0 10px rgba(144,80,224,0.35); }
	50%     { box-shadow: 0 0 22px rgba(144,80,224,0.65), 0 0 40px rgba(144,80,224,0.15); }
}

/* Shimmer sweep on active toggle */
.gimmick-toggle-shimmer {
	position: absolute; top: -50%; left: -75%; width: 50%; height: 200%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
	transform: skewX(-20deg); opacity: 0; pointer-events: none;
}
.gimmick-toggle-btn.active .gimmick-toggle-shimmer {
	animation: gimmick-shimmer 3s ease-in-out infinite;
}
@keyframes gimmick-shimmer {
	0%,80%,100% { left: -75%; opacity: 0; }
	10% { opacity: 1; }
	40% { left: 150%; opacity: 0; }
}

/* Move container — sits inside the #actions 2-col grid, spans both columns */
.gimmick-move-container {
	display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
	grid-column: 1 / -1;
}
body[data-gen="7"] .gimmick-move-container { grid-template-columns: 1fr; }
body[data-gen="8"] .gimmick-move-container { grid-template-columns: 1fr; }
body[data-gen="9"] .gimmick-move-container { grid-template-columns: 1fr; }
@keyframes gimmickFadeIn {
	from { opacity: 0; transform: translateY(5px) scale(0.97); }
	to   { opacity: 1; transform: none; }
}

/* Shimmer on gimmick move buttons */
.mega-move, .z-move, .dynamax-move, .tera-move {
	position: relative; overflow: hidden;
}
.mega-move::after, .z-move::after, .dynamax-move::after, .tera-move::after {
	content: ''; position: absolute; top: -50%; left: -75%; width: 40%; height: 200%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
	transform: skewX(-20deg); pointer-events: none;
	animation: gimmick-shimmer 4s ease-in-out infinite;
}
.mega-move:nth-child(2)::after { animation-delay: 0.4s; }
.mega-move:nth-child(3)::after { animation-delay: 0.8s; }
.mega-move:nth-child(4)::after { animation-delay: 1.2s; }
.z-move:nth-child(2)::after { animation-delay: 0.4s; }
.z-move:nth-child(3)::after { animation-delay: 0.8s; }
.z-move:nth-child(4)::after { animation-delay: 1.2s; }
.dynamax-move:nth-child(2)::after { animation-delay: 0.4s; }
.dynamax-move:nth-child(3)::after { animation-delay: 0.8s; }
.dynamax-move:nth-child(4)::after { animation-delay: 1.2s; }
.tera-move:nth-child(2)::after { animation-delay: 0.4s; }
.tera-move:nth-child(3)::after { animation-delay: 0.8s; }
.tera-move:nth-child(4)::after { animation-delay: 1.2s; }

/* Default PP */
.move-pp { font-family: ui-monospace, monospace; }

/* ===== Gen 4 (DPPt) move buttons ===== */
.move-btn.move-gen4 {
	font-family: 'Silkscreen', monospace;
	background: linear-gradient(180deg, #f0e8c8 0%, #e8deb8 40%, #ddd4a8 100%);
	border: 5px solid #888;
	border-radius: 6px;
	padding: 8px 10px;
	color: #3a3020;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.45), 0 2px 4px rgba(0,0,0,0.3);
}
.move-btn.move-gen4:hover:not(:disabled) {
	background: linear-gradient(180deg, #f8f0d8 0%, #f0e6c4 40%, #e8deb4 100%);
	transform: none;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55), 0 3px 8px rgba(0,0,0,0.3);
	filter: brightness(1.04);
}
.g4-name {
	font-weight: 700; font-size: 15px; color: #4a4030;
	letter-spacing: 0.3px;
	text-shadow: 1px 1px 0 rgba(255,255,255,0.5), -0.5px -0.5px 0 rgba(0,0,0,0.08);
	text-align: center;
}
.g4-bottom {
	display: flex; align-items: center;
	gap: 8px; margin-top: 4px;
}
.g4-type {
	padding: 2px 8px; border-radius: 3px; color: white;
	font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
	border: 1.5px solid rgba(255,255,255,0.3);
}
.g4-pp { font-weight: 700; font-size: 12px; color: #4a4030; }
.g4-detail { font-weight: 500; font-size: 10px; color: #6a5a40; margin-left: auto; }

/* ===== Gen 5 (BW) move buttons ===== */
.move-btn.move-gen5 {
	position: relative;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	height: 72px;
	font-family: 'VT323', monospace;
	overflow: visible;
}
.move-btn.move-gen5:hover:not(:disabled) {
	transform: none;
	box-shadow: none;
}
.move-btn.move-gen5:hover:not(:disabled) .g5-glow { opacity: 1; }
.move-btn.move-gen5:active:not(:disabled) .g5-body { filter: brightness(0.8); }
.move-btn.move-gen5 .g5-glow { opacity: 0; transition: opacity 0.15s; }

.g5-shape {
	position: absolute; inset: 0; width: 100%; height: 100%;
}
.g5-content {
	position: relative; z-index: 1; height: 100%;
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	padding: 0 14px; gap: 2px; text-align: center;
}
.g5-name {
	font-size: 20px; color: #f0f0f0;
	letter-spacing: 0.5px; text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
}
.g5-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.g5-type {
	font-size: 14px; color: #e0e0e0;
	padding: 2px 7px; border-radius: 2px; text-transform: uppercase;
	letter-spacing: 0.4px; border: 2px solid currentColor;
	background: rgba(0,0,0,0.3);
	text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.5);
}
.g5-pp {
	font-size: 18px; color: #e0e0e0;
	letter-spacing: 0.3px; text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.g5-pp-label { color: #aaa; }

/* Gen 5: dark panel background when active */
body[data-gen="5"] #actions {
	background: #3a3a3a;
	border-radius: 2px;
	padding: 8px;
	gap: 8px;
}

/* ===== Gen 6 (XY) move buttons — half-pill capsules ===== */
.move-btn.move-gen6 {
	position: relative;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	height: 72px;
	overflow: hidden;
}
.move-btn.move-gen6:hover:not(:disabled) {
	transform: none;
	box-shadow: none;
	filter: brightness(1.1);
}
.move-btn.move-gen6 .g6-bg {
	position: absolute; inset: 0;
	border: 3px solid rgba(0,0,0,0.12);
}
.move-btn.move-gen6.g6-left .g6-bg { border-radius: 0 36px 36px 0; }
.move-btn.move-gen6.g6-right .g6-bg { border-radius: 36px 0 0 36px; }
.move-btn.move-gen6 .g6-content {
	position: relative; z-index: 1; height: 100%;
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	padding: 0 16px; gap: 2px; text-align: center;
}
.g6-name {
	font-family: system-ui, sans-serif;
	font-size: 15px; font-weight: 600; color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.g6-meta { display: flex; align-items: center; gap: 8px; }
.g6-type-pill {
	font-family: system-ui, sans-serif;
	font-size: 10px; font-weight: 700; color: white;
	padding: 1px 10px; border-radius: 8px;
	text-transform: uppercase; letter-spacing: 0.5px;
	border: 1.5px solid rgba(255,255,255,0.4);
	text-shadow: 0 0.5px 1px rgba(0,0,0,0.3);
	background: rgba(0,0,0,0.22);
}
.g6-pp {
	font-family: system-ui, sans-serif;
	font-size: 14px; font-weight: 700; color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.g6-pp-label { font-weight: 500; opacity: 0.8; font-size: 12px; }

body[data-gen="6"] #actions {
	background: linear-gradient(180deg, #d8d0c0 0%, #c8c0b0 100%);
	border-radius: 12px;
	padding: 8px 10px;
	gap: 8px;
	border: 2px solid #b0a890;
}

/* ===== Gen 7 (SM/USUM) move buttons — arrowhead vertical stack ===== */
.move-btn.move-gen7 {
	position: relative;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	height: 48px;
	overflow: visible;
}
.move-btn.move-gen7:hover:not(:disabled) {
	transform: none;
	box-shadow: none;
	filter: brightness(1.12);
}
.g7-shape {
	position: absolute; inset: 0; width: 100%; height: 100%;
}
.g7-content {
	position: relative; z-index: 1; height: 100%;
	display: grid;
	grid-template-columns: 28px 1fr auto;
	align-items: center;
	gap: 8px;
	padding: 0 12px 0 20px;
}
.g7-info-icon {
	width: 20px; height: 20px; border-radius: 50%;
	background: rgba(80, 180, 255, 0.85);
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 700; color: white;
	border: 1.5px solid rgba(255,255,255,0.5);
}
.g7-name {
	font-family: system-ui, sans-serif;
	font-size: 15px; font-weight: 600; color: #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
	text-align: left;
}
.g7-right { display: flex; align-items: center; gap: 8px; }
.g7-type-pill {
	font-family: system-ui, sans-serif;
	font-size: 9px; font-weight: 700; color: white;
	padding: 2px 8px; border-radius: 4px;
	text-transform: uppercase;
	border: 1px solid rgba(255,255,255,0.3);
}
.g7-pp {
	font-family: system-ui, sans-serif;
	font-size: 13px; font-weight: 700; color: #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
	white-space: nowrap;
}
.g7-pp-label { font-weight: 500; opacity: 0.7; font-size: 11px; }

body[data-gen="7"] #actions {
	grid-template-columns: 1fr;
	background: rgba(0,0,0,0.60);
	border-radius: 10px;
	padding: 6px 8px;
	gap: 4px;
}

/* ===== Gen 8 (Sword/Shield) ===== */
.move-btn.move-gen8 {
	position: relative;
	background: none;
	border: none;
	border-radius: 28px;
	padding: 0;
	overflow: hidden;
	min-height: 46px;
}
.move-btn.move-gen8:hover:not(:disabled) {
	transform: none;
	box-shadow: none;
	filter: brightness(1.1);
}
.g8-bg {
	position: absolute;
	inset: 0;
	border-radius: 28px;
	z-index: 0;
}
.g8-content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	padding: 10px 12px 10px 12px;
	gap: 10px;
}
.g8-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: 2px solid rgba(255,255,255,0.4);
}
.g8-icon svg {
	width: 15px;
	height: 15px;
}
.g8-name {
	flex: 1;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
}
.g8-pp {
	background: rgba(0,0,0,0.7);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 12px;
	letter-spacing: 0.3px;
	flex-shrink: 0;
}
body[data-gen="8"] #actions {
	grid-template-columns: 1fr;
	background: rgba(0,0,0,0.06);
	border-radius: 12px;
	padding: 6px 8px;
	gap: 5px;
}

/* ===== Gen 9 (Scarlet/Violet) ===== */
.move-btn.move-gen9 {
	position: relative;
	background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
	border: 2px solid rgba(255,255,255,0.1);
	border-radius: 6px;
	padding: 0;
	overflow: hidden;
}
.move-btn.move-gen9:hover:not(:disabled) {
	transform: none;
	box-shadow: none;
	border-color: rgba(255,255,255,0.25);
}
.g9-content {
	display: flex;
	align-items: center;
	padding: 9px 12px;
	gap: 10px;
}
.g9-icon {
	width: 30px;
	height: 30px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.g9-icon svg {
	width: 16px;
	height: 16px;
}
.g9-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.g9-name {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	text-align: left;
	font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
}
.g9-pp {
	font-size: 15px;
	font-weight: 700;
	color: rgba(255,255,255,0.85);
	flex-shrink: 0;
}
body[data-gen="9"] #actions {
	grid-template-columns: 1fr;
	background: rgba(0,0,0,0.06);
	border-radius: 10px;
	padding: 6px 8px;
	gap: 5px;
}

/* ===== Log ===== */
#log {
	font-size: 13px;
	max-height: 720px; overflow-y: auto;
	display: flex; flex-direction: column-reverse;  /* newest at bottom, scroll bottom by default */
}
.log-events { display: flex; flex-direction: column; }
.log-ev { padding: 4px 8px; border-bottom: 1px dotted var(--border); line-height: 1.4; }
.log-ev:last-child { border-bottom: none; }
.log-ev.move { color: #3060b0; font-weight: 500; }
.log-ev.damage { color: #c04040; }
.log-ev.heal { color: #2a8050; }
.log-ev.status { color: #7040a0; }
.log-ev.faint { color: var(--hp-red); font-weight: 700; }
.log-ev.switch { color: var(--text-muted); font-style: italic; }
.log-ev.weather, .log-ev.effect { color: var(--text-muted); font-size: 12px; }
.log-ev.boost { color: #6040a0; font-size: 12px; }
.log-ev.ability { color: var(--text-ability); font-size: 12px; font-style: italic; }
.log-ev.item { color: var(--text-item); font-size: 12px; font-style: italic; }
.log-ev.note {
	color: var(--text-muted); text-align: center; padding: 8px 0; font-weight: 700;
	border-bottom: none; border-top: 1px solid var(--border); margin-top: 6px;
	background: var(--note-bg);
}
.log-ev.p1 { border-left: 3px solid #3b82f6; }
.log-ev.p2 { border-left: 3px solid #f97316; }

/* ===== Misc ===== */
.muted { color: var(--text-muted); font-size: 12px; }
#status { font-size: 12px; margin-top: 8px; color: var(--text-muted); }
#status.error { color: var(--hp-red); }
#end-banner {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 20px 16px; border-radius: 8px; text-align: center;
	font-weight: 700; margin-top: 12px; font-size: 18px;
	animation: banner-appear 0.4s ease-out;
}
#end-banner.end-win {
	background: rgba(58, 158, 118, 0.12); border: 1px solid rgba(58, 158, 118, 0.3);
	color: #2a7a56;
}
#end-banner.end-lose {
	background: rgba(200, 60, 60, 0.12); border: 1px solid rgba(200, 60, 60, 0.3);
	color: #a03030;
}
#end-banner.end-tie {
	background: rgba(196, 138, 40, 0.12); border: 1px solid rgba(196, 138, 40, 0.3);
	color: #8a6818;
}
[data-theme="dark"] #end-banner.end-win { color: #5ad8a0; }
[data-theme="dark"] #end-banner.end-lose { color: #e87070; }
[data-theme="dark"] #end-banner.end-tie { color: #d8b050; }
[data-theme="dark"] .log-ev.boost { color: #a080d0; }
.end-mascot img {
	width: 64px; height: 64px; object-fit: contain;
	image-rendering: pixelated;
}
.end-mascot-win img {
	animation: mascot-bounce 0.6s ease-in-out infinite alternate;
}
.end-mascot-lose img {
	animation: mascot-droop 0.8s ease-in-out 1 forwards;
}
.end-mascot-tie img {
	animation: mascot-wobble 1.2s ease-in-out infinite;
}
@keyframes banner-appear {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes mascot-bounce {
	from { transform: translateY(0); }
	to   { transform: translateY(-8px); }
}
@keyframes mascot-droop {
	0%   { transform: rotate(0); }
	100% { transform: rotate(-15deg) translateY(4px); }
}
@keyframes mascot-wobble {
	0%, 100% { transform: rotate(-5deg); }
	50%      { transform: rotate(5deg); }
}

/* ===== Trainer card (top-right of header) ===== */
.trainer-card {
	display: flex; align-items: center; gap: 10px;
	background: var(--bg-panel); border: 1px solid var(--border);
	border-radius: 8px; padding: 8px 14px; box-shadow: var(--shadow-soft);
}
.trainer-avatar {
	width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; color: white; font-size: 15px;
	box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.18);
}
.trainer-sprite {
	width: 60px; height: 60px; object-fit: contain; flex-shrink: 0;
	image-rendering: pixelated;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.trainer-meta { display: flex; flex-direction: column; line-height: 1.2; }
.trainer-role { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); }
.trainer-name { font-weight: 600; font-size: 14px; }

/* ===== Type chips on tray rows ===== */
.tray-types { display: flex; gap: 2px; margin-top: 1px; }
.type-chip {
	font-size: 9px; padding: 1px 5px; border-radius: 2px;
	color: white; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
}
/* Color stripe on left edge of tray row indicating primary type. */
.tray-mon { border-left: 3px solid transparent; }

/* ===== Move effectiveness badges ===== */
.eff-badge {
	display: inline-block; padding: 1px 6px; border-radius: 8px;
	font-size: 10px; font-weight: 700; margin-left: 4px;
	font-family: ui-monospace, monospace;
}
.eff-x4    { background: #1e8c2e; color: white; }
.eff-x2    { background: #4ec761; color: white; }
.eff-x1    { display: none; }
.eff-half  { background: #c87b3c; color: white; }
.eff-q     { background: #a04a30; color: white; }
.eff-zero  { background: #555; color: white; }

/* ===== Hover tooltip ===== */
#tooltip {
	position: fixed; z-index: 100;
	background: var(--bg-panel); color: var(--text);
	border: 1px solid var(--border); border-radius: 6px;
	padding: 10px 14px; box-shadow: var(--shadow-card);
	font-size: 12px; line-height: 1.45;
	max-width: 280px; pointer-events: none;
	transition: opacity 120ms ease-out;
}
#tooltip.hidden { opacity: 0; pointer-events: none; }
#tooltip .tt-name { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
#tooltip .tt-sub  { color: var(--text-muted); font-size: 11px; margin-bottom: 6px; }
#tooltip .tt-stats { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
#tooltip .tt-stat-label { color: var(--text-muted); }
#tooltip .tt-stat-val   { font-family: ui-monospace, monospace; text-align: right; }
#tooltip .tt-types { display: flex; gap: 3px; margin-top: 4px; }
#tooltip .tt-cat {
	font-size: 11px; padding: 1px 6px; border-radius: 3px;
	background: var(--bg-row); color: var(--text-secondary); font-weight: 500;
}
#tooltip .tt-desc {
	margin-top: 5px; font-size: 11px; color: var(--text-secondary);
	line-height: 1.4; max-width: 240px;
}
.tray-mon, .switch-btn, .stage-info { cursor: help; }

/* ===== Dark-mode overrides for play-specific hardcoded colors ===== */
[data-theme="dark"] .field-tag.weather { color: #d8b040; }
[data-theme="dark"] .field-tag.terrain { color: #50c880; }
[data-theme="dark"] .field-tag.hazard  { color: #e06060; }
[data-theme="dark"] .field-tag.pseudo  { color: #b080e0; }
[data-theme="dark"] .side-fx.stealthrock,
[data-theme="dark"] .side-fx.spikes,
[data-theme="dark"] .side-fx.toxicspikes,
[data-theme="dark"] .side-fx.stickyweb { color: #e07070; }
[data-theme="dark"] .side-fx.reflect,
[data-theme="dark"] .side-fx.lightscreen,
[data-theme="dark"] .side-fx.auroraveil { color: #70a0e0; }
[data-theme="dark"] .side-fx.tailwind,
[data-theme="dark"] .side-fx.safeguard,
[data-theme="dark"] .side-fx.mist,
[data-theme="dark"] .side-fx.luckychant { color: #50c880; }
[data-theme="dark"] .status-par { background: #8a7020; color: #fce060; }
[data-theme="dark"] .status-confusion { background: #3a2848; color: #c090e0; }
[data-theme="dark"] .boost.up   { background: #1a3a1a; color: #70d070; }
[data-theme="dark"] .boost.down { background: #3a1a1a; color: #e08080; }
[data-theme="dark"] .effect-toast.item    { background: #2a2418; color: #d8b860; border-color: #5a4820; }
[data-theme="dark"] .effect-toast.ability { background: #182030; color: #70a8e0; border-color: #2a4060; }
[data-theme="dark"] .effect-toast.move    { background: #241830; color: #b080d8; border-color: #402860; }
[data-theme="dark"] .effect-toast.status  { background: #301818; color: #e08080; border-color: #603030; }
[data-theme="dark"] .cat-tag.Physical { background: #3a2810; color: #e0b870; }
[data-theme="dark"] .cat-tag.Special  { background: #182838; color: #80c0e0; }
[data-theme="dark"] button.tera-move .move-name  { color: #b080e0; }
[data-theme="dark"] button.mega-move .move-name  { color: #e08060; }
[data-theme="dark"] button.z-move .move-name     { color: #d8b840; }
[data-theme="dark"] button.dynamax-move .move-name { color: #e06080; }
[data-theme="dark"] button.tera-move { border-color: rgba(144,80,224,0.5); box-shadow: inset 0 0 0 1px rgba(144,80,224,0.2); }
[data-theme="dark"] button.mega-move { border-color: rgba(208,80,48,0.5); box-shadow: inset 0 0 0 1px rgba(208,80,48,0.2); }
[data-theme="dark"] button.z-move { border-color: rgba(200,160,32,0.5); box-shadow: inset 0 0 0 1px rgba(200,160,32,0.2); }
[data-theme="dark"] button.dynamax-move { border-color: rgba(208,48,80,0.5); box-shadow: inset 0 0 0 1px rgba(208,48,80,0.2); }
[data-theme="dark"] .g4-name { color: #d8d0c0; }
[data-theme="dark"] .g4-pp   { color: #d8d0c0; }
[data-theme="dark"] .g4-detail { color: #a0a090; }
[data-theme="dark"] .gen8-actions { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .gen9-actions { background: rgba(255,255,255,0.06); }

/* ===== Mobile / tablet responsive ===== */

/* Tablet: 2-column — stage+actions left, trays+log right */
@media (max-width: 980px) {
	body { padding: 10px; }

	#header { flex-wrap: wrap; gap: 8px; }
	#header h1 { font-size: 16px; }

	#layout {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	/* Re-order columns: stage first, trays second, log third */
	#layout > .col:nth-child(1) { order: 2; } /* trays */
	#layout > .col:nth-child(2) { order: 1; } /* stage + actions */
	#layout > .col:nth-child(3) { order: 3; } /* log */

	/* Side-by-side trays on tablet */
	#layout > .col:nth-child(1) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	#stage { min-height: 300px; }
	.sprite-wrap { width: 120px; height: 120px; }
}

/* Phone: single column, compact everything */
@media (max-width: 600px) {
	body { padding: 8px; }

	#header {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		margin-bottom: 8px;
	}
	#header h1 { font-size: 15px; }
	#header > div:last-child {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}

	/* Trainer card compact */
	.trainer-card { padding: 6px 10px; }
	.trainer-avatar { width: 28px; height: 28px; font-size: 12px; }
	.trainer-name { font-size: 12px; }
	.trainer-role { font-size: 9px; }
	.trainer-sprite { width: 40px; height: 40px; }

	/* Field tags wrap */
	#header #field { flex-wrap: wrap; gap: 4px; }
	.field-tag { font-size: 10px; padding: 2px 7px; }

	/* Single-column layout, reordered */
	#layout {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	/* Stage first, actions below, then trays, then log */
	#layout > .col:nth-child(1) {
		order: 2;
		display: flex;
		flex-direction: column;
	}
	#layout > .col:nth-child(2) { order: 1; }
	#layout > .col:nth-child(3) { order: 3; }

	/* Collapsible trays and log */
	#layout > .col:nth-child(1) > .panel,
	#layout > .col:nth-child(3) > .panel {
		max-height: none;
	}
	#layout > .col:nth-child(1) > .panel > h2,
	#layout > .col:nth-child(3) > .panel > h2 {
		cursor: pointer;
		user-select: none;
		position: relative;
		padding-right: 20px;
	}
	#layout > .col:nth-child(1) > .panel > h2::after,
	#layout > .col:nth-child(3) > .panel > h2::after {
		content: '▾';
		position: absolute;
		right: 0;
		transition: transform 200ms;
	}
	#layout > .col:nth-child(1) > .panel.collapsed > h2::after,
	#layout > .col:nth-child(3) > .panel.collapsed > h2::after {
		transform: rotate(-90deg);
	}
	#layout > .col:nth-child(1) > .panel.collapsed > :not(h2),
	#layout > .col:nth-child(3) > .panel.collapsed > :not(h2) {
		display: none;
	}

	/* Compact stage */
	#stage {
		min-height: 240px;
		padding: 10px;
		border-radius: 8px;
		gap: 8px;
	}
	.stage-row { padding: 8px; gap: 10px; }
	.stage-species { font-size: 14px; }
	.stage-meta { font-size: 11px; gap: 6px; }
	.stage-row .label { font-size: 10px; }
	.sprite-wrap { width: 96px; height: 96px; }
	.trainer-overlay { width: 120px; height: 120px; }

	/* HP bar */
	.hp-bar { height: 8px; }
	.hp-text { font-size: 11px; min-width: 60px; }

	/* Actions: keep 2-col for moves, full-width for switches */
	#actions { gap: 5px; }
	.move-btn { padding: 7px 8px; }
	.move-name { font-size: 12px; }
	.move-meta { font-size: 9px; gap: 4px; }
	.type-tag { font-size: 9px; padding: 2px 6px; }
	.cat-tag { font-size: 9px; }
	.eff-badge { font-size: 9px; padding: 1px 5px; }

	.switch-btn { padding: 5px 7px; }
	.switch-btn .tray-icon { width: 24px; height: 22px; }

	/* Tera moves */
	button.tera-move { padding: 6px 8px; }

	/* Tray compact */
	.tray-mon { grid-template-columns: 28px 1fr auto; gap: 4px; padding: 3px 5px; }
	.tray-icon { width: 28px; height: 24px; }
	.tray-info { font-size: 11px; }
	.tray-hp-bar { width: 40px; }

	/* Log compact */
	#log { max-height: 400px; font-size: 12px; }
	.log-ev { padding: 3px 6px; }

	/* Panels */
	.panel { padding: 10px; border-radius: 6px; }
	.panel h2 { font-size: 11px; margin: 0 0 8px; }

	/* Tooltip */
	#tooltip { max-width: 240px; font-size: 11px; }

	/* End banner */
	#end-banner { padding: 12px; font-size: 14px; }
	.end-mascot img { width: 48px; height: 48px; }

	/* Side effects */
	.side-effects { gap: 3px; }
	.side-fx { font-size: 9px; padding: 1px 5px; }

	/* Boosts compact */
	.boost { font-size: 9px; padding: 1px 4px; }

	/* Toast / annotation compact */
	.effect-toast { font-size: 10px; padding: 2px 7px; }
	.boost-annotation { font-size: 10px; padding: 1px 6px; }

}