/* ============================================================ Music Tiles — DUO on an OUTDOOR LED panel, NATIVE 768 x 768 (1:1 square) Faithful DUPLICATE of the duo: loads the SAME styles.css + duo-event.css + duo-effects.js; this file ONLY rescales sizes/positions so the exact same look fits a 768x768 square. ============================================================ */ html, body { margin:0; } /* fill the area around the square with the scene colour, so when the viewport is bigger than 768 (e.g. browser zoom-out) the margins don't read as empty white */ html { min-height:100%; background:#05070d; } /* keep the 768x768 square CENTRED in the viewport (stays symmetric on zoom-out; on the native 768 LED this resolves to 0,0 — no change). NOTE: centre with inset:0 + margin:auto, NOT transform — a transform would make the body the containing block for the fixed effects canvas and shift all its drawing. */ body.duo-led { width:1280px; height:768px; min-height:768px; overflow:hidden; /* min-height:768 beats styles.css body{min-height:100vh}, which was stretching it */ position:absolute; inset:0; margin:auto; } /* ---- layout fits the 768x768 canvas ---- */ .duo-led .duo-layout { width:1280px !important; height:768px !important; min-height:768px !important; max-height:768px !important; padding:12px 0 10px !important; } /* force side-by-side (styles.css collapses to 1 column under 1100px) */ .duo-led .duo-grid { grid-template-columns:1fr 1fr !important; } .duo-led .duo-player { padding:0 8px !important; } /* ---- player name (centred + in-flow so it sits ABOVE the HUD) ---- */ .duo-led .duo-title-row { /* position:relative !important;*/ z-index:2; top:2px !important; width:100% !important; margin:0 0 10px !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; } .duo-led .duo-title-row h2 { font-size:26px !important; letter-spacing:2px !important; text-align:center !important; /* line-height:1 !important; */ min-width:0 !important; max-width:100% !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } /* ---- HUD = designer's neon SVG box, absolutely placed near the top of each half ---- */ .duo-led .compact-hud { position:absolute !important; top:25px !important; width:100% !important; margin:0 0 6px !important; display:grid !important; grid-template-columns:repeat(3,1fr) !important; padding:40px 6px !important; } .duo-led .compact-hud div { padding:4px 0 !important; } .duo-led .compact-hud span { font-size:9px !important; margin-bottom:1px !important; letter-spacing:1px !important; } .duo-led .compact-hud strong { font-size:20px !important; } /* HUD frame = designer's neon SVG box (purple left / red right); drop the old clip-path bg */ .duo-led .compact-hud::before, .duo-led .compact-hud::after { display:none !important; } .duo-led .player-one .compact-hud { background:url("art/purple_box.svg?v=2") center center / 660px 130px no-repeat !important; } .duo-led .player-two .compact-hud { background:url("art/red_box.svg?v=2") center center / 660px 130px no-repeat !important; } /* ---- board + lanes (raised, leaving a gap at the bottom for floor shadows) ---- */ .duo-led .compact-board { border-radius:8px !important; position:relative !important; } .duo-led .compact-board .lane-wrapper { inset:0px 10px 50px !important; gap:8px !important; /* bottom:90px -> longer lanes, still a gap under them */ transform:perspective(1100px) rotateX(20deg) !important; } .duo-led .lane { border-radius:5px !important; } /* (removed the .compact-board::after floor-glow — the designer's background already provides the floor light, the extra glow only muddied its colours) */ /* ---- tiles: keep the duo's WIDE capsule look (centre in the engine's 76px hit-slot) ---- */ .duo-led .tile:not(.hold-tile) { height:30px !important; margin-top:23px !important; } /* (76-30)/2 = 23 */ /* ---- target-pad (NOTE: height = the engine's hit window, so it also affects difficulty) ---- */ .duo-led .target-pad { bottom:16px !important; height:74px !important; } .duo-led .target-pad::after { height:3px !important; } /* ---- effects injected by duo-effects.js: sized for the 768 canvas ---- */ /* body.duo-led is position:absolute (centred), so absolute here = relative to the 768 square -> the VS/haze stay ON the centred stage even when the viewport is bigger */ .duo-led .duo-vs { display:none !important; } /* replaced by the designer's VS image (.led-vs) */ /* designer's VS graphic, placed exactly as in 01 TEMPLATE (measured: width 224, top 83) */ .duo-led .led-vs { display:none; position:absolute; left:50%; top:83px; transform:translateX(-50%); width:224px; z-index:25; pointer-events:none; } .duo-led .led-vs img { display:block; width:100%; height:auto; } .duo-led .duo-haze { display:none !important; } /* drifting ambient glow blobs — not needed over the designer's background */ .duo-led .duo-levelup { font-size:24px !important; } /* ---- shared overlays (READY / countdown / results / leaderboard / screensaver) ---- body.duo-led is position:absolute (centred), so absolute here makes the overlays fill the 768 SQUARE, not the whole viewport -> their content stays aligned with the lanes even when the viewport is bigger (browser zoom-out). */ .duo-led .ms-ov { position:absolute !important; } /* ---- READY / countdown overlay ---- */ .duo-led .countdown-overlay h2 { font-size:44px !important; } .duo-led .countdown-overlay p { display:none; } .duo-led .countdown-overlay { top:0 !important; backdrop-filter:none !important; background:rgba(4,6,12,.9) !important; } /* ============================================================ DARKENING — the duo's soft glows stack into a bright "wash" when 3 lanes fill each half; tone the ambient fills down so the lanes read as dark glass and the tiles / target / names pop, like the duo. ============================================================ */ body.duo-led { background: #05070d url("art/bg-main.jpg") center center / cover no-repeat !important; /* idle / prep backdrop — no VS */ } body.duo-led.playing { background: #05070d url("art/bg-vs.jpg") center center / cover no-repeat !important; /* during gameplay — VS in the centre */ } .duo-led .lane { background:rgba(255,255,255,.00) !important; } /*.duo-led .player-one .lane { box-shadow:inset 0 0 22px rgba(var(--p1-rgb),.83) !important; }*/ .duo-led .player-one .lane { box-shadow:0px 0 30px 2px rgba(var(--p1-rgb), 1), inset 0 0 25px 2px rgba(var(--p1-rgb), 1) !important; } /*.duo-led .player-two .lane { box-shadow:inset 0 0 22px rgba(var(--p2-rgb),.83) !important; }*/ .duo-led .player-two .lane { box-shadow:0px 0 30px 2px rgba(var(--p2-rgb), 1), inset 0 0 25px 2px rgba(var(--p2-rgb), 1) !important; } .duo-led .player-one .lane::before { background:linear-gradient(180deg, transparent 50%, rgba(var(--p1-rgb),.46)) !important; } .duo-led .player-two .lane::before { background:linear-gradient(180deg, transparent 50%, rgba(var(--p2-rgb),.46)) !important; }