:root { --guide-ink: #17191b; --guide-panel: #24272a; --guide-soft: #303438; --guide-text: #f3f0e8; --guide-muted: #c8c4bc; --guide-accent: #bf4c54; --guide-accent-soft: #e8aeb0; --guide-line: #50555a; --guide-teal: #66b6aa; }
body.guide-page { min-height: 100vh; background: #17191b !important; color: var(--guide-text); font-family: Poppins, Arial, sans-serif; }
.guide-main { max-width: 1040px; margin: 0 auto; padding: 42px 20px 68px; }
.guide-hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(260px, .88fr); gap: 32px; align-items: stretch; margin-bottom: 32px; padding: 34px; background: #24272a; border: 1px solid var(--guide-line); }
.guide-eyebrow { color: var(--guide-accent-soft); font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.guide-hero h1 { margin: 10px 0 16px; color: var(--guide-text); font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.12; }
.guide-hero p, .guide-copy p, .guide-card p, .source-note p { color: var(--guide-muted); line-height: 1.75; }
.guide-hero-image { width: 100%; min-height: 230px; object-fit: cover; border: 1px solid var(--guide-line); background: #101113; }
.guide-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.guide-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border: 1px solid var(--guide-accent); background: var(--guide-accent); color: #fff !important; font-weight: 600; text-decoration: none !important; }
.guide-button--quiet { border-color: var(--guide-line); background: transparent; color: var(--guide-text) !important; }
.guide-toc { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 30px; }
.guide-toc a { color: var(--guide-teal); border-bottom: 1px solid transparent; text-decoration: none; }
.guide-toc a:hover { border-color: var(--guide-teal); }
.guide-section { padding: 30px 0; border-top: 1px solid var(--guide-line); }
.guide-section h2 { margin: 0 0 12px; color: var(--guide-text); font-size: clamp(1.45rem, 2.5vw, 2.1rem); }
.guide-section h3 { margin: 0 0 9px; color: var(--guide-accent-soft); font-size: 1.05rem; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.guide-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-card { padding: 19px; border: 1px solid var(--guide-line); background: var(--guide-panel); }
.guide-card p { margin: 0; font-size: .95rem; }
.guide-list { margin: 16px 0 0; padding-left: 22px; color: var(--guide-muted); line-height: 1.78; }
.guide-list strong { color: var(--guide-text); }
.source-note { margin-top: 22px; padding: 20px; border-left: 3px solid var(--guide-teal); background: #202427; }
.source-note p { margin: 0; }
.source-note a { color: var(--guide-teal); }
.guide-footer { max-width: 1040px; margin: 0 auto; padding: 22px 20px 42px; color: var(--guide-muted); font-size: .9rem; }
.guide-footer a { color: var(--guide-teal); margin-right: 14px; }
.guide-hub { margin: 28px 0 8px; padding: 28px; border: 1px solid var(--guide-line); background: #202427; }
.guide-hub h2 { margin-top: 0; color: var(--guide-text); }
.guide-hub-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.guide-hub-link { min-height: 94px; display: flex; align-items: flex-end; padding: 13px; border: 1px solid var(--guide-line); background: #292d30; color: var(--guide-text); font-weight: 600; text-decoration: none; }
.guide-hub-link:hover { border-color: var(--guide-teal); color: #fff; }
.mini-game-shell { max-width: 760px; margin: 0 auto; padding: 30px 18px 54px; }
.mini-game-shell h1 { margin: 0 0 10px; font-size: clamp(2rem, 5vw, 3.25rem); color: var(--guide-text); }
.mini-game-shell > p { color: var(--guide-muted); line-height: 1.7; }
.mini-game-board { position: relative; margin: 24px auto; border: 1px solid var(--guide-line); background: #111315; box-shadow: 0 20px 42px rgba(0, 0, 0, .35); }
.mini-game-canvas { display: block; width: 100%; max-width: 720px; height: auto; aspect-ratio: 3 / 2; touch-action: none; }
.mini-game-status { display: flex; justify-content: space-between; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--guide-line); color: var(--guide-text); background: #24272a; font-variant-numeric: tabular-nums; }
.mini-game-controls { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; }
.mini-game-controls button { min-height: 42px; padding: 10px 14px; border: 1px solid var(--guide-line); color: var(--guide-text); background: #303438; cursor: pointer; font: inherit; }
.mini-game-controls button:hover, .mini-game-controls button:focus-visible { border-color: var(--guide-teal); outline: none; }
.memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px; background: #111315; border: 1px solid var(--guide-line); }
.memory-card { min-height: 96px; border: 1px solid var(--guide-line); background: #303438; color: transparent; font-size: 2rem; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.memory-card:hover, .memory-card:focus-visible { border-color: var(--guide-teal); outline: none; transform: translateY(-2px); }
.memory-card.is-open, .memory-card.is-done { background: #f3f0e8; color: #24272a; }
.memory-card.is-done { border-color: var(--guide-teal); background: #cbe7df; }
@media (max-width: 760px) { .guide-main { padding-top: 24px; } .guide-hero { grid-template-columns: 1fr; padding: 22px; gap: 20px; } .guide-grid, .guide-grid--two { grid-template-columns: 1fr; } .guide-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-hub-link { min-height: 76px; } .memory-card { min-height: 72px; } }