:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}body{margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}body{color:#fff;background:radial-gradient(circle at top,#334155,#020617);margin:0;font-family:Inter,Segoe UI,sans-serif}.game{flex-direction:column;align-items:center;gap:20px;min-height:100vh;padding:30px;display:flex}h1{background:linear-gradient(90deg,#38bdf8,#a78bfa);color:#0000;-webkit-background-clip:text;margin:0;font-size:42px}.game-title{letter-spacing:.06em;text-align:center;white-space:nowrap;max-width:calc(100vw - 32px);font-size:clamp(1.7rem,6vw,3rem);line-height:1.1}.turn-panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-radius:15px;padding:12px 30px;font-size:22px}.game-layout{justify-content:center;align-items:flex-start;gap:30px;width:100%;display:flex}.preview-area{justify-content:center;width:280px;display:flex}.board-area{justify-content:center;display:flex}.score-panel{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:linear-gradient(145deg,#1e293bf0,#0f172acc);border:1px solid #94a3b847;border-radius:22px;width:220px;padding:18px;position:absolute;top:180px;right:40px;overflow:hidden;box-shadow:0 18px 42px #00000052}.score-panel:before{content:"";background:linear-gradient(90deg,#38bdf8,#a78bfa,#f472b6);height:3px;margin:-18px -18px 15px;display:block}.score-panel h3{letter-spacing:.13em;color:#f8fafc;margin:0 0 12px;font-size:.9rem}.score-row{background:#ffffff0e;border-left:4px solid #94a3b8;border-radius:12px;grid-template-columns:1fr auto auto;align-items:baseline;gap:6px;margin-top:7px;padding:10px 9px;font-size:0;display:grid}.score-row strong{font-variant-numeric:tabular-nums;font-size:1.35rem;line-height:1}.score-player{letter-spacing:.07em;color:#cbd5e1;font-size:.69rem;font-weight:700}.score-unit{color:#94a3b8;font-size:.6rem;font-weight:700}.player-score-1{border-left-color:#ef4444}.player-score-2{border-left-color:#3b82f6}.player-score-3{border-left-color:#22c55e}.player-score-4{border-left-color:#facc15}@media (width>=1500px){.game{box-sizing:border-box;grid-template-columns:minmax(0,1fr) 230px;grid-template-areas:"title title""turn turn""stage score""status status""hand hand";place-items:start center;column-gap:36px;width:min(100%,1500px);margin:0 auto;padding:30px;display:grid}.game-title{grid-area:title}.turn-panel{grid-area:turn}.game-layout{grid-area:stage;width:100%}.game .score-panel{grid-area:score;width:230px;position:static;transform:translate(clamp(24px,16.6667vw - 250px,72px))}.game .status-panel{grid-area:status;width:min(100%,420px)}.game .hand{grid-area:hand;width:100%}}.status-panel{background:#ffffff14;border-radius:20px;width:180px;padding:20px;position:absolute;top:90px;right:40px}.hand{width:90%;max-width:1100px}.score-panel,.status-panel{box-sizing:border-box;width:min(100%,420px);position:static}@media (width<=1200px){.game-layout{flex-direction:column;align-items:center}@media (width<=520px){.game{padding:16px 10px}.game-title{letter-spacing:.025em}}.score-panel,.status-panel{width:auto;position:static}}.board-frame{background:linear-gradient(145deg,#1e293b,#020617);border-radius:24px;justify-content:center;padding:24px;display:flex;box-shadow:0 20px 50px #00000073}.board{background:#0f172a;border:1px solid #ffffff1a;border-radius:16px;grid-template-rows:repeat(20,28px);grid-template-columns:repeat(20,28px);gap:3px;padding:10px;display:grid}.cell{cursor:pointer;background:#ffffff14;border-radius:6px;width:28px;height:28px;transition:all .15s}.cell:hover{background:#ffffff40;transform:scale(1.15)}.player-1{background:linear-gradient(135deg,#ef4444,#991b1b);box-shadow:0 0 8px #ef4444b3}.player-2{background:linear-gradient(135deg,#3b82f6,#1e40af);box-shadow:0 0 8px #3b82f6b3}.player-3{background:linear-gradient(135deg,#22c55e,#166534);box-shadow:0 0 8px #22c55eb3}.player-4{background:linear-gradient(135deg,#facc15,#a16207);box-shadow:0 0 8px #facc15b3}.cell.preview-ok{background:linear-gradient(135deg,#2dd4bff2,#0e7490f2);animation:1.1s ease-in-out infinite preview-pulse;box-shadow:inset 0 0 0 2px #cffafef2,0 0 13px #2dd4bf99}.cell.preview-ng{opacity:.9;background:linear-gradient(135deg,#fb7185eb,#9f1239eb);box-shadow:inset 0 0 0 2px #ffe4e6e6,0 0 10px #fb718573}.cell.preview-ok:hover,.cell.preview-ng:hover{transform:scale(1.06)}@keyframes preview-pulse{0%,to{filter:brightness()}50%{filter:brightness(1.28)}}.hand{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#ffffff14;border-radius:20px;width:90%;max-width:1000px;padding:16px;box-shadow:0 15px 40px #00000059}.hand h3{text-align:center;margin-top:0}.piece-list{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.piece-card{cursor:pointer;background:linear-gradient(145deg,#1e293b,#0f172a);border:1px solid #ffffff26;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;width:90px;height:90px;transition:all .2s;display:flex}.piece-card:hover{transform:translateY(-6px);box-shadow:0 10px 25px #00000080}.piece-card.selected{border:2px solid #38bdf8;box-shadow:0 0 20px #38bdf8}.piece-title{color:#cbd5e1;margin-bottom:6px;font-size:11px}.mini-board{flex-direction:column;gap:2px;display:flex}.mini-row{gap:2px;display:flex}.mini-cell{background:#ffffff14;border-radius:2px;width:10px;height:10px}.mini-cell.filled{background:linear-gradient(135deg,#38bdf8,#6366f1);box-shadow:0 0 4px #38bdf8cc}.preview-box{box-sizing:border-box;background:linear-gradient(145deg,#1e293b,#020617);border:1px solid #ffffff26;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;width:300px;height:360px;padding:20px;transition:all .3s;display:flex;box-shadow:0 20px 50px #00000080}.preview-box h3{margin-top:0;font-size:22px}.preview-piece{flex-direction:column;align-items:center;gap:5px;margin:20px;display:flex}.preview-row{gap:5px;display:flex}.preview-cell{background:#334155;border-radius:7px;width:32px;height:32px}.preview-cell.active{background:linear-gradient(135deg,#38bdf8,#6366f1);box-shadow:0 0 15px #38bdf8cc}.place-ok{color:#4ade80;margin:10px;font-size:18px;font-weight:700}.place-ng{color:#f87171;margin:10px;font-size:18px;font-weight:700}.preview-buttons{gap:15px;display:flex}.preview-buttons button{cursor:pointer;color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:12px;padding:12px 20px;font-size:16px}.preview-buttons button:hover{transform:translateY(-3px)}.preview-box.rotate .preview-piece{animation:.4s rotatePiece}@keyframes rotatePiece{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preview-box.flip .preview-piece{animation:.4s flipPiece}@keyframes flipPiece{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}to{transform:scaleX(1)}}.preview-box.success{box-shadow:0 0 35px #22c55e}.preview-box.error{animation:.3s shake}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-10px)}50%{transform:translate(10px)}75%{transform:translate(-10px)}to{transform:translate(0)}}.title-screen{color:#fff;background:radial-gradient(circle at top,#334155,#020617);flex-direction:column;justify-content:center;align-items:center;gap:50px;min-height:100vh;display:flex}.logo-area{text-align:center}.logo-area h1{overflow-wrap:anywhere;background:linear-gradient(90deg,#38bdf8,#a78bfa,#f472b6);color:#0000;text-shadow:0 0 40px #38bdf866;-webkit-background-clip:text;max-width:calc(100vw - 32px);margin:0;font-size:clamp(3rem,13vw,4.4rem);line-height:1}.logo-area p{color:#cbd5e1;font-size:22px}.menu-area{gap:40px;display:flex}.mode-card{cursor:pointer;color:#fff;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#ffffff14;border:none;border-radius:30px;width:300px;height:260px;padding:30px;transition:all .3s;box-shadow:0 20px 50px #00000080}.mode-card:hover{transform:translateY(-12px)scale(1.05)}.mode-card .icon{font-size:60px}.mode-card h2{font-size:30px}.mode-card p{color:#cbd5e1}.mode-card span{background:#38bdf8;border-radius:20px;margin-top:20px;padding:10px 30px;font-weight:700;display:inline-block}.cpu{border:1px solid #38bdf880}.online{border:1px solid #f472b680}@media (width<=800px){.title-screen{box-sizing:border-box;padding:28px 16px}.menu-area{flex-direction:column}.logo-area h1{font-size:50px}}