*{box-sizing:border-box}body{margin:0;font:14px/1.6 'Microsoft YaHei',sans-serif;background:#e4e4e2;color:#202327}header{height:62px;padding:14px 24px;background:#15191e;color:white;display:flex;align-items:center;gap:24px}header b{font-size:20px}header button{margin-left:auto}button,select{font:inherit;padding:10px;border:1px solid #ccc;border-radius:8px;cursor:pointer}button{background:#d9252c;color:white;border:0;font-weight:bold}button:disabled{background:#999;cursor:default}main{display:grid;grid-template-columns:minmax(0,1fr) 300px;height:calc(100vh - 62px)}#viewport{overflow:auto;display:grid;align-items:start;padding:12px}#board{position:relative;width:100%;min-width:740px}#board img{display:block;width:100%}#pieces{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}aside{background:white;padding:20px;overflow:auto}aside h2{margin:0}aside>button{width:100%;margin:8px 0}label{display:block;margin:12px 0}#ranking>div{border-left:5px solid var(--color);padding:8px;margin:10px 0;background:#f1f2f3}#log{padding-left:22px;max-height:230px;overflow:auto;font-size:12px}details{font-size:12px}dialog{border:0;border-radius:16px;padding:30px;width:min(590px,95vw);max-height:90vh;overflow:auto;box-shadow:0 20px 100px #0006}dialog::backdrop{background:#101820bd}dialog button{width:100%}.note{font-size:12px;color:#62676c}#players label{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;padding:5px}#diceOverlay{position:fixed;inset:0;background:#1119;z-index:30;display:grid;place-items:center}#diceOverlay[hidden]{display:none}.dice-card{background:#fff;border-radius:20px;padding:25px;text-align:center;min-width:240px;box-shadow:0 20px 70px #0006}#die{font-size:125px;line-height:1.2;color:#171b20}.rolling{animation:tumble .15s infinite alternate}@keyframes tumble{to{transform:rotate(18deg) scale(.9)}}@media(max-width:800px){main{display:block;height:auto}header span{display:none}#viewport{height:65vh}aside{min-height:35vh}#board{min-width:950px}}
/* Tablet layout: keep the complete board visible and allow native pinch zoom. */
button,select{min-height:44px;touch-action:manipulation}input[type=checkbox]{width:20px;height:20px;vertical-align:middle}header{height:auto;min-height:62px;flex-wrap:wrap;gap:12px}header button{margin-left:0}header button:first-of-type{margin-left:auto}
@media(max-width:1180px){main{display:block;height:auto}#viewport{display:block;height:auto;overflow:auto;padding:8px}#board{min-width:0;width:100%}aside{display:block;min-height:0;padding:18px}#ranking{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#log{max-height:160px}aside>button{max-width:420px}header span{display:none}}