:root{--bg:#101418;--panel:#192026;--muted:#94a0a9;--gold:#d5aa58;--felt:#087c62;--wood:#704020}
*{box-sizing:border-box}
html{min-height:100%;background:#0c1013;overscroll-behavior-y:none}
body{margin:0;background-color:#0c1013;background-image:radial-gradient(circle at top,#25313a,#0c1013 55%);background-repeat:no-repeat;color:#f7f3ea;font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;min-height:100vh;min-height:100dvh;overscroll-behavior-y:none}
.app{width:min(100%,1040px);margin:auto;min-height:100vh;padding:18px 16px 24px}
.topbar,.tray,.tools-row,.dialog-head{display:flex;align-items:center}
.topbar{justify-content:space-between}
.eyebrow{font-size:10px;letter-spacing:.25em;color:var(--gold);margin:0 0 2px}
.topbar h1{font-family:Georgia,"Noto Serif JP",serif;letter-spacing:.03em;margin:0;font-size:23px}
.primary-menu{display:flex;align-items:center;gap:4px;margin-top:12px;border-bottom:1px solid #39434b;overflow-x:auto;scrollbar-width:none}
.primary-menu::-webkit-scrollbar{display:none}
.primary-menu button{flex:0 0 auto;border:0;border-bottom:2px solid transparent;background:none;color:#dbe1e4;padding:9px 12px 8px;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap}
.primary-menu button.active,.primary-menu button:hover,.primary-menu button:focus-visible{border-bottom-color:var(--gold);color:var(--gold);outline:0}
.table-wrap{position:relative;padding:0;display:flex;justify-content:center;overflow:hidden;touch-action:none}
.table-and-tip{display:flex;justify-content:center;align-items:flex-start;gap:13px;min-width:max-content}
.side-controls{width:76px;flex:0 0 76px;display:flex;flex-direction:column;align-items:center;gap:10px}
.workspace{display:block}
.board-column{min-width:0;overflow-x:auto;padding:2px 0 4px;scrollbar-color:#56636b transparent}
.orientation-control{width:52px;flex:0 0 52px;display:flex;flex-direction:column;gap:7px;padding-top:8px}
.orientation-control span{color:var(--muted);font-size:11px;text-align:center;white-space:nowrap}
.orientation-control button{border:1px solid #56636b;background:#20282e;color:#fff;border-radius:9px;padding:9px 5px;font-size:14px;font-weight:900;cursor:pointer}
.orientation-control button.active{border-color:var(--gold);background:#d5aa5822;color:var(--gold);box-shadow:inset 0 0 0 1px #d5aa5844}
.guide-dialog{max-height:min(84vh,720px);overflow:auto}
.guide-label{margin:0 0 4px;color:var(--gold);font-size:12px;letter-spacing:.14em;font-weight:800}
.guide-dialog h2{margin:0;font-size:20px}
.guide-dialog ol{list-style:none;margin:18px 0 0;padding:0;counter-reset:steps}
.guide-dialog li{position:relative;padding:0 0 16px 38px;counter-increment:steps}
.guide-dialog li:before{content:counter(steps);position:absolute;left:0;top:0;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#d5aa58;color:#18130c;font-weight:900;font-size:12px}
.guide-dialog li b,.guide-dialog li span{display:block}
.guide-dialog li b{font-size:15px}
.guide-dialog li span{font-size:13px;line-height:1.55;color:#aeb7bd;margin-top:3px}
.guide-tip{margin:0;padding:12px;border-radius:10px;background:#0d806533;color:#d8f7ec;font-size:13px;line-height:1.55}
.table{width:310px;height:620px;flex:none;position:relative;background:repeating-linear-gradient(0deg,#934526 0 2px,#a9522e 2px 5px,#7d351f 5px 7px);border-radius:16px;padding:20px 18px;box-shadow:0 22px 45px #0008,inset 0 0 0 2px #6d2d1c,inset 0 0 0 4px #b9633c}
.board-column.landscape .table{width:620px;height:310px;padding:18px 20px}
.cloth{position:relative;width:100%;height:100%;overflow:hidden;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.42' stroke-width='.6' stroke-dasharray='2 2'%3E%3Cpath d='M25 0V200M50 0V200M75 0V200M0 25H100M0 50H100M0 75H100M0 100H100M0 125H100M0 150H100M0 175H100'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(90deg,#08ae7d,#08aa7a);background-size:100% 100%;box-shadow:inset 0 0 0 2px #08795e,inset 0 0 18px #006d50;border-radius:2px;touch-action:none}
.board-column.landscape .cloth{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.42' stroke-width='.6' stroke-dasharray='2 2'%3E%3Cpath d='M25 0V100M50 0V100M75 0V100M100 0V100M125 0V100M150 0V100M175 0V100M0 25H200M0 50H200M0 75H200'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(90deg,#08ae7d,#08aa7a)}
.target-guide{position:absolute;inset:0;z-index:7;pointer-events:none}
.target-guide:before,.target-guide:after{content:"";position:absolute;background:#fff9;box-shadow:0 0 3px #001}
.target-guide:before{left:var(--guide-x);top:0;width:1px;height:100%}
.target-guide:after{left:0;top:var(--guide-y);width:100%;height:1px}
.target-guide[hidden]{display:none}
.head-line,.spot{display:none}
.spot{position:absolute;width:5px;height:5px;border-radius:50%;background:#d9eee8aa;left:calc(50% - 2px)}
.head-spot{top:25%}
.foot-spot{top:75%}
.pocket{position:absolute;border:0;background:#020202;box-shadow:inset 0 2px 5px #000;z-index:4}
.p1,.p2,.p5,.p6{width:20px;height:20px;border-radius:7px;transform:rotate(45deg);box-shadow:0 0 0 2px #49180f,inset 0 2px 5px #000}
.p1{left:8px;top:8px}
.p2{right:8px;top:8px}
.p5{left:8px;bottom:8px}
.p6{right:8px;bottom:8px}
.p3,.p4{width:15px;height:28px;top:calc(50% - 14px);box-shadow:inset 0 2px 5px #000}
.p3{left:3px;border-radius:15px 0 0 15px}
.p4{right:3px;border-radius:0 15px 15px 0}
.board-column.landscape .p3,.board-column.landscape .p4{width:28px;height:15px;left:calc(50% - 14px);right:auto}
.board-column.landscape .p3{top:3px;border-radius:15px 15px 0 0}
.board-column.landscape .p4{top:auto;bottom:3px;border-radius:0 0 15px 15px}
.rail{position:absolute;display:flex;justify-content:space-around}
.rail i{width:4px;height:4px;background:#fff;border-radius:50%;box-shadow:0 1px 1px #0005}
.rail.top,.rail.bottom{left:52px;right:52px}
.rail.top{top:8px}
.rail.bottom{bottom:8px}
.rail.left,.rail.right{top:52px;bottom:52px;flex-direction:column}
.rail.left{left:8px}
.rail.right{right:8px}
.board-column.portrait .rail.top i:nth-child(n+4),.board-column.portrait .rail.bottom i:nth-child(n+4){display:none}
.board-column.landscape .rail.top,.board-column.landscape .rail.bottom{left:52px;right:52px}
.board-column.landscape .rail.left,.board-column.landscape .rail.right{top:52px;bottom:52px}
.board-column.landscape .rail.left i:nth-child(n+4),.board-column.landscape .rail.right i:nth-child(n+4){display:none}
.hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:#0b1418d9;border:1px solid #ffffff25;border-radius:20px;padding:7px 14px;font-size:11px;white-space:nowrap;pointer-events:none;transition:.3s}
.ball{position:absolute;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:900;color:#111;background:radial-gradient(circle at 30% 24%,#fff 0 5%,#ffffffa6 7%,transparent 22%),radial-gradient(circle at 68% 72%,#0008 0,transparent 48%),var(--ball);border:1px solid #ffffffbd;box-shadow:-2px -3px 5px #fff6 inset,2px 3px 4px #0009;transform:translate(-50%,-50%);user-select:none;touch-action:none;z-index:3}
.ball:before{content:"";position:absolute;width:4px;height:2px;border-radius:50%;background:#fff9;left:4px;top:3px;transform:rotate(-28deg)}
.ball.cue{background:radial-gradient(circle at 30% 24%,#fff 0 9%,transparent 24%),radial-gradient(circle at 65% 70%,#d8d1a7 0,#fffdf2 48%,#fff 72%)}
.ball.ghost{background:#ff404018;border:2px dotted #ff4040;box-shadow:0 1px 4px #0006;opacity:.9}
.ball.ghost:before{display:none}
.ball.striped{background:linear-gradient(#fff 0 22%,var(--ball) 22% 76%,#fff 76%)}
.ball span{background:#fff;border-radius:50%;min-width:11px;height:11px;display:grid;place-items:center;position:relative;z-index:2}
#ballsLayer .ball{width:var(--ball-size,16px);height:var(--ball-size,16px);font-size:calc(var(--ball-size,16px)*.4)}
#ballsLayer .ball span{min-width:55%;height:55%}
#ballsLayer .ball:before{width:20%;height:10%;left:20%;top:15%}
#ballsLayer .ball{-webkit-touch-callout:none}
.tray .mini{touch-action:none}
.tray .mini:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tray-drag-preview{position:fixed;pointer-events:none;z-index:1000;opacity:.85}
.tray{width:100%;flex-direction:column;align-items:center;margin:0;gap:8px}
.tray-balls{display:grid;grid-template-columns:repeat(2,22px);gap:5px 4px;justify-content:center;min-height:22px}
.tray .mini{position:static;transform:none;width:22px;height:22px;font-size:8px;cursor:pointer}
.tray button{border:1px solid #56636b;background:#20282e;color:#fff;border-radius:9px;padding:9px 5px;font-size:14px;font-weight:900;cursor:pointer}
.board-column.landscape>.tray{width:100%;max-width:620px;margin:10px auto 0;padding-left:0;flex-direction:row;justify-content:center;gap:12px}
.board-column.landscape>.tray .tray-balls{display:flex;flex-wrap:wrap;grid-template-columns:none;justify-content:center;gap:5px 4px;max-width:100%}
#lines{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible}
.shot-line{stroke:var(--line-color,#fff);stroke-width:var(--line-width,2);stroke-dasharray:8 5;filter:drop-shadow(0 1px 2px #000);pointer-events:none}
.plain-line{stroke:var(--line-color,#fff);stroke-width:var(--line-width,2);filter:drop-shadow(0 1px 2px #000);pointer-events:none}
.selected-line{stroke-width:calc(var(--line-width,2) + 1)}
.draft-line{opacity:.75}
.line-hit{stroke:transparent;stroke-width:16;pointer-events:stroke;cursor:move}
#notesLayer{position:absolute;inset:0;z-index:4;pointer-events:none}
.table-note{position:absolute;max-width:88%;padding:4px 7px;border-radius:5px;background:#07110d;font-size:18px;font-weight:900;line-height:1.35;white-space:pre-wrap;text-align:center;text-shadow:0 2px 3px #000,0 0 5px #000;transform:translate(-50%,-50%);cursor:move;user-select:none;touch-action:none;pointer-events:auto}
.tools{position:relative;z-index:10;width:min(100%,480px);margin:0 0 12px}
.tools-row{padding:10px 12px;background:transparent;border-top:1px solid #303940;justify-content:space-around}
.tools-row>button{border:1px solid transparent;background:none;color:#fff;font-size:10px;min-width:42px;border-radius:10px}
.tools-row>button>span{display:block;font-size:22px;margin-bottom:2px}
.tools-row>button b{font:inherit;font-weight:500;white-space:nowrap}
.tools-row>button.active{color:var(--gold);border-color:var(--gold);background:#d5aa5818}
.tools-row>.save{background:#fff;color:#151b20;border-radius:13px;padding:7px 10px}
.line-color-panel{position:absolute;z-index:12;left:50%;top:100%;transform:translateX(-50%);margin-top:10px;width:min(calc(100% - 24px),420px);padding:12px;background:#192026f7;border:1px solid #46525a;border-radius:15px;box-shadow:0 14px 35px #000b;backdrop-filter:blur(14px)}
.color-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.color-panel-head b,.color-panel-head small{display:block}
.color-panel-head small{margin-top:2px;color:#b8c2c8;font-size:11px;font-weight:500}
.color-panel-close{border:1px solid #75828a;background:#28333a;color:#fff;border-radius:9px;padding:6px 9px;font-weight:700;cursor:pointer}
.color-line-types{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:9px}
.color-line-types button{border:1px solid #63717a;background:#28333a;color:#fff;border-radius:9px;padding:8px;font-weight:800;cursor:pointer}
.color-line-types button.active{border-color:#fff;background:#ffffff20;box-shadow:inset 0 0 0 1px #fff}
.auto-color-btn{width:100%;margin:0 0 10px;border:1px solid #63717a;background:#28333a;color:#fff;border-radius:9px;padding:8px 9px;font-weight:700;cursor:pointer}
.auto-color-btn.active{border-color:#fff;background:#ffffff18;color:#fff}
.line-color-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}
.color-swatch{position:relative;transform:none;cursor:pointer}
.color-swatch.active{outline:2px solid #fff;outline-offset:2px}
.line-width-control{display:flex;align-items:center;gap:10px;margin-bottom:9px;color:#c7d0d5;font-size:13px}
.line-width-control input[type=range]{flex:1;accent-color:var(--gold)}
.line-width-value{min-width:18px;text-align:center;font-weight:800;color:#fff}
.custom-color{display:flex;align-items:center;justify-content:space-between;margin-top:10px;color:#c7d0d5;font-size:13px}
.custom-color input,.memo-style-grid input{width:48px;height:30px;border:0;background:none;padding:0}
dialog{width:min(calc(100% - 32px),430px);border:1px solid #3c474f;border-radius:20px;background:#192026;color:#fff;padding:20px}
dialog::backdrop{background:#000a;backdrop-filter:blur(3px)}
dialog h2{margin:0 0 15px}
textarea{width:100%;height:130px;border:1px solid #3b4850;border-radius:12px;background:#10161a;color:#fff;padding:12px;font:inherit}
.memo-style-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:11px 0}
.memo-style-grid label{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#252e34;border-radius:9px;padding:8px 9px;color:#d9e0e4;font-size:13px}
.memo-style-grid select{min-width:86px;border:1px solid #52606a;border-radius:7px;background:#182026;color:#fff;padding:6px}
.memo-transparent{display:flex;align-items:center;gap:7px;margin:0 0 10px;color:#d9e0e4;font-size:13px}
.result{display:flex;gap:12px;margin:14px 0}
.result label{flex:1;background:#252e34;padding:11px;border-radius:10px}
.memo-actions{display:flex;gap:10px}
.memo-actions button{flex:1;border:0;border-radius:12px;padding:13px;font-weight:800;color:#151b20}
.memo-actions .memo-cancel{background:#3a464e;color:#fff}
.memo-actions button[value="ok"]{background:var(--gold)}
.dialog-head{justify-content:space-between}
.dialog-head button{background:none;border:0;color:#fff;font-size:24px}
.saved-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:5px 0 12px;flex-wrap:wrap}
.saved-view-buttons{display:flex;gap:5px}
.saved-controls button,.saved-controls select{border:1px solid #52606a;border-radius:8px;background:#28333a;color:#fff;padding:7px 9px}
.saved-controls button.active{border-color:var(--gold);color:var(--gold)}
.saved-controls label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px}
.saved-card{background:#232c32;border-radius:12px;padding:13px;margin-top:10px}
.saved-summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:9px}
.saved-summary b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-summary time{color:var(--muted);font-size:11px;white-space:nowrap}
.saved-expand{border:0;border-radius:7px;background:#3a464e;color:#fff;padding:6px 8px}
.saved-details{margin-top:8px}
.saved-table-head{display:grid;grid-template-columns:minmax(0,1fr) auto 48px;gap:9px;padding:0 13px 4px;color:var(--muted);font-size:10px}
.saved-list.list-view .saved-card{padding:10px 13px;margin-top:5px;border-radius:8px}
.saved-title-input{width:100%;border:1px solid #52606a;border-radius:8px;background:#182026;color:#fff;font-size:16px;font-weight:800;padding:8px 9px}
.saved-card b,.saved-card small{display:block}
.saved-card small{color:var(--muted);margin-top:6px;line-height:1.55}
.saved-actions{display:flex;gap:7px;flex-wrap:wrap}
.saved-card button{margin-top:9px;border:0;border-radius:8px;padding:7px 11px;background:#3a464e;color:#fff}
.saved-card .danger{background:#5b2525;color:#ffdada}
.tip-point{width:76px;text-align:center;padding-top:7px}
.tip-label{margin:0 0 8px;color:var(--gold);font-size:14px;font-weight:800}
.cue-diagram{position:relative;width:70px;height:70px;border-radius:50%;cursor:crosshair;touch-action:pinch-zoom;background:radial-gradient(circle at 30% 24%,#fff 0 8%,transparent 23%),radial-gradient(circle at 66% 72%,#d8d1a7 0,#fffdf2 50%,#fff 72%);border:1px solid #fff;box-shadow:-5px -6px 11px #fff7 inset,6px 8px 12px #0008,0 0 0 4px #ffffff12}
.cue-diagram:after{content:"";position:absolute;inset:8px;border:1px dashed #77808766;border-radius:50%;pointer-events:none}
.tip-mark{position:absolute;width:9px;height:9px;border-radius:50%;background:#e6382e;border:1.5px solid #fff;box-shadow:0 1px 4px #000;transform:translate(-50%,-50%);z-index:2;pointer-events:none}
.tip-help{margin:9px 0 5px;color:var(--muted);font-size:11px;line-height:1.3}
.tip-clear{border:0;background:none;color:#d8dde0;font-size:11px;text-decoration:underline;padding:3px;cursor:pointer}
@media(max-width:640px){.app{width:min(100%,480px);padding-left:10px;padding-right:10px}
.topbar h1{font-size:21px}
.primary-menu{margin-top:10px}
.primary-menu button{padding-left:9px;padding-right:9px;font-size:13px}
.table-and-tip{gap:8px}
.orientation-control{width:44px;flex-basis:44px}
.orientation-control span{font-size:10px}
.orientation-control button{padding:8px 3px}
.side-controls,.tip-point{width:60px;flex-basis:60px}
.cue-diagram{width:60px;height:60px}
.tray-balls{grid-template-columns:repeat(2,20px)}
.tray .mini{width:20px;height:20px}
.tools-row{overflow-x:auto;justify-content:flex-start;gap:3px}
.tools-row>button{flex:0 0 47px}
}
@media(max-width:390px){.table-and-tip{gap:6px}.orientation-control{width:38px;flex-basis:38px}.orientation-control span{font-size:9px}.orientation-control button{padding:7px 2px}.side-controls,.tip-point{width:52px;flex-basis:52px}.cue-diagram{width:50px;height:50px}.tip-help{font-size:10px}.tray-balls{grid-template-columns:repeat(2,18px)}.tray .mini{width:18px;height:18px}}

#saveState[hidden]{display:none}

/* Compact text tools and original round palette balls. */
.primary-menu{flex-wrap:wrap;overflow:visible}
.quick-help{font-size:11px;line-height:1.5;color:var(--muted);padding:4px 9px}
.tools{width:min(100%,640px)}
.tools-row{flex-wrap:wrap;justify-content:flex-start;gap:2px;padding:8px 4px;overflow:visible}
.tools-row>button{display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:0 0 auto;min-width:0;padding:7px 5px;font-size:13px;white-space:nowrap;border-radius:6px}
.tools-row>button>span{display:inline;font-size:14px;margin:0}
.tools-row>.tool-separator{display:inline;font-size:12px;color:#69757e;margin:0;user-select:none}
.tools-row>.save{padding:7px 8px;border-radius:6px}
.tools .color-swatch{width:32px;min-width:0;height:32px;padding:0;border-radius:50%;justify-self:center;flex:none}
@media(max-width:390px){.tools-row{gap:0}.tools-row>button{font-size:12px;padding:7px 3px}.tools-row>button>span{font-size:12px}.tools-row>.tool-separator{font-size:10px}.line-color-swatches{gap:7px 3px}.tools .color-swatch{width:28px;height:28px}}

/* Editing controls live beside the board, with explanations to their left. */
.table-and-tip{min-width:0}
.table-wrap{flex:none;display:block}
.table-wrap>.table{position:absolute;left:0;top:0;transform-origin:top left}
.editor-sidebar{flex:0 0 136px;width:136px;overflow-y:auto;scrollbar-width:thin;padding:4px 2px 4px 0}
.editor-sidebar .orientation-control{width:100%;padding:0;gap:6px}
.editor-sidebar .tools{width:100%;margin:10px 0 0;position:static}
.editor-sidebar .tools-row{display:flex;flex-direction:column;gap:6px;border-top:1px solid #39434b;padding:10px 0 0}
.editor-row{display:flex;align-items:center;justify-content:flex-end;gap:6px;width:100%}
.editor-row .tool-help{flex:1;color:var(--muted);font-size:11px;line-height:1.35;text-align:right;white-space:normal}
.editor-row button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:8px;border:1px solid #56636b;border-radius:9px;background:#20282e;color:#fff;cursor:pointer;font-size:16px;font-weight:800}
.editor-row button svg{width:26px;height:26px}
.editor-row button.active{border-color:var(--gold);color:var(--gold);background:#d5aa5822}
.editor-row button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.editor-row button.save{background:#fff;color:#151b20}
.line-color-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;width:min(calc(100vw - 24px),420px);max-height:calc(100dvh - 24px);overflow-y:auto;z-index:30}
@media(max-width:640px){.editor-sidebar{flex-basis:120px;width:120px}.editor-row{gap:4px}.editor-row .tool-help{font-size:10px}.editor-row button{flex-basis:42px;width:42px;height:42px}.editor-sidebar .tools-row,.editor-sidebar .orientation-control{gap:5px}}
@media(max-height:500px){.app{padding-top:8px;padding-bottom:8px}.eyebrow{display:none}.topbar h1{font-size:18px}.primary-menu{margin-top:4px}.primary-menu button{padding-top:6px;padding-bottom:6px}.editor-sidebar{padding-top:1px;padding-bottom:1px}.editor-sidebar .tools{margin-top:2px}.editor-sidebar .tools-row{padding-top:2px;gap:2px}.editor-sidebar .orientation-control{gap:2px}.editor-row button{height:28px;padding:3px}.editor-sidebar .orientation-control button{padding:3px}.editor-row button svg{width:20px;height:20px}}

/* 台が横向きの時もメニューを上に配置 */
.board-column.landscape .table-and-tip{position:relative}
.board-column.landscape .editor-sidebar{position:absolute;bottom:-45px;left:50%;transform:translateX(-50%);flex:0 0 auto;width:auto;max-width:calc(100% + 100px);display:flex;flex-direction:row;align-items:center;gap:4px;padding:6px 8px;background:#192026f7;border:1px solid #46525a;border-radius:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;z-index:10}
.board-column.landscape .editor-sidebar .orientation-control{flex:0 0 auto;width:auto;display:flex;flex-direction:row;gap:2px;padding:0}
.board-column.landscape .editor-sidebar .orientation-control>div{display:flex;flex-direction:row;align-items:center;gap:2px;flex:0 0 auto}
.board-column.landscape .editor-sidebar .orientation-control span{display:none}
.board-column.landscape .editor-sidebar .orientation-control button{padding:5px 6px;font-size:11px;height:34px;width:auto}
.board-column.landscape .editor-sidebar .tools{flex:1;width:auto;margin:0;position:static}
.board-column.landscape .editor-sidebar .tools-row{display:flex;flex-direction:row;gap:2px;border-top:none;border-left:1px solid #39434b;padding:0 0 0 4px;margin:0;flex:1}
.board-column.landscape .editor-row{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:2px;width:auto}
.board-column.landscape .editor-row .tool-help{display:none}
.board-column.landscape .editor-row button{flex:0 0 34px;width:34px;height:34px;padding:4px;font-size:12px}
.board-column.landscape .editor-row button svg{width:18px;height:18px}


/* タブレット以上：デフォルトレイアウト保持 */
@media(min-width:768px){.table-and-tip{position:static}.editor-sidebar{flex:0 0 136px;width:136px;overflow-y:auto;scrollbar-width:thin;padding:4px 2px 4px 0;position:static}.editor-sidebar .orientation-control{width:100%;padding:0;gap:6px}.editor-sidebar .tools{width:100%;margin:10px 0 0;position:static}.editor-sidebar .tools-row{display:flex;flex-direction:column;gap:6px;border-top:1px solid #39434b;padding:10px 0 0}.editor-row{display:flex;align-items:center;justify-content:flex-end;gap:6px;width:100%}.editor-row .tool-help{flex:1;color:var(--muted);font-size:11px;line-height:1.35;text-align:right;white-space:normal}.editor-row button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:8px;border:1px solid #56636b;border-radius:9px;background:#20282e;color:#fff;cursor:pointer;font-size:16px;font-weight:800}.editor-row button svg{width:26px;height:26px}.editor-row button.active{border-color:var(--gold);color:var(--gold);background:#d5aa5822}.editor-row button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.editor-row button.save{background:#fff;color:#151b20}}


/* Draggable expandable floating editor menu */
.editor-sidebar{
  background:#192026f2;
  border:1px solid #46525a;
  border-radius:18px;
  padding:10px;
  box-shadow:0 14px 34px #0009;
  backdrop-filter:blur(12px);
  overflow:visible;
  transition:width .2s ease,border-radius .2s ease;
}
.menu-toggle-btn{
  order:99;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  width:58px;
  height:58px;
  margin:8px 0 0 auto;
  padding:5px;
  border:1px solid #d5aa5888;
  border-radius:50%;
  background:#20282e;
  color:var(--gold);
  box-shadow:0 8px 20px #0008;
  cursor:grab;
}
.menu-toggle-btn span{font-size:23px;line-height:1}
.menu-toggle-btn small{font-size:9px;font-weight:800;color:#f7f3ea}
.editor-sidebar.menu-collapsed{
  width:68px!important;
  height:68px;
  padding:4px;
  border-radius:50%;
  overflow:hidden!important;
}
.editor-sidebar.menu-collapsed>.orientation-control,
.editor-sidebar.menu-collapsed>.tools{display:none!important}
.editor-sidebar.menu-collapsed .menu-toggle-btn{
  width:58px;height:58px;margin:0;
}
.editor-sidebar:not(.menu-collapsed) .menu-toggle-btn span{font-size:27px}
.editor-sidebar:not(.menu-collapsed) .menu-toggle-btn small{display:none}
.editor-sidebar:not(.menu-collapsed){max-height:calc(100dvh - 16px);overflow-y:auto}
@media(max-width:767px){
  .editor-sidebar{width:128px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important}
  .editor-sidebar .orientation-control{display:flex;flex-direction:column}
  .editor-sidebar .orientation-control>div{display:flex}
  .editor-sidebar .orientation-control span,.editor-sidebar .editor-row .tool-help{display:block}
  .editor-sidebar .tools{width:100%;margin:8px 0 0}
  .editor-sidebar .tools-row{display:flex;flex-direction:column;border-left:0;border-top:1px solid #39434b;padding:8px 0 0}
  .editor-sidebar .editor-row{display:flex;width:100%;justify-content:flex-end}
  .editor-sidebar .editor-row button{flex:0 0 42px;width:42px;height:42px}
  .editor-sidebar.menu-collapsed{width:68px!important;display:block!important}
}


/* Keep the default menu beside the table; expanded tools use two columns. */
.table-and-tip{align-items:flex-start}
.editor-sidebar,
.board-column.landscape .editor-sidebar{
  position:static;
  inset:auto;
  transform:none;
  flex:0 0 clamp(132px,34vw,170px);
  width:clamp(132px,34vw,170px)!important;
  max-width:170px;
  display:block;
  padding:9px;
  border-radius:18px;
  overflow-y:auto;
  overflow-x:hidden;
}
.editor-sidebar .menu-toggle-btn,
.board-column.landscape .editor-sidebar .menu-toggle-btn{
  display:flex;
  width:48px;height:48px;
  margin:0 auto 8px;
  border-radius:50%;
}
.editor-sidebar:not(.menu-collapsed) .menu-toggle-btn small{display:none}
.editor-sidebar .orientation-control,
.board-column.landscape .editor-sidebar .orientation-control{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  padding:0;
}
.editor-sidebar .orientation-control>div,
.board-column.landscape .editor-sidebar .orientation-control>div,
.editor-sidebar .tools-row,
.board-column.landscape .editor-sidebar .tools-row{
  display:contents;
}
.editor-sidebar .tools,
.board-column.landscape .editor-sidebar .tools{
  width:100%;
  margin:8px 0 0;
}
.editor-sidebar .tools-row,
.board-column.landscape .editor-sidebar .tools-row{
  border:0;
  padding:0;
}
.editor-sidebar .tools:after{
  content:"";
  display:block;
}
.editor-sidebar .tools{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px 5px;
  padding-top:8px;
  border-top:1px solid #39434b;
}
.editor-sidebar .editor-row,
.board-column.landscape .editor-sidebar .editor-row{
  width:auto;
  min-width:0;
  display:flex;
  flex-direction:column-reverse;
  justify-content:flex-end;
  gap:3px;
}
.editor-sidebar .editor-row .tool-help,
.board-column.landscape .editor-sidebar .editor-row .tool-help{
  display:block;
  width:100%;
  min-height:26px;
  color:var(--muted);
  font-size:9px;
  line-height:1.25;
  text-align:center;
}
.editor-sidebar .editor-row button,
.board-column.landscape .editor-sidebar .editor-row button{
  flex:0 0 42px;
  width:42px;height:42px;
  margin:auto;
}
.editor-sidebar.menu-collapsed,
.board-column.landscape .editor-sidebar.menu-collapsed{
  position:static;
  flex-basis:68px;
  width:68px!important;
  height:68px;
  padding:4px;
  border-radius:50%;
}
.editor-sidebar.menu-collapsed .menu-toggle-btn{margin:0}
.editor-sidebar.menu-detached{position:fixed!important;transform:none!important;z-index:5000}
@media(max-width:420px){
  .editor-sidebar,.board-column.landscape .editor-sidebar{flex-basis:128px;width:128px!important;padding:7px}
  .editor-sidebar .editor-row button,.board-column.landscape .editor-sidebar .editor-row button{width:38px;height:38px;flex-basis:38px;padding:6px}
  .editor-sidebar .editor-row .tool-help,.board-column.landscape .editor-sidebar .editor-row .tool-help{font-size:8px}
}

.editor-sidebar .orientation-control>div,
.board-column.landscape .editor-sidebar .orientation-control>div{
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  justify-content:flex-end;
  gap:3px;
}
.editor-sidebar .orientation-control>div .tool-help,
.board-column.landscape .editor-sidebar .orientation-control>div .tool-help{
  display:block;
  min-height:26px;
  font-size:9px;
  line-height:1.25;
  text-align:center;
}


/* Portrait: restore the original single-column menu. */
.board-column.portrait .editor-sidebar:not(.menu-collapsed):not(.menu-detached){
  position:static;
  flex:0 0 136px;
  width:136px!important;
  max-width:136px;
  padding:9px;
}
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .orientation-control,
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .tools{
  display:flex;
  flex-direction:column;
}
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .orientation-control{gap:6px}
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .tools{
  gap:6px;
  padding-top:8px;
}
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .orientation-control>div,
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .tools-row,
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .editor-row{
  display:flex;
}
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .tools-row{
  flex-direction:column;
  gap:6px;
}
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .editor-row,
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .orientation-control>div{
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
}
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .editor-row .tool-help,
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .orientation-control .tool-help{
  min-height:0;
  font-size:11px;
  text-align:right;
}

/* Landscape: fixed default row immediately above the ball tray. */
.board-column.landscape>.editor-sidebar:not(.menu-detached){
  position:static;
  width:max-content!important;
  max-width:100%;
  flex:none;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:5px;
  margin:8px auto 5px!important;
  padding:6px 8px;
  border-radius:10px;
  overflow-x:auto;
  overflow-y:hidden;
}
.board-column.landscape>.editor-sidebar:not(.menu-detached) .menu-toggle-btn{
  order:0;
  flex:0 0 38px;
  width:38px;height:38px;
  margin:0 3px 0 0;
}
.board-column.landscape>.editor-sidebar:not(.menu-detached) .orientation-control,
.board-column.landscape>.editor-sidebar:not(.menu-detached) .tools,
.board-column.landscape>.editor-sidebar:not(.menu-detached) .tools-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  width:auto;
  margin:0;
  padding:0;
  border:0;
  gap:3px;
}
.board-column.landscape>.editor-sidebar:not(.menu-detached) .orientation-control>div,
.board-column.landscape>.editor-sidebar:not(.menu-detached) .editor-row{
  display:block;
  width:auto;
}
.board-column.landscape>.editor-sidebar:not(.menu-detached) .tool-help{display:none}
.board-column.landscape>.editor-sidebar:not(.menu-detached) .editor-row button,
.board-column.landscape>.editor-sidebar:not(.menu-detached) .orientation-control button{
  width:36px;height:36px;
  min-width:36px;
  padding:5px;
}
.board-column.landscape>.editor-sidebar.menu-collapsed:not(.menu-detached){
  width:68px!important;
  height:68px;
  margin:8px auto 5px!important;
  overflow:hidden;
}
/* A detached menu must stay draggable even while collapsed. */
.editor-sidebar.menu-detached,
.editor-sidebar.menu-detached.menu-collapsed,
.board-column.landscape .editor-sidebar.menu-detached,
.board-column.portrait .editor-sidebar.menu-detached{
  position:fixed!important;
  z-index:20;
}


/* Align every row in the portrait editor menu. */
.board-column.portrait .editor-sidebar:not(.menu-collapsed):not(.menu-detached){
  width:150px!important;
  max-width:150px;
  flex-basis:150px;
}
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .editor-row,
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .orientation-control>div{
  display:grid;
  grid-template-columns:minmax(0,1fr) 44px;
  align-items:center;
  column-gap:7px;
  width:100%;
}
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .editor-row .tool-help,
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .orientation-control .tool-help{
  width:100%;
  margin:0;
  text-align:right;
}
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .editor-row button,
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .orientation-control button{
  width:44px;
  height:44px;
  margin:0;
}

/* Two-line help above the board. */
.quick-help{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.menu-help-line{color:#d5aa58;font-weight:800}

/* Make the landscape phone layout fill the viewport without clipping. */
@media (orientation:landscape) and (max-height:600px){
  html,body{min-height:100dvh}
  body{overflow:hidden}
  .app{
    width:100%;
    max-width:none;
    height:100dvh;
    min-height:0;
    padding:4px 8px;
    overflow:hidden;
  }
  .topbar{height:27px}
  .eyebrow{display:none}
  .topbar h1{font-size:16px;line-height:1}
  .primary-menu{
    min-height:34px;
    margin-top:1px;
    flex-wrap:nowrap;
    gap:3px;
    overflow:visible;
  }
  .primary-menu button{padding:5px 7px 4px;font-size:11px}
  .quick-help{font-size:8px;line-height:1.2;padding:2px 4px;white-space:nowrap}
  .workspace,.board-column{height:calc(100dvh - 66px);overflow:hidden}
  .table-and-tip{gap:6px}
  .side-controls,.tip-point{width:54px;flex-basis:54px}
  .cue-diagram{width:48px;height:48px}
  .tip-label{font-size:11px;margin-bottom:3px}
  .tip-help{margin:4px 0 1px;font-size:8px}
  .tip-clear{font-size:8px}
  .board-column.landscape>.editor-sidebar:not(.menu-detached){
    height:42px;
    min-height:42px;
    margin:3px auto 2px!important;
    padding:2px 5px;
  }
  .board-column.landscape>.editor-sidebar:not(.menu-detached) .menu-toggle-btn{
    width:32px;height:32px;flex-basis:32px;
  }
  .board-column.landscape>.editor-sidebar:not(.menu-detached) .editor-row button,
  .board-column.landscape>.editor-sidebar:not(.menu-detached) .orientation-control button{
    width:32px;height:32px;min-width:32px;padding:4px;
  }
  .board-column.landscape>.tray{
    min-height:31px;
    margin:1px auto 0;
    gap:6px;
  }
  .board-column.landscape>.tray .tray-balls{gap:2px}
  .board-column.landscape>.tray .mini{width:19px;height:19px}
  .board-column.landscape>.tray button{padding:4px 6px;font-size:10px}
  .hint{bottom:5px;padding:4px 9px;font-size:9px}
}


/* The floating menu uses icons only; explanations live in the yellow help line. */
.editor-sidebar .tool-help,
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .editor-row .tool-help,
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .orientation-control .tool-help,
.board-column.landscape .editor-sidebar .tool-help{
  display:none!important;
}
.board-column.portrait .editor-sidebar:not(.menu-collapsed):not(.menu-detached){
  width:68px!important;
  max-width:68px;
  flex-basis:68px;
  padding:7px;
}
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .editor-row,
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .orientation-control>div{
  display:flex;
  justify-content:center;
  width:100%;
}
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .orientation-control,
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .tools,
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .tools-row{
  align-items:center;
}
.menu-help-line{white-space:normal}


/* Mobile portrait: keep the board fixed and scroll only inside the tall menu. */
.editor-sidebar .menu-toggle-btn{
  position:sticky;
  top:0;
  z-index:2;
  flex-shrink:0;
}
@media (orientation:portrait) and (max-width:767px){
  html,body{
    width:100%;
    height:100dvh;
    min-height:0;
    overflow:hidden;
    overscroll-behavior:none;
  }
  .app{
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }
  .workspace,.board-column{
    overflow:hidden;
    overscroll-behavior:none;
  }
  .board-column.portrait .editor-sidebar:not(.menu-detached){
    position:static;
    align-self:flex-start;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .board-column.portrait .editor-sidebar.menu-collapsed:not(.menu-detached){
    overflow:hidden!important;
  }
}


/* Arrow settings are a viewport popup, never clipped by the editor menu. */
#lineColorPanel{
  position:fixed!important;
  inset:50% auto auto 50%!important;
  transform:translate(-50%,-50%)!important;
  width:min(calc(100vw - 24px),420px)!important;
  max-height:calc(100dvh - 24px)!important;
  overflow-y:auto!important;
  z-index:2000!important;
  pointer-events:auto;
}
#lineColorPanel .color-swatch{
  width:32px;
  min-width:0;
  height:32px;
  padding:0;
  border-radius:50%;
  justify-self:center;
}
.editor-sidebar.menu-detached,
.editor-sidebar.menu-detached.menu-collapsed{
  z-index:1500!important;
  pointer-events:auto!important;
}
.editor-sidebar.menu-detached .menu-toggle-btn{
  position:sticky;
  z-index:1501;
  pointer-events:auto;
}


/* Landscape table on phones: keep every editor control in one horizontal row. */
@media (max-width:767px){
  .board-column.landscape>.editor-sidebar:not(.menu-detached):not(.menu-collapsed){
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    width:max-content!important;
    max-width:620px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }
  .board-column.landscape>.editor-sidebar:not(.menu-detached) .orientation-control,
  .board-column.landscape>.editor-sidebar:not(.menu-detached) .tools,
  .board-column.landscape>.editor-sidebar:not(.menu-detached) .tools-row{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    width:auto!important;
  }
}


/* The round open/close control is also the drag handle. */
.menu-toggle-btn{
  touch-action:none!important;
  user-select:none;
  -webkit-user-select:none;
}


/* Direct touch movement for balls on the table. */
#ballsLayer .ball{touch-action:none;cursor:grab}
#ballsLayer .ball:active{cursor:grabbing}

/* A closed menu is only the round button; no second outer frame. */
.editor-sidebar.menu-collapsed,
.board-column.landscape .editor-sidebar.menu-collapsed,
.board-column.portrait .editor-sidebar.menu-collapsed{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  min-height:58px!important;
  flex:0 0 58px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

/* Keep the horizontal menu's size and internal layout while it is dragged. */
.board-column.landscape .editor-sidebar.menu-detached:not(.menu-collapsed){
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  width:max-content!important;
  max-width:calc(100vw - 8px)!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  transition:none!important;
}
.board-column.landscape .editor-sidebar.menu-detached:not(.menu-collapsed) .orientation-control,
.board-column.landscape .editor-sidebar.menu-detached:not(.menu-collapsed) .tools,
.board-column.landscape .editor-sidebar.menu-detached:not(.menu-collapsed) .tools-row{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
.board-column.landscape .editor-sidebar.menu-detached:not(.menu-collapsed) .orientation-control>div,
.board-column.landscape .editor-sidebar.menu-detached:not(.menu-collapsed) .editor-row{
  display:block!important;
  width:auto!important;
}


/* Detached editor: an independent compact popup, regardless of table direction. */
body>.editor-sidebar.menu-detached:not(.menu-collapsed){
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:4px!important;
  width:max-content!important;
  max-width:calc(100vw - 8px)!important;
  height:auto!important;
  max-height:54px!important;
  margin:0!important;
  padding:5px 6px!important;
  border-radius:10px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  transition:none!important;
}
body>.editor-sidebar.menu-detached:not(.menu-collapsed)>.menu-toggle-btn{
  position:static!important;
  order:0!important;
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  margin:0 3px 0 0!important;
}
body>.editor-sidebar.menu-detached:not(.menu-collapsed)>.orientation-control,
body>.editor-sidebar.menu-detached:not(.menu-collapsed)>.tools,
body>.editor-sidebar.menu-detached:not(.menu-collapsed)>.tools>.tools-row{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:3px!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
body>.editor-sidebar.menu-detached:not(.menu-collapsed) .orientation-control>div,
body>.editor-sidebar.menu-detached:not(.menu-collapsed) .editor-row{
  display:block!important;
  flex:0 0 auto!important;
  width:auto!important;
  margin:0!important;
}
body>.editor-sidebar.menu-detached:not(.menu-collapsed) .editor-row button,
body>.editor-sidebar.menu-detached:not(.menu-collapsed) .orientation-control button{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  margin:0!important;
  padding:5px!important;
}


/* Detached menu always remains visible at its dragged viewport position. */
body>.editor-sidebar.menu-detached,
body>.editor-sidebar.menu-detached.menu-collapsed{
  position:fixed!important;
  right:auto!important;
  bottom:auto!important;
  z-index:5000!important;
  pointer-events:auto!important;
}
body>.editor-sidebar.menu-detached.menu-collapsed>.menu-toggle-btn{
  position:static!important;
  z-index:5001!important;
  visibility:visible!important;
  opacity:1!important;
}


/* Visible grip for moving the menu while it is expanded. */
.menu-drag-handle{
  order:-1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 24px;
  width:24px;
  height:38px;
  color:#d5aa58;
  font-size:20px;
  line-height:1;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.menu-drag-handle:active{cursor:grabbing}
.editor-sidebar.menu-collapsed>.menu-drag-handle{display:none!important}

/* On a portrait phone, a moved/expanded menu stays vertical. */
@media (orientation:portrait) and (max-width:767px){
  body>.editor-sidebar.menu-detached:not(.menu-collapsed){
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:4px!important;
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
    height:auto!important;
    max-height:calc(100dvh - 8px)!important;
    padding:5px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  body>.editor-sidebar.menu-detached:not(.menu-collapsed)>.menu-drag-handle{
    order:-1!important;
    flex:0 0 18px!important;
    width:38px!important;
    height:18px!important;
  }
  body>.editor-sidebar.menu-detached:not(.menu-collapsed)>.menu-toggle-btn{
    order:0!important;
    flex:0 0 38px!important;
    width:38px!important;
    height:38px!important;
    margin:0!important;
  }
  body>.editor-sidebar.menu-detached:not(.menu-collapsed)>.orientation-control,
  body>.editor-sidebar.menu-detached:not(.menu-collapsed)>.tools,
  body>.editor-sidebar.menu-detached:not(.menu-collapsed)>.tools>.tools-row{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:3px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }
}


/* Center the move grip in the default portrait menu. */
.board-column.portrait .editor-sidebar:not(.menu-collapsed)>.menu-drag-handle,
body>.editor-sidebar.menu-detached[data-orientation="portrait"]:not(.menu-collapsed)>.menu-drag-handle{
  margin-left:auto!important;
  margin-right:auto!important;
  align-self:center!important;
}

/* A detached menu follows the selected table direction, not viewport dimensions. */
body>.editor-sidebar.menu-detached[data-orientation="portrait"]:not(.menu-collapsed){
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:4px!important;
  width:58px!important;
  min-width:58px!important;
  max-width:58px!important;
  height:auto!important;
  max-height:calc(100dvh - 8px)!important;
  padding:5px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
body>.editor-sidebar.menu-detached[data-orientation="portrait"]:not(.menu-collapsed)>.menu-drag-handle{
  order:-1!important;
  flex:0 0 18px!important;
  width:38px!important;
  height:18px!important;
}
body>.editor-sidebar.menu-detached[data-orientation="portrait"]:not(.menu-collapsed)>.menu-toggle-btn{
  order:0!important;
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  margin:0!important;
}
body>.editor-sidebar.menu-detached[data-orientation="portrait"]:not(.menu-collapsed)>.orientation-control,
body>.editor-sidebar.menu-detached[data-orientation="portrait"]:not(.menu-collapsed)>.tools,
body>.editor-sidebar.menu-detached[data-orientation="portrait"]:not(.menu-collapsed)>.tools>.tools-row{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:3px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}
body>.editor-sidebar.menu-detached[data-orientation="landscape"]:not(.menu-collapsed){
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  width:max-content!important;
  max-width:calc(100vw - 8px)!important;
  height:auto!important;
  max-height:54px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}


/* Keep the original expanded-menu slot reserved while the menu floats. */
.menu-placeholder{visibility:hidden;pointer-events:none}
.board-column.portrait .editor-sidebar.menu-collapsed:not(.menu-detached){
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  flex:0 0 68px!important;
  width:68px!important;
  min-width:68px!important;
  max-width:68px!important;
  height:58px!important;
  padding:0 5px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}


/* Use the pre-expansion 58px width for every portrait menu state. */
.board-column.portrait .editor-sidebar:not(.menu-detached),
.board-column.portrait .editor-sidebar:not(.menu-collapsed):not(.menu-detached),
.board-column.portrait .editor-sidebar.menu-collapsed:not(.menu-detached),
body>.editor-sidebar.menu-detached[data-orientation="portrait"]{
  flex-basis:58px!important;
  width:58px!important;
  min-width:58px!important;
  max-width:58px!important;
}
.board-column.portrait .menu-placeholder{
  flex:0 0 58px!important;
  width:58px!important;
  min-width:58px!important;
  max-width:58px!important;
}


/* v65: portrait menu uses the compact third-reference dimensions everywhere. */
.board-column.portrait .editor-sidebar:not(.menu-collapsed):not(.menu-detached),
body>.editor-sidebar.menu-detached[data-orientation="portrait"]:not(.menu-collapsed){
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex:0 0 58px!important;
  width:58px!important;
  min-width:58px!important;
  max-width:58px!important;
  height:fit-content!important;
  min-height:0!important;
  max-height:calc(100dvh - 8px)!important;
  padding:5px!important;
  gap:3px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
.board-column.portrait .editor-sidebar:not(.menu-collapsed)>.menu-drag-handle,
body>.editor-sidebar.menu-detached[data-orientation="portrait"]:not(.menu-collapsed)>.menu-drag-handle{
  box-sizing:border-box!important;
  flex:0 0 18px!important;
  width:38px!important;
  height:18px!important;
  min-height:18px!important;
  margin:0 auto!important;
  padding:0!important;
  align-self:center!important;
}
.board-column.portrait .editor-sidebar:not(.menu-collapsed)>.menu-toggle-btn,
body>.editor-sidebar.menu-detached[data-orientation="portrait"]:not(.menu-collapsed)>.menu-toggle-btn{
  box-sizing:border-box!important;
  flex:0 0 38px!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  margin:0 auto!important;
  padding:4px!important;
  align-self:center!important;
}
.board-column.portrait .editor-sidebar:not(.menu-collapsed)>.orientation-control,
.board-column.portrait .editor-sidebar:not(.menu-collapsed)>.tools,
.board-column.portrait .editor-sidebar:not(.menu-collapsed)>.tools>.tools-row,
body>.editor-sidebar.menu-detached[data-orientation="portrait"]:not(.menu-collapsed)>.orientation-control,
body>.editor-sidebar.menu-detached[data-orientation="portrait"]:not(.menu-collapsed)>.tools,
body>.editor-sidebar.menu-detached[data-orientation="portrait"]:not(.menu-collapsed)>.tools>.tools-row{
  box-sizing:border-box!important;
  flex:0 0 auto!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  gap:3px!important;
}
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .editor-row,
body>.editor-sidebar.menu-detached[data-orientation="portrait"]:not(.menu-collapsed) .editor-row{
  flex:0 0 auto!important;
  width:100%!important;
  height:38px!important;
  min-height:38px!important;
  margin:0!important;
  padding:0!important;
}
.board-column.portrait .editor-sidebar:not(.menu-collapsed) .editor-row>button,
body>.editor-sidebar.menu-detached[data-orientation="portrait"]:not(.menu-collapsed) .editor-row>button{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 38px!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  margin:0 auto!important;
}


/* v66: keep the close/open control at the bottom; only the grip is draggable. */
.board-column.portrait .editor-sidebar:not(.menu-collapsed)>.menu-toggle-btn,
body>.editor-sidebar.menu-detached[data-orientation="portrait"]:not(.menu-collapsed)>.menu-toggle-btn{
  order:99!important;
  margin:0 auto!important;
}
@media (orientation:portrait) and (max-width:767px){
  .board-column.portrait .editor-sidebar:not(.menu-collapsed)>.menu-toggle-btn,
  body>.editor-sidebar.menu-detached[data-orientation="portrait"]:not(.menu-collapsed)>.menu-toggle-btn{
    order:99!important;
  }
}


#ballsLayer .linked-ghost{opacity:.9;cursor:pointer;z-index:2}
#ghostToggle[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}

.save-toast{position:fixed;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:10000;background:#163e2f;color:#fff;border:1px solid #8bdbad;border-radius:12px;padding:14px 20px;box-shadow:0 4px 20px #0006;font-size:15px;font-weight:700;text-align:center;max-width:calc(100vw - 32px);width:max-content;pointer-events:none}

/* Save feedback sits over the cloth without changing table layout. */
.save-toast{bottom:auto;transform:translate(-50%,-50%);padding:12px 14px;overflow-wrap:anywhere;font-size:14px;line-height:1.5}
/* Phone-only sizing: retain the board, side tray and icon menu positions. */
@media (max-width:767px), (pointer:coarse) and (max-height:600px){
  html,body{height:auto;min-height:100dvh;overflow-x:clip;overflow-y:auto;overscroll-behavior-y:auto}
  .app{height:auto;min-height:100dvh;overflow:visible;padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .workspace,.board-column{height:auto;min-width:0;max-width:100%;overflow:visible}
  .topbar{height:auto;min-width:0}.topbar h1{font-size:clamp(15px,4.5vw,22px);line-height:1.35;overflow-wrap:anywhere}
  .primary-menu{flex-wrap:wrap;min-width:0;max-width:100%}
  .primary-menu button{flex:1 1 auto;min-width:0;padding:8px 5px;font-size:clamp(11px,3.3vw,13px);white-space:normal}
  .quick-help{flex:1 1 100%;min-width:0;padding:4px 0;white-space:normal;overflow-wrap:anywhere;font-size:10px;line-height:1.45}
  .quick-help span{max-width:100%;white-space:normal}
  .side-controls,.tip-point{min-width:0}.tip-help,.tip-label,.tip-clear{white-space:normal;overflow-wrap:anywhere;max-width:100%}
  .board-column.landscape>.editor-sidebar:not(.menu-detached):not(.menu-collapsed){max-width:100%!important;box-sizing:border-box}
  .board-column.landscape>.tray{max-width:100%;flex-wrap:wrap}
  .board-column.landscape>.tray .tray-balls{max-width:100%;flex-wrap:wrap}
  #lineColorPanel{padding:10px!important;overflow-x:hidden}
  .color-panel-head>div{min-width:0}.color-panel-head small{overflow-wrap:anywhere}
  .color-panel-close{flex-shrink:0}
  .line-width-control{min-width:0}.line-width-control input{min-width:0;flex:1;width:100%}
  .line-color-swatches{grid-template-columns:repeat(8,minmax(0,1fr));gap:7px 3px}
  #lineColorPanel .color-swatch{width:min(32px,100%);height:auto;aspect-ratio:1}
  .custom-color{flex-wrap:wrap;overflow-wrap:anywhere}
  dialog{max-height:calc(100dvh - 24px);overflow:auto;padding:16px;overflow-wrap:anywhere}
  .saved-controls,.saved-actions,.memo-actions{flex-wrap:wrap}
  .saved-title-input,.memo-style-grid select{min-width:0;max-width:100%}
  .memo-style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .memo-style-grid label{min-width:0;flex-wrap:wrap}
  .hint{max-width:calc(100% - 12px);white-space:normal;text-align:center}
}

@media(max-width:767px){.tray button{font-size:12px;padding:8px 3px;white-space:nowrap}}

/* Ball placement is a drag gesture, never a browser text-selection gesture. */
.table-wrap,.table-wrap *,.tray .ball,.tray .ball *{
  user-select:none;
  -webkit-user-select:none;
}
.tray .ball{-webkit-touch-callout:none}