/*
 * arcade.css
 * The game shell shared by every game page (page-templates/game.php):
 * header buttons, the scoreboard HUD, boards, the How to play / Stats /
 * Results dialogs (inc/arcade.php, assets/js/sw-games.js), the animated
 * rule illustrations, and the Color Grid board (module/games/color-grid.php).
 * Loaded after games.css on game pages only.
 *
 * @package Swatching
 */

.swg {
	--play:    #22c55e;
	--play-2:  #2387ff;
	--panel:   #101016;
	--well:    #0a0a0e;
	--rim:     rgba(255, 255, 255, 0.09);
	--glow:    0 30px 80px rgba(0, 0, 0, 0.55);
	--spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ============================================================
   HEADER: How to play + Stats
   ============================================================ */

.swx-toolbar { display: flex; gap: 8px; }

.swx-tbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px 0 12px;
	border: 1px solid var(--rim);
	border-radius: 999px;
	background: var(--card);
	color: var(--text);
	font-family: var(--sans);
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--ease), border-color var(--ease), transform var(--ease);
}

.swx-tbtn:hover { background: var(--card-2); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-1px); }
.swx-tbtn svg { color: var(--play); }

/* First visit: a soft ring pulses around How to play */
.swx-tbtn.is-new::after {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
	animation: swx-ping 1.8s ease-out infinite;
}

@keyframes swx-ping {
	70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}


/* ============================================================
   BOARD + HUD (all games)
   ============================================================ */

.swg-page .swg-board {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--rim);
	border-radius: 24px;
	background:
		radial-gradient(120% 70% at 50% -10%, rgba(35, 135, 255, 0.10), transparent 60%),
		radial-gradient(80% 60% at 100% 110%, rgba(34, 197, 94, 0.07), transparent 60%),
		var(--panel);
	box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
	padding: clamp(16px, 3vw, 32px);
}

.swg-page .swg-bar { margin-bottom: clamp(18px, 3vw, 28px); }

/* Mode switch: one segmented control */
.swg-page .swg-modes {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 4px;
	border-radius: 14px;
	background: var(--well);
	box-shadow: inset 0 0 0 1px var(--rim);
}

.swg-page .swg-modes .swp-chip {
	height: 36px;
	padding: 0 14px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--text-2);
	font-size: 0.88rem;
	font-weight: 700;
	box-shadow: none;
	transition: background var(--ease), color var(--ease);
}

.swg-page .swg-modes .swp-chip:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.swg-page .swg-modes .swp-chip[aria-pressed="true"] { background: #fff; color: #000; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.swg-page .swg-modes .swp-chip small { margin-left: 4px; font-size: 0.72rem; font-weight: 600; opacity: 0.6; }

/* Scoreboard tiles */
.swg-page .swg-stats { display: flex; gap: 8px; }

.swg-page .swg-stat {
	min-width: 76px;
	padding: 8px 14px 9px;
	border-radius: 12px;
	background: var(--well);
	box-shadow: inset 0 0 0 1px var(--rim);
}

.swg-page .swg-stat span {
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: var(--text-3);
}

.swg-page .swg-stat b {
	display: flex;
	align-items: center;
	min-height: 1.9rem;
	font-family: var(--mono);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

/* Remaining checks / lives as pips */
.swx-pips { gap: 5px; }

.swx-pips i {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--play);
	box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
	transition: background 300ms ease, box-shadow 300ms ease, transform 300ms var(--spring);
}

.swx-pips i.used { background: transparent; box-shadow: inset 0 0 0 2px var(--card-3); transform: scale(0.85); }

/* End panels inside the boards */
.swg-page .swg-end { padding: 8px 0; }
.swg-page .swg-big-score b { font-family: var(--sans); font-variant-numeric: tabular-nums; }


/* ============================================================
   BUTTONS
   ============================================================ */

.swx-cta,
.swx-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	font-family: var(--sans);
	font-size: 0.98rem;
	font-weight: 800;
	cursor: pointer;
	transition: transform 160ms var(--spring), background var(--ease), box-shadow var(--ease), opacity var(--ease);
}

.swx-cta {
	border: 0;
	background: #fff;
	color: #000;
	box-shadow: 0 10px 28px rgba(255, 255, 255, 0.12);
}

.swx-cta:hover { transform: translateY(-2px) scale(1.02); }
.swx-cta:active { transform: scale(0.97); }

.swx-ghost {
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: transparent;
	color: var(--text);
}

.swx-ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); }
.swx-small { height: 36px; padding: 0 14px; font-size: 0.85rem; }


/* ============================================================
   COLOR GRID
   ============================================================ */

.swx-cg .swg-play { max-width: 640px; }

.swx-cg-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin: 0 0 18px;
}

.swx-cg-title span {
	font-family: var(--mono);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-3);
}

.swx-cg-title b { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.02em; color: var(--text); }

.swx-cg-grid {
	--gap: clamp(3px, 0.9vw, 7px);
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	width: 100%;
	margin: 0 auto;
	padding: clamp(8px, 1.6vw, 14px);
	border-radius: 18px;
	background: var(--well);
	box-shadow: inset 0 0 0 1px var(--rim), inset 0 12px 30px rgba(0, 0, 0, 0.45);
	user-select: none;
	-webkit-user-select: none;
}

.swx-cg-row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--n), minmax(0, 1fr));
	gap: var(--gap);
}

