/* The owner supplies a fitted play-area root below the existing header. */
.lane-demo{position:relative;isolation:isolate;width:100%;height:100%;min-height:0;min-width:0;display:grid;grid-template-rows:48px 50px minmax(0,1fr) 142px;gap:7px;padding:10px 14px;box-sizing:border-box;color:#f7efd9;background:linear-gradient(#0814118c,#07120fdc),url('assets/greenwood-v1.png') center/cover;font:14px/1.3 system-ui,sans-serif;overflow:hidden}
.lane-demo[hidden]{display:none}.lane-demo *{box-sizing:border-box}.lane-demo button{font:inherit;color:inherit;cursor:pointer;border:1px solid #8e8052;background:linear-gradient(#263b30,#101f19);border-radius:6px;padding:5px 9px;min-width:0;min-height:30px;box-shadow:0 2px 5px #0005;text-shadow:none}.lane-demo button:disabled{cursor:default;opacity:.45}.lane-demo button:focus-visible{outline:3px solid #fff3b8;outline-offset:2px;z-index:5}.lane-demo button:hover:not(:disabled){border-color:#f8d98f}.lane-demo .ld-icon{width:17px;height:17px;fill:currentColor;flex:none;vertical-align:middle}.lane-demo .ld-role{width:23px;height:23px;object-fit:contain;flex:none}.lane-demo .ld-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}.lane-demo h2{font:600 23px/1.1 Georgia,serif;margin:0 0 4px;color:#ffdda0}.lane-demo .ld-top p{font-size:12px;color:#ddd5b9;margin:0}.lane-demo .ld-top-buttons{display:flex;gap:6px;flex:none}.lane-demo .ld-pressure{display:flex;justify-content:center;gap:8px;min-width:0}.lane-demo .ld-pressure button{display:flex;align-items:center;gap:7px;min-width:0;width:min(28%,220px);font-size:13px;border-color:#976951;background:#1f2018e8;text-align:left}.lane-demo .ld-pressure small{display:block;font-size:12px;color:#ffc698}.lane-demo .ld-board{min-width:0;min-height:0;display:grid;grid-template-rows:20px minmax(0,1fr);gap:3px}.lane-demo .ld-direction{display:flex;justify-content:space-between;font-size:12px;color:#e9dfbf;padding-left:58px}.lane-demo .ld-tracks{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:7px;min-height:0}.lane-demo .ld-lane{display:grid;grid-template-columns:50px repeat(5,minmax(0,1fr));gap:7px;min-height:0;align-items:stretch}.lane-demo .ld-lane-name{align-self:center;font-size:12px;color:#e3d5b7;writing-mode:vertical-rl;transform:rotate(180deg);justify-self:center;letter-spacing:1px}.lane-demo .ld-space{position:relative;border:1px solid #bdac774b;border-radius:9px;min-width:0;min-height:0;background:#172a1f80;display:flex;align-items:center;justify-content:center}.lane-demo .ld-space:after{content:attr(data-position);position:absolute;right:4px;top:1px;font-size:12px;color:#e1d3af;pointer-events:none}.lane-demo .ld-space.ld-legal{border:2px solid #a9dc89;background:#395732a8}.lane-demo .ld-space.ld-arrival{outline:1px dashed #ff9971;outline-offset:-5px}.lane-demo .ld-space.ld-in-range{box-shadow:inset 0 0 0 2px #f5cc70;background-color:#79632c66}.lane-demo .ld-destination{border:0;box-shadow:none;background:none;width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0;font-size:16px}.lane-demo .ld-destination:disabled{opacity:.35}.lane-demo .ld-destination small{font-size:12px}.lane-demo .ld-unit{position:relative;width:min(100%,95px);height:100%;min-height:0;max-height:156px;align-self:center;overflow:hidden;padding:0;border:2px solid #b9a677;border-radius:7px;background:#13241b;box-shadow:0 3px 8px #000b;display:block}.lane-demo .ld-unit.ld-enemy{border-color:#ad8068}.lane-demo .ld-unit.ld-selected{outline:2px solid #f4df8a;outline-offset:2px}.lane-demo .ld-portrait{display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%}.lane-demo .ld-unit-name{position:absolute;left:0;right:0;top:0;padding:2px 1px;background:#09160ee8;color:#fff1cb;font-size:12px;font-weight:700;text-align:center;line-height:1.1}.lane-demo .ld-unit>.ld-role{position:absolute;left:2px;top:19px;width:20px;height:20px;filter:drop-shadow(0 1px 2px #000)}.lane-demo .ld-hp{position:absolute;bottom:5px;left:0;right:0;background:#06170df0;display:flex;align-items:center;justify-content:center;gap:3px;font-size:14px;line-height:20px;color:#f6ffe7}.lane-demo .ld-hp .ld-icon{width:14px;height:14px;color:#a9e8a9}.lane-demo .ld-health{position:absolute;bottom:0;left:0;right:0;height:5px;background:#4c2727}.lane-demo .ld-health i{height:100%;display:block;background:#a3d772}.lane-demo .ld-marker{position:absolute;right:1px;top:23px;padding:1px 3px;background:#fff0b7;color:#152b1e;font-size:12px;font-weight:700;border-radius:2px}.lane-demo .ld-bottom{min-height:0;background:linear-gradient(#12261ded,#091810f5);border-top:1px solid #b29b58;border-radius:10px;padding:7px 10px;display:grid;grid-template-rows:26px 32px 17px 19px 18px;gap:3px;max-width:920px;width:100%;justify-self:center}.lane-demo .ld-selected-summary{display:flex;justify-content:center;align-items:center;gap:8px}.lane-demo .ld-selected-summary button{padding:2px 7px;min-height:25px;font-size:14px}.lane-demo .ld-selected-summary>span{font-size:12px;color:#d7cba6}.lane-demo .ld-actions{display:flex;justify-content:center;gap:7px}.lane-demo .ld-actions button{display:flex;align-items:center;justify-content:center;gap:4px}.lane-demo .ld-actions [aria-pressed=true]{background:#695b29;border-color:#f3d176}.lane-demo .ld-bottom p{margin:0;text-align:center;font-size:12px;line-height:1.25}.lane-demo .ld-allowance{color:#f8dda3}.lane-demo .ld-gather{color:#c4d3b6}.lane-demo .ld-status{color:#fff5df}.lane-demo .ld-inspection-host:empty{display:none}.lane-demo .ld-inspection-backdrop{position:absolute;inset:0;z-index:10;background:#040a08d9;display:flex;align-items:center;justify-content:center;padding:12px}.lane-demo .ld-inspection{width:min(580px,100%);max-height:100%;border:2px solid #c4a66d;border-radius:12px;background:linear-gradient(#243c2e,#0b1d14);padding:14px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;box-shadow:0 12px 40px #000b}.lane-demo .ld-inspection-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.lane-demo .ld-inspection-body{display:flex;gap:17px;align-items:center;min-height:0}.lane-demo .ld-inspection-art{width:130px;height:175px;flex:none;border:2px solid #c5a571;border-radius:9px;overflow:hidden}.lane-demo .ld-inspection h3{font:600 24px/1.15 Georgia,serif;color:#ffe4aa;margin:0 0 10px}.lane-demo .ld-inspection p{font-size:16px;line-height:1.45;margin:0}.lane-demo .ld-pages{display:flex;justify-content:center;align-items:center;gap:15px;font-size:13px}
@media(max-width:700px){.lane-demo{grid-template-rows:76px 56px minmax(0,1fr) 179px;padding:7px;gap:6px}.lane-demo h2{font-size:19px}.lane-demo .ld-top{gap:6px}.lane-demo .ld-top p{font-size:12px;max-width:210px}.lane-demo .ld-top-buttons{flex-direction:column;gap:3px}.lane-demo .ld-top-buttons button{font-size:14px;min-height:27px;padding:3px 6px}.lane-demo .ld-pressure{gap:4px}.lane-demo .ld-pressure button{width:33.333%;font-size:14px;padding:4px}.lane-demo .ld-pressure .ld-icon{display:none}.lane-demo .ld-pressure small{font-size:12px}.lane-demo .ld-lane{grid-template-columns:20px repeat(5,minmax(0,1fr));gap:5px}.lane-demo .ld-direction{font-size:12px;padding-left:25px}.lane-demo .ld-unit-name{font-size:12px}.lane-demo .ld-hp{font-size:12px;gap:1px}.lane-demo .ld-hp .ld-icon{width:11px;height:11px}.lane-demo .ld-bottom{padding:5px;grid-template-rows:26px 62px 18px 34px 22px;gap:2px}.lane-demo .ld-actions{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:29px 29px;gap:4px}.lane-demo .ld-actions button{font-size:14px;min-height:26px;padding:3px 6px}.lane-demo .ld-bottom p{font-size:12px}.lane-demo .ld-selected-summary{gap:6px}.lane-demo .ld-inspection{padding:11px;gap:10px}.lane-demo .ld-inspection-art{width:90px;height:135px}.lane-demo .ld-inspection-body{gap:12px}.lane-demo .ld-inspection p{font-size:14px;line-height:1.4}.lane-demo .ld-inspection h3{font-size:21px}}
@media(max-height:500px){.lane-demo{grid-template-rows:32px 37px minmax(0,1fr) 91px;gap:4px;padding:5px 9px}.lane-demo h2{font-size:19px;margin:0}.lane-demo .ld-top p{font-size:12px;max-width:none}.lane-demo .ld-top-buttons{flex-direction:row}.lane-demo .ld-top-buttons button{font-size:14px;min-height:27px}.lane-demo .ld-pressure button{font-size:14px;padding:2px 7px}.lane-demo .ld-pressure small{font-size:12px}.lane-demo .ld-board{grid-template-rows:15px minmax(0,1fr);gap:2px}.lane-demo .ld-direction{font-size:12px}.lane-demo .ld-tracks{gap:4px}.lane-demo .ld-lane{grid-template-columns:25px repeat(5,minmax(0,1fr));gap:5px}.lane-demo .ld-unit{width:62px;min-width:0}.lane-demo .ld-unit-name{font-size:12px;padding:1px}.lane-demo .ld-unit>.ld-role{top:12px;width:15px;height:15px}.lane-demo .ld-marker{top:12px;font-size:12px}.lane-demo .ld-hp{font-size:12px;line-height:15px;bottom:4px}.lane-demo .ld-health{height:4px}.lane-demo .ld-bottom{padding:3px 6px;grid-template-rows:23px 27px 13px 16px;gap:1px;position:relative}.lane-demo .ld-selected-summary{justify-content:flex-start;font-size:13px}.lane-demo .ld-selected-summary .ld-role{width:19px;height:19px}.lane-demo .ld-selected-summary button{min-height:22px;padding:1px 6px}.lane-demo .ld-actions{display:flex;gap:5px}.lane-demo .ld-actions button{min-height:25px;font-size:14px;padding:2px 7px}.lane-demo .ld-bottom p{font-size:12px}.lane-demo .ld-bottom .ld-gather{position:absolute;right:7px;top:7px;font-size:12px;max-width:250px}.lane-demo .ld-gather .ld-icon{display:none}.lane-demo .ld-inspection{gap:6px;padding:9px;max-width:570px}.lane-demo .ld-inspection-art{width:77px;height:104px}.lane-demo .ld-inspection p{font-size:14px;line-height:1.35}.lane-demo .ld-inspection h3{font-size:20px;margin-bottom:5px}.lane-demo .ld-inspection button{min-height:26px;padding:3px 8px}.lane-demo .ld-inspection-body{gap:12px}}

/* Both layouts share positions and state. Vertical is the current default. */











.lane-demo .ld-top-buttons button,.lane-demo .ld-actions button,.lane-demo .ld-selected-summary button,.lane-demo .ld-inspection button{font-size:14px}
@media(max-width:700px){.lane-demo .ld-top-buttons{display:grid;grid-template-columns:auto auto;gap:3px}.lane-demo .ld-top-buttons [data-command=exit]{grid-column:1/-1}.lane-demo .ld-top-buttons button{min-height:28px;padding:2px 5px}.lane-demo .ld-top{align-items:center}.lane-demo .ld-pressure button{font-size:12px}.lane-demo .ld-unit-name{font-size:12px}.lane-demo .ld-unit>.ld-role{width:17px;height:17px;top:16px}.lane-demo .ld-unit .ld-hp{font-size:14px}.lane-demo .ld-bottom .ld-gather{font-size:12px}}
@media(max-height:500px){
.lane-demo{grid-template-rows:36px 34px minmax(0,1fr) 78px;gap:3px;padding:4px 8px}
.lane-demo .ld-top-buttons{display:flex;flex-direction:row;gap:4px}.lane-demo .ld-top-buttons button{font-size:14px;padding:2px 5px;min-height:28px}.lane-demo h2{font-size:18px}.lane-demo .ld-top p{font-size:12px}.lane-demo .ld-pressure button{font-size:12px;line-height:13px}.lane-demo .ld-pressure small{font-size:12px}
.lane-demo .ld-bottom{grid-template-rows:23px 28px 16px;gap:1px;padding:3px 6px}.lane-demo .ld-selected-summary{font-size:14px}.lane-demo .ld-allowance{position:absolute;right:6px;top:6px;max-width:310px;text-align:right;font-size:12px;line-height:13px}.lane-demo .ld-selected-summary>span{display:none}.lane-demo .ld-bottom .ld-status{grid-row:3;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lane-demo .ld-bottom .ld-gather{display:none}.lane-demo .ld-actions button{font-size:14px;padding:2px 7px}.lane-demo .ld-unit-name{font-size:12px;line-height:13px;padding:0}.lane-demo .ld-unit .ld-hp{font-size:14px;line-height:16px}.lane-demo .ld-unit>.ld-role{display:none}.lane-demo .ld-direction{font-size:12px}
}

.lane-demo .ld-pressure button{font-size:14px}.lane-demo .ld-pressure small{font-size:12px}

/* Units use separate art, identity and Health columns in compact vertical cells. */
.lane-demo .ld-board.ld-vertical .ld-tracks{grid-template-rows:minmax(0,1fr);grid-template-columns:repeat(3,minmax(0,1fr))}
.lane-demo .ld-board.ld-vertical .ld-lane{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(5,minmax(0,1fr)) 17px;gap:4px}
.lane-demo .ld-board.ld-vertical .ld-lane-name{grid-row:6;writing-mode:horizontal-tb;transform:none;letter-spacing:0}
.lane-demo .ld-board.ld-vertical .ld-space{grid-column:1;grid-row:calc(5 - var(--ld-position))}
.lane-demo .ld-board.ld-vertical .ld-unit{width:100%;max-width:210px;max-height:none;min-width:0;display:grid;grid-template-columns:28px minmax(0,1fr) 48px;grid-template-rows:minmax(0,1fr);align-items:center;gap:3px;padding:0 3px 3px;border-width:1px;text-align:left}
.lane-demo .ld-board.ld-vertical .ld-unit .ld-portrait{position:static;grid-column:1;grid-row:1;object-fit:contain;width:100%;height:100%;min-height:0}
.lane-demo .ld-board.ld-vertical .ld-unit-name{position:static;grid-column:2;grid-row:1;text-align:left;min-width:0;line-height:14px;font-size:12px;padding:0;background:none;white-space:nowrap}
.lane-demo .ld-board.ld-vertical .ld-hp{position:static;grid-column:3;grid-row:1;font-size:14px;line-height:14px;background:none;gap:0}
.lane-demo .ld-board.ld-vertical .ld-hp .ld-icon,.lane-demo .ld-board.ld-vertical .ld-unit>.ld-role{display:none}
.lane-demo .ld-board.ld-vertical .ld-health{height:3px}
.lane-demo .ld-board.ld-vertical .ld-marker{left:1px;right:auto;top:1px;bottom:auto;font-size:12px}
.lane-demo .ld-board.ld-vertical .ld-destination{flex-direction:row;gap:4px}
@media(max-width:500px) and (min-height:501px){.lane-demo .ld-board.ld-vertical .ld-unit{grid-template-columns:25px minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:0 2px;max-width:none;padding:0 1px 3px}.lane-demo .ld-board.ld-vertical .ld-unit .ld-portrait{grid-row:1/3}.lane-demo .ld-board.ld-vertical .ld-unit-name{grid-row:1;grid-column:2;text-align:center}.lane-demo .ld-board.ld-vertical .ld-hp{grid-row:2;grid-column:2}}
@media(max-height:500px){.lane-demo .ld-board.ld-vertical .ld-lane{gap:2px;grid-template-rows:repeat(5,minmax(0,1fr)) 15px}.lane-demo .ld-board.ld-vertical .ld-unit{grid-template-columns:20px minmax(0,1fr) 47px;padding-bottom:2px}.lane-demo .ld-board.ld-vertical .ld-health{height:2px}}
@media(min-width:701px) and (max-height:800px){.lane-demo .ld-board:not(.ld-vertical) .ld-unit{width:min(100%,140px);padding:0}.lane-demo .ld-board:not(.ld-vertical) .ld-unit .ld-portrait{width:42%;object-fit:contain}.lane-demo .ld-board:not(.ld-vertical) .ld-unit-name{left:42%;right:1px}.lane-demo .ld-board:not(.ld-vertical) .ld-hp{left:42%;right:1px}.lane-demo .ld-board:not(.ld-vertical) .ld-unit>.ld-role{display:none}}
.lane-demo .ld-board.ld-vertical .ld-space:has(.ld-unit):after{left:3px;right:auto;top:50%;transform:translateY(-50%);line-height:12px;color:#d9cca8}
.lane-demo .ld-board.ld-vertical .ld-unit{padding-left:15px}