:root { --bg: #0b0e1a; --bg-soft: #11152a; --surface: #171c36; --surface-2: #1e2444; --border: #2a3158; --text: #eef1ff; --text-dim: #9aa3c7; --primary: #7c5cff; --primary-2: #5a3df5; --accent: #00e5a8; --accent-2: #00c2ff; --danger: #ff5470; --warning: #ffb547; --gold: #ffd166; --radius: 14px; --shadow: 0 10px 40px #00000073; --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --input-font-size: 17px; }
* { box-sizing: border-box; margin: 0px; padding: 0px; }
html, body { height: 100%; }
body { font-family: var(--font); background: radial-gradient(1200px 600px at 80% -10%, #7c5cff2e, transparent 60%), radial-gradient(900px 500px at -10% 30%, #00e5a81a, transparent 55%), var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; min-height: 100vh; }
#root { flex-direction: column; min-height: 100vh; display: flex; }
a { color: var(--accent-2); text-decoration: none; }
button { font-family: inherit; }
.btn { cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 12px; justify-content: center; align-items: center; gap: 8px; padding: 13px 26px; font-size: 1rem; font-weight: 700; transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s; display: inline-flex; }
.btn:not(:disabled):hover { transform: translateY(-2px); }
.btn:not(:disabled):active { transform: translateY(0px); }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: rgb(255, 255, 255); box-shadow: rgba(124, 92, 255, 0.4) 0px 8px 24px; }
.btn-accent { color: rgb(4, 40, 24); background: linear-gradient(135deg, rgb(0, 255, 136), rgb(0, 224, 85)); box-shadow: rgba(0, 255, 120, 0.45) 0px 8px 24px; }
.btn-ghost { color: var(--text); border: 1px solid var(--border); background: 0px 0px; }
.btn-sm { padding: 9px 16px; font-size: 0.85rem; }
.btn-lg { padding: 16px 36px; font-size: 1.1rem; }
.btn-block { width: 100%; }
.app-header { z-index: 50; backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); background: rgba(11, 14, 26, 0.85); justify-content: space-between; align-items: center; padding: 14px 24px; display: flex; position: sticky; top: 0px; }
.logo { color: var(--text); align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 800; display: flex; }
.header-actions { align-items: center; gap: 12px; display: flex; }
.landing main { flex: 1 1 0%; }
.landing .app-header { z-index: 50; backdrop-filter: none; padding: calc(12px + env(safe-area-inset-top,0px)) 16px 12px; background: linear-gradient(rgba(8, 12, 24, 0.85) 0%, rgba(0, 0, 0, 0) 100%); border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; position: absolute; top: 0px; left: 0px; right: 0px; }
.landing .app-header .btn { padding: 8px 14px; font-size: 0.78rem; }
.landing .app-logo { width: auto; height: 44px; }
.lp-hero { padding: calc(72px + env(safe-area-inset-top,0px)) 16px 32px; position: relative; overflow: hidden; }
.lp-hero-bg { background: linear-gradient(180deg, #080c188c 0%, #080c18eb 72%, var(--bg) 100%), url(../toyblocks-hd/home-mobile.webp) center top / cover no-repeat; pointer-events: none; position: absolute; inset: 0px; }
.lp-hero-inner { z-index: 1; text-align: center; max-width: 480px; margin: 0px auto; position: relative; }
.lp-live-pill { color: var(--accent); background: rgba(0, 229, 168, 0.12); border: 1px solid rgba(0, 229, 168, 0.35); border-radius: 999px; align-items: center; gap: 8px; margin-bottom: 22px; padding: 8px 16px; font-size: 0.82rem; font-weight: 600; display: inline-flex; }
.lp-live-pill strong { color: rgb(255, 255, 255); font-weight: 800; }
.lp-title { text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 14px; font-size: clamp(2rem, 9vw, 3.2rem); font-weight: 900; line-height: 1.05; }
.lp-title-accent {
    background: linear-gradient(90deg, var(--gold), #ffe566, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lp-hero-banner { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; max-width: 320px; margin: 0px auto 24px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.45) 0px 16px 40px; }
.lp-hero-banner img { width: 100%; display: block; }
.lp-ctas { flex-direction: column; gap: 12px; margin-bottom: 22px; display: flex; }
.lp-btn-primary { letter-spacing: 0.04em; text-transform: uppercase; box-shadow: rgba(0, 255, 120, 0.45) 0px 8px 28px; border-radius: 999px !important; padding: 16px 24px !important; font-size: 1rem !important; font-weight: 800 !important; }
.lp-btn-link { color: var(--text-dim); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 8px; font-size: 0.9rem; font-weight: 600; }
.lp-btn-link:hover { color: var(--text); }
.lp-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 480px; margin: 0px auto; padding: 8px 16px 36px; display: grid; }
.lp-stat { text-align: center; background: rgba(23, 28, 54, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 16px 8px; }
.lp-stat-value { color: var(--accent); font-size: clamp(1rem, 4.2vw, 1.35rem); font-weight: 900; line-height: 1.1; }
.lp-stat-label { letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-top: 6px; font-size: 0.62rem; font-weight: 700; line-height: 1.25; }
.lp-section { max-width: 480px; margin: 0px auto; padding: 40px 16px; }
.lp-section-title { text-align: center; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1.55rem; font-weight: 900; }
.lp-section-sub { text-align: center; color: var(--text-dim); margin-top: 8px; margin-bottom: 28px; font-size: 0.9rem; line-height: 1.45; }
.lp-howto { background: rgba(0, 0, 0, 0.22); border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 44px 0px 48px; }
.lp-howto-head { text-align: center; margin-bottom: 28px; padding: 0px 16px; }
.lp-howto-icon { width: 36px; height: 36px; color: var(--accent); justify-content: center; align-items: center; margin-bottom: 10px; display: inline-flex; }
.lp-howto-icon svg { width: 28px; height: 28px; }
.lp-howto-title { text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.55rem; font-weight: 900; }
.lp-howto-sub { color: var(--text-dim); margin-top: 8px; font-size: 0.9rem; line-height: 1.45; }
.lp-howto-scroll { scroll-snap-type: x mandatory; scrollbar-width: none; gap: 14px; padding: 4px 16px 12px; scroll-padding-inline: 16px; display: flex; overflow-x: auto; }
.lp-howto-scroll::-webkit-scrollbar { display: none; }
.lp-howto-card { scroll-snap-align: center; background: rgba(14, 18, 34, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; flex: 0 0 min(72vw, 260px); overflow: hidden; box-shadow: rgba(0, 0, 0, 0.35) 0px 12px 32px; }
.lp-howto-visual { aspect-ratio: 3 / 1; background: rgb(10, 14, 26); position: relative; overflow: hidden; }
.lp-howto-visual img { object-fit: contain; object-position: center center; width: 100%; height: 100%; display: block; }
.lp-howto-visual--board { aspect-ratio: 3 / 1; background: radial-gradient(circle at 50% 30%, rgba(124, 92, 255, 0.18), rgba(0, 0, 0, 0) 55%), rgb(10, 14, 26); justify-content: center; align-items: center; padding: 8px; display: flex; }
.lp-howto-visual--board .hero-board { aspect-ratio: 1 / 1; border-radius: 8px; gap: 2px; width: auto; max-height: 100%; padding: 6px; }
.lp-howto-badge { color: rgb(4, 21, 16); background: var(--accent); border-radius: 50%; place-items: center; width: 34px; height: 34px; font-size: 1rem; font-weight: 900; display: grid; position: absolute; top: 10px; right: 10px; box-shadow: rgba(0, 229, 168, 0.45) 0px 4px 14px; }
.lp-howto-card h3 { padding: 14px 14px 6px; font-size: 0.95rem; font-weight: 800; line-height: 1.25; }
.lp-howto-card p { color: var(--text-dim); padding: 0px 14px 16px; font-size: 0.82rem; line-height: 1.5; }
.lp-section-reviews { padding-top: 16px; }
.lp-reviews { flex-direction: column; gap: 14px; display: flex; }
.lp-review { background: rgba(23, 28, 54, 0.7); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 20px; }
.lp-review-stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 12px; font-size: 0.9rem; }
.lp-review-text { color: var(--text); margin-bottom: 16px; font-size: 0.92rem; line-height: 1.55; }
.lp-review-author { align-items: center; gap: 12px; display: flex; }
.lp-review-name { font-size: 0.9rem; font-weight: 800; }
.lp-review-badge { color: var(--accent); margin-top: 2px; font-size: 0.75rem; }
.lp-final { text-align: center; max-width: 480px; margin: 0px auto; padding: 36px 16px 48px; }
.lp-final h2 { margin-bottom: 10px; font-size: 1.5rem; font-weight: 900; }
.lp-final p { color: var(--text-dim); margin-bottom: 22px; font-size: 0.92rem; line-height: 1.5; }
.lp-footer { padding: 28px 16px calc(24px + env(safe-area-inset-bottom,0px)); text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.lp-footer-logo { opacity: 0.9; width: auto; height: 56px; margin-bottom: 14px; }
.lp-footer-copy { color: var(--text-dim); font-size: 0.82rem; }
.lp-footer-note { color: rgba(154, 163, 199, 0.7); margin-top: 8px; font-size: 0.75rem; line-height: 1.4; }
.live-dot { background: var(--accent); border-radius: 50%; width: 8px; height: 8px; animation: 1.6s ease 0s infinite normal none running pulse-dot; }
@keyframes pulse-dot { 
  0%, 100% { box-shadow: rgba(0, 229, 168, 0.5) 0px 0px; }
  50% { box-shadow: rgba(0, 229, 168, 0) 0px 0px 0px 7px; }
}
.hero-board { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); aspect-ratio: 1 / 1; border-radius: 18px; grid-template-columns: repeat(8, 1fr); gap: 5px; width: 100%; max-width: 420px; margin: 0px auto; padding: 16px; display: grid; }
.hero-cell { background: var(--bg-soft); --bv: 4px; border-radius: 5px; transition: background 0.5s, box-shadow 0.5s; }
.winner-avatar { background: linear-gradient(135deg, var(--primary), var(--accent-2)); color: rgb(255, 255, 255); border-radius: 50%; flex-shrink: 0; place-items: center; width: 36px; height: 36px; font-weight: 800; display: grid; }
.app-logo { object-fit: contain; object-position: left center; max-width: 160px; height: 40px; }
.cell.filled, .piece-cell.fill, .hero-cell.on { background: var(--bc); border-style: solid; border-width: var(--bv,5px); border-top-color: color-mix(in srgb, var(--bc), #fff 55%); border-left-color: color-mix(in srgb, var(--bc), #fff 24%); border-right-color: color-mix(in srgb, var(--bc), #000 30%); border-bottom-color: color-mix(in srgb, var(--bc), #000 48%); box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset; }
.c1 { --bc: #f2455c; }
.c2 { --bc: #ffa726; }
.c3 { --bc: #2ecc71; }
.c4 { --bc: #3b82f6; }
.c5 { --bc: #9b59d0; }
.c6 { --bc: #f7d54a; }
@media (width >= 768px) {
.lp-hero { padding: calc(88px + env(safe-area-inset-top,0px)) 24px 48px; }
.lp-hero-inner, .lp-stats, .lp-section, .lp-final { max-width: 720px; }
.lp-title { font-size: 3.4rem; }
.lp-stat-value { font-size: 1.5rem; }
.lp-stat-label { font-size: 0.72rem; }
.lp-reviews { grid-template-columns: repeat(3, 1fr); display: grid; }
.lp-howto-scroll { grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1100px; margin: 0px auto; padding: 4px 24px 12px; display: grid; overflow: visible; }
.lp-howto-card { flex: unset; max-width: none; }
}
@media (width <= 900px) {
.landing .header-actions .btn:first-of-type { padding: 8px 12px; }
.landing .header-actions .btn:last-of-type { padding: 8px 16px; }
}

.cell.filled.c1, .cell.filled.c2, .cell.filled.c3, .cell.filled.c4, .cell.filled.c5, .cell.filled.c6, .cell.filled.c7, .piece-cell.fill.c1, .piece-cell.fill.c2, .piece-cell.fill.c3, .piece-cell.fill.c4, .piece-cell.fill.c5, .piece-cell.fill.c6, .piece-cell.fill.c7, .hero-cell.on.c1, .hero-cell.on.c2, .hero-cell.on.c3, .hero-cell.on.c4, .hero-cell.on.c5, .hero-cell.on.c6, .hero-cell.on.c7 { background-color: transparent; background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; box-shadow: none; }
.cell.filled.c1, .piece-cell.fill.c1, .hero-cell.on.c1 { background-image: url("../toyblocks-hd/piece-1.webp"); }
.cell.filled.c2, .piece-cell.fill.c2, .hero-cell.on.c2 { background-image: url("../toyblocks-hd/piece-2.webp"); }
.cell.filled.c3, .piece-cell.fill.c3, .hero-cell.on.c3 { background-image: url("../toyblocks-hd/piece-3.webp"); }
.cell.filled.c4, .piece-cell.fill.c4, .hero-cell.on.c4 { background-image: url("../toyblocks-hd/piece-4.webp"); }
.cell.filled.c5, .piece-cell.fill.c5, .hero-cell.on.c5 { background-image: url("../toyblocks-hd/piece-5.webp"); }
.cell.filled.c6, .piece-cell.fill.c6, .hero-cell.on.c6 { background-image: url("../toyblocks-hd/piece-6.webp"); }

html:not(.game-active), html:not(.game-active) body { background-color: rgb(61, 142, 240) !important; background-image: url("../toyblocks-hd/home-mobile.webp") !important; background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; background-attachment: fixed !important; }
.auth-shell::before, .panel-shell::before, .lp-hero-bg { background: url("../toyblocks-hd/home-mobile.webp") center center / cover no-repeat !important; }
@media (min-aspect-ratio: 5 / 8) and (max-aspect-ratio: 1 / 1) {
html:not(.game-active), html:not(.game-active) body { background-image: url("../toyblocks-hd/home-tablet.webp") !important; }
.auth-shell::before, .panel-shell::before, .lp-hero-bg { background: url("../toyblocks-hd/home-tablet.webp") center center / cover no-repeat !important; }
}
@media (min-width: 1024px), (min-aspect-ratio: 1 / 1) {
html:not(.game-active), html:not(.game-active) body { background-image: url("../toyblocks-hd/home-desktop.webp") !important; }
.auth-shell::before, .panel-shell::before, .lp-hero-bg { background: url("../toyblocks-hd/home-desktop.webp") center center / cover no-repeat !important; }
}
.lp-stats { display: none !important; }

:root { --tb-pink: #ff4eb8; --tb-pink-2: #e63aa8; --tb-pink-hot: #ff7ad9; --tb-pink-deep: #c42aff; }
.btn-accent, .panel-cta, .sheet-cta, .lp-btn-primary, .ref-copy-btn, .tutorial-win-cta.btn, .tutorial-intro-actions .btn-accent { color: rgb(255, 255, 255) !important; background: linear-gradient(135deg, rgb(255, 122, 217) 0%, rgb(255, 78, 184) 42%, rgb(200, 75, 255) 100%) !important; box-shadow: rgba(255, 78, 184, 0.45) 0px 10px 28px !important; }
.lp-btn-primary { box-shadow: rgba(255, 78, 184, 0.45) 0px 8px 28px !important; }
.btn-primary { background: linear-gradient(135deg, rgb(225, 77, 255), rgb(155, 77, 255)) !important; box-shadow: rgba(200, 75, 255, 0.4) 0px 8px 24px !important; }
.panel-banner img, .sheet-hero img, .bb-profile-hero img, .tutorial-intro-banner img, .win-banner img, .chance-banner img, .replay-picker-banner img, .lp-howto-visual img { object-position: center center; display: block; width: 100% !important; height: 100% !important; max-height: none !important; min-height: 0px !important; object-fit: contain !important; }
.lp-howto-visual, .lp-howto-visual--board { aspect-ratio: 3 / 1; }
.lp-howto-visual--board { align-items: center; justify-content: center; display: flex !important; padding: 8px !important; }
.lp-howto-visual--board .hero-board { width: 72px !important; height: 72px !important; max-width: 72px !important; max-height: 72px !important; aspect-ratio: 1 / 1 !important; margin: 0px !important; padding: 5px !important; gap: 2px !important; border-radius: 10px !important; background-color: transparent !important; background-image: url("../toyblocks-hd/board.webp") !important; background-position: center center !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; box-shadow: none !important; }
.lp-howto-visual--board .hero-cell { min-width: 0px; min-height: 0px; background: transparent; border-radius: 18% !important; }
.lp-howto-visual--board .hero-cell.on { border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; box-shadow: none !important; }
:root { --bg: #140824; --bg-soft: #1e0c38; --surface: #261048; --surface-2: #32185c; --border: rgba(255, 122, 217, 0.22); --text-dim: #d4b8e8; }

/* Keyboard access and motion preferences do not change the resting design. */
.lp-hero-banner img { height: auto; }
.landing button:focus-visible, .landing a:focus-visible {
    outline: 3px solid #00e5a8;
    outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
    .live-dot { animation: none; }
    .hero-cell, .btn { transition: none; }
}

/* Keep the artwork sharp and the reading width balanced at every breakpoint. */
.lp-hero-banner img{aspect-ratio:1;object-fit:contain}
.lp-tutorial-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:14px;padding:9px 20px;border:1px solid #ffb3e86b;border-radius:999px;background:#29104fa6;color:#ffb3e8;font-size:13px;font-weight:700}
.lp-howto-card h3{line-height:1.4}.lp-howto-card p{line-height:1.6}.lp-howto-scroll{align-items:stretch}
.lp-howto-visual--board{background:radial-gradient(ellipse at center,#5734b6,#160b36)}
.lp-howto-visual--board .hero-board{padding:4.54px!important;gap:.94px!important;grid-template-rows:repeat(8,minmax(0,1fr))}
.lp-hero-inner .lp-ctas{width:100%;max-width:480px;margin-left:auto;margin-right:auto}
@media(min-width:768px){.lp-hero-banner{max-width:400px}.lp-hero-inner{max-width:760px}.lp-title{font-size:clamp(40px,4vw,54px)}.lp-section-reviews{max-width:1100px;padding-top:52px}.lp-review{display:flex;flex-direction:column}.lp-review-author{margin-top:auto}.lp-review-text{font-size:14px}}
@media(max-width:380px){.landing .header-actions{gap:8px}.landing .app-logo{max-width:90px}.lp-title{font-size:clamp(29px,8.5vw,34px)}.lp-live-pill{font-size:12px;padding:8px 12px}.lp-section-title{font-size:23px}}