:root{color:#ececec;background:#1b1a17;font:16px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0}main{max-width:560px;min-height:100dvh;padding:calc(8px + env(safe-area-inset-top)) 8px calc(20px + env(safe-area-inset-bottom));margin:0 auto}.topbar{margin-bottom:10px}.brand{color:inherit;cursor:pointer;background:0 0;border:none;padding:6px 0;font-size:22px;font-weight:700}h1{margin:0 0 4px;font-size:26px}.muted{opacity:.6}.error{color:#ff8080;white-space:pre-wrap}.menu{flex-direction:column;gap:14px;margin-top:24px;display:flex}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:#26251f;border:1px solid #ffffff2a;border-radius:10px;padding:12px 16px}button:hover{background:#302f28}button:disabled{opacity:.5;cursor:default}button.big{padding:18px;font-size:19px;font-weight:600}button.ghost{opacity:.7;background:0 0;border:none}input{font:inherit;min-width:0;color:inherit;text-transform:uppercase;letter-spacing:3px;background:#26251f;border:1px solid #ffffff2a;border-radius:10px;flex:1;padding:12px 14px;font-size:17px}.join-row{align-items:center;gap:8px;display:flex}.game{flex-direction:column;gap:10px;display:flex}.status{text-align:center;background:#26251f;border-radius:10px;justify-content:center;align-items:center;min-height:44px;margin:0;padding:10px 14px;font-size:17px;font-weight:600;display:flex}.status.mine{background:#2f4a1f}.status.over{background:#5a3a12}.room-line{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 8px;display:flex}.code-label strong{letter-spacing:3px;font-size:22px}.board-wrap{width:min(100%,100dvh - 270px);min-width:280px;margin:0 auto;position:relative}.board{aspect-ratio:1;touch-action:manipulation;-webkit-user-select:none;user-select:none;border-radius:4px;grid-template-rows:repeat(8,minmax(0,1fr));grid-template-columns:repeat(8,minmax(0,1fr));width:100%;display:grid;overflow:hidden}.square{border:none;border-radius:0;justify-content:center;align-items:center;min-width:0;min-height:0;margin:0;padding:0;font-size:min(10.4vw,58px);line-height:1;display:flex;position:relative;overflow:hidden}.square.light{background:#ebecd0}.square.dark{background:#779556}.square.lastmove{box-shadow:inset 0 0 0 100vmax #ffeb3b47}.square.selected{box-shadow:inset 0 0 0 100vmax #ffeb3b73}.square.target:after{content:"";background:#14141440;border-radius:50%;width:26%;height:26%;position:absolute}.square.target-capture{box-shadow:inset 0 0 0 4px #14141473}.piece{pointer-events:none;font-family:Segoe UI Symbol,"Noto Sans Symbols 2",DejaVu Sans,sans-serif;transform:translateY(-2px)}.white-piece{color:#fff;-webkit-text-stroke:1.2px #1a1a1a;paint-order:stroke fill;text-shadow:0 2px 2px #00000059}.black-piece{color:#1c1b19;-webkit-text-stroke:.6px #000;text-shadow:0 1px 1px #ffffff40}.coord{opacity:.75;font-size:9px;font-weight:700;position:absolute}.coord.rank{top:2px;left:3px}.coord.file{bottom:2px;right:3px}.square.light .coord{color:#779556}.square.dark .coord{color:#ebecd0}.promotion{background:#0009;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex;position:absolute;inset:0}.promotion p{margin:0;font-weight:600}.promotion-choices{gap:8px;display:flex}.promotion-choices button{color:#171512;background:#ebecd0;padding:10px 14px;font-size:34px}.row{justify-content:space-between;align-items:center;gap:8px;display:flex}.moves{word-spacing:4px;max-height:110px;margin:0;font-size:15px;line-height:1.7;overflow-y:auto}.row button:not(.ghost){min-width:130px;min-height:48px}.row button.ghost{min-height:48px;padding:12px 18px}@media (width>=600px){main{padding-top:24px}}.room-card{background:#26251f;border-radius:10px;justify-content:space-between;align-items:center;gap:10px;padding:8px 8px 8px 14px;display:flex}.room-code{flex-direction:column;line-height:1.15;display:flex}.room-code .muted{font-size:12px}.room-code strong{letter-spacing:4px;font-size:26px}button.invite{background:#3b6b2a;border-color:#0000;min-height:48px;font-weight:600}.join-col{flex-direction:column;gap:10px;display:flex}.join-col input{text-align:center;flex:none;min-height:56px;font-size:22px}.join-col button{min-height:56px;font-weight:600}.status{min-height:56px}@media (height<=700px){.status{min-height:44px;padding:6px 12px}}