/* The scene is the main surface; secondary actions live in accessible drawers. */
:root{--home-gutter:clamp(12px,2vw,32px);--surface-raised:#fffdf8;--forest:#31543f;--forest-hover:#42674e;--soft-shadow:0 6px 20px #293b2910}
.tree-screen{height:100dvh;min-height:540px;display:flex;flex-direction:column;overflow-x:hidden;background:#f7f4ec}
.top{flex:none;background:#fcfaf5;border-color:#e8e4d8}
.top-inner{height:64px;max-width:none;padding-inline:var(--home-gutter)}
.brand{gap:10px;font-weight:720;font-size:14px;letter-spacing:-.025em}.mark{width:34px;height:34px;border-radius:11px;background:var(--forest)}
.home-nav{display:flex;gap:8px;align-items:center}.home-nav .header-button{min-height:44px;padding:0 14px;border-color:#e3dfd3;background:transparent;border-radius:11px;font-size:12px}
.home-nav .header-button:hover{background:#edf0e7;border-color:#c9d1bf}.home-nav .icon-button{width:44px;padding:0;justify-content:center}
.skip-link{position:fixed;left:16px;top:12px;z-index:1000;transform:translateY(-180%);padding:12px 16px;border-radius:10px;background:var(--ink);color:#fff;transition:transform .15s}.skip-link:focus{transform:translateY(0)}
#tree-view{width:100%;max-width:none;min-height:0;flex:1;display:flex;flex-direction:column;gap:16px;padding:20px var(--home-gutter) 12px}
.tree-heading{display:flex;flex:none;align-items:center;justify-content:space-between;gap:20px}
.tree-title .kicker{font-size:9px;letter-spacing:.16em;margin-bottom:5px;color:#8b5646}.tree-title .kicker .icon{width:12px;height:12px}
.tree-title h1{font:500 clamp(32px,3vw,44px)/1.05 var(--serif);letter-spacing:-.045em}
.tree-subtitle{font-size:12px;color:#697264;margin-top:7px}
.tree-create{min-height:46px;border-radius:12px;padding:0 19px;background:var(--forest);border-color:var(--forest);font-size:12px;box-shadow:0 3px 7px #203b2310}
.tree-create:hover{background:var(--forest-hover);border-color:var(--forest-hover)}.tree-create .icon{width:17px;height:17px}
#tree-view .workspace{flex:1;min-height:240px;display:block}#tree-view .scene-column{height:100%;gap:0}
#tree-view .stage{height:100%;min-height:0;aspect-ratio:auto;border-radius:22px;border-color:#dbd4c2;box-shadow:0 10px 34px #34452c0b;background:#ddc5a9}
.scene-label{top:18px;left:18px;min-height:42px;gap:8px;border:1px solid #fff9edbd;border-radius:12px;padding:0 13px;background:#fffaf0f5;box-shadow:var(--soft-shadow);font-size:11px;color:#4e614b}
.room-dot{display:block;width:6px;height:6px;border-radius:50%;background:#68835d;box-shadow:0 0 0 3px #68835d14}
.scene-label.has-room #scene-label{font:700 12px/1.2 ui-monospace,monospace;letter-spacing:.09em}
.scene-actions{position:absolute;z-index:3;right:18px;top:18px;display:flex;align-items:center;gap:8px}
.stage-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;border:1px solid #fff9edbd;border-radius:12px;background:#fffaf0f5;color:#344a36;box-shadow:var(--soft-shadow);font-size:12px;font-weight:650;white-space:nowrap}
.stage-button:hover{background:#fffdf7;border-color:#d1d4bd}.stage-icon{width:44px;padding:0}.stage-button .icon{width:17px;height:17px}
.scene-actions .exit{position:static;display:none;width:44px;height:44px;border-radius:12px}
.toy-badge{display:inline-flex;align-items:center;min-height:24px;padding:0 7px;border-radius:6px;background:#e9eddf;color:#4d644c;font:650 10px/1.2 var(--sans);font-variant-numeric:tabular-nums}
.scene-controls{position:absolute;bottom:18px;left:50%;z-index:3;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px)}
.scene-controls summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:0 15px;border:1px solid #fff9edbd;border-radius:12px;background:#fffaf0f5;box-shadow:var(--soft-shadow);font-size:11px;font-weight:650;cursor:pointer;user-select:none}
.scene-controls summary::-webkit-details-marker{display:none}.scene-controls summary>.icon{width:16px;height:16px}.scene-controls summary>.icon:last-child{width:12px;height:12px;transition:transform .18s}.scene-controls[open] summary>.icon:last-child{transform:rotate(90deg)}
.scene-controls summary:hover{background:#fffdf7}.scene-controls summary:focus-visible{outline:3px solid #a45146;outline-offset:3px}
.scene-controls .control-bar{bottom:54px;left:50%;border-radius:12px;box-shadow:var(--soft-shadow);background:#fffaf0fa;gap:4px;padding:5px}
.control-bar button{width:44px;height:44px}.stage.inspecting .scene-controls summary{display:none}.stage.inspecting .control-bar{position:static;transform:none}.stage.inspecting .scene-controls{bottom:18px}
.inspection-label{bottom:76px;padding:9px 13px;border-radius:10px;box-shadow:var(--soft-shadow);font-size:11px}
#tree-view .footer{flex:none;min-height:20px;gap:12px;margin:0;padding-inline:3px;color:#6d7767;font-size:10px;line-height:1.4}
#tree-view .footer>span:first-child{gap:7px}#tree-view .footer .icon{width:13px;height:13px}.mobile-hint{display:none}#mode{color:#76806e;font-size:10px;white-space:nowrap}
.tree-panel{position:fixed;inset:0;width:388px;max-width:calc(100% - 32px);height:calc(100dvh - 32px);max-height:calc(100dvh - 32px);margin:16px 16px 16px auto;padding:0;border:1px solid #dfdfcf;border-radius:20px;background:var(--surface-raised);color:var(--ink);box-shadow:0 16px 80px #17352433;overflow:hidden}
.tree-panel[open]{display:flex;flex-direction:column;animation:drawer-enter .18s ease-out}.tree-panel::backdrop{background:#1f34263b}
.tree-panel-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:25px 23px 21px;border-bottom:1px solid var(--line)}
.tree-panel-head .kicker{font-size:9px;letter-spacing:.12em;margin-bottom:6px;color:#8b6651}.tree-panel-head h2{font:500 31px/1.1 var(--serif);letter-spacing:-.045em}.close-dialog{width:44px;height:44px;border-radius:11px;flex:none}.tree-panel-head form{margin:0}
.tree-panel-body{flex:1;min-height:0;overflow-y:auto;padding:22px 23px;overscroll-behavior:contain}
.tree-panel .room-card{padding:18px;background:#eef2e7;border-color:#dfe7d5;border-radius:13px}.tree-panel .room-card>h2{display:none}.tree-panel .side-intro{font-size:13px;line-height:1.65;margin-top:0;color:#607058}.tree-panel .room-code{font-size:29px;letter-spacing:.15em;margin-block:18px 16px;color:var(--forest)}
.tree-panel .room-size-note{font-size:12px;margin-top:8px}.tree-panel .room-action{min-height:44px;margin-top:18px}.tree-panel .share-actions{gap:12px}.tree-panel .share-actions .action{min-height:44px;font-size:12px;border-radius:9px}.tree-panel .share-actions a{font-size:12px}.tree-panel .text-button{min-height:40px;font-size:12px}
.room-join{padding:23px 2px 0}.room-join p{font-size:12px;color:var(--muted);margin-bottom:10px}.room-join .action{width:100%;min-height:44px;justify-content:space-between;border-radius:10px;font-size:12px}
.gallery-panel{width:420px}.tree-panel .ornament-section{margin:0}.tree-panel .custom-toys{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-height:none;overflow:visible;margin-top:17px}.tree-panel .custom-toys button[data-drawing]{min-height:76px;border-radius:11px;background:#f4f0e5}.tree-panel .custom-toys canvas{width:58px;height:58px}.tree-panel .custom-toys .toy-card{gap:2px}.tree-panel .custom-toys button.delete-toy{min-height:34px;font-size:10px;border-radius:8px}
.tree-panel .items{display:grid;grid-template-columns:1fr;gap:10px;margin-top:20px}.tree-panel .ornament{grid-template-columns:44px minmax(0,1fr) 16px;min-height:64px;padding:8px;gap:12px;text-align:left;justify-items:start}.tree-panel .thumb{width:44px;height:44px}.tree-panel .thumb canvas{width:42px;height:42px}.tree-panel .ornament strong{font-size:12px}.tree-panel .ornament small{font-size:10px}.tree-panel .ornament .arrow{display:block}
#settings{border-radius:18px}#settings .dialog-inner{gap:21px}#settings .setting-row{min-height:44px}#settings #tree-size{padding:14px;background:#f3f4eb;border:1px solid #e0e5d7;border-radius:12px}#settings #tree-size legend{float:none;line-height:1.4;padding:0 5px;margin:0 0 8px;font-size:12px}#settings #tree-size .tree-size-options{max-width:none}#settings #tree-size .tree-size-options span{min-height:60px;font-size:11px}#settings #tree-size small{font-size:9px}
.home-nav button,.tree-create,.stage-button,.tree-panel button,.scene-controls summary{transition:background .15s,border-color .15s,color .15s}
.home-nav button:active,.stage-button:active,.scene-controls summary:active{background:#e7ecdd}.tree-create:active{background:#284733}
.tree-screen #stage:fullscreen,.tree-screen #stage.present{width:100%;height:100%;min-height:0;border:0;border-radius:0}
.stage:fullscreen #present,.stage.present #present{display:none}.stage:fullscreen .scene-actions .exit,.stage.present .scene-actions .exit{display:flex}
@keyframes drawer-enter{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:790px){#tree-view{padding-top:16px;gap:12px}.top-inner{height:58px}.tree-title h1{font-size:35px}.tree-panel .custom-toys{gap:8px}.tree-panel-head{padding:22px 20px}.tree-panel-body{padding:20px}.scene-label{top:14px;left:14px}.scene-actions{top:14px;right:14px}}
@media(max-width:560px){.top-inner{height:56px}.brand{font-size:12px;gap:8px}.mark{width:31px;height:31px}.home-nav .header-button{font-size:11px;padding-inline:11px}.home-nav .icon-button{padding:0}.tree-heading{align-items:stretch;flex-direction:column;gap:12px}.tree-title .kicker{font-size:8px;margin-bottom:4px}.tree-title h1{font-size:31px}.tree-subtitle{font-size:11px;margin-top:5px}.tree-create{min-height:44px;font-size:12px;border-radius:11px}.tree-create .icon{width:16px;height:16px}#tree-view{padding-top:13px;padding-bottom:10px;gap:12px}#tree-view .stage{border-radius:17px}.scene-label{top:10px;left:10px;min-height:42px;padding:0 10px;gap:7px;border-radius:10px}.room-label-prefix{display:none}.scene-label.has-room #scene-label{font-size:11px}.scene-actions{top:10px;right:10px;gap:6px}.stage-button{font-size:11px;padding-inline:10px;border-radius:10px;gap:7px}.stage-icon{padding:0}.toy-badge{font-size:9px;padding-inline:5px}.stage-button .icon{width:16px;height:16px}.scene-controls{bottom:12px}.scene-controls summary{min-height:42px;font-size:10px}.desktop-hint{display:none}.mobile-hint{display:inline}#tree-view .footer{min-height:28px;align-items:center;font-size:9px;gap:8px}#tree-view .footer>span:first-child{max-width:65%}#mode{font-size:8px}.tree-panel{margin:8px 8px 8px auto;width:calc(100% - 16px);max-width:calc(100% - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);border-radius:16px}.tree-panel-head{padding:20px 18px 18px}.tree-panel-head h2{font-size:29px}.tree-panel-body{padding:18px}.tree-panel .custom-toys{gap:7px}.tree-panel .custom-toys button[data-drawing]{min-height:68px}.tree-panel .custom-toys canvas{width:52px;height:52px}.tree-panel .custom-toys button.delete-toy{min-height:44px}.inspection-label{bottom:77px;max-width:calc(100% - 20px);font-size:10px}}
@media(max-width:360px){#open-room>span{display:none}.home-nav #open-room{width:44px;padding:0}.gallery-trigger>span:not(.toy-badge){display:none}.tree-title h1{font-size:29px}.tree-panel .custom-toys{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-height:540px) and (min-width:600px){.tree-screen{min-height:440px}.top-inner{height:52px}#tree-view{padding-top:10px;gap:10px}.tree-title .kicker,.tree-subtitle{display:none}.tree-title h1{font-size:30px}.tree-create{min-height:42px}#tree-view .footer{min-height:16px}#tree-view .workspace{min-height:240px}}
@media(prefers-reduced-motion:reduce){.tree-panel[open]{animation:none}.home-nav button,.tree-create,.stage-button,.tree-panel button,.scene-controls summary,.scene-controls summary>.icon:last-child{transition:none}.skip-link{transition:none}}
@media(pointer:coarse){.tree-panel .custom-toys button.delete-toy{min-height:44px}}
.scene-controls summary{min-height:44px}
@media(max-height:540px) and (min-width:600px){.tree-create{min-height:44px}}