.fil-shell{max-width:1000px;padding-block:24px 76px}
.fil-back{display:inline-block;margin-bottom:17px}
.fil-heading{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:18px}
.fil-heading h1{margin:0;color:#f7efdd;font-size:clamp(3rem,8vw,5rem);line-height:1;letter-spacing:-.025em}
.fil-heading p{margin:10px 0 0;color:#d2decf;font-size:1.05rem}
.fil-heading img{width:120px;height:120px;object-fit:cover;border-radius:15px;box-shadow:6px 9px 18px #07100b8c}
.fil-gate{padding:13px 16px;margin-bottom:15px;background:#40372f;border:1px solid #ad8c6c;color:#f2ede1}
.fil-gate[hidden],#fil-game[hidden],#fil-empty[hidden]{display:none}
.fil-meta,.fil-hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.fil-meta{margin-bottom:15px}
.fil-meta>div,.fil-hud>div{min-width:0;padding:10px 13px;background:#2b392f;border:1px solid #607565;border-radius:10px}
.fil-meta span,.fil-hud span,.fil-clock span{display:block;color:#c7d5c4;font-size:.7rem;font-weight:900;letter-spacing:.035em}
.fil-meta strong,.fil-hud strong,.fil-clock strong{display:block;margin-top:3px;color:#f7e6bc;font-size:1.1rem;font-weight:1000;font-variant-numeric:tabular-nums}
.fil-desk{padding:clamp(14px,3vw,27px);background:#25342b;border:1px solid #637c69;border-radius:15px}
.fil-desk-head{display:flex;align-items:start;justify-content:space-between;gap:15px;padding-bottom:17px;border-bottom:1px solid #59705d}
.fil-desk-head h2{margin:0 0 3px;font-size:clamp(1.45rem,4vw,2.2rem)}
.fil-desk-head p{margin:0;color:#d2ddce}
.fil-clock{min-width:90px;text-align:right}
.fil-clock strong{font-size:1.5rem}
.fil-empty{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:23px;padding:28px 8px 14px}
.fil-empty>img{width:150px;height:150px;object-fit:contain}
.fil-empty h3{margin:0 0 7px;font-size:clamp(1.45rem,3vw,2.1rem)}
.fil-empty p{max-width:56ch;margin:0 0 18px;color:#d7e1d2;line-height:1.55}
.fil-guide{margin:0 auto 16px;max-width:720px;border:1px solid #718570;border-radius:10px;background:#1b2d25;color:#dfe9db}
.fil-guide summary{padding:12px 15px;color:#f4d18c;font-weight:900;cursor:pointer}
.fil-guide[open] summary{border-bottom:1px solid #526a58}
.fil-guide ol{margin:10px 18px 8px;padding-left:20px;line-height:1.5}
.fil-guide li{padding:3px 0}
.fil-guide p{margin:8px 16px 14px;line-height:1.5;color:#d1dece}
.fil-actions,.fil-result-actions,.fil-confirm>div{display:flex;gap:10px;flex-wrap:wrap}
.fil-hud{max-width:530px;margin:17px auto 10px}
.fil-board-wrap{max-width:530px;margin:auto;padding:8px;background:#12231e;border:1px solid #6a8975;border-radius:13px}
.fil-board-head{display:flex;justify-content:space-between;gap:10px;padding:4px 5px 9px;color:#ebe8dc;font-size:.79rem;font-weight:900}
.fil-board-head span:last-child{color:#f2c979}
.fil-board{position:relative;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(8,1fr);aspect-ratio:7/8;overflow:hidden;border:1px solid #587360;border-radius:7px;background:#2c3d34;touch-action:manipulation;outline-offset:3px}
.fil-board:focus-visible{outline:3px solid #f4cf8a}
.fil-tile{position:relative;min-width:0;min-height:0;background:#304239;border:1px solid #405449;cursor:pointer;transition:background .17s ease}
.fil-tile:nth-child(odd){background:#34463b}
.fil-tile.street::after{content:'';position:absolute;top:46%;left:0;right:0;height:1px;background:#64796338}
.fil-tile.building{background:#1c2d27;border-color:#172820;cursor:default}
.fil-tile.building::before{content:'';position:absolute;inset:7% 7% 11%;border:2px solid #5b6858;border-radius:4px;background:linear-gradient(145deg,#556454,#34463d 65%);box-shadow:2px 3px 0 #101b17}
.fil-tile.building::after{content:'';position:absolute;top:24%;left:20%;width:14%;height:10%;background:#efc77b;box-shadow:20px 0 #a2b284,0 14px #829b90,20px 14px #d9b778;opacity:.76}
.fil-tile.vision{background:#74694d}
.fil-tile.next-vision{box-shadow:inset 0 0 0 2px #e5c5789e}
.fil-tile.safe-next{box-shadow:inset 0 0 0 3px #73d4e2}
.fil-tile.risk-next{box-shadow:inset 0 0 0 3px #f3b36f}
.fil-tile.reachable:not(.vision):hover{background:#466c58}
.fil-tile.reachable{cursor:pointer}
.fil-tile.exit{background:#266051;box-shadow:inset 0 0 0 2px #57d4a5}
.fil-tile.exit.next-vision,.fil-tile.exit.risk-next{box-shadow:inset 0 0 0 3px #f3b36f}
.fil-tile.exit.safe-next{box-shadow:inset 0 0 0 3px #73d4e2}
.fil-tile.exit::before{content:'';position:absolute;inset:7%;border:1px dashed #b5f2d4;border-radius:3px}
.fil-exit-icon{position:absolute;inset:0;display:grid;place-items:center;color:#e5fff0;font-size:.7rem;font-weight:1000;line-height:1;z-index:1;text-align:center}
.fil-exit-icon svg{width:23px;height:23px;margin:auto auto 1px;stroke:currentColor;stroke-width:2;fill:none}
.fil-layer{position:absolute;inset:0;pointer-events:none}
.fil-pawn,.fil-file{position:absolute;left:0;top:0;transform:translate(-50%,-50%);transition:left .24s cubic-bezier(.2,.8,.2,1),top .24s cubic-bezier(.2,.8,.2,1),opacity .2s ease;z-index:3}
.fil-pawn{width:calc(100% / 7 - 13px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#22372e;box-shadow:0 3px 9px #09130cbb}
.fil-pawn img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.fil-pawn.player{border:3px solid #73d4e2}
.fil-pawn.guard{border:3px solid #f2aa76}
.fil-file{width:calc(100% / 7 - 15px);aspect-ratio:1;display:grid;place-items:center;border:2px solid #ffedb4;border-radius:7px;background:#bc9250;box-shadow:0 3px 10px #0a140e99}
.fil-file svg{width:65%;height:65%;stroke:#24382d;stroke-width:2.2;fill:#ffe7aa}
.fil-file.collected{opacity:0}
.fil-legend{display:flex;justify-content:space-between;gap:8px;max-width:530px;margin:10px auto 0;color:#e5ecdf;font-size:.78rem;font-weight:900}
.fil-legend span{display:flex;align-items:center;gap:6px}
.fil-dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.fil-dot.you{background:#73d4e2}.fil-dot.guard{background:#f2aa76}.fil-dot.evidence{background:#f2cf85}.fil-dot.exit{background:#57d4a5}
.fil-tip{max-width:530px;margin:12px auto;color:#d5e1d4;text-align:center;font-size:.86rem}
.fil-tip strong{color:#9de3e8}
.fil-controls{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;max-width:530px;margin:auto}
.fil-controls .button{flex:1;min-width:135px}
.fil-controls .button[aria-pressed="true"]{background:#a88750;color:#19291f;border-color:#e7c987}
.fil-message{min-height:1.4em;margin:15px 0 0;color:#ead4a3;text-align:center}
.fil-rules{max-width:80ch;margin:19px auto 0;color:#c9d6c8;font-size:.91rem;line-height:1.55}
.fil-rules em{font-style:normal;font-weight:900;color:#edd1a0}
.fil-result,.fil-confirm{width:min(92vw,620px);max-height:calc(100dvh - 24px);overflow:auto;padding:24px;border:0;border-radius:14px;background:#27382d;color:#f4f0e7;box-shadow:0 22px 48px #040905b5}
.fil-result::backdrop,.fil-confirm::backdrop{background:#070d09dd}
.fil-result[open]{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:22px}
.fil-result>img{width:120px;max-width:100%;height:auto;object-fit:contain}
.fil-result h2,.fil-confirm h2{margin:0 0 7px;font-size:clamp(1.6rem,4vw,2.5rem)}
.fil-result strong{color:#f4d18c;font-size:2rem}
.fil-result p,.fil-confirm p{color:#d9e3d5;line-height:1.5}
.fil-result-actions,.fil-confirm>div{margin-top:17px}
@media(max-width:620px){.fil-shell{width:calc(100% - 24px)}.fil-heading img{width:82px;height:82px}.fil-empty{grid-template-columns:1fr;gap:4px;padding:18px 0}.fil-empty>img{width:84px;height:84px}.fil-hud>div,.fil-meta>div{padding:8px}.fil-hud strong,.fil-meta strong{font-size:.95rem}.fil-controls .button{min-width:100px}.fil-result[open]{grid-template-columns:1fr;text-align:center}.fil-result>img{width:90px;margin:auto}.fil-result-actions{justify-content:center}}
@media(max-width:620px){.fil-page .nav-links{display:none}.fil-page.in-mission .fil-heading,.fil-page.in-mission .fil-meta,.fil-page.in-mission .fil-gate{display:none}.fil-page.in-mission .fil-back{margin-bottom:9px}.fil-page.in-mission .fil-shell{padding-top:12px}.fil-page.in-mission .fil-desk-head{padding-bottom:9px}.fil-page.in-mission .fil-hud{margin-top:10px}.fil-page.in-mission .fil-desk{padding:10px}}
@media(max-width:370px){.fil-heading h1{font-size:2.8rem}.fil-desk{padding:11px}.fil-meta span,.fil-hud span{font-size:.7rem}.fil-meta strong,.fil-hud strong{font-size:.82rem}.fil-board-head{font-size:.7rem}.fil-controls .button{min-width:calc(50% - 5px);font-size:.75rem;padding-inline:6px}.fil-legend{font-size:.7rem}.fil-exit-icon svg{width:17px;height:17px}}
@media(prefers-reduced-motion:reduce){.fil-tile,.fil-pawn,.fil-file{transition:none}}