/* Landing page styles: green / white / gold theme */
:root {
  --green-bg: #0f2a0f;
  --green-bg-alt: #163816;
  --green-accent: #1d4d1d;
  --card-bg: #ffffff;
  --gold: #d4af37;
  --gold-glow: #f5d676;
  --text-dark: #102010;
  --transition: 160ms cubic-bezier(.4,.2,.2,1);
}
* { box-sizing: border-box; }
body {
  margin:0; font-family: 'Press Start 2P', system-ui, monospace;
  background:
    repeating-linear-gradient(90deg,#134a13 0 6px,#115d11 6px 12px),
    radial-gradient(circle at 30% 20%, var(--green-bg-alt), var(--green-bg));
  min-height:100dvh; color:#f5f5f5; display:flex; flex-direction:column; align-items:center; padding:32px 20px 48px; position:relative; overflow:hidden;
}

@font-face { font-family:'Press Start 2P'; src:local('Press Start 2P'), url('https://fonts.gstatic.com/s/pressstart2p/v11/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2') format('woff2'); }

.scanlines { pointer-events:none; position:fixed; inset:0; background-image: repeating-linear-gradient( to bottom, rgba(255,255,255,.07) 0 2px, transparent 2px 4px ); mix-blend-mode:overlay; opacity:.12; }

.scoreboard { width:100%; max-width:1080px; background:#0d150d; border:4px solid #2d5a2d; border-radius:14px; padding:18px 24px; box-shadow:0 0 0 4px #0b2a0b inset, 0 8px 32px -10px #000; text-align:center; margin-bottom:46px; position:relative; }
.scoreboard:before, .scoreboard:after { content:""; position:absolute; top:50%; width:38px; height:38px; background:radial-gradient(circle at 30% 30%,#fff,#d0d0d0); border:3px solid #222; border-radius:50%; transform:translateY(-50%); filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.scoreboard:before { left:-18px; }
.scoreboard:after { right:-18px; }
.scoreboard-inner { position:relative; z-index:2; }
.logo { margin:0; font-size:2.2rem; letter-spacing:2px; color:#fff; text-shadow:0 0 6px #fff,0 0 14px #39ff39,0 2px 0 #000; }
.logo .n { color:#ffe28a; text-shadow:0 0 6px #ffe28a,0 0 12px #ffc400; }
.subtitle { margin-top:6px; font-size:.75rem; letter-spacing:2px; opacity:.85; }

.menu { width:100%; max-width:1080px; display:flex; gap:40px; align-items:flex-start; flex-wrap:wrap; }
.menu-column { flex:1 1 560px; display:flex; flex-direction:column; gap:18px; }
.menu-item { position:relative; display:flex; gap:18px; align-items:center; background:#122812; border:3px solid #2f6a2f; border-radius:18px; padding:14px 20px; cursor:pointer; color:#e9f7e9; font-family:inherit; text-align:left; transition:120ms; box-shadow:0 4px 0 #0a140a,0 0 0 3px #0a2f0a inset; }
.menu-item:hover { background:#1a3a1a; transform:translateY(-3px); box-shadow:0 7px 0 #0a140a,0 0 0 3px #0a2f0a inset,0 6px 18px -4px rgba(0,0,0,.55); }
.menu-item:active { transform:translateY(0); box-shadow:0 3px 0 #0a140a,0 0 0 3px #0a2f0a inset; }
.menu-item:focus-visible { outline:3px solid #ffe28a; outline-offset:2px; }
.menu-item .thumb { width:72px; height:72px; background:#0e1d0e; border:2px solid #2d5a2d; border-radius:12px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.menu-item .thumb img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 4px 6px rgba(0,0,0,.7)); }
.menu-item .text { flex:1; display:flex; flex-direction:column; gap:4px; }
.menu-item h2 { margin:0; font-size:1rem; letter-spacing:1px; text-shadow:0 2px 0 #000; }
.menu-item p { margin:0; font-size:.65rem; line-height:1.25; opacity:.9; max-width:420px; }
.menu-item .tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.menu-item .tags span { background:#184818; border:1px solid #3c8b3c; padding:2px 8px 3px; font-size:.55rem; text-transform:uppercase; letter-spacing:1px; border-radius:6px; box-shadow:0 2px 0 #0d1f0d; }
.menu-item .arrow { font-size:1.2rem; filter:drop-shadow(0 2px 0 #000); color:#ffe28a; }

.help-box { flex:1 1 320px; background:#102310; border:3px solid #2f6a2f; border-radius:18px; padding:18px 22px 22px; box-shadow:0 4px 0 #0a140a,0 0 0 3px #0a2f0a inset; display:flex; flex-direction:column; gap:10px; min-width:260px; }
.help-box h3 { margin:0 0 6px; font-size:.8rem; letter-spacing:1px; color:#ffe28a; text-shadow:0 2px 0 #000; }
.help-box ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; font-size:.6rem; letter-spacing:1px; }
.help-box li { position:relative; padding-left:14px; }
.help-box li:before { content:'▶'; position:absolute; left:0; color:#39ff39; font-size:.55rem; top:2px; }
.hint { margin:4px 0 0; font-size:.55rem; letter-spacing:1px; opacity:.7; }

.foot-note { margin-top:60px; font-size:.5rem; letter-spacing:2px; opacity:.5; text-transform:uppercase; }

@media (max-width:820px){
  .menu { flex-direction:column; }
  .menu-column { width:100%; }
  .help-box { order:-1; }
}

.grid {
  width:100%; max-width:1080px; display:grid; gap:40px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.card {
  position:relative; background:var(--card-bg); color:var(--text-dark); border-radius:24px; padding:20px 20px 92px; overflow:hidden; box-shadow:0 6px 20px -6px rgba(0,0,0,.45),0 2px 6px -2px rgba(0,0,0,.4);
  isolation:isolate; cursor:pointer; text-decoration:none; outline:none; border:2px solid transparent; transition:var(--transition); display:flex; flex-direction:column; min-height:340px;
}
.card:before, .card:after { content:""; position:absolute; inset:0; pointer-events:none; }
.card:before { background:linear-gradient(120deg,rgba(212,175,55,.18),rgba(255,255,255,0) 55%); opacity:0; transition:var(--transition); }
.card:after { border:2px solid rgba(255,255,255,.06); border-radius:inherit; mix-blend-mode:overlay; }
.card:hover:before, .card:focus-visible:before { opacity:1; }
.card:hover { transform:translateY(-6px) scale(1.015); box-shadow:0 12px 32px -8px rgba(0,0,0,.55),0 4px 12px -4px rgba(0,0,0,.5); }
.card:focus-visible { box-shadow:0 0 0 4px rgba(212,175,55,.55),0 0 0 1px var(--gold) inset,0 10px 28px -6px rgba(0,0,0,.5); }
.card h2 { margin:0 0 4px; font-size:1.65rem; letter-spacing:.5px; }
.card p { margin:0 0 10px; line-height:1.35; font-size:.92rem; }
.badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.badge { background:linear-gradient(145deg,var(--green-accent),#0f3310); color:#fff; padding:4px 10px 5px; font-size:.7rem; letter-spacing:.5px; font-weight:600; border-radius:100px; text-transform:uppercase; display:inline-flex; align-items:center; gap:6px; box-shadow:0 2px 4px -2px rgba(0,0,0,.5); }
.badge.gold { background:linear-gradient(145deg,var(--gold),var(--gold-glow)); color:#222; }
.figure { position:relative; width:100%; height:160px; margin:0 0 14px; border-radius:18px; overflow:hidden; background:linear-gradient(135deg,#1b401b,#102810); display:flex; align-items:center; justify-content:center; }
.figure img { width:82%; height:82%; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.65)); transition:400ms cubic-bezier(.25,.6,.3,1); }
.card:hover img { transform:translateY(-6px) scale(1.07) rotateZ(-2deg); }

.go-btn { position:absolute; left:20px; right:20px; bottom:20px; display:flex; height:52px; align-items:center; justify-content:center; gap:10px; font-weight:600; font-size:.95rem; letter-spacing:.5px; border:none; border-radius:16px; background:linear-gradient(90deg,var(--green-accent),#0d4210); color:#fff; cursor:pointer; box-shadow:0 4px 14px -4px rgba(0,0,0,.6); transition:var(--transition); }
.go-btn span { background:linear-gradient(90deg,#fff,var(--gold)); -webkit-background-clip:text; color:transparent; font-weight:700; }
.card:hover .go-btn { background:linear-gradient(90deg,#0d5111,var(--green-accent)); }
.go-btn:active { transform:translateY(2px); }
.go-btn:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.go-btn svg { width:19px; fill:currentColor; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
/* Old grid/card styles retained below (unused now) for easy rollback */