/* Echoes of Time — layout per docs/references/2026-09-29-e/03 and 2026-09-29-f/01-07. */
.echoes-view{container-type:inline-size;max-width:720px;margin:0 auto;--u:calc(100cqw / 720)}
.ec-stage{position:relative;min-height:calc(1280 * var(--u));background:#3a2350;color:#4a3860;font-family:inherit;overflow:hidden}
.ec-top{position:absolute;inset:calc(12 * var(--u)) calc(12 * var(--u)) auto;display:flex;justify-content:space-between;z-index:6;pointer-events:none}
.ec-top>*{pointer-events:auto}
.ec-back{border:0;background:none;padding:0;width:calc(96 * var(--u));cursor:pointer}.ec-back img{width:100%}
.ec-round{width:calc(56 * var(--u));height:calc(56 * var(--u));border-radius:50%;border:2px solid #fff;background:#8fb6e8;color:#fff;font-weight:800;font-size:calc(28 * var(--u));cursor:pointer}
.ec-note{text-align:center;margin:calc(10 * var(--u)) auto;font-size:calc(22 * var(--u));color:#6b557e}
.ec-box{background:#fff8ef;border-radius:12px;padding:calc(24 * var(--u));margin:calc(160 * var(--u)) calc(40 * var(--u)) 0}
.ec-err{position:absolute;left:5%;right:5%;bottom:calc(20 * var(--u));background:#fff1f0;color:#b3261e;border-radius:10px;padding:8px;z-index:30}
.ec-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(40,25,60,.72);color:#fff;border-radius:999px;padding:2px 10px 2px 2px;font-size:calc(20 * var(--u))}
.ec-chip img{width:calc(34 * var(--u));height:calc(34 * var(--u));object-fit:contain}
.ec-go{border:0;border-radius:10px;background:linear-gradient(#5fb8ff,#2f7fdc);color:#fff;font-weight:800;font-size:calc(24 * var(--u));padding:calc(10 * var(--u)) calc(34 * var(--u));box-shadow:0 3px 0 #1f5aa0;cursor:pointer}
.ec-go:disabled{filter:grayscale(1);opacity:.6;cursor:default}
.ec-small{border:0;border-radius:8px;background:#fff;color:#6a4e86;font-weight:700;padding:6px 14px;cursor:pointer;box-shadow:0 2px 0 #b9a6cc}
/* World clock (TimeCloisterMainWindow) */
.ec-main{min-height:calc(1280 * var(--u));background-size:cover;background-position:center top;display:flex;flex-direction:column;align-items:center;padding-top:calc(110 * var(--u))}
.ec-dial{position:relative;width:calc(560 * var(--u));aspect-ratio:1}
.ec-plate{position:absolute;inset:0;width:100%;height:100%}
.ec-seg{position:absolute;left:50%;top:50%;width:calc(120 * var(--u));height:calc(120 * var(--u));margin:calc(-60 * var(--u));border:0;background:none;cursor:pointer;transform:rotate(var(--a)) translateY(calc(-190 * var(--u))) rotate(calc(-1 * var(--a)))}
.ec-seg .ec-num{height:calc(70 * var(--u))}
.ec-seg.on{filter:drop-shadow(0 0 8px #fff)}.ec-seg.on::before{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.75);z-index:-1}
.ec-seg.locked .ec-num{opacity:.4}.ec-lock{position:absolute;right:10%;bottom:10%;width:36%}
.ec-hub{position:absolute;left:50%;top:50%;width:calc(150 * var(--u));transform:translate(-50%,-50%)}
.ec-info{width:calc(600 * var(--u));margin-top:calc(-6 * var(--u));background:rgba(255,250,242,.95);border-radius:0 0 18px 18px;padding:calc(18 * var(--u)) calc(24 * var(--u)) calc(30 * var(--u));box-sizing:border-box;text-align:center}
.ec-info h2{margin:0;color:#8a5bb0;font-size:calc(34 * var(--u))}
.ec-info>p{text-align:left;font-size:calc(21 * var(--u));margin:calc(10 * var(--u)) 0 calc(18 * var(--u))}
.ec-row{display:flex;align-items:flex-end;justify-content:space-between}
.ec-icon{border:0;background:none;display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#8a5bb0;font-size:calc(19 * var(--u))}
.ec-icon img{width:calc(100 * var(--u))}
.ec-mid{display:flex;flex-direction:column;align-items:center;gap:calc(10 * var(--u))}
.ec-prog{color:#8a5bb0;font-weight:700;font-size:calc(22 * var(--u))}
.ec-timer{display:flex;gap:8px;align-items:center}.ec-timer b{color:#2fa24f;font-size:calc(22 * var(--u))}
.ec-x{border:0;background:#e2574c;color:#fff;border-radius:6px;cursor:pointer}
/* Board (TimeCloisterProbeWindow) */
.ec-board{min-height:calc(1280 * var(--u));background-size:cover;background-position:center top;padding:calc(90 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u));box-sizing:border-box;display:flex;flex-direction:column;gap:calc(14 * var(--u))}
.ec-bhead{display:grid;grid-template-columns:calc(110 * var(--u)) 1fr calc(70 * var(--u));align-items:center}
.ec-energy{display:flex;flex-direction:column;align-items:center;color:#fff;font-size:calc(19 * var(--u))}.ec-energy img{width:calc(80 * var(--u))}
.ec-title{display:flex;flex-direction:column;align-items:center}
.ec-name{border:2px solid #b9b0e6;border-radius:999px;background:#fff;color:#6a77c6;font-weight:800;font-size:calc(30 * var(--u));padding:calc(4 * var(--u)) calc(50 * var(--u));cursor:pointer}
.ec-title small{color:#fff;font-weight:700;font-size:calc(21 * var(--u));text-shadow:0 1px 2px #000}
.ec-speed{border:0;background:none;cursor:pointer}.ec-speed img{width:100%}.ec-speed:disabled{filter:grayscale(1)}
.ec-hours{display:flex;background:#5a3a7a;border-radius:999px;padding:3px;gap:2px}
.ec-hours span{flex:1;text-align:center;color:#b9a6cc;font-size:calc(19 * var(--u));padding:2px 0;border-radius:999px}
.ec-hours span.lit{background:#c7a7ea;color:#fff}.ec-hours span.past{background:#8f5fcf}
.ec-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(14 * var(--u));padding:calc(14 * var(--u)) calc(30 * var(--u))}
.ec-slot{position:relative;aspect-ratio:288/398;display:flex;align-items:center;justify-content:center}
.ec-slot .ec-back{width:100%;height:100%}
.ec-slot.walker{flex-direction:column;justify-content:flex-end}.ec-slot.walker small{color:#fff;font-size:calc(16 * var(--u));text-shadow:0 1px 2px #000;white-space:nowrap}
.ec-face{position:relative;width:100%;aspect-ratio:288/398;cursor:pointer}
.ec-fbg{position:absolute;inset:0;width:100%;height:100%}
.ec-fimg{position:absolute;left:8%;right:8%;top:14%;width:84%}
.ec-fname{position:absolute;left:4%;right:4%;bottom:10%;text-align:center;color:#c65758;font-size:calc(16 * var(--u));line-height:1.1}
.ec-decks{display:flex;align-items:flex-end;gap:calc(10 * var(--u));padding:0 calc(10 * var(--u))}
.ec-deck,.ec-record,.ec-tec{position:relative;border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center}
.ec-deck{width:calc(124 * var(--u))}.ec-deck img{width:100%}
.ec-deck b{position:absolute;bottom:18%;left:0;right:0;color:#fff;font-size:calc(17 * var(--u));text-shadow:0 1px 2px #a0503c}
.ec-record{margin-left:auto;width:calc(250 * var(--u))}.ec-record img{width:100%}.ec-record b{position:absolute;bottom:26%;left:36%;color:#6a77c6;font-size:calc(21 * var(--u))}
.ec-foot{display:flex;align-items:center;gap:calc(10 * var(--u))}
.ec-tec{width:calc(160 * var(--u))}.ec-tec img{width:100%}.ec-tec b{color:#fff;font-size:calc(21 * var(--u));text-shadow:0 1px 2px #000}
.ec-team{flex:1;background:rgba(255,255,255,.92);border-radius:10px;padding:calc(8 * var(--u))}
.ec-attrs{display:flex;justify-content:space-around;gap:6px}
.ec-attr{display:flex;align-items:center;gap:4px;font-size:calc(21 * var(--u));color:#4a3860}.ec-attr i{width:calc(20 * var(--u));height:calc(20 * var(--u));border-radius:50%;display:inline-block}
.ec-attr em{color:#2fa24f;font-style:normal;font-weight:700}
.ec-faces{display:flex;gap:4px;justify-content:center;margin-top:4px}.ec-faces>*{width:calc(70 * var(--u))!important;height:calc(70 * var(--u))!important}
.ec-endrow{display:flex;justify-content:center}
/* Windows */
.ec-overlay{position:absolute;inset:0;background:rgba(20,10,35,.6);z-index:20;display:flex;align-items:center;justify-content:center}
.ec-win{position:relative;width:92%;max-height:88%;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;background:#fff8ef;border-radius:16px;padding:calc(20 * var(--u));color:#4a3860}
.ec-win h2{margin:0 0 calc(12 * var(--u));text-align:center;color:#8a5bb0;font-size:calc(30 * var(--u))}
.ec-close{position:absolute;right:10px;top:10px;border:0;border-radius:50%;width:32px;height:32px;background:#e2574c;color:#fff;font-weight:800;cursor:pointer}
.ec-list{display:flex;flex-direction:column;gap:calc(10 * var(--u))}
.ec-crow{display:grid;grid-template-columns:calc(110 * var(--u)) 1fr;gap:calc(14 * var(--u));background:#fff;border-radius:10px;padding:calc(10 * var(--u));font-size:calc(19 * var(--u))}
.ec-crow p{margin:4px 0}.ec-crow.locked{opacity:.6}.ec-lockt{color:#b3261e;display:block}
.ec-srow{display:flex;align-items:center;gap:calc(12 * var(--u));background:#fff;border-radius:10px;padding:calc(12 * var(--u));font-size:calc(20 * var(--u))}
.ec-srow>div{flex:1;display:flex;flex-direction:column;gap:4px}
.ec-srow.locked{opacity:.55}.ec-srow.vortex{background:linear-gradient(90deg,#3b2a78,#7a4fb8);color:#fff}
.ec-aw{display:flex;flex-wrap:wrap;gap:4px}
.ec-chips{display:flex;gap:10px;align-items:center;justify-content:center;margin-bottom:10px}
.ec-hint{text-align:center;font-size:calc(20 * var(--u))}
.ec-tecwin{background-color:#1c1640;background-size:cover;background-position:center;color:#fff}
.ec-tecwin h2{color:#fff}.ec-tecwin .ec-hint{color:#fff}
.ec-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:6px}
.ec-tab{border:1px solid #fff;border-radius:999px;background:rgba(255,255,255,.15);color:#fff;padding:4px 16px;cursor:pointer}.ec-tab.on{background:#fff;color:#6a4e86;font-weight:700}
.ec-tree{position:relative;width:100%;aspect-ratio:1/1.1;margin:0 auto}
.ec-tree svg{position:absolute;inset:0;width:100%;height:100%}
.ec-tree line{stroke:rgba(200,210,255,.6);stroke-width:.5}.ec-tree line.on{stroke:#ffb347;stroke-width:.7}
.ec-node{position:absolute;width:calc(64 * var(--u));height:calc(64 * var(--u));margin:calc(-32 * var(--u));border:0;background:none;padding:0;cursor:pointer}
.ec-node .ec-nbg,.ec-node .ec-nimg{position:absolute;inset:0;width:100%;height:100%}.ec-node .ec-nimg{inset:14%;width:72%;height:72%}
.ec-node small{position:absolute;left:50%;bottom:-40%;transform:translateX(-50%);background:rgba(0,0,0,.6);color:#fff;border-radius:6px;padding:0 5px;font-size:calc(15 * var(--u))}
.ec-node.sel{filter:drop-shadow(0 0 6px #fff)}
.ec-tecd{background:rgba(255,248,239,.96);color:#4a3860;border-radius:10px;padding:calc(12 * var(--u));margin-top:8px;font-size:calc(19 * var(--u))}
.ec-cost{display:flex;gap:10px;align-items:center;justify-content:flex-end}
.ec-pslots{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.ec-pslot{aspect-ratio:1;border:2px dashed #c7b3dc;border-radius:10px;background:#fff;padding:0;cursor:pointer;overflow:hidden}
.ec-pslot>*,.ec-cand>*:first-child{width:100%!important;height:auto!important}
.ec-pool{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:10px 0;max-height:calc(520 * var(--u));overflow-y:auto}
.ec-cand{border:2px solid transparent;border-radius:10px;background:#fff;padding:2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;font-size:calc(16 * var(--u))}.ec-cand.on{border-color:#2f7fdc;background:#dcebff}
.ec-acts{display:flex;gap:10px;justify-content:flex-end;align-items:center}
.ec-skip{font-size:calc(20 * var(--u))}
.ec-num-in{width:80px;margin:10px;font-size:18px}
.ec-textwin .ec-text{white-space:pre-line;font-size:calc(20 * var(--u))}
.ec-main{position:relative}.ec-tec-main{position:absolute;left:calc(20 * var(--u));bottom:calc(60 * var(--u))}
.ec-chibi{width:100%;aspect-ratio:1;display:flex;align-items:flex-end;justify-content:center}.ec-chibi img{width:130%;max-width:none}
.ec-achwin{background:linear-gradient(#2b2560,#473a86 30%,#f1f3f8 30%)}
.ec-achwin h2{background:linear-gradient(#6fb6ff,#3a7ee0);color:#fff;border-radius:999px;padding:4px 0;border:2px solid #d8ecff}
.ec-achhead{display:flex;gap:10px;align-items:flex-start;color:#fff;font-size:calc(19 * var(--u));margin-bottom:10px}.ec-achhead p{flex:1;margin:0;text-shadow:0 1px 2px #000}
.ec-achtotal{display:flex;flex-direction:column;align-items:center;white-space:nowrap}.ec-achtotal b{font-size:calc(24 * var(--u))}.ec-achtotal span{color:#ffb829;font-weight:800;font-size:calc(24 * var(--u))}
.ec-arow{background:#fff;border:2px solid #d9dde6;border-radius:10px;padding:calc(10 * var(--u)) calc(14 * var(--u))}
.ec-atext{display:flex;align-items:flex-start;gap:8px;color:#4c5a78;font-size:calc(20 * var(--u));border-bottom:1px solid #d9dde6;padding-bottom:6px}.ec-atext span{flex:1}
.ec-atext em{font-style:normal;color:#2f9a1a;font-weight:700;margin-right:auto}
.ec-ainfo{flex:none;width:calc(36 * var(--u));height:calc(36 * var(--u));border-radius:50%;border:2px solid #8aa6d6;background:#fff;color:#3a6ad0;font-weight:800;cursor:pointer;padding:0}
.ec-abot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.ec-tiles{display:flex;gap:8px}
.ec-tile{position:relative;width:calc(88 * var(--u));height:calc(88 * var(--u));border:2px solid #9aa9c9;border-radius:8px;background:linear-gradient(#e6ecfb,#c9d4f0);display:flex;align-items:center;justify-content:center}
.ec-tile img{width:80%;height:80%;object-fit:contain}.ec-tile b{position:absolute;right:4px;bottom:0;color:#fff;font-size:calc(19 * var(--u));text-shadow:0 0 2px #000,0 0 2px #000}
.ec-gobtn{border:2px solid #8aa6d6;border-radius:10px;background:linear-gradient(#fff,#dfe7f6);color:#2a4f9a;font-weight:800;font-size:calc(26 * var(--u));padding:calc(10 * var(--u)) calc(60 * var(--u));cursor:pointer}
.ec-stamp{width:calc(150 * var(--u))}