:root{--paper:#f4efe5;--paper-deep:#e9dfd0;--ink:#172a27;--muted:#77827d;--red:#d75a43;--green:#1c6658;--green-dark:#124b42;--cream:#fffaf0;--grid:#08352e6b;--white:#f9f5eb;--shadow:0 24px 60px #20312c24}*{box-sizing:border-box}html{min-width:320px}body{min-height:100vh;color:var(--ink);background:radial-gradient(circle at 78% 8%,#d75a4314,#0000 23rem),linear-gradient(#f4efe5f0,#f4efe5fa),repeating-linear-gradient(90deg,#0000 0 4px,#172a2709 5px 6px);margin:0;font-family:DM Sans,Noto Sans JP,sans-serif}button{font:inherit}button:focus-visible{outline-offset:3px;outline:3px solid #d75a4380}.page-shell{flex-direction:column;min-height:100vh;display:flex}.site-header{border-bottom:1px solid #172a2721;justify-content:space-between;align-items:center;width:min(1180px,100% - 48px);margin:0 auto;padding:25px 0 18px;display:flex}.brand{color:inherit;align-items:center;gap:13px;text-decoration:none;display:inline-flex}.brand-mark{width:44px;height:34px;display:block;position:relative}.brand-disc{border:2px solid var(--paper);border-radius:50%;width:28px;height:28px;position:absolute}.brand-disc-dark{background:var(--ink);top:1px;left:1px}.brand-disc-light{background:var(--white);bottom:1px;right:1px;box-shadow:0 2px 5px #00000029}.brand-name,.brand-subtitle{display:block}.brand-name{letter-spacing:.15em;font-size:15px;font-weight:800}.brand-subtitle{color:var(--muted);letter-spacing:.25em;margin-top:2px;font-size:8px;font-weight:700}.header-actions{align-items:center;gap:10px;display:flex}.language-button{height:42px;color:var(--ink);letter-spacing:.05em;cursor:pointer;background:#ffffff52;border:1px solid #172a2729;border-radius:8px;padding:0 13px;font-size:10px;font-weight:700}.language-button:hover{background:#ffffffb8}.home-button,.guide-button,.icon-button,.reset-button{height:42px;color:var(--ink);cursor:pointer;background:#ffffff52;border:1px solid #172a2729;border-radius:8px;transition:background .16s,transform .16s}.home-button:hover,.guide-button:hover,.icon-button:hover,.reset-button:hover{background:#ffffffb8}.home-button:active,.guide-button:active,.icon-button:active,.reset-button:active{transform:translateY(1px)}.home-button{align-items:center;gap:5px;padding:0 12px;font-size:11px;font-weight:600;text-decoration:none;display:flex}.home-button svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:15px;height:15px}.guide-button{align-items:center;gap:6px;padding:0 12px;font-size:11px;font-weight:600;display:flex}.guide-button svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px}.icon-button{place-items:center;width:42px;display:grid}.icon-button svg,.reset-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px}.icon-button svg{width:20px;height:20px}.icon-button .sound-off,.icon-button.muted .sound-on{display:none}.icon-button.muted .sound-off{display:block}.reset-button{align-items:center;gap:8px;padding:0 15px;font-size:12px;font-weight:600;display:flex}.reset-button svg{width:17px;height:17px}main{flex:1}.hero{text-align:center;padding:31px 20px 24px}.eyebrow{color:var(--red);letter-spacing:.25em;justify-content:center;align-items:center;gap:10px;font-size:9px;font-weight:800;display:flex}.eyebrow span{background:currentColor;width:22px;height:1px}.eyebrow b{font:inherit}.hero h1{letter-spacing:.12em;margin:7px 0 2px;font-family:Noto Sans JP,sans-serif;font-size:clamp(30px,4vw,44px);font-weight:700}.hero p{color:var(--muted);letter-spacing:.16em;margin:0;font-family:Noto Sans JP,sans-serif;font-size:12px}.game-toolbar{justify-content:space-between;align-items:center;width:min(560px,100% - 40px);margin:0 auto 8px;padding:0 3px;display:flex}.toolbar-label{color:var(--muted);letter-spacing:.2em;font-size:7px;font-weight:800}.toolbar-actions{align-items:center;gap:6px;display:flex}.game-toolbar .guide-button,.game-toolbar .icon-button,.game-toolbar .reset-button{background:#fff3;height:34px}.game-toolbar .icon-button{width:34px}.game-toolbar .guide-button{padding:0 10px;font-size:10px}.game-toolbar .reset-button{padding:0 11px;font-size:10px}.mode-panel{background:#ffffff42;border:1px solid #172a271f;border-radius:10px;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;width:min(560px,100% - 40px);margin:0 auto 24px;padding:12px 14px 11px;display:grid;box-shadow:0 5px 16px #2736300a}.mode-heading{grid-column:1/-1;justify-content:center;align-items:baseline;gap:9px;display:flex}.mode-heading>span{color:var(--red);letter-spacing:.2em;font-size:7px;font-weight:800}.mode-heading strong{font-family:Noto Sans JP,sans-serif;font-size:11px}.mode-field{gap:4px;display:grid}.mode-field[hidden]{display:none}.mode-field label{color:var(--muted);font-family:Noto Sans JP,sans-serif;font-size:8px;font-weight:700}.select-wrap{position:relative}.select-wrap select{width:100%;height:34px;color:var(--ink);appearance:none;cursor:pointer;background:#ffffff94;border:1px solid #172a2724;border-radius:7px;outline:0;padding:0 31px 0 10px;font-family:Noto Sans JP,sans-serif;font-size:10px;font-weight:700}.select-wrap select:focus-visible{border-color:var(--red);box-shadow:0 0 0 3px #d75a4326}.select-wrap svg{pointer-events:none;fill:none;width:15px;height:15px;stroke:var(--muted);stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;position:absolute;top:50%;right:9px;transform:translateY(-50%)}.mode-panel.local-mode .mode-field:not(.side-field){grid-column:1/-1;justify-self:center;width:min(250px,100%)}.mode-panel>p{color:var(--muted);text-align:center;grid-column:1/-1;margin:0;font-family:Noto Sans JP,sans-serif;font-size:8px;line-height:1.5}.game-start-overlay{z-index:40;color:#fffaf0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-align:center;background:#12312bd6;place-content:center;justify-items:center;gap:14px;padding:20px;display:grid;position:absolute;inset:0}.game-start-overlay[hidden]{display:none}.game-start-overlay button{color:#fffaf0;background:var(--red);cursor:pointer;border:2px solid #fffaf0a6;border-radius:99px;min-width:150px;min-height:42px;padding:0 18px;font:700 11px Noto Sans JP,sans-serif;box-shadow:0 8px 18px #081f1b38}.game-start-overlay button:hover{background:#e66d53;transform:translateY(-1px)}.game-start-overlay button:focus-visible{outline-offset:3px;outline:3px solid #fffaf0a6}.board.waiting,.memory-board.waiting,.falling-board.waiting,.whack-field.waiting>:not(.game-start-overlay),.card-table.waiting>:not(.game-start-overlay){pointer-events:none;opacity:.58;filter:saturate(.72)}.game-layout{grid-template-columns:180px minmax(420px,530px) 180px;justify-content:center;align-items:center;gap:clamp(28px,4vw,62px);width:min(1110px,100% - 40px);margin:0 auto;display:grid}.player-card{background:#ffffff47;border:1px solid #172a271f;border-radius:12px;padding:21px 20px 19px;transition:border-color .2s,box-shadow .2s,transform .2s;position:relative}.player-card.active{border-color:#d75a4399;transform:translateY(-3px);box-shadow:0 12px 35px #443d2e1a}.player-heading{align-items:center;gap:12px;display:flex}.player-disc,.status-disc{border-radius:50%;flex:none;display:inline-block}.player-disc{width:36px;height:36px}.status-disc{width:24px;height:24px}.black-disc{background:radial-gradient(circle at 36% 30%,#40504d 0,#182a27 42%,#07100f 100%);box-shadow:inset -3px -4px 7px #00000040,inset 2px 2px 4px #ffffff1f,0 2px 4px #0000002e}.white-disc{background:radial-gradient(circle at 34% 28%,#fff 0,#f9f5e9 50%,#d4ccbd 100%);box-shadow:inset -3px -4px 7px #5a50411f,inset 2px 2px 4px #fff,0 2px 5px #0000002e}.player-label{color:var(--muted);letter-spacing:.16em;font-size:9px;font-weight:700;display:block}.player-heading h2{margin:1px 0 0;font-size:20px}.score-row{border-top:1px solid #172a271a;border-bottom:1px solid #172a271a;justify-content:center;align-items:baseline;margin:17px 0 13px;padding:14px 0;display:flex}.score-row strong{text-align:center;min-width:56px;font-size:39px;line-height:1}.score-row span{color:var(--muted);font-size:11px}.turn-badge{color:#0000;justify-content:center;align-items:center;gap:7px;min-height:20px;font-family:Noto Sans JP,sans-serif;font-size:10px;font-weight:600;transition:color .16s;display:flex}.turn-badge span{background:0 0;border-radius:50%;width:5px;height:5px}.turn-badge b{font:inherit}.player-card.active .turn-badge{color:var(--red)}.player-card.active .turn-badge span{background:var(--red);box-shadow:0 0 0 3px #d75a431f}.board-column{width:100%}.status-panel{background:#ffffff6b;border-radius:99px;justify-content:center;align-items:center;gap:10px;width:max-content;margin:0 auto 13px;padding:8px 17px;display:flex;box-shadow:0 4px 16px #2736300f}.status-label{color:var(--red);letter-spacing:.2em;font-size:7px;font-weight:800;display:block}.status-panel strong{font-family:Noto Sans JP,sans-serif;font-size:11px;display:block}.board-frame{box-shadow:var(--shadow), inset 0 0 0 5px #ffffff21;background:#d9c49f;border:1px solid #172a2729;border-radius:10px;padding:25px;position:relative}.board{aspect-ratio:1;border:2px solid var(--green-dark);background:var(--green);border-radius:2px;grid-template-rows:repeat(8,minmax(0,1fr));width:100%;display:grid;overflow:hidden}.board-row{grid-template-columns:repeat(8,minmax(0,1fr));min-height:0;display:grid}.board.cpu-thinking{cursor:wait}.board.cpu-thinking .piece{filter:saturate(.82)}.cell{border:0;border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);cursor:default;background:0 0;place-items:center;width:100%;min-width:0;height:100%;min-height:0;padding:0;display:grid;position:relative}.cell:last-child{border-right:0}.board-row:last-child .cell{border-bottom:0}.cell.valid{cursor:pointer}.cell.valid:before{content:"";aspect-ratio:1;background:#fff4ccb8;border-radius:50%;width:14%;transition:transform .16s,background .16s;box-shadow:0 0 0 4px #ffffff14}.cell.valid:hover:before{background:#ffffffe6;transform:scale(1.7)}.cell.valid:focus-visible{z-index:2;outline-offset:-4px;outline-color:#fff3c9}.piece{aspect-ratio:1;width:76%;transform-style:preserve-3d;border-radius:50%;animation:.22s cubic-bezier(.2,.8,.2,1) both place-piece}.piece.black{background:radial-gradient(circle at 35% 28%,#3c4d49,#142522 48%,#06100e 100%);box-shadow:inset -4px -5px 8px #00000047,inset 2px 2px 4px #ffffff1a,0 3px 5px #00000047}.piece.white{background:radial-gradient(circle at 35% 28%,#fff,#f6f1e5 52%,#cec5b5 100%);box-shadow:inset -4px -5px 8px #463c3224,inset 2px 2px 5px #fff,0 3px 5px #00000040}.piece.flipped{animation:.43s both flip-piece}@keyframes place-piece{0%{opacity:0;transform:scale(.45)}to{opacity:1;transform:scale(1)}}@keyframes flip-piece{0%{transform:rotateY(0)scale(1)}50%{transform:rotateY(90deg)scale(.88)}to{transform:rotateY(180deg)scale(1)}}.board-labels{color:#172a27a1;font-size:8px;font-weight:700;display:grid;position:absolute}.board-labels span{place-items:center;display:grid}.board-labels.columns{grid-template-columns:repeat(8,1fr);height:18px;top:5px;left:25px;right:25px}.board-labels.rows{grid-template-rows:repeat(8,1fr);width:18px;top:25px;bottom:25px;left:5px}.game-hint{color:var(--muted);letter-spacing:.05em;text-align:center;margin:14px 0 0;font-family:Noto Sans JP,sans-serif;font-size:10px}footer{color:#172a2773;letter-spacing:.2em;border-top:1px solid #172a2714;flex-direction:column;justify-content:center;align-items:center;gap:11px;margin-top:36px;padding:19px 20px;font-size:7px;font-weight:700;display:flex}.game-footer-identity{align-items:center;gap:11px;display:flex}.game-footer-links{letter-spacing:.04em;flex-wrap:wrap;justify-content:center;gap:8px 14px;display:flex}.game-footer-links a{color:inherit;font-family:Noto Sans JP,sans-serif;font-size:8px;text-decoration:none}.game-footer-links a:hover{color:var(--ink)}.footer-dot{background:var(--red);border-radius:50%;width:3px;height:3px}.result-dialog{inset:auto;top:var(--result-dialog-center-y,50%);left:var(--result-dialog-center-x,50%);width:min(380px,100% - 40px);max-height:calc(100dvh - 24px);color:var(--ink);background:var(--paper);text-align:center;border:0;border-radius:18px;margin:0;padding:34px;position:fixed;overflow-y:auto;transform:translate(-50%,-50%);box-shadow:0 30px 90px #0000004d}.result-close-form{position:absolute;top:14px;right:14px}.result-dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0714119e}.result-decoration{width:74px;height:44px;margin:0 auto 16px;position:relative}.result-disc{border:3px solid var(--paper);border-radius:50%;width:42px;height:42px;position:absolute}.result-disc-dark{background:var(--ink);top:0;left:3px}.result-disc-light{background:var(--white);bottom:0;right:3px;box-shadow:0 3px 8px #0003}.result-kicker{color:var(--red);letter-spacing:.25em;margin:0;font-size:9px;font-weight:800}.result-dialog h2{margin:8px 0;font-family:Noto Sans JP,sans-serif;font-size:30px}.result-dialog>p:not(.result-kicker){color:var(--muted);margin:0 0 24px;font-size:14px}.result-actions{flex-wrap:wrap;justify-content:center;gap:9px;display:flex}.play-again-button,.result-home-button{cursor:pointer;border-radius:8px;justify-content:center;align-items:center;min-width:132px;padding:12px 18px;font:700 12px Noto Sans JP,sans-serif;text-decoration:none;display:inline-flex}.play-again-button{color:#fff;background:var(--green-dark);border:0}.play-again-button:hover{background:var(--green)}.result-home-button{color:var(--green-dark);background:#fff6;border:1px solid #172a2738}.result-home-button:hover{border-color:var(--green);background:#fff}.play-again-button:focus-visible,.result-home-button:focus-visible{outline-offset:2px;outline:3px solid #d75a4359}.guide-dialog{width:min(570px,100% - 32px);max-height:calc(100vh - 32px);color:var(--ink);background:var(--paper);border:0;border-radius:18px;padding:34px 36px 32px;overflow-y:auto;box-shadow:0 30px 90px #0000004d}.guide-dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0714119e}.guide-dialog>form:first-child{position:absolute;top:16px;right:16px}.dialog-close{width:34px;height:34px;color:var(--muted);cursor:pointer;background:0 0;border:1px solid #172a271f;border-radius:50%;place-items:center;padding:0;display:grid}.dialog-close:hover{color:var(--ink);background:#ffffff8c}.dialog-close svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;width:17px;height:17px}.guide-heading{align-items:center;gap:17px;padding-right:32px;display:flex}.guide-heading p{color:var(--red);letter-spacing:.22em;margin:0 0 4px;font-size:8px;font-weight:800}.guide-heading h2{letter-spacing:.05em;margin:0;font-family:Noto Sans JP,sans-serif;font-size:25px}.guide-disc-pair{flex:none;width:64px;height:45px;position:relative}.guide-disc-pair span{border:3px solid var(--paper);border-radius:50%;width:42px;height:42px;display:block;position:absolute}.guide-disc-pair .black-disc{top:0;left:0}.guide-disc-pair .white-disc{bottom:0;right:0}.guide-intro{color:var(--green-dark);border-left:3px solid var(--red);background:#ffffff59;margin:24px 0 22px;padding:16px 18px;font-family:Noto Sans JP,sans-serif;font-size:12px;font-weight:600;line-height:1.9}.guide-example{background:#ffffff4d;border:1px solid #172a271a;border-radius:11px;justify-content:center;align-items:center;gap:7px;min-height:72px;margin:-8px 0 22px;padding:12px;display:flex;overflow:hidden}.guide-example>b{color:var(--red);font-size:16px}.guide-example>em{color:var(--green-dark);letter-spacing:.08em;font:800 10px DM Sans,sans-serif}.guide-example-reversi span{border-radius:50%;place-items:center;width:28px;height:28px;display:grid}.guide-example-reversi .example-dark{background:#172a27;box-shadow:inset 2px 2px 3px #ffffff29}.guide-example-reversi .example-light{background:#fffaf0;box-shadow:inset 0 0 0 1px #172a2724,0 2px 4px #172a2726}.guide-example-reversi .example-place{color:var(--red);border:2px dashed var(--red);background:0 0;font-size:18px}.guide-example-memory span,.guide-example-cards span,.guide-example-speed span,.guide-example-speed em{background:#f6eedf;border:3px solid #fffaf0;border-radius:6px;place-items:center;width:42px;height:54px;font:800 19px DM Sans,sans-serif;display:grid;box-shadow:0 4px 8px #172a271f}.guide-example-memory span{color:#c58c35}.guide-example-memory em{background:#3478691f;border-radius:99px;padding:7px 10px}.guide-example-cards span:first-child,.guide-example-speed span:first-child{color:var(--red)}.guide-example-cards small{margin-left:2px;font-size:12px}.guide-example-speed{position:relative}.guide-example-speed em{color:var(--ink)}.guide-example-speed small{color:var(--red);font:800 8px DM Sans,sans-serif;position:absolute;bottom:7px;right:12px}.guide-example-falling div{background:#d9cfbb;grid-template-columns:repeat(9,13px);gap:2px;padding:4px;display:grid}.guide-example-falling div span,.guide-example-falling>i{background:var(--green);border-radius:2px;width:13px;height:13px;box-shadow:inset 0 -2px #172a271f}.guide-example-falling div .example-gap{box-shadow:none;background:#172a2714}.guide-example-falling>i{background:var(--red)}.guide-example-falling em{color:var(--red)}.guide-example-mines{grid-template-rows:repeat(2,30px);grid-template-columns:repeat(3,30px) 18px 34px;display:grid}.guide-example-mines span{color:#2770a7;background:#ddd2bc;border-radius:3px;place-items:center;height:30px;font:800 14px DM Sans,sans-serif;display:grid}.guide-example-mines .example-flag{color:var(--red)}.guide-example-mines .example-safe{color:var(--green);background:#fff2a8}.guide-example-mines b{text-align:center;grid-area:1/4/3;align-self:center}.guide-example-mines em{color:#fff;background:var(--green);border-radius:50%;grid-area:1/5/3;place-items:center;width:34px;height:34px;font-style:normal;display:grid}.guide-steps{gap:0;margin:0;padding:0;list-style:none;display:grid}.guide-steps li{border-top:1px solid #172a271c;grid-template-columns:37px 1fr;gap:13px;padding:17px 0;display:grid}.guide-steps li>span{color:var(--red);letter-spacing:.12em;font-size:9px;font-weight:800}.guide-steps h3{margin:-3px 0 5px;font-family:Noto Sans JP,sans-serif;font-size:14px}.guide-steps p{color:var(--muted);margin:0;font-family:Noto Sans JP,sans-serif;font-size:11px;line-height:1.8}.guide-start-button{color:#fff;background:var(--green-dark);cursor:pointer;border:0;border-radius:8px;width:100%;margin-top:8px;padding:13px 20px;font-family:Noto Sans JP,sans-serif;font-size:12px;font-weight:700;display:block}.guide-start-button:hover{background:var(--green)}@media (width<=900px){.game-layout{grid-template-columns:1fr 1fr;gap:14px;width:min(600px,100% - 32px)}.board-column{grid-area:1/1/auto/-1}.player-card{grid-row:2;grid-template-columns:1fr auto;align-items:center;padding:13px 16px;display:grid}.score-row{border:0;margin:0;padding:0}.score-row strong{min-width:42px;font-size:30px}.turn-badge{grid-column:1/-1;min-height:14px;margin-top:5px}}@media (width<=540px){.site-header{width:calc(100% - 28px);padding-top:17px}.brand-mark{width:42px;height:34px}.brand-name{font-size:12px}.brand-subtitle{font-size:6px}.reset-button{justify-content:center;width:42px;padding:0;font-size:0}.home-button{justify-content:center;width:42px;padding:0;display:flex}.home-button span{display:none}.header-actions{gap:5px}.guide-button{justify-content:center;width:42px;padding:0}.guide-button span{display:none}.language-button{height:42px;padding:0 9px;font-size:8px}.hero{padding:24px 16px 18px}.hero h1{font-size:30px}.mode-panel{grid-template-columns:1fr;gap:8px;width:calc(100% - 28px);margin-bottom:18px;padding:11px 12px}.game-toolbar{width:calc(100% - 28px)}.game-toolbar .guide-button,.game-toolbar .icon-button,.game-toolbar .reset-button{justify-content:center;width:36px;height:34px;padding:0}.game-toolbar .reset-button span{display:none}.toolbar-actions{gap:5px}.mode-heading,.mode-panel>p,.mode-panel.local-mode .mode-field:not(.side-field){grid-column:1;width:100%}.game-start-overlay{gap:11px;padding:14px}.game-start-overlay button{min-width:138px;min-height:40px}.game-layout{gap:9px;width:calc(100% - 20px)}.board-frame{padding:19px}.board-labels.columns{top:2px;left:19px;right:19px}.board-labels.rows{top:19px;bottom:19px;left:1px}.player-card{padding:10px}.player-heading{gap:8px}.player-disc{width:27px;height:27px}.player-heading h2{font-size:16px}.player-label{font-size:7px}.score-row strong{min-width:30px;font-size:25px}.turn-badge{font-size:8px}footer{margin-top:25px}.guide-dialog{padding:28px 22px 23px}.guide-heading{gap:12px}.guide-heading h2{font-size:21px}.guide-example{transform-origin:50%;margin-bottom:16px;transform:scale(.94)}.guide-disc-pair{width:54px;height:39px}.guide-disc-pair span{width:37px;height:37px}.guide-intro{margin-top:20px;padding:13px 14px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (width<=600px){.game-toolbar .guide-button,.game-toolbar .icon-button,.game-toolbar .reset-button{min-width:44px;min-height:44px}.mode-panel>p,.mode-panel .mode-description{font-size:12px;line-height:1.7}.select-wrap select{min-height:44px;font-size:14px}.game-hint,.desktop-hint{font-size:12px;line-height:1.7}.guide-dialog p,.guide-dialog li p{font-size:13px;line-height:1.8}.language-button{min-width:60px;min-height:44px;font-size:11px}}.game-start-overlay .resume-restart{min-height:44px;color:var(--cream);box-shadow:none;background:0 0;border:1px solid #fffaf0a6;font-size:13px}.resume-restart[hidden]{display:none}
