/* Paths sit behind letters; every cell retains its full touch target. */
.trails-intro{max-width:720px;margin:24px auto 12px}
.trails-intro h1{font-size:clamp(1.8rem,5vw,2.8rem);margin:0 0 8px}
.trails-intro p{color:var(--muted);line-height:1.6}
.trails-intro+div{max-width:720px;margin:auto}
#puzzle{max-width:720px;margin:auto;--trails-blue:#b9deef;--trails-blue-ink:#15455c;--trails-gold:#eed38b;--trails-gold-ink:#513d0c;--trails-pencil:#e6e8dc}
html[data-theme=dark] #puzzle{--trails-blue:#294b60;--trails-blue-ink:#e4f4ff;--trails-gold:#5e4c24;--trails-gold-ink:#ffedba;--trails-pencil:#465951}
.trails-collection,.trails-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0}
.trails-collection select,.trails-toolbar button,.trails-success button,.trails-tutorial button,.trails-discoveries button{font:inherit;background:var(--panel,var(--bg));color:var(--ink);border:1px solid var(--line);border-radius:12px;min-height:44px;padding:9px 14px;cursor:pointer}
.trails-collection label{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.trails-meta{color:var(--muted);font-size:.86rem}
.trails-game{max-width:540px;margin:auto}
.trails-theme{text-align:center;padding:16px 12px 8px}
.trails-theme small{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:600}
.trails-theme h2{margin:7px 0;font-size:1.6rem;line-height:1.25}
.trails-theme .trails-meta{margin:8px 0}
.trails-progress{display:flex;align-items:center;justify-content:center;gap:12px;max-width:440px;margin:8px auto 12px;font-size:.82rem;color:var(--muted)}
.trails-progress progress{appearance:none;display:block;flex:1;min-width:60px;max-width:170px;height:6px;border:0;border-radius:9px;overflow:hidden;background:var(--line);accent-color:var(--trails-blue-ink)}
.trails-progress progress::-webkit-progress-bar{background:var(--line);border-radius:9px}
.trails-progress progress::-webkit-progress-value{background:var(--trails-blue-ink);border-radius:9px;transition:width .25s ease}
.trails-progress progress::-moz-progress-bar{background:var(--trails-blue-ink);border-radius:9px}
.trails-board{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:4px;padding:8px;width:100%;max-width:440px;margin-inline:auto;border:1px solid var(--line);border-radius:20px;background:var(--panel,var(--bg));touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.trails-cell{z-index:1;position:relative;aspect-ratio:1;min-width:0;min-height:40px;border:0;background:transparent;color:var(--ink);font:650 clamp(1.2rem,4.5vw,1.65rem)/1 system-ui;cursor:pointer;border-radius:50%;padding:0;touch-action:none;transition:color .15s ease}
.trails-cell.is-selected{background:radial-gradient(circle,var(--trails-pencil) 65%,transparent 67%);color:var(--ink)}
.trails-cell.is-found{background:radial-gradient(circle,var(--trails-blue) 65%,transparent 67%);color:var(--trails-blue-ink)}
.trails-cell.is-key{background:radial-gradient(circle,var(--trails-gold) 65%,transparent 67%);color:var(--trails-gold-ink)}
.trails-cell.is-hint{outline:2px dashed var(--focus,var(--accent));outline-offset:-5px}
html[data-theme] .trails-cell:focus-visible{outline-offset:-3px}
.trails-cell.is-inspected{box-shadow:inset 0 0 0 2px currentColor}
.trails-cell.is-recent{animation:trails-discovery .38s ease-out}
.trails-cell small{position:absolute;right:8%;bottom:7%;font-size:.58rem;line-height:1;background:var(--panel);color:var(--ink);border-radius:4px;padding:2px}
.trails-paths{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.trails-paths polyline{fill:none;stroke:var(--trails-pencil);stroke-width:13;stroke-linecap:round;stroke-linejoin:round;opacity:1}
.trails-paths polyline.found{stroke:var(--trails-blue);stroke-width:13}
.trails-paths polyline.key{stroke:var(--trails-gold)}
.trails-paths polyline.hint{stroke:var(--focus,var(--accent));stroke-width:3;stroke-dasharray:2 7}
.trails-selected{height:2.1em;display:flex;align-items:center;justify-content:center;text-align:center;font-size:1.2rem;font-weight:700;letter-spacing:.08em;overflow-wrap:anywhere;margin:6px 0 0}
.trails-toolbar{justify-content:center}
.trails-toolbar button:not(:disabled):hover,.trails-discoveries button:hover{background:var(--panel2,var(--bg));border-color:var(--muted)}
.trails-toolbar button:disabled{opacity:.42;cursor:default}
.trails-notice{height:3em;text-align:center;line-height:1.5;color:var(--muted);padding:0 8px;margin:0;font-size:.9rem}
.trails-notice[data-tone=success]{color:var(--trails-blue-ink);font-weight:600}
.trails-notice[data-tone=key]{color:var(--trails-gold-ink);font-weight:700}
.trails-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:.76rem;margin:10px 0}
.trails-legend span{display:inline-flex;align-items:center;gap:6px}
.trails-legend span::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--trails-blue);border:1px solid var(--trails-blue-ink)}
.trails-legend span:last-child::before{border-radius:2px;background:var(--trails-gold);border-color:var(--trails-gold-ink)}
.trails-answers{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:12px 0}
.trails-answers li{font-size:.82rem}
.trails-discoveries button{font-size:.8rem;padding:7px 12px;background:var(--trails-blue);color:var(--trails-blue-ink);border-color:transparent}
.trails-discoveries .key button{background:var(--trails-gold);color:var(--trails-gold-ink)}
.trails-discoveries button[aria-pressed=true]{border-color:currentColor}
.trails-hint{padding:12px;border-left:3px solid var(--accent);border-radius:0 10px 10px 0;background:var(--panel);line-height:1.5}
.trails-success,.trails-tutorial{padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--panel);margin:18px 0}
.trails-success h2{margin-top:0}
.trails-success p{line-height:1.6}
.trails-success textarea{display:block;width:100%;min-height:125px;margin:12px 0;padding:12px;border:1px solid var(--line);border-radius:10px;font:inherit}
.trails-save,.trails-help{font-size:.82rem;color:var(--muted);line-height:1.6}
.trails-board[style*="--cols:3"]{max-width:280px}
.trails-mobile-rules{display:none}
@keyframes trails-discovery{0%{transform:scale(.9)}55%{transform:scale(1.06)}100%{transform:scale(1)}}
@media(max-width:600px){
 body[data-daily-game=tematska-mreza] .daily-banner{margin:10px auto;padding:10px 12px;font-size:.78rem;line-height:1.45}
 body[data-daily-game=tematska-mreza] .daily-banner p{margin:4px 0}
 body[data-daily-game=tematska-mreza] .daily-sync{margin:6px 0 0}
 body[data-daily-game=tematska-mreza] .daily-links{gap:8px}
 body[data-daily-game=tematska-mreza] .daily-links a{display:inline-flex;align-items:center;min-height:44px}
 .trails-intro{margin:16px auto 4px}
 .trails-intro h1{margin-bottom:2px}
 .trails-intro>[data-game-rules]{display:none}
 .trails-mobile-rules{display:block;font-size:.85rem}
 .trails-mobile-rules summary{min-height:44px;display:list-item;align-content:center;cursor:pointer;color:var(--muted);width:max-content;padding-right:12px}
 .trails-mobile-rules summary:focus-visible{outline:3px solid var(--focus,var(--accent));outline-offset:3px;border-radius:4px}
 .trails-mobile-rules p{margin:0 0 12px;line-height:1.5}
 .trails-collection{display:inline-flex;width:calc(100% - 100px);margin:4px 0;vertical-align:top;gap:0;min-height:44px}
 .trails-collection>span{display:none}
 .trails-collection label{gap:6px;font-size:.8rem;flex-wrap:nowrap}
 .trails-collection select{min-height:44px;padding:8px;max-width:140px;font-size:.8rem}
 #puzzle>.trails-toolbar:has([data-tutorial]){display:inline-flex;width:100px;margin:4px 0;vertical-align:top;justify-content:flex-end}
 [data-tutorial]{max-width:100px;font-size:.75rem!important;padding:8px!important}
 .trails-theme{padding:10px 4px 8px}
 .trails-theme h2{margin:4px 0;font-size:1.35rem}
 .trails-theme .trails-meta{margin:6px 0}
 .trails-notice{font-size:.84rem}
}
@media(max-width:390px){
 .trails-board{gap:2px;padding:4px;border-radius:14px}
 .trails-toolbar{gap:7px}
 .trails-toolbar button{padding:9px 10px;font-size:.85rem}
 .trails-collection select{max-width:100%}
 .trails-progress{gap:8px;font-size:.76rem}
 .trails-progress progress{max-width:100px}
 .trails-paths polyline,.trails-paths polyline.found{stroke-width:10}
 .trails-paths polyline.hint{stroke-width:3}
}
@media(prefers-reduced-motion:reduce){
 .trails-cell,.trails-progress progress::-webkit-progress-value{animation:none;transition:none}
}