/* The Weaver — v3 skin. Palette sampled from Robert's reference stills (see DESIGN.md).
   Type: EB Garamond (captions, body) and Cormorant Garamond (title), both SIL OFL, self-hosted in /fonts. */
@font-face{font-family:"EB Garamond";src:url(/fonts/eb-garamond-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/fonts/eb-garamond-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
:root{
  --void:#02040a;--navy:#020e1b;--navyHi:#092440;--haze:#3a5170;
  --blue:#2b7db6;--electric:#4a99d0;--ice:#ddfcff;
  --gold:#b89157;--goldHi:#f2ca7c;--goldMid:#dab370;--white:#fff3d8;--muted:#8b97ab;
  --bar:rgba(16,20,34,.82);
  /* Norn colours, under the names app.js references: Urðr electric blue, Verðandi ice, Skuld gold */
  --urdr:#4a99d0;--verd:#9fe3ff;--skuld:#f2ca7c;--cyan:var(--verd);
  --serif:"EB Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --display:"Cormorant Garamond","EB Garamond",Garamond,Georgia,serif;
  --lvl:0;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--void);color:#f7f4ee;-webkit-font-smoothing:antialiased;overflow:hidden;font-family:var(--serif)}
body{-webkit-tap-highlight-color:transparent}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- layers: WebGL scene (0) · gore label (1) · UI (5). Without WebGL: a still plate behind the UI. ---- */
.vfx{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.bg{position:fixed;inset:0;z-index:0;background:var(--void) url(/img/v3/title.jpg) center 40%/auto 100% no-repeat;pointer-events:none;transition:opacity 1s}
body[data-view=chamber] .bg{background-image:url(/img/v3/wyrd.jpg)}
.has-visuals .bg{display:none}
.gore{position:fixed;left:0;top:0;z-index:1;pointer-events:none;font-family:var(--display);font-weight:500;font-size:.86rem;letter-spacing:.16em;text-indent:.16em;padding:.08em .5em .12em;background:rgba(6,12,24,.55);border:1px solid color-mix(in srgb,currentColor 45%,transparent);opacity:0;text-shadow:0 0 8px currentColor;transition:opacity .6s,color .6s;will-change:transform}
.threshold,.chamber{z-index:5}

.label{font-size:.64rem;letter-spacing:.36em;text-transform:uppercase}
.gold{color:var(--goldHi);text-shadow:0 0 10px rgba(227,166,64,.45)}
.muted{color:var(--muted)}.small{font-size:.56rem;margin-top:.55rem;opacity:.8}

/* ---- threshold: the title card (image 6) ---- */
.threshold{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 1.5rem max(2.2rem,env(safe-area-inset-bottom));text-align:center;animation:rise 1.6s cubic-bezier(.22,1,.36,1) both}
h1{font-family:var(--display);font-weight:500;font-size:clamp(2.3rem,10.5vw,3.4rem);letter-spacing:.14em;text-indent:.14em;line-height:1;
  background:linear-gradient(180deg,#ffe2a0 0%,#f0b65a 55%,#b9802f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px rgba(227,166,64,.35)) drop-shadow(0 0 1px rgba(0,0,0,.9))}
.sub{font-family:var(--display);font-weight:500;color:var(--goldHi);font-size:1.12rem;letter-spacing:.16em;margin-top:.55rem;text-shadow:0 0 10px rgba(227,166,64,.4)}
.invocation{font-style:italic;color:#d7dceb;font-size:1.1rem;line-height:1.45;max-width:20rem;margin-top:1.4rem;text-shadow:0 1px 12px #000}
.summon{position:relative;margin:1.7rem 0 1rem;min-height:3.2rem;min-width:13rem;padding:0 2.6rem;font-family:var(--display);font-weight:500;font-size:.95rem;letter-spacing:.5em;text-indent:.5em;color:var(--goldHi);
  border:1px solid rgba(227,166,64,.55);background:linear-gradient(180deg,rgba(13,33,64,.55),rgba(2,4,10,.75));
  box-shadow:0 0 0 1px rgba(47,143,255,.18) inset,0 0 22px rgba(227,166,64,.18),0 0 calc(10px + 20px*var(--lvl)) rgba(47,143,255,.15);transition:transform .2s,box-shadow .4s,opacity .6s}
.summon::before,.summon::after{content:"";position:absolute;top:50%;width:5px;height:5px;background:var(--goldHi);transform:translateY(-50%) rotate(45deg);box-shadow:0 0 8px var(--gold)}
.summon::before{left:-3px}.summon::after{right:-3px}
.summon:hover,.summon:focus-visible{outline:none;box-shadow:0 0 0 1px rgba(47,143,255,.3) inset,0 0 30px rgba(227,166,64,.35)}
.summon:active{transform:scale(.97)}
.summon:disabled{opacity:.35}

/* ---- chamber ---- */
.chamber{position:fixed;inset:0;display:flex;flex-direction:column}
.chamber[hidden],.threshold[hidden]{display:none}
header{display:flex;justify-content:space-between;align-items:flex-start;padding:max(1rem,env(safe-area-inset-top)) .6rem 0 1.25rem;text-shadow:0 1px 8px #000}
header .label+.label{margin-top:.35rem;letter-spacing:.3em}
#phase{color:var(--ice);opacity:.75}
body[data-mode=breakthrough] #phase,body[data-mode=synthesis] #phase,body[data-mode=weaving] #phase{color:var(--goldHi);opacity:1}
.ctrls{display:flex;align-items:center;gap:.1rem}
#count{margin-right:.4rem;letter-spacing:.2em}
.icon{width:2.75rem;height:2.75rem;font-size:0;color:var(--muted);display:grid;place-items:center;transition:color .3s}
.icon::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:var(--glyph) center/contain no-repeat;mask:var(--glyph) center/contain no-repeat}
.icon:hover,.icon:focus-visible{color:var(--goldHi);outline:none}
#mute{--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E")}
#mute[data-muted="1"]{--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6'/%3E%3C/svg%3E")}
#end{--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}

/* the Nine Lines: a quiet row of numerals; the lit Line also rides the lattice (.gore) */
.loom{display:flex;justify-content:center;gap:clamp(6px,2.4vw,16px);padding:.5rem .75rem 0}
.strand{display:flex;flex-direction:column;align-items:center;gap:.3rem;min-width:1.4rem}
.strand i{display:none}
html:not(.has-visuals) .strand i{display:block;width:1px;height:28vh;background:linear-gradient(transparent,var(--c),transparent);opacity:.35}
html:not(.has-visuals) .strand.on i{opacity:1;width:2px;box-shadow:0 0 14px var(--c)}
.strand b{font-family:var(--display);font-weight:500;font-size:.66rem;color:rgba(191,230,255,.32);letter-spacing:.06em;transition:color .8s,text-shadow .8s}
.strand.on b{color:var(--c);text-shadow:0 0 8px var(--c)}
body[data-mode=breakthrough] .strand.on b,body[data-mode=synthesis] .strand.on b{color:var(--goldHi)}
body[data-mode=dismissal] .strand b{color:rgba(191,230,255,.15);text-shadow:none}

/* captions styled like the stills: white serif on a dark translucent bar near the lower third */
.stage{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 1.1rem 7vh;text-align:center}
.lineTag{font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--verd);margin-bottom:.7rem;min-height:1em;text-shadow:0 0 10px currentColor,0 1px 4px #000}
body[data-line="1"] .lineTag,body[data-line="7"] .lineTag,body[data-line="8"] .lineTag{color:var(--urdr)}
body[data-line="5"] .lineTag,body[data-line="6"] .lineTag,body[data-line="9"] .lineTag{color:var(--skuld)}
.caption{display:inline-block;max-width:min(34rem,100%);padding:.28em .62em .34em;background:var(--bar);color:#fbfaf7;
  font-size:clamp(1.06rem,4.6vw,1.38rem);line-height:1.32;letter-spacing:.01em;box-shadow:0 2px 18px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity 1.2s,color 1.2s;max-height:38vh;overflow:auto;scrollbar-width:none}
.caption:empty{visibility:hidden}
body[data-mode=breakthrough] .caption,body[data-mode=synthesis] .caption{color:#fff3d6}
body[data-mode=dismissal] .caption{opacity:.7}
.hint{font-style:italic;color:#aab4c6;margin-top:.55rem;min-height:1.4em;font-size:.98rem;letter-spacing:.02em;text-shadow:0 1px 8px #000}

/* input bar */
.form{display:flex;gap:.45rem;width:100%;max-width:36rem;margin:0 auto max(1rem,env(safe-area-inset-bottom));padding:0 1rem}
.form input{flex:1;min-width:0;min-height:3.1rem;border:1px solid rgba(191,230,255,.16);border-radius:2px;color:var(--white);padding:0 1rem;font-family:var(--serif);font-size:1.05rem;outline:none;
  background:rgba(6,12,24,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .4s,box-shadow .4s}
.form input::placeholder{color:#7d889c;font-style:italic}
.form input:focus{border-color:rgba(79,183,255,.55);box-shadow:0 0 18px rgba(47,143,255,.18)}
.send,.ptt{min-height:3.1rem;padding:0 1.05rem;font-family:var(--display);font-weight:500;font-size:.78rem;letter-spacing:.3em;text-indent:.3em;color:var(--goldHi);text-transform:uppercase;
  border:1px solid rgba(227,166,64,.45);border-radius:2px;background:rgba(6,12,24,.72);transition:color .3s,box-shadow .3s}
.send:active,.ptt:active{transform:translateY(1px)}
.ptt{width:3.1rem;padding:0;font-size:0;display:grid;place-items:center}
.ptt::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/contain no-repeat}
.ptt.hot{color:var(--void);background:radial-gradient(circle,var(--goldHi),var(--gold));box-shadow:0 0 22px rgba(227,166,64,.7)}
.send:disabled,.ptt:disabled,.form input:disabled{opacity:.35}
body[data-visual=PROCESSING] .form input{filter:brightness(.7)}

@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@media (min-width:720px){.invocation{max-width:26rem}.stage{padding-bottom:9vh}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}