:root{color:#f6efdb;--cream: #f6efdb;--gold: #f4da97;--felt: #1a6d42;--felt-dark: #12502f;--rail: #5a341d;--wood-dark: #24150c;--wood-darker: #140d09;background:radial-gradient(circle at top,rgba(244,218,151,.16),transparent 30%),linear-gradient(180deg,var(--wood-dark) 0%,var(--wood-darker) 100%);font-family:Georgia,serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}body{min-height:100vh}body:before{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:32px 32px;opacity:.15;pointer-events:none;z-index:0}#landing{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:0 24px 64px}.nav{display:flex;align-items:center;justify-content:space-between;padding:28px 0;flex-wrap:wrap;gap:12px}.brand{font-size:1.4rem;font-weight:700;letter-spacing:.02em}.nav-links{display:flex;gap:28px}.nav-links a{color:#f6efdbc7;text-decoration:none;font-size:1rem;transition:color .2s ease}.nav-links a:hover{color:var(--gold)}.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:56px 0 72px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--gold);margin:0 0 16px}.hero h1{font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.05;margin:0 0 20px}.lede{font-size:1.15rem;line-height:1.6;color:#f6efdbd9;margin:0 0 28px;max-width:36ch}.cta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.cta-row.center{justify-content:center;margin-top:36px}.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:999px;padding:14px 28px;font-family:inherit;font-size:1.05rem;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .15s ease,box-shadow .2s ease,background .2s ease}.btn-primary{background:linear-gradient(180deg,var(--gold) 0%,#d9b463 100%);color:#2a1a0c;box-shadow:0 10px 24px #f4da9740}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px #f4da9759}.btn-ghost{background:transparent;color:var(--cream);border:1px solid rgba(246,239,219,.35)}.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}.cta-note{margin:18px 0 0;font-size:.9rem;color:#f6efdb8c}.hero-art{cursor:pointer}.table{position:relative;aspect-ratio:16 / 10;border-radius:18px;background:linear-gradient(160deg,var(--felt) 0%,var(--felt-dark) 100%);border:14px solid var(--rail);box-shadow:0 24px 60px #00000080,inset 0 0 60px #00000059;overflow:hidden}.ball{position:absolute;width:11%;aspect-ratio:1;border-radius:50%;box-shadow:inset -3px -4px 8px #0006,0 4px 8px #0000004d}.ball-cue{background:radial-gradient(circle at 35% 30%,#fff,#d8d2c0);left:22%;top:56%}.ball-solid{background:radial-gradient(circle at 35% 30%,#f2c14a,#b8841f);left:58%;top:32%}.ball-stripe{background:radial-gradient(circle at 35% 30%,#e5604f,#9e2d24);left:70%;top:60%}.pocket{position:absolute;width:9%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#0a0a0a,#000)}.pocket-tl{left:-2%;top:-3%}.pocket-tr{right:-2%;top:-3%}.pocket-bl{left:-2%;bottom:-3%}.pocket-br{right:-2%;bottom:-3%}.play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3rem;color:#f6efdbe6;background:#0000002e;opacity:0;transition:opacity .25s ease}.hero-art:hover .play-overlay{opacity:1}.features,.how{padding:56px 0}.features h2,.how h2{font-size:clamp(1.8rem,3.5vw,2.6rem);text-align:center;margin:0 0 40px}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}.feature{background:#5a341d47;border:1px solid rgba(198,155,100,.25);border-radius:14px;padding:26px 24px;transition:transform .18s ease,border-color .2s ease}.feature:hover{transform:translateY(-4px);border-color:#f4da9780}.feature-icon{font-size:1.8rem}.feature h3{margin:14px 0 8px;font-size:1.25rem}.feature p{margin:0;line-height:1.55;color:#f6efdbc7}kbd{font-family:Georgia,serif;background:#f6efdb1f;border:1px solid rgba(246,239,219,.3);border-radius:5px;padding:1px 7px;font-size:.85em}.steps{list-style:none;margin:0 auto;padding:0;max-width:720px;display:grid;gap:22px}.steps li{display:flex;gap:20px;align-items:flex-start}.step-num{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;font-weight:700;color:#2a1a0c;background:linear-gradient(180deg,var(--gold) 0%,#d9b463 100%)}.steps h3{margin:6px 0 4px;font-size:1.2rem}.steps p{margin:0;color:#f6efdbc7;line-height:1.5}.footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:36px 0 8px;margin-top:32px;border-top:1px solid rgba(198,155,100,.2);color:#f6efdb99;font-size:.92rem}#game-view{display:none;position:fixed;inset:0;z-index:10;background:radial-gradient(circle at top,rgba(244,218,151,.16),transparent 30%),linear-gradient(180deg,var(--wood-dark) 0%,var(--wood-darker) 100%)}#app{width:100%;height:100%}.btn-back{position:fixed;top:18px;left:18px;z-index:11;padding:10px 20px;font-size:.95rem;background:#5a341dd9;color:var(--cream);border:1px solid rgba(198,155,100,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.btn-back:hover{border-color:var(--gold);color:var(--gold)}body.playing{overflow:hidden}body.playing #landing{display:none}body.playing #game-view{display:block}canvas{display:block;margin:0 auto;touch-action:none}@media(max-width:760px){.hero{grid-template-columns:1fr;gap:32px;padding:32px 0 48px}.nav-links{gap:18px}}