/* Initial echoes: art and real game text share a slender illuminated frame. */
.echo-scene.flow-choice{background-image:linear-gradient(180deg,#100d17b8,#100d1799 50%,#100d17ed),var(--flow-art);padding-bottom:32px}
.echo-scene.flow-choice>.flow-title{padding:30px 0 22px}
.echo-scene .flow-title h1{font-size:clamp(24px,2.5vw,36px);margin:8px 0 8px}
.echo-scene .echo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);max-width:1020px;margin:12px auto 0}
.echo-card{appearance:none;position:relative;isolation:isolate;display:flex;align-items:flex-end;width:100%;min-width:0;height:clamp(470px,63vh,630px);padding:0;border:1px solid #b9a4b8a3;border-radius:2px;background:#100e17;color:#e8dfed;font:inherit;text-align:center;cursor:pointer;box-shadow:0 16px 40px #07050a70;transition:transform .2s,border-color .2s,box-shadow .2s;overflow:visible}
.echo-card:before{content:'';position:absolute;inset:5px;border:1px solid #d5bdd64a;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);pointer-events:none;z-index:3}
.echo-card:after{content:'';position:absolute;inset:10px;background:linear-gradient(#d1b9cf,#d1b9cf) left top/22px 1px,linear-gradient(#d1b9cf,#d1b9cf) left top/1px 22px,linear-gradient(#d1b9cf,#d1b9cf) right top/22px 1px,linear-gradient(#d1b9cf,#d1b9cf) right top/1px 22px,linear-gradient(#d1b9cf,#d1b9cf) left bottom/22px 1px,linear-gradient(#d1b9cf,#d1b9cf) left bottom/1px 22px,linear-gradient(#d1b9cf,#d1b9cf) right bottom/22px 1px,linear-gradient(#d1b9cf,#d1b9cf) right bottom/1px 22px;background-repeat:no-repeat;opacity:.7;pointer-events:none;z-index:3}
.echo-art{position:absolute;inset:0;width:100%;height:76%;object-fit:cover;object-position:center top;border-radius:1px;z-index:-1;mask-image:linear-gradient(#000 72%,transparent);-webkit-mask-image:linear-gradient(#000 72%,transparent)}
.echo-index{position:absolute;top:16px;left:16px;right:16px;text-align:left;font:10px Georgia,'Microsoft YaHei',serif;letter-spacing:2px;color:#e1d2e5;text-shadow:0 2px 7px #000;padding:7px 9px;background:linear-gradient(90deg,#110d19b0,transparent)}
.echo-copy{width:100%;display:flex;flex-direction:column;align-items:center;position:relative;padding:38px 22px 20px;background:linear-gradient(transparent,#110e18ec 22%,#100d16 70%);text-shadow:0 2px 6px #000}
.echo-sigil{font-size:36px;color:#dab5f4;line-height:1;filter:drop-shadow(0 0 8px #aa76d8);margin-bottom:10px}
.echo-name{font-weight:400;font-size:clamp(18px,1.6vw,23px);letter-spacing:2px;line-height:1.5}
.echo-effect{font-size:14px;line-height:1.9;color:#d9cde2;min-height:80px;padding-top:13px}
.echo-lore{font-size:11px;letter-spacing:1px;color:#ad96bc;line-height:1.8;margin:12px 0 18px}
.echo-choose{font-size:12px;letter-spacing:2px;line-height:1.8;padding-top:12px;border-top:1px solid #bda3c542;width:100%;color:#d5bddf}
.echo-choose i{font-size:10px;margin-left:8px;font-style:normal;color:#d0abea}
.echo-corner{position:absolute;left:50%;transform:translateX(-50%);color:#d7bdcf;font-size:20px;line-height:20px;z-index:4;text-shadow:0 0 6px #100c19}.echo-corner.top{top:-10px}.echo-corner.bottom{bottom:-10px}
.echo-card:hover,.echo-card:focus-visible{transform:translateY(-5px);border-color:#e1b7fb;box-shadow:0 0 0 1px #c99fe048,0 0 24px #ab67de38,0 20px 38px #07050a80}
.echo-card:hover .echo-choose,.echo-card:focus-visible .echo-choose{color:#f5e2ff}.echo-scene>.flow-caption{max-width:1020px;margin:28px auto 0}
@media(max-width:800px){.echo-scene .echo-grid{gap:16px}.echo-copy{padding:28px 14px 18px}.echo-name{font-size:17px;letter-spacing:1px}.echo-effect{font-size:13px;min-height:94px}.echo-lore{font-size:10px;min-height:36px}.echo-index{font-size:9px;letter-spacing:1px;left:10px;right:10px}.echo-card{height:490px}}
@media(max-width:600px){.echo-scene.flow-choice{padding-bottom:34px}.echo-scene.flow-choice>.flow-title{padding:25px 8px 20px}.echo-scene .flow-title h1{font-size:23px;letter-spacing:2px}.echo-scene .flow-title p{font-size:12px}.echo-scene .echo-grid{grid-template-columns:1fr;width:min(100% - 22px,360px);gap:28px;margin-top:10px}.echo-card{height:540px}.echo-copy{padding:36px 23px 20px}.echo-name{font-size:22px}.echo-effect{font-size:14px;min-height:68px}.echo-lore{min-height:0;font-size:11px}.echo-index{font-size:10px;left:16px;right:16px}.echo-scene>.flow-caption{padding:0 12px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.echo-card{transition:none}.echo-card:hover,.echo-card:focus-visible{transform:none}}
.echo-object-card{background:radial-gradient(ellipse at 50% 30%,#55416480,transparent 60%),linear-gradient(145deg,#221c2e,#100e17 65%)}
.echo-object-card .echo-art{inset:9% 12% auto;width:76%;height:48%;object-fit:contain;object-position:center;mask-image:none;-webkit-mask-image:none;filter:drop-shadow(0 8px 22px #09070fcc)}