.trail-page{max-width:1240px;margin:24px auto;padding:0 18px}.trail-page>h1{font-size:clamp(23px,4vw,36px);margin:12px 0 4px;color:#174b2d}.trail-page>p{margin:0 0 16px}.trail{box-sizing:border-box;position:relative;container-type:size;isolation:isolate;width:100%;aspect-ratio:16/9;overflow:hidden;border:3px solid #e2d2a7;border-radius:24px;background:#e7edd2 url('./assets/meadow.webp') center/cover;color:#143f27;font-family:'Zen Maru Gothic',system-ui,sans-serif;font-weight:700;--piece:min(12.2cqw,22cqh)}.trail *{box-sizing:border-box}.trail [hidden]{display:none!important}.trail button,.trail input{font:inherit}.trail button{cursor:pointer;color:#194d2d;border:2px solid #427643;background:#fff8e6;border-radius:12px;padding:8px 12px;line-height:1.25;touch-action:manipulation}.trail button:disabled{cursor:default;opacity:1;color:#687265;border-color:#979e89;background-color:#e8e7d7}.trail button:focus-visible,.trail input:focus-visible{outline:4px solid #d55b0b;outline-offset:3px}.trail button:hover:not(:disabled){box-shadow:0 0 0 3px #e8b536}.trail .green{background:#287539;color:#fff;border-color:#154c2a;box-shadow:0 4px 0 #164a29}.trail .green:disabled{box-shadow:none;background:#e8e7d7;color:#687265}.trail-base{height:100%;display:flex;flex-direction:column;padding:1.5cqh 1.5cqw;gap:1cqh}.trail-top{display:flex;justify-content:space-between;align-items:center;gap:1cqw;flex:0 0 9cqh;min-height:0}.trail-name{font-size:clamp(14px,2.4cqw,28px);padding:1.7cqh 2.6cqw;background:url('./assets/sign.webp') center/100% 100% no-repeat;white-space:nowrap}.trail-nav{display:flex;gap:.55cqw}.trail-nav button{font-size:clamp(11px,1.15cqw,15px);padding:1.1cqh .75cqw;min-height:34px;white-space:nowrap}.trail-cover{display:grid;grid-template-columns:47% 50%;align-items:center;gap:3%;flex:1;min-height:0;padding:2cqh 2cqw}.trail-guide{height:87%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:7cqh 3.8cqw 4cqh;background:url('./assets/notebook.webp') center/100% 100% no-repeat;gap:3cqh}.trail-guide h2{font-size:clamp(27px,4.9cqw,62px);line-height:1.18;margin:0;letter-spacing:.025em}.trail-guide p{font-size:clamp(14px,1.8cqw,22px);margin:0;line-height:1.65}.trail-guide button{font-size:clamp(15px,1.9cqw,24px);padding:2cqh 1.5cqw;width:100%}.trail-example{text-align:center}.trail-example>p{display:inline-block;background:#fff8e9;padding:8px 18px;border-radius:12px;font-size:clamp(16px,2cqw,25px)}.trail-example-row{display:flex;align-items:center;gap:1cqw}.trail-example figure{margin:0;min-width:0;flex:1;background:url('./assets/wood.webp') center/contain no-repeat;padding:2.8cqh 1cqw}.trail-example img{width:100%;height:18cqh;object-fit:contain;display:block}.trail-example figcaption{font-size:clamp(12px,1.5cqw,19px);background:#fff9e6;border-radius:14px;padding:3px}.trail-arrow{font-size:clamp(24px,4cqw,52px);font-weight:900;color:#286d32;text-shadow:2px 0 #fff,-2px 0 #fff,0 2px #fff,0 -2px #fff;flex:none}.trail-game{flex:1;min-height:0;display:grid;grid-template-rows:7cqh minmax(0,1fr) 33cqh 4cqh;gap:1cqh}.trail-counts{display:flex;justify-content:center;gap:2cqw;align-items:center}.trail-counts span{background:#fff9e9;border:1px solid #ccb98d;padding:.5cqh 1.5cqw;border-radius:10px;line-height:1;white-space:nowrap;font-size:clamp(13px,1.4cqw,18px)}.trail-counts b{font-size:clamp(22px,2.4cqw,30px);padding-left:.5cqw}.trail-board{display:flex;align-items:center;justify-content:space-evenly;gap:.8cqw;min-height:0;padding:0 3cqw}.trail-slot{flex:0 1 min(25cqw,35cqh);height:min(25cqw,35cqh);background:url('./assets/wood.webp') center/100% 100% no-repeat;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.6cqh;min-width:0}.trail-slot label{background:#fff9e8;border-radius:9px;padding:.4cqh 1cqw;font-size:clamp(11px,1.25cqw,16px);white-space:nowrap;line-height:1.2}.trail-slot .piece,.trail-card .piece{display:block;width:var(--piece);height:var(--piece);object-fit:contain;flex:none;margin:0 auto}.trail-slot .empty{height:var(--piece);width:var(--piece);display:grid;place-items:center;color:#567845;font-size:clamp(34px,6cqw,64px)}.trail-slot strong{background:#fff9e8;border-radius:9px;padding:.3cqh .9cqw;font-size:clamp(12px,1.45cqw,18px);white-space:nowrap;line-height:1.2}.trail-bottom{display:grid;grid-template-columns:60% minmax(0,1fr);gap:2cqw;min-height:0;padding:0 2cqw}.trail-bank{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1cqw;align-items:stretch;min-height:0}.trail .trail-card{position:relative;border:3px solid transparent;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8cqh;padding:1.3cqh .5cqw;color:#143f27;background: url('./assets/card.webp') center/100% 100% no-repeat;font-size:clamp(12px,1.5cqw,19px);min-width:0}.trail-card .placed{font-size:clamp(11px,1.2cqw,15px);line-height:1.15;min-height:1.2em;color:#fff;background:#2e7037;border-radius:10px;padding:2px 9px;visibility:hidden}.trail-card:disabled .placed{visibility:visible}.trail .trail-card.wrong{border-color:#bb551e;box-shadow:0 0 0 3px #fff1bb}.trail .trail-card:disabled{color:#143f27;background-color:transparent}.trail-notes{background:url('./assets/notebook.webp') center/100% 100% no-repeat;padding:4.5cqh 2cqw 1.7cqh;display:flex;flex-direction:column;justify-content:space-between;gap:1cqh;min-height:0}.trail-notes p{font-size:clamp(13px,1.5cqw,19px);line-height:1.45;margin:0}.trail-notes #explain{font-size:clamp(11px,1.15cqw,15px);line-height:1.5}.trail-note-actions{display:flex;gap:.7cqw}.trail-note-actions button{flex:1;font-size:clamp(11px,1.15cqw,15px);padding:1cqh .6cqw;min-height:32px}.trail-legend{text-align:center;font-size:clamp(11px,1.2cqw,15px);line-height:1.35;margin:0;align-self:center;background:#fff9e8e6;border-radius:10px;justify-self:center;padding:2px 15px}.trail-dialog{position:absolute;inset:0;background:#173a36b8;display:grid;place-items:center;padding:4cqh 4cqw;z-index:10}.trail-dialog-box{background:#fff9e9;border:5px solid #99af6d;border-radius:22px;max-width:650px;width:85%;max-height:100%;overflow:auto;padding:clamp(18px,4cqh,38px);font-size:clamp(15px,1.8cqw,22px);line-height:1.6}.trail-dialog-box h2{margin:0 0 12px;font-size:1.5em}.trail-dialog-box button{min-height:44px;margin:5px 3px}.trail-dialog-box p{margin:12px 0}.trail-dialog-box input{width:100%;accent-color:#287539}.trail-dialog-box label{display:block;margin:12px 0}.parent-note{background:#fff9e9;padding:18px;border-radius:16px;margin:20px 0;font-size:15px;line-height:1.8}.trail:fullscreen{width:100vw;height:100dvh;max-width:none;max-height:none;aspect-ratio:auto;border:0;border-radius:0}
@container(max-width:650px){.trail-top{flex-wrap:wrap;justify-content:center;flex-basis:12cqh}.trail-name{font-size:clamp(15px,3.9cqw,22px);padding:1cqh 5cqw}.trail-nav{justify-content:center;width:100%;gap:1.3cqw}.trail-nav button{font-size:clamp(10px,2.7cqw,14px);padding:.6cqh 1cqw;min-height:32px}.trail-guide h2{font-size:clamp(27px,7cqw,45px)}.trail-guide p{font-size:16px}.trail-guide button{font-size:17px}.trail-game{grid-template-rows:6cqh 23cqh 1fr 5cqh}.trail-counts{gap:1.5cqw}.trail-counts span{font-size:12px;padding:1cqh 2cqw}.trail-counts b{font-size:22px}.trail-board{padding:0;gap:0}.trail-slot{height:27cqw;flex-basis:27cqw}.trail-slot label{font-size:10px;padding:2px 3px}.trail-slot strong{font-size:11px;padding:2px}.trail-slot .empty{font-size:38px}.trail-arrow{font-size:25px}.trail-bottom{grid-template-columns:1fr;grid-template-rows:25cqh minmax(0,1fr);gap:1.6cqh;padding:0 1cqw}.trail .trail-card{font-size:13px;padding:1cqh 1cqw;gap:.5cqh}.trail-card .placed{font-size:11px}.trail-notes{padding:3.5cqh 4cqw 1.7cqh;gap:.8cqh}.trail-notes p{font-size:15px}.trail-notes #explain{font-size:12px}.trail-note-actions button{font-size:13px;min-height:36px}.trail-legend{font-size:11px;padding:3px 4px}.trail-dialog-box{width:100%;font-size:16px}.trail-cover{grid-template-columns:1fr;grid-template-rows:57% 40%;gap:3%;padding:0 3cqw 2cqh}.trail-guide{height:100%;padding:4.8cqh 7cqw 2cqh;gap:1.3cqh}.trail-example>p{font-size:16px;margin:0 0 1cqh;padding:5px 15px}.trail-example img{height:13cqh}.trail-example figcaption{font-size:12px}.trail-example figure{padding:1.8cqh 2cqw}.trail-example-row{gap:1.5cqw}}
@media(max-width:650px){.trail-page{padding:0 8px}.trail{aspect-ratio:auto;height:min(850px,calc(100svh - 12px));min-height:650px;--piece:min(21cqw,12cqh);border-radius:15px}}@media(max-height:520px) and (min-width:651px){.trail-page{padding:0 8px}.trail{height:calc(100svh - 8px);aspect-ratio:auto;--piece:min(12cqw,24cqh)}.trail-top{flex-basis:10cqh}.trail-nav button{font-size:11px;min-height:29px;padding:3px 5px}.trail-name{font-size:19px}.trail-game{grid-template-rows:8cqh minmax(0,1fr) 34cqh 4cqh}.trail-notes{padding:4.5cqh 2cqw 1.5cqh}.trail-notes p{font-size:13px}.trail-notes #explain{font-size:11px}.trail-note-actions button{font-size:11px;min-height:27px;padding:3px}.trail .trail-card{font-size:12px;gap:1px;padding:3px}.trail-slot{height:min(23cqw,33cqh)}.trail-slot label,.trail-slot strong{font-size:11px}.trail-guide h2{font-size:37px}.trail-guide p{font-size:14px}.trail-guide button{font-size:15px}.trail-counts b{font-size:22px}.trail-legend{font-size:10px}.trail-dialog-box{font-size:15px}}

@container(min-width:1400px){.trail-name{font-size:36px}.trail-nav button{font-size:19px}.trail-guide h2{font-size:clamp(62px,4.9cqw,96px)}.trail-guide p,.trail-guide button{font-size:30px}.trail-example>p{font-size:30px}.trail-example figcaption{font-size:24px}.trail-counts span{font-size:22px}.trail-counts b{font-size:40px}.trail-slot label{font-size:22px}.trail-slot strong{font-size:24px}.trail .trail-card{font-size:26px}.trail-card .placed{font-size:20px}.trail-notes p{font-size:29px}.trail-notes #explain{font-size:22px}.trail-note-actions button{font-size:21px}.trail-legend{font-size:18px}}