/* Dust Devil Rally
   One committed visual world: a scuffed bakelite cabinet with hazard-yellow
   signage. Everything is scoped to .ddr-cab so a theme cannot bleed in. */

.ddr-cab {
	--ddr-cab: #191411;
	--ddr-cab-2: #241c17;
	--ddr-cab-3: #2f251e;
	--ddr-bezel: #0c0908;
	--ddr-ink: #f3eadd;
	--ddr-dim: #a79484;
	--ddr-hazard: #f2b705;
	--ddr-rally: #d8402f;
	--ddr-ochre: #c89a5b;
	--ddr-readout: #54e0a8;
	--ddr-line: #3d3025;
	--ddr-shadow: 0 18px 40px rgba(0, 0, 0, .45);

	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 2em auto;
	padding: 0;
	width: 100%;
	color: var(--ddr-ink);
	font-family: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.3;
	background: radial-gradient(120% 80% at 50% 0%, #2a211a 0%, #140f0c 60%, #0b0807 100%);
	border-radius: 12px;
	padding: 16px;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

.ddr-cab *,
.ddr-cab *::before,
.ddr-cab *::after { box-sizing: border-box; }

/* Low specificity on purpose (:where) so component styles below win cleanly. */
.ddr-cab :where(button) {
	font-family: inherit;
	cursor: pointer;
	border: 0;
	background: none;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.2;
}

.ddr-cab :focus-visible { outline: 3px solid var(--ddr-readout); outline-offset: 3px; }
.ddr-cab h3, .ddr-cab h4, .ddr-cab p, .ddr-cab ul { margin: 0; padding: 0; }
.ddr-cab ul { list-style: none; }
.ddr-cab kbd {
	font-family: "Share Tech Mono", ui-monospace, monospace;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 3px;
	padding: 1px 5px;
	font-size: .95em;
}

/* ---------------------------------------------------------------- marquee */

.ddr-marquee {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	background: linear-gradient(180deg, var(--ddr-cab-3), var(--ddr-cab-2));
	border: 1px solid var(--ddr-line);
	border-bottom-color: #0f0b09;
	border-radius: 10px 10px 4px 4px;
	padding: 12px 16px;
	box-shadow: var(--ddr-shadow);
}

.ddr-wordmark {
	font-family: Bungee, Impact, "Arial Black", sans-serif;
	font-size: clamp(18px, 4vw, 28px);
	line-height: 1;
	color: var(--ddr-hazard);
	text-shadow: 0 2px 0 #8a5e00, 0 3px 0 #4a3200, 0 6px 14px rgba(0, 0, 0, .6);
}
.ddr-wordmark span { color: var(--ddr-rally); text-shadow: 0 2px 0 #7a1e15, 0 3px 0 #3e0f0a, 0 6px 14px rgba(0, 0, 0, .6); }

.ddr-driver { display: flex; align-items: center; gap: 8px; }
.ddr-driver span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ddr-dim); }
.ddr-name {
	font-family: "Share Tech Mono", ui-monospace, monospace;
	background: #120e0b;
	border: 1px solid var(--ddr-line);
	border-radius: 4px;
	color: var(--ddr-hazard);
	padding: 6px 10px;
	width: 9.5em;
	font-size: 14px;
}

/* ----------------------------------------------------------------- screen */

.ddr-screen {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #0a0d12;
	border: 10px solid var(--ddr-bezel);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var(--ddr-shadow), inset 0 0 0 1px #3a2e24;
}
.ddr-canvas { display: block; width: 100%; height: 100%; }
.ddr-canvas.is-pixel { image-rendering: pixelated; image-rendering: crisp-edges; }

.ddr-scan {
	position: absolute; inset: 0; pointer-events: none;
	background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
	mix-blend-mode: multiply; opacity: .45;
}
.ddr-vig {
	position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(120% 100% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .45) 100%);
}

/* -------------------------------------------------------------------- hud */

.ddr-hud {
	position: absolute; inset: 0; pointer-events: none; padding: 10px 12px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: auto 1fr auto;
	gap: 6px;
}
.ddr-hud[hidden] { display: none; }
.ddr-lbl {
	font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
	color: rgba(255, 255, 255, .72); text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}
