:root{--color-primary:#1a5c2e;--color-primary-light:#2e7d32;--color-primary-dark:#0d3318;--color-accent:#c9362c;--color-accent-light:#e74c3c;--color-gold:#d4a843;--color-gold-light:#f0d060;--color-bg:#fafaf8;--color-bg-alt:#f0efe8;--color-surface:#ffffff;--color-surface-hover:#f8f7f2;--color-text:#1a1a1a;--color-text-secondary:#555555;--color-text-muted:#888888;--color-text-inverse:#ffffff;--color-border:#e0ddd4;--color-border-light:#eceae3;--font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--font-heading:'Playfair Display', Georgia, 'Times New Roman', serif;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--container-max:1200px;--container-narrow:800px;--sidebar-width:280px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--shadow-sm:0 1px 3px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.1);--shadow-lg:0 8px 30px rgba(0,0,0,0.12);--shadow-xl:0 16px 50px rgba(0,0,0,0.15);--transition-fast:150ms ease;--transition-base:250ms ease;--transition-slow:400ms ease;--navbar-height:64px}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.7;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img{max-width:100%;height:auto;display:block}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-light)}::selection{background-color:var(--color-primary-light);color:var(--color-text-inverse)}.min-h-screen{min-height:100vh}.flex{display:flex}.flex-col{flex-direction:column}.flex-grow{flex-grow:1}.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-6)}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.25;color:var(--color-text);margin-bottom:var(--space-4)}h1{font-size:var(--text-4xl);letter-spacing:-.02em}h2{font-size:var(--text-3xl);letter-spacing:-.01em;margin-top:var(--space-12)}h3{font-size:var(--text-2xl);margin-top:var(--space-8)}h4{font-size:var(--text-xl);margin-top:var(--space-6)}p{margin-bottom:var(--space-4);color:var(--color-text-secondary)}strong{color:var(--color-text);font-weight:600}.navbar{position:sticky;top:0;z-index:1000;background:var(--color-surface);border-bottom:1px solid var(--color-border);height:var(--navbar-height);display:flex;align-items:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(255,255,255,.95)}.nav-container{display:flex;align-items:center;justify-content:space-between;height:100%}.nav-brand{display:flex;align-items:center;gap:var(--space-2);font-weight:700;font-size:var(--text-xl);color:var(--color-text);text-decoration:none}.nav-brand:hover{color:var(--color-text)}.brand-icon{font-size:1.5rem;color:var(--color-accent)}.brand-accent{color:var(--color-primary)}.nav-menu{display:flex;align-items:center;gap:var(--space-6)}.nav-links{display:flex;list-style:none;gap:var(--space-1);align-items:center}.nav-links a{padding:var(--space-2)var(--space-3);border-radius:var(--radius-sm);color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500;transition:all var(--transition-fast);white-space:nowrap}.nav-links a:hover,.nav-links a.active{color:var(--color-primary);background:var(--color-bg-alt)}.nav-toggle{display:none;background:0 0;border:none;cursor:pointer;padding:var(--space-2)}.hamburger{display:block;width:24px;height:2px;background:var(--color-text);position:relative;transition:var(--transition-fast)}.hamburger::before,.hamburger::after{content:'';position:absolute;width:24px;height:2px;background:var(--color-text);transition:var(--transition-fast)}.hamburger::before{top:-7px}.hamburger::after{top:7px}.nav-toggle.active .hamburger{background:0 0}.nav-toggle.active .hamburger::before{transform:rotate(45deg);top:0}.nav-toggle.active .hamburger::after{transform:rotate(-45deg);top:0}.lang-switcher{position:relative}.lang-btn{background:0 0;border:1px solid var(--color-border);padding:var(--space-1)var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-sm);cursor:pointer;color:var(--color-text-secondary);font-family:var(--font-body);transition:all var(--transition-fast);white-space:nowrap}.lang-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.lang-dropdown{display:none;position:absolute;top:100%;right:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);list-style:none;min-width:140px;margin-top:var(--space-2);z-index:100;overflow:hidden}.lang-dropdown.open{display:block}.lang-dropdown a{display:block;padding:var(--space-2)var(--space-4);color:var(--color-text-secondary);font-size:var(--text-sm);transition:background var(--transition-fast)}.lang-dropdown a:hover{background:var(--color-bg-alt);color:var(--color-primary)}.hero{background:linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary) 50%,var(--color-primary-light) 100%);color:var(--color-text-inverse);padding:var(--space-20)0;text-align:center;position:relative;overflow:hidden}.hero::before{content:'♠ ♥ ♦ ♣';position:absolute;font-size:15rem;opacity:.04;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;letter-spacing:2rem;pointer-events:none}.hero-title{font-size:var(--text-5xl);font-family:var(--font-heading);font-weight:700;margin-bottom:var(--space-4);color:var(--color-text-inverse);position:relative}.hero-subtitle{font-size:var(--text-xl);color:rgba(255,255,255,.85);max-width:600px;margin:0 auto var(--space-8);line-height:1.6}.hero-cta{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-3)var(--space-6);border-radius:var(--radius-md);font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);text-decoration:none;cursor:pointer;transition:all var(--transition-base);border:2px solid transparent;line-height:1.5}.btn-primary{background:var(--color-accent);color:var(--color-text-inverse);border-color:var(--color-accent)}.btn-primary:hover{background:var(--color-accent-light);border-color:var(--color-accent-light);color:var(--color-text-inverse);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-outline{background:0 0;color:var(--color-text-inverse);border-color:rgba(255,255,255,.4)}.btn-outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7);color:var(--color-text-inverse)}.btn-lg{padding:var(--space-4)var(--space-8);font-size:var(--text-base)}.section{padding:var(--space-16)0}.bg-light{background:var(--color-bg-alt)}.section-title{text-align:center;margin-bottom:var(--space-10);font-size:var(--text-3xl)}.section-header{margin-bottom:var(--space-8)}.section-description{font-size:var(--text-lg);color:var(--color-text-secondary);max-width:var(--container-narrow)}.section-intro{max-width:var(--container-narrow);margin-bottom:var(--space-10)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-6)}.card{display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);transition:all var(--transition-base);text-decoration:none;color:var(--color-text)}.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--color-primary-light);color:var(--color-text)}.card-icon{font-size:2.5rem;margin-bottom:var(--space-3)}.card-title{font-size:var(--text-lg);font-family:var(--font-body);font-weight:600;margin-top:0;margin-bottom:var(--space-2);color:var(--color-text)}.card-desc{font-size:var(--text-sm);color:var(--color-text-secondary);flex-grow:1;margin-bottom:var(--space-3)}.card-link{font-size:var(--text-sm);font-weight:600;color:var(--color-primary)}.two-col{display:grid;grid-template-columns:1fr var(--sidebar-width);gap:var(--space-10);align-items:start}.col-content{min-width:0}.quick-links-box{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);position:sticky;top:calc(var(--navbar-height) + var(--space-6))}.quick-links-box h3{font-size:var(--text-lg);font-family:var(--font-body);font-weight:600;margin-top:0;margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:2px solid var(--color-primary)}.quick-links{list-style:none}.quick-links li{margin-bottom:var(--space-2)}.quick-links a{display:block;padding:var(--space-2)var(--space-3);border-radius:var(--radius-sm);color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500;transition:all var(--transition-fast)}.quick-links a:hover{background:var(--color-bg-alt);color:var(--color-primary)}.article{padding:var(--space-8)0 var(--space-16)}.article-header{margin-bottom:var(--space-8);padding-bottom:var(--space-6);border-bottom:1px solid var(--color-border)}.article-header h1{font-size:var(--text-4xl);margin-bottom:var(--space-3)}.article-description{font-size:var(--text-lg);color:var(--color-text-secondary);margin-bottom:var(--space-4)}.article-meta{display:flex;gap:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted)}.reading-time::before{content:'·';margin-right:var(--space-4)}.article-layout{display:grid;grid-template-columns:1fr var(--sidebar-width);gap:var(--space-10);align-items:start}.article-content{min-width:0}.toc{background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-8)}.toc summary{cursor:pointer;user-select:none}.toc nav,.toc ul{margin-top:var(--space-3)}.toc ul{padding-left:var(--space-5)}.toc li{margin-bottom:var(--space-1)}.toc a{color:var(--color-text-secondary);font-size:var(--text-sm)}.toc a:hover{color:var(--color-primary)}.content-body h2{padding-top:var(--space-4);border-top:1px solid var(--color-border-light)}.content-body h2:first-child{border-top:none;padding-top:0}.content-body ul,.content-body ol{padding-left:var(--space-6);margin-bottom:var(--space-4)}.content-body li{margin-bottom:var(--space-2);color:var(--color-text-secondary)}.content-body li strong{color:var(--color-text)}.content-body blockquote{border-left:4px solid var(--color-primary);padding:var(--space-4)var(--space-6);margin:var(--space-6)0;background:var(--color-bg-alt);border-radius:0 var(--radius-md)var(--radius-md)0}.content-body blockquote p{color:var(--color-text);font-style:italic;margin:0}.content-body table{width:100%;border-collapse:collapse;margin:var(--space-6)0;font-size:var(--text-sm)}.content-body th,.content-body td{padding:var(--space-3)var(--space-4);text-align:left;border-bottom:1px solid var(--color-border)}.content-body th{background:var(--color-bg-alt);font-weight:600;color:var(--color-text)}.content-body tr:hover td{background:var(--color-surface-hover)}.content-body img{border-radius:var(--radius-md);margin:var(--space-6)0}.content-body hr{border:none;border-top:1px solid var(--color-border);margin:var(--space-8)0}.article-sidebar{position:sticky;top:calc(var(--navbar-height) + var(--space-6))}.sidebar-box{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-6)}.sidebar-box h3{font-size:var(--text-base);font-family:var(--font-body);font-weight:600;margin-top:0;margin-bottom:var(--space-3);color:var(--color-text)}.sidebar-links{list-style:none}.sidebar-links li{margin-bottom:var(--space-2)}.sidebar-links a{color:var(--color-text-secondary);font-size:var(--text-sm);display:block;padding:var(--space-1)0;transition:color var(--transition-fast)}.sidebar-links a:hover{color:var(--color-primary)}.sidebar-cta{background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary));color:var(--color-text-inverse);border-color:transparent;text-align:center}.sidebar-cta h3{color:var(--color-text-inverse)}.sidebar-cta p{color:rgba(255,255,255,.85);font-size:var(--text-sm)}.sidebar-cta .btn{width:100%}.breadcrumbs{padding:var(--space-4)0;margin-bottom:var(--space-4)}.breadcrumbs ol{display:flex;list-style:none;gap:var(--space-2);font-size:var(--text-sm);flex-wrap:wrap}.breadcrumbs li::after{content:'/';margin-left:var(--space-2);color:var(--color-text-muted)}.breadcrumbs li:last-child::after{display:none}.breadcrumbs a{color:var(--color-text-muted)}.breadcrumbs a:hover{color:var(--color-primary)}.breadcrumbs li:last-child span{color:var(--color-text-secondary);font-weight:500}.faq-section{margin-top:var(--space-10)}.faq-item{border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--space-4);padding:var(--space-5);background:var(--color-surface);transition:border-color var(--transition-fast)}.faq-item:hover{border-color:var(--color-primary-light)}.faq-item h3{font-size:var(--text-lg);font-family:var(--font-body);font-weight:600;margin-top:0;margin-bottom:var(--space-3);color:var(--color-primary-dark)}.faq-item p{margin:0}.game-page{padding:var(--space-8)0}.footer-main{background:var(--color-primary-dark);color:var(--color-text-inverse);padding:var(--space-12)0 var(--space-8)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-8);margin-bottom:var(--space-8)}.footer-logo{font-size:var(--text-xl);font-weight:700;color:var(--color-text-inverse);text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}.footer-logo:hover{color:var(--color-text-inverse)}.footer-logo .brand-icon{color:var(--color-accent)}.footer-logo .brand-accent{color:var(--color-gold)}.footer-tagline{color:rgba(255,255,255,.65);font-size:var(--text-sm);margin-bottom:var(--space-4)}.footer-social{display:flex;gap:var(--space-3)}.footer-social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);color:var(--color-text-inverse);font-size:var(--text-sm);font-weight:700;transition:background var(--transition-fast);text-decoration:none}.footer-social a:hover{background:rgba(255,255,255,.2);color:var(--color-text-inverse)}.footer-nav h4{font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.5);margin-bottom:var(--space-4)}.footer-nav ul{list-style:none}.footer-nav li{margin-bottom:var(--space-2)}.footer-nav a{color:rgba(255,255,255,.75);font-size:var(--text-sm);transition:color var(--transition-fast)}.footer-nav a:hover{color:var(--color-text-inverse)}.footer-bottom{padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.1);text-align:center}.footer-bottom p{color:rgba(255,255,255,.4);font-size:var(--text-sm);margin:0}@media(max-width:1024px){.article-layout,.two-col{grid-template-columns:1fr}.article-sidebar,.col-sidebar{position:static}.footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:768px){:root{--text-4xl:1.875rem;--text-5xl:2.25rem;--text-3xl:1.5rem}.nav-toggle{display:block}.nav-menu{display:none;position:absolute;top:var(--navbar-height);left:0;right:0;background:var(--color-surface);border-bottom:1px solid var(--color-border);flex-direction:column;padding:var(--space-4);box-shadow:var(--shadow-md)}.nav-menu.open{display:flex}.nav-links{flex-direction:column;width:100%}.nav-links a{display:block;padding:var(--space-3)var(--space-4);font-size:var(--text-base)}.lang-switcher{width:100%;margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-border)}.lang-btn{width:100%;text-align:left}.lang-dropdown{position:static;box-shadow:none;border:none;margin-top:var(--space-2)}.hero{padding:var(--space-12)0}.hero-cta{flex-direction:column;align-items:center}.card-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr;gap:var(--space-6)}.section{padding:var(--space-10)0}}@media(max-width:480px){.container{padding:0 var(--space-4)}}@media print{.navbar,.footer-main,.sidebar-cta,.hero-cta,.lang-switcher{display:none}.article-layout{grid-template-columns:1fr}body{font-size:12pt;color:#000;background:#fff}a{color:#000;text-decoration:underline}.content-body a::after{content:" (" attr(href)")";font-size:.8em;color:#666}}