#tower-trails { --shadow: 0 8px 30px #42306509; font-size:15px; line-height:1.5; }
#tower-trails * { box-sizing:border-box }
#tower-trails button, #tower-trails a, #tower-trails input { -webkit-tap-highlight-color:transparent }
#tower-trails button { font:inherit; cursor:pointer; color:inherit }
#tower-trails button:disabled { cursor:default; opacity:.42 }
#tower-trails button, #tower-trails a { touch-action:manipulation }
#tower-trails a { color:inherit; text-decoration:none }
#tower-trails button:focus-visible, #tower-trails a:focus-visible, #tower-trails input:focus-visible { outline:3px solid var(--accent); outline-offset:4px }
#tower-trails button { border:0 }
#tower-trails button:hover:not(:disabled) { filter:brightness(.97) }
#tower-trails .header { max-width:1440px; height:95px; margin:auto; padding:0 48px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line) }
#tower-trails .back { font-size:13px; color:var(--muted) }
#tower-trails .brand { display:flex; align-items:center; gap:10px; font-size:23px; font-weight:bold; letter-spacing:-1px }
#tower-trails .brand small { display:block; font-size:8px; letter-spacing:1.6px; font-weight:600; color:var(--muted) }
#tower-trails .quiet { background:#fff9; border:1px solid var(--line); padding:10px 15px; border-radius:12px; min-height:44px; font-size:13px; font-weight:bold }
#tower-trails .header .quiet { background:transparent }
#tower-trails .shell { max-width:1380px; margin:auto; display:grid; grid-template-columns:265px minmax(0,1fr); gap:42px; padding:36px 36px 20px }
#tower-trails .sidebar { padding-top:13px }
#tower-trails .eyebrow { font-size:10px; letter-spacing:1.8px; font-weight:bold; color:var(--accent) }
#tower-trails h2 { font-size:24px; letter-spacing:-.7px; margin:8px 0 4px }
#tower-trails p { color:var(--muted); margin:7px 0 16px }
#tower-trails .sidebar>p { font-size:13px; margin-bottom:24px }
#tower-trails .route { display:grid; gap:8px }
#tower-trails .route-item { position:relative; text-align:left; display:flex; align-items:center; gap:12px; border-radius:14px; background:transparent; border:1px solid transparent; padding:10px; width:100%; min-height:61px }
#tower-trails .route-item.active { background:var(--soft); border-color:var(--soft-border) }
#tower-trails .route-item:disabled { opacity:.58 }
#tower-trails .route-item .number { flex:none; display:grid; place-items:center; width:34px; height:34px; background:#ebe7dd; color:#77706d; border-radius:50%; font-weight:bold; font-size:12px }
#tower-trails .route-item.active .number { background:var(--accent); color:white; box-shadow:0 3px 0 #573a9220 }
#tower-trails .route-item.done .number { background:#deecdc; color:#44774d }
#tower-trails .route-item strong { display:block; font-size:12px }
#tower-trails .route-item small { display:block; font-size:10px; color:var(--muted); margin-top:2px }
#tower-trails .collection-button { margin-top:22px; background:#fff; border:1px solid var(--line); border-radius:13px; padding:15px 12px; width:100%; font-size:11px; text-align:left }
#tower-trails .collection-button b { float:right; color:var(--accent) }
#tower-trails .save-note { font-size:12px; text-align:center; color:var(--muted); margin:16px 0 }
#tower-trails .level-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 20px; min-height:88px }
#tower-trails h1 { font-size:clamp(25px,3vw,36px); letter-spacing:-1.4px; line-height:1.15; margin:8px 0 }
#tower-trails .level-heading p { font-size:13px; margin:0 }
#tower-trails .level-heading>.quiet { white-space:nowrap }
#tower-trails .scene { position:relative; overflow:hidden; border-radius:25px; background:#eaf3f4; min-height:460px; box-shadow:var(--shadow); border:1px solid #d8e6e5; isolation:isolate }
#tower-trails .landscape { position:absolute; inset:0; z-index:-1 }
#tower-trails .landscape svg { width:100%; height:100%; object-fit:cover }
#tower-trails .scene-top { display:flex; justify-content:space-between; position:relative; z-index:1; margin:22px }
#tower-trails .world-pill, #tower-trails .moves { border-radius:25px; background:#ffffffd9; padding:8px 14px; font-size:11px; backdrop-filter:blur(8px); color:#52656b }
#tower-trails .moves b { font-size:16px; margin-left:9px; color:var(--ink) }
#tower-trails .scene-caption { position:absolute; left:38px; top:93px; color:#526f70; transform:rotate(-3deg) }
#tower-trails .scene-caption span { display:block; font-size:14px }
#tower-trails .scene-caption strong { font-size:23px; letter-spacing:-.7px }
#tower-trails .board { position:absolute; left:4%; right:4%; bottom:35px; height:235px; outline:none }
#tower-trails .tower-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5%; height:100%; position:relative; z-index:2 }
#tower-trails .tower { position:relative; min-width:0; background:transparent; border-radius:16px; touch-action:none; user-select:none; -webkit-user-select:none; outline-offset:0 }
#tower-trails .tower:before { content:''; position:absolute; width:11px; top:15px; bottom:39px; left:calc(50% - 5.5px); background:linear-gradient(90deg,#a47a55,#e7c391 45%,#c69761); border-radius:7px 7px 0 0; box-shadow:3px 0 0 #5843270e }
#tower-trails .tower:after { content:''; position:absolute; bottom:31px; left:0; right:0; height:13px; background:linear-gradient(#ead4a9,#be945e); border-radius:8px; box-shadow:0 6px 0 #9e74483b,0 12px 15px #415b5120 }
#tower-trails .tower-name { position:absolute; bottom:-6px; left:0; right:0; font-size:11px; color:#425851; font-weight:bold }
#tower-trails .flag { position:absolute; top:12px; left:calc(50% + 4px); background:#7658b4; color:#fff; font-size:10px; padding:4px 12px 4px 7px; clip-path:polygon(0 0,100% 0,82% 50%,100% 100%,0 100%) }
#tower-trails .disk { position:absolute; height:var(--disk-height,24px); bottom:calc(44px + var(--stack) * var(--disk-height,24px)); left:50%; transform:translateX(-50%); width:var(--width); background:linear-gradient(#ffffff45,transparent 50%),var(--color); border:1px solid #00000014; border-bottom:4px solid #00000015; border-radius:12px; box-shadow:0 3px 4px #33412b1a,inset 0 2px 0 #ffffff65; display:grid; place-items:center; color:#252e42; font-size:11px; font-weight:bold; pointer-events:none; z-index:3 }
#tower-trails .disk span { background:#ffffff80; min-width:17px; height:16px; line-height:16px; border-radius:50% }
#tower-trails .disk.lifted { opacity:.18 }
#tower-trails .tower.valid { background:#ffffff3f; box-shadow:inset 0 0 0 2px #ffffffa0 }
#tower-trails .tower.target { background:#b9e0ab77; box-shadow:inset 0 0 0 3px #50815b }
#tower-trails .tower.blocked { box-shadow:inset 0 0 0 3px #c98366; background:#fbe2d54f }
#tower-trails .tower.selected { box-shadow:inset 0 0 0 3px #9476c3 }
#tower-trails .tower.hint-from { outline:3px dashed #8160b9; outline-offset:-3px }
#tower-trails .tower.hint-to { background:#d7efcb88; outline:3px dashed #528751; outline-offset:-3px }
#tower-trails .disk.preview { opacity:.45; border:2px dashed #324d36; box-shadow:none }
#tower-trails .ground { position:absolute; left:-2%; right:-2%; bottom:20px; height:50px; background:#aac69388; border-radius:50%; z-index:0 }
#tower-trails .drag-ghost { position:fixed; pointer-events:none; z-index:1000; margin:0; transform:translate(-50%,-100%) rotate(-3deg); box-shadow:0 12px 18px #28384030; opacity:.98 }
#tower-trails .companion-strip { display:flex; align-items:center; gap:13px; margin-top:17px; background:#fff9; border:1px solid var(--line); border-radius:17px; padding:9px 17px; min-height:90px }
#tower-trails .companion { width:65px; height:65px; flex:none }
#tower-trails .companion svg { width:100%; height:100% }
#tower-trails .companion-strip b { font-size:12px; color:var(--accent) }
#tower-trails .companion-strip p { font-size:13px; line-height:1.5; margin:3px 0 }
#tower-trails .controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:19px }
#tower-trails .controls>div { display:flex; gap:8px }
#tower-trails .hint-button, #tower-trails .primary { background:var(--accent); color:white; border-radius:12px; padding:13px 20px; font-weight:bold; font-size:13px; box-shadow:0 3px 0 #503485; min-height:46px }
#tower-trails .hint-button { background:var(--soft); color:var(--accent); border:1px solid var(--soft-border); box-shadow:0 3px 0 var(--soft-border) }
#tower-trails .footnote { font-size:11px; margin:22px 0 0; text-align:center; color:#878292 }
#tower-trails .footnote span { display:block; font-size:10px; margin-top:5px }
#tower-trails dialog { border:1px solid var(--line); border-radius:24px; background:var(--bg); color:var(--ink); box-shadow:0 25px 120px #20163833; width:min(92vw,500px); max-height:88dvh; padding:32px; overflow:auto }
#tower-trails dialog::backdrop { background:#25263869; backdrop-filter:blur(5px) }
#tower-trails dialog h2 { font-size:28px }
#tower-trails dialog p { font-size:14px }
#tower-trails dialog .close { position:absolute; right:12px; top:12px; background:transparent; font-size:25px; width:44px; height:44px; border-radius:50% }
#tower-trails .dialog-actions { display:flex; gap:12px; justify-content:flex-end }
#tower-trails .rules { padding-left:24px; line-height:1.8; font-size:16px }
#tower-trails .setting { display:flex; align-items:center; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--line); gap:15px }
#tower-trails .setting small { display:block; color:var(--muted); font-size:12px }
#tower-trails .setting input { width:24px; height:24px; accent-color:var(--accent) }
#tower-trails .collection { display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
#tower-trails .collectible { text-align:center; border-radius:16px; background:var(--soft); padding:12px }
#tower-trails .collectible svg { width:90px; height:90px; display:block; margin:auto }
#tower-trails .collectible.locked svg { filter:grayscale(1); opacity:.22 }
#tower-trails .collectible b { font-size:13px }
#tower-trails .collectible small { display:block; font-size:11px; color:var(--muted) }
#tower-trails #tt-win-dialog { text-align:center }
#tower-trails #tt-win-dialog .quiet { display:block; margin:16px auto 0; border:0; background:transparent }
#tower-trails .reward-art { width:145px; height:145px; margin:auto; animation:tt-arrive .5s ease-out }
#tower-trails .reward-art svg { width:100%; height:100% }
#tower-trails .confetti { color:#b69a4c; letter-spacing:10px; font-size:25px }
#tower-trails .bonus-heading { font-size:10px; letter-spacing:1px; color:var(--accent); margin:17px 0 4px }
#tower-trails .skip { position:fixed; top:-80px; left:12px; z-index:1100; background:white; padding:12px }
#tower-trails .skip:focus { top:12px }
@keyframes tt-arrive {
from { transform:translateY(20px) scale(.8); opacity:0 }
to { transform:none; opacity:1 }
}
#tower-trails .scene[data-theme=space] .scene-caption { color:#e1dbff }
#tower-trails .scene[data-theme=space] .tower-name { color:#eee7ff }
#tower-trails .scene[data-theme=space] .ground { background:#baadd14f }
@media(min-width:1450px) {
#tower-trails .shell { padding-top:46px }
#tower-trails .scene { min-height:520px }
#tower-trails .board { height:260px; bottom:45px }
#tower-trails .scene-caption { top:110px }
}
@media(max-width:1050px) {
#tower-trails .shell { grid-template-columns:210px minmax(0,1fr); gap:22px; padding:26px 24px }
#tower-trails .header { padding:0 26px }
#tower-trails .route-item { gap:8px; padding:8px 5px }
#tower-trails .route-item strong { font-size:11px }
#tower-trails .level-heading>.quiet span { display:none }
#tower-trails .scene { min-height:440px }
#tower-trails .scene-caption strong { font-size:20px }
#tower-trails .collection-button { font-size:10px }
}
@media(max-width:760px) {
#tower-trails .header { height:76px; padding:0 18px }
#tower-trails .brand { font-size:20px }
#tower-trails .brand small { font-size:6px; letter-spacing:1.2px }
#tower-trails .brand img { width:31px; height:31px }
#tower-trails .header .quiet span, #tower-trails .back span { display:none }
#tower-trails .header .quiet { padding:8px 13px }
#tower-trails .shell { display:block; padding:22px 16px }
#tower-trails .sidebar { display:none }
#tower-trails .level-heading { margin-bottom:15px; min-height:75px }
#tower-trails .level-heading>.quiet span { display:inline }
#tower-trails .level-heading>.quiet { font-size:11px; padding:8px 10px }
#tower-trails h1 { font-size:27px; letter-spacing:-1px }
#tower-trails .level-heading p { font-size:12px }
#tower-trails .eyebrow { font-size:9px; letter-spacing:1.3px }
#tower-trails .scene { min-height:435px; border-radius:20px }
#tower-trails .scene-top { margin:16px }
#tower-trails .scene-caption { left:24px; top:86px }
#tower-trails .scene-caption strong { font-size:22px }
#tower-trails .board { left:4%; right:4%; height:230px; bottom:31px }
#tower-trails .tower-row { gap:5% }
#tower-trails .disk { border-radius:9px; font-size:10px }
#tower-trails .companion-strip { padding:8px 12px; gap:9px }
#tower-trails .companion { width:52px; height:52px }
#tower-trails .companion-strip p { font-size:12px }
#tower-trails .controls { gap:8px }
#tower-trails .controls>div { gap:5px }
#tower-trails .controls .quiet { padding:10px; font-size:12px }
#tower-trails .hint-button { padding:12px; font-size:12px }
#tower-trails .footnote { margin-top:20px }
#tower-trails .world-pill, #tower-trails .moves { font-size:10px; padding:7px 11px }
#tower-trails .tower-name { font-size:10px }
#tower-trails .flag { font-size:9px; padding-right:9px }
#tower-trails dialog { padding:28px 22px }
#tower-trails .save-note { display:block }
}
@media(max-width:380px) {
#tower-trails .shell { padding:18px 10px }
#tower-trails .level-heading>.quiet span { display:none }
#tower-trails h1 { font-size:24px }
#tower-trails .controls .quiet { padding:9px 8px }
#tower-trails .hint-button { padding:11px 9px }
#tower-trails .scene { min-height:420px }
#tower-trails .world-pill { max-width:180px }
#tower-trails .brand { font-size:18px }
#tower-trails .disk span { min-width:14px; height:14px; line-height:14px }
#tower-trails .board { left:3%; right:3% }
}
@media(max-height:540px) and (min-width:600px) {
#tower-trails .header { height:58px }
#tower-trails .shell { padding-top:12px }
#tower-trails .scene { min-height:350px }
#tower-trails .scene-caption { top:70px }
#tower-trails .board { height:200px; bottom:25px }
#tower-trails .level-heading { min-height:65px }
#tower-trails .sidebar { padding-top:0 }
}
@media(prefers-reduced-motion:reduce) {
#tower-trails *, #tower-trails *:before, #tower-trails *:after { animation:none!important; scroll-behavior:auto!important }
}
#tower-trails .play .save-note { display:block }
#tower-trails .bonus-heading { cursor:pointer; min-height:44px; padding:10px 0; line-height:1.7 }
#tower-trails .companion.cheer { animation:cheer .4s ease-out }
@keyframes cheer {
50% { transform:translateY(-7px) rotate(-7deg) }
100% { transform:none }
}

