*{box-sizing:border-box}body{margin:0;background:#e9edee;color:#263c4a;font:16px/1.45 system-ui}main{max-width:1150px;margin:auto;padding:28px 24px}small{letter-spacing:.16em;font-size:11px;font-weight:800}h1{font:43px Georgia;margin:8px 0}h1 em{font-weight:normal;color:#947548}h2{font:25px Georgia}button,input,select{font:inherit;color:inherit;padding:10px;border:1px solid #aebdc4;background:#fffdf5;border-radius:8px}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible{outline:3px solid #bf6e2b}.setup{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.setup label{font-size:12px}.setup label>*{display:block}.setup input{width:125px}#status{padding:14px;background:#2d5063;color:white;border-radius:10px;margin:20px 0 8px;font-weight:700}.layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(230px,1fr);gap:24px}.caption{font-size:12px;color:#586d79}#scrollboard{overflow-x:auto;border:1px solid #a8bac1;border-radius:9px;background:#c6d2d7;touch-action:pan-x pan-y}#board{display:grid;grid-template-columns:repeat(11,minmax(44px,1fr));min-width:494px;gap:2px;padding:4px}.cell{aspect-ratio:1;padding:0;border:1px solid transparent;border-radius:4px;background:#e0e7e8;font-size:18px;font-weight:800;position:relative;min-width:0}.cell.home{background:#c2d5dc}.cell.piece{background-image:url('dice.webp');background-size:200% 200%;background-position:0 0;color:#403522;text-shadow:0 1px #fff}.cell.ocean{background-position:100% 0;color:white;text-shadow:0 1px #19394f}.cell.legal{border:2px solid #748f4a;background-color:#e8efcb}.cell.selected{outline:3px solid #c88533;z-index:1}.cell small{position:absolute;bottom:0;right:2px;font-size:8px;letter-spacing:0;color:#496370;background:#ffffffc9}.actions{display:flex;gap:9px;flex-wrap:wrap}.actions button{flex:1 0 44%}#commit{background:#2d5063;color:white}#preview,#message{min-height:45px}.legend{background:#f5f4eb;border-radius:12px;padding:16px;margin-top:15px;font-size:14px}details{border-top:1px solid #b5c3c9;margin-top:22px;padding-top:15px}summary{font-weight:700;cursor:pointer}footer{font-size:12px;color:#5b7180;margin-top:28px}@media(max-width:720px){main{padding:18px 14px}h1{font-size:31px}.layout{grid-template-columns:1fr;gap:8px}.setup select{max-width:195px}.setup{gap:7px}.caption{font-size:11px}#selection{margin:5px 0}#preview{min-height:25px;margin:7px 0}}

.layout>section{min-width:0}#scrollboard{width:100%;max-width:100%}@media(max-width:720px){.layout{grid-template-columns:minmax(0,1fr)}}