/* Compact application shell. Original game nodes and their pins stay unchanged. */
:root { --header-height:56px; --bar-height:42px; }
html,body { margin:0; width:100%; min-height:100%; }
#site-header { height:var(--header-height); padding:0 20px; gap:32px; display:flex; }
.brand { gap:10px; min-width:0; }
.brand-seal { width:34px; height:34px; box-shadow:none; }
.brand-seal img { width:28px; height:28px; }
.brand strong { font-size:21px; letter-spacing:1.5px; }
.brand small,.edition { display:none; }
.main-nav { gap:4px; height:100%; }
.main-nav .nav-link { padding:0 16px; font:600 14px var(--sans); }
.nav-link.active:after { left:14px; right:14px; height:2px; }
.language { width:36px; height:36px; border-radius:8px; }
#editor-view { height:calc(100dvh - var(--header-height)); min-height:0; }
#project-bar { height:var(--bar-height); min-height:var(--bar-height); padding:0 20px; background:#2b2821; gap:12px; }
.project-name { font:600 16px var(--sans); margin:0; gap:10px; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.project-name .local { font-size:10px; padding:2px 8px; flex:none; }
.project-actions { gap:6px; }
.project-actions .btn { min-height:32px; padding:5px 10px; font:12px var(--sans); }
.project-actions .load,.project-actions #save { display:none; }
.project-actions .export { display:block; }
.project-actions .workbook-menu { display:inline-flex; align-items:center; justify-content:center; border-radius:6px; min-width:72px; font-size:12px!important; }
.workspace { min-height:0; --left:232px; --right:300px; }
.graph-area { min-width:0; min-height:0; }
#canvas { min-height:0; overflow:hidden; background-color:#272922; background-image:radial-gradient(circle,#c9c09f30 .8px,transparent .9px); background-size:24px 24px; }
.canvas-runes { opacity:.025; }
#canvas-tip { display:none; }
#canvas-toolbar { height:50px; min-height:50px; padding:0 12px; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:12px; background:#35362d; }
.primary-tools,.view-tools { display:flex; align-items:center; gap:6px; min-width:0; }
.view-tools { margin-left:auto; }
.editor-button,#canvas-toolbar .tool { min-height:36px; min-width:36px; border-radius:7px; padding:7px 10px; white-space:nowrap; background:transparent; color:#eee1c5; font:600 13px var(--sans); }
#canvas-toolbar .tool { font-size:20px; padding:4px 8px; }
.editor-button:hover,#canvas-toolbar .tool:hover { background:#ffffff12; }
.editor-button.add-primary { background:#bba16b; border:1px solid #dcc78f; color:#28251b; }
.canvas-modes { display:flex; padding:3px; background:#24261f; border:1px solid #65634e; border-radius:8px; gap:2px; }
.canvas-modes button { min-height:30px; padding:4px 10px; background:none; border-radius:5px; color:#c1baa4; white-space:nowrap; font:12px var(--sans); }
.canvas-modes button[aria-pressed=true] { background:#555d48; color:#fff2d5; box-shadow:0 1px 3px #0004; }
#fullscreen[aria-pressed=true] { background:#696044; color:#fff3d4; }
#graph-tabs { height:38px; min-height:38px; padding:0 8px; background:#292b23; }
.graph-tab { font-size:12px; }
.graph-tab-wrap { max-width:270px; }
.tab-pencil { display:none; }
.tab-close,.graph-list-button,.graph-tab-add { min-width:36px; min-height:36px; }
#transport { height:auto; min-height:52px; padding:6px 14px; background:#303127; }
.transport-main { gap:8px; }
.transport-controls { gap:5px; }
.transport-controls .tool,.transport-options .tool,.speed-picker summary { min-width:36px; min-height:36px; }
.play-control { min-height:36px; padding:0 15px; border-radius:7px; }
.play-control span { display:inline; }
.transport-clock { min-width:88px; padding-left:12px; display:flex; flex-direction:row; gap:10px; align-items:baseline; }
.transport-clock strong { font:600 16px var(--sans); }
.transport-clock small { font-size:9px; }
.test-control { display:none; }
#footer { display:none; }
.library-foot { display:none; }
.panel-heading { padding:12px 16px; font-size:21px; }
.panel-close { min-width:40px; min-height:40px; }
.palette-group summary { min-height:38px; }
.palette-item,.world-item { min-height:42px; }
.item-label { font-size:14px; }
.item-label small { font-size:11px; }
.editor-menu { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.editor-menu .btn { min-height:48px; text-align:left; }
#connection-form { display:grid; gap:8px; margin:20px 0; }
#connection-form label { font-weight:600; margin-top:8px; }
#connection-form select { width:100%; min-height:48px; padding:10px; border:1px solid #a38e65; border-radius:6px; background:#f1e5ca; color:#302b24; font-size:16px; }
#canvas-actions { position:absolute; z-index:7; left:16px; bottom:14px; display:flex; align-items:center; max-width:calc(100% - 240px); background:#eee1c6; border:1px solid #ad9871; box-shadow:0 4px 18px #0004; border-radius:10px; padding:4px; gap:3px; color:#322c23; }
#canvas-actions .selection-label { max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 10px; font-size:12px; }
#canvas-actions button { min-height:38px; min-width:38px; border-radius:6px; padding:7px 12px; white-space:nowrap; background:transparent; color:inherit; font-size:13px; }
#canvas-actions button:hover { background:#d1bf9d; }
#zoom-controls { position:absolute; bottom:14px; right:16px; z-index:6; display:flex; align-items:center; gap:2px; padding:4px; background:#292b24f5; border:1px solid #77715a; border-radius:9px; box-shadow:0 3px 12px #0003; }
#zoom-controls button { min-height:36px; min-width:36px; background:none; padding:6px; color:#ede1bf; border-radius:5px; }
#zoom-controls #zoom-reset { min-width:48px; font-size:12px; font-variant-numeric:tabular-nums; }
#zoom-controls #fit { font:12px var(--sans); border-left:1px solid #77715a; border-radius:0; padding:0 10px; }
#wire-hint { position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:9; display:flex; align-items:center; gap:10px; background:#efe1bc; color:#312b1f; border:1px solid #b7a06b; padding:6px 8px 6px 14px; border-radius:8px; font-size:13px; box-shadow:0 3px 12px #0004; max-width:calc(100% - 24px); }
#wire-hint button { background:#d5c398; color:inherit; padding:8px; border-radius:5px; min-height:40px; }
#empty-graph-view { z-index:4; padding:24px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; background:transparent; pointer-events:none; }
#empty-graph-view .empty-graph-mark { font-size:36px; margin-bottom:8px; color:#bca679; }
#empty-graph-view h2 { margin:4px 0 12px; font:500 30px var(--serif); color:#efdfba; }
#empty-graph-view p { max-width:400px; margin:0 0 20px; font:15px/1.5 var(--sans); color:#bbb49e; }
#empty-graph-view>div:last-child { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
#empty-graph-view button { min-height:44px; pointer-events:auto; }
#editor-view.focus-mode { height:100dvh; min-height:0; }
#editor-view.focus-mode #canvas-toolbar { height:50px; min-height:50px; }
#editor-view.focus-mode #project-bar { display:none; }
@media(max-width:1440px) {
 #editor-view .workspace,#editor-view.focus-mode .workspace { grid-template-columns:minmax(0,1fr); }
 .graph-area { grid-column:1; }
 #editor-view #library,#editor-view #inspector { display:flex; position:absolute; top:0; bottom:0; width:min(340px,calc(100vw - 40px)); max-height:100%; z-index:25; border:1px solid #a68e5b; box-shadow:8px 10px 32px #0007; }
 #editor-view #library { left:0; right:auto; border-radius:0 12px 12px 0; }
 #editor-view #inspector { right:0; left:auto; border-radius:12px 0 0 12px; }
 #panel-scrim:not([hidden]) { display:block; position:absolute; inset:0; z-index:24; background:#14120e55; backdrop-filter:blur(1px); }
 .palette-scroll,.inspector-scroll { overscroll-behavior:contain; }
}
@media(max-width:900px) {
 #site-header { gap:16px; padding:0 12px; }
 .brand-seal { display:none; }
 .main-nav .nav-link { padding:0 12px; }
 #canvas-toolbar { gap:8px; padding:0 8px; }
 .canvas-modes button { padding-inline:8px; }
 #canvas-actions .selection-label { display:none; }
 .palette-item,.world-item { min-height:48px; }
}
@media(max-width:600px) {
 :root { --header-height:88px; --bar-height:40px; }
 #site-header { height:var(--header-height); padding:0 12px; display:grid; grid-template-columns:1fr auto; grid-template-rows:42px 46px; gap:0; }
 .brand { grid-column:1; grid-row:1; }.brand strong { font-size:18px; }
 .header-meta { grid-column:2; grid-row:1; }.language { min-width:44px; min-height:36px; border-radius:8px; }
 .main-nav { grid-column:1/-1; grid-row:2; display:flex; justify-content:stretch; height:46px; gap:0; width:100%; }
 .main-nav .nav-link { flex:1; font:600 14px var(--sans)!important; padding:0 8px!important; }
 #editor-view { height:calc(100dvh - var(--header-height)); min-height:0; }
 #project-bar { height:40px; min-height:40px; padding:0 12px; }
 .project-name { display:block; max-width:65vw; font-size:14px; }.project-name .local { display:none; }
 .project-actions .export { display:none; }.project-actions .workbook-menu { min-height:36px; min-width:76px; padding:0 8px!important; }
 #canvas-toolbar { height:96px; min-height:96px; display:grid; grid-template-columns:1fr auto; grid-template-rows:48px 48px; gap:0 6px; padding:0 8px; }
 .primary-tools { grid-column:1/-1; grid-row:1; width:100%; gap:4px; }
 .primary-tools .add-primary { flex:1; text-align:center; }
 .primary-tools .blueprint-button { flex:1; }
 #canvas-toolbar .tool,.editor-button { min-width:44px; min-height:44px; font-size:14px; }
 .canvas-modes { grid-column:1; grid-row:2; justify-self:start; padding:2px; }
 .canvas-modes button { min-height:38px; padding:0 10px; font-size:12px; }
 .view-tools { grid-column:2; grid-row:2; gap:0; }
 .view-tools .editor-button { font-size:12px; padding:0 8px; }
 #canvas { min-height:0; }
 #graph-tabs { height:42px; min-height:42px; padding:0 4px; }
 .graph-tab { min-height:38px; font-size:12px; }.graph-tab-wrap { max-width:225px!important; }
 .graph-tab-add,.graph-list-button,.tab-close { min-width:44px; min-height:40px; }
 #transport { padding:4px 8px max(4px,env(safe-area-inset-bottom)); min-height:52px; }
 .transport-main { gap:4px; }.transport-controls { gap:0; }
 .transport-controls .tool,.transport-options .tool,.speed-picker summary,.play-control { min-height:44px; min-width:44px; }
 .play-control { padding:0 10px; }.play-control span { display:none; }
 .transport-clock { min-width:64px; padding-left:6px; display:flex; flex-direction:column; gap:1px; }.transport-clock strong { font-size:16px; }.transport-clock small { font-size:8px; }
 .transport-options { gap:0; }
 #zoom-controls { right:8px; bottom:8px; padding:2px; }
 #zoom-controls button { min-height:40px; min-width:40px; }
 #zoom-controls #fit { padding:0 10px; }#zoom-controls #zoom-reset { min-width:44px; }
 #canvas-actions { bottom:60px; left:8px; max-width:calc(100% - 16px); padding:2px; }
 #canvas-actions button { min-height:42px; font-size:13px; padding:6px 10px; }
 #empty-graph-view { padding:12px 18px 64px; }
 #empty-graph-view .empty-graph-mark { display:none; }
 #empty-graph-view h2 { font-size:24px; margin-bottom:8px; }
 #empty-graph-view p { font-size:14px; margin-bottom:12px; }
 #empty-graph-view .btn { font-size:12px; padding:7px 12px; }
 #wire-hint { width:calc(100% - 16px); top:6px; padding:5px 8px; font-size:12px; }
 .editor-menu { grid-template-columns:1fr; gap:8px; }
 #editor-view.focus-mode #canvas-toolbar { height:96px; min-height:96px; }
 #book-view,#collection-view { min-height:calc(100dvh - var(--header-height)); }
}
@media(max-height:550px) {
 :root { --header-height:44px; --bar-height:0px; }
 #site-header { height:44px; display:flex; padding:0 12px; gap:12px; }
 .main-nav { height:44px; width:auto; flex:1; }.main-nav .nav-link { padding:0 10px!important; }
 .brand strong { font-size:16px; }.brand-seal { display:none; }
 #project-bar { display:none; }
 #editor-view { height:calc(100dvh - 44px); }
 #canvas-toolbar,#editor-view.focus-mode #canvas-toolbar { display:flex; flex-wrap:nowrap; height:48px; min-height:48px; padding:0 6px; gap:6px; }
 .primary-tools { width:auto; flex:none; }.primary-tools .add-primary,.primary-tools .blueprint-button { flex:none; }
 .canvas-modes button { padding:0 7px; }.canvas-modes span { display:none; }
 .editor-button,#canvas-toolbar .tool { min-width:36px; min-height:40px; font-size:12px; padding:4px 8px; }
 #graph-tabs { height:36px; min-height:36px; }
 #transport { min-height:44px; padding:2px 8px; }
 .transport-controls .tool,.transport-options .tool,.speed-picker summary,.play-control { min-height:36px; }
 #empty-graph-view { padding:8px 20px 46px; }#empty-graph-view p { display:none; }#empty-graph-view h2 { font-size:22px; margin:0 0 8px; }
 #canvas-actions { bottom:8px; max-width:calc(100% - 240px); }
}