.ddr-val {
	font-family: "Share Tech Mono", ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
	color: #fff; line-height: 1;
	text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 12px rgba(0, 0, 0, .5);
}
.ddr-hud-l { justify-self: start; }
.ddr-hud-c { justify-self: center; text-align: center; }
.ddr-hud-r { justify-self: end; text-align: right; }
.ddr-clock { font-size: clamp(24px, 6vw, 40px); color: var(--ddr-hazard); }
.ddr-clock.is-low { color: #ff6b57; animation: ddr-pulse .5s steps(2, end) infinite; }
@keyframes ddr-pulse { 50% { opacity: .35; } }
.ddr-mid { font-size: clamp(13px, 3vw, 17px); }
.ddr-speed { font-size: clamp(28px, 7vw, 46px); }
.ddr-hud-r .ddr-lbl { letter-spacing: .18em; }
.ddr-sub { font-size: clamp(11px, 2.4vw, 14px); color: var(--ddr-readout); letter-spacing: .04em; }

.ddr-note {
	grid-column: 1 / -1; grid-row: 2; align-self: start; justify-self: center; margin-top: 2px;
	font-weight: 700; font-size: clamp(15px, 3.8vw, 22px); letter-spacing: .06em; text-transform: uppercase;
	color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .7); opacity: 0; transition: opacity .18s;
}
.ddr-note.is-on { opacity: 1; }
.ddr-note em { font-style: normal; color: var(--ddr-hazard); }

.ddr-flash {
	grid-column: 1 / -1; grid-row: 2; align-self: center; justify-self: center; text-align: center;
	font-family: Bungee, Impact, sans-serif; font-size: clamp(20px, 5.4vw, 34px); line-height: 1.15;
	color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .6);
	opacity: 0; transform: scale(.9); transition: opacity .2s, transform .2s;
}
.ddr-flash.is-on { opacity: 1; transform: scale(1); }
.ddr-flash small {
	display: block; font-family: "Barlow Condensed", sans-serif; font-size: .5em;
	letter-spacing: .16em; color: var(--ddr-hazard); margin-top: 6px;
}

.ddr-bar { grid-column: 1 / -1; grid-row: 3; align-self: end; display: flex; align-items: center; gap: 8px; }
.ddr-track { position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.ddr-track i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--ddr-ochre), var(--ddr-hazard)); }
.ddr-track u { position: absolute; top: -3px; width: 2px; height: 12px; background: rgba(255, 255, 255, .8); text-decoration: none; }
.ddr-tag {
	font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
	color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .9); white-space: nowrap;
}

/* ----------------------------------------------------------------- panels */

.ddr-panel {
	position: absolute; inset: 0; overflow-y: auto;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 14px; text-align: center; padding: 20px;
	background: linear-gradient(180deg, rgba(10, 8, 6, .55), rgba(10, 8, 6, .9));
}
.ddr-panel[hidden] { display: none; }
.ddr-panel-head { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 620px; justify-content: flex-start; }
.ddr-panel-head h3 { font-family: Bungee, Impact, sans-serif; font-size: clamp(15px, 3.4vw, 20px); color: var(--ddr-hazard); }
.ddr-panel-head .ddr-code { color: var(--ddr-readout); font-family: "Share Tech Mono", monospace; letter-spacing: .18em; }