#tower-trails .header { height:auto; min-height:78px; padding:12px 32px; }
#tower-trails .brand { color:var(--ink); }
#tower-trails .quiet { background:var(--bg); }
#tower-trails .setting input { padding:0; flex:none; }
#tower-trails .setting { margin:0; }
#tower-trails .setting span { color:var(--ink); font-weight:700; }
#tower-trails .save-reset { display:block; margin:0 auto; }
#tower-trails .scene { touch-action:pan-y; }
#tower-trails .play { min-width:0; }
#tower-trails .controls, #tower-trails .controls>div, #tower-trails .dialog-actions { flex-wrap:wrap; }
#tower-trails .save-note[data-warning=true] { color:var(--ink); background:var(--soft); border:1px solid var(--soft-border); padding:12px; border-radius:12px; }
#tower-trails .companion.cheer { animation:tt-arrive .3s ease-out; }
@media(max-width:760px) {
    #tower-trails .header { padding:12px 16px; gap:10px; }
    #tower-trails .brand { font-size:19px; }
    #tower-trails .back { display:none; }
    #tower-trails .save-note { display:block; }
}
@media(prefers-reduced-motion:reduce) {
    #tower-trails *, #tower-trails *::before, #tower-trails *::after { animation:none!important; transition:none!important; }
}