.swx-cg-tile {
	position: relative;
	aspect-ratio: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: clamp(4px, calc(60px / var(--n)), 10px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.18);
	cursor: grab;
	touch-action: pan-y; /* vertical swipes still scroll the page; sideways drags move tiles */
	transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 160ms ease;
}

.swx-cg-tile:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 14px rgba(0, 0, 0, 0.45); }
.swx-cg-tile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; z-index: 2; }

.swx-cg-tile.is-selected {
	z-index: 2;
	transform: translateY(-4px) scale(1.06);
	box-shadow: 0 0 0 3px #fff, 0 10px 24px rgba(0, 0, 0, 0.6);
	animation: swx-bob 1.2s ease-in-out infinite;
}

@keyframes swx-bob { 50% { transform: translateY(-7px) scale(1.06); } }

.swx-cg-tile.is-dragging {
	z-index: 5;
	cursor: grabbing;
	box-shadow: 0 0 0 3px #fff, 0 18px 36px rgba(0, 0, 0, 0.7);
	transition: box-shadow 160ms ease; /* follows the pointer with no lag */
}

.swx-cg-grid.is-dragging .swx-cg-tile:not(.is-dragging):hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }

.swx-cg-tile.is-dropped { animation: swx-drop 320ms var(--spring); }
@keyframes swx-drop { from { transform: scale(1.18); } to { transform: none; } }

/* Expert: empty spots and drop targets */
.swx-cg-tile.is-empty {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12);
	cursor: pointer;
}

.swx-cg-tile.is-empty:hover { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.swx-cg-tile.is-target { box-shadow: 0 0 0 3px #fff !important; transform: scale(1.08); }

/* A solved row locks into one gradient bar, exactly one tile tall
   (an invisible square in the first column sets the height). */
.swx-cg-row.is-solved::before { content: ''; grid-row: 1; grid-column: 1; aspect-ratio: 1; }

.swx-cg-bar {
	position: relative;
	grid-row: 1;
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 10px;
	border-radius: clamp(4px, calc(60px / var(--n)), 10px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	overflow: hidden;
}

.swx-cg-bar svg {
	flex-shrink: 0;
	width: clamp(16px, calc(180px / var(--n)), 26px);
	height: clamp(16px, calc(180px / var(--n)), 26px);
	padding: 3px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
}

/* Newly locked rows sweep in, one after another, with a shine */
.swx-cg-row.is-new .swx-cg-bar { animation: swx-lock 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 110ms); }

.swx-cg-row.is-new .swx-cg-bar::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
	transform: translateX(-100%);
	animation: swx-shine 900ms ease-out both;
	animation-delay: calc(var(--i, 0) * 110ms + 300ms);
}

@keyframes swx-lock {
	from { clip-path: inset(0 100% 0 0 round 8px); transform: scaleY(0.6); }
	60%  { transform: scaleY(1.08); }
	to   { clip-path: inset(0 0 0 0 round 8px); transform: none; }
}

@keyframes swx-shine { to { transform: translateX(100%); } }

/* Game over: missed rows show their answer, faded */
.swx-cg-row.is-missed .swx-cg-bar { opacity: 0.32; filter: saturate(0.5); }
.swx-cg-row.is-missed .swx-cg-bar svg { display: none; }

/* Rows that were wrong on a check give a little shake */
.swx-cg-row.is-wrong { animation: swx-shake 420ms ease both; animation-delay: calc(var(--i, 0) * 35ms); }

@keyframes swx-shake {
	20% { transform: translateX(-5px); }
	40% { transform: translateX(5px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(2px); }
}

/* Expert tray */
.swx-cg-tray-wrap { margin-top: 18px; }

.swx-cg-tray-label {
	margin: 0 0 10px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-3);
}

.swx-cg-tray-label span { letter-spacing: 0.02em; text-transform: none; font-weight: 600; }

.swx-cg-tray {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	max-height: 210px;
	overflow-y: auto;
	margin-bottom: 12px;
	padding: 10px;
	border-radius: 14px;
	background: var(--well);
	box-shadow: inset 0 0 0 1px var(--rim);
}

.swx-cg-chip {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
	cursor: grab;
	touch-action: none;
	transition: transform 160ms var(--spring), box-shadow 160ms ease;
}

.swx-cg-chip:hover { transform: translateY(-2px); }
.swx-cg-chip.is-picked { transform: translateY(-4px) scale(1.12); box-shadow: 0 0 0 3px #fff, 0 8px 18px rgba(0, 0, 0, 0.55); }

.swx-cg-ghost {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	box-shadow: 0 0 0 3px #fff, 0 18px 36px rgba(0, 0, 0, 0.6);
	pointer-events: none;
}

/* Messages + actions */
.swx-cg-msg {
	min-height: 1.5em;
	margin: 16px 0 0;
	font-size: 0.95rem;
	color: var(--text-2);
}

.swx-cg-msg.is-good { color: #4ade80; }
.swx-cg-msg.is-warn { color: #fbbf24; }

.swx-cg-actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.swx-cg-actions .swx-cta { min-width: 180px; }

/* Finished: today's result under the board */
.swx-cg-done {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	margin-top: 18px;
	padding: 16px 18px;
	border-radius: 16px;
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--rim);
	text-align: left;
}

.swx-cg-done[hidden] { display: none; }
.swx-cg-done .swx-kicker { margin: 0 0 2px; }
.swx-cg-done-line { margin: 0; font-weight: 700; color: var(--text); }
.swx-cg-done-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.swx-cg-done-actions .swx-cta,
.swx-cg-done-actions .swx-ghost { height: 42px; padding: 0 18px; font-size: 0.9rem; }


/* ============================================================
   HOW TO PLAY (illustrated rules — in a dialog and on the page)
   ============================================================ */

.swx-howto { margin-bottom: 32px; }
.swx-howto .swh-h2 { margin-bottom: 16px; }

.swx-rules {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.swx-rule {
	display: flex;
	flex-direction: column;
	border-radius: 18px;
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--rim);
	overflow: hidden;
}

.swx-rule-text { padding: 14px 16px 16px; }
.swx-rule-text p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--text-2); }
.swx-rule-text strong { color: var(--text); }
.swx-rule-text code { font-family: var(--mono); font-size: 0.85em; color: var(--text); }

.swx-rule-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px !important;
	font-size: 1.02rem !important;
	font-weight: 800;
	color: var(--text) !important;
}