.ddr-title {
	font-family: Bungee, Impact, sans-serif; font-size: clamp(22px, 6.4vw, 42px); line-height: 1;
	color: var(--ddr-hazard); text-shadow: 0 3px 0 #7a5300, 0 5px 0 #3e2a00, 0 12px 24px rgba(0, 0, 0, .7);
}
.ddr-title span { color: var(--ddr-rally); text-shadow: 0 3px 0 #7a1e15, 0 5px 0 #3e0f0a, 0 12px 24px rgba(0, 0, 0, .7); }

.ddr-copy { max-width: 46ch; font-size: clamp(13px, 3vw, 15px); color: var(--ddr-ink); opacity: .92; }
.ddr-dim { color: var(--ddr-dim); }
.ddr-err { color: #ff8f7c; font-size: 13px; min-height: 1.2em; }

.ddr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; width: 100%; max-width: 620px; }
.ddr-card {
	display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px 16px;
	border: 1px solid var(--ddr-line); border-radius: 8px;
	background: linear-gradient(180deg, rgba(47, 37, 30, .95), rgba(24, 19, 15, .95));
	box-shadow: 0 5px 0 #100c0a; transition: transform .08s, box-shadow .08s, border-color .08s;
}
.ddr-card:hover { border-color: var(--ddr-ochre); }
.ddr-card:active { transform: translateY(4px); box-shadow: 0 1px 0 #100c0a; }
.ddr-card-kicker { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ddr-ochre); }
.ddr-card-name { font-family: Bungee, Impact, sans-serif; font-size: clamp(15px, 3.6vw, 20px); color: var(--ddr-ink); }
.ddr-card-desc { font-size: 12.5px; color: var(--ddr-dim); line-height: 1.35; }

.ddr-menu-links { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ddr-link, .ddr-back {
	font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
	color: var(--ddr-dim); border: 1px solid var(--ddr-line); border-radius: 4px; padding: 7px 12px;
}
.ddr-link:hover, .ddr-back:hover { color: var(--ddr-ink); border-color: var(--ddr-ochre); }

.ddr-btn {
	font-family: Bungee, Impact, sans-serif; font-size: clamp(13px, 3.2vw, 17px);
	padding: 12px 24px; border-radius: 6px; color: #20160c;
	background: linear-gradient(180deg, #ffd34e, var(--ddr-hazard));
	box-shadow: 0 5px 0 #8a6100, 0 10px 20px rgba(0, 0, 0, .5);
	transition: transform .07s, box-shadow .07s;
}
.ddr-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #8a6100; }
.ddr-btn[disabled] { opacity: .5; cursor: not-allowed; }
.ddr-btn-2 { background: linear-gradient(180deg, #6be9b6, #2fb183); box-shadow: 0 5px 0 #16674c, 0 10px 20px rgba(0, 0, 0, .5); color: #0e1a14; }
.ddr-btn-2:active { box-shadow: 0 1px 0 #16674c; }

/* tracks */
.ddr-tracklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; width: 100%; max-width: 620px; }
.ddr-tile {
	display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px;
	border: 1px solid var(--ddr-line); border-radius: 8px; background: rgba(30, 24, 19, .9);
	box-shadow: 0 4px 0 #100c0a;
}
.ddr-tile:hover { border-color: var(--ddr-ochre); }
.ddr-tile:active { transform: translateY(3px); box-shadow: 0 1px 0 #100c0a; }
.ddr-tile b { font-family: Bungee, Impact, sans-serif; font-size: 14px; color: var(--ddr-ink); font-weight: 400; }
.ddr-tile span { font-size: 12px; color: var(--ddr-dim); line-height: 1.35; }
.ddr-tile i { font-style: normal; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ddr-ochre); }

.ddr-opts { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; font-size: 12.5px; color: var(--ddr-dim); }
.ddr-opts label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* multiplayer */
.ddr-mp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; width: 100%; max-width: 560px; }
.ddr-mp-col { display: flex; flex-direction: column; gap: 8px; align-items: stretch; padding: 14px; border: 1px solid var(--ddr-line); border-radius: 8px; background: rgba(30, 24, 19, .85); }
.ddr-mp-col h4 { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ddr-ochre); }
.ddr-seg { display: flex; border: 1px solid var(--ddr-line); border-radius: 5px; overflow: hidden; }
.ddr-seg-btn { flex: 1; padding: 7px 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ddr-dim); }
.ddr-seg-btn.is-on { background: var(--ddr-ochre); color: #1a1410; font-weight: 700; }
.ddr-select, .ddr-code-in {
	font-family: "Share Tech Mono", monospace; background: #120e0b; border: 1px solid var(--ddr-line);
	border-radius: 4px; color: var(--ddr-ink); padding: 9px 10px; font-size: 14px; width: 100%;
}
.ddr-code-in { text-align: center; letter-spacing: .35em; text-transform: uppercase; font-size: 22px; color: var(--ddr-readout); }

.ddr-players { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 380px; }
.ddr-players li {
	display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 5px;
	background: rgba(30, 24, 19, .9); border: 1px solid var(--ddr-line); font-size: 14px;
}
.ddr-players li b { font-weight: 600; }
.ddr-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .4); }
.ddr-players li i { margin-left: auto; font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ddr-ochre); }

/* leaderboard */
.ddr-tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ddr-tab { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--ddr-line); border-radius: 4px; color: var(--ddr-dim); }
.ddr-tab.is-on { background: var(--ddr-hazard); color: #20160c; font-weight: 700; border-color: var(--ddr-hazard); }
.ddr-board-wrap { width: 100%; max-width: 560px; overflow-x: auto; max-height: 46%; overflow-y: auto; }
.ddr-board { width: 100%; border-collapse: collapse; font-family: "Share Tech Mono", monospace; font-variant-numeric: tabular-nums; }
.ddr-board td { padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 14px; text-align: left; }
.ddr-board td.ddr-rank { color: var(--ddr-ochre); width: 2.5em; }
.ddr-board td.ddr-time { text-align: right; color: var(--ddr-hazard); }
.ddr-board td.ddr-act { width: 1%; text-align: right; }
.ddr-ghost-btn { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--ddr-line); border-radius: 3px; padding: 4px 7px; color: var(--ddr-dim); font-family: "Barlow Condensed", sans-serif; }
.ddr-ghost-btn:hover { color: var(--ddr-readout); border-color: var(--ddr-readout); }

