*{box-sizing:border-box}body,html{padding:0;margin:0}body{font-family:Hiragino Sans,Yu Gothic,Meiryo,system-ui,sans-serif;background:#f4f1ea;color:#2b2318;min-height:100vh}a{color:inherit}.page{max-width:720px;margin:0 auto;padding:2rem 1rem 4rem}h1{font-size:1.6rem}.bgm-controls,h1{margin-bottom:1.5rem}.bgm-controls{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.bgm-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #d8cfb8;border-radius:999px;background:#fffdf8;color:#2b2318;padding:.5rem 1.1rem;font-size:.9rem;font-weight:600;cursor:pointer}.bgm-toggle:hover{box-shadow:0 4px 14px rgba(0,0,0,.08)}.bgm-toggle[aria-pressed=true]{background:#3d5a3d;color:#fff;border-color:#3d5a3d}.bgm-volume{display:flex;align-items:center;gap:.5rem;border:1px solid #d8cfb8;border-radius:999px;background:#fffdf8;padding:.4rem 1rem;font-size:.85rem}.bgm-volume-input{accent-color:#3d5a3d;cursor:pointer}.bgm-volume-value{min-width:2.5em;text-align:right;color:#6b6250;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.home-page{max-width:880px}.game-list{display:flex;flex-direction:column;gap:1.75rem;margin-top:1.5rem}.game-section{border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:220px;box-shadow:0 10px 26px rgba(0,0,0,.14);opacity:0;transform:translateY(60px) scale(.94);transition:opacity .9s ease-out var(--reveal-delay,0s),transform .9s cubic-bezier(.34,1.2,.64,1) var(--reveal-delay,0s)}.game-section-revealed{opacity:1;transform:translateY(0) scale(1)}.game-section-inner{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2.5rem 1.5rem;text-align:center;background:rgba(255,253,248,.85);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.game-section-emoji{font-size:2.8rem;line-height:1}.game-section-name{font-size:1.5rem;margin:0}.game-section-actions{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:.25rem}.game-section-play{text-decoration:none;font-weight:700;color:#fff;background:#2b2318;padding:.6rem 1.7rem;border-radius:999px;transition:transform .15s ease,box-shadow .15s ease}.game-section-play:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.25)}.game-section-rules{font-size:.85rem;color:#4a4436;text-decoration:underline}.game-section-badge{font-size:.85rem;color:#5a5344;background:rgba(0,0,0,.08);padding:.4rem 1.1rem;border-radius:999px}.game-section-disabled{filter:grayscale(.5)}.game-section-shogi{background:repeating-linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.05) 2px,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 4px),linear-gradient(160deg,#f0c877,#b9793a)}.game-section-othello{background:repeating-linear-gradient(0deg,rgba(255,255,255,.06),rgba(255,255,255,.06) 1px,transparent 0,transparent 44px),repeating-linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.06) 1px,transparent 0,transparent 44px),linear-gradient(160deg,#1b6b45,#0c3a24)}.game-section-chess{background:repeating-conic-gradient(#3a3a3a 0 25%,#e8e4d8 0 50%) 0 0 /64px 64px}.game-section-uno{background:repeating-linear-gradient(135deg,#e63946,#e63946 40px,#f4c430 0,#f4c430 80px,#2a9d8f 0,#2a9d8f 120px,#457b9d 0,#457b9d 160px)}.game-section-jinsei{background:linear-gradient(135deg,#0f9b8e,#1e88e5 45%,#7c4dff)}.game-section-gomoku{background:repeating-linear-gradient(0deg,#c7bfa8,#c7bfa8 1px,transparent 0,transparent 32px),repeating-linear-gradient(90deg,#c7bfa8,#c7bfa8 1px,transparent 0,transparent 32px),#eeeae0}.lobby{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:#3d5a3d;color:white;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer}.button:hover{background:#2f472f}.button:disabled{background:#a9a9a9;cursor:default}.waiting-panel{border:1px solid #d8cfb8;border-radius:10px;padding:1.5rem;background:#fffdf8;display:flex;flex-direction:column;gap:.75rem;width:100%}.link-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.link-row input{flex:1 1;min-width:220px;padding:.5rem;border:1px solid #ccc;border-radius:6px;font-size:.9rem}.room-layout{flex-direction:column;gap:.75rem}.room-layout,.status-bar{display:flex;align-items:center}.status-bar{gap:1rem;font-weight:600}.status-bar .check{color:#b23b3b}.role-badge{font-size:.85rem;color:#666;font-weight:500}.turn-indicator{padding:.3rem .8rem;border-radius:999px;font-weight:700}.turn-indicator-mine{background:rgba(90,180,90,.2);color:#2f6b2f;animation:turn-pulse 1.6s ease-in-out infinite}.turn-indicator-theirs{background:rgba(120,120,120,.15);color:#666}@keyframes turn-pulse{0%,to{box-shadow:0 0 0 0 rgba(90,180,90,.35)}50%{box-shadow:0 0 0 6px rgba(90,180,90,0)}}.hand-tray{flex-wrap:wrap;min-height:2.6rem;justify-content:center}.hand-piece,.hand-tray{display:flex;gap:.4rem;align-items:center}.hand-piece{border:1px solid #a9793a;background:linear-gradient(180deg,#fbe9c2,#e9c68a);border-radius:6px;padding:.35rem .55rem;font-size:1.1rem;cursor:pointer;box-shadow:inset 0 -2px 3px rgba(0,0,0,.12),0 2px 3px rgba(0,0,0,.25)}.hand-piece span:first-child{font-family:Hiragino Mincho ProN,Yu Mincho,serif;font-weight:700;color:#1a1208}.hand-piece.selected{outline:3px solid #4a7a4a}.hand-piece[disabled]{opacity:.4;cursor:default}.board-frame{display:inline-flex;flex-direction:column;background:#7a5327;padding:.6rem .6rem .4rem;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.35)}.board-col-labels{display:grid;grid-template-columns:repeat(9,minmax(34px,48px));text-align:center;color:#f3e2bb;font-weight:700;font-size:.8rem;padding-bottom:.15rem}.board-body-row{display:flex;align-items:stretch}.board-row-labels{display:grid;grid-template-rows:repeat(9,minmax(34px,48px));align-items:center;color:#f3e2bb;font-weight:700;font-size:.8rem;padding-left:.3rem}.board-wrapper{transition:transform .2s ease}.board-wrapper.rotated{transform:rotate(180deg)}.board{position:relative;display:grid;grid-template-columns:repeat(9,minmax(34px,48px));grid-template-rows:repeat(9,minmax(34px,48px));border:3px solid #6b4520;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.05) 2px,rgba(0,0,0,.04) 0,rgba(0,0,0,.04) 4px),linear-gradient(180deg,#f0c877,#dda753);box-shadow:inset 0 0 18px rgba(80,45,10,.35)}.board-star{position:absolute;width:8px;height:8px;border-radius:50%;background:#3a2410;transform:translate(-50%,-50%);z-index:1;pointer-events:none}.square{border:1px solid rgba(107,69,32,.55);display:flex;align-items:center;justify-content:center;position:relative;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}.square.clickable{cursor:pointer}.square.selected{background:rgba(243,224,138,.65)}.square.last-move{background:rgba(110,160,220,.35)}.square.last-move.selected{background:rgba(243,224,138,.65)}.square.legal-target:after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;background:rgba(60,120,60,.55);z-index:1}.square.legal-target.has-piece:after{width:90%;height:90%;border-radius:6px;background:transparent;border:3px solid rgba(180,50,50,.65)}.piece{position:relative;width:84%;height:84%;display:flex;align-items:center;justify-content:center;-webkit-clip-path:polygon(50% 0,100% 22%,100% 100%,0 100%,0 22%);clip-path:polygon(50% 0,100% 22%,100% 100%,0 100%,0 22%);background:linear-gradient(180deg,#fdf0d2,#e7c286);box-shadow:inset 0 -4px 5px rgba(90,55,15,.25),inset 0 2px 2px rgba(255,255,255,.6),0 2px 3px rgba(0,0,0,.35);z-index:2}.piece.king{width:92%;height:92%;background:linear-gradient(180deg,#fff3da,#eecb8c);box-shadow:inset 0 -4px 5px rgba(90,55,15,.25),inset 0 2px 2px rgba(255,255,255,.7),0 0 0 2px #b23b3b,0 2px 4px rgba(0,0,0,.4)}.piece-glyph{font-family:Hiragino Mincho ProN,Yu Mincho,serif;font-size:1.35rem;font-weight:700;color:#1a1208;line-height:1;transform:translateY(8%)}.piece.gote{transform:rotate(180deg)}.piece.promoted .piece-glyph{color:#b23b3b}.piece.owner-other{opacity:.9}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);justify-content:center;z-index:10}.modal,.modal-overlay{display:flex;align-items:center}.modal{background:white;border-radius:10px;padding:1.5rem;flex-direction:column;gap:1rem;min-width:240px}.modal-actions{display:flex;gap:.75rem}.game-over-banner{border-radius:10px;padding:1rem 1.5rem;background:#2f472f;color:white;font-weight:700;font-size:1.1rem;text-align:center}.toast{border-radius:8px;padding:.6rem 1rem;background:#b23b3b;color:white;font-weight:600}.muted{color:#6b6250;font-size:.9rem}.othello-board{display:grid;grid-template-columns:repeat(8,minmax(38px,52px));grid-template-rows:repeat(8,minmax(38px,52px));border:2px solid #1c3d2a;background:#2f7d4f}.othello-square{border:1px solid #235c3c;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer}.othello-square.legal-target:after{content:"";position:absolute;width:24%;height:24%;border-radius:50%;background:rgba(255,255,255,.55)}.disc{width:78%;height:78%;border-radius:50%;box-shadow:0 2px 3px rgba(0,0,0,.35)}.disc.black{background:#1a1a1a}.disc.white{background:#f5f5f0;border:1px solid #c9c9c0}.chess-board-wrapper{transition:transform .2s ease}.chess-board-wrapper.rotated,.chess-board-wrapper.rotated .piece{transform:rotate(180deg)}.chess-board{display:grid;grid-template-columns:repeat(8,minmax(38px,52px));grid-template-rows:repeat(8,minmax(38px,52px));border:2px solid #4a3018}.chess-square{display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.chess-square.light{background:#f0d9b5}.chess-square.dark{background:#b58863}.chess-square.selected{background:#f3e08a}.chess-square.legal-target:after{content:"";position:absolute;width:28%;height:28%;border-radius:50%;background:rgba(60,60,60,.4)}.chess-square.legal-target.has-piece:after{width:90%;height:90%;border-radius:6px;background:transparent;border:3px solid rgba(180,50,50,.65)}.chess-square .piece{font-size:2.1rem;line-height:1}.chess-square .piece.white{color:#fff;text-shadow:0 0 2px #1a1a1a,0 1px 1px #1a1a1a}.chess-square .piece.black{color:#1a1a1a}.rulebook{display:flex;flex-direction:column;gap:1.25rem}.rulebook h2{font-size:1.15rem;margin-bottom:.5rem}.rulebook section{gap:.5rem}.rulebook section,.rulebook ul{display:flex;flex-direction:column}.rulebook ul{padding-left:1.25rem;gap:.35rem}.rulebook li,.rulebook p{line-height:1.6}