#dragon-game[open]{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;display:grid;place-items:center;transform:none;color:#fff0c9;user-select:none;-webkit-user-select:none;overflow:hidden}
.dragon-scene{position:relative;width:min(100vw,177.777dvh);aspect-ratio:16/9;container-type:inline-size;overflow:hidden}
#dragon-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.dragon-scene header{position:absolute;inset:2% 3% auto;height:auto;display:flex;align-items:center;justify-content:space-between;background:none;border:0;padding:0;z-index:3}
.dragon-scene h2{font:bold clamp(17px,2.3cqw,32px) Georgia;margin:0;padding:.35em .7em;background:#173c35ed;border-radius:10px}
.dragon-scene button{font:600 clamp(11px,1.25cqw,18px) system-ui;min-height:34px;background:#173c35ef;color:#fff0c9;border:1px solid #c1a76b;border-radius:8px;padding:6px 10px;cursor:pointer}
.dragon-scene button:disabled{opacity:.5;cursor:default}.dragon-scene button:focus-visible,#dragon-program:focus-visible{outline:3px solid #fff0ad;outline-offset:2px}.dragon-scene .primary{background:#e1c582;color:#253b30}
#dragon-progress{padding:8px;background:#173c35ef;border-radius:8px;font-weight:bold}
.dragon-instruction{position:absolute;top:11%;left:15%;width:70%;padding:8px 16px;box-sizing:border-box;border-radius:14px;text-align:center;z-index:3}.dragon-instruction p{margin:0;color:#3d2b19;font-size:clamp(12px,1.5cqw,21px)}
#dragon-grid{position:absolute;inset:0;pointer-events:none}.dragon-stone{position:absolute;width:10%;height:8%;transform:translate(-50%,-50%);display:grid;place-items:center;background:url('assets/steder/takeskogen/dragon-stone-v1.webp') center/contain no-repeat;font:bold clamp(12px,1.5cqw,22px) Georgia;color:#243d35;text-shadow:0 1px #fff9}.dragon-stone.goal{filter:drop-shadow(0 0 8px #ffe174);color:#4e3514}.dragon-stone.checkpoint{filter:drop-shadow(0 0 6px #8ffff2);font-size:clamp(18px,2cqw,28px)}
.dragon-workbench{position:absolute;left:6%;right:6%;bottom:1%;height:34%;z-index:3;display:flex;flex-direction:column;gap:5px;box-sizing:border-box}
.dragon-palette{display:flex;justify-content:center;align-items:center;gap:18px}.dragon-palette>span{background:#173c35e8;padding:5px 10px;border-radius:8px;font-size:clamp(11px,1.3cqw,18px)}.dragon-arrows{display:flex;gap:8px}
#dragon-game .dragon-tile{width:clamp(36px,4.7cqw,68px);height:clamp(36px,4.7cqw,68px);min-height:0;flex:none;padding:0;border:0;background:none;border-radius:8px;touch-action:none;position:relative;cursor:grab}
.dragon-arrow-art{display:block;width:100%;height:100%;background:url('assets/steder/takeskogen/dragon-arrow-tile-v1.webp') center/contain no-repeat;pointer-events:none}.dir-R{transform:rotate(90deg)}.dir-D{transform:rotate(180deg)}.dir-L{transform:rotate(-90deg)}
#dragon-game .dragon-tile[aria-pressed=true]{outline:3px solid #ffe8a6}#dragon-game .dragon-tile.playing{outline:3px solid #a9fff1;filter:drop-shadow(0 0 6px #8ef5e1)}
#dragon-program{display:flex;align-items:center;gap:5px;overflow-x:auto;overflow-y:hidden;min-height:clamp(46px,6.1cqw,86px);padding:4px 9px;box-sizing:border-box;background:#1c3029e8;border:3px ridge #bd985d;border-radius:10px;box-shadow:inset 0 3px 10px #0007;scrollbar-width:thin;scrollbar-color:#d9b674 #213d32;white-space:nowrap;flex-shrink:0}
.dragon-drop-hint{margin:auto;color:#efe0b9;font-size:clamp(12px,1.4cqw,20px)}#dragon-program.drop-ready{border-color:#ffdf8c;background:#345449ed}.drop-before:before{content:'';position:absolute;left:-5px;top:0;height:100%;border-left:3px solid #ffef9b}
.dragon-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}.dragon-actions>div{display:flex;gap:5px}.dragon-actions #dragon-run{font-weight:800;padding-inline:18px}
#dragon-feedback{margin:0;text-align:center;color:#fff1cd;font-size:clamp(11px,1.3cqw,18px);text-shadow:0 1px 3px #000;background:#173c35e8;border-radius:7px;min-height:1.4em}#dragon-feedback:empty{background:none}
#dragon-game .dragon-drag-ghost{position:fixed;width:60px;height:60px;transform:translate(-50%,-50%);pointer-events:none;z-index:100;opacity:.95;background:none;border:0;padding:0}
#dragon-offer .dragon-portrait{position:absolute;left:3%;top:10%;width:12%;height:auto;aspect-ratio:180/220;object-fit:contain}#dragon-offer{padding-left:17%}
@media(max-height:500px){.dragon-workbench{height:35%;gap:2px;left:4%;right:4%}.dragon-scene button{min-height:25px;padding:3px 6px;font-size:10px}.dragon-palette{gap:8px}.dragon-arrows{gap:4px}.dragon-palette>span{padding:2px 5px;font-size:10px}#dragon-game .dragon-tile{width:29px;height:29px}#dragon-program{min-height:39px;padding:2px 5px;gap:3px}.dragon-actions{gap:3px}.dragon-actions>div{gap:3px}.dragon-actions #dragon-run{padding-inline:8px}.dragon-instruction{padding:5px 10px}.dragon-scene h2{font-size:16px}.dragon-scene header button{font-size:11px}#dragon-feedback{font-size:10px}.dragon-stone.checkpoint{font-size:16px}}

.dragon-scene header h2{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}

@media(max-height:500px){.dragon-actions{padding-right:44px;box-sizing:border-box}}


/* Keep help contextual; reserve action positions to avoid jumping controls. */
#dragon-game [hidden]{display:none!important}
.dragon-actions{display:grid;grid-template-columns:1fr auto 1fr}
.dragon-actions>div:last-child{justify-content:flex-end}
#dragon-feedback:empty{visibility:hidden}

#dragon-bridge[open]{position:fixed;inset:0;margin:0;padding:0;border:0;transform:none;display:grid;place-items:center;overflow:hidden;color:#fff0c9;user-select:none}
.bridge-scene{position:relative;width:min(100vw,177.777dvh);aspect-ratio:16/9;container-type:inline-size;overflow:hidden}
.bridge-scene header{position:absolute;inset:2% 3% auto;height:auto;background:none;border:0;display:flex;align-items:center;justify-content:space-between;padding:0;z-index:4}.bridge-scene h2{position:absolute;left:50%;transform:translateX(-50%);margin:0;padding:6px 16px;border-radius:10px;background:#173c35ed;font:bold clamp(18px,2.5cqw,34px) Georgia;white-space:nowrap}
.bridge-scene button{background:#173c35ed;color:#fff0c9;border:1px solid #c1a76b;border-radius:8px;padding:7px 12px;font:600 clamp(11px,1.4cqw,18px) system-ui;cursor:pointer}.bridge-scene button:disabled{opacity:.5;cursor:default}.bridge-scene .primary{background:#e1c582;color:#253b30}.bridge-scene button:focus-visible{outline:3px solid #fff0ad}#bridge-count{background:#173c35ed;padding:8px;border-radius:8px}
#bridge-request{position:absolute;top:11%;left:20%;width:60%;box-sizing:border-box;text-align:center;padding:9px;margin:0;font-size:clamp(13px,1.8cqw,24px);color:#3d2b19;border-radius:12px}
#bridge-actor{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:16/9;pointer-events:none;z-index:3}
#bridge-span{position:absolute;left:25%;width:50%;top:53%;height:7%;border:2px dashed #ffedb19c;border-radius:8px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:#fff5d7;text-shadow:0 1px 4px #000;font-size:clamp(12px,1.4cqw,20px)}#bridge-span.over{outline:4px solid #ffe89b}
#bridge-measure{position:absolute;top:62%;left:25%;width:50%;text-align:center;border-top:2px solid #fff0ba;color:#fff0ba;font-weight:bold;text-shadow:0 2px 3px #000;font-size:clamp(13px,1.6cqw,23px)}
#dragon-bridge .bridge-plank{background:url('assets/steder/takeskogen/dragon-bridge-plank-v1.webp') center/100% 150% no-repeat;border:0;color:#fff9da;text-shadow:0 2px 3px #2c1907;font-weight:800;height:52px;padding:0;border-radius:4px;touch-action:none;flex:none;cursor:grab}
#bridge-span .bridge-plank{position:absolute;top:0;height:100%}#bridge-span .bridge-plank:hover{outline:2px solid #fff4ab}
.bridge-tools{position:absolute;bottom:3%;left:10%;right:10%;z-index:4;text-align:center}.bridge-actions{display:flex;justify-content:center;gap:10px;align-items:center}#bridge-parts{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:12px}#bridge-parts .bridge-plank{max-width:19%;font-size:clamp(14px,1.7cqw,24px)}#bridge-feedback{margin:6px 0 0;background:#173c35e8;border-radius:8px;font-size:clamp(12px,1.4cqw,20px)}#bridge-feedback:empty{visibility:hidden}#dragon-bridge [hidden]{display:none!important}
#dragon-bridge .bridge-ghost{position:fixed;pointer-events:none;transform:translate(-50%,-50%);z-index:10}
@media(max-height:500px){.bridge-tools{bottom:2%;left:5%;right:10%}#bridge-parts{gap:5px;margin-bottom:5px}#dragon-bridge .bridge-plank{height:30px}.bridge-scene button{padding:4px 7px;font-size:10px}.bridge-actions{gap:5px}.bridge-scene h2{font-size:16px}#bridge-request{padding:5px}.bridge-tools #bridge-feedback{font-size:10px}}

/* Installed sections use the straight middle of the existing wooden texture.
   Each slice ends exactly at its length boundary; no transparent end wedges. */
#bridge-span .bridge-plank{background-size:135% 180%;border-radius:0;clip-path:inset(10% 0 14%);box-shadow:inset -1px 0 #604021;}
#bridge-span .bridge-plank:disabled{opacity:1}
#bridge-parts .bridge-plank{position:relative;overflow:visible}
.bridge-stock{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;background:#173c35f5;border-radius:6px;padding:2px 7px;font:600 clamp(10px,1.1cqw,15px) system-ui;color:#fff0c9;text-shadow:none;pointer-events:none}
#bridge-parts:has(.bridge-stock){margin-bottom:32px}
@media(max-height:500px){#bridge-parts:has(.bridge-stock){margin-bottom:21px}.bridge-stock{font-size:10px;padding:1px 5px}}