/* help + results */
.ddr-help { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; width: 100%; max-width: 620px; text-align: left; }
.ddr-help h4 { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ddr-ochre); margin-bottom: 4px; }
.ddr-help p { font-size: 13px; color: var(--ddr-ink); }

.ddr-rows { display: flex; flex-direction: column; gap: 4px; font-family: "Share Tech Mono", monospace; font-variant-numeric: tabular-nums; font-size: clamp(13px, 3.2vw, 17px); }
.ddr-rows div { display: flex; justify-content: space-between; gap: 24px; min-width: min(320px, 72vw); }
.ddr-rows b { color: var(--ddr-hazard); font-weight: 400; }
.ddr-result-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }

/* ----------------------------------------------------------------- pedals */

.ddr-pads { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ddr-pads[hidden] { display: none; }
.ddr-pad {
	-webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none;
	border: 1px solid #46372b; border-radius: 8px; padding: 16px 4px;
	background: linear-gradient(180deg, var(--ddr-cab-3), #1b1511);
	color: var(--ddr-ink); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 12px;
	box-shadow: 0 4px 0 #100c0a; transition: transform .06s, box-shadow .06s, background .06s;
}
.ddr-pad.is-hot { transform: translateY(3px); box-shadow: 0 1px 0 #100c0a; background: linear-gradient(180deg, #3e3126, #241c16); }
.ddr-pad-gas { color: #0e1a14; background: linear-gradient(180deg, #6be9b6, #2fb183); box-shadow: 0 4px 0 #16674c; }
.ddr-pad-gas.is-hot { background: linear-gradient(180deg, #4cd09b, #249b72); }
.ddr-pad-brk { color: #1a0c09; background: linear-gradient(180deg, #f08573, #ce3e2c); box-shadow: 0 4px 0 #7a2318; }
.ddr-pad-brk.is-hot { background: linear-gradient(180deg, #de6d5b, #b33223); }
.ddr-pad-hand { color: var(--ddr-hazard); }

/* ------------------------------------------------------------------ plate */

.ddr-plate {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
	border-top: 1px solid #33281f; padding-top: 10px;
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ddr-dim);
}
.ddr-plate-btns { display: flex; gap: 6px; }
.ddr-chip { border: 1px solid #46372b; border-radius: 4px; color: var(--ddr-dim); font: inherit; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; }
.ddr-chip[aria-pressed="true"] { color: var(--ddr-readout); border-color: #2c6b55; }

/* --------------------------------------------------------- static board SC */

.ddr-board-static { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ddr-board-static th, .ddr-board-static td { padding: 8px 10px; border-bottom: 1px solid rgba(128, 128, 128, .25); text-align: left; }
.ddr-board-static th { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }

/* --------------------------------------------------------------- full screen */

.ddr-cab:fullscreen { margin: 0; border-radius: 0; justify-content: center; padding: 20px; }
.ddr-cab:fullscreen .ddr-screen { max-height: 78vh; }

@media (hover: hover) and (pointer: fine) {
	.ddr-pads { display: none !important; }
}

/* Phones: a taller bezel so menus fit and the picture is letterboxed, not squashed. */
@media (max-width: 560px) {
	.ddr-cab { padding: 10px; gap: 10px; }
	.ddr-screen { aspect-ratio: 3 / 4; border-width: 7px; }
	.ddr-canvas { object-fit: contain; }
	.ddr-marquee { padding: 10px 12px; }
	.ddr-panel { padding: 12px 12px 16px; gap: 10px; justify-content: flex-start; }
	.ddr-panel-menu { justify-content: center; }
	.ddr-cards { grid-template-columns: 1fr; gap: 8px; }
	.ddr-card { padding: 10px 12px; gap: 3px; }
	.ddr-card-desc { font-size: 11.5px; }
	.ddr-mp-grid, .ddr-help { grid-template-columns: 1fr; }
	.ddr-tracklist { grid-template-columns: 1fr; }
	.ddr-board-wrap { max-height: 58%; }
	.ddr-pad { padding: 18px 2px; font-size: 11px; }
	.ddr-plate { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.ddr-cab *, .ddr-cab *::before { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}