:root{color:#eef1ff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg:#070b18;--panel:#0a0e20d6;--panel-border:#b8c6ff29;--muted:#b1b9db;--text:#eef1ff;--accent:#7f69ff;--accent-2:#7fe8ff;--gold:#ffd86f;--shadow:0 24px 90px #00000094;background:radial-gradient(circle at 20% 20%,#7e5cff40,#0000 25%),radial-gradient(circle at 80% 18%,#6ddcff29,#0000 20%),radial-gradient(circle at bottom,#ffd4661f,#0000 30%),linear-gradient(#070b18 0%,#0b1024 48%,#050810 100%);font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;margin:0}body{color:var(--text)}body[data-mood=hot] .hero:after,body[data-mood=hot] .arena{box-shadow:0 0 0 1px #7f68ff2e,0 24px 90px #7f68ff3d}body[data-mood=cold] .hero:after,body[data-mood=cold] .arena{box-shadow:0 0 0 1px #7fe8ff1a,0 24px 90px #0a122857}button,input,textarea{font:inherit}button{cursor:pointer}#app{min-height:100vh}.shell{gap:18px;width:min(1160px,100% - 24px);margin:0 auto;padding:24px 0 36px;display:grid}.hero,.arena,.feed{border:1px solid var(--panel-border);background:linear-gradient(180deg, #ffefbd08, #ffffff03), var(--panel);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:26px}.hero{padding:28px;position:relative;overflow:hidden}.hero:before,.hero:after{content:"";pointer-events:none;position:absolute}.hero:before{filter:blur(2px);background:radial-gradient(circle,#7fe8ff3d,#0000 68%);border-radius:50%;width:160px;height:160px;inset:18px auto auto 18px}.hero:after{background:radial-gradient(circle,#7f68ff4d,#0000 66%);width:240px;height:240px;inset:auto -20px -60px auto}.brand{color:#eef7ff;letter-spacing:.03em;text-transform:uppercase;background:#7fe8ff14;border:1px solid #7fe8ff57;border-radius:999px;align-items:center;gap:10px;padding:8px 14px;font-weight:800;display:inline-flex}.eyebrow{color:var(--accent-2);text-transform:uppercase;letter-spacing:.28em;margin:16px 0 8px;font-size:.7rem;font-weight:800}.hero h1{letter-spacing:-.08em;text-shadow:0 0 24px #7f68ff38;margin:0;font-size:clamp(2.5rem,6vw,5rem);line-height:.92}.subtitle{color:#e8ddc8;max-width:760px;margin-top:16px;font-size:1.03rem;line-height:1.65}.hero-meta{flex-wrap:wrap;gap:10px;margin-top:18px;display:flex}.hero-meta span{color:var(--muted);background:#ffffff0d;border:1px solid #ffffff0f;border-radius:999px;padding:8px 12px;font-size:.88rem}.arena{gap:16px;padding:22px;display:grid}.duel{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:14px;display:grid}.panel{text-align:center;background:radial-gradient(circle at top,#7fe8ff1a,#0000 42%),linear-gradient(#ffffff08,#ffffff04),#070a18e6;border:1px solid #ffe19b1a;border-radius:22px;place-items:center;gap:9px;min-height:242px;padding:22px;display:grid;position:relative;overflow:hidden}.panel:after{content:"";background:radial-gradient(circle,#7f68ff2e,#0000 68%);border-radius:18px;width:70px;height:70px;position:absolute;inset:auto 18px 18px auto}.panel-label{text-transform:uppercase;letter-spacing:.2em;color:var(--muted);justify-self:start;font-size:.72rem}.panel-art{place-items:center;width:128px;height:128px;display:grid;position:relative}.panel-art svg{filter:drop-shadow(0 0 18px #7fe8ff2e);width:100%;height:100%}.rival .panel-art svg{transform:rotate(-2deg)}.system .panel-art svg{transform:rotate(2deg)}.panel-art.face-win{animation:.5s ease-out happyBounce}.panel-art.face-loss{animation:.55s ease-out sadSink}.panel-art.face-draw{animation:.45s ease-out neutralWobble}.rune-shape{background:radial-gradient(circle at 30% 26%,#ffffffb3,#0000 18%),radial-gradient(circle at 70% 68%,#ffffff47,#0000 24%),linear-gradient(135deg,#7fe8ff1f,#7f68ff33);border:1px solid #b8c6ff47;border-radius:26px;width:100%;height:100%;box-shadow:inset 0 0 0 1px #ffffff0d,0 0 28px #7f68ff1a}.rune-shape--idle{background:radial-gradient(circle,#7fe8ff14,#0000 42%),linear-gradient(135deg,#ffffff08,#ffffff03)}.rune-shape--kamen{clip-path:polygon(50% 6%,81% 18%,96% 46%,85% 80%,54% 95%,18% 83%,6% 50%,20% 17%)}.rune-shape--nuzky{clip-path:polygon(24% 18%,40% 18%,50% 46%,60% 18%,76% 18%,62% 52%,78% 82%,62% 82%,50% 58%,38% 82%,22% 82%,38% 52%)}.rune-shape--papir{clip-path:polygon(22% 10%,70% 10%,86% 26%,86% 90%,22% 90%);border-radius:18px}.panel-title{letter-spacing:-.04em;font-size:1.28rem;font-weight:800}.panel-subtitle{color:var(--muted);font-size:.92rem}.panel-title,.panel-subtitle{z-index:1;position:relative}.versus{place-items:center;min-width:84px;display:grid}.versus span{color:#fff;letter-spacing:.08em;text-shadow:0 1px #00000059;background:linear-gradient(#8f7cff,#3e2da7);border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;font-size:1.16rem;font-weight:900;display:inline-flex;box-shadow:0 12px 24px #7f68ff4d}.result{border:1px solid var(--panel-border);background:#ffffff0a;border-radius:18px;padding:18px 20px}.result h2{margin:0;font-size:clamp(1.3rem,3vw,2rem)}.result p{color:var(--muted);margin:8px 0 0;line-height:1.6}.controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.move-btn{color:var(--text);background:radial-gradient(circle at top,#7fe8ff29,#0000 52%),linear-gradient(#7f68ff2e,#ffffff08);border:1px solid #b8c6ff29;border-radius:18px;justify-content:center;align-items:center;gap:12px;min-height:92px;padding:14px 14px 16px;font-weight:800;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s;display:flex;position:relative;overflow:hidden}.move-btn:before{content:"";background:linear-gradient(135deg,#0000 0%,#fff3 48%,#0000 52%);transition:transform .45s;position:absolute;inset:0;transform:translate(-120%)}.move-btn:hover{border-color:#7fe8ff57;transform:translateY(-2px);box-shadow:0 16px 26px #0000002e}.move-btn:hover:before{transform:translate(120%)}.move-btn:active{transform:translateY(1px)scale(.98)}.move-btn:disabled{opacity:.72;cursor:wait;transform:none}.move-icon{width:42px;height:42px;color:var(--accent-2);flex-shrink:0;place-items:center;display:inline-grid}.move-icon svg{filter:drop-shadow(0 0 10px #7fe8ff24);width:42px;height:42px}.move-label{font-size:1.02rem}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.scoreboard{flex:520px;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.scoreboard div{border:1px solid var(--panel-border);background:#ffffff0d;border-radius:16px;gap:2px;padding:14px 16px;display:grid}.scoreboard strong{font-size:1.5rem;line-height:1}.scoreboard span,.streak{color:var(--muted)}.streak{border:1px solid var(--panel-border);background:#ffffff0d;border-radius:16px;padding:12px 14px}.streak strong{color:var(--text)}.reset-btn{color:#d7f5ff;background:0 0;border:1px solid #7fe8ff73;border-radius:14px;padding:12px 16px;font-weight:800}.reset-btn:hover{background:#7fe8ff1f}.feed{padding:22px 24px 24px}.feed-head h3{margin:0;font-size:1.1rem}.feed-head p{color:var(--muted);margin:6px 0 0}.history{gap:10px;margin:16px 0 0;padding:0;list-style:none;display:grid}.history li{border:1px solid var(--panel-border);color:#e7edf5;background:#ffffff0d;border-radius:14px;padding:12px 14px}.locked .move-btn{pointer-events:none}.arena.is-thinking .versus span{animation:.7s ease-in-out infinite alternate pulse}.arena.is-thinking .move-btn{filter:saturate(.9)}.arena.is-reveal .panel-art{animation:.35s ease-out revealPop}.arena.is-win .panel-art,.arena.is-loss .panel-art,.arena.is-draw .panel-art{filter:drop-shadow(0 0 18px #ffd97229)}.arena.is-win .result h2{color:#c7fffd}.arena.is-loss .result h2{color:#f0b7ff}.arena.is-draw .result h2{color:#d5e3ff}.arena.is-win-flash:before,.arena.is-loss-flash:before,.arena.is-draw-flash:before{content:"";pointer-events:none;mix-blend-mode:screen;border-radius:26px;animation:.42s ease-out arenaFlash;position:absolute;inset:0}.arena.is-win-flash:before{background:radial-gradient(circle,#7fe8ff33,#0000 55%)}.arena.is-loss-flash:before{background:radial-gradient(circle,#7f68ff33,#0000 55%)}.arena.is-draw-flash:before{background:radial-gradient(circle,#d7f3ff29,#0000 55%)}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 10px 20px #ef2c2840}to{transform:scale(1.04);box-shadow:0 16px 30px #ef2c286b}}@keyframes revealPop{0%{filter:blur(1px);transform:scale(.92)}to{filter:blur();transform:scale(1)}}@keyframes happyBounce{0%{transform:translateY(0)scale(1)}35%{transform:translateY(-10px)scale(1.08)}65%{transform:translateY(0)scale(.98)}to{transform:translateY(-4px)scale(1.02)}}@keyframes sadSink{0%{transform:translateY(0)scale(1)}35%{transform:translateY(10px)scale(.96)}70%{transform:translateY(3px)scale(.99)}to{transform:translateY(0)scale(.98)}}@keyframes neutralWobble{0%{transform:translate(0)}30%{transform:translate(-6px)}60%{transform:translate(6px)}to{transform:translate(0)}}@keyframes arenaFlash{0%{opacity:.95;transform:scale(.99)}to{opacity:0;transform:scale(1.02)}}@media (width<=860px){.duel{grid-template-columns:1fr}.versus{min-width:0}.controls,.scoreboard{grid-template-columns:1fr}}@media (width<=600px){.shell{gap:12px;width:100%;padding:8px 0 16px}.hero{border-radius:0;padding:14px 12px}.hero h1{font-size:clamp(2rem,8vw,2.7rem)}.subtitle{font-size:.9rem}.hero-meta{gap:4px}.hero-meta span{padding:6px 10px;font-size:.75rem}.arena,.feed{border-radius:16px;padding:16px 12px}.panel{min-height:190px;padding:16px 12px}.panel-art{width:96px;height:96px}.panel-title{font-size:1.05rem}.panel-subtitle{font-size:.82rem}.versus span{width:56px;height:56px;font-size:.95rem}.controls{gap:8px}.move-btn{gap:8px;min-height:64px;padding:8px 8px 10px}.move-icon,.move-icon svg{width:34px;height:34px}.move-label{font-size:.9rem}.toolbar{flex-direction:column;align-items:stretch}.scoreboard{grid-template-columns:repeat(2,minmax(0,1fr))}.streak{text-align:center;width:100%}.feed{padding-inline:12px}}@media (width<=400px){.hero h1{font-size:1.9rem}.panel-art{width:84px;height:84px}.panel-title{font-size:.98rem}.result{padding:12px}.result h2{font-size:1.1rem}.result p{font-size:.85rem}}@media (width<=600px) and (height<=750px){.hero{padding-block:10px}.subtitle,.hero-meta,.feed{display:none}.shell{padding-bottom:8px}}