@import"https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{--ink: #1c2024;--ink-soft: #5d6772;--paper: #e9edf2;--accent: #4b7cff;--accent-2: #3cc9a7;--card: #e9edf2;--shadow: rgba(18, 24, 33, .18);--stroke: rgba(18, 24, 33, .08);--neo-dark: rgba(18, 24, 33, .18);--neo-light: rgba(255, 255, 255, .9)}body.theme-dark{--ink: #e6eaf0;--ink-soft: #a6b0bf;--paper: #1f242b;--accent: #6aa7ff;--accent-2: #45d6b2;--card: #1f242b;--shadow: rgba(0, 0, 0, .45);--stroke: rgba(255, 255, 255, .08);--neo-dark: rgba(0, 0, 0, .55);--neo-light: rgba(255, 255, 255, .08)}body.theme-orange{--ink: #2a2018;--ink-soft: #6f5b4a;--paper: #f5e1cf;--accent: #ff7a2f;--accent-2: #ffb05a;--card: #f5e1cf;--shadow: rgba(92, 54, 24, .25);--stroke: rgba(92, 54, 24, .12);--neo-dark: rgba(92, 54, 24, .22);--neo-light: rgba(255, 255, 255, .75)}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Space Grotesk,Noto Sans KR,sans-serif;color:var(--ink);background:radial-gradient(circle at 15% 10%,#f4f7fb 0,transparent 55%),radial-gradient(circle at 80% 15%,#dee6f3 0,transparent 60%),linear-gradient(135deg,#e7ecf2,#f2f5f9)}body.theme-dark{background:radial-gradient(circle at 15% 10%,#2b323c 0,transparent 60%),radial-gradient(circle at 80% 15%,#1d2229 0,transparent 60%),linear-gradient(135deg,#1b2026,#14181d)}body.theme-orange{background:radial-gradient(circle at 15% 10%,#ffe7d0 0,transparent 55%),radial-gradient(circle at 80% 15%,#ffd5b0 0,transparent 60%),linear-gradient(135deg,#f4dcc7,#f9eadc)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23a5b2c7' stroke-width='0.8' opacity='0.18'%3E%3Cpath d='M0 20h120M0 60h120M0 100h120'/%3E%3Cpath d='M20 0v120M60 0v120M100 0v120'/%3E%3C/g%3E%3C/svg%3E");opacity:.25}body.theme-dark:before{opacity:.08}body.theme-orange:before{opacity:.18}.site-header{display:flex;justify-content:space-between;align-items:center;padding:2rem 8vw 1rem;gap:2rem}.header-controls{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}.lang-toggle{position:relative;display:grid;grid-template-columns:repeat(2,1fr);align-items:center;width:120px;height:38px;padding:.2rem;border-radius:999px;background:var(--paper);border:1px solid rgba(255,255,255,.6);box-shadow:-6px -6px 12px var(--neo-light),6px 6px 12px var(--neo-dark);overflow:hidden}.lang-toggle:before{content:"";position:absolute;top:3px;left:3px;width:calc(50% - 6px);height:calc(100% - 6px);border-radius:999px;background:linear-gradient(120deg,var(--accent),var(--accent-2));transition:transform .25s ease}.lang-toggle[data-lang=en]:before{transform:translate(100%)}.lang-btn{border:none;background:transparent;font-size:.75rem;font-weight:700;letter-spacing:.08em;color:var(--ink);cursor:pointer;z-index:1}.lang-btn[aria-pressed=true]{color:#fff}.theme-toggle{display:flex;gap:.6rem;flex-wrap:wrap}.theme-btn{border:1px solid rgba(255,255,255,.6);background:var(--paper);color:var(--ink);border-radius:999px;padding:.35rem .8rem;font-size:.85rem;font-weight:600;cursor:pointer;box-shadow:-5px -5px 10px var(--neo-light),5px 5px 10px var(--neo-dark)}.theme-btn[aria-pressed=true]{box-shadow:inset -4px -4px 8px var(--neo-light),inset 4px 4px 8px var(--neo-dark)}.brand{display:flex;align-items:center;gap:.9rem}.brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-weight:700;background:linear-gradient(120deg,var(--accent),var(--accent-2));color:#fff;box-shadow:-6px -6px 12px #fff9,8px 8px 16px #1a355a59}.brand-title{margin:0;font-weight:700;font-size:1.05rem}.brand-sub{margin:0;font-size:.85rem;color:var(--ink-soft)}.site-nav{display:flex;flex-wrap:wrap;gap:1rem}.site-nav a{text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;padding:.4rem .8rem;border-radius:999px;background:var(--paper);border:1px solid rgba(255,255,255,.6);box-shadow:-6px -6px 14px var(--neo-light),6px 6px 14px var(--neo-dark)}.page{display:grid;gap:3.5rem;padding:1.5rem 8vw 4rem}.hero{display:grid;gap:2.5rem;align-items:start}.hero-copy{max-width:600px;animation:fadeUp .8s ease forwards}.eyebrow{text-transform:uppercase;letter-spacing:.25em;font-size:.75rem;font-weight:600;color:var(--ink-soft);margin:0 0 1rem}h1,h2,h3{font-family:Fraunces,"Noto Serif KR",serif}h1{font-size:clamp(2.6rem,3vw,3.6rem);margin:0 0 1rem}h2{font-size:clamp(1.8rem,2.4vw,2.4rem);margin:0 0 .75rem}h3{font-size:1.3rem;margin:0 0 .6rem}.lead{font-size:1.1rem;line-height:1.7;color:var(--ink-soft);margin:0 0 1.8rem}.hero-actions{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;margin-bottom:1.8rem}.first-steps{display:grid;gap:.8rem;margin-bottom:2rem}.step-card{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 1.1rem;border-radius:18px;background:#ffffff8c;border:1px solid rgba(255,255,255,.7);box-shadow:-8px -8px 16px var(--neo-light),8px 8px 16px var(--neo-dark)}.step-badge{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:.8rem;letter-spacing:.08em;color:#fff;background:linear-gradient(120deg,var(--accent),var(--accent-2))}.step-title{margin:0 0 .3rem;font-weight:700}.step-text{margin:0;color:var(--ink-soft);font-size:.9rem}.primary,.ghost{border:none;border-radius:999px;padding:.85rem 1.6rem;font-size:1rem;font-weight:600;cursor:pointer}.primary{color:#fff;background:linear-gradient(120deg,var(--accent),var(--accent-2));box-shadow:-6px -6px 12px #ffffffb3,8px 8px 16px #1a355a59;transition:transform .2s ease,box-shadow .2s ease}.primary:hover{transform:translateY(-2px);box-shadow:-8px -8px 16px #ffffffbf,10px 10px 20px #1a355a66}.ghost{background:var(--paper);border:1px solid rgba(255,255,255,.7);color:var(--ink);box-shadow:inset -4px -4px 8px var(--neo-light),inset 4px 4px 8px var(--neo-dark)}.mini-guide{display:grid;gap:.3rem;font-size:.9rem;color:var(--ink-soft)}.mini-title{margin:0;font-weight:700;color:var(--ink)}.highlights{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}.highlights li{background:var(--paper);border:1px solid rgba(255,255,255,.6);padding:.75rem 1rem;border-radius:999px;font-size:.95rem;box-shadow:-8px -8px 16px var(--neo-light),8px 8px 16px var(--neo-dark)}.game-panel{background:var(--card);border-radius:28px;padding:2rem;box-shadow:-14px -14px 28px var(--neo-light),14px 14px 28px var(--neo-dark);border:1px solid rgba(255,255,255,.6);display:grid;gap:1.5rem;animation:fadeUp .8s ease forwards;animation-delay:.12s;opacity:0}.game-header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.game-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:center}.score-board{text-align:right}.game-stats .score-value{font-size:1.5rem}.score-label{margin:0;font-size:.8rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.2em}.score-value{margin:0;font-size:2rem;font-weight:700}#blocks{width:100%;max-width:320px;aspect-ratio:3 / 5;background:#0c0b0f;border-radius:18px;border:1px solid rgba(255,255,255,.2);box-shadow:inset -6px -6px 14px #ffffff14,inset 6px 6px 14px #00000073;display:block;margin:0 auto}.game-extras{display:grid;gap:1rem}.mini-panel{display:grid;gap:.6rem;padding:1rem 1.2rem;border-radius:18px;background:var(--paper);border:1px solid rgba(255,255,255,.7);box-shadow:inset -6px -6px 12px var(--neo-light),inset 6px 6px 12px var(--neo-dark)}#next-block{width:100%;max-width:140px;aspect-ratio:1 / 1;background:#101116;border-radius:14px;border:1px solid rgba(255,255,255,.2);box-shadow:inset -4px -4px 10px #ffffff14,inset 4px 4px 10px #00000073;margin:0}.hint-text{margin:0;font-size:.85rem;color:var(--ink-soft)}.opponent-panel{min-height:220px}#opponent-board{width:100%;max-width:220px;aspect-ratio:3 / 5;background:#111318;border-radius:16px;border:1px solid rgba(255,255,255,.12);box-shadow:inset -4px -4px 10px #ffffff14,inset 4px 4px 10px #00000073}.match-panel .primary{width:100%;justify-self:stretch}.match-actions{display:grid;gap:.7rem}.inline-hint{margin-top:-.2rem;padding-left:.1rem}.match-state{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .6rem;border-radius:999px;background:#fff9;border:1px solid rgba(255,255,255,.7);width:fit-content}.state-dot{width:8px;height:8px;border-radius:50%;background:#9aa4b2;box-shadow:0 0 10px #9aa4b299}.state-pill{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}.match-panel[data-state=connecting] .state-dot{background:#ffb05a;box-shadow:0 0 12px #ffb05ab3}.match-panel[data-state=waiting] .state-dot{background:#6aa7ff;box-shadow:0 0 12px #6aa7ffb3}.match-panel[data-state=matched] .state-dot{background:#3cc9a7;box-shadow:0 0 12px #3cc9a7b3}.match-panel[data-state=error] .state-dot{background:#ff5b7a;box-shadow:0 0 12px #ff5b7ab3}.room-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;align-items:center}.room-row.token-row{grid-template-columns:minmax(0,1fr)}.room-input{border:1px solid rgba(255,255,255,.7);background:var(--paper);border-radius:999px;padding:.6rem .9rem;font-size:.85rem;font-weight:600;color:var(--ink);box-shadow:inset -4px -4px 8px var(--neo-light),inset 4px 4px 8px var(--neo-dark)}.room-input:focus{outline:2px solid rgba(75,124,255,.4);outline-offset:2px}.invite-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:.6rem;align-items:center;padding-top:.2rem}.invite-label{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}.invite-input{border:1px solid rgba(255,255,255,.7);background:var(--paper);border-radius:999px;padding:.5rem .8rem;font-size:.8rem;font-weight:600;color:var(--ink);box-shadow:inset -4px -4px 8px var(--neo-light),inset 4px 4px 8px var(--neo-dark)}.invite-row[hidden]{display:none}.attack-flash{animation:attackFlash .35s ease}.defense-flash{animation:defenseFlash .35s ease}@keyframes attackFlash{0%{box-shadow:0 0 #ff7a2f00}50%{box-shadow:0 0 18px #ff7a2f8c}to{box-shadow:0 0 #ff7a2f00}}@keyframes defenseFlash{0%{box-shadow:0 0 #ff0d7200}50%{box-shadow:0 0 18px #ff0d728c}to{box-shadow:0 0 #ff0d7200}}.game-controls{display:grid;gap:.8rem;align-items:center;justify-items:start}.control-hints{display:grid;gap:.3rem;font-size:.85rem;color:var(--ink-soft)}.touch-controls{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;padding-top:.6rem}.touch-btn{border:1px solid rgba(255,255,255,.6);background:var(--paper);border-radius:16px;font-size:1.2rem;font-weight:600;padding:.8rem .6rem;color:var(--ink);cursor:pointer;touch-action:manipulation;box-shadow:-6px -6px 12px var(--neo-light),6px 6px 12px var(--neo-dark)}.leaderboard{display:grid;gap:.8rem;padding:1rem 1.2rem;border-radius:18px;background:var(--paper);border:1px solid rgba(255,255,255,.7);box-shadow:inset -6px -6px 12px var(--neo-light),inset 6px 6px 12px var(--neo-dark)}.leaderboard-header h3{margin:0;font-size:1.1rem}#leaderboard-list{margin:0;padding-left:1.2rem;color:var(--ink-soft);display:grid;gap:.4rem}.content{display:grid;gap:1.8rem}.section-title{max-width:680px}.grid-two,.grid-three{display:grid;gap:1.5rem}.card{background:var(--card);border-radius:22px;padding:1.8rem;box-shadow:-12px -12px 24px var(--neo-light),12px 12px 24px var(--neo-dark);border:1px solid rgba(255,255,255,.7)}.card ul{padding-left:1.2rem;margin:.8rem 0 0;color:var(--ink-soft)}.score-table{display:grid;gap:.8rem}.score-row{display:flex;justify-content:space-between;font-weight:600;padding:.6rem .8rem;background:var(--paper);border-radius:14px;border:1px solid rgba(255,255,255,.6);box-shadow:inset -4px -4px 8px var(--neo-light),inset 4px 4px 8px var(--neo-dark)}.timeline{display:grid;gap:1rem}.timeline-item{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem .8rem;border-radius:14px;background:var(--paper);border:1px solid rgba(255,255,255,.6);box-shadow:inset -4px -4px 8px var(--neo-light),inset 4px 4px 8px var(--neo-dark)}.timeline .date{font-weight:700}.site-footer{display:flex;justify-content:space-between;align-items:center;padding:2.5rem 8vw 3rem;border-top:1px solid rgba(255,255,255,.6);gap:2rem;background:#e9edf2bf}.footer-meta{display:grid;gap:.4rem;font-size:.9rem;color:var(--ink-soft)}@keyframes fadeUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@media (min-width: 980px){.hero{grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr)}.game-extras{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width: 900px){.site-header{flex-direction:column;align-items:flex-start}.site-nav{width:100%}.site-footer{flex-direction:column;align-items:flex-start}}@media (max-width: 700px){.page{padding:1rem 7vw 3rem}h1{font-size:2.3rem}.game-panel{padding:1.5rem}.touch-controls{display:grid}}