:root{--page-background:#fff8e8;--subtle-background:#f4e8cf;--primary-text:#183847;--secondary-text:#60747a;--piece-text-color:#314746;--debug-text-color:var(--debug-text-color);--action-color:#c9530c;--action-hover-color:#a7430a;--information-color:#2d78b6;--notice-accent-color:#f1bd43;--warning-accent-color:#c48a39;--danger-accent-color:#d1503d;--success-accent-color:#7b9a75;--divider-color:#d5c4a8;--board-edge-color:#6a512c;--board-base-color:#dfb95f;--board-line-color:rgba(72,53,30,.48);--modal-backdrop:rgba(24,56,71,.87);font-family:Hiragino Sans,Yu Gothic UI,Yu Gothic,Noto Sans JP,sans-serif;color:var(--primary-text);background:var(--page-background)}*{box-sizing:border-box}body{margin:0;background:var(--page-background)}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;border:0;border-bottom:1px solid var(--primary-text);background:transparent;padding:.65rem .25rem;border-radius:0;transition:color .15s,background .15s,transform .15s}button:hover:not(:disabled){color:var(--action-color);transform:translateY(-1px)}button:disabled{cursor:not-allowed;opacity:.35}.app{max-width:1440px;margin:auto;padding:0 3vw 4rem}header{min-height:96px;display:flex;align-items:center;gap:1.5rem;position:relative;border-bottom:1px solid var(--divider-color);margin-bottom:2rem}.app-menu{display:none;position:absolute;z-index:1000;top:calc(100% + 1px);right:0;width:min(420px,calc(100vw - 2rem));padding:1rem 1.25rem 1.25rem;background:var(--page-background);border-bottom:2px solid var(--action-color);box-shadow:0 10px 24px #1838471f}.app-menu.open{display:grid;gap:.9rem}.menu-toggle{display:block;border:0;background:var(--action-color);color:#fff;padding:.65rem 1rem;min-width:82px}.app-logo{display:block;flex:0 0 auto;color:var(--primary-text);font-family:Hiragino Maru Gothic ProN,Yu Gothic,sans-serif;font-size:1rem;font-weight:700;letter-spacing:.12em;text-decoration:none}nav,.settings,.controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}nav button{font-size:.82rem;color:var(--secondary-text);border:0;padding:1.75rem .3rem 1.55rem}nav button.active{color:var(--action-color);border-bottom:3px solid var(--action-color)}.settings{display:grid;gap:.9rem}.settings label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.65rem;align-items:center;font-size:.7rem;letter-spacing:.06em;color:var(--secondary-text)}.settings input{appearance:none;position:relative;width:34px;height:18px;margin:0;border:1px solid var(--secondary-text);border-radius:999px;background:transparent}.settings input:after{content:"";position:absolute;width:12px;height:12px;top:2px;left:2px;border-radius:50%;background:var(--secondary-text);transition:transform .15s,background .15s}.settings input:checked{background:var(--action-color);border-color:var(--action-color)}.settings input:checked:after{transform:translate(16px);background:#fff}.app-menu nav{display:grid;grid-template-columns:1fr 1fr;gap:0}.app-menu nav button{display:grid;gap:.25rem;padding:.75rem .6rem;text-align:left}.app-menu nav button strong{font-size:.8rem}.app-menu nav button small,.menu-item-copy small{color:var(--secondary-text);font-size:.66rem;font-weight:400;line-height:1.5;letter-spacing:0}.menu-item-copy{display:grid;gap:.1rem;min-width:0}.menu-item-copy strong{color:var(--primary-text);font-size:.72rem}.match-info{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:clamp(.8rem,2.5vw,2.2rem);padding:.55rem 1rem;border-left:3px solid var(--action-color);background:#f4e8cf8c}.match-info span{display:grid;gap:.12rem;min-width:0;font-size:.82rem;white-space:nowrap}.match-info small{color:var(--secondary-text);font-size:.65rem;letter-spacing:.12em}.match-info strong{color:var(--action-color);font-size:.75rem;white-space:nowrap}.card{background:transparent}.join{position:relative;width:min(100%,980px);min-height:560px;margin:5rem auto 2rem;padding:5.5rem 8% 5rem 52%;display:grid;align-content:center;gap:1.5rem;background:var(--subtle-background);overflow:hidden}.join:before{content:"対";position:absolute;left:8%;top:50%;transform:translateY(-54%);font-family:Hiragino Mincho ProN,Yu Mincho,"Noto Serif JP",serif;font-size:clamp(13rem,27vw,22rem);line-height:1;color:var(--primary-text);opacity:.08}.join:after{content:"顔を見ながら、盤を囲む。";position:absolute;left:9%;top:12%;font-size:.78rem;letter-spacing:.16em;color:var(--action-color);writing-mode:vertical-rl}.join h2{font-size:clamp(1.8rem,3vw,2.35rem);font-weight:700;word-break:keep-all;margin:0 0 1rem}.join label,.dialog label{display:grid;gap:.55rem;font-size:.78rem;color:var(--secondary-text)}.join input,.join select,.dialog select,.chat input{width:100%;padding:.8rem .1rem;border:0;border-bottom:1px solid var(--primary-text);border-radius:0;background:transparent;outline:0}.join input:focus,.join select:focus,.dialog select:focus,.chat input:focus{border-color:var(--action-color)}.join>button{justify-self:start;background:var(--action-color);color:#fff;border:0;padding:.9rem 2.4rem;margin-top:1rem}.join>button:hover{background:var(--action-hover-color);color:#fff}.media{display:flex;align-items:center;gap:1.2rem;overflow-x:auto;padding:0 0 1.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--divider-color)}.media>strong{font-size:.78rem;letter-spacing:.12em;color:var(--action-color);align-self:flex-start;padding-top:.7rem}.video{margin:0;min-width:150px}.video video{display:block;width:150px;height:100px;object-fit:cover;background:var(--primary-text)}.video figcaption{text-align:left;font-size:.72rem;margin-top:.35rem;color:var(--secondary-text)}.game{display:grid;grid-template-columns:minmax(160px,1fr) minmax(390px,660px) minmax(160px,1fr);gap:clamp(1rem,2.5vw,2.8rem);align-items:center;padding:1rem 0 2rem}.game aside{display:flex;flex-direction:column;text-align:left;min-width:0}.game aside .video{align-self:stretch;margin-bottom:1rem}.game aside .video video{width:100%;height:auto;aspect-ratio:16/10}.game aside .video figcaption{font-weight:700;color:var(--primary-text)}.board{display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1;overflow:hidden;border:4px solid var(--board-edge-color);background-color:var(--board-base-color);background-image:radial-gradient(ellipse at 12% 18%,rgba(255,244,186,.28),transparent 27%),radial-gradient(ellipse at 76% 68%,rgba(130,82,29,.12),transparent 32%),repeating-linear-gradient(92deg,transparent 0 7%,rgba(111,70,24,.045) 8%,transparent 10% 18%);background-size:100% 100%,100% 100%,210px 100%;box-shadow:inset 0 0 22px #5b3a162e,0 5px 12px #4c321921}.square{border:0;border-right:2px solid var(--board-line-color);border-bottom:2px solid var(--board-line-color);background:transparent;box-shadow:inset -1px -1px 1px #fff1b81f;padding:0;aspect-ratio:1;font-family:Hiragino Mincho ProN,Yu Mincho,"Noto Serif JP",serif;font-size:clamp(1rem,3vw,2rem);font-weight:700;color:var(--piece-text-color);text-shadow:0 .4px .4px rgba(25,31,29,.18)}.square:nth-child(9n){border-right:0}.square:nth-last-child(-n+9){border-bottom:0}.square:hover:not(:disabled){background:#ffeca06b;color:inherit;transform:none}.square:disabled,.hand button:disabled{opacity:1;color:inherit}.square:disabled{cursor:default}.square.opponent span{display:inline-block;transform:rotate(180deg)}.square.selected{background:#c66c254d}.square.target{background:#79977147}.square.hint-from{box-shadow:inset 0 0 0 3px #2d78b6a6}.square.hint-to{background:#2d78b63d;box-shadow:inset 0 0 0 3px var(--information-color)}.hand{min-height:120px;padding:1rem 0;border-top:1px solid var(--divider-color);text-align:left}.hand strong{font-size:.75rem;letter-spacing:.1em;color:var(--secondary-text)}.hand button{margin:.5rem .7rem 0 0;padding:.25rem 0;color:var(--action-color)}.clock{order:-1;font-family:ui-monospace,SFMono-Regular,monospace;font-size:.9rem;margin-bottom:.65rem;color:var(--secondary-text)}.evaluation{display:flex;height:26px;margin:0 0 2rem;color:#fff;text-align:center;overflow:hidden;font-size:.75rem}.evaluation span:first-child{background:var(--information-color)}.evaluation span:last-child{background:var(--action-color)}.controls{justify-content:center;margin:0 auto 3rem;padding:1.2rem 0;border-top:1px solid var(--divider-color);border-bottom:1px solid var(--divider-color)}.replay-controls{width:min(100%,660px);margin:-1rem auto 1.5rem;justify-content:center;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--divider-color)}.replay-controls button{padding:.45rem .15rem;font-size:.8rem}.replay-controls span{color:var(--secondary-text);font-size:.78rem}.mate-result,.move-advice{width:min(100%,860px);margin:18px auto 0;padding:16px 0;border-top:1px solid var(--divider-color);border-bottom:1px solid var(--divider-color)}.mate-result ol{margin:10px 0 0;padding-left:1.5em}.mate-result li+li{margin-top:6px}.move-advice{display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap}.move-advice span{color:var(--secondary-text)}.controls button:first-child{background:var(--action-color);color:#fff;border:0;padding:.7rem 1.2rem}.record{display:grid;grid-template-columns:130px minmax(0,1fr);gap:2rem;padding:2rem 0}.record h2{margin:0;font-size:.85rem;letter-spacing:.14em;color:var(--action-color)}.record textarea{width:100%;min-height:150px;padding:0;border:0;background:transparent;line-height:1.8;resize:vertical;outline:0}.chat{display:flex;gap:1rem;padding:1.5rem 0;border-top:1px solid var(--divider-color)}.chat input{flex:1}.debug{white-space:pre-wrap;background:var(--information-color);color:var(--debug-text-color);padding:1.5rem;max-height:360px;overflow:auto;font-size:.75rem}.toasts{position:fixed;z-index:2000;right:1.5rem;top:1.5rem;display:grid;gap:.5rem}.toast{background:var(--information-color);color:#fff;padding:.9rem 1.2rem;border-left:4px solid var(--notice-accent-color)}.toast.warning{border-color:var(--warning-accent-color)}.toast.danger{border-color:var(--danger-accent-color)}.toast.success{border-color:var(--success-accent-color)}.modal{position:fixed;z-index:1500;inset:0;background:var(--modal-backdrop);display:grid;place-items:center;padding:1rem}.dialog{background:var(--page-background);padding:3rem;width:min(92vw,500px);display:grid;gap:1.4rem}.dialog h2{margin:0 0 .5rem;font-size:1.7rem}.turn-choice{border:0;border-top:1px solid var(--divider-color);border-bottom:1px solid var(--divider-color);padding:1.2rem 0;display:flex;gap:2rem}.turn-choice legend{padding:0 .8rem 0 0;font-size:.78rem;color:var(--secondary-text)}.turn-choice label{display:flex;grid-template-columns:none;align-items:center;gap:.5rem;color:var(--primary-text);font-size:.9rem}.turn-choice input{accent-color:var(--action-color)}.dialog button:first-of-type{background:var(--action-color);color:#fff;border:0}.dialog button:last-child{justify-self:start}.dialog-toggle{grid-template-columns:1fr auto auto;align-items:center;padding:.8rem 0;border-top:1px solid var(--divider-color);border-bottom:1px solid var(--divider-color)}.dialog-toggle input{appearance:none;position:relative;width:42px;height:22px;margin:0;border:1px solid var(--secondary-text);border-radius:999px;background:transparent}.dialog-toggle input:after{content:"";position:absolute;width:16px;height:16px;top:2px;left:2px;border-radius:50%;background:var(--secondary-text);transition:transform .15s,background .15s}.dialog-toggle input:checked{border-color:var(--action-color);background:var(--action-color)}.dialog-toggle input:checked:after{transform:translate(20px);background:#fff}.dialog-toggle span{min-width:2.2em;color:var(--primary-text)}.dialog-kicker{margin:0;color:var(--action-color);font-size:.75rem;letter-spacing:.16em}.promotion-dialog{text-align:center;width:min(92vw,420px)}.promotion-dialog>p:not(.dialog-kicker){margin:0;color:var(--secondary-text)}.promotion-actions{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.5rem}.promotion-actions button{min-height:64px;font-weight:700}.promotion-actions button:last-child{justify-self:stretch;background:var(--subtle-background)}@media(max-width:1024px),(hover:none)and (pointer:coarse){html,body,#root{max-width:100%;overflow-x:hidden}.app{padding:0 3px 2rem}header{display:grid;grid-template-columns:1fr auto;gap:.35rem .8rem;align-items:center;padding:.3rem .4rem;margin-bottom:1rem}.app-logo{width:auto;height:auto;grid-column:1;grid-row:1}.match-info{grid-column:1/-1;grid-row:2;order:3;width:100%;justify-content:flex-start;gap:1rem;padding:.65rem .75rem;overflow-x:auto}.menu-toggle{display:block;grid-column:2;grid-row:1;border:0;background:var(--action-color);color:#fff;padding:.65rem .9rem;min-width:78px}.app-menu{display:none;position:static;grid-column:1/-1;width:100%;padding:.55rem 0 1rem;border-top:1px solid var(--divider-color);border-bottom:2px solid var(--action-color);box-shadow:none}.app-menu.open{display:grid;gap:.8rem}.app-menu nav{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:0}.app-menu nav button{padding:.7rem 0}.app-menu .settings{width:100%;display:grid;grid-template-columns:1fr;gap:.7rem;padding:0}.app-menu .settings label{font-size:.72rem;justify-content:start}.join{width:100%;min-height:0;margin:1rem 0;padding:2.5rem 1.25rem}.join:before,.join:after{display:none}.join h2{font-size:1.8rem}.media{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.75rem;padding-bottom:1rem}.media>strong{flex:0 0 100%;padding-top:0}.media .video{flex:0 0 clamp(132px,28vw,220px);min-width:0;width:clamp(132px,28vw,220px)}.media .video video{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}.game{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);gap:1rem;padding-top:0}.board{order:1;width:100%;max-width:100%;min-width:0}.square{min-width:0;font-size:clamp(1rem,7vw,1.65rem)}.game aside{order:2;grid-template-columns:clamp(96px,22vw,180px) minmax(0,1fr);gap:.5rem .8rem}.game aside .video{width:clamp(96px,22vw,180px);min-width:0;align-self:start}.game aside .video video{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}.hand{padding:.65rem 0}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin-bottom:1.5rem}.controls button{font-size:.72rem;padding:.65rem .15rem}.controls button:first-child{padding:.65rem .15rem}.record{grid-template-columns:1fr;gap:.8rem;padding:1.2rem 0}.record textarea{min-height:110px;font-size:.78rem}.toasts{left:8px;right:8px;top:8px}.toast{font-size:.78rem}.dialog{padding:1.5rem}.promotion-dialog{padding:2rem 1.25rem}.promotion-actions button{min-height:72px;font-size:1rem}.turn-choice{gap:1rem;flex-wrap:wrap}}