.swx-rule-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--play);
	color: #000;
	font-size: 0.8rem;
	font-weight: 900;
}

/* The scene above each rule */
.swx-demo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	aspect-ratio: 16 / 9;
	padding: 14px;
	overflow: hidden;
	background:
		radial-gradient(90% 90% at 50% 0%, rgba(35, 135, 255, 0.12), transparent 70%),
		var(--well);
}

.swx-demo i, .swx-demo b, .swx-demo em, .swx-demo span { display: block; font-style: normal; }
.swx-demo em { margin-top: 6px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); text-align: center; }

/* Color Grid · pick your grid */
.swx-demo--cg-levels .lv b { display: grid; gap: 2px; width: 46px; height: 46px; }
.swx-demo--cg-levels .lv i { border-radius: 2px; background: #2387ff; }
.swx-demo--cg-levels .l5 b { grid-template-columns: repeat(3, 1fr); }
.swx-demo--cg-levels .l8 b { grid-template-columns: repeat(4, 1fr); }
.swx-demo--cg-levels .l10 b,
.swx-demo--cg-levels .lx b { grid-template-columns: repeat(5, 1fr); }
.swx-demo--cg-levels .l5 i  { background: #6fc6b9; }
.swx-demo--cg-levels .l8 i  { background: #3fa7d6; }
.swx-demo--cg-levels .l10 i { background: #6b7cff; }
.swx-demo--cg-levels .lx i  { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.swx-demo--cg-levels .lv { animation: swx-pop 2.8s ease-in-out infinite; }
.swx-demo--cg-levels .l8 { animation-delay: 0.3s; }
.swx-demo--cg-levels .l10 { animation-delay: 0.6s; }
.swx-demo--cg-levels .lx { animation-delay: 0.9s; }
@keyframes swx-pop { 0%, 30%, 100% { transform: none; } 15% { transform: translateY(-5px); } }

/* Color Grid · sort every row: tile 2 hops right, into place */
.swx-demo--cg-sort .row { display: flex; gap: 5px; }
.swx-demo--cg-sort .row i { width: 34px; height: 34px; border-radius: 7px; }
.swx-demo--cg-sort .row i:nth-child(2) { position: relative; z-index: 1; animation: swx-hop 3s ease-in-out infinite; }
.swx-demo--cg-sort .row i:nth-child(3),
.swx-demo--cg-sort .row i:nth-child(4) { animation: swx-slide 3s ease-in-out infinite; }
@keyframes swx-hop {
	0%, 15%   { transform: none; box-shadow: none; }
	25%       { transform: translateY(-10px) scale(1.12); box-shadow: 0 0 0 2px #fff; }
	55%       { transform: translate(78px, -10px) scale(1.12); box-shadow: 0 0 0 2px #fff; }
	65%, 100% { transform: translateX(78px); box-shadow: none; }
}
@keyframes swx-slide { 0%, 30% { transform: none; } 55%, 100% { transform: translateX(-39px); } }

/* Color Grid · check: one row becomes a gradient, one shakes */
.swx-demo--cg-check { flex-direction: column; gap: 6px; }
.swx-demo--cg-check .row { display: flex; gap: 5px; width: 190px; height: 30px; }
.swx-demo--cg-check .row i { flex: 1; border-radius: 6px; }
.swx-demo--cg-check .row.done { border-radius: 7px; background: linear-gradient(90deg, var(--a), var(--b), var(--c)); animation: swx-reveal 3s ease-in-out infinite; }
.swx-demo--cg-check .row:not(.done) { animation: swx-shake2 3s ease-in-out infinite; }
.swx-demo--cg-check .tick { position: absolute; left: calc(50% + 70px); top: calc(50% - 32px); display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.75rem; font-weight: 900; animation: swx-fade 3s ease-in-out infinite; }
.swx-demo--cg-check .pips { position: absolute; right: 12px; top: 10px; display: flex; gap: 4px; }
.swx-demo--cg-check .pips i { width: 8px; height: 8px; border-radius: 50%; background: var(--play); }
.swx-demo--cg-check .pips i.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--card-3); }
@keyframes swx-reveal { 0%, 20% { clip-path: inset(0 100% 0 0); } 45%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes swx-shake2 { 0%, 50%, 70%, 100% { transform: none; } 55% { transform: translateX(-5px); } 60% { transform: translateX(5px); } 65% { transform: translateX(-3px); } }
@keyframes swx-fade { 0%, 40% { opacity: 0; transform: scale(0.5); } 50%, 100% { opacity: 1; transform: none; } }

/* Hue Match · modes */
.swx-demo--hm-modes, .swx-demo--oo-modes { gap: 26px; }
.swx-demo--hm-modes .dots { display: flex; gap: 5px; }
.swx-demo--hm-modes .dots i { width: 14px; height: 14px; border-radius: 50%; animation: swx-pop 2.4s ease-in-out infinite; }
.swx-demo--hm-modes .dots i:nth-child(2) { animation-delay: 0.15s; }
.swx-demo--hm-modes .dots i:nth-child(3) { animation-delay: 0.3s; }
.swx-demo--hm-modes .dots i:nth-child(4) { animation-delay: 0.45s; }
.swx-demo--hm-modes .dots i:nth-child(5) { animation-delay: 0.6s; }
.swx-demo--hm-modes .pal { display: flex; width: 90px; height: 34px; border-radius: 8px; overflow: hidden; }
.swx-demo--hm-modes .pal i { flex: 1; }

/* Hue Match · target above yours, yours drifting toward it */
.swx-demo--hm-stack { flex-direction: column; gap: 0; }
.swx-demo--hm-stack .sw { position: relative; width: 150px; height: 44px; }
.swx-demo--hm-stack .t { border-radius: 10px 10px 0 0; background: #e07a3f; }
.swx-demo--hm-stack .y { border-radius: 0 0 10px 10px; animation: swx-match 3.2s ease-in-out infinite; }
.swx-demo--hm-stack .sw em { position: absolute; left: 10px; bottom: 6px; margin: 0; color: rgba(255, 255, 255, 0.9); }
@keyframes swx-match { 0%, 15% { background: #5a7fd6; } 70%, 100% { background: #df7c42; } }

/* Hue Match · sliders gliding */
.swx-demo--hm-sliders { flex-direction: column; gap: 9px; padding-right: 70px; }
.swx-demo--hm-sliders .sl { position: relative; width: 150px; height: 10px; border-radius: 5px; }
.swx-demo--hm-sliders .h { background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.swx-demo--hm-sliders .s { background: linear-gradient(90deg, #8a8a8a, #ff7a2a); }
.swx-demo--hm-sliders .l { background: linear-gradient(90deg, #000, #ff7a2a, #fff); }
.swx-demo--hm-sliders u { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); animation: swx-thumb 3.2s ease-in-out infinite; }
.swx-demo--hm-sliders .h u { --a: 70%; --b: 8%; }
.swx-demo--hm-sliders .s u { --a: 20%; --b: 80%; animation-delay: 0.2s; }
.swx-demo--hm-sliders .l u { --a: 80%; --b: 50%; animation-delay: 0.4s; }
.swx-demo--hm-sliders .chip { position: absolute; right: calc(50% - 115px); top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 10px; animation: swx-match 3.2s ease-in-out infinite; }
@keyframes swx-thumb { 0%, 10% { left: var(--a); } 60%, 100% { left: var(--b); } }

/* Odd One Out · modes */
.swx-demo--oo-modes .hearts { font-size: 1.5rem; color: #f43f5e; letter-spacing: 2px; }
.swx-demo--oo-modes .clock { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--play); font-family: var(--mono); font-weight: 700; color: var(--text); }

/* Odd One Out · find it: the odd tile gets a ring */
.swx-demo--oo-find .g3 { display: grid; grid-template-columns: repeat(3, 30px); gap: 5px; }
.swx-demo--oo-find .g3 i { height: 30px; border-radius: 6px; background: #3a9e8c; }
.swx-demo--oo-find .g3 i.odd { background: #47ad9b; animation: swx-ring 2.4s ease-in-out infinite; }
@keyframes swx-ring { 0%, 40% { box-shadow: none; transform: none; } 55%, 85% { box-shadow: 0 0 0 3px #fff; transform: scale(1.1); } 100% { box-shadow: none; } }

/* Odd One Out · grids grow */
.swx-demo--oo-harder { gap: 8px; }
.swx-demo--oo-harder .g { display: grid; gap: 2px; width: 44px; height: 44px; }
.swx-demo--oo-harder .g i { border-radius: 2px; }
.swx-demo--oo-harder .g2 { grid-template-columns: repeat(2, 1fr); }
.swx-demo--oo-harder .g3s { grid-template-columns: repeat(3, 1fr); }
.swx-demo--oo-harder .g4 { grid-template-columns: repeat(4, 1fr); }
.swx-demo--oo-harder .g2 i { background: #c0563f; }
.swx-demo--oo-harder .g2 i:nth-child(3) { background: #e0785f; }
.swx-demo--oo-harder .g3s i { background: #4e6bd1; }
.swx-demo--oo-harder .g3s i:nth-child(5) { background: #5a76d8; }
.swx-demo--oo-harder .g4 i { background: #a855f7; }
.swx-demo--oo-harder .g4 i:nth-child(11) { background: #ad5ff8; }
.swx-demo--oo-harder .arrow { color: var(--text-3); font-weight: 800; }

/* Read the Hex · the code with its colored pairs */
.swx-demo--hx-code .code { font-family: var(--mono); font-size: 1.9rem; font-weight: 700; color: #fff; }
.swx-demo--hx-code em { display: inline; animation: swx-pop 2.4s ease-in-out infinite; }
.swx-demo--hx-code .r { color: #ff7a7a; }
.swx-demo--hx-code .g { color: #6be38a; animation-delay: 0.25s; }
.swx-demo--hx-code .b { color: #6fb2ff; animation-delay: 0.5s; }
.swx-demo--hx-code em { display: inline-block; }

/* Read the Hex · pick the match */
.swx-demo--hx-pick .opts { display: grid; grid-template-columns: repeat(2, 54px); gap: 6px; }
.swx-demo--hx-pick .opts i { height: 34px; border-radius: 8px; }
.swx-demo--hx-pick .opts i.ok { animation: swx-ring 2.4s ease-in-out infinite; }

/* Read the Hex · three lives, one lost */
.swx-demo--hx-lives .hearts { display: flex; gap: 8px; font-size: 2rem; color: #f43f5e; }
.swx-demo--hx-lives .lose { animation: swx-lose 2.6s ease-in-out infinite; }
@keyframes swx-lose { 0%, 35% { opacity: 1; transform: none; } 55% { transform: scale(1.3); } 75%, 100% { opacity: 0.18; transform: scale(0.85); filter: grayscale(1); } }


/* ============================================================
   DIALOGS (How to play, Stats, Results)
   ============================================================ */

dialog.swx-dialog {
	width: min(560px, calc(100% - 24px));
	max-height: calc(100dvh - 32px);
	padding: clamp(22px, 4vw, 32px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 26px;
	background: linear-gradient(180deg, #1a1a23, #111117);
	color: var(--text-2, #a9acb8);
	font-family: 'Figtree', system-ui, sans-serif;
	box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	overflow-x: hidden;
	overflow-y: auto;
}

dialog.swx-dialog[open] { animation: swx-in 280ms var(--spring, cubic-bezier(0.34, 1.56, 0.64, 1)); }
dialog.swx-dialog::backdrop { background: rgba(4, 4, 8, 0.72); backdrop-filter: blur(6px); }

@keyframes swx-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }

dialog.swx-dialog--rules { width: min(860px, calc(100% - 24px)); }

.swx-x {
	position: absolute;
	right: 14px;
	top: 14px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	cursor: pointer;
	transition: background 160ms ease;
}

.swx-x:hover { background: rgba(255, 255, 255, 0.14); }

.swx-kicker {
	margin: 0 0 6px;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #22c55e;
}

.swx-dialog-title {
	margin: 0 0 20px;
	padding-right: 40px;
	font-size: clamp(1.6rem, 4vw, 2.1rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: #fff;
}

.swx-dialog .swx-rules { margin-bottom: 22px; }
.swx-dialog .swx-rule { background: rgba(255, 255, 255, 0.03); }
.swx-dialog > .swx-cta { width: 100%; }

.swx-fine { margin: 18px 0 0; font-size: 0.8rem; color: #8e92a3; text-align: center; }

/* Segmented tabs (Stats modes) */
.swx-seg {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin-bottom: 18px;
	padding: 4px;
	border-radius: 14px;
	background: #0a0a0e;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.swx-seg[hidden] { display: none; }

.swx-seg button {
	flex: 1;
	height: 34px;
	padding: 0 10px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #a9acb8;
	font-family: inherit;
	font-size: 0.86rem;
	font-weight: 700;
	cursor: pointer;
}

.swx-seg button[aria-selected="true"] { background: #fff; color: #000; }

/* Stats: big numbers, extras, distribution */
.swx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

.swx-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 14px 6px 12px;
	border-radius: 14px;
	background: #0a0a0e;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	text-align: center;
}

.swx-tile b { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.swx-tile span { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; color: #8e92a3; }

.swx-extras { display: flex; gap: 8px; margin-top: 8px; }

.swx-extras div {
	flex: 1;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 12px;
	background: #0a0a0e;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.swx-extras span { font-size: 0.8rem; font-weight: 700; color: #8e92a3; }
.swx-extras b { font-family: 'Source Code Pro', monospace; font-size: 1rem; color: #fff; }

.swx-sub {
	margin: 22px 0 10px;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8e92a3;
}

.swx-empty { margin: 0; padding: 18px; border-radius: 12px; background: #0a0a0e; text-align: center; }

.swx-dist { display: flex; flex-direction: column; gap: 6px; }
.swx-bar { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; }
.swx-bar > span { font-family: 'Source Code Pro', monospace; font-size: 0.82rem; font-weight: 600; color: #a9acb8; text-align: right; }

.swx-bar i {
	display: flex;
	justify-content: flex-end;
	width: var(--w);
	min-width: 28px;
	height: 26px;
	padding-right: 8px;
	border-radius: 7px;
	background: #2a2a35;
	animation: swx-grow 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.swx-bar.is-last i { background: linear-gradient(90deg, #22c55e, #2387ff); }
.swx-bar i, .swx-bar b { font-style: normal; }
.swx-bar b { align-self: center; font-size: 0.8rem; font-weight: 800; color: #fff; }

@keyframes swx-grow { from { width: 28px; } }

/* Results */
.swx-dialog--result { text-align: center; }
.swx-dialog--result .swx-dialog-title { margin-bottom: 8px; padding: 0 40px; }

.swx-r-hero {
	margin: 4px 0 18px;
	line-height: 1;
}

.swx-r-hero b {
	font-size: clamp(4rem, 16vw, 6.2rem);
	font-weight: 900;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
	background: linear-gradient(180deg, #fff 30%, #9fb4d9);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.swx-dialog--result.is-win .swx-r-hero b { background-image: linear-gradient(180deg, #fff 20%, #4ade80); }
.swx-r-hero span { margin-left: 4px; font-size: 1.4rem; font-weight: 800; color: #8e92a3; }

.swx-r-visual:empty { display: none; }
.swx-r-visual { margin: 0 auto 18px; }

/* Color Grid result: one bar per row */
.swx-r-grid { display: grid; gap: 3px; width: min(260px, 100%); margin: 0 auto; padding: 10px; border-radius: 14px; background: #0a0a0e; }
.swx-r-grid i { height: calc(150px / var(--n)); min-height: 8px; border-radius: 3px; animation: swx-in 400ms ease both; }
.swx-r-grid i.miss { background: #23232c; }

/* Hue Match result: target over yours, with each score */
.swx-r-pairs { display: flex; justify-content: center; gap: 8px; }
.swx-r-pairs span { display: flex; flex-direction: column; align-items: center; gap: 0; }
.swx-r-pairs i { width: 46px; height: 32px; }
.swx-r-pairs i:first-child { border-radius: 8px 8px 0 0; }
.swx-r-pairs i:nth-child(2) { border-radius: 0 0 8px 8px; }
.swx-r-pairs b { margin-top: 6px; font-family: 'Source Code Pro', monospace; font-size: 0.85rem; color: #fff; }

/* Read the Hex result: the colors you saw */
.swx-r-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 320px; }
.swx-r-chips i { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12); }

.swx-r-facts { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
.swx-r-facts:empty { display: none; }

.swx-r-facts div {
	flex: 1;
	max-width: 120px;
	padding: 10px 6px;
	border-radius: 12px;
	background: #0a0a0e;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.swx-r-facts span { display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #8e92a3; }
.swx-r-facts b { display: block; margin-top: 4px; font-family: 'Source Code Pro', monospace; font-size: 1.05rem; color: #fff; }

.swx-r-next {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 18px;
	padding: 10px;
	border-radius: 12px;
	background: rgba(34, 197, 94, 0.08);
	box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.25);
}

.swx-r-next[hidden] { display: none; }
.swx-r-next span { font-size: 0.85rem; font-weight: 700; color: #a9acb8; }
.swx-r-next b { font-family: 'Source Code Pro', monospace; font-size: 1.1rem; color: #4ade80; letter-spacing: 0.04em; }

.swx-r-actions { display: flex; flex-direction: column; gap: 8px; }
.swx-r-actions .swx-cta,
.swx-r-actions .swx-ghost { width: 100%; }
.swx-r-actions [hidden] { display: none; }

/* Celebration: colored squares burst from the score */
.swx-burst { position: absolute; left: 50%; top: 150px; width: 0; height: 0; pointer-events: none; z-index: 2; }

.swx-burst i {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	opacity: 0;
}

.swx-burst.is-on i { animation: swx-burst 1100ms cubic-bezier(0.15, 0.8, 0.3, 1) both; animation-delay: var(--d); }

@keyframes swx-burst {
	0%   { opacity: 1; transform: translate(0, 0) rotate(0) scale(0.4); }
	70%  { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 60px)) rotate(var(--r)) scale(1); }
}


/* ============================================================
   RESPONSIVE + MOTION
   ============================================================ */

@media (max-width: 900px) {
	.swx-rules { grid-template-columns: 1fr; }
	.swx-rule { flex-direction: row; }
	.swx-rule .swx-demo { flex: 0 0 42%; aspect-ratio: auto; min-height: 120px; }
	.swx-rule-text { align-self: center; }
}

@media (max-width: 640px) {
	.swg-page .swg-bar { flex-direction: column; align-items: stretch; }
	.swg-page .swg-modes { display: flex; }
	.swg-page .swg-modes .swp-chip { flex: 1; padding: 0 6px; }
	.swg-page .swg-modes .swp-chip small { display: none; }
	.swg-page .swg-stats { justify-content: stretch; }
	.swg-page .swg-stat { flex: 1; min-width: 0; padding: 7px 10px 8px; }
	.swg-page .swg-stat b { font-size: 1.15rem; }

	.swx-toolbar .swx-tbtn { padding: 0 12px 0 10px; }
	.swx-cg-actions .swx-cta { flex: 1; min-width: 0; }

	.swx-rule { flex-direction: column; }
	.swx-rule .swx-demo { flex: none; aspect-ratio: 16 / 7; min-height: 0; }

	.swx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.swx-extras { flex-direction: column; }
	.swx-r-facts { flex-wrap: wrap; }
	.swx-r-facts div { flex: 1 1 40%; max-width: none; }
	.swx-r-pairs i { width: 40px; }
}

@media (max-width: 400px) {
	.swx-toolbar .swx-tbtn span { display: none; }
	.swx-toolbar .swx-tbtn { width: 40px; padding: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.swx-demo *, .swx-cg-tile, .swx-cg-row, .swx-cg-bar, .swx-burst i, dialog.swx-dialog[open], .swx-tbtn.is-new::after { animation: none !important; transition: none !important; }
}


/* ============================================================
   BOARD POLISH — the playable pieces get the same finish as the
   How to play scenes: an inset stage, glossy tiles, soft lift.
   ============================================================ */

/* The stage: a recessed well behind each game's play area */
.swg-page--game .swg-board:not(.swx-cg) .swg-play {
	position: relative;
	padding: clamp(18px, 3vw, 30px);
	border-radius: 20px;
	background:
		radial-gradient(90% 70% at 50% 0%, rgba(35, 135, 255, 0.12), transparent 70%),
		var(--well);
	box-shadow: inset 0 0 0 1px var(--rim), inset 0 14px 34px rgba(0, 0, 0, 0.45);
}

/* Shared gloss for every color piece */
.swg-hm-swatch,
.swg-sm-swatch,
.swg-oo-grid button,
.swg-hx-options button {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -3px 0 rgba(0, 0, 0, 0.16);
}

/* Big buttons inside the games match the dialog buttons */
.swg-page--game .swg-go,
.swg-page--game .swg-end-actions .swh-btn {
	height: 48px;
	padding: 0 28px;
	border-radius: 999px;
	font-size: 0.98rem;
	font-weight: 800;
	transition: transform 160ms var(--spring), background var(--ease);
}

.swg-page--game .swg-go:hover,
.swg-page--game .swg-end-actions .swh-btn--light:hover { transform: translateY(-2px) scale(1.02); }
.swg-page--game .swg-go { min-width: 220px; box-shadow: 0 10px 28px rgba(255, 255, 255, 0.12); }

/* Lives as red hearts */
.swg-page .swg-stat b.swx-hearts { font-family: var(--sans); font-size: 1.15rem; letter-spacing: 3px; color: #f43f5e; text-shadow: 0 0 12px rgba(244, 63, 94, 0.45); }

/* ---------- Hue Match ---------- */

.swg-hm-stack {
	overflow: hidden;
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.swg-hm-swatch { border-radius: 0; }

/* A hairline where target meets yours, so the edge reads clearly */
.swg-hm-swatch[data-hm-guess] { box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.12); }

.swg-hm-swatch span {
	left: 14px;
	top: 14px;
	padding: 5px 11px;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(6px);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.swg-hm-controls { gap: 16px; margin-top: 22px; }

.swg-slider {
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-3);
}

.swg-slider input[type="range"] {
	height: 16px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 2px 6px rgba(0, 0, 0, 0.45);
}

.swg-slider input[type="range"]::-webkit-slider-thumb {
	width: 28px;
	height: 28px;
	border: 0;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18), 0 4px 12px rgba(0, 0, 0, 0.6);
	transition: transform 160ms var(--spring);
}

.swg-slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }

.swg-slider input[type="range"]::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border: 0;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18), 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* Swatch Match palettes */
.swg-sm-label { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; }
.swg-sm-swatch { border-radius: 14px; transition: transform 160ms var(--spring), box-shadow 160ms ease; }
.swg-sm-row--yours .swg-sm-swatch:hover { transform: translateY(-3px); }
.swg-sm-row--yours .swg-sm-swatch[aria-pressed="true"] { transform: translateY(-4px); box-shadow: 0 0 0 3px #fff, 0 12px 24px rgba(0, 0, 0, 0.5); }

/* Round result */
.swg-hm-result { margin-top: 22px; }
.swg-hm-result .swg-big-score b { font-size: clamp(3rem, 8vw, 4.4rem); }

/* ---------- Odd One Out ---------- */

.swg-page--game .swg-bar-note {
	display: inline-block;
	margin: 0 auto 16px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: inset 0 0 0 1px var(--rim);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--text-2);
}

.swg-oo-grid { width: min(100%, 460px); gap: clamp(4px, 0.9vw, 8px); }

.swg-oo-grid button {
	border-radius: clamp(5px, calc(48px / var(--n, 2)), 14px);
	transition: transform 160ms var(--spring), box-shadow 160ms ease;
}

.swg-oo-grid button:hover { transform: translateY(-2px) scale(1.03); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 18px rgba(0, 0, 0, 0.45); }
.swg-oo-grid button:active { transform: scale(0.95); }
.swg-oo-grid button.is-reveal { box-shadow: 0 0 0 4px #fff, 0 0 30px rgba(255, 255, 255, 0.4); animation: swx-ring 1.2s ease-in-out infinite; }

/* A fresh grid pops in */
.swg-oo-grid button { animation: swx-tile-in 260ms var(--spring) backwards; }
@keyframes swx-tile-in { from { transform: scale(0.85); opacity: 0; } }

/* ---------- Read the Hex ---------- */

.swg-hx-code {
	display: inline-flex;
	align-items: baseline;
	margin: 4px auto 0;
	padding: 10px 24px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.04);
	box-shadow: inset 0 0 0 1px var(--rim);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.swg-hx-code b { font-weight: 700; }
.swg-hx-code .r { color: #ff8a8a; }
.swg-hx-code .g { color: #74e897; }
.swg-hx-code .b { color: #7fbcff; }

.swg-hx-prompt {
	margin: 14px 0 20px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-3);
}

.swg-hx-options { gap: 12px; }

.swg-hx-options button {
	border-radius: 16px;
	transition: transform 160ms var(--spring), opacity 200ms ease, box-shadow 160ms ease;
}

.swg-hx-options button:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 12px 24px rgba(0, 0, 0, 0.45); }
.swg-hx-options button span { padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); color: #fff; }
.swg-hx-options.is-revealed button.is-answer { animation: swx-drop 360ms var(--spring); }


/* ============================================================
   GAME PAGE ORDER: game → ad → How to play → tips
   (On phones the ad stays above the game.)
   ============================================================ */

.swg-page--game > .swg-page-main { order: 1; }
.swg-page--game > .swg-page-ad   { order: 2; }
.swg-page--game > .swg-page-help { order: 3; }
.swg-page--game > .swg-page-more { order: 4; }

.swg-page--game .swg-page-ad .sw-ad { margin: clamp(32px, 5vw, 48px) auto 0; }

/* Room to breathe before How to play */
.swg-page--game > .swg-page-help { margin-top: clamp(56px, 8vw, 96px); }
.swg-page--game .swx-howto .swh-h2 { margin-bottom: 20px; }

@media (max-width: 760px) {
	.swg-page--game > .swg-page-ad { order: 0; }
	.swg-page--game .swg-page-ad .sw-ad { margin: 0 auto 20px; }
	.swg-page--game > .swg-page-help { margin-top: 48px; }
}

/* How to play card: the hex code scene uses full-size letters */
.swx-demo--hx-code em { margin: 0; font-size: inherit; letter-spacing: 0; text-transform: none; }


/* ============================================================
   SHARE SHEET (inc/arcade.php #swx-share)
   ============================================================ */

dialog.swx-dialog--share { width: min(460px, calc(100% - 24px)); }

.swx-share-preview {
	max-height: 220px;
	margin: 0 0 14px;
	padding: 16px 18px;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
	border-radius: 14px;
	background: #0a0a0e;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	color: #fff;
	font-family: 'Source Code Pro', ui-monospace, monospace;
	font-size: 0.9rem;
	line-height: 1.55;
	white-space: pre-wrap;
	word-break: break-word;
}

.swx-share-copy { width: 100%; margin-bottom: 14px; }

.swx-share-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.swx-net {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 6px 12px;
	border: 0;
	border-radius: 14px;
	background: #0a0a0e;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	color: #fff;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background 160ms ease, transform 160ms var(--spring, ease);
}

.swx-net svg { width: 22px; height: 22px; }
.swx-net:hover { background: var(--c, #1f1f28); color: #fff; transform: translateY(-2px); }
.swx-net[hidden] { display: none; }
.swx-net--x        { --c: #000; }
.swx-net--facebook { --c: #1877f2; }
.swx-net--bluesky  { --c: #1185fe; }
.swx-net--reddit   { --c: #ff4500; }
.swx-net--whatsapp { --c: #1fa855; }
.swx-net--threads  { --c: #000; }


/* ============================================================
   HUE MATCH · SWATCH MATCH — one connected strip: targets on top,
   yours underneath, rounded only at the outer corners.
   ============================================================ */

.swg-sm { display: flex; flex-direction: column; margin-bottom: 4px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); }
.swg-sm .swg-sm-label:first-child { display: none; }
.swg-sm .swg-sm-label { order: 3; margin: 12px 0 0; text-align: center; }
.swg-sm [data-hm-ptargets] { order: 1; }
.swg-sm [data-hm-pyours]   { order: 2; }

.swg-sm .swg-sm-row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	overflow: hidden;
}

.swg-sm [data-hm-ptargets] { border-radius: 18px 18px 0 0; }
.swg-sm [data-hm-pyours]   { border-radius: 0 0 18px 18px; box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.35); }

/* "Target" / "Yours" pills, like the single-color stack */
.swg-sm .swg-sm-row::before {
	content: 'Target';
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 2;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	pointer-events: none;
}

.swg-sm .swg-sm-row--yours::before { content: 'Yours'; }

.swg-sm .swg-sm-swatch {
	position: relative;
	height: clamp(84px, 14vw, 120px);
	aspect-ratio: auto;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transform: none;
}

.swg-sm .swg-sm-row--yours .swg-sm-swatch { cursor: pointer; transition: filter 160ms ease, box-shadow 160ms ease; }
.swg-sm .swg-sm-row--yours .swg-sm-swatch:hover { filter: brightness(1.08); transform: none; }

/* The swatch you're editing: a bright inset frame and a notch pointing up at its target */
.swg-sm .swg-sm-row--yours .swg-sm-swatch[aria-pressed="true"] {
	z-index: 1;
	transform: none;
	box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px rgba(0, 0, 0, 0.35);
}

.swg-sm .swg-sm-row--yours .swg-sm-swatch[aria-pressed="true"]::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	background: #fff;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.swg-sm .swg-sm-score {
	position: absolute;
	left: 50%;
	top: 50%;
	right: auto;
	bottom: auto;
	transform: translate(-50%, -50%);
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	font-family: var(--mono);
	font-size: 0.9rem;
}

@media (max-width: 640px) {
	.swg-sm .swg-sm-row::before { left: 8px; top: 8px; padding: 4px 8px; font-size: 0.6rem; }
}


/* ============================================================
   RESULTS · TODAY WORLDWIDE (inc/scores.php)
   ============================================================ */

.swx-r-global {
	margin: 0 0 16px;
	padding: 16px 16px 14px;
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(35, 135, 255, 0.10), rgba(34, 197, 94, 0.06));
	box-shadow: inset 0 0 0 1px rgba(35, 135, 255, 0.25);
	animation: swx-in 320ms ease both;
}

.swx-r-global[hidden] { display: none; }
.swx-r-global .swx-kicker { color: #7fb8ff; margin-bottom: 4px; }
.swx-g-lead { margin: 0; font-size: 1.15rem; font-weight: 700; color: #fff; }
.swx-g-lead b { font-size: 1.5rem; font-weight: 900; color: #4ade80; }
.swx-g-sub { margin: 2px 0 0; font-size: 0.88rem; font-weight: 600; color: #a9acb8; }

.swx-g-chart {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 46px;
	margin: 12px auto 10px;
	max-width: 280px;
}

.swx-g-chart i { flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px; background: rgba(255, 255, 255, 0.16); animation: swx-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.swx-g-chart i.is-you { background: linear-gradient(180deg, #4ade80, #2387ff); box-shadow: 0 0 12px rgba(74, 222, 128, 0.5); }
@keyframes swx-rise { from { height: 4%; } }

.swx-g-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 0.8rem; color: #a9acb8; }
.swx-g-facts b { color: #fff; }