/* =====================================================================
   GCD_OS — Sala giochi.
   Launcher + Snake, 2048, Campo Minato. Tutto si appoggia ai token
   dell'OS (accento, carta, linee) così segue il tema scelto.
   ===================================================================== */

/* ---------- Launcher ---------- */
.gcd-arcade {
	padding: 16px 16px 20px;
	font-family: var(--ui);
	color: var(--ink);
}
.gcd-arcade__intro {
	margin: 0 0 14px;
	font: 500 13px/1.5 var(--mono);
	color: var(--ink-3);
}
.gcd-arcade__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.gcd-arcade__card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	color: inherit;
	text-decoration: none;
	transition: transform .14s var(--ease), border-color .14s var(--ease), background .14s var(--ease), box-shadow .14s var(--ease);
}
.gcd-arcade__card:hover,
.gcd-arcade__card:focus-visible {
	transform: translateY(-2px);
	border-color: var(--accent);
	background: var(--paper-2);
	box-shadow: var(--shadow-pop);
	outline: none;
}
.gcd-arcade__glyph {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	border-radius: var(--radius-sm);
	background: oklch(from var(--accent) l c h / .14);
	color: var(--accent);
}
.gcd-arcade__glyph .gcd-ico { width: 26px; height: 26px; }
.gcd-arcade__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.gcd-arcade__name { font: 700 15px/1.2 var(--ui); }
.gcd-arcade__desc { font: 400 12.5px/1.4 var(--mono); color: var(--ink-3); }
.gcd-arcade__go { font-size: 18px; color: var(--accent); flex: 0 0 auto; transition: transform .14s var(--ease); }
.gcd-arcade__card:hover .gcd-arcade__go { transform: translateX(3px); }

