/* ---- Ambient background overlays ---- */ body.game-page::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 50% -10%, rgba(168,85,247,0.18) 0%, transparent 55%), radial-gradient(ellipse at 100% 80%, rgba(6,182,212,0.10) 0%, transparent 55%), radial-gradient(ellipse at 0% 90%, rgba(236,72,153,0.10) 0%, transparent 55%); pointer-events: none; z-index: 0; } body.game-page::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 50vh; background-image: linear-gradient(rgba(168,85,247,0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(168,85,247,0.10) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 90%); -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 90%); transform: perspective(420px) rotateX(58deg); transform-origin: bottom center; animation: gridShift 14s linear infinite; pointer-events: none; z-index: 0; opacity: 0.55; } @keyframes gridShift { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 40px, 40px 0; } } body.game-page > * { position: relative; z-index: 1; } /* ----- Settings bar (difficulty) ----- */ .settings-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 0.4rem; max-width: 520px; } .setting-group { display: flex; align-items: center; gap: 0.3rem; background: rgba(168,85,247,0.10); border: 1px solid rgba(168,85,247,0.4); border-radius: 30px; padding: 0.25rem 0.4rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .setting-label { font-family: 'Orbitron', monospace; font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--t-text-muted); padding-left: 0.4rem; } .setting-btn { padding: 0.3rem 0.7rem; border: none; border-radius: 20px; font-family: inherit; font-size: 0.7rem; font-weight: 600; cursor: pointer; background: transparent; color: var(--t-text); transition: all 0.18s; } .setting-btn.active { background: linear-gradient(135deg, #06b6d4, #a855f7 55%, #ec4899); color: #fff; box-shadow: 0 2px 14px rgba(168,85,247,0.55), 0 0 18px rgba(236,72,153,0.35); } .setting-btn:hover:not(.active):not(:disabled) { background: rgba(168,85,247,0.18); } .setting-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ----- Score HUD ----- */ .stats-row { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 0.45rem; flex-wrap: wrap; max-width: 520px; margin-left: auto; margin-right: auto; } .stat { text-align: center; padding: 0.4rem 0.85rem; background: rgba(168,85,247,0.08); border: 1px solid rgba(168,85,247,0.3); border-radius: 12px; min-width: 64px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 18px rgba(168,85,247,0.12); } .stat-label { font-family: 'Orbitron', monospace; font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--t-text-muted); } .stat-value { font-family: 'Orbitron', monospace; font-size: 1rem; font-weight: 700; color: var(--t-text); margin-top: 0.15rem; text-shadow: 0 0 10px rgba(168,85,247,0.55), 0 0 22px rgba(168,85,247,0.35); } .score-value { text-shadow: 0 0 12px var(--t-primary), 0 0 22px rgba(168,85,247,0.6) !important; } /* ============================================================ Desktop-fill layout — board fills the viewport HEIGHT, leftover horizontal space goes to a side rail (score / difficulty / stats / recent games / how-to-play). Shared class names across all 18 HT games (.game-layout / .game-main / .game-rail / .rail-card / .overlay-settings), themed here to Tetris's neon purple palette. ============================================================ */ .game-layout { display: flex; gap: 22px; align-items: flex-start; justify-content: center; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 18px; } .game-main { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; } .game-rail { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; } .rail-card { background: rgba(168,85,247,0.07); border: 1px solid rgba(168,85,247,0.3); border-radius: 16px; padding: 14px 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 18px rgba(168,85,247,0.10); } .rail-card-title { font-family: 'Orbitron', monospace; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--t-text-muted); margin-bottom: 10px; text-shadow: 0 0 8px rgba(168,85,247,0.4); } /* The meta blocks fill the rail width when hosted inside a rail card. */ .game-rail .settings-bar, .game-rail .stats-row { margin: 0; max-width: none; width: 100%; } .game-rail .setting-group { flex: 1; justify-content: space-between; } .game-rail .stats-row { gap: 8px; } .game-rail .stat { flex: 1; min-width: 0; } .game-rail .score-item { flex: 1; } .game-rail .action-bar { margin: 0; } .game-rail .help-toggle, .game-rail .history-toggle { display: block; width: 100%; margin: 0; text-align: left; } .game-rail .help-panel, .game-rail .history-panel { max-width: none; margin: 10px 0 0; background: none; border: none; padding: 0; backdrop-filter: none; } /* In-overlay difficulty re-pick — MOBILE only (desktop uses the always-visible rail). Lets the end screen launch a new run at a different difficulty without hunting for the rail below the board. */ .overlay-settings { display: none; } @media (max-width: 899px) { .game-layout { flex-direction: column; align-items: center; gap: 14px; padding: 0 12px; } .game-rail { width: 100%; max-width: 520px; } .game-rail .settings-bar { justify-content: center; } .game-rail .setting-group { flex: 0 1 auto; } /* End/start overlays go full-screen on mobile (no rail beside the board to keep clickable), so surface difficulty re-pick inside. */ .overlay-settings { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px auto 14px; } } /* ----- Board cluster (HOLD | board | NEXT) ----- */ .tetris-wrap { display: flex; gap: 0.85rem; align-items: flex-start; justify-content: center; } .side-panel { display: flex; flex-direction: column; gap: 0.7rem; min-width: 96px; } .preview-box { background: rgba(168,85,247,0.07); border: 1px solid rgba(168,85,247,0.35); border-radius: 12px; padding: 0.5rem; text-align: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 22px rgba(168,85,247,0.15), 0 6px 18px rgba(0,0,0,0.3); } .preview-label { font-family: 'Orbitron', monospace; font-size: 0.55rem; color: var(--t-text-muted); margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.1em; text-shadow: 0 0 8px rgba(168,85,247,0.45); } .preview-box canvas { display: block; margin: 0 auto; } .preview-box.held canvas { opacity: 0.55; filter: grayscale(0.35); } /* ----- Canvas board ----- */ .game-container { position: relative; } canvas#canvas { border-radius: 12px; display: block; touch-action: none; background: linear-gradient(180deg, rgba(168,85,247,0.04) 0%, rgba(6,182,212,0.04) 100%), rgba(20,12,40,0.65); box-shadow: inset 0 0 24px rgba(168,85,247,0.18), 0 0 30px rgba(168,85,247,0.22), 0 10px 30px rgba(0,0,0,0.4); border: 1px solid rgba(168,85,247,0.35); } canvas#canvas.tetris-flash { animation: tetrisFlash 0.55s ease-out; } canvas#canvas.level-flash { animation: levelFlash 0.6s ease-out; } @keyframes tetrisFlash { 0% { box-shadow: inset 0 0 24px rgba(168,85,247,0.18), 0 0 30px rgba(168,85,247,0.22), 0 10px 30px rgba(0,0,0,0.4); } 30% { box-shadow: inset 0 0 60px rgba(255,255,255,0.7), 0 0 110px rgba(236,72,153,0.9), 0 0 60px rgba(168,85,247,0.9); } 100% { box-shadow: inset 0 0 24px rgba(168,85,247,0.18), 0 0 30px rgba(168,85,247,0.22), 0 10px 30px rgba(0,0,0,0.4); } } @keyframes levelFlash { 0% { box-shadow: inset 0 0 24px rgba(168,85,247,0.18), 0 0 30px rgba(168,85,247,0.22), 0 10px 30px rgba(0,0,0,0.4); } 40% { box-shadow: inset 0 0 60px rgba(6,182,212,0.7), 0 0 90px rgba(6,182,212,0.9), 0 0 50px rgba(168,85,247,0.7); } 100% { box-shadow: inset 0 0 24px rgba(168,85,247,0.18), 0 0 30px rgba(168,85,247,0.22), 0 10px 30px rgba(0,0,0,0.4); } } /* Pause overlay */ .pause-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; background: rgba(15,10,31,0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 12px; z-index: 10; gap: 0.7rem; } .pause-overlay.active { display: flex; } .pause-text { font-family: 'Orbitron', monospace; font-size: 2.4rem; font-weight: 800; color: #ec4899; text-shadow: 0 0 12px rgba(236,72,153,0.9), 0 0 28px rgba(236,72,153,0.6), 0 0 56px rgba(168,85,247,0.5); letter-spacing: 0.18em; animation: pausePulse 1.6s ease-in-out infinite; } .pause-sub { font-family: -apple-system, sans-serif; font-size: 0.78rem; color: rgba(240,234,255,0.75); letter-spacing: 0.08em; } @keyframes pausePulse { 0%, 100% { transform: scale(1); opacity: 0.95; } 50% { transform: scale(1.08); opacity: 1; } } /* Toast / floating combo text */ .combo-toast { position: absolute; left: 50%; transform: translateX(-50%); top: 18%; font-family: 'Orbitron', monospace; font-weight: 800; font-size: 1.4rem; letter-spacing: 0.12em; color: #fff; text-shadow: 0 0 12px rgba(236,72,153,0.9), 0 0 24px rgba(168,85,247,0.7), 0 2px 6px rgba(0,0,0,0.5); pointer-events: none; opacity: 0; transition: none; } .combo-toast.active { animation: comboPop 1.4s ease-out forwards; } @keyframes comboPop { 0% { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.7); } 20% { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1.15); } 70% { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.95); } } /* Screen shake on hard drop / tetris */ body.tetris-shake { animation: screenShake 0.45s; } body.hard-drop-shake { animation: hardDropShake 0.22s; } @keyframes screenShake { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-7px, -3px); } 25% { transform: translate(6px, 4px); } 40% { transform: translate(-4px, -6px); } 55% { transform: translate(7px, 2px); } 70% { transform: translate(-5px, 3px); } 85% { transform: translate(3px, -2px); } } @keyframes hardDropShake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(0, 3px); } 55% { transform: translate(0, -2px); } 80% { transform: translate(0, 1px); } } /* ----- Action bar ----- */ .action-bar { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 0.5rem; flex-wrap: wrap; } .action-btn { padding: 0.4rem 0.9rem; border: 1px solid rgba(168,85,247,0.4); border-radius: 30px; background: rgba(168,85,247,0.08); font-family: inherit; font-size: 0.75rem; font-weight: 500; color: var(--t-text); cursor: pointer; transition: all 0.2s; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .action-btn:hover { background: rgba(168,85,247,0.18); transform: translateY(-1px); } /* ----- Desktop vertical-fit: tighten the shared chrome ----- Reclaim top chrome so the 20-row board clears the fold; the meta panels now live in the side rail, so only the nav sits above the board cluster on desktop. */ @media (min-width: 760px) { .game-nav { padding: 0.45rem 0; margin-bottom: 0.3rem; } } /* ----- Mobile controls ----- */ .mobile-controls { display: none; gap: 8px; margin: 0.9rem auto 0; max-width: 380px; grid-template-areas: "rotZ rot hold" "left down right" "drop drop drop"; grid-template-columns: 1fr 1fr 1fr; } .mobile-controls button { min-width: 0; height: 54px; border: 1px solid rgba(168,85,247,0.4); border-radius: 12px; background: rgba(168,85,247,0.10); color: var(--t-text); font-family: 'Orbitron', monospace; font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 0.12s, transform 0.08s, box-shadow 0.12s; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-tap-highlight-color: transparent; } .mobile-controls button:active { background: rgba(168,85,247,0.35); transform: scale(0.95); box-shadow: inset 0 0 14px rgba(236,72,153,0.4), 0 0 18px rgba(168,85,247,0.5); } .mobile-controls .ctrl-svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .btn-rot { grid-area: rot; } .btn-rotZ { grid-area: rotZ; } .btn-hold { grid-area: hold; } .btn-left { grid-area: left; } .btn-right { grid-area: right; } .btn-down { grid-area: down; } .btn-drop { grid-area: drop; background: linear-gradient(135deg, rgba(6,182,212,0.25), rgba(168,85,247,0.25), rgba(236,72,153,0.25)); border-color: rgba(236,72,153,0.55); font-size: 0.85rem; letter-spacing: 0.12em; } /* Breakpoint matches the .game-layout rail stack (<=899px) and the JS isDesktop threshold (>=900px) so there is no tablet seam where the board + side panels stay in a row but the JS budgets for a wrapped layout. */ @media (max-width: 899px) { .mobile-controls { display: grid; } } @media (pointer: coarse) { .mobile-controls { display: grid; } } /* ----- Mobile board layout ----- On phones/tablets the HOLD/NEXT side panels can't flank the board without overflowing the viewport. Let .tetris-wrap wrap: the board takes its own full-width centered row, and HOLD + NEXT drop into a compact centered strip below it. Desktop layout is untouched. */ @media (max-width: 899px) { .tetris-wrap { flex-wrap: nowrap; gap: 6px; justify-content: center; align-items: flex-start; } .tetris-wrap > .game-container { flex: 0 0 auto; display: flex; justify-content: center; padding: 5px; } .side-panel { min-width: 0; width: 52px; flex: 0 0 52px; flex-direction: column; } .side-panel .preview-box { padding: 6px 2px; width: 52px; } .side-panel canvas { width: 46px !important; height: auto !important; } .side-left { order: 0; } .side-right { order: 0; } .mobile-controls { grid-template-areas: 'left down right rotZ rot hold' 'drop drop drop drop drop drop'; grid-template-columns: repeat(6,1fr); width: 100%; max-width: 400px; gap: 6px; margin: 10px auto; } .mobile-controls button { width: 100%; min-width: 0; height: 44px; font-size: 12px; padding: 5px; border-radius: 10px; } } /* ----- Help + history ----- */ .help-toggle, .history-toggle { display: inline-block; margin: 0.5rem 0.3rem 0; padding: 0.4rem 1.1rem; background: none; border: 1px solid rgba(168,85,247,0.4); color: var(--t-text); border-radius: 20px; font-family: 'Orbitron', monospace; font-size: 0.66rem; cursor: pointer; letter-spacing: 0.12em; text-transform: uppercase; } .help-toggle:hover, .history-toggle:hover { background: rgba(168,85,247,0.18); color: var(--t-primary); } .help-panel, .history-panel { display: none; max-width: 460px; margin: 0.8rem auto 0; padding: 1.1rem 1.2rem; background: rgba(168,85,247,0.07); border: 1px solid rgba(168,85,247,0.35); border-radius: 14px; color: var(--t-text); font-family: -apple-system, sans-serif; font-size: 0.86rem; line-height: 1.55; text-align: left; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .help-panel.active, .history-panel.active { display: block; } .help-panel h3 { margin: 0 0 6px; font-family: 'Orbitron', monospace; font-size: 0.85rem; color: var(--t-primary); letter-spacing: 0.1em; } .help-panel h3:not(:first-child) { margin-top: 14px; } .help-panel ul { margin: 0 0 10px; padding-left: 20px; } .help-panel li { margin: 3px 0; } .help-panel kbd { background: rgba(168,85,247,0.18); border: 1px solid rgba(168,85,247,0.35); border-radius: 5px; padding: 1px 6px; font-family: 'Orbitron', monospace; font-size: 0.72rem; } .history-title { font-family: 'Orbitron', monospace; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--t-primary); text-align: center; margin-bottom: 8px; } .history-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; background: rgba(168,85,247,0.10); border-radius: 8px; font-size: 0.78rem; margin-bottom: 4px; } .history-score { font-family: 'Orbitron', monospace; font-weight: 700; color: var(--t-primary); } .history-meta { color: var(--t-text-muted); font-size: 0.72rem; } .history-empty { text-align: center; color: rgba(240,234,255,0.45); font-size: 0.84rem; padding: 12px; } /* ----- Game over overlay ----- Desktop: confined to .game-main (position:absolute) so the side rail — including its difficulty selector — stays clickable behind it, letting the player start a new game at a DIFFERENT difficulty straight from the end screen. Mobile: full-screen fixed (no rail to preserve), with an in-overlay difficulty re-pick (.overlay-settings). */ .game-over-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(15,10,31,0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 100; padding: 20px; border-radius: 16px; overflow-y: auto; } .game-over-overlay.active { display: flex; } @media (max-width: 899px) { .game-over-overlay { position: fixed; border-radius: 0; } } .game-over-box { background: linear-gradient(165deg, rgba(31,20,66,0.95), rgba(15,10,31,0.95)); border: 1px solid rgba(168,85,247,0.5); border-radius: 22px; padding: 26px 30px 22px; min-width: 280px; max-width: 380px; text-align: center; box-shadow: 0 0 60px rgba(168,85,247,0.45), 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08); animation: gameOverIn 0.45s ease-out; } @keyframes gameOverIn { 0% { opacity: 0; transform: scale(0.7) translateY(30px); } 70% { opacity: 1; transform: scale(1.04) translateY(-3px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } .game-over-box h2 { font-family: 'Orbitron', monospace; font-size: 1.5rem; font-weight: 900; letter-spacing: 0.05em; margin: 0 0 4px; color: #ec4899; text-shadow: 0 0 10px rgba(236,72,153,0.7), 0 0 22px rgba(236,72,153,0.4); } .game-over-box.new-best h2 { color: #fcd663; text-shadow: 0 0 12px rgba(252,214,99,0.7), 0 0 24px rgba(252,214,99,0.4); } .game-over-sub { margin: 0 0 16px; color: rgba(240,234,255,0.78); font-family: -apple-system, sans-serif; font-size: 0.85rem; } .final-score { font-family: 'Orbitron', monospace; font-size: 2.6rem; font-weight: 800; color: var(--t-text); margin: 6px 0 4px; text-shadow: 0 0 12px rgba(168,85,247,0.7), 0 0 24px rgba(168,85,247,0.45); } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 18px; } .stat-cell { padding: 10px 6px; background: rgba(168,85,247,0.10); border: 1px solid rgba(168,85,247,0.3); border-radius: 10px; } .stat-cell-label { font-family: 'Orbitron', monospace; font-size: 0.55rem; letter-spacing: 0.14em; color: rgba(240,234,255,0.55); text-transform: uppercase; margin-bottom: 4px; } .stat-cell-value { font-family: 'Orbitron', monospace; font-size: 1.05rem; font-weight: 800; color: var(--t-primary); text-shadow: 0 0 8px rgba(6,182,212,0.5); } .game-over-btn-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .game-over-btn { padding: 11px 20px; border-radius: 99px; border: 0; cursor: pointer; font-family: 'Orbitron', monospace; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; transition: transform 0.15s, box-shadow 0.15s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .game-over-btn-primary { background: linear-gradient(135deg, #06b6d4, #a855f7 55%, #ec4899); color: #fff; box-shadow: 0 6px 22px rgba(168,85,247,0.45); } .game-over-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(168,85,247,0.6); } .game-over-btn-ghost { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); color: #fff; } .game-over-btn-ghost:hover { background: rgba(255,255,255,0.14); } /* Game over hidden until firs death */ .controls-hint { margin-top: 0.7rem; font-size: 0.76rem; color: var(--t-text); font-weight: 500; opacity: 0.85; text-align: center; } /* ===== Tetris — neon arcade on deep purple ===== */ body.game-page { --t-bg: #0f0a1f; --t-bg-grad: radial-gradient(ellipse at 50% -20%, #1f1442 0%, #0f0a1f 70%); --t-text: #f0eaff; --t-text-muted: #c4b5fd; --t-text-subtle: #a39bd0; --t-primary: #06b6d4; --t-primary-mid: #a855f7; --t-primary-dark: #ec4899; --t-glass-bg: rgba(6,182,212,0.07); --t-glass-border: rgba(168,85,247,0.4); --t-card-bg: rgba(168,85,247,0.06); --t-card-border: rgba(168,85,247,0.3); --t-btn-grad: linear-gradient(135deg, #06b6d4, #a855f7 55%, #ec4899); } /* Deliberate start: no falling piece while the player is reading the setup. */ .game-main > #overlayStart { display:none; position:absolute; inset:0; z-index:100; align-items:center; justify-content:center; text-align:center; } .game-main > #overlayStart.active { display:flex; } @media(max-width:899px) { .game-main > #overlayStart { position:fixed; } }