html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;-webkit-text-size-adjust:100%}@media (prefers-color-scheme:dark){html{--lightningcss-light: ;--lightningcss-dark:initial}}body{min-height:100svh;margin:0}#root{min-height:100svh}h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}button,input,textarea,select{font:inherit;color:inherit}img,svg{max-width:100%;display:block}:root{--bg:#f2ede3;--surface:#fffdf8;--board-bg:#e8c88a;--board-line:#8a6a3a;--ink:#241c12;--ink-muted:#6b5c47;--accent:#2f6f4f;--accent-soft:#d9e9df;--danger:#a33a2a;--highlight-move:#f5e08a;--highlight-select:#9fd0b4;--border:#d8cdb8;--radius:10px}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#1a1713;--surface:#241f19;--board-bg:#6b4f2c;--board-line:#c9a163;--ink:#f0e8dc;--ink-muted:#b3a48d;--accent:#6cbf95;--accent-soft:#2b3f35;--danger:#e0806f;--highlight-move:#7a6432;--highlight-select:#3d6b52;--border:#3a322a}}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;font-family:system-ui,-apple-system,Segoe UI,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;line-height:1.6}.app{max-width:1100px;margin:0 auto;padding:16px}.button{appearance:none;border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:var(--radius);cursor:pointer;padding:10px 18px;font-family:inherit;font-size:1rem;transition:background .15s,border-color .15s}.button:hover:not(:disabled){border-color:var(--accent)}.button:disabled{opacity:.5;cursor:not-allowed}.button--primary{background:var(--accent);border-color:var(--accent);color:#fff}.button--danger{background:var(--danger);border-color:var(--danger);color:#fff}.button--ghost{color:var(--ink-muted);background:0 0;border-color:#0000;text-decoration:underline}.button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.connect{flex-direction:column;gap:20px;max-width:620px;margin:0 auto;display:flex}.connect__title{text-align:center;margin:12px 0 0;font-size:1.6rem}.connect__lead{color:var(--ink-muted);text-align:center;margin:0}.connect__actions{flex-direction:column;gap:12px;display:flex}.connect__fieldset{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);flex-wrap:wrap;gap:14px;padding:12px 16px;display:flex}.connect__fieldset legend{color:var(--ink-muted);padding:0 6px;font-size:.9rem}.connect__fieldset--column{flex-direction:column;align-items:stretch}.connect__code-row{gap:10px;display:flex}.connect__code-row .connect__textarea{flex:1}.connect__status{color:var(--ink-muted);margin:0}.connect__radio{cursor:pointer;align-items:center;gap:6px;display:flex}.connect__textarea,.codebox__code{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);width:100%;color:var(--ink);resize:vertical;word-break:break-all;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95rem}.connect__error{color:var(--danger);background:color-mix(in srgb, var(--danger) 12%, transparent);border-radius:var(--radius);margin:0;padding:10px 14px}.connect__hint{color:var(--ink-muted);margin:8px 0 0;font-size:.9rem}.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.step__title{align-items:center;gap:10px;margin:0 0 12px;font-size:1rem;display:flex}.step__number{background:var(--accent);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;font-size:.9rem;display:inline-flex}.step__body{flex-direction:column;gap:12px;display:flex}.codebox{flex-direction:column;gap:10px;display:flex}.codebox__actions{flex-wrap:wrap;gap:10px;display:flex}.notice{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--ink-muted);padding:12px 16px;font-size:.9rem}.notice summary{cursor:pointer;color:var(--ink)}.notice p{margin:10px 0 0}.game{flex-direction:column;gap:12px;display:flex}.game__header{align-items:center;gap:12px;display:flex}.game__turn{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-weight:600}.game__turn--mine{background:var(--accent-soft);border-color:var(--accent)}.game__check{color:#fff;background:var(--danger);border-radius:999px;padding:6px 14px;font-weight:700}.game__turn--result{border-color:var(--accent);background:var(--accent-soft);font-weight:700}.game__notice{z-index:20;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);justify-content:space-between;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 32px);padding:10px 14px;display:flex;position:fixed;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 6px 20px #00000059}.game__notice-close{cursor:pointer;color:var(--ink-muted);background:0 0;border:none;font-size:1.2rem}.game__layout{grid-template-columns:minmax(0,1fr) 260px;align-items:start;gap:20px;display:grid}@media (width<=860px){.game__layout{grid-template-columns:1fr}}.game__board-area{flex-direction:column;gap:10px;display:flex}.game__side{flex-direction:column;gap:14px;display:flex}.game__controls{flex-direction:column;gap:8px;display:flex}.playerbar{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);justify-content:space-between;align-items:center;padding:8px 14px;display:flex}.playerbar--active{border-color:var(--accent);background:var(--accent-soft)}.playerbar__name{align-items:baseline;gap:8px;font-weight:600;display:flex}.playerbar__color{color:var(--ink-muted);font-size:.85rem;font-weight:400}.playerbar__clock{font-variant-numeric:tabular-nums;font-size:1.3rem;font-weight:600}.board{background:var(--board-bg);border:3px solid var(--board-line);aspect-ratio:1;border-radius:4px;flex-direction:column;width:100%;max-width:560px;margin:0 auto;display:flex}.board__row{flex:1;display:flex}.board__square{border:1px solid color-mix(in srgb, var(--board-line) 55%, transparent);cursor:pointer;background:0 0;flex:1;justify-content:center;align-items:center;padding:0;font-family:inherit;transition:background .12s;display:flex;position:relative}.board__square:disabled{cursor:default}.board__square:hover:not(:disabled){background:#ffffff40}.board__square--last-move{background:var(--highlight-move)}.board__square--selected{background:var(--highlight-select)}.board__square--destination{background:color-mix(in srgb, var(--highlight-select) 55%, transparent)}.board__square:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;z-index:1}.board__piece{color:#1c1206;-webkit-user-select:none;user-select:none;font-size:clamp(.8rem,4.2vw,1.7rem);font-weight:600;line-height:1}.board__piece--flipped{transform:rotate(180deg)}.board__dot{background:color-mix(in srgb, var(--accent) 70%, transparent);border-radius:50%;width:26%;height:26%}.board--dobutsu{aspect-ratio:3/4;max-width:320px}.board__animal{filter:drop-shadow(0 1px 1.5px #0000004d);pointer-events:none;width:86%;height:86%}.hand__piece--animal{gap:4px;padding:3px}.hand{--hand-piece-height:36px}.hand--dobutsu{--hand-piece-height:52px}.hand__animal{width:44px;height:44px;display:block}.board__disc{border-radius:50%;width:78%;height:78%;box-shadow:inset 0 -2px 4px #00000040}.board__disc--black{background:#1c1206}.board__disc--white{border:1px solid color-mix(in srgb, var(--board-line) 40%, transparent);background:#f5f0e6}.game-select__list{flex-direction:column;gap:12px;margin-top:16px;display:flex}.game-select__item{text-align:left;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 18px;transition:background .12s,border-color .12s;display:flex}.game-select__item:hover{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, var(--surface))}.game-select__name{font-size:1.2rem;font-weight:700}.game-select__description{color:var(--ink-muted);font-size:.9rem}.hand{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:nowrap;align-items:center;gap:12px;min-height:52px;padding:8px 12px;display:flex}.hand__label{color:var(--ink-muted);flex-shrink:0;align-items:baseline;gap:4px;font-size:.9rem;display:flex}.hand__color{font-size:.8rem}.hand__pieces{scrollbar-width:thin;min-width:0;min-height:var(--hand-piece-height);flex-wrap:nowrap;align-items:center;gap:6px;display:flex;overflow-x:auto}.hand__empty{color:var(--ink-muted);font-size:.9rem}.hand__piece{box-sizing:border-box;height:var(--hand-piece-height);border:1px solid var(--border);background:var(--board-bg);color:#1c1206;cursor:pointer;border-radius:6px;flex-shrink:0;align-items:center;gap:2px;padding:6px 10px;font-family:inherit;font-size:1.05rem;font-weight:600;display:inline-flex}.hand__piece--selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.hand__piece:disabled{cursor:default;opacity:.75}.hand__piece-count{font-size:.8rem}.movelist{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px}.movelist__title{margin:0 0 8px;font-size:1rem}.movelist__items{flex-direction:column;gap:2px;max-height:320px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.movelist__item{text-align:left;cursor:pointer;width:100%;color:var(--ink);background:0 0;border:none;border-radius:6px;gap:10px;padding:4px 8px;font-family:inherit;font-size:.95rem;display:flex}.movelist__item:hover{background:var(--accent-soft)}.movelist__item--current{background:var(--accent-soft);font-weight:600}.movelist__ply{color:var(--ink-muted);font-variant-numeric:tabular-nums;min-width:2.5em}.movelist__empty{color:var(--ink-muted);margin:0;font-size:.9rem}.ad-slot{width:100%;min-height:100px}.ad-slot--placeholder{border:1px dashed var(--border);border-radius:var(--radius);min-height:250px;color:var(--ink-muted);background:var(--surface);justify-content:center;align-items:center;font-size:.85rem;display:flex}.app__connect-layout{grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:24px;display:grid}@media (width<=860px){.app__connect-layout{grid-template-columns:1fr}}.dialog-backdrop{z-index:10;background:#00000073;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.dialog{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);width:100%;max-width:400px;padding:24px}.dialog__title{margin:0 0 16px;font-size:1.1rem}.dialog__actions{flex-wrap:wrap;gap:10px;display:flex}.button--small{padding:5px 12px;font-size:.85rem}.game__header{justify-content:space-between}.game__header-actions{flex-shrink:0;align-items:center;gap:6px;display:flex}.seat{gap:10px;padding:6px 10px}.seat__name{flex-shrink:0}.seat__hand{flex:1;justify-content:flex-end;min-width:0;display:flex}.hand--inline{background:0 0;border:none;min-width:0;min-height:0;padding:0}.hand--inline .hand__label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.ad-slot--banner{align-self:center;min-height:50px}.ad-slot--placeholder.ad-slot--banner{width:320px;max-width:100%;height:50px;min-height:50px}@media (width<=860px){.app:has(.game--dobutsu){padding:8px 8px max(8px, env(safe-area-inset-bottom))}.game--dobutsu,.game--dobutsu .game__board-area{gap:8px}.game--dobutsu .hand--dobutsu{--hand-piece-height:42px}.game--dobutsu .hand__animal{width:34px;height:34px}.game--dobutsu .board--dobutsu{--dobutsu-chrome:252px;width:min(100%, 320px, calc((100dvh - var(--dobutsu-chrome)) * 3 / 4));max-width:none;margin:0 auto}}.gameover{z-index:30;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0a08068c;justify-content:center;align-items:center;padding:16px;animation:.25s ease-out gameover-fade;display:flex;position:fixed;inset:0}.gameover__panel{flex-direction:column;align-items:center;gap:14px;width:min(360px,100%);display:flex}.gameover__stamp{--stamp-color:#d23a3a;letter-spacing:.08em;color:var(--stamp-color);border:.09em solid var(--stamp-color);background:#fffcf5f0;border-radius:.16em;padding:.18em .4em .22em;font-size:clamp(3.2rem,18vw,5.5rem);font-weight:900;line-height:1;animation:.55s cubic-bezier(.2,1.4,.4,1) both gameover-stamp;transform:rotate(-8deg);box-shadow:0 10px 30px #00000073}.gameover--win .gameover__stamp{--stamp-color:#d23a3a;text-shadow:0 0 18px #ffc8508c}.gameover--lose .gameover__stamp{--stamp-color:#3a5aa8}.gameover--draw .gameover__stamp{--stamp-color:#6b6b6b;font-size:clamp(2.4rem,13vw,4rem)}.gameover__reason{color:#fff;text-shadow:0 1px 4px #0009;align-items:baseline;gap:10px;font-size:1.15rem;font-weight:700;animation:.3s ease-out .45s both gameover-rise;display:flex}.gameover__plies{opacity:.85;font-size:.9rem;font-weight:400}.gameover__actions{flex-direction:column;gap:8px;width:100%;animation:.3s ease-out .6s both gameover-rise;display:flex}.gameover__actions .button{width:100%}.gameover__actions .button--ghost{color:#fff}@keyframes gameover-fade{0%{opacity:0}}@keyframes gameover-stamp{0%{opacity:0;transform:rotate(-20deg)scale(2.6)}60%{opacity:1}to{opacity:1;transform:rotate(-8deg)scale(1)}}@keyframes gameover-rise{0%{opacity:0;transform:translateY(8px)}}@media (prefers-reduced-motion:reduce){.gameover,.gameover__stamp,.gameover__reason,.gameover__actions{animation:none}}.dialog__text{color:var(--ink-muted);margin:0 0 16px;font-size:.95rem}.reviewbar{justify-content:space-between;align-items:center;gap:8px;width:100%;min-width:0;display:flex}.reviewbar__position{white-space:nowrap;align-items:baseline;gap:8px;min-width:0;display:flex}.reviewbar__ply{font-variant-numeric:tabular-nums;color:var(--ink-muted);font-size:.85rem}.reviewbar__move{text-overflow:ellipsis;font-weight:700;overflow:hidden}.reviewbar__buttons{flex-shrink:0;gap:4px;display:flex}.reviewbar__buttons .button--small{padding:5px 9px}