:root{--cream-1:#fffaf0;--cream-2:#fdf1d9;--cream-3:#f6e3c2;--wood-1:#c48a4d;--wood-2:#a4672f;--wood-3:#7d4a1d;--wood-4:#57310f;--felt-1:#3faa63;--felt-2:#2f8b4e;--felt-3:#1f6b39;--felt-line:#16512b;--disc-black-1:#5b5f6b;--disc-black-2:#24262e;--disc-black-3:#0c0d12;--disc-white-1:#fff;--disc-white-2:#f2eee4;--disc-white-3:#cfc7b4;--sun-1:#ffc247;--sun-2:#f79a1b;--sun-3:#cf6f06;--grass-1:#6ed07f;--grass-2:#35a95c;--grass-3:#1f7d40;--berry-1:#ff9aa8;--berry-2:#e75d76;--ink:#3d2a15;--ink-soft:#6b5236;--radius-lg:24px;--radius-md:16px;--radius-sm:10px;--board-size:min(92vw, 62vh, 560px);--board-pad:clamp(8px, 2.2vw, 18px)}@supports (height:1dvh){:root{--board-size:min(92vw, 62dvh, 560px)}}*{box-sizing:border-box;margin:0}html,body{overflow-x:hidden}body{color:var(--ink);background-color:var(--cream-2);background-image:radial-gradient(ellipse 70% 50% at 50% -5%, #fffffff2, #fff0 70%), radial-gradient(ellipse 60% 45% at 12% 105%, #6ed07f47, #6ed07f00 70%), radial-gradient(ellipse 60% 45% at 92% 92%, #ffc2474d, #ffc24700 70%), linear-gradient(170deg, var(--cream-1), var(--cream-2) 45%, var(--cream-3));-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;background-attachment:fixed;font-family:Hiragino Maru Gothic ProN,ヒラギノ丸ゴ ProN W4,BIZ UDPGothic,Hiragino Kaku Gothic ProN,Yu Gothic Medium,Meiryo,system-ui,-apple-system,Segoe UI,sans-serif}.screen{flex-direction:column;justify-content:center;align-items:center;gap:clamp(10px,2vw,16px);max-width:640px;min-height:100dvh;margin:0 auto;padding:clamp(10px,2.4vw,20px);display:flex;position:relative}h1{letter-spacing:.04em;text-align:center;color:#2f7d45;text-shadow:0 1px #fff,0 2px #ffffffb3,0 3px #a0783c47,0 6px 14px #78501e38;font-size:clamp(1.9rem,7vw,3rem);line-height:1.25}h2{color:var(--ink-soft);letter-spacing:.06em;text-align:center;align-items:center;gap:10px;font-size:clamp(1.05rem,3.4vw,1.35rem);font-weight:700;display:flex}h2:before,h2:after{content:"";background:linear-gradient(90deg,#b48c5a00,#b48c5a80);border-radius:3px;width:clamp(18px,6vw,44px);height:3px}h2:after{background:linear-gradient(90deg,#b48c5a80,#b48c5a00)}.title-wrap{flex-direction:column;align-items:center;gap:8px;display:flex}.title-deco{filter:drop-shadow(0 4px 8px #78501e40);width:clamp(150px,46vw,230px);height:auto;display:block}.title-sub{letter-spacing:.3em;color:var(--ink-soft);opacity:.75;font-size:clamp(.8rem,2.6vw,.95rem)}.btn,.big-btn{color:var(--ink);cursor:pointer;touch-action:manipulation;background-repeat:no-repeat;border-style:solid;font-family:inherit;font-weight:700;transition:transform .14s,box-shadow .14s,background-color .14s;position:relative}.big-btn{letter-spacing:.05em;border-radius:var(--radius-lg);background-image:linear-gradient(#fff,#fdf3e0 60%,#f6e6cb);border-width:3px;border-color:#b98f57;min-width:260px;min-height:68px;padding:12px 28px;font-size:clamp(1.25rem,4.4vw,1.55rem);box-shadow:inset 0 2px #ffffffe6,inset 0 -6px 10px #b48c5a1f,0 6px #cba470,0 10px 18px #78501e3d}.btn{border-radius:var(--radius-md);background-image:linear-gradient(#fff,#fbf4e6 60%,#f3e8d3);border-width:3px;border-color:#c6a97f;min-width:104px;min-height:52px;padding:8px 18px;font-size:clamp(1rem,3.2vw,1.15rem);box-shadow:inset 0 2px #ffffffe6,0 4px #d6bb95,0 7px 12px #78501e2e}.big-btn.primary{color:#fffdf7;background-image:linear-gradient(180deg, #7fdc95, var(--grass-2) 45%, #1f8a45);text-shadow:0 2px 3px #0c3c1c73;border-color:#176b37;box-shadow:inset 0 2px #ffffff80,inset 0 -7px 12px #0a3c1a40,0 6px #145c30,0 12px 20px #145a2d52}.big-btn.action{color:#fffaf0;background-image:linear-gradient(180deg, #ffd06a, var(--sun-2) 45%, #e07a09);text-shadow:0 2px 3px #6e370073;border-color:#b45c05;box-shadow:inset 0 2px #ffffff8c,inset 0 -7px 12px #783c0038,0 6px #b4600a,0 12px 20px #96550a52}.big-btn.caution{color:#fff7f8;background-image:linear-gradient(180deg, #ffa8b6, var(--berry-2) 48%, #cf465f);text-shadow:0 2px 3px #6e142366;border-color:#b1354b;box-shadow:inset 0 2px #ffffff80,inset 0 -7px 12px #6e142333,0 6px #a83249,0 12px 20px #9632464d}.big-btn:active:not(:disabled){transform:translateY(5px);box-shadow:inset 0 2px #ffffffb3,inset 0 -4px 8px #0000001f,0 1px #0000002e,0 3px 8px #78501e38}.btn:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 2px #ffffffb3,0 1px #00000026,0 2px 6px #78501e2e}.btn:disabled,.big-btn:disabled{color:#6a6156;text-shadow:none;cursor:default;background-image:linear-gradient(#f4f0e8,#e9e3d7);border-color:#cfc6b6;box-shadow:inset 0 2px #ffffffb3,0 4px #dcd5c7}.btn.selected{color:#4a2d05;background-image:linear-gradient(#ffeaa8,#ffd05f 55%,#f7b32b);border-color:#c98b12;box-shadow:inset 0 2px #ffffffd9,inset 0 -5px 10px #be820a33,0 4px #d59a12,0 8px 14px #be8c144d,0 0 0 4px #ffd05f59}.btn.selected:after{content:"";background-color:#2b9c52;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),linear-gradient(#6fdc8c,#2b9c52);background-repeat:no-repeat;background-size:100% 100%,100% 100%;border:2px solid #fff;border-radius:50%;width:24px;height:24px;position:absolute;top:-10px;right:-10px;box-shadow:0 2px 5px #1e5a2d66}.btn.ghost:not(:disabled){color:var(--ink-soft);box-shadow:none;background-color:#0000;background-image:none;border-color:#b8a075}.btn.ghost:not(:disabled):active{background-color:#b4966424}.controls{flex-wrap:wrap;justify-content:center;gap:clamp(8px,2.2vw,14px);display:flex}.btn.color-pick{align-items:center;gap:10px;display:inline-flex}.disc{width:82%;height:82%;transform-style:preserve-3d;border-radius:50%;margin:9%;transition:transform .54s cubic-bezier(.35,.86,.35,1.08);display:block;position:relative}.disc.flipping{transition-delay:var(--flip-delay,0s);animation:disc-flip-lift .54s ease-out var(--flip-delay,0s) both}@keyframes disc-flip-lift{0%{scale:1}45%{scale:1.14}to{scale:1}}.disc.black{transform:rotateY(0)}.disc.white{transform:rotateY(180deg)}.disc-face{backface-visibility:hidden;border-radius:50%;animation:.44s cubic-bezier(.3,1.45,.5,1) both disc-pop;position:absolute;inset:0}.disc-face.face-black{background:radial-gradient(circle at 32% 26%, #ffffff8c, #fff0 42%), radial-gradient(circle at 50% 115%, #ffffff29, #fff0 55%), radial-gradient(circle at 38% 32%, var(--disc-black-1), var(--disc-black-2) 55%, var(--disc-black-3));box-shadow:inset 0 -3px 6px #0009,inset 0 2px 3px #ffffff38,0 3px 5px #00000073}.disc-face.face-white{background:radial-gradient(circle at 32% 26%, #fff, #fff0 45%), radial-gradient(circle at 38% 32%, var(--disc-white-1), var(--disc-white-2) 58%, var(--disc-white-3));transform:rotateY(180deg);box-shadow:inset 0 -3px 6px #78644666,inset 0 2px 3px #fffffff2,0 3px 5px #00000059}.disc-face:after{content:"";filter:blur(.5px);pointer-events:none;background:linear-gradient(#ffffffbf,#fff0);border-radius:50%;width:40%;height:26%;position:absolute;top:12%;left:18%}.disc-face.face-black:after{background:linear-gradient(#ffffff6b,#fff0)}@keyframes disc-pop{0%{opacity:0;scale:.35}60%{opacity:1;scale:1.12}to{opacity:1;scale:1}}.disc-icon{vertical-align:-.18em;border-radius:50%;flex:none;width:1.15em;height:1.15em;display:inline-block}.disc-icon.black{background:radial-gradient(circle at 34% 28%, #ffffff80, #fff0 45%), radial-gradient(circle at 38% 32%, var(--disc-black-1), var(--disc-black-2) 55%, var(--disc-black-3));box-shadow:inset 0 -2px 3px #0000008c,0 1px 2px #00000059}.disc-icon.white{background:radial-gradient(circle at 34% 28%, #fff, #fff0 48%), radial-gradient(circle at 38% 32%, var(--disc-white-1), var(--disc-white-2) 58%, var(--disc-white-3));box-shadow:inset 0 -2px 3px #78644659,inset 0 0 0 1px #8c785a59,0 1px 2px #00000040}.board-frame{width:var(--board-size);padding:var(--board-pad);border-radius:var(--radius-lg);background-image:repeating-linear-gradient(92deg, #ffffff0f 0 3px, #0000000d 3px 7px, #fff0 7px 13px), linear-gradient(160deg, var(--wood-1), var(--wood-2) 45%, var(--wood-3));box-shadow:inset 0 2px 0 #ffe2be99, inset 0 -3px 0 #3c1e0573, 0 10px 0 var(--wood-4), 0 18px 30px #502d0a61, 0 2px 4px #0003}.othello-board{aspect-ratio:1;background:var(--felt-line);border-radius:8px;grid-template-columns:repeat(8,1fr);gap:2px;width:100%;padding:3px;display:grid;position:relative;box-shadow:inset 0 0 0 2px #143c22e6,inset 0 4px 12px #0000008c,0 1px #ffe6c859}.othello-board:after{content:"";pointer-events:none;background-image:radial-gradient(circle at 25% 25%,#062814d9 0 3px,#0000 3.5px),radial-gradient(circle at 75% 25%,#062814d9 0 3px,#0000 3.5px),radial-gradient(circle at 25% 75%,#062814d9 0 3px,#0000 3.5px),radial-gradient(circle at 75% 75%,#062814d9 0 3px,#0000 3.5px);border-radius:6px;position:absolute;inset:3px}.othello-cell{perspective:500px;touch-action:manipulation;background-color:var(--felt-2);background-image:radial-gradient(ellipse 120% 90% at 50% 0%, #ffffff24, #fff0 65%), linear-gradient(180deg, var(--felt-1), var(--felt-2) 55%, var(--felt-3));border:none;border-radius:3px;padding:0;transition:background-color .16s;position:relative;box-shadow:inset 0 1px #fff3,inset 0 -2px 4px #00000047}.othello-cell.hint{background-image:radial-gradient(circle at 50% 50%, #fffce22e, #fffce200 58%), linear-gradient(180deg, var(--felt-1), var(--felt-2) 55%, var(--felt-3))}.othello-cell.hint:before{content:"";pointer-events:none;z-index:1;background:radial-gradient(circle at 38% 32%,#ffd682b3 0%,#d694228c 60%,#a35c0080 100%);border-radius:50%;width:34%;height:34%;margin:-17% 0 0 -17%;animation:2.2s ease-in-out infinite hint-pulse;position:absolute;top:50%;left:50%;box-shadow:0 0 0 2px #ffffff40}@keyframes hint-pulse{0%,to{opacity:.55;scale:.9}50%{opacity:.8;scale:1}}.othello-cell.hint:active:before{animation:none;scale:1.25}.status-bar{width:var(--board-size);justify-content:center;align-items:stretch;gap:clamp(6px,1.6vw,12px);font-size:clamp(.95rem,3vw,1.2rem);display:flex}.score{min-height:52px;color:var(--ink);background-image:linear-gradient(#fffdf8,#f6ead4);border:3px solid #d9bd92;border-radius:999px;align-items:center;gap:8px;padding:8px clamp(10px,2.2vw,16px);font-weight:700;transition:transform .16s,box-shadow .16s,border-color .16s;display:flex;box-shadow:inset 0 2px #ffffffe6,0 3px #dcc49e,0 6px 12px #78501e29}.score.active{background-image:linear-gradient(#fff7dd,#ffe6ac);border-color:#f0a824;transform:translateY(-2px);box-shadow:inset 0 2px #fffffff2,0 3px #e0a831,0 6px 14px #dc961452,0 0 0 4px #ffcd5a66}.score-label{letter-spacing:.02em;white-space:nowrap;font-size:.82em}.score-you{color:#fffaf0;white-space:nowrap;background-image:linear-gradient(#ff9fb0,#e2566f);border-radius:999px;padding:2px 7px;font-size:.72em;box-shadow:0 1px 2px #8c283c59}.score-num{text-align:center;color:#2f7d45;font-variant-numeric:tabular-nums;min-width:1.3em;font-size:1.35em;font-weight:800}.turn-pill{text-align:center;color:#fffdf7;text-shadow:0 1px 2px #0a371980;background-image:linear-gradient(#6bd089,#2f9a55 55%,#1f7d40);border:3px solid #17703a;border-radius:999px;justify-content:center;align-items:center;min-height:52px;padding:8px clamp(8px,2vw,14px);font-size:.95em;font-weight:700;line-height:1.15;display:flex;box-shadow:inset 0 2px #fff6,0 3px #175f31,0 6px 12px #195f324d}.turn-pill.waiting{color:#4a3a22;text-shadow:none;background-image:linear-gradient(#fdf6e6,#ece0c8);border-color:#cbb086;box-shadow:inset 0 2px #ffffffe6,0 3px #d6c3a1,0 6px 12px #78501e24}.overlay{z-index:20;-webkit-backdrop-filter:blur(6px)saturate(1.05);backdrop-filter:blur(6px)saturate(1.05);background:radial-gradient(#1c10046b,#140a02ad);justify-content:center;align-items:center;padding:16px;animation:.22s both overlay-in;display:flex;position:fixed;inset:0}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.dialog{text-align:center;background-image:radial-gradient(90% 60% at 50% 0,#fffdf6,#fffdf600 70%),linear-gradient(175deg,#fffaf0,#fdf2dd 60%,#f8e8cd);border:4px solid #fff;border-radius:30px;flex-direction:column;align-items:center;gap:clamp(12px,2.6vw,18px);max-width:min(92vw,440px);padding:clamp(20px,4vw,30px);animation:.26s cubic-bezier(.25,1.35,.5,1) both dialog-in;display:flex;position:relative;box-shadow:inset 0 3px #ffffffe6,0 10px #be9b6e8c,0 22px 46px #28160573}@keyframes dialog-in{0%{opacity:0;transform:translateY(16px)scale(.92)}to{opacity:1;transform:translateY(0)scale(1)}}.dialog p{color:var(--ink-soft);font-size:clamp(1rem,3.2vw,1.15rem);line-height:1.6}.dialog h2{color:var(--ink)}.dialog label{text-align:left;border-radius:var(--radius-md);touch-action:manipulation;background:#ffffffb3;border:2px solid #e3d2b2;align-items:center;gap:12px;width:100%;min-height:44px;padding:6px 14px;font-size:clamp(1.02rem,3.2vw,1.2rem);font-weight:700;display:flex}.dialog input[type=checkbox]{accent-color:#2f9a55;touch-action:manipulation;flex:none;width:28px;height:28px}.dialog label.row-disabled{color:#6a6156}.dialog input[type=checkbox]:disabled{opacity:.55;accent-color:#9c9284}.dialog p.resign-note{color:var(--ink-soft);opacity:.85;font-size:clamp(.82rem,2.5vw,.92rem);line-height:1.4}.result{letter-spacing:.06em;font-size:clamp(2.2rem,9vw,3.2rem);font-weight:800;line-height:1.2}.result:before,.result:after{display:none}.result.win{color:#e5720a;text-shadow:0 2px #fff,0 4px #be781459,0 8px 18px #dc8c1466;animation:.36s cubic-bezier(.25,1.5,.45,1) both result-pop}.result.lose{color:#5b7fa8;text-shadow:0 2px #fff,0 4px 10px #46648c47}.result.draw{color:#6b8f4e;text-shadow:0 2px #fff,0 4px 10px #5a783c40}@keyframes result-pop{0%{opacity:0;transform:scale(.5)rotate(-6deg)}to{opacity:1;transform:scale(1)rotate(0)}}.starburst{opacity:.85;pointer-events:none;z-index:-1;background:repeating-conic-gradient(#ffcd5a8c 0deg 9deg,#ffcd5a00 9deg 24deg);border-radius:50%;width:260px;height:260px;margin:-130px 0 0 -130px;animation:.38s ease-out both burst-in;position:absolute;top:clamp(56px,12vw,78px);left:50%;-webkit-mask-image:radial-gradient(circle,#000 12%,#0009 45%,#0000 70%);mask-image:radial-gradient(circle,#000 12%,#0009 45%,#0000 70%)}@keyframes burst-in{0%{opacity:0;transform:scale(.3)rotate(-25deg)}to{opacity:1;transform:scale(1)rotate(0)}}.confetti{pointer-events:none;height:0;position:absolute;inset:-60px -20px auto;overflow:visible}.confetti i{opacity:0;border-radius:3px;width:12px;height:16px;animation:.4s ease-in forwards confetti-drop;position:absolute;top:0}@keyframes confetti-drop{0%{opacity:0;transform:translateY(0)rotate(0)scale(.6)}25%{opacity:1}80%{opacity:1}to{opacity:0;transform:translateY(230px)rotate(240deg)scale(1)}}.confetti i:first-child{background:#ff8fa3;animation-delay:20ms;left:4%}.confetti i:nth-child(2){background:#ffd05f;animation-delay:.12s;left:14%}.confetti i:nth-child(3){background:#6ed07f;animation-delay:60ms;left:24%}.confetti i:nth-child(4){background:#7cc6ff;animation-delay:.18s;left:34%}.confetti i:nth-child(5){background:#ffb066;animation-delay:0s;left:44%}.confetti i:nth-child(6){background:#c79bff;animation-delay:.14s;left:54%}.confetti i:nth-child(7){background:#ff8fa3;animation-delay:80ms;left:64%}.confetti i:nth-child(8){background:#6ed07f;animation-delay:.2s;left:74%}.confetti i:nth-child(9){background:#ffd05f;animation-delay:40ms;left:84%}.confetti i:nth-child(10){background:#7cc6ff;animation-delay:.16s;left:94%}.confetti i:nth-child(11){background:#ffd05f;animation-delay:.24s;left:30%}.confetti i:nth-child(12){background:#ff8fa3;animation-delay:.26s;left:70%}.final-score{color:var(--ink);background:#ffffffbf;border:3px solid #e6d3b2;border-radius:999px;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;padding:10px 16px;font-size:clamp(1rem,3.2vw,1.15rem);font-weight:700;display:flex}.final-score .score-num{font-size:1.25em}.final-dash{color:var(--ink-soft);opacity:.7}.game-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(12px,2.4vw,20px);width:min(94vw,760px);display:grid}.game-card{cursor:pointer;touch-action:manipulation;border-radius:var(--radius-lg);background-image:linear-gradient(#fff,#fdf3e0 60%,#f6e6cb);border:3px solid #c6a97f;flex-direction:column;align-items:center;gap:6px;padding:12px 12px 14px;font-family:inherit;transition:transform .14s,box-shadow .14s;display:flex;box-shadow:inset 0 2px #ffffffe6,0 6px #cba470,0 10px 18px #78501e38}.game-card:active{transform:translateY(4px);box-shadow:inset 0 2px #ffffffb3,0 2px #cba470,0 4px 8px #78501e33}.game-card-visual{border-radius:var(--radius-md);justify-content:center;align-items:center;width:100%;height:clamp(96px,15vh,128px);display:flex;position:relative;overflow:hidden;box-shadow:inset 0 2px 6px #3c1e0540}.visual-othello{background:radial-gradient(120% 120% at 30% 20%,#4db571,#1f6b39)}.visual-shogi{background:repeating-linear-gradient(92deg,#92602214 0 2px,#fff4d60f 2px 5px,#92602200 5px 12px),linear-gradient(170deg,#f3dca4,#dfc084)}.visual-runner{background:linear-gradient(#1b2450,#453a6e 55%,#b56a56 88%,#efa06e)}.thumb-svg{width:82%;height:88%}.thumb-runner{justify-content:center;align-items:flex-end;width:100%;height:100%;padding-bottom:10px;display:flex;position:relative}.thumb-runner .pixel-art{animation:2.4s ease-in-out infinite hero-bob}.thumb-moon{background:#ffe9a8;border-radius:50%;width:18px;height:18px;position:absolute;top:10px;right:16px;box-shadow:inset -4px -2px 0 2px #453a6e,0 0 10px #ffe9a8cc}.thumb-ground{background:linear-gradient(#7fae56,#5c4132 45%);height:10px;position:absolute;bottom:0;left:0;right:0}.game-card-title{color:var(--ink);letter-spacing:.03em;word-break:keep-all;text-align:center;font-size:clamp(1.05rem,3.4vw,1.3rem);font-weight:800}.game-card-lede{color:var(--ink-soft);font-size:clamp(.8rem,2.4vw,.9rem)}.setup-card{background-image:linear-gradient(175deg,#ffffffeb,#fff9ecc7);border:3px solid #ffffffe6;border-radius:28px;flex-direction:column;align-items:center;gap:clamp(10px,2.2vw,16px);width:min(96vw,480px);padding:clamp(16px,3.4vw,26px);display:flex;box-shadow:inset 0 2px #ffffffe6,0 8px #c8a87a59,0 16px 30px #78501e33}@media (orientation:landscape) and (height<=560px){.screen{gap:8px}.big-btn{min-height:56px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}.othello-cell.hint:before{opacity:.7;scale:1}}.online-section{background:#ffffff8c;border-radius:16px;flex-direction:column;align-items:center;gap:12px;width:min(92vw,420px);padding:16px;display:flex;box-shadow:0 1px 4px #00000014}.online-row{gap:10px;width:100%;display:flex}.online-input{background:#fffdf7;border:2px solid #cdbfa5;border-radius:12px;flex:1;min-width:0;min-height:52px;padding:0 14px;font-size:1.2rem}.online-error{color:#b3402a;text-align:center;max-width:min(92vw,420px);font-size:1.05rem}.online-wait{color:#6a6156;font-size:1.05rem}.room-code{letter-spacing:.15em;color:var(--felt-3);background:#fffdf7;border:3px dashed #cdbfa5;border-radius:16px;padding:12px 28px;font-size:3rem;font-weight:700}.thinking-dots{vertical-align:baseline;gap:4px;margin-left:6px;display:inline-flex}.thinking-dots i{opacity:.85;background:currentColor;border-radius:50%;width:6px;height:6px;animation:1.2s ease-in-out infinite thinking-bounce}.thinking-dots i:nth-child(2){animation-delay:.2s}.thinking-dots i:nth-child(3){animation-delay:.4s}@keyframes thinking-bounce{0%,60%,to{opacity:.45;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}.othello-cell.last{box-shadow:inset 0 0 0 3px #ffde8299,inset 0 1px #fff3}:root{--shogi-board-1:#f6dfa8;--shogi-board-2:#efd193;--shogi-board-3:#e0bb75;--shogi-line:#482c10e6;--koma-edge-1:#dcae66;--koma-edge-2:#b98b45;--koma-face-1:#fdf2cf;--koma-face-2:#f8e4ab;--koma-face-3:#edd08a;--shogi-ink:#241505;--shogi-red:#a81d16;--lastmove-face-1:#ffe4a0;--lastmove-face-2:#ffc468;--lastmove-face-3:#f0a941;--lastmove-edge-1:#d68f2c;--lastmove-edge-2:#a76512;--koma-shape:polygon(50% 0%, 82% 14%, 97% 100%, 3% 100%, 18% 14%)}.shogi-wrap{flex-direction:column;align-items:center;gap:clamp(6px,1.6vw,12px);width:100%;display:flex}.shogi-board{--cell:calc((var(--board-size) - 2 * var(--board-pad)) / 9);aspect-ratio:1;background-color:var(--shogi-board-2);background-image: repeating-linear-gradient(91.5deg, #9260220d 0 1px, #fff4d60d 1px 3px, #92602200 3px 9px), radial-gradient(120% 80% at 25% 15%, #fff8de80, #fff8de00 60%), linear-gradient(177deg, var(--shogi-board-1), var(--shogi-board-2) 55%, var(--shogi-board-3));width:100%;box-shadow:inset 0 0 0 1.5px var(--shogi-line), inset 0 3px 14px #603a1040, inset 0 -2px 8px #603a102e, 0 1px 0 #ffeecd80;border-radius:3px;grid-template-rows:repeat(9,1fr);grid-template-columns:repeat(9,1fr);gap:0;display:grid;position:relative}.shogi-board:before{content:"";pointer-events:none;background-image:radial-gradient(circle 2.6px at center, var(--shogi-line) 94%, transparent), radial-gradient(circle 2.6px at center, var(--shogi-line) 94%, transparent), radial-gradient(circle 2.6px at center, var(--shogi-line) 94%, transparent), radial-gradient(circle 2.6px at center, var(--shogi-line) 94%, transparent), linear-gradient(to right, var(--shogi-line) 0 1px, transparent 1px), linear-gradient(to bottom, var(--shogi-line) 0 1px, transparent 1px);background-position:33.333% 33.333%,66.667% 33.333%,33.333% 66.667%,66.667% 66.667%,0 0,0 0;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat,repeat;background-size:7px 7px,7px 7px,7px 7px,7px 7px,11.1111% 11.1111%,11.1111% 11.1111%;position:absolute;inset:0}.shogi-cell{touch-action:manipulation;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:0;transition:box-shadow .16s;display:flex;position:relative}.shogi-cell.hint:before{content:"";pointer-events:none;z-index:1;background:radial-gradient(circle at 38% 32%,#78d2dcd9 0%,#1e8296a6 60%,#0a5a6e8c 100%);border-radius:50%;width:32%;height:32%;margin:-16% 0 0 -16%;animation:2.2s ease-in-out infinite hint-pulse;position:absolute;top:50%;left:50%;box-shadow:0 0 0 2px #ffffff59}.shogi-cell.hint:active:before{animation:none;scale:1.25}.shogi-cell.selected{box-shadow:inset 0 0 0 3px #f0a824d9,inset 0 1px #ffffff4d}.shogi-cell.last-to .koma{background-image:linear-gradient(172deg, var(--lastmove-edge-1), var(--lastmove-edge-2))}.shogi-cell.last-to .koma-face{background-color:var(--lastmove-face-2);background-image:repeating-linear-gradient(93deg, #9664280e 0 1px, #fff0 1px 4px), linear-gradient(172deg, var(--lastmove-face-1), var(--lastmove-face-2) 52%, var(--lastmove-face-3))}.koma-ghost{filter:grayscale(.35);pointer-events:none;animation:1.2s ease-out 5s both koma-ghost-fade}@keyframes koma-ghost-fade{0%{opacity:.3}to{opacity:0}}.koma-ghost .koma-face{box-shadow:inset 0 0 0 1.5px #462d0f80}.koma{width:80%;height:86%;clip-path:var(--koma-shape);background-image:linear-gradient(172deg, var(--koma-edge-1), var(--koma-edge-2));filter:drop-shadow(0 1.5px 1.5px #4a280873);-webkit-user-select:none;user-select:none;pointer-events:none;position:relative}.koma-face{clip-path:var(--koma-shape);font-family:Hiragino Mincho ProN,Hiragino Mincho Pro,Yu Mincho,YuMincho,Noto Serif CJK JP,Noto Serif JP,Source Han Serif JP,serif;font-weight:600;font-size:calc(var(--cell,3rem) * .5);color:var(--shogi-ink);background-color:var(--koma-face-2);background-image:repeating-linear-gradient(93deg, #9664280e 0 1px, #fff0 1px 4px), linear-gradient(172deg, var(--koma-face-1), var(--koma-face-2) 52%, var(--koma-face-3));justify-content:center;align-items:center;padding-top:5%;line-height:1;display:flex;position:absolute;inset:6%}.koma-king{width:88%;height:93%}.koma-rook,.koma-bishop{width:84%;height:90%}.koma-pawn{width:75%;height:81%}.koma.rotated{transform:rotate(180deg)}.koma.promoted .koma-face{color:var(--shogi-red)}.koma-sliding{animation:.44s cubic-bezier(.32,.86,.3,1) both koma-slide}@keyframes koma-slide{0%{translate:calc(var(--dx) * var(--cell)) calc(var(--dy) * var(--cell))}to{translate:0}}.koma-dropping{animation:.48s cubic-bezier(.3,1.35,.5,1) both koma-drop}@keyframes koma-drop{0%{translate:0 calc(var(--cell) * -.5);opacity:0;scale:1.25}60%{opacity:1}to{opacity:1;translate:0;scale:1}}.shogi-cell.captured:after{content:"";pointer-events:none;border-radius:2px;animation:.95s ease-out both koma-capture;position:absolute;inset:0}@keyframes koma-capture{0%{background:radial-gradient(circle,#ffd678f2,#ff963c80 70%,#0000);scale:1.18;box-shadow:inset 0 0 0 3px #ffb03cf2}to{background:radial-gradient(circle,#ffd67800,#ff963c00 70%,#0000);scale:1;box-shadow:inset 0 0 0 3px #ffb03c00}}@media (prefers-reduced-motion:reduce){.koma-sliding,.koma-dropping,.shogi-cell.captured:after{animation:none}}.hand-tray{min-height:52px;width:var(--board-size);background-color:#e9cb9c;background-image:repeating-linear-gradient(92deg,#9260220d 0 1px,#fff4d60f 1px 3px,#92602200 3px 10px),linear-gradient(176deg,#f1d6ab,#e6c493 55%,#d8b177);border-radius:10px;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;padding:6px clamp(8px,2vw,14px);display:flex;box-shadow:inset 0 1px #fff6e0d9,inset 0 -2px 5px #603a1033,0 2px 5px #603a102e}.hand-empty{color:var(--ink-soft);opacity:.75;font-size:.9rem}.hand-slot{border-radius:var(--radius-sm);touch-action:manipulation;cursor:default;background:0 0;border:2px solid #0000;align-items:center;gap:4px;min-width:44px;min-height:44px;padding:4px 10px;font-family:inherit;display:inline-flex}.hand-slot.hand-slot-static{opacity:.92}button.hand-slot{cursor:pointer;border-color:#b48c5a4d}button.hand-slot:active{background:#f0a82429}button.hand-slot.selected{background:#ffd05f59;border-color:#d59a12;box-shadow:0 0 0 3px #ffd05f59}.hand-slot .koma{flex:none;width:29px;height:33px;position:relative}.hand-slot .koma-face{padding-top:4%;font-size:.95rem}.hand-count{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}.promotion-preview{justify-content:center;align-items:center;gap:clamp(10px,3vw,18px);display:flex}.promo-glyph{color:var(--shogi-ink);font-size:clamp(1.8rem,8vw,2.6rem);font-weight:800;line-height:1}.promo-glyph.promoted{color:var(--shogi-red)}.promo-arrow{color:var(--ink-soft);font-size:clamp(1.3rem,5vw,1.8rem)}.pill.check-pill{color:#fff7f8;background-image:linear-gradient(180deg, #ffa8b6, var(--berry-2) 55%, #cf465f);text-shadow:0 1px 2px #6e142366;border:2px solid #b1354b;border-radius:999px;justify-content:center;align-items:center;min-height:36px;padding:4px 20px;font-size:1rem;font-weight:800;animation:.26s cubic-bezier(.25,1.5,.45,1) both check-pop;display:inline-flex;box-shadow:0 3px #a83249,0 6px 12px #9632464d}@keyframes check-pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.shogi-cell.hint:before{opacity:.7;scale:1}}.board-stage{width:var(--board-size);flex-direction:column;align-items:center;display:flex;position:relative}.board-stage.thinking:after{content:"";pointer-events:none;border-radius:var(--radius-lg);animation:2s ease-in-out infinite thinking-frame;position:absolute;inset:0}@keyframes thinking-frame{0%,to{box-shadow:inset 0 0 0 3px #f0a82447,inset 0 0 22px #f0a8241a}50%{box-shadow:inset 0 0 0 3px #f0a824a8,inset 0 0 34px #f0a8243d}}.turn-bar{width:var(--board-size);flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-height:60px;padding:4px 8px;display:flex}.turn-pill{text-align:center;border-radius:999px;justify-content:center;align-items:center;gap:8px;min-height:48px;padding:8px clamp(12px,3vw,20px);font-size:clamp(1rem,3.2vw,1.2rem);font-weight:700;line-height:1.15;display:inline-flex}.turn-pill.mine{color:#fffdf7;text-shadow:0 1px 2px #0a371980;background-image:linear-gradient(#6bd089,#2f9a55 55%,#1f7d40);border:3px solid #17703a;box-shadow:inset 0 2px #fff6,0 3px #175f31,0 6px 12px #195f324d}.turn-pill.busy,.turn-pill.done{color:var(--ink);background-image:linear-gradient(#fffdf6,#f5e8cf);border:3px solid #ddc39b;box-shadow:inset 0 2px #ffffffe6,0 3px #d9bd92,0 5px 10px #78501e29}.thinking-spinner{border:4px solid #78552340;border-top-color:#e0932a;border-radius:50%;flex:none;width:20px;height:20px;animation:.9s linear infinite thinking-spin}@keyframes thinking-spin{to{rotate:360deg}}.notice-chip{border-radius:999px;align-items:center;min-height:40px;padding:4px 16px;font-size:clamp(.9rem,2.8vw,1.05rem);font-weight:700;animation:.22s cubic-bezier(.3,1.4,.5,1) both notice-in;display:inline-flex}.notice-chip.check{color:#fff7f8;background-image:linear-gradient(180deg, #ffa8b6, var(--berry-2) 55%, #cf465f);text-shadow:0 1px 2px #6e142366;border:2px solid #b1354b}.notice-chip.warn{color:#4a3410;background-image:linear-gradient(#fff2cd,#ffe3a0);border:2px solid #dfae4c}@keyframes notice-in{0%{opacity:0;scale:.9}to{opacity:1;scale:1}}@media (prefers-reduced-motion:reduce){.thinking-spinner,.notice-chip,.board-stage.thinking:after,.disc.flipping{animation:none}.board-stage.thinking:after{box-shadow:inset 0 0 0 3px #f0a82499}}.btn.action{color:#fffaf0;background-image:linear-gradient(180deg, #ffd06a, var(--sun-2) 45%, #e07a09);text-shadow:0 1px 2px #6e370073;border-color:#b45c05;box-shadow:inset 0 2px #ffffff80,0 4px #b4600a,0 7px 12px #96550a47}.shogi-cell.movable .koma{filter:drop-shadow(0 1.5px 1.5px #4a280873)drop-shadow(0 0 4px #28aa5af2)}.runner-screen{gap:clamp(8px,1.6vw,14px)}.runner-title{color:#b05a2a;line-height:1.3}.pixel-art{image-rendering:pixelated}.runner-hero{filter:drop-shadow(0 6px 12px #3c1e0a59);animation:2.4s ease-in-out infinite hero-bob}@keyframes hero-bob{0%,to{translate:0;rotate:-2deg}50%{translate:0 -6px;rotate:2deg}}@media (prefers-reduced-motion:reduce){.runner-hero{animation:none}}.runner-cast{justify-content:center;align-items:flex-end;gap:12px;display:flex}.runner-cast canvas{filter:drop-shadow(0 4px 8px #3c1e0a4d)}.runner-lede{text-align:center;color:var(--ink);font-weight:700;line-height:1.8}.runner-help{text-align:center;color:var(--ink-soft);border-radius:var(--radius-md);background:#ffffff8c;padding:10px 18px;font-size:.95rem;line-height:1.9}.runner-canvas{aspect-ratio:16/9;width:min(96vw,720px);image-rendering:pixelated;background:#1b2450;border-radius:10px;box-shadow:0 0 0 4px #57310f,0 10px 24px #28140566}.runner-controls{justify-content:space-between;align-items:center;gap:8px;width:min(96vw,720px);display:flex}.runner-dpad,.runner-actions{gap:10px;display:flex}.runner-btn{min-width:72px;min-height:64px;color:var(--ink);border-radius:var(--radius-md);touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;background-image:linear-gradient(#fff,#fbf4e6 60%,#f3e8d3);border:3px solid #c6a97f;padding:8px 16px;font-family:inherit;font-size:1.15rem;font-weight:800;box-shadow:inset 0 2px #ffffffe6,0 4px #d6bb95,0 7px 12px #78501e2e}.runner-btn:active{transform:translateY(3px);box-shadow:inset 0 2px #ffffffb3,0 1px #00000026}.runner-btn.jump{color:#fffdf7;text-shadow:0 1px 2px #0a371980;background-image:linear-gradient(#6bd089,#2f9a55 55%,#1f7d40);border-color:#17703a;box-shadow:inset 0 2px #fff6,0 4px #175f31,0 7px 12px #195f324d}.runner-btn.attack{color:#fffaf0;text-shadow:0 1px 2px #6e370073;background-image:linear-gradient(#ffd06a,#f79a1b 55%,#e07a09);border-color:#b45c05;box-shadow:inset 0 2px #ffffff80,0 4px #b4600a,0 7px 12px #96550a47}.runner-pause{min-width:84px}.d10-screen{gap:clamp(8px,1.6vh,14px)}.d10-title{margin:0}.d10-demo{align-items:center;gap:10px;display:flex}.d10-demo .d10-block{width:54px;height:62px;font-size:1.7rem}.d10-demo-op{color:var(--ink-soft);font-size:1.5rem;font-weight:800}.d10-demo-ten{color:#c8860a;text-shadow:0 2px #fffc;font-size:2rem;font-weight:900;transform:rotate(-6deg)}.d10-block{color:#33243a;-webkit-user-select:none;user-select:none;background-clip:padding-box;border:2px solid #0000;border-radius:10px;justify-content:center;align-items:center;font-weight:900;display:inline-flex;position:relative}.d10-v1{background-color:#ffd2d6;background-image:linear-gradient(#ffffff8c,#fff0 55%)}.d10-v9{background-color:#f9909c;background-image:linear-gradient(#ffffff73,#fff0 55%)}.d10-v2{background-color:#ffe0b8;background-image:linear-gradient(#ffffff8c,#fff0 55%)}.d10-v8{background-color:#f7b24e;background-image:linear-gradient(#ffffff73,#fff0 55%)}.d10-v3{background-color:#d3edb6;background-image:linear-gradient(#ffffff8c,#fff0 55%)}.d10-v7{background-color:#8ecf6c;background-image:linear-gradient(#ffffff73,#fff0 55%)}.d10-v4{background-color:#cfe4ff;background-image:linear-gradient(#ffffff8c,#fff0 55%)}.d10-v6{background-color:#7fb7f0;background-image:linear-gradient(#ffffff73,#fff0 55%)}.d10-v5{background-color:#ddd0f5;background-image:linear-gradient(#ffffff8c,#fff0 55%)}.d10-hud{justify-content:space-between;align-items:center;gap:10px;width:min(92vw,40vh,380px);display:flex}.d10-hud-label{color:var(--ink-soft);font-size:.72rem;font-weight:700;display:block}.d10-score strong,.d10-best strong{color:var(--ink);font-size:1.25rem}.d10-next-block{width:34px;height:40px;font-size:1.1rem}.d10-pause-btn{min-height:44px}.d10-board{aspect-ratio:.58;border-radius:var(--radius-md);touch-action:none;cursor:pointer;background:repeating-linear-gradient(90deg,#8c64320d 0 16.6667%,#8c64321a 16.6667% 33.3333%),linear-gradient(#fffdf4,#f6ecd6);border:3px solid #c6a97f;width:min(88vw,30vh,320px);position:relative;overflow:hidden;box-shadow:inset 0 3px 10px #5a370f2e}.d10-cell{font-size:clamp(16px,3.4vh,26px);animation:.17s ease-out d10-pop;position:absolute}@keyframes d10-pop{0%{transform:scale(.6)}to{transform:scale(1)}}.d10-falling{z-index:2;filter:drop-shadow(0 4px 5px #50320a4d);flex-direction:column}.d10-hi{z-index:2;animation:.42s ease-in-out infinite alternate d10-hi-pulse}@keyframes d10-hi-pulse{0%{filter:brightness(1.08);transform:scale(1.02);box-shadow:inset 0 0 0 3px #ffbe28a6}to{filter:brightness(1.25);transform:scale(1.08);box-shadow:inset 0 0 0 4px #ffaa14}}.d10-fx{z-index:3;pointer-events:none;justify-content:center;align-items:center;font-weight:900;animation:.9s ease-out both d10-float;display:flex;position:absolute}.d10-fx-ten{color:#c8860a;text-shadow:0 0 6px #ffffffe6,0 2px #fffc;font-size:clamp(20px,4vh,30px)}.d10-fx-points{color:#1c7c3c;text-shadow:0 0 6px #ffffffe6;font-size:clamp(14px,2.6vh,20px)}@keyframes d10-float{0%{opacity:0;transform:translateY(6px)scale(.7)}25%{opacity:1;transform:translateY(0)scale(1.12)}to{opacity:0;transform:translateY(-26px)scale(1)}}.d10-notice{border-radius:var(--radius-md);background:#fffdf4bf;border:2px solid #c6a97f73;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:min(92vw,40vh,380px);min-height:56px;display:flex}.d10-notice-eq{color:var(--ink);font-size:1.35rem;font-weight:900}.d10-notice-sub{color:var(--ink-soft);font-size:.85rem;font-weight:700}.d10-notice.is-ten{background:#eaf9e6;border-color:#74c464}.d10-notice.is-ten .d10-notice-eq,.d10-notice.is-ten .d10-notice-sub{color:#1c7c3c}.d10-notice.is-over{background:#fdf1e2;border-color:#e0a35c}.d10-notice.is-over .d10-notice-eq,.d10-notice.is-over .d10-notice-sub{color:#a25f16}.d10-controls{align-items:center;gap:14px;display:flex}.d10-move{min-width:84px}.d10-drop{color:#fffdf7;text-shadow:0 1px 2px #0a371980;background-image:linear-gradient(#6bd089,#2f9a55 55%,#1f7d40);border-color:#17703a;min-width:128px;box-shadow:inset 0 2px #fff6,0 4px #175f31,0 7px 12px #195f324d}.d10-result-score strong{font-size:1.5rem}.d10-newbest{color:#c8860a;font-weight:900}.visual-drop10{background:linear-gradient(165deg,#fff3c9,#ffd98a)}.thumb-drop10{align-items:center;gap:7px;display:flex}.thumb-d10-block{width:36px;height:42px;font-size:1.25rem}.thumb-d10-op{color:#8a6a2a;font-size:1.1rem;font-weight:800}.thumb-d10-ten{color:#b3720a;text-shadow:0 1px #ffffffd9;font-size:1.5rem;font-weight:900;transform:rotate(-8deg)}