:root{color-scheme:dark;--night:#202333;--ink:#2e3040;--paper:#fff3d9;--muted:#c8c6bf;--green:#b7d882;--edge:#5f6471;--error:#ffb3a4}*{box-sizing:border-box}body{margin:0;background:var(--night);color:var(--paper);font:16px/1.45 'Segoe UI',Arial,sans-serif}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select,input{min-height:44px;border-radius:7px}button{border:1px solid #777b82;background:#323647;color:var(--paper);padding:8px 14px;cursor:pointer;touch-action:manipulation}button:hover{background:#41475a}button:disabled{opacity:.48;cursor:default}button.primary{background:var(--green);color:#20311c;border-color:var(--green);font-weight:700}button.primary:hover{background:#c6e996}button[aria-pressed=true]{outline:2px solid var(--green);outline-offset:2px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #f6d86f;outline-offset:3px}input,select{background:#292e3e;color:var(--paper);border:1px solid #777b82;padding:8px 10px;min-width:0}input[type=range]{padding:0;accent-color:var(--green);width:104px;cursor:pointer}a{color:#cce0a5;text-underline-offset:3px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Georgia,serif;font-weight:600}h1{font-size:clamp(1.8rem,3.8vw,3.4rem);line-height:1.1}h2{font-size:1.6rem}h3{font-size:1.2rem}[hidden]{display:none!important}.mast{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px clamp(14px,3vw,48px);border-bottom:1px solid #474b58}.wordmark{font:700 clamp(1.5rem,2.7vw,2.3rem)/1 Georgia,serif;color:#f4d56a;text-decoration:none;white-space:nowrap}.wordmark span{color:#bedb8a}.wordmark small{font:12px/1.5 'Segoe UI',sans-serif;color:#d0cdc5;display:block;margin-top:4px}.mast nav{display:flex;align-items:center;gap:8px}.languages{display:flex;gap:6px}.languages button{padding:5px 7px;min-width:44px;border-color:transparent;background:transparent}.languages svg{width:30px;height:21px;display:block}.mast nav>button{background:transparent}#audio-strip{display:flex;gap:16px;align-items:center;flex-wrap:wrap;min-height:60px;padding:5px clamp(14px,3vw,48px);background:#292d3d;border-bottom:1px solid #474b58;font-size:13px}.source{display:flex;align-items:center;gap:8px}.source>span{position:absolute;width:1px;height:1px;clip-path:inset(50%)}#source{width:160px;min-height:44px}.channel{display:flex;align-items:center;gap:8px}.channel button{padding:6px 9px;border:0;background:transparent;min-width:64px}.channel button[aria-pressed=true]{outline:0;text-decoration:line-through;color:#d8c3b5}.audio-status{display:flex;align-items:center;gap:8px;flex:1;min-width:130px;color:#d2d0c5}.audio-status output{font-size:12px}.audio-status button{font-size:12px;padding:5px 9px}.audio-status a{font-size:12px}main{max-width:1920px;margin:auto;padding:0 clamp(12px,2vw,32px)}.entry{display:grid;gap:20px;grid-template-columns:minmax(300px,.8fr) minmax(0,1.3fr);min-height:650px;align-items:center;max-width:1500px;margin:auto}.invitation{padding:38px 0 30px 24px}.intro{color:#d8d5be;font-size:15px;margin-bottom:15px}.invitation h1{font-size:clamp(2.6rem,4.5vw,4.8rem);max-width:640px}.invitation>p:not(.intro){max-width:500px;margin-top:20px;color:#ded9cb}.invitation form{max-width:410px;margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.invitation form>label,.invitation form>input,.invitation form>#join-fields{grid-column:1/-1}#nickname{width:100%}.entry-note{font-size:13px}.join-row{display:flex;gap:8px;margin-top:6px}.join-row input{flex:1;width:100px;text-transform:uppercase}.hero-scene{height:560px;min-width:0}.hero-caption{text-align:center;color:#d7d3c4;font:italic 18px Georgia,serif}.error{color:var(--error);min-height:1.4em;font-size:14px}.entry .error{color:var(--error)!important}.credits{text-align:center;font-size:12px;color:#c2c1ba;margin:26px auto 15px;max-width:1000px}.credits a{display:inline-block;padding:5px}.table-top{display:flex;align-items:center;gap:12px;margin:12px 0;font-size:13px;flex-wrap:wrap}.table-top #room-label{font-weight:600;letter-spacing:1px}.table-top #connection{margin-left:auto;color:#c5d4b1}.lobby{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.2fr);align-items:center;gap:40px;min-height:590px;padding:16px 24px}.lobby>div>p{max-width:550px}.lobby h1{margin-bottom:18px}.lobby-scene{height:550px}.lobby-actions{display:flex;gap:12px;margin:24px 0 14px}.muted{color:#cbc9bd;font-size:13px}.lobby-person{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #464c58}.lobby-person svg{width:45px;height:45px}.lobby-person span{flex:1}.lobby-person small{color:#d0cbbd}.tribe-choice{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.tribe-choice button{display:flex;align-items:center;padding:3px 10px}.tribe-choice svg{width:34px;height:38px}.song-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0 12px}.song-heading h1{font-size:clamp(1.4rem,2.4vw,2.15rem);margin-top:3px}.song-heading span{font-size:13px;color:#dbd2b6}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px}.play-column{min-width:0}.board-wrap{position:relative;background:#292f39;border-radius:18px;overflow:hidden}.scene{height:min(61vw,650px);min-height:420px;touch-action:none}.scene canvas{display:block;max-width:100%}.board-tools{position:absolute;top:10px;left:10px;display:flex;gap:5px;flex-wrap:wrap;max-width:calc(100% - 20px);pointer-events:auto}.board-tools button{background:#252b36ed;font-size:13px;min-width:44px;padding:5px 10px}.board-tip{position:absolute;bottom:7px;left:12px;right:12px;pointer-events:none;font-size:12px;color:#fff2d8;text-align:center;background:#202333e8;border-radius:5px;padding:3px 7px;width:fit-content;margin:auto}.action-strip{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;min-height:88px;padding:14px 18px;background:var(--paper);border-radius:10px;color:var(--ink)}.action-strip strong{font-size:17px}.action-strip p{font-size:13px;margin-top:3px}.commit{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;flex-shrink:0;max-width:55%}.commit label{font-size:12px;display:flex;flex-direction:column;gap:2px}.commit select{max-width:150px;background:#fffaf0;color:#303542}.commit button:not(.primary){background:#f5e4c1;color:#303542;border-color:#8b826e}.reserve{padding:12px 0;display:flex;gap:12px;flex-wrap:wrap}.tribe-stock{flex:1;min-width:200px}.tribe-stock h3{font:600 14px 'Segoe UI',sans-serif;color:#ded5c4;margin-bottom:5px}.piece-row{display:flex;gap:8px}.piece{position:relative;flex:1;max-width:150px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;padding:5px 8px 8px;background:#303746;border:1px solid #6d727c;min-height:102px;user-select:none;touch-action:none}.piece svg{height:60px;width:64px}.piece[data-size="1"] svg{height:41px;margin-top:19px}.piece[data-size="2"] svg{height:50px;margin-top:10px}.piece small{font-size:12px}.piece[aria-pressed=true]{background:#3c4a38}.piece:disabled{opacity:.42}.player-rail{display:flex;flex-direction:column;gap:13px;min-width:0}.player-rail h2{font-size:1.5rem}.player{display:grid;grid-template-columns:50px 1fr auto;gap:8px;align-items:center;padding:8px 0 10px;border-bottom:1px solid #575c65}.player.active{background:#323e36;border-radius:8px;padding:10px 9px}.player svg{height:48px;width:45px}.player-name{overflow-wrap:anywhere;line-height:1.25}.player small{display:block;color:#dbd0bd;font-size:12px}.player .score{font:700 26px Georgia,serif;text-align:right}.player .score small{font:12px 'Segoe UI',sans-serif;white-space:nowrap}.latest{font-size:13px;min-height:70px;color:#e6dccb}.rule-reminder{border-top:1px solid #575c65;padding-top:15px}.rule-reminder p{font-size:13px;color:#d3d1c6;margin:5px 0 12px}.melody-pieces{display:flex;align-items:flex-end;justify-content:space-between;height:78px}.melody-pieces svg{width:40px;height:70px}.melody-pieces svg:nth-child(odd){height:40px}.melody-pieces svg:nth-child(3){height:76px}.flat-board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;padding:66px 12px 38px;min-height:420px;background:#4d6543}.flat-cell{aspect-ratio:1;min-width:0;background:#b0c47d;color:#293d22;border:1px solid #435b36;position:relative;padding:2px;border-radius:3px;display:flex;align-items:center;justify-content:center}.flat-cell:hover{background:#cbda9b}.flat-cell svg{height:88%;max-width:90%}.flat-cell.legal{outline:3px solid #213c2a;outline-offset:-5px}.flat-cell.staged{background:#fff3cf;outline:4px solid #334633;outline-offset:-5px}.flat-cell .coordinate{font-size:10px;position:absolute;top:2px;left:4px}.terrain{font-size:11px;line-height:1.2;font-weight:600;max-width:95%}.terrain.spring{color:#153f51}.terrain.flower{color:#49304e}.terrain.mushroom{color:#662b25}dialog{border:1px solid #777866;background:var(--paper);color:var(--ink);padding:28px;width:min(760px,calc(100% - 24px));max-height:88dvh;border-radius:15px;box-shadow:0 24px 80px #0008}dialog::backdrop{background:#111522b8}dialog p,dialog li{margin:12px 0}dialog h2{font-size:2rem;padding-right:80px}dialog h3{margin-top:22px}.dialog-close{float:right;background:#eee1c3;color:#333744;border-color:#98907a;margin:0 0 10px 12px}dialog a{color:#34542e}dialog table{border-collapse:collapse;width:100%;font-size:14px}dialog th,dialog td{padding:9px 6px;text-align:left;border-bottom:1px solid #b7ac92}dialog .score-line{font-size:18px}dialog select{background:#fff9ed;color:#282e39;width:100%}.inspect-figure{height:160px;text-align:center}.inspect-figure svg{height:160px}#announcement{position:fixed;left:50%;top:28%;transform:translate(-50%,-50%);font:700 clamp(1.8rem,4vw,3.5rem)/1.15 Georgia,serif;padding:22px 34px;max-width:calc(100vw - 24px);text-align:center;background:#fff3d9;color:#2a3c27;border:3px solid #afcb7c;border-radius:16px;box-shadow:0 16px 40px #0006;pointer-events:none;z-index:20;animation:announce 2.8s both}#drag-follower{position:fixed;pointer-events:none;z-index:30;transform:translate(-50%,-75%);width:72px;height:88px;filter:drop-shadow(0 8px 3px #0006)}#drag-follower svg{width:100%;height:100%}body.calm #announcement{animation:none;font:600 18px 'Segoe UI',sans-serif;top:180px;padding:10px 18px;box-shadow:none}@keyframes announce{0%{opacity:0;translate:0 20px;scale:.9}12%,78%{opacity:1;translate:0 0;scale:1}100%{opacity:0;translate:0 -10px}}@media(min-width:1650px){.scene{height:720px}.game-layout{grid-template-columns:minmax(0,1fr) 290px}}@media(max-width:1100px){.game-layout{grid-template-columns:minmax(0,1fr) 210px;gap:14px}.scene{height:570px}.entry{grid-template-columns:1fr 1.15fr}.invitation{padding-left:5px}.mast{padding:12px 18px}.audio-status{min-width:0}.commit{max-width:60%}.action-strip{align-items:flex-start}.lobby{gap:14px;padding:12px 0}.lobby-scene{height:470px}}@media(max-width:800px){.entry{grid-template-columns:1fr;gap:0;min-height:0}.invitation{padding:30px 12px 4px;max-width:650px;margin:auto;width:100%}.invitation h1{font-size:clamp(2.5rem,7vw,3.7rem)}.entry-meadow{grid-row:2}.hero-scene{height:410px}.game-layout{grid-template-columns:minmax(0,1fr)}.player-rail{display:grid;grid-template-columns:1fr 1fr;gap:12px}.player-rail>h2{display:none}#players{display:grid;grid-template-columns:1fr 1fr;gap:6px;grid-column:1/-1}.player{padding:6px;min-width:0}.rule-reminder{border:0;padding-top:0}.scene{height:560px}.lobby{grid-template-columns:1fr}.lobby-scene{height:360px}.mast{gap:6px}.mast nav{gap:6px}.mast nav>button{padding:6px 9px}.wordmark small{font-size:10px}.song-heading{margin-top:18px}.action-strip{position:sticky;bottom:0;z-index:3;box-shadow:0 5px 20px #0003}.lobby-person{min-height:62px}#audio-strip{gap:6px 12px;padding:5px 14px}.audio-status{flex-basis:auto}.credits{margin-top:20px}.flat-cell{min-height:52px}}@media(max-width:510px){.mast{padding:10px 12px;align-items:flex-start}.mast nav{flex-wrap:wrap;justify-content:flex-end;max-width:200px;gap:4px}.mast nav>button{font-size:12px;min-height:44px}.wordmark{font-size:25px;padding-top:6px}.languages{gap:2px}.languages button{min-width:40px;padding:6px}.source{width:calc(50% - 7px)}#source{width:100%;font-size:12px}.channel{gap:1px;flex:1}.channel button{font-size:12px;min-width:54px;padding:5px}input[type=range]{width:100%;max-width:110px}.channel:has(#effects-level){flex:0 1 calc(50% - 7px)}.audio-status{font-size:11px;flex:1;gap:6px;min-height:44px}.audio-status output{font-size:11px}.audio-status a{font-size:10px}.audio-status button{padding:3px 6px}main{padding:0 10px}.hero-scene{height:330px}.hero-caption{font-size:15px}.invitation{padding:24px 4px 0}.invitation h1{font-size:2.7rem}.invitation>p:not(.intro){margin-top:15px;font-size:15px}.invitation form{margin-top:20px}.entry-note{font-size:12px!important}.scene{height:420px;min-height:420px}.board-tools{gap:3px;top:7px;left:7px;max-width:calc(100% - 14px)}.board-tools button{padding:3px 7px;min-height:44px}.board-tip{font-size:10px;bottom:5px;left:6px;right:6px}.song-heading h1{font-size:1.45rem}.song-heading>button{font-size:13px}.table-top{gap:6px}.table-top button{font-size:12px;padding:5px 8px}.table-top #connection{font-size:11px}.action-strip{display:block;padding:10px 12px;min-height:98px}.action-strip strong{font-size:15px}.commit{max-width:100%;justify-content:flex-start;margin-top:8px;gap:6px}.commit:empty{display:none}.commit label{flex:1}.commit select{max-width:100%;font-size:13px}.commit button{font-size:14px;padding:7px 10px}.reserve{gap:10px}.tribe-stock{min-width:160px}.piece{min-height:98px;padding:4px}.piece svg{width:54px}.piece small{font-size:11px}.player{grid-template-columns:35px minmax(0,1fr) auto;gap:5px}.player svg{width:32px;height:40px}.player .score{font-size:23px}.player-name{font-size:13px}.player small{font-size:10px}.player-rail{gap:8px}.latest{font-size:12px}.rule-reminder h3{font-size:16px}.rule-reminder p{font-size:12px}.melody-pieces{height:65px}.melody-pieces svg{width:29px}.melody-pieces svg:nth-child(3){height:62px}.flat-board{padding:105px 7px 35px;gap:3px;min-height:420px}.flat-cell{min-height:46px}.terrain{font-size:9px}.flat-cell .coordinate{font-size:8px;left:2px;top:1px}.lobby-actions{flex-wrap:wrap}.lobby h1{font-size:2.2rem}.lobby-scene{height:310px}dialog{padding:18px}dialog h2{font-size:1.6rem}.credits{font-size:11px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}#announcement{font-size:18px;top:180px;padding:10px 18px}}
.piece svg,.piece[data-size="1"] svg,.piece[data-size="2"] svg{height:76px;width:64px;margin-top:0}.flat-cell{background-repeat:no-repeat;border-color:transparent}.flat-cell.staged{box-shadow:inset 0 0 0 4px #fff3d9}.flat-cell .coordinate{color:#263320;background:#fff3d9e8;border-radius:2px;padding:0 2px}.flat-cell svg{height:100%;width:90%}.inspect-figure svg{height:220px}.inspect-figure{height:220px}.fallback-figures{display:flex;align-items:flex-end;justify-content:center;height:100%;gap:10px}.fallback-figures svg{height:220px;width:100px}
.action-strip{position:sticky;bottom:5px;z-index:3}.scene{height:clamp(420px,calc(100dvh - 410px),620px)}@media(max-width:510px){.scene{height:420px}}
@media(max-width:510px){.tribe-stock{flex-basis:100%;min-width:0}.piece{max-width:none}.piece-row{width:100%}}
@media(max-width:510px){.mast{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 8px;align-items:center}.mast nav{display:contents}.wordmark{grid-column:1;grid-row:1}.languages{grid-column:2;grid-row:1}.mast #help{grid-column:1;grid-row:2;justify-self:start}.mast #calm{grid-column:2;grid-row:2;justify-self:end}.flat-cell.staged{touch-action:none}}
.flat-board{--frame:clamp(420px,calc(100dvh - 410px),620px);--cell:min(calc((100vw - 48px)/6),calc((var(--frame) - 112px)/var(--rows)));height:var(--frame);grid-template-columns:repeat(6,var(--cell));justify-content:center;align-content:center;gap:2px}.flat-cell{min-height:0;aspect-ratio:1}.flat-cell svg{max-height:100%}@media(max-width:510px){.flat-board{--frame:420px;--cell:min(calc((100vw - 40px)/6),calc(280px/var(--rows)));padding-top:70px;padding-bottom:35px}}
.languages button{min-width:44px}.wordmark{display:block;min-height:44px}.credits a,#provider,dialog a{display:inline-flex;align-items:center;min-height:44px}input::placeholder{color:#c8c6bf;opacity:1}