: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 .34s cubic-bezier(.35,.9,.35,1.1);display:block;position:relative}.disc.black{transform:rotateY(0)}.disc.white{transform:rotateY(180deg)}.disc-face{backface-visibility:hidden;border-radius:50%;animation:.3s cubic-bezier(.3,1.5,.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;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:space-between;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}.home-deco{pointer-events:none;z-index:-1;position:absolute;inset:0;overflow:hidden}.home-deco svg{opacity:.28;position:absolute}.home-deco .deco-a{width:120px;top:7%;left:-2%;transform:rotate(-12deg)}.home-deco .deco-b{opacity:.22;width:96px;top:15%;right:-1%;transform:rotate(16deg)}.home-deco .deco-c{opacity:.2;width:86px;bottom:8%;left:5%;transform:rotate(9deg)}.home-deco .deco-d{opacity:.24;width:112px;bottom:12%;right:3%;transform:rotate(-6deg)}.home-buttons{flex-direction:column;align-items:center;gap:16px;display:flex}.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}}