.reversi-page{max-width:1240px;margin:22px auto;padding:0 14px;color:#304c37}.reversi-page>h1{font-size:30px;margin:0 0 8px}.reversi-page>.kids-seo-lead{margin:0 0 20px}#host{container-type:inline-size;position:relative;isolation:isolate;aspect-ratio:16/9;overflow:hidden;background:#866338 url('./assets/room.webp') center/cover;border:4px solid #88552b;border-radius:18px;box-shadow:0 12px 30px #473b2b38;color:#304c37;font-family:'Zen Maru Gothic',sans-serif}#host *{box-sizing:border-box}#host [hidden]{display:none!important}#host p,#host h2{margin:0}#host button{font:900 clamp(12px,1.45cqw,22px)/1.25 'Zen Maru Gothic',sans-serif;min-height:34px;border:2px solid #b4925d;border-radius:11px;padding:.5em .7em;background:#fff4dc;color:#304c37;box-shadow:0 3px 0 #67432635;cursor:pointer;touch-action:manipulation}#host button:focus-visible{outline:4px solid #f2bd40;outline-offset:3px}#host button:disabled{cursor:default;opacity:.6}#host button[aria-pressed=true]{background:#356248;color:#fff4dc;border-color:#21452f}#host .primary{background:#b86225;color:#fff5dc;border-color:#924218}#base{height:100%;display:flex;flex-direction:column}.lodge-top{height:10%;min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 2%;gap:10px;background:#f8e9cde8;border-bottom:3px double #a17b47}.lodge-top>strong{font-size:2.4cqw;white-space:nowrap}.lodge-top nav{display:flex;gap:8px}.lodge-top button{font-size:1.25cqw!important;min-height:30px!important;padding:.4em .6em!important}#cover,#arena{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 38%;gap:3%;padding:3% 5%}.cover-board-space,#board-space{container-type:size;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0}.wood-board{position:relative;width:min(100%,100cqh);aspect-ratio:1;background:url('./assets/board.webp') center/100% 100%;padding:6%;border-radius:5px;box-shadow:0 7px 10px #2c1b2850;flex-shrink:0}.board-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));aspect-ratio:1;border-top:1px solid #183c26;border-left:1px solid #183c26}.cover-cell,#host #board>button{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;width:100%;height:100%;border:0;border-right:1px solid #183c26;border-bottom:1px solid #183c26;background:transparent;border-radius:0;padding:0;box-shadow:none;opacity:1}.disc{position:relative;display:inline-block;width:78%;aspect-ratio:1;border-radius:50%;box-shadow:inset 1px 1px 2px #fff8,2px 3px 2px #14241888;flex-shrink:0}.disc.black{background:radial-gradient(circle at 33% 25%,#62645e 0%,#252821 26%,#13150f 72%);border:1px solid #131a12}.disc.white{background:radial-gradient(circle at 33% 25%,#fffdf2 0%,#f1e9d4 42%,#cbc0a5 90%);border:1px solid #e8d7b7}.disc.flip{background:none!important;box-shadow:none;border:0;transform-style:preserve-3d;animation:turn-stone .5s ease both}.disc.flip>.disc{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden}.disc.flip>.back{transform:rotateY(180deg)}.disc.new{animation:place-stone .23s ease both}#board button.legal:after{content:'';width:28%;aspect-ratio:1;border:2px solid #f7d469;border-radius:50%;background:#f6d67c18;box-shadow:0 0 7px #f7d46b80}#board button.legal:hover{background:#ffefb21f!important}#host #board>button:focus-visible{z-index:3;outline:3px solid #ffdf80;outline-offset:-3px}#board button.last:before{content:'';position:absolute;width:9%;aspect-ratio:1;border-radius:50%;background:#da9632;z-index:2;bottom:6%;right:7%}.cover-paper,#side-panel{min-height:0;background:#fff4df url('./assets/paper.webp') center/100% 100%;padding:9% 7%;border-radius:8px;box-shadow:0 5px 9px #2c1b2844}.cover-paper{display:flex;flex-direction:column;justify-content:center;gap:7%;text-align:center}.cover-paper h2{font-size:2.65cqw;line-height:1.5}.mode-options,.diff-options{display:flex;gap:6px}.mode-options button,.diff-options button{flex:1;min-width:0;font-size:1.05cqw!important;padding:.5em .2em!important;min-height:30px!important}.diff-options button{font-size:.95cqw!important}#start{font-size:2.4cqw!important}#cover-note{font-size:1.15cqw;font-weight:900;line-height:1.5}#ready-note{font-size:1cqw;line-height:1.3}#side-panel{display:flex;flex-direction:column;gap:5%;padding:10% 7%;justify-content:center}#turn-info{font-size:2.4cqw;line-height:1.4;text-align:center;min-height:2.8em;display:grid;place-items:center;background:#355b40;color:#fff4d5;border-radius:9px;padding:.2em}.scores{display:grid;grid-template-columns:1fr 1fr;gap:8px}.scores>div{border:2px solid #c6b593;border-radius:8px;background:#fff6e5a6;padding:4%;text-align:center;display:flex;flex-direction:column;gap:6px}.scores>div.current{border-color:#bd772b;box-shadow:0 0 0 2px #bb893754}.scores>div>span:first-child{font-size:1.2cqw;font-weight:900;white-space:nowrap}.score-line{display:flex;align-items:center;justify-content:center;gap:10%;height:4cqw}.score-line .disc{width:30%;max-width:50px}.score-line b{font-size:3.6cqw;line-height:1}#play-controls{display:grid;gap:12px;min-height:0}#hint-note{font-size:1.1cqw;text-align:center;font-weight:900;line-height:1.4}#play-controls>button{font-size:1.4cqw;min-height:30px}#result-controls{display:flex;flex-direction:column;gap:18px;min-height:0;text-align:center}#result-controls p{font-size:1.65cqw;line-height:1.8;margin:8% 0}#result-controls button{font-size:1.8cqw}#host[data-phase=result] #turn-info{background:transparent;color:#4e482e;font-size:2.9cqw}#modal{position:absolute;inset:0;z-index:10;background:#223027bc;display:flex;align-items:center;justify-content:center;padding:3%}.dialog{width:75%;max-height:95%;overflow:auto;background:#fff4df;border:4px solid #aa7845;border-radius:18px;padding:4%;box-shadow:0 10px 30px #0005}.dialog header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.dialog h2{font-size:2.5cqw}.dialog p,.dialog label{font-size:1.65cqw;line-height:1.7}.dialog small{display:block;font-size:1.1cqw;line-height:1.8;margin:10px 0}.dialog button{margin:4px}.dialog #dialog-content{display:grid;gap:10px}.dialog input[type=range]{width:100%}.parent-note{font-size:13px;line-height:1.9;margin:18px 0}#host[data-paused=true] .disc{animation-play-state:paused}#host:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0;display:grid;place-items:center}#host:fullscreen #base{width:min(100vw,177.7778dvh);height:min(100dvh,56.25vw)}@keyframes turn-stone{to{transform:rotateY(180deg)}}@keyframes place-stone{from{transform:scale(.4)}to{transform:scale(1)}}
@media(max-width:600px) and (orientation:portrait){#host{aspect-ratio:9/22;border-width:3px;border-radius:12px}.reversi-page>h1{font-size:25px}.lodge-top{height:10%;min-height:70px;flex-direction:column;justify-content:center;gap:5px;padding:4px}.lodge-top>strong{font-size:5cqw}.lodge-top nav{gap:4px}.lodge-top button{font-size:11px!important;min-height:30px!important;padding:.35em .4em!important}#cover,#arena{grid-template-columns:1fr;grid-template-rows:45% minmax(0,1fr);gap:3%;padding:4% 3%}#cover{grid-template-rows:41% minmax(0,1fr)}.cover-paper,#side-panel{padding:7% 8%;border-radius:6px}.cover-paper{gap:5%}.cover-paper h2{font-size:5.5cqw;line-height:1.3}.cover-paper h2 br{display:none}.mode-options,.diff-options{gap:5px}.mode-options button{font-size:clamp(11px,3.3cqw,16px)!important;min-height:29px!important}.diff-options button{font-size:clamp(10px,3.2cqw,15px)!important;min-height:28px!important}#start{font-size:6cqw!important;min-height:37px!important;padding:.25em}#cover-note{font-size:clamp(10px,3cqw,15px)}#ready-note{font-size:clamp(10px,3cqw,14px)}#side-panel{gap:4%;padding:5% 8%;justify-content:center}#turn-info{font-size:clamp(12px,4.5cqw,22px);min-height:2.6em;line-height:1.25}.scores{gap:7px}.scores>div{padding:3%;gap:3px}.scores>div>span:first-child{font-size:clamp(11px,3.5cqw,17px)}.score-line{height:7cqw;gap:12%}.score-line .disc{width:23%;max-width:25px}.score-line b{font-size:7cqw}#play-controls{display:grid;grid-template-columns:1fr 1fr;gap:6px}#play-mode,#play-diff,#hint-note{grid-column:1/3}#hint-note{font-size:clamp(10px,3cqw,15px)}#play-controls>button{font-size:clamp(11px,3.5cqw,16px);min-height:28px;padding:.25em}#result-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}#result-controls p{grid-column:1/3;font-size:4.3cqw;line-height:1.6;margin:5% 0}#result-controls button{font-size:4.2cqw;padding:.35em;min-height:34px}#host[data-phase=result] #turn-info{font-size:6cqw}#board button.legal:after{border-width:1.5px}.dialog{width:98%;padding:5%;max-height:96%}.dialog h2{font-size:5.5cqw}.dialog p,.dialog label{font-size:clamp(12px,4cqw,18px)}.dialog small{font-size:clamp(10px,3.2cqw,15px)}.dialog button{font-size:4cqw!important}#host:fullscreen #base{width:100%;height:100%}}
@media(min-width:601px) and (max-width:1000px){.lodge-top button{font-size:11px!important;min-height:28px!important}#side-panel{padding:7% 6%;gap:3%}.mode-options button,.diff-options button{font-size:10px!important;min-height:23px!important}#play-controls{gap:6px}#play-controls>button{font-size:11px;min-height:25px;padding:.2em}#cover-note,#ready-note,#hint-note{font-size:10px}.scores>div>span:first-child{font-size:10px}.dialog p{font-size:14px}.dialog small{font-size:12px}}
@media(prefers-reduced-motion:reduce){.disc.flip,.disc.new{animation-duration:.001ms}}
.wood-board{padding:0}.wood-board>.board-grid{position:absolute;inset:6%;width:88%;height:88%;aspect-ratio:auto}