:root {
    --bg-deep: #0a0a1a;
    --glass: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-hover: rgba(255, 255, 255, 0.1);
    --text-primary: #f0f0f5;
    --text-secondary: rgba(240, 240, 245, 0.55);
    --text-muted: rgba(240, 240, 245, 0.3);
    --accent: #7c5cfc;
    --accent-glow: rgba(124, 92, 252, 0.35);
    --tile-2: linear-gradient(135deg, #e8e4f0, #d4cfe6);
    --tile-4: linear-gradient(135deg, #e0d6c8, #d2c4ae);
    --tile-8: linear-gradient(135deg, #f4a261, #e07a3a);
    --tile-16: linear-gradient(135deg, #f4845f, #e0603e);
    --tile-32: linear-gradient(135deg, #f76c6c, #d94f4f);
    --tile-64: linear-gradient(135deg, #f94144, #d62828);
    --tile-128: linear-gradient(135deg, #ffd166, #f4b942);
    --tile-256: linear-gradient(135deg, #ffc233, #e8a717);
    --tile-512: linear-gradient(135deg, #ffb700, #d99a00);
    --tile-1024: linear-gradient(135deg, #a78bfa, #7c5cfc);
    --tile-2048: linear-gradient(135deg, #7c5cfc, #5b3ee8);
    --tile-super: linear-gradient(135deg, #ec4899, #a855f7 50%, #6366f1);
    --tile-text-dark: #3a3250;
    --tile-text-light: #ffffff;
    --board-size: min(92vw, 460px);
    --cell-gap: clamp(6px, 1.5vw, 12px);
    --cell-radius: clamp(8px, 2vw, 14px);
    --tile-radius: clamp(8px, 2vw, 14px);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-smooth: cubic-bezier(0.25, 1, 0.5, 1);
    --move-duration: 150ms;
    --appear-duration: 200ms;
    --merge-duration: 250ms;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-tap-highlight-color:transparent; scroll-behavior: smooth; }

body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg-deep);
    color: var(--text-primary);
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

/* ── Background Orbs ── */
.bg-orbs { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.orb { position:absolute; border-radius:50%; filter:blur(100px); opacity:0.45; animation:orbFloat 20s ease-in-out infinite; }
.orb-1 { width:420px; height:420px; background:radial-gradient(circle,#7c5cfc,transparent 70%); top:-10%; left:-10%; }
.orb-2 { width:350px; height:350px; background:radial-gradient(circle,#ec4899,transparent 70%); bottom:-5%; right:-8%; animation-delay:-5s; }
.orb-3 { width:280px; height:280px; background:radial-gradient(circle,#06b6d4,transparent 70%); top:50%; right:20%; animation-delay:-10s; }
.orb-4 { width:200px; height:200px; background:radial-gradient(circle,#f59e0b,transparent 70%); bottom:30%; left:15%; animation-delay:-15s; }
@keyframes orbFloat {
    0%,100%{transform:translate(0,0) scale(1)} 25%{transform:translate(60px,-40px) scale(1.1)}
    50%{transform:translate(-30px,50px) scale(0.9)} 75%{transform:translate(40px,20px) scale(1.05)}
}

/* ══════════════════════════════════════
   Page System
   ══════════════════════════════════════ */
.page {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.page.active { opacity:1; visibility:visible; }

/* ══════════════════════════════════════
   PAGE 1 — Intro / Landing
   ══════════════════════════════════════ */
.hero-section {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: 34px;
    align-items: center;
    min-height: calc(100vh - 150px);
    width: 100%;
}

.hero-copy h1 {
    margin-top: 16px;
    font-size: clamp(3rem, 7vw, 5.4rem);
    line-height: 0.95;
    background: linear-gradient(135deg, #7c5cfc 0%, #a78bfa 40%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-copy h2 {
    margin-top: 16px;
    font-size: clamp(1.2rem, 2.2vw, 1.8rem);
    color: var(--text-secondary);
    font-weight: 900;
}

.hero-text {
    max-width: 680px;
    margin-top: 18px;
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.hero-badge {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(124,92,252,0.15);
    border: 1px solid rgba(124,92,252,0.3);
    color: var(--accent);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.hero-primary, .play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border: 0;
    border-radius: 18px;
    font-weight: 900;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(135deg, #7c5cfc, #6341e8);
    box-shadow: 0 16px 34px rgba(124,92,252,0.3);
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition);
}

.hero-primary:hover, .play-btn:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 18px 44px rgba(124,92,252,0.4);
}

.hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border: 1px solid var(--glass-border);
    background: var(--glass);
    color: var(--text-primary);
    border-radius: 18px;
    font-weight: 900;
    font-size: 1.05rem;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition), transform var(--transition);
}

.hero-secondary:hover {
    background: rgba(255,255,255,0.05);
    transform: translateY(-2px);
}

.hero-note {
    margin-top: 16px;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.9rem;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.chip-row span, .preview-tags span {
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-weight: 800;
    font-size: 0.85rem;
}

.hero-preview {
    position: relative;
    width: 100%;
}

.preview-window {
    border-radius: 30px;
    overflow: hidden;
    background: rgba(10, 15, 32, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.preview-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 800;
}

.preview-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.preview-bar span:nth-child(1) { background: #ff5f56; }
.preview-bar span:nth-child(2) { background: #ffbd2e; }
.preview-bar span:nth-child(3) { background: #27c93f; }

.preview-content {
    padding: 24px;
}

.preview-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.preview-stat {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
}

.preview-stat label {
    display: block;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 800;
}

.preview-stat strong {
    display: block;
    margin-top: 4px;
    font-size: 1.7rem;
    color: var(--text-primary);
}

.preview-grid-2048 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 20px;
    background: rgba(255,255,255,0.05);
    padding: 8px;
    border-radius: 16px;
}

.preview-grid-2048 span {
    aspect-ratio: 1;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--tile-text-light);
}

.preview-grid-2048 span.empty { background: rgba(255, 255, 255, 0.05); }
.preview-grid-2048 span[data-value="2"], .preview-grid-2048 span[data-value="4"] { color: var(--tile-text-dark); }
.preview-grid-2048 span[data-value="2"] { background: var(--tile-2); }
.preview-grid-2048 span[data-value="4"] { background: var(--tile-4); }
.preview-grid-2048 span[data-value="8"] { background: var(--tile-8); }
.preview-grid-2048 span[data-value="16"] { background: var(--tile-16); }
.preview-grid-2048 span[data-value="32"] { background: var(--tile-32); }
.preview-grid-2048 span[data-value="64"] { background: var(--tile-64); }
.preview-grid-2048 span[data-value="128"] { background: var(--tile-128); font-size: 1rem; }
.preview-grid-2048 span[data-value="256"] { background: var(--tile-256); font-size: 1rem; }
.preview-grid-2048 span[data-value="512"] { background: var(--tile-512); font-size: 1rem; }
.preview-grid-2048 span[data-value="1024"] { background: var(--tile-1024); font-size: 0.9rem; }
.preview-grid-2048 span[data-value="2048"] { background: var(--tile-2048); font-size: 0.9rem; }

.preview-tags {
    margin-top: 18px;
    display: flex;
    gap: 10px;
}

/* Launch panel */
.launch-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
    gap: 30px;
    align-items: center;
    margin: 30px 0;
}

.launch-card {
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.launch-label {
    display: block;
    margin-bottom: 10px;
    font-weight: 800;
    color: var(--text-secondary);
}

.play-input {
    width: 100%;
    min-height: 56px;
    padding: 0 18px;
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1.05rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.play-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(124, 92, 252, 0.16);
}

.play-btn {
    width: 100%;
    margin-top: 14px;
    padding: 16px;
}

.launch-help {
    margin-top: 14px;
    color: var(--text-muted);
    font-size: 0.94rem;
    text-align: center;
}

/* Step Grid */
.step-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.step-card {
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.step-number {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 0.84rem;
    font-weight: 900;
    color: var(--accent);
}

.step-card h3 {
    font-size: 1.4rem;
    color: var(--text-primary);
}

.step-card p {
    margin-top: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ══════════════════════════════════════
   PAGE 2 — Game
   ══════════════════════════════════════ */
.game-container {
    position:relative; z-index:1; width:100%; max-width:500px;
    padding:20px; display:flex; flex-direction:column; align-items:center; gap:16px;
}

.game-header { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.header-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }

.player-greeting {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* .logo h1 {
    font-size: clamp(2.2rem, 8vw, 3rem);
    font-weight: 900; letter-spacing: -1px;
    background: linear-gradient(135deg, #7c5cfc 0%, #a78bfa 40%, #ec4899 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    line-height: 1;
} */
.tagline { font-size:0.75rem; font-weight:400; color:var(--text-secondary); letter-spacing:2px; text-transform:uppercase; margin-top:2px; }

.scores-row { display:flex; gap:8px; }
.score-card {
    position:relative; background:var(--glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--glass-border); border-radius:14px; padding:8px 18px; text-align:center; min-width:80px; overflow:hidden;
}
.score-card::before { content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent); }
.score-card.best { border-color:rgba(124,92,252,0.2); }
.score-label { display:block; font-size:0.65rem; font-weight:500; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-secondary); margin-bottom:2px; }
.score-value { display:block; font-size:1.3rem; font-weight:700; color:var(--text-primary); transition:transform 0.15s var(--ease-out-back); }
.score-value.bump { transform:scale(1.15); }
.score-add { position:absolute; top:50%; right:8px; font-size:0.75rem; font-weight:700; color:var(--accent); opacity:0; pointer-events:none; }
.score-add.show { animation:scoreFloat 0.8s var(--ease-out-smooth) forwards; }
@keyframes scoreFloat { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-24px)} }

/* Controls */
.controls-row { width:100%; display:flex; gap:8px; max-width:var(--board-size); }
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:10px 18px; border:1px solid var(--glass-border); border-radius:12px;
    background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    color:var(--text-primary); font-family:'Outfit',sans-serif; font-size:0.85rem; font-weight:500;
    cursor:pointer; transition:all 0.2s ease; flex:1; position:relative; overflow:hidden;
}
.btn::before { content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent); }
.btn:hover { background:var(--glass-hover); border-color:rgba(255,255,255,0.18); transform:translateY(-1px); }
.btn:active { transform:translateY(0) scale(0.98); }
.btn:disabled { opacity:0.3; cursor:not-allowed; transform:none; }
.btn:disabled:hover { background:var(--glass); border-color:var(--glass-border); transform:none; }
.btn-new { border-color:rgba(124,92,252,0.25); }
.btn-new:hover { border-color:rgba(124,92,252,0.45); box-shadow:0 0 20px rgba(124,92,252,0.15); }

/* Board */
.board-wrapper { width:var(--board-size); aspect-ratio:1; position:relative; }
.board {
    width:100%; height:100%; position:relative; background:var(--glass);
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    border:1px solid var(--glass-border); border-radius:calc(var(--cell-radius) + var(--cell-gap));
    padding:var(--cell-gap); box-shadow:0 4px 30px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.05);
}
.grid-bg { position:absolute; inset:var(--cell-gap); display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:var(--cell-gap); }
.grid-cell { background:rgba(255,255,255,0.03); border-radius:var(--cell-radius); border:1px solid rgba(255,255,255,0.03); }
.tile-layer { position:absolute; inset:var(--cell-gap); pointer-events:none; }

/* Tiles */
.tile {
    position:absolute; display:flex; align-items:center; justify-content:center;
    border-radius:var(--tile-radius); font-weight:800;
    transition:top var(--move-duration) var(--ease-out-smooth),left var(--move-duration) var(--ease-out-smooth);
    z-index:1; box-shadow:0 2px 8px rgba(0,0,0,0.15); will-change:transform,top,left;
}
.tile.new { animation:tileAppear var(--appear-duration) var(--ease-out-back) forwards; }
.tile.merged { animation:tileMerge var(--merge-duration) var(--ease-out-back); z-index:2; }
@keyframes tileAppear { 0%{transform:scale(0);opacity:0} 100%{transform:scale(1);opacity:1} }
@keyframes tileMerge { 0%{transform:scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)} }

.tile[data-value="2"] { background:var(--tile-2); color:var(--tile-text-dark); font-size:clamp(1.5rem,6vw,2.2rem); }
.tile[data-value="4"] { background:var(--tile-4); color:var(--tile-text-dark); font-size:clamp(1.5rem,6vw,2.2rem); }
.tile[data-value="8"] { background:var(--tile-8); color:var(--tile-text-light); font-size:clamp(1.5rem,6vw,2.2rem); box-shadow:0 2px 12px rgba(244,162,97,0.3); }
.tile[data-value="16"] { background:var(--tile-16); color:var(--tile-text-light); font-size:clamp(1.4rem,5.5vw,2rem); box-shadow:0 2px 12px rgba(244,132,95,0.3); }
.tile[data-value="32"] { background:var(--tile-32); color:var(--tile-text-light); font-size:clamp(1.4rem,5.5vw,2rem); box-shadow:0 2px 14px rgba(247,108,108,0.35); }
.tile[data-value="64"] { background:var(--tile-64); color:var(--tile-text-light); font-size:clamp(1.4rem,5.5vw,2rem); box-shadow:0 2px 16px rgba(249,65,68,0.35); }
.tile[data-value="128"] { background:var(--tile-128); color:var(--tile-text-light); font-size:clamp(1.2rem,4.5vw,1.7rem); box-shadow:0 2px 20px rgba(255,209,102,0.35); }
.tile[data-value="256"] { background:var(--tile-256); color:var(--tile-text-light); font-size:clamp(1.2rem,4.5vw,1.7rem); box-shadow:0 2px 20px rgba(255,194,51,0.35); }
.tile[data-value="512"] { background:var(--tile-512); color:var(--tile-text-light); font-size:clamp(1.2rem,4.5vw,1.7rem); box-shadow:0 2px 24px rgba(255,183,0,0.4); }
.tile[data-value="1024"] { background:var(--tile-1024); color:var(--tile-text-light); font-size:clamp(1rem,4vw,1.4rem); box-shadow:0 2px 24px rgba(124,92,252,0.4); }
.tile[data-value="2048"] { background:var(--tile-2048); color:var(--tile-text-light); font-size:clamp(1rem,4vw,1.4rem); box-shadow:0 4px 30px rgba(124,92,252,0.5); animation:tilePulse 2s ease-in-out infinite; }
@keyframes tilePulse { 0%,100%{box-shadow:0 4px 30px rgba(124,92,252,0.5)} 50%{box-shadow:0 4px 40px rgba(124,92,252,0.7)} }
.tile.super { background:var(--tile-super); color:var(--tile-text-light); font-size:clamp(0.85rem,3.5vw,1.2rem); box-shadow:0 4px 30px rgba(168,85,247,0.5); animation:tilePulse 2s ease-in-out infinite; }

.hint { font-size:0.75rem; color:var(--text-muted); letter-spacing:0.5px; text-align:center; }

/* Overlays */
.overlay {
    position:absolute; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
    background:rgba(10,10,26,0.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    opacity:0; visibility:hidden; transition:opacity 0.4s ease,visibility 0.4s ease;
}
.overlay.active { opacity:1; visibility:visible; }
.overlay-card {
    background:var(--glass); backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px);
    border:1px solid var(--glass-border); border-radius:24px; padding:40px; text-align:center;
    max-width:340px; width:85%; box-shadow:0 8px 40px rgba(0,0,0,0.4);
    transform:scale(0.9) translateY(20px); transition:transform 0.4s var(--ease-out-back);
    position:relative; overflow:hidden;
}
.overlay-card::before { content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent); }
.overlay.active .overlay-card { transform:scale(1) translateY(0); }
.overlay-card h2 {
    font-size:2rem; font-weight:800; margin-bottom:8px;
    background:linear-gradient(135deg,var(--text-primary),var(--text-secondary));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.win-card h2 { background:linear-gradient(135deg,#7c5cfc,#a78bfa,#ec4899); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.win-icon { font-size:3rem; margin-bottom:8px; animation:winBounce 1s var(--ease-out-back); }
@keyframes winBounce { 0%{transform:scale(0) rotate(-20deg)} 60%{transform:scale(1.2) rotate(5deg)} 100%{transform:scale(1) rotate(0deg)} }

.overlay-player { font-size:0.8rem; color:var(--accent); margin-bottom:8px; font-weight:500; }
.overlay-score { font-size:1.1rem; color:var(--text-secondary); margin-bottom:8px; }
.overlay-score strong { color:var(--text-primary); font-weight:700; }
.overlay-best { font-size:0.85rem; color:var(--accent); margin-bottom:16px; min-height:20px; }

.overlay-actions, .win-actions { display:flex; gap:8px; margin-top:16px; }

.btn-restart, .btn-continue, .btn-menu {
    padding:14px 20px; border-radius:14px; font-size:0.9rem; font-weight:600;
    border:none; cursor:pointer; font-family:'Outfit',sans-serif; transition:all 0.2s ease; flex:1;
}
.btn-restart {
    background:linear-gradient(135deg,#7c5cfc,#6341e8); color:white;
    box-shadow:0 4px 20px rgba(124,92,252,0.3);
}
.btn-menu {
    background:var(--glass); color:var(--text-primary);
    border:1px solid var(--glass-border);
}
.win-actions .btn-restart { background:var(--glass); color:var(--text-primary); border:1px solid var(--glass-border); box-shadow:none; }
.btn-continue { background:linear-gradient(135deg,#7c5cfc,#6341e8); color:white; box-shadow:0 4px 20px rgba(124,92,252,0.3); }
.btn-restart:hover,.btn-continue:hover,.btn-menu:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(124,92,252,0.45); }
.btn-restart:active,.btn-continue:active,.btn-menu:active { transform:translateY(0) scale(0.97); }

/* Responsive */
@media (max-width:480px) {
    .game-container { padding:12px; gap:12px; }
    .score-card { padding:6px 12px; min-width:68px; border-radius:10px; }
    .score-value { font-size:1.1rem; }
    .btn { padding:10px 12px; font-size:0.8rem; border-radius:10px; }
    .btn span { display:none; }
    .btn svg { width:22px; height:22px; }
    .overlay-card { padding:30px 24px; }
    .intro-container { padding:30px 16px 50px; }
    .rules-grid { grid-template-columns:1fr; }
}
@media (max-height:680px) {
    .game-container { gap:8px; padding:8px; }
    .hint { display:none; }
}

/* ══════════════════════════════════════
   SEO Layout (adapted from Minesweeper)
   ══════════════════════════════════════ */
.landing-shell {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.seo-container {
    width: 100%;
    max-width: 900px;
    padding: 0 20px 60px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    color: var(--text-secondary);
}

.seo-container h2, .seo-container h3 {
    color: var(--text-primary);
    font-weight: 800;
}

.seo-container p {
    line-height: 1.7;
    margin-top: 12px;
}

.panel {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    padding: 28px;
}

.content-stack {
    display: grid;
    gap: 18px;
}

.content-card h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.feature-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.feature-list {
    list-style: none;
    margin-top: 18px;
}

.feature-list li, .seo-container .tip-item {
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.feature-list li:first-child, .seo-container .tip-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.seo-container .tip-item strong {
    font-size: 1.08rem;
    color: var(--text-primary);
    display: block;
    margin-bottom: 6px;
}

.seo-container .section-heading {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.seo-container .section-heading.left {
    text-align: left;
    align-items: flex-start;
}

.seo-container .section-heading h2 {
    margin-top: 12px;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: rgba(124, 92, 252, 0.12);
    border: 1px solid rgba(124, 92, 252, 0.2);
    color: var(--accent);
}

.faq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.faq-item {
    padding: 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.faq-item h3 {
    font-size: 1.26rem;
}

.category-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
}

.category-links a {
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.category-links a:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.12);
}

.site-footer {
    padding: 20px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.text-center {
    text-align: center;
}

.cta-btn {
    margin: 20px auto 0;
}

@media (max-width: 900px) {
    .hero-section, .launch-panel, .step-grid, .feature-layout, .faq-list {
        grid-template-columns: 1fr;
    }
    .hero-copy h1 { font-size: clamp(2.5rem, 8vw, 4rem); }
}