:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--bg: #050816;--bg-elevated: #111827;--bg-soft: #1f2937;--accent: #6366f1;--accent-soft: rgba(99, 102, 241, .12);--accent-strong: rgba(99, 102, 241, .3);--text: #e5e7eb;--text-muted: #9ca3af;--border-subtle: #374151;--danger: #ef4444;--success: #22c55e;--radius-lg: 18px;--radius-xl: 24px;--shadow-soft: 0 18px 45px rgba(15, 23, 42, .6);--shadow-subtle: 0 8px 20px rgba(15, 23, 42, .5)}*,*:before,*:after{box-sizing:border-box}html{overflow-x:hidden;width:100%}body{margin:0;padding:0;height:100%;overflow-x:hidden;width:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,sans-serif;background:radial-gradient(circle at top,#111827,#020617 55%);color:var(--text);-webkit-font-smoothing:antialiased}#root{margin:0;padding:0;min-height:100%;width:100%;overflow-x:hidden;min-width:0}.app{min-height:100vh;padding:20px 16px 32px;width:100%;max-width:100%;display:flex;flex-direction:column;gap:20px}.app-header{display:flex;flex-direction:column;gap:14px;align-items:stretch;position:sticky;top:0;width:100%;background:linear-gradient(180deg,rgba(2,6,23,.9),rgba(2,6,23,.6),transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:6px 0 2px;z-index:10}.header-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.app-title{margin:0;font-size:1.9rem;letter-spacing:.04em;display:inline-flex;align-items:center;gap:10px}.app-title:before{content:"";width:9px;height:28px;border-radius:999px;background:linear-gradient(to bottom,#6366f1,#22c55e);box-shadow:0 0 18px #818cf8cc}.app-subtitle{margin:4px 0 0;color:var(--text-muted);font-size:.9rem}.eyebrow{margin:0 0 4px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:700}.title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#6366f129;border:1px solid rgba(99,102,241,.3);color:#c7d2fe;font-size:.78rem}.pill--accent{background:linear-gradient(135deg,var(--accent),#22c55e);color:#f9fafb;border-color:transparent;box-shadow:0 10px 28px #6366f159}.reset-and-score{display:inline-flex;align-items:center;justify-content:center;gap:10px;align-self:center;margin:0 auto}.ghost-button{border-radius:999px;border:1px solid rgba(99,102,241,.35);background:#0f172a99;color:#e5e7eb;padding:8px 14px;cursor:pointer;font-size:.84rem;transition:background .15s ease,border-color .15s ease,transform .08s ease}.ghost-button:hover{background:#6366f126;border-color:#6366f18c;transform:translateY(-1px)}.ghost-button:active{transform:translateY(0)}.ghost-button--mobile,.ghost-button--desktop{display:inline-flex}.header-top .ghost-button{margin:0 12px}.mode-switcher{display:inline-flex;padding:4px;background:#0f172ae6;border-radius:999px;border:1px solid rgba(55,65,81,.7);box-shadow:var(--shadow-subtle)}.mode-button{border:none;background:transparent;color:var(--text-muted);padding:6px 14px;font-size:.8rem;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .15s ease,color .15s ease,transform .1s ease;min-width:90px}.mode-button:hover{transform:translateY(-.5px);background:#1f2937b3}.mode-button--active{background:linear-gradient(135deg,var(--accent),#22c55e);color:#f9fafb}.header-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.quick-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.stat-chip{background:#0f172ab3;border-radius:14px;padding:10px 12px;border:1px solid rgba(55,65,81,.8);box-shadow:var(--shadow-subtle);display:flex;flex-direction:column;gap:4px}.stat-label{color:var(--text-muted);font-size:.75rem;letter-spacing:.01em}.stat-value{font-size:.92rem;font-weight:600;color:#e5e7eb}.layout{display:grid;grid-template-columns:1fr;grid-template-areas:"board" "side";gap:20px;align-items:flex-start;width:100%}.board-section{display:flex;flex-direction:column;gap:12px;grid-area:board;width:100%}.board-wrapper{background:radial-gradient(circle at top left,#374151,#1e293b 80%);border-radius:var(--radius-xl);padding:12px;box-shadow:var(--shadow-soft);border:1px solid rgba(75,85,99,.5);box-sizing:border-box;overflow:hidden}.board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);aspect-ratio:1 / 1;border-radius:18px;overflow:hidden;background:radial-gradient(circle at top,#10b981,#047857 55%);padding:4px;gap:2px;box-sizing:border-box}.cell{position:relative;border:none;background:linear-gradient(135deg,#047857,#064e3b);border-radius:10px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px #0f172acc;transition:transform .08s ease,box-shadow .08s ease,background .1s ease;touch-action:manipulation;min-width:0;min-height:0;overflow:hidden}.cell:hover{transform:translateY(-.5px);box-shadow:inset 0 0 0 1px #0f172ae6,0 6px 14px #0f172ae6}.cell:disabled{cursor:default;transform:none;box-shadow:inset 0 0 0 1px #0f172acc}.cell--valid:after{content:"";position:absolute;width:12px;height:12px;border-radius:999px;background:var(--accent-soft);box-shadow:0 0 12px var(--accent-soft)}.cell--hint{box-shadow:inset 0 0 0 2px var(--accent),0 0 16px var(--accent-strong)}.cell--hint:after{width:16px;height:16px;background:var(--accent-strong);box-shadow:0 0 16px var(--accent)}.piece{width:88%;height:88%;border-radius:999px;box-shadow:0 4px 10px #000c,inset 0 1px #ffffff1f;position:relative;transform-style:preserve-3d;transition:transform .7s ease,box-shadow .2s ease}.piece:before,.piece:after{content:"";position:absolute;inset:0;border-radius:999px;backface-visibility:hidden}.piece:before{background:radial-gradient(circle at 20% 20%,#4b5563,#020617)}.piece:after{background:radial-gradient(circle at 20% 20%,#f9fafb,#9ca3af);transform:rotateY(180deg)}.piece--black{transform:rotateY(0)}.piece--white{transform:rotateY(180deg)}.piece--small{width:18px;height:18px}.piece--tiny{width:14px;height:14px}.piece--small:before,.piece--small:after,.piece--tiny:before,.piece--tiny:after{border-radius:999px}.status-bar{margin-top:10px;background:linear-gradient(to right,#020617,#0f172a);border-radius:999px;padding:8px 12px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px solid rgba(55,65,81,.8)}.hint-button{margin-left:auto;border:1px solid rgba(99,102,241,.4);background:#6366f126;color:#c7d2fe;padding:6px 10px;border-radius:999px;font-size:.78rem;cursor:pointer;transition:background .15s ease,border-color .15s ease}.hint-button:hover:not(:disabled){background:#6366f140;border-color:#6366f199}.hint-button:disabled{opacity:.6;cursor:default}.hint-button--rules{margin-left:0}.status-dot{width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 8px #22c55eb3}.status-text{font-size:.8rem;color:var(--text-muted)}.timer{font-size:.8rem;font-variant-numeric:tabular-nums;color:#e2e8f0;background:#0f172acc;border:1px solid rgba(55,65,81,.8);border-radius:999px;padding:3px 9px;white-space:nowrap}.timer--record{color:#fcd34d;border-color:#fcd34d59;background:#fcd34d1a}.difficulty-switcher{margin-top:6px}.side-panel{display:flex;flex-direction:column;gap:12px;grid-area:side}.card{background:radial-gradient(circle at top left,#020617,#020617 60%,#111827);border-radius:var(--radius-lg);padding:12px 14px;border:1px solid rgba(55,65,81,.8);box-shadow:var(--shadow-subtle)}.card-title{margin:0 0 10px;font-size:.95rem;color:#e5e7eb}.players{display:flex;flex-direction:column;gap:10px}.player{display:flex;align-items:center;gap:10px}.player-icon{width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#0f172ae6;box-shadow:inset 0 0 0 1px #4b5563e6;font-size:1rem}.player-name{font-size:.85rem}.player-role{font-size:.75rem;color:var(--text-muted)}.current-indicator{margin-left:auto;width:6px;height:20px;border-radius:999px;background:#374151e6}.current-indicator--active{background:linear-gradient(to bottom,var(--accent),#22c55e);box-shadow:0 0 10px #818cf8e6}.score-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px dashed rgba(55,65,81,.8);font-size:.85rem}.score-row:last-child{border-bottom:none}.score-label{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted)}.score-value{font-variant-numeric:tabular-nums;font-weight:600}.score-card--mobile{display:none}.score-card--desktop{display:block}.card--actions{display:flex;flex-direction:column;gap:10px}.primary-button{border:none;border-radius:999px;padding:8px 14px;font-size:.85rem;font-weight:500;cursor:pointer;background:linear-gradient(135deg,var(--accent),#22c55e);color:#f9fafb;box-shadow:0 12px 30px #4f46e57a;transition:transform .09s ease,box-shadow .09s ease,filter .09s ease}.primary-button:hover{transform:translateY(-1px);box-shadow:0 14px 34px #4f46e599;filter:brightness(1.04)}.primary-button:active{transform:translateY(0);box-shadow:0 10px 24px #3730a399}.hint{margin:0;font-size:.75rem;color:var(--text-muted);line-height:1.4}.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:1000;pointer-events:none}.modal__backdrop{position:absolute;inset:0;background:#020617b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.modal__dialog{position:relative;pointer-events:auto;background:radial-gradient(circle at top left,#0b1224,#0a0f1f 65%,#060a14);border:1px solid rgba(99,102,241,.35);box-shadow:0 20px 60px #0009;border-radius:18px;padding:20px 22px;max-width:360px;width:90%;text-align:center}.modal__emoji{font-size:2rem;margin-bottom:6px}.modal__title{margin:0;font-size:1.4rem}.modal__subtitle{margin:8px 0 16px;color:var(--text-muted);font-size:.9rem}.modal__button{width:100%}.modal__dialog--rules{max-width:420px}.rules-content{text-align:left;margin:12px 0 16px;font-size:.9rem;color:var(--text);line-height:1.5}.rules-content p{margin:0 0 10px}.rules-content p:last-child{margin-bottom:0}@media(max-width:840px){.layout{grid-template-columns:1fr;grid-template-areas:"board" "side"}.app{padding:16px 12px 24px}.board-wrapper,.side-panel{width:100%}}@media(max-width:480px){.app{gap:16px;padding:12px 0 24px}.app-title{font-size:1.5rem}.app-subtitle{font-size:.86rem}.header-top{flex-direction:column}.score-card--mobile{display:block;margin-bottom:4px}.score-card--desktop,.stat-chip--turn,.stat-chip--mode,.stat-chip--discs,.ghost-button--desktop{display:none}.mode-switcher{width:100%;justify-content:space-between}.header-controls{flex-direction:column;align-items:stretch}.board-wrapper{padding:8px;width:100%;box-sizing:border-box}.board{gap:2px;padding:4px}.cell{border-radius:8px;min-height:0}.status-bar{border-radius:14px}.side-panel{gap:10px}.card{padding:12px}}@media(max-width:360px){.mode-button{min-width:unset;padding:8px 10px}.pill{width:100%;justify-content:center}}@media(min-width:841px){.app{max-width:1120px;margin:0 auto;align-items:center}.app-header{max-width:600px}.layout{max-width:600px;margin:0 auto}.side-panel{width:100%}}.lobby{display:flex;flex-direction:column;gap:.75rem;align-items:stretch;text-align:center}.lobby__title{margin:0;font-size:1.25rem}.lobby__label{text-align:left;font-size:.85rem;opacity:.75}.lobby__input{padding:.6rem .75rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.2);background:#0003;color:inherit;font:inherit}.lobby__input--code{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.2em}.lobby__button{width:100%}.lobby__join{display:flex;gap:.5rem}.lobby__code{margin:0;font-size:2.5rem;font-weight:700;letter-spacing:.35em;font-variant-numeric:tabular-nums}.lobby__hint{margin:0;font-size:.85rem;opacity:.7}.lobby__error{margin:0;color:#ff8080;font-size:.85rem}.timer--urgent{color:#ff8080;font-weight:700}.status-error{color:#ff8080;font-size:.85rem}.loader{display:inline-flex;align-items:center;perspective:140px}.loader__disc{position:relative;border-radius:999px;transform-style:preserve-3d;animation:reversi-flip 1.5s ease-in-out infinite;box-shadow:0 2px 6px #0206178c}.loader__disc:before,.loader__disc:after{content:"";position:absolute;inset:0;border-radius:999px;backface-visibility:hidden}.loader__disc:before{background:radial-gradient(circle at 20% 20%,#4b5563,#020617);box-shadow:inset 0 0 0 1.5px #94a3b880}.loader__disc:after{background:radial-gradient(circle at 20% 20%,#f9fafb,#9ca3af);box-shadow:inset 0 0 0 1.5px #0f172a38;transform:rotateY(180deg)}.loader--inline{margin-right:2px}.loader--inline .loader__disc{width:10px;height:10px}.loader--inline .loader__disc:before{box-shadow:inset 0 0 0 1px #94a3b88c}.loader--inline .loader__disc:after{box-shadow:none}.loader--large{gap:10px;justify-content:center;padding:4px 0}.loader--large .loader__disc{width:22px;height:22px}@keyframes reversi-flip{0%{transform:rotateY(0)}45%,55%{transform:rotateY(180deg)}to{transform:rotateY(360deg)}}@media(prefers-reduced-motion:reduce){.loader__disc{animation:reversi-pulse 1.8s ease-in-out infinite}@keyframes reversi-pulse{0%,to{opacity:.35}50%{opacity:1}}}