*{margin:0;padding:0;box-sizing:border-box}:root{--type-btn: 21px;--type-btn-sub: 17px;--type-banner: 22px;--type-banner-mark: 22px;--type-settings: 18px;--type-coord: 12px;--wt-btn: 700;--wt-coord: 700;--ink-ui: #241307;--sente-accent: #8a4a12;--gote-accent: #3c5a7c;--sente-band: rgba(158, 92, 26, .78);--gote-band: rgba(92, 120, 152, .78)}html,body{height:100%;overflow:hidden;font-family:Yu Mincho,Hiragino Mincho ProN,"Noto Serif JP",serif;background:#ac9877;touch-action:manipulation;-webkit-user-select:none;user-select:none}.board-area{container-type:size}.board-frame{position:relative;background:linear-gradient(160deg,#fff5e11a,#00000029 60%),url(/textures/stand-top.jpg) center / cover;border-radius:6px;box-shadow:0 5px 16px #28180880,inset 0 2px #fff4d666,inset 0 -3px #4a2e0e66,inset 2px 0 #fff4d629,inset -2px 0 #4a2e0e3d,inset 0 0 0 1px #5a3c1499;padding:15px 15px 10px 10px;aspect-ratio:333 / 363;height:min(100cqh,calc(100cqw * 363 / 333))}.coords{position:absolute;display:flex;pointer-events:none;color:#f4e6c8eb;font-size:var(--type-coord);font-weight:var(--wt-coord);line-height:1;text-shadow:0 1px 2px rgba(20,10,2,.8)}.coords span{flex:1;display:flex;align-items:center;justify-content:center}.coords-files{top:1px;left:10px;right:15px;height:13px}.coords-ranks{top:15px;bottom:10px;right:1px;width:13px;flex-direction:column}.board{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);width:100%;height:100%;background:url(/textures/board.jpg) center / 100% 100% no-repeat;border:1px solid rgba(48,32,12,.65)}.square{position:relative;display:flex;align-items:center;justify-content:center}.square.selected{background:#d68a0047}.square.selected:after{content:"";position:absolute;top:2px;right:2px;bottom:2px;left:2px;border:4px solid #8a4400;border-radius:4px;pointer-events:none}.square.guide{background:linear-gradient(#fff4c49e,#ffe89e9e);box-shadow:inset 0 0 0 2px #be8e2a8c}.square.guide.guide-capture{background:linear-gradient(#fff0b2b8,#ffe28cb8);box-shadow:inset 0 0 0 4px #925e08e6}.piece{position:relative;width:calc(92% * var(--pscale, 1));height:calc(96% * var(--pscale, 1));filter:brightness(var(--tone, 1)) drop-shadow(0 1.5px 1.5px rgba(40,20,5,.45))}.piece-img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;pointer-events:none}.side-band{position:absolute;left:10%;right:10%;bottom:2.5%;height:4.5%;border-radius:2px;background:var(--side-color, transparent);opacity:.9;pointer-events:none}.piece.gote{transform:rotate(180deg)}.stand{min-height:0;background:linear-gradient(155deg,#fff6e41f,#00000024 55%),url(/textures/stand-side.jpg) center / cover;border-radius:8px;box-shadow:0 3px 10px #28180880,inset 0 2px #fff0cd4d,inset 0 -2.5px #321e0873,inset 1.5px 0 #fff0cd24,inset -1.5px 0 #321e0847,inset 0 0 0 1px #462c0e99;padding:9px 8px;display:flex;flex-direction:column}.hand{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;overflow:hidden;background:linear-gradient(168deg,#fff8e829,#fff0 40%,#0000001a),url(/textures/stand-top.jpg) center / cover;border-radius:5px;box-shadow:inset 0 2px 4px #321e0873,inset 0 -1px #fff0cd38;padding:6px 4px}.hand-row{display:flex;flex-wrap:wrap;flex:0 0 auto;align-items:flex-end;justify-content:center;gap:4px;row-gap:3px}.hand-piece{flex:0 0 auto;transition:translate .12s ease-out,filter .12s ease-out}.hand-piece .piece{width:calc(var(--hand-pw, 46px) * var(--pscale, 1));height:calc(var(--hand-ph, 50px) * var(--pscale, 1))}.hand-piece.selected{translate:0 -5px;filter:drop-shadow(0 6px 6px rgba(35,18,4,.5)) drop-shadow(0 0 1.5px rgba(138,68,0,.9))}.stand.gote{transform:rotate(180deg)}.controls{display:flex;flex-direction:column;gap:10px}.btn{font-family:inherit;font-size:var(--type-btn);font-weight:var(--wt-btn);line-height:1.25;letter-spacing:.08em;color:var(--ink-ui);background:linear-gradient(170deg,#f2e6d0,#ddc9a6);border:2px solid #7a5a30;border-radius:10px;min-height:64px;min-width:120px;padding:8px 14px;box-shadow:0 2px 4px #28180859}.btn:active{transform:translateY(1px);filter:brightness(.96)}.btn.small{font-size:var(--type-btn-sub);font-weight:var(--wt-btn);min-height:56px;letter-spacing:.05em;padding:8px;white-space:nowrap}.controls.gote{transform:rotate(180deg)}.promote-overlay{position:fixed;left:50%;transform:translate(-50%);z-index:30;background:linear-gradient(170deg,#f4ead6,#e4d2b0);border:3px solid #6b4a22;border-radius:14px;box-shadow:0 6px 24px #1e120580;padding:18px 22px 20px;display:none}.promote-overlay.show{display:block}.promote-overlay.sente{bottom:12%}.promote-overlay.gote{top:12%;transform:translate(-50%) rotate(180deg)}.promote-title{text-align:center;font-size:22px;color:#2b1c0c;margin-bottom:14px;letter-spacing:.15em}.promote-choices{display:flex;gap:40px}.promote-btn{font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:10px;background:linear-gradient(170deg,#efe3cd,#d9c49e);border:2px solid #7a5a30;border-radius:12px;padding:14px 20px 12px;min-width:150px;box-shadow:0 2px 5px #28180859}.promote-btn:active{transform:translateY(1px)}.promote-btn .piece{width:78px;height:86px}.promote-btn .label{font-size:21px;color:#2b1c0c;letter-spacing:.1em}#root{height:100%}*{-webkit-tap-highlight-color:transparent}body{-webkit-touch-callout:none}.stage{display:flex;height:100vh;height:100dvh;padding-top:max(2px,env(safe-area-inset-top));padding-right:max(2px,env(safe-area-inset-right));padding-bottom:max(2px,env(safe-area-inset-bottom));padding-left:max(2px,env(safe-area-inset-left));gap:4px}.side{width:clamp(160px,calc((100dvw - 100dvh * 333 / 363) / 2 - 10px),280px);display:flex;flex-direction:column;gap:4px}@supports not (width: 100dvw){.side{width:clamp(160px,calc((100vw - 100vh * 333 / 363) / 2 - 10px),280px)}}.side .stand{flex:1.3;--hand-pw: 50px;--hand-ph: 54px}.side .free{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}.side .free.top{justify-content:flex-start}.board-area{flex:1;display:flex;justify-content:center;min-width:0}.player-banner{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 6px;border-radius:10px;color:#2b1c0c;background:#3b2a1214;border:2px solid rgba(90,60,20,.25)}.player-banner .banner-line{display:flex;align-items:center;gap:7px;white-space:nowrap}.player-banner .mark{font-size:var(--type-banner-mark);line-height:1}.player-banner .name{font-size:var(--type-banner);font-weight:700;letter-spacing:.1em;line-height:1.1}.player-banner .turn-text{font-size:15px;font-weight:600;letter-spacing:.1em}.player-banner.sente{border-color:color-mix(in srgb,var(--sente-accent) 45%,transparent)}.player-banner.gote{border-color:color-mix(in srgb,var(--gote-accent) 45%,transparent)}.player-banner.turn{background:linear-gradient(#f8efd8,#ecdcb4);box-shadow:0 2px 6px #3c230a4d}.player-banner.sente.turn{border-color:var(--sente-accent)}.player-banner.gote.turn{border-color:var(--gote-accent)}.player-banner.gote{transform:rotate(180deg)}.piece[data-owner=sente]{--side-color: var(--sente-band)}.piece[data-owner=gote]{--side-color: var(--gote-band)}.controls[data-owner=sente] .btn{border-color:color-mix(in srgb,var(--sente-accent) 62%,#7a5a30)}.controls[data-owner=gote] .btn{border-color:color-mix(in srgb,var(--gote-accent) 62%,#7a5a30)}.stage[data-turn=sente]{--active-accent: var(--sente-accent)}.stage[data-turn=gote]{--active-accent: var(--gote-accent)}.square.selected:after{border-color:var(--active-accent, #8a4400)}.stage[data-turn=gote] .hand-piece.selected{filter:drop-shadow(0 6px 6px rgba(35,18,4,.5)) drop-shadow(0 0 1.5px var(--gote-accent))}.square.selected .piece{scale:1.08;filter:drop-shadow(0 5px 6px rgba(35,18,4,.55));transition:scale .12s ease-out,filter .12s ease-out}.confirm-overlay{position:fixed;left:50%;transform:translate(-50%);z-index:40;background:linear-gradient(170deg,#f4ead6,#e4d2b0);border:3px solid #6b4a22;border-radius:14px;box-shadow:0 6px 24px #1e120580;padding:18px 22px 20px;display:none}.confirm-overlay.show{display:block}.confirm-overlay.sente{bottom:12%;border-color:color-mix(in srgb,var(--sente-accent) 55%,#6b4a22)}.confirm-overlay.gote{top:12%;transform:translate(-50%) rotate(180deg);border-color:color-mix(in srgb,var(--gote-accent) 55%,#6b4a22)}.confirm-title{text-align:center;font-size:22px;color:#2b1c0c;margin-bottom:14px;letter-spacing:.12em}.confirm-choices{display:flex;gap:40px;justify-content:center}.confirm-choices .btn{min-width:140px}.settings-overlay{position:fixed;left:50%;z-index:50;width:min(430px,90vw);background:linear-gradient(170deg,#f6eeda,#e7d7b6);border:3px solid #6b4a22;border-radius:14px;box-shadow:0 8px 28px #1e12058c;padding:16px 20px 18px;color:#2b1c0c}.settings-overlay.sente{bottom:8%;transform:translate(-50%);border-color:color-mix(in srgb,var(--sente-accent) 55%,#6b4a22)}.settings-overlay.gote{top:8%;transform:translate(-50%) rotate(180deg);border-color:color-mix(in srgb,var(--gote-accent) 55%,#6b4a22)}.settings-title{text-align:center;font-size:22px;letter-spacing:.2em;margin-bottom:12px}.settings-items{display:flex;flex-direction:column;gap:10px}.settings-toggle{font-family:inherit;display:flex;justify-content:space-between;align-items:center;font-size:var(--type-settings);font-weight:600;color:#2b1c0c;background:linear-gradient(170deg,#efe3cd,#ddc9a6);border:2px solid #7a5a30;border-radius:10px;min-height:56px;padding:8px 16px}.settings-toggle .toggle-state{font-size:17px;padding:4px 14px;border-radius:8px;border:2px solid #7a5a30;background:#efe6d2}.settings-toggle.on .toggle-state{background:#7a5a30;color:#f6eeda}.settings-help{border:1px solid rgba(90,60,20,.35);border-radius:10px;padding:10px 14px;background:#fffaee80}.settings-help-title{font-size:16px;font-weight:700;margin-bottom:6px}.settings-help ol{margin-left:1.4em;font-size:15px;line-height:1.7}.resign-entry{margin-top:2px}.settings-close{margin-top:14px;display:flex;justify-content:center}.settings-close .btn{min-width:180px}.gameover-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:#281c0c59}.gameover-main{background:linear-gradient(170deg,#f6eeda,#e7d7b6);border:3px solid #6b4a22;border-radius:16px;box-shadow:0 8px 28px #1e12058c;padding:26px 40px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;color:#2b1c0c}.gameover-text{font-size:30px;letter-spacing:.15em;font-weight:700}.gameover-reason{font-size:17px;letter-spacing:.2em}.gameover-main .btn{min-width:220px;margin-top:6px}.gameover-mirror{transform:rotate(180deg);color:#f4ead6;font-size:20px;letter-spacing:.12em;text-shadow:0 1px 2px rgba(0,0,0,.5)}.notice-toast{position:fixed;left:50%;z-index:35;transform:translate(-50%);background:#342610e0;color:#f6eeda;font-size:18px;letter-spacing:.08em;padding:10px 22px;border-radius:999px;pointer-events:none;animation:notice-in .16s ease-out}.notice-toast.sente{bottom:24%}.notice-toast.gote{top:24%;transform:translate(-50%) rotate(180deg)}@keyframes notice-in{0%{opacity:0}to{opacity:1}}.settings-radio-group{display:flex;flex-direction:column;gap:6px}.settings-radio-label{font-size:var(--type-settings);font-weight:600;padding:2px 4px}.settings-radio{font-family:inherit;display:flex;align-items:center;gap:10px;font-size:var(--type-settings);font-weight:600;color:#2b1c0c;background:linear-gradient(170deg,#efe3cd,#ddc9a6);border:2px solid #7a5a30;border-radius:10px;min-height:48px;padding:6px 14px;text-align:left}.settings-radio .dot{width:18px;height:18px;border:2px solid #7a5a30;border-radius:50%;background:#efe6d2;flex:0 0 auto}.settings-radio.on .dot{background:#7a5a30;box-shadow:inset 0 0 0 3px #efe6d2}.settings-radio.on{font-weight:700}