:root{--gap: .4rem;--card-width: 4.4rem;--line: #8a8a8a;--own: #2f6fb0;--opponent: #b04a4a;color-scheme:light dark}body{margin:0;padding:var(--gap);font-family:system-ui,sans-serif;font-size:14px}.status,.refusal{margin:var(--gap) 0}.refusal{color:#b00}.board__result{margin:var(--gap) 0;font-size:1.4rem;font-weight:700}.board__battle,.board__smash-judgment{margin:var(--gap) 0;padding:2px 6px;border-left:3px solid #b00;font-weight:700}.board__smash-judgment{border-left-color:#06a}.board__waiting{display:flex;flex-wrap:wrap;gap:var(--gap);margin:var(--gap) 0}.bank{padding:2px 6px;border:1px solid var(--line)}.bank__title{margin:0;font-size:.8rem}.bank__list{margin:2px 0 0;padding-left:1.2em;font-size:.75rem}.battle-space{display:flex;flex-direction:column;gap:var(--gap);margin:calc(var(--gap) * 2) 0}.battle-space__row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}.square{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:2px;min-height:5rem;padding:2px;border:1px solid var(--line)}.square--味方エリア{border-color:var(--own)}.square--敵エリア{border-color:var(--opponent)}.side__title{margin:var(--gap) 0;font-size:1rem}.side__zones{display:flex;flex-wrap:wrap;gap:var(--gap)}.zone{min-width:6rem;padding:2px 4px;border:1px solid var(--line)}.zone__title{margin:0 0 2px;font-size:.75rem;font-weight:400}.zone__cards{display:flex;flex-wrap:wrap;gap:2px}.card{position:relative;box-sizing:border-box;width:var(--card-width);aspect-ratio:2 / 3}.card__face{box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;padding:3px;overflow:hidden;border:1px solid var(--line);border-radius:3px;font-size:.62rem;line-height:1.25}.card--フリーズ{margin:0 calc(var(--card-width) / 4)}.card--フリーズ .card__face{transform:rotate(90deg)}.card--back .card__face{background:repeating-linear-gradient(45deg,#6663,#6663 4px,transparent 4px,transparent 8px)}.card--自分 .card__face{border-color:var(--own);border-left-width:4px}.card--相手 .card__face{border-color:var(--opponent);border-left-width:4px}.card__whose{align-self:flex-end;padding:0 2px;border-radius:2px;color:#fff;font-size:.55rem}.card--自分 .card__whose{background:var(--own)}.card--相手 .card__whose{background:var(--opponent)}.card__name{font-weight:700}.card--修整あり .card__detail{font-weight:700;text-decoration:underline}.card__damage{margin-top:auto;color:#b00}.card__panel{position:absolute;top:0;left:calc(100% + var(--card-width) / 4);z-index:10;box-sizing:border-box;display:none;width:12rem;padding:6px 8px;border:1px solid var(--line);border-radius:3px;background:Canvas;box-shadow:0 2px 8px #0004;font-size:.72rem}.card__panel--左{right:calc(100% + var(--card-width) / 4);left:auto}.card:hover .card__panel,.card:focus-within .card__panel{display:block}.card__panel-name{margin-bottom:4px;font-weight:700}.card__panel-rows{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;margin:0}.card__panel-label{color:#666}.card__panel-value{margin:0}.card__panel-text{margin-top:6px;padding-top:4px;border-top:1px solid var(--line)}.card__panel-line{margin:0 0 2px}.card--押せる{cursor:pointer}.card--押せる .card__face{outline:3px solid var(--own);outline-offset:-1px;background-color:color-mix(in srgb,var(--own) 22%,Canvas)}.card--選択中 .card__face{outline:3px solid var(--own);outline-offset:2px;background-color:color-mix(in srgb,var(--own) 45%,Canvas)}.square--置き先{cursor:pointer;border-style:dashed;border-width:3px;border-color:var(--own)}.controls{position:sticky;top:0;z-index:1;box-sizing:border-box;height:11rem;max-height:30vh;overflow-y:auto;background:Canvas;border-bottom:1px solid var(--line)}.controls__turn{position:sticky;top:0;margin:0 0 var(--gap);background:Canvas;font-weight:700}.panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--gap);margin:0 0 var(--gap)}.mode{display:flex;align-items:center;gap:var(--gap);margin:0}.mode__label{margin:0;font-size:.8rem;color:#666}.choice__button--選択中{font-weight:700;outline:2px solid var(--own)}.controls__reason{margin:0 0 var(--gap)}.controls__offline{margin:calc(var(--gap) * 2) 0;color:#b00}.lobby{max-width:40rem;margin:calc(var(--gap) * 2) 0}.lobby__title{margin:calc(var(--gap) * 2) 0 var(--gap);font-size:1rem}.lobby__make{display:flex;flex-wrap:wrap;gap:var(--gap)}.lobby__name{flex:1 1 12rem;padding:4px 8px;border:1px solid var(--line);font:inherit}.lobby__none{margin:0;color:#666}.lobby__rooms{display:flex;flex-direction:column;gap:var(--gap)}.lobby__room{display:flex;align-items:center;gap:var(--gap);padding:var(--gap);border:1px solid var(--line)}.lobby__room-name{flex:1 1 auto;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lobby__room-status{color:#666}.leave{display:flex;margin:calc(var(--gap) * 2) 0}.leave .choice__button{color:#666}.actions,.choice{margin:calc(var(--gap) * 2) 0;padding:var(--gap);border:1px solid var(--line)}.actions__title,.choice__title{margin:0;font-size:1rem}.actions__none,.choice__none{margin:0;color:#666}.actions__list,.choice__list{display:flex;flex-wrap:wrap;gap:var(--gap)}.choice__button{padding:4px 8px;font:inherit;cursor:pointer}.choice{border-color:var(--own)}.choice__back{display:flex;gap:var(--gap);margin-top:calc(var(--gap) * 2);padding-top:var(--gap);border-top:1px dashed var(--line)}.choice__back .choice__button{color:#666}.log{margin-top:calc(var(--gap) * 2);padding:2px 6px;border:1px solid var(--line)}.log__title{margin:0;font-size:.9rem}.log__list{max-height:12rem;margin:2px 0 0;padding-left:2.8em;overflow-x:hidden;overflow-y:auto;font-size:.75rem}.log__item{padding-inline-start:calc(var(--log-depth, 0) * 1em)}.log__item--自分{color:var(--own)}.log__item--相手{color:var(--opponent)}.log__whose:after{content:"："}.overlay-layer{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap);pointer-events:none}.transition-banner{margin:0;padding:var(--gap) calc(var(--gap) * 3);border:2px solid var(--line);border-radius:4px;background:Canvas;box-shadow:0 2px 10px #0006;font-size:1.3rem;font-weight:700}.cut-in{width:max-content;max-width:20rem;padding:var(--gap) calc(var(--gap) * 2);border:2px solid var(--line);border-radius:4px;background:Canvas;box-shadow:0 2px 10px #0006}.cut-in--自分{border-color:var(--own)}.cut-in--相手{border-color:var(--opponent)}.cut-in__whose:after{content:"："}.cut-in__heading{margin:0;font-size:1.1rem;font-weight:700}.cut-in__lines{margin-top:2px;font-size:.85rem}.cut-in__line{margin:0}