:root{--bg:#172238;--panel:#1f304f;--panel2:#2b446d;--text:#f8fbff;--muted:#afbbce;--gold:#ffd166;--pink:#7fd5ff;--mint:#89f0b7;--line:rgba(255,255,255,.12)}
.app{width:min(100%,1280px);padding:0 32px}
main{align-items:flex-start}
.game{padding-top:8px}
.game-head{font-size:22px}
.progress{height:10px;margin:16px 0 22px}
.hero-icons span{font-size:38px}
.status-row{margin:0 0 16px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:24px;font-weight:800}
.status-row strong{color:var(--gold)}
.hint-button{min-height:42px;padding:0 16px;border:1px solid rgba(255,209,102,.34);border-radius:999px;color:#172238;background:var(--gold);cursor:pointer;font-size:16px;font-weight:800;box-shadow:0 10px 28px rgba(255,209,102,.14)}
.hint-button span{margin-left:6px;color:rgba(23,34,56,.72);font-size:13px}
.hint-button:disabled{cursor:default;opacity:.52;box-shadow:none}
.scene-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.scene-card{padding:18px;border:1px solid var(--line);border-radius:28px;background:rgba(31,48,79,.86);box-shadow:0 18px 50px rgba(0,0,0,.16)}
.scene-card>span{display:block;margin:0 0 14px;color:var(--muted);font-size:24px;font-weight:800;text-align:center}
.scene-wrap{position:relative;overflow:hidden;border-radius:22px;background:#101828;aspect-ratio:4/3;cursor:default}
.loading-scene{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));font-size:20px;font-weight:800}
.photo-scene{position:absolute;inset:0;background-position:center;background-size:cover;filter:saturate(1.04) contrast(1.03)}
.photo-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.08));pointer-events:none}
.photo-detail{position:absolute;z-index:2;display:block;border-radius:5px;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.22);opacity:.88}
.photo-detail.paper{background:#f6efe1}
.photo-detail.cream{background:#e9d7b0}
.photo-detail.sage{background:#8fbf9b}
.photo-detail.ink{background:#253042}
.photo-detail.wood-light{background:#a9774d}
.photo-detail.wood-dark{background:#5d3d2d}
.photo-detail.warm-line{background:#d99a4b}
.photo-detail.soft-shadow{background:rgba(25,22,20,.36);box-shadow:none;filter:blur(.2px)}
.photo-detail.dark-dot,.photo-detail.warm-dot,.photo-detail.cool-dot,.photo-detail.leaf-dot{border-radius:50%}
.photo-detail.dark-dot{background:#24272d}
.photo-detail.warm-dot{background:#c88444}
.photo-detail.cool-dot{background:#8297aa}
.photo-detail.leaf-dot{background:#496d42}
.photo-detail.clone-stamp{background-image:var(--photo);background-size:720% 720%;box-shadow:0 1px 5px rgba(0,0,0,.14);opacity:.96;filter:saturate(.98) contrast(.98) blur(.15px)}
.photo-detail.clone-stamp.soft{box-shadow:0 1px 8px rgba(0,0,0,.12)}
.photo-detail.clone-stamp.wall,.photo-detail.clone-stamp.sky{filter:saturate(.9) contrast(.94) blur(.2px)}
.photo-detail.clone-stamp.wood,.photo-detail.clone-stamp.floor,.photo-detail.clone-stamp.fabric{filter:saturate(.96) contrast(1.02) blur(.15px)}
.photo-detail.clone-stamp.produce,.photo-detail.clone-stamp.plant{filter:saturate(1.04) contrast(.98) blur(.12px)}
.real-note,.real-tab,.real-label{background:rgba(246,239,225,.72);border:1px solid rgba(255,255,255,.22)}
.real-label.dim{background:rgba(230,224,210,.5)}
.paper-edge,.real-paper-corner{background:rgba(238,219,178,.68)}
.real-edge,.real-basket-line,.real-frame-edge,.real-cushion-seam,.real-chair-foot,.real-platform-chip{background:rgba(120,92,67,.58);box-shadow:0 1px 5px rgba(0,0,0,.16)}
.real-shadow-line,.real-dark-strip,.real-rail-line{background:rgba(24,26,30,.42);box-shadow:none}
.real-door-line{background:rgba(214,157,89,.55);box-shadow:0 1px 5px rgba(0,0,0,.14)}
.real-screw,.real-light-dot,.real-small-fruit{border-radius:50%;background:rgba(240,226,194,.68);box-shadow:0 1px 5px rgba(0,0,0,.18)}
.real-light-dot{background:rgba(255,235,178,.48)}
.real-small-fruit{background:rgba(142,76,42,.48)}
.real-leaf{border-radius:50% 55% 48% 58%;background:rgba(70,100,58,.62);box-shadow:0 1px 5px rgba(0,0,0,.14)}
.real-leaf.long{border-radius:70% 30% 65% 35%}
.mark{position:absolute;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#172238;background:var(--mint);font-size:20px;font-weight:800;transform:translate(-50%,-50%);pointer-events:none}
.hint-mark{position:absolute;z-index:5;width:74px;height:74px;border:3px dashed var(--gold);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 7px rgba(255,209,102,.12);pointer-events:none;animation:hintPulse 1.15s ease-in-out infinite}
.target-scene.miss{animation:shake .28s ease}
@keyframes shake{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
@keyframes hintPulse{50%{transform:translate(-50%,-50%) scale(1.08);opacity:.72}}
@media(max-width:900px){.app{padding:0 16px}.game-head{font-size:16px}.status-row{font-size:16px;gap:8px;flex-wrap:wrap}.hint-button{order:3;width:100%;font-size:14px}.scene-pair{grid-template-columns:1fr;gap:14px}.scene-card{padding:10px;border-radius:20px}.scene-card>span{margin-bottom:8px;font-size:15px}.scene-wrap{border-radius:15px}.mark{width:28px;height:28px;font-size:16px}.hint-mark{width:56px;height:56px}}