/* ---------- Guscio comune dei giochi ---------- */
.gcd-window--game .gcd-window__body { display: flex; background: var(--paper-2); }
.gcd-game {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 12px;
	font-family: var(--ui);
	color: var(--ink);
}
.gcd-ghud {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.gcd-ghud__stat {
	display: flex;
	flex-direction: column;
	line-height: 1;
	padding: 6px 12px;
	border-radius: var(--radius-sm);
	background: var(--paper);
	border: 1px solid var(--line);
	min-width: 64px;
}
.gcd-ghud__k { font: 600 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.gcd-ghud__v { font: 700 18px/1.1 var(--ui); margin-top: 4px; font-variant-numeric: tabular-nums; }
.gcd-ghud__spacer { flex: 1 1 auto; }
.gcd-gbtn {
	font: 600 12px/1 var(--mono);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	border: 1px solid var(--accent);
	border-radius: var(--radius-sm);
	background: var(--accent);
	color: var(--on-accent);
	cursor: pointer;
	transition: background .12s var(--ease), transform .08s var(--ease);
}
.gcd-gbtn:hover { background: var(--accent-press); }
.gcd-gbtn:active { transform: translateY(1px); }
.gcd-gbtn--ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
.gcd-gbtn--ghost:hover { background: var(--paper-2); border-color: var(--ink-3); }

.gcd-gstage {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
}

/* Overlay fine partita (riusato dai tre giochi) */
.gcd-gover {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
	padding: 20px;
	background: oklch(from var(--ink) l c h / .58);
	backdrop-filter: blur(2px);
	border-radius: var(--radius-sm);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s var(--ease), visibility .2s var(--ease);
}
.gcd-gover.is-on { opacity: 1; visibility: visible; }
.gcd-gover__title { font: 800 26px/1 var(--ui); color: var(--paper); margin: 0; }
.gcd-gover__sub { font: 500 13px/1.4 var(--mono); color: oklch(from var(--paper) l c h / .85); margin: 0; }

.gcd-ghint { margin-top: 10px; font: 400 11.5px/1.4 var(--mono); color: var(--ink-3); text-align: center; }

/* ---------- Snake ---------- */
.gcd-snake__board {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: 0 1px 0 var(--chrome-hi) inset;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	aspect-ratio: 1 / 1;
	touch-action: none;
}
/* D-pad touch */
.gcd-dpad {
	display: none;
	grid-template-columns: repeat(3, 52px);
	grid-template-rows: repeat(2, 52px);
	gap: 6px;
	margin: 12px auto 0;
	justify-content: center;
}
.gcd-dpad__b {
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--paper);
	color: var(--ink);
	font-size: 20px;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}
.gcd-dpad__b:active { background: var(--accent); color: var(--on-accent); }
.gcd-dpad__b--up { grid-column: 2; grid-row: 1; }
.gcd-dpad__b--left { grid-column: 1; grid-row: 2; }
.gcd-dpad__b--down { grid-column: 2; grid-row: 2; }
.gcd-dpad__b--right { grid-column: 3; grid-row: 2; }
.gcd-game.has-touch .gcd-dpad { display: grid; }

/* ---------- 2048 ---------- */
.gcd-2048__wrap { display: flex; flex-direction: column; align-items: center; }
.gcd-2048__board {
	width: min(360px, 80vw, 56vh);
	aspect-ratio: 1;
	padding: 10px;
	background: oklch(from var(--accent) calc(l - .18) calc(c - .04) h / .9);
	border-radius: var(--radius);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	gap: 10px;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
.gcd-2048__board:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.gcd-2048__cell {
	display: grid;
	place-items: center;
	border-radius: var(--radius-sm);
	background: oklch(from var(--accent) calc(l - .08) calc(c - .05) h / .5);
	font: 800 clamp(18px, 5.4vw, 30px)/1 var(--ui);
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}
.gcd-2048__cell.is-new { animation: gcd-2048-pop .16s var(--ease) both; }
.gcd-2048__cell.is-merged { animation: gcd-2048-merge .16s var(--ease) both; }
@keyframes gcd-2048-pop { from { transform: scale(.1); } to { transform: scale(1); } }
@keyframes gcd-2048-merge { 0% { transform: scale(1); } 50% { transform: scale(1.16); } 100% { transform: scale(1); } }
.gcd-2048__cell[data-v="2"]    { background: oklch(0.945 0.020 80); }
.gcd-2048__cell[data-v="4"]    { background: oklch(0.915 0.045 78); }
.gcd-2048__cell[data-v="8"]    { background: oklch(0.800 0.110 64); color: var(--paper); }
.gcd-2048__cell[data-v="16"]   { background: oklch(0.745 0.140 56); color: var(--paper); }
.gcd-2048__cell[data-v="32"]   { background: oklch(0.700 0.155 46); color: var(--paper); }
.gcd-2048__cell[data-v="64"]   { background: oklch(0.640 0.165 38); color: var(--paper); }
.gcd-2048__cell[data-v="128"]  { background: oklch(0.720 0.140 130); color: var(--paper); font-size: clamp(16px, 4.6vw, 26px); }
.gcd-2048__cell[data-v="256"]  { background: oklch(0.660 0.150 150); color: var(--paper); font-size: clamp(16px, 4.6vw, 26px); }
.gcd-2048__cell[data-v="512"]  { background: oklch(0.600 0.140 200); color: var(--paper); font-size: clamp(16px, 4.6vw, 26px); }
.gcd-2048__cell[data-v="1024"] { background: oklch(0.520 0.130 250); color: var(--paper); font-size: clamp(13px, 3.6vw, 21px); }
.gcd-2048__cell[data-v="2048"] { background: oklch(0.560 0.150 300); color: var(--paper); font-size: clamp(13px, 3.6vw, 21px); box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / .6); }
.gcd-2048__cell[data-big]      { font-size: clamp(11px, 3vw, 18px); }

/* ---------- Campo Minato ---------- */
.gcd-mine__wrap { display: flex; flex-direction: column; align-items: center; }
.gcd-mine__board {
	display: grid;
	gap: 3px;
	padding: 8px;
	background: oklch(from var(--ink) l c h / .08);
	border-radius: var(--radius-sm);
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
}
.gcd-mine__cell {
	width: clamp(24px, 7vw, 34px);
	height: clamp(24px, 7vw, 34px);
	display: grid;
	place-items: center;
	border: 0;
	padding: 0;
	border-radius: 4px;
	background: linear-gradient(oklch(from var(--accent) calc(l + .08) c h), var(--accent));
	box-shadow: 0 1px 0 oklch(from var(--accent) calc(l + .14) c h) inset, 0 -1px 0 var(--accent-press) inset;
	color: var(--on-accent);
	font: 800 15px/1 var(--ui);
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}
.gcd-mine__cell:hover:not(.is-open):not(:disabled) { filter: brightness(1.06); }
.gcd-mine__cell.is-open {
	background: var(--paper-2);
	box-shadow: 0 0 0 1px var(--line) inset;
	cursor: default;
	color: var(--ink);
}
.gcd-mine__cell.is-flag { color: var(--warn); font-size: 16px; }
.gcd-mine__cell.is-mine { background: var(--warn); color: var(--paper); }
.gcd-mine__cell.is-boom { background: oklch(0.560 0.220 28); color: var(--paper); }
.gcd-mine__cell[data-n="1"] { color: oklch(0.520 0.140 250); }
.gcd-mine__cell[data-n="2"] { color: oklch(0.520 0.130 150); }
.gcd-mine__cell[data-n="3"] { color: oklch(0.560 0.180 28); }
.gcd-mine__cell[data-n="4"] { color: oklch(0.430 0.130 280); }
.gcd-mine__cell[data-n="5"] { color: oklch(0.500 0.150 40); }
.gcd-mine__cell[data-n="6"] { color: oklch(0.560 0.110 200); }
.gcd-mine__cell[data-n="7"] { color: var(--ink); }
.gcd-mine__cell[data-n="8"] { color: var(--ink-3); }
.gcd-mine__face {
	font-size: 20px;
	width: 40px;
	height: 36px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--paper);
	cursor: pointer;
	line-height: 1;
}
.gcd-mine__face:active { transform: translateY(1px); }
.gcd-mine__diff {
	display: inline-flex;
	gap: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.gcd-mine__diff button {
	font: 600 11px/1 var(--mono);
	padding: 8px 10px;
	border: 0;
	background: var(--paper);
	color: var(--ink-2);
	cursor: pointer;
}
.gcd-mine__diff button.is-on { background: var(--accent); color: var(--on-accent); }

/* ---------- Classifica ---------- */
.gcd-gbtn--ico { padding: 9px 10px; }
.gcd-gover { overflow-y: auto; }

.gcd-lb {
	width: min(340px, 100%);
	margin: 2px 0;
	color: var(--ink);
	text-align: left;
}
.gcd-lb:empty { display: none; }
.gcd-lb__head {
	display: flex;
	align-items: center;
	gap: 6px;
	font: 700 13px/1.2 var(--mono);
	color: var(--paper);
	margin-bottom: 8px;
	justify-content: center;
}
.gcd-lb__head .gcd-ico,
.gcd-lb__head svg { width: 16px; height: 16px; }
.gcd-lb__head--ok { color: var(--good); }
.gcd-lb__list {
	list-style: none;
	margin: 0;
	padding: 6px;
	background: var(--paper);
	border-radius: var(--radius-sm);
	max-height: 230px;
	overflow-y: auto;
}
.gcd-lb__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 5px;
	font: 500 13px/1.2 var(--ui);
}
.gcd-lb__row + .gcd-lb__row { border-top: 1px solid var(--line-2); }
.gcd-lb__row.is-you { background: oklch(from var(--accent) l c h / .18); font-weight: 700; }
.gcd-lb__rank {
	flex: 0 0 22px;
	font: 700 12px/1 var(--mono);
	color: var(--ink-3);
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.gcd-lb__row:nth-child(1) .gcd-lb__rank { color: oklch(0.545 0.150 62); } /* oro AA su carta (4.5:1) */
.gcd-lb__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcd-lb__name em { font-style: normal; color: var(--ink-3); font-weight: 500; font-size: 11px; }
.gcd-lb__score { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.gcd-lb__empty,
.gcd-lb__load {
	margin: 0;
	padding: 14px 10px;
	text-align: center;
	font: 500 12px/1.4 var(--mono);
	color: oklch(from var(--paper) l c h / .8);
}
.gcd-lb__season {
	margin: 8px 0 0;
	text-align: center;
	font: 500 11px/1.3 var(--mono);
	color: oklch(from var(--paper) l c h / .7);
}

/* scelta del nome generato */
.gcd-lb__pick { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gcd-lb__pick-k { font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: oklch(from var(--paper) l c h / .8); }
.gcd-lb__handle-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 8px 8px 14px;
	background: var(--paper);
	border-radius: var(--radius-sm);
}
.gcd-lb__handle {
	font: 800 18px/1 var(--ui);
	letter-spacing: .02em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.gcd-lb__roll { padding: 7px 9px; }
.gcd-lb__save { margin-top: 2px; }
.gcd-lb__close { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
	.gcd-arcade__card,
	.gcd-2048__cell { transition: none; }
	.gcd-2048__cell.is-new,
	.gcd-2048__cell.is-merged { animation: none; }
}