:root{--ink: #222;--muted: #666;--line: #333;--paper: #f6f6f4;--accent: #2b7de9;--good: #2e8b57;--bad: #c0392b;--street-height: 60vh}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{font-family:Grenze,Georgia,Times New Roman,serif;color:var(--ink);background:var(--paper);line-height:1.4}.app{position:relative;flex:1000 1 auto;min-width:0;max-width:calc(var(--street-height) * 3584 / 1184);height:100vh}.top{position:absolute;top:0;left:0;right:0;z-index:3;padding:1.25rem 1rem 0;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;pointer-events:none}.top>*{pointer-events:auto}.top h1{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.7)}h1{font-weight:600;margin:0}.headline-date{opacity:.5}.difficulty-note{color:#fff;opacity:.6;font-size:.8rem;text-shadow:0 1px 3px rgba(0,0,0,.9);margin-top:.15rem}h2{font-size:1.1rem;margin:1.5rem 0 .5rem}h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 .4rem}.actions{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.levels{display:inline-flex;border:1px solid #999;border-radius:6px;overflow:hidden}.levels button{border:0;border-radius:0;border-right:1px solid #ccc;padding:.4rem .6rem}.levels button:last-child{border-right:0}.levels button.active{background:var(--ink);color:#fff}.levels button.active:hover{background:var(--ink)}.timer-wrap{display:inline-flex;align-items:center}.timer-icon{color:#fff;width:1.3em;height:1.3em;margin-right:-10px;position:relative;left:-13px;z-index:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}.timer{display:inline-flex;align-items:center;padding:.4rem .6rem .4rem 1rem;border:1px solid #999;border-radius:6px;font-variant-numeric:tabular-nums;font-size:.85rem;background:#fff;color:#000}.placed-piece.solved .tcg-card{animation:placed-piece-wobble .6s ease-in-out infinite}.placed-piece.solved:nth-child(3n+2) .tcg-card{animation-delay:.15s}.placed-piece.solved:nth-child(3n+3) .tcg-card{animation-delay:.3s}@keyframes placed-piece-wobble{0%,to{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}.leaderboard-overlay{position:fixed;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;background:#0009;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.leaderboard-modal{position:relative;width:360px;max-width:calc(100vw - 2rem);max-height:calc(100vh - 4rem);overflow-y:auto;background:var(--paper);border:1px solid #999;border-radius:10px;padding:1.5rem;text-align:center;box-shadow:0 8px 30px #0006}.leaderboard-modal h2{margin:0 0 .3rem}.leaderboard-subtitle{color:var(--muted);margin:0 0 1rem;font-size:.9rem}.leaderboard-empty{color:var(--muted)}.leaderboard-close{position:absolute;top:.5rem;right:.5rem;width:1.8rem;height:1.8rem;line-height:1;padding:0;border-radius:50%;font-size:1.2rem}.leaderboard-list{list-style:none;margin:0;padding:0;text-align:left;max-height:50vh;overflow-y:auto}.leaderboard-list li{display:flex;align-items:center;gap:.6rem;padding:.3rem .4rem;border-radius:6px}.leaderboard-list li.active{background:#2b7de926;font-weight:600}.leaderboard-rank{flex:0 0 1.8rem;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}.leaderboard-list li.active .leaderboard-rank{color:var(--accent)}.leaderboard-name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard-time{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--muted)}.leaderboard-list li.active .leaderboard-time{color:var(--ink)}.lang-toggle{display:inline-flex;border:1px solid #999;border-radius:6px;overflow:hidden}.lang-toggle button{border:0;border-radius:0;border-right:1px solid #ccc;padding:.4rem .6rem;line-height:1;font-size:.8rem;font-weight:600}.lang-toggle button:last-child{border-right:0}.lang-toggle button.active{background:var(--ink);color:#fff}.lang-toggle button.active:hover{background:var(--ink)}button{font:inherit;padding:.4rem .6rem;border:1px solid #999;border-radius:4px;background:#fff;cursor:pointer;line-height:0}button:hover:not(:disabled){background:#eee}button:disabled{opacity:.5;cursor:default}button.ghost{border-color:transparent;color:var(--muted)}button.active{background:var(--ink);color:#fff;border-color:var(--ink)}button.active:hover:not(:disabled){background:var(--ink)}.sound-toggle{position:relative}.sound-panel{position:absolute;top:calc(100% + .4rem);right:0;z-index:5;background:#fff;border:1px solid #999;border-radius:6px;padding:.6rem .75rem;box-shadow:0 4px 12px #00000040;display:flex;flex-direction:column;gap:.5rem;width:220px}.sound-row{display:flex;align-items:center;gap:.5rem}.sound-label{flex:0 0 4rem;font-size:.85rem;color:var(--ink)}.sound-volume{flex:1 1 auto}.sound-row button{padding:.3rem .45rem;flex:0 0 auto}.sound-row .icon{width:1rem;height:1rem}.player-toggle{position:relative}.player-panel{position:absolute;top:calc(100% + .4rem);right:0;z-index:5;background:#fff;border:1px solid #999;border-radius:6px;padding:.75rem;box-shadow:0 4px 12px #00000040;display:flex;flex-direction:column;gap:.6rem;width:260px;font-size:.85rem;color:var(--ink);text-align:left}.player-name{margin:0}.player-tabs{display:inline-flex;border:1px solid #999;border-radius:6px;overflow:hidden;align-self:flex-start}.player-tabs button{border:0;border-radius:0;border-right:1px solid #ccc;padding:.35rem .6rem;line-height:1;font-size:.8rem}.player-tabs button:last-child{border-right:0}.player-tabs button.active{background:var(--ink);color:#fff}.player-form{display:flex;flex-direction:column;gap:.4rem}.player-form input{font:inherit;font-size:.85rem;padding:.4rem .5rem;border:1px solid #999;border-radius:4px}.player-form button,.player-panel>button{font:inherit;font-size:.85rem;line-height:1.2;padding:.4rem .6rem}.player-error{color:var(--bad);margin:0;font-size:.8rem}.player-history h3{margin:0 0 .3rem}.player-history-empty{color:var(--muted);margin:0}.player-history ul{list-style:none;margin:0;padding:0;max-height:160px;overflow-y:auto}.player-history li{padding:.25rem 0;border-top:1px solid #eee}.player-history li:first-child{border-top:0}.player-history-date{color:var(--muted);float:right}.icon{width:1.2em;height:1.2em;fill:currentColor;display:block}.notice{color:var(--muted);margin:5rem 1rem 0}.loading-screen{position:fixed;inset:0;z-index:11;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.loading-text{color:var(--ink);font-size:1.1rem;margin:0}.loading-progress{width:min(280px,60vw);height:10px;background:#0000001a;border-radius:999px;overflow:hidden}.loading-progress-bar{height:100%;background:var(--ink);transition:width .2s ease}.loading-fade-leave-active{transition:opacity .4s ease}.loading-fade-leave-to{opacity:0}.welcome-overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#0009;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.welcome-modal{position:relative;width:800px;max-width:calc(100vw - 2rem);aspect-ratio:2143 / 1754;background-size:100% 100%;background-repeat:no-repeat;text-align:center}.welcome-text{position:absolute;inset:14% 26.5% 17.5% 27.5%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 .5rem}.welcome-text h2{margin:0 0 .75rem}.welcome-text p{margin:.4rem 0;color:var(--ink)}.welcome-credit{color:var(--muted);font-size:.9rem}.welcome-close{position:absolute;left:14.2%;top:78.8%;width:16%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:none;border:none;padding:0;cursor:pointer}button.welcome-close:hover{background:none}.street{position:absolute;top:0;left:0;right:0;height:calc(var(--street-height) - 150px);z-index:1;overflow-x:auto;overflow-y:hidden}.street-image{display:block;height:var(--street-height);width:auto;max-width:none;margin-top:-50px;-webkit-user-select:none;user-select:none}.street-strips{position:absolute;top:calc(var(--street-height) - 150px);left:0;right:0;height:100px;z-index:2;clip-path:inset(-2000px 0 0 0);pointer-events:none}.stage{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;pointer-events:none}.card-fan{flex:1 1 auto;min-height:0;display:flex;justify-content:center;align-items:flex-end;flex-wrap:nowrap;overflow:hidden}.card-fan-slot{flex:0 0 auto;cursor:grab;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;transform:rotate(var(--angle, 0deg)) translateY(var(--drop, 0px)) scale(var(--scale, 1));transition:transform .35s cubic-bezier(.22,1,.36,1);transform-origin:bottom center}.card-fan-slot.dragging{cursor:grabbing}.card-grid{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;overflow-y:auto;overflow-x:hidden}.card-grid-row{display:flex;justify-content:center;gap:6px}.card-grid-cell{flex:0 0 auto;cursor:grab;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;transition:transform .2s ease}.card-grid-cell.dragging{cursor:grabbing;transform:scale(1.08);z-index:500;box-shadow:0 8px 20px #0006}.placed-piece{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;transition:left .25s ease,top .25s ease,width .25s ease}.placed-piece.dragging{cursor:grabbing;transition:none}.card-strip{background:#0000001f;border-top:1px solid rgba(255,255,255,.25);border-bottom:1px solid rgba(255,255,255,.25)}.strip-clone{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.strip-clone.dragging{cursor:grabbing}.house-arrow{width:32px;height:32px;color:#fff;filter:drop-shadow(0 2px 3px rgba(0,0,0,.8));pointer-events:none}.house-arrow .icon{width:100%;height:100%}.tcg-card{position:relative;width:var(--card-width, 130px);aspect-ratio:1568 / 2680;background-size:100% 100%;background-repeat:no-repeat;cursor:pointer}.tcg-card-art{position:absolute;top:4%;left:9%;right:9%;height:40%;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.tcg-card-art img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}.tcg-card.highlighted:not(.placed){filter:drop-shadow(1px 0 0 rgba(var(--marker-rgb),var(--marker-opacity))) drop-shadow(.87px .5px 0 rgba(var(--marker-rgb),var(--marker-opacity))) drop-shadow(.5px .87px 0 rgba(var(--marker-rgb),var(--marker-opacity))) drop-shadow(0 1px 0 rgba(var(--marker-rgb),var(--marker-opacity))) drop-shadow(-.5px .87px 0 rgba(var(--marker-rgb),var(--marker-opacity))) drop-shadow(-.87px .5px 0 rgba(var(--marker-rgb),var(--marker-opacity))) drop-shadow(-1px 0 0 rgba(var(--marker-rgb),var(--marker-opacity))) drop-shadow(-.87px -.5px 0 rgba(var(--marker-rgb),var(--marker-opacity))) drop-shadow(-.5px -.87px 0 rgba(var(--marker-rgb),var(--marker-opacity))) drop-shadow(0 -1px 0 rgba(var(--marker-rgb),var(--marker-opacity))) drop-shadow(.5px -.87px 0 rgba(var(--marker-rgb),var(--marker-opacity))) drop-shadow(.87px -.5px 0 rgba(var(--marker-rgb),var(--marker-opacity)))}.tcg-card.placed{background:none;display:inline-flex;align-items:flex-end;justify-content:center;width:auto;height:var(--placed-height, 70px);aspect-ratio:auto}.tcg-card.placed .tcg-card-art{position:static;width:auto;height:100%;overflow:visible}.tcg-card.placed .tcg-card-art img{max-width:none;width:auto;height:100%;filter:drop-shadow(1px 0 0 #fff) drop-shadow(.87px .5px 0 #fff) drop-shadow(.5px .87px 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-.5px .87px 0 #fff) drop-shadow(-.87px .5px 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(-.87px -.5px 0 #fff) drop-shadow(-.5px -.87px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(.5px -.87px 0 #fff) drop-shadow(.87px -.5px 0 #fff)}.tcg-card.placed.highlighted:after{content:"";position:absolute;left:50%;top:-30px;width:15px;height:15px;transform:translate(-50%,-50%);border-radius:50%;background:rgb(var(--marker-rgb));border:2px solid #fff;box-shadow:0 1px 3px #0009;pointer-events:none}.tcg-card-name,.tcg-card-type{position:absolute;left:16%;right:16%;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:clamp(.55rem,1.6vw,.8rem);text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tcg-card-name{top:45.5%;height:6.5%;left:11%;right:11%;color:#fff6e6;text-shadow:0 1px 2px rgba(0,0,0,.6)}.tcg-card-type{top:55%;height:6%;color:#2a2118}.tcg-card-flavor{position:absolute;inset:68% 11% 6%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-pack:center;-webkit-line-clamp:4;overflow:hidden;text-align:center;font-style:italic;font-size:clamp(.42rem,1.15vw,.62rem);line-height:1.35;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.85)}.tcg-card-flavor-type{font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.layout{display:flex;height:100vh}.clue-sidebar{flex:1 1 200px;min-width:200px;height:100vh;overflow-y:auto;padding:1rem;border-right:1px solid #ddd}.calendar-sidebar{flex:0 1 280px;min-width:220px;height:100vh;overflow-y:auto;padding:1rem;border-left:1px solid #ddd}.calendar-panel h3{margin:0 0 .6rem}.calendar-empty{color:var(--muted)}.calendar-days{list-style:none;margin:0;padding:0}.calendar-day{margin:0 0 1rem;padding-bottom:.75rem;border-bottom:1px solid #eee}.calendar-day:last-child{border-bottom:0}.calendar-day-heading{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-weight:600;margin-bottom:.3rem}.calendar-day-date{font-size:.75rem;color:var(--muted);font-weight:400}.calendar-levels{list-style:none;margin:0;padding:0}.calendar-levels li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.2rem 0}.calendar-level-link{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-size:.85rem;cursor:pointer;text-decoration:underline}.calendar-level-link:hover{color:var(--ink)}.calendar-result{font-size:.75rem;color:var(--muted);white-space:nowrap}.calendar-result.finished{color:var(--good)}.calendar-result.in_progress{color:var(--accent)}.houses{display:flex;justify-content:center;overflow-x:auto;margin:0 0 1rem}.houses.overflowing{justify-content:flex-start}.house-cell{display:flex;flex-direction:column;align-items:center;gap:.2rem;flex:0 0 auto}.pos{font-size:.75rem;color:#888}.caption{font-size:.7rem;color:#555}.house{position:relative;height:375px;width:auto;flex:0 0 auto}.house-photo{display:block;width:375px;height:100%;object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none}.house.target{cursor:copy}.street-wrap{display:flex;flex-direction:column}.street-mini{display:flex;justify-content:center;width:100%;margin:0 0 .4rem;padding:6px 0}.street-mini-track{position:relative;display:flex;pointer-events:none}.mini-house-cell{display:flex;align-items:flex-end;flex:0 0 auto;height:32px}.mini-house{display:block;height:32px;width:auto}.viewport-box{position:absolute;top:-4px;bottom:-4px;border:2px solid rgba(0,0,0,.1);background:#0000001a;cursor:grab;touch-action:none;pointer-events:auto}.viewport-box:active{cursor:grabbing}.slots{position:absolute;left:4%;right:4%;bottom:5%;height:44%;display:flex;justify-content:flex-start;gap:4%;z-index:1;transform:translateY(33px)}.slot{flex:1 1 0;min-width:0;display:flex;align-items:flex-end}.slot.box{flex:0 1 38%;max-width:38%;z-index:1}.slot.circle{flex:0 1 26%;max-width:26%;transform:translate(-23px);z-index:2}.slot.diamond{flex:0 1 26%;max-width:26%;z-index:1}.slot.box .piece,.slot.circle .piece,.slot.diamond .piece{align-items:flex-start}.slot .cell,.slot .empty{width:100%}.slot .shape{font-size:clamp(.35rem,.62vw,.65rem);padding:.05rem;letter-spacing:-.02em;box-shadow:0 1px 3px #00000059}.slot .shape span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.slot .habitant-photo,.slot .animal-photo,.slot .vehicle-photo{filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(1.4px 1.4px 0 #fff) drop-shadow(-1.4px 1.4px 0 #fff) drop-shadow(1.4px -1.4px 0 #fff) drop-shadow(-1.4px -1.4px 0 #fff)}.slot .habitant-photo{height:195px;width:auto;max-width:100%}.slot .vehicle-photo.car-photo{height:195px}.slot .vehicle-photo.bike-photo{height:146px}.empty{aspect-ratio:1;cursor:pointer}.cell{min-width:0;border-radius:6px;outline:none}.cell.movable{cursor:grab}.cell.movable:active{cursor:grabbing}.cell.drag-source{opacity:0}.cell.movable:focus-visible .shape,.cell.movable:focus-visible .habitant-photo,.cell.movable:focus-visible .animal-photo,.cell.movable:focus-visible .vehicle-photo{filter:drop-shadow(0 0 4px var(--glow, var(--accent))) drop-shadow(0 0 4px var(--glow, var(--accent)))}.cell.selected .shape,.cell.selected .habitant-photo,.cell.selected .animal-photo,.cell.selected .vehicle-photo{filter:drop-shadow(0 0 6px var(--glow, var(--accent))) drop-shadow(0 0 6px var(--glow, var(--accent)))}.piece{display:flex;flex-direction:column;align-items:center;gap:.25rem}.piece-photo{display:flex;flex-direction:column;align-items:center;gap:.25rem;width:fit-content}.color-tag{z-index:0;margin-top:-6px;padding:5px;background:#fff;color:#000;font-size:.7rem;line-height:1;text-transform:capitalize;border-radius:4px;white-space:nowrap}.habitant-photo,.animal-photo,.vehicle-photo{position:relative;z-index:1}.habitant-photo,.animal-photo,.vehicle-photo,.cell:has(.habitant-photo),.cell:has(.animal-photo),.cell:has(.vehicle-photo),.piece:has(.habitant-photo),.piece:has(.animal-photo),.piece:has(.vehicle-photo){background:transparent!important;border:none!important;outline:none!important}.habitant-photo{display:block;height:225px;width:auto;max-width:100%;pointer-events:none;-webkit-user-select:none;user-select:none}.animal-photo{display:block;height:120px;width:auto;max-width:100%;pointer-events:none;-webkit-user-select:none;user-select:none}.vehicle-photo{display:block;width:auto;max-width:100%;pointer-events:none;-webkit-user-select:none;user-select:none}.vehicle-photo.car-photo{height:225px}.vehicle-photo.bike-photo{height:169px}.shape{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.62rem;padding:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#fff;border:2px solid var(--line);-webkit-user-select:none;user-select:none}.shape.square{border-radius:3px}.shape.box{border-radius:3px;font-weight:600}.shape.circle{border-radius:50%}.shape.diamond{border-radius:3px;transform:rotate(45deg) scale(.74)}.shape.diamond span{display:block;transform:rotate(-45deg);white-space:nowrap;font-size:.8em}.habitants{border:2px dashed #c9c9c9;border-radius:8px;padding:.6rem .8rem .8rem;margin:0 0 1rem;background:#fbfbfa}.habitants.over{border-color:var(--accent);background:#eef4fd}.habitants h3{margin-bottom:.5rem}.habitants .items{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.45rem;min-height:3.2rem}.habitants .items .cell{width:3.2rem}.habitants .items .cell:has(.habitant-photo),.habitants .items .cell:has(.animal-photo),.habitants .items .cell:has(.vehicle-photo){width:auto}.hint{font-size:.75rem;color:#999;margin:.2rem 0}.toolbar{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin:0 0 1rem;font-size:.9rem;color:var(--muted)}.toolbar span{flex:1 1 20rem}.clue-grid{list-style:none;margin:0;padding:0;column-width:200px;column-gap:8px}.clue-grid li{margin:0 0 8px;padding:8px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:.85rem;break-inside:avoid}.clue-grid li.ok{border-color:var(--good);background:#eaf6ee;color:#1f5f3b}.clue-grid li.violated{border-color:var(--bad);background:#fbe9e7;color:var(--bad)}.clue-grid li.open{color:#555}.clue-speak{float:right;margin:-2px -2px 4px 8px;padding:3px;border-color:transparent;background:none;color:var(--muted)}.clue-speak:hover:not(:disabled){background:#00000014}.clue-speak .icon{width:.9rem;height:.9rem;display:block}.clue-speak.speaking{color:var(--accent)}.mention{cursor:pointer;border-radius:3px;padding:0 .15em;margin:0 -.15em}.mention:hover{background:rgba(var(--mention-rgb, 43, 125, 233),.12)}.mention.active{background:rgba(var(--mention-rgb, 43, 125, 233),.3);font-weight:600}.mention.active:hover{background:rgba(var(--mention-rgb, 43, 125, 233),.4)}.mention:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.premises{font-size:.85rem;color:#666;margin-top:1.5rem}.premises p{margin:.15rem 0}.credit{position:absolute;z-index:4;left:0;right:0;bottom:2px;font-size:.7rem;color:#999;text-align:center;pointer-events:none}.credit a{color:inherit;pointer-events:auto}@media(max-width:760px){.caption{display:none}}