/* One committed visual world: a fortune teller's parlour after dark.
   No light theme - every colour is painted explicitly so the page holds
   on any host ground. */
:root{
  color-scheme: dark;

  --ink:#07040B;
  --velvet:#241230;

  --brass:#C9A15A;
  --brass-hi:#F2DCA8;
  --brass-lo:#6B5027;
  --ember:#F2924E;

  --haze:#9C8BA8;          /* mauve-grey: the neutral leans toward the plum ground */
  --haze-dim:#6E6179;
  --parchment:#F1E6D4;

  --oracle:#FF7BC2;        /* the voice that answers */
  --querent:#63E8D8;       /* the voice that asks */

  --rule:rgba(201,161,90,.26);
  --rule-hi:rgba(242,220,168,.55);
  --panel:rgba(26,13,35,.55);

  --display:'Bodoni Moda','Didot','Times New Roman',serif;
  --body:'Spectral',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--body);
  font-weight:300;
  color:var(--parchment);
  background:
    radial-gradient(120% 82% at 50% 36%, rgba(74,38,98,.50), transparent 62%),
    radial-gradient(96% 58% at 50% 104%, rgba(40,18,52,.92), transparent 72%),
    var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------------- shell */
.parlour{
  position:relative;
  isolation:isolate;
  min-height:100%;
  display:grid;
  grid-template-rows:auto minmax(260px,1fr) auto auto;
  grid-template-areas:"plate" "stage" "reading" "console";
}
/* Velvet folds at the left and right edges only.
   A radial mask was a mistake here: at 86% of the viewport width its upper
   arc is nearly flat, so it read as a hard horizontal shade across the top
   of the stage. A horizontal mask cannot band horizontally. */
.parlour::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(0,0,0,.38) 0 2px,
    rgba(90,46,116,.13) 2px 26px,
    rgba(0,0,0,.32) 26px 30px,
    rgba(72,34,94,.10) 30px 58px);
  -webkit-mask-image:linear-gradient(90deg,
    #000 0%, rgba(0,0,0,.34) 9%, transparent 21%,
    transparent 79%, rgba(0,0,0,.34) 91%, #000 100%);
  mask-image:linear-gradient(90deg,
    #000 0%, rgba(0,0,0,.34) 9%, transparent 21%,
    transparent 79%, rgba(0,0,0,.34) 91%, #000 100%);
  opacity:.6;
}
/* On a phone the orb nearly spans the width, so pull the folds right out
   to the edges rather than letting them sit behind the glass. */
@media (max-width:700px){
  .parlour::before{
    -webkit-mask-image:linear-gradient(90deg,
      #000 0%, transparent 13%, transparent 87%, #000 100%);
    mask-image:linear-gradient(90deg,
      #000 0%, transparent 13%, transparent 87%, #000 100%);
    opacity:.45;
  }
}
.parlour > *{position:relative; z-index:1; min-width:0}

/* ---------------------------------------------------------------- plate */
.plate{
  grid-area:plate;
  padding:1.15rem 16px .9rem;
  display:flex; flex-direction:column; gap:.35rem;
  border-bottom:1px solid var(--rule);
}
.eyebrow{
  margin:0;
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--brass);
}
.plate h1{
  margin:0;
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.9rem,5.2vw,2.75rem);
  line-height:1;
  text-wrap:balance;
  color:var(--parchment);
  text-shadow:0 0 28px rgba(148,110,190,.35);
}
.lede{
  margin:.2rem 0 0; max-width:60ch;
  font-size:.92rem; line-height:1.55; color:var(--haze);
}
.lede b{font-weight:400; color:var(--oracle)}
.lede i{font-style:normal; color:var(--querent)}

/* ---------------------------------------------------------------- stage */
.stage{
  grid-area:stage;
  position:relative;
  min-height:clamp(280px,48vh,620px);
  overflow:hidden;
}
/* absolute rather than 100%/100%: the stage's height comes from the grid row,
   and a percentage height on an auto-height parent is a classic silent zero */
#glass{position:absolute; inset:0; display:block; width:100%; height:100%}
.stage .layer{position:absolute; inset:0; pointer-events:none}
.vignette{
  background:radial-gradient(102% 80% at 50% 42%, transparent 40%, rgba(4,2,7,.88) 100%);
}
.touch{
  position:absolute;
  margin:0; padding:0;
  border:0; border-radius:50%;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.touch:focus-visible{outline:2px solid var(--brass-hi); outline-offset:6px}
.hint{
  position:absolute; left:0; right:0; bottom:5%;
  margin:0; text-align:center;
  font-family:var(--mono); font-size:.63rem;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--haze-dim);
  pointer-events:none;
  transition:opacity .9s ease;
}
.hint.faded{opacity:0}

/* -------------------------------------------------------------- reading */
.reading{
  grid-area:reading;
  padding:1.1rem 16px 1.2rem;
  border-top:1px solid var(--rule);
  background:var(--panel);
  display:flex; flex-direction:column; gap:.85rem;
}
.omen{
  margin:0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.25rem,3.6vw,1.6rem); line-height:1.22;
  text-wrap:balance; color:var(--parchment);
}
.omen-sub{
  margin:0; font-size:.88rem; font-style:italic; line-height:1.45; color:var(--haze);
}

/* two channels, two meters - the whole point of the mixer reads here */
.chans{display:flex; flex-direction:column; gap:.55rem}
.chan{display:flex; flex-direction:column; gap:.25rem}
.chan-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;
  font-family:var(--mono); font-size:.6rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
}
.chan-head em{font-style:normal; color:var(--k)}
.chan-head span{
  color:var(--haze-dim); font-variant-numeric:tabular-nums; letter-spacing:.1em;
}
.chan-head span[data-state="live"]{color:var(--k)}
.meter{
  position:relative; height:8px;
  border:1px solid var(--rule);
  background:rgba(10,4,16,.7);
  overflow:hidden;
}
.meter-fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg, color-mix(in srgb, var(--k) 45%, #2B1840), var(--k));
  box-shadow:0 0 12px var(--k);
}
.meter-peak{
  position:absolute; top:-1px; bottom:-1px; left:0; width:2px;
  background:var(--brass-hi);
  box-shadow:0 0 8px rgba(242,220,168,.8);
}

.data{
  margin:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem .9rem;
}
.data > div{display:flex; flex-direction:column; gap:.12rem; min-width:0}
.data dt{
  font-family:var(--mono); font-size:.6rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--haze-dim);
}
.data dd{
  margin:0;
  font-family:var(--mono); font-size:.9rem; color:var(--parchment);
  font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.bands{display:flex; flex-direction:column; gap:.4rem}
.band{display:grid; grid-template-columns:5.4rem minmax(0,1fr); align-items:center; gap:.6rem}
.band span{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--haze-dim);
  font-variant-numeric:tabular-nums;
}
.band i{display:block; height:3px; background:rgba(156,139,168,.18); position:relative}
.band i::after{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:var(--v,0%); background:var(--c,var(--brass));
  box-shadow:0 0 8px var(--c,var(--brass));
}

/* -------------------------------------------------------------- console */
.console{
  grid-area:console;
  padding:.95rem 16px calc(1.1rem + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.1rem;
  background:linear-gradient(to bottom, rgba(10,4,16,.5), rgba(10,4,16,.85));
}
.btn{
  flex:0 0 auto;
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--parchment);
  background:linear-gradient(180deg, rgba(201,161,90,.24), rgba(201,161,90,.05));
  border:1px solid var(--rule); border-radius:2px;
  padding:.78rem 1.2rem; cursor:pointer;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.btn:hover{background:linear-gradient(180deg, rgba(242,220,168,.3), rgba(201,161,90,.1)); border-color:var(--rule-hi)}
.btn:focus-visible{outline:2px solid var(--brass-hi); outline-offset:3px}
.btn[data-live="true"]{
  color:#0B0510;
  background:linear-gradient(180deg,#F2DCA8,#C9A15A);
  border-color:#F2DCA8;
}
.btn.oracle[data-live="true"]{
  color:#1A0714;
  background:linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0)), var(--oracle);
  border-color:var(--oracle);
}
/* the file picker wears the same brass plate as the buttons */
.btn.file{display:inline-block}
.btn.file input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.btn.file:focus-within{outline:2px solid var(--brass-hi); outline-offset:3px}

.ctl{flex:1 1 10rem; min-width:8.5rem; display:flex; flex-direction:column; gap:.1rem}
.ctl label{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--haze-dim);
}
input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:1.4rem; background:transparent; margin:0; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--brass-lo),var(--brass))}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; margin-top:-6.5px;
  border-radius:50%; border:0; background:var(--brass-hi);
  box-shadow:0 0 10px rgba(242,220,168,.65);
}
input[type=range]::-moz-range-track{height:2px;background:linear-gradient(90deg,var(--brass-lo),var(--brass))}
input[type=range]::-moz-range-thumb{
  width:15px; height:15px; border:0; border-radius:50%; background:var(--brass-hi);
  box-shadow:0 0 10px rgba(242,220,168,.65);
}
input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid #fff; outline-offset:2px}
input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid #fff; outline-offset:2px}

.casts{
  flex:0 0 auto; margin:0; padding:.1rem .45rem .4rem;
  border:1px solid var(--rule); border-radius:2px;
  display:flex; align-items:center; gap:.1rem;
}
.casts legend{
  padding:0 .35rem;
  font-family:var(--mono); font-size:.55rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass);
}
.casts input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.casts label{
  display:block; padding:.4rem .6rem;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--haze-dim); cursor:pointer;
  transition:color .2s ease, background .2s ease;
}
.casts label:hover{color:var(--parchment)}
.casts input:checked + label{color:#0B0510; background:var(--brass-hi)}
.casts input:focus-visible + label{outline:2px solid var(--brass-hi); outline-offset:2px}
/* colour swatches: each a tiny glowing orb in its own palette */
.swatches{
  flex:0 0 auto; margin:0; padding:.2rem .55rem .5rem;
  border:1px solid var(--rule); border-radius:2px;
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
}
.swatches legend{
  padding:0 .35rem;
  font-family:var(--mono); font-size:.55rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass);
}
.swatches input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.sw{
  display:block; width:22px; height:22px; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 36% 34%, var(--a) 0%, var(--b) 62%, var(--c) 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 8px -1px var(--a);
  transition:transform .15s ease, box-shadow .15s ease;
}
.sw:hover{transform:scale(1.12)}
.swatches input:checked + .sw,
.sw.custom[data-active="true"]{
  box-shadow:0 0 0 2px var(--ink), 0 0 0 3.5px var(--brass-hi), 0 0 12px var(--a);
}
.swatches input:focus-visible + .sw{outline:2px solid var(--brass-hi); outline-offset:3px}
/* the custom swatch: a colour wheel, with the chosen colour at its centre.
   The real colour input sits over it, invisible, so a tap opens the
   picker directly on every platform. */
.pickwrap{position:relative; display:block; width:22px; height:22px}
.sw.custom{
  --a:#C9A15A;
  background:
    radial-gradient(circle, var(--pick, transparent) 0 34%, transparent 36%),
    conic-gradient(from 90deg, #ff5f6d, #ffc371, #f8ff6b, #62ff9b, #5ecbff, #a07bff, #ff6fd8, #ff5f6d);
}
.swatches .pickwrap input{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; padding:0; border:0; opacity:0; cursor:pointer; pointer-events:auto;
}
.pickwrap:focus-within .sw{outline:2px solid var(--brass-hi); outline-offset:3px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* a setting that does not apply to the current smoke style */
.casts:disabled{opacity:.38}
.casts:disabled label{cursor:not-allowed}
.casts:disabled label:hover{color:var(--haze-dim)}

.art{
  flex:0 0 auto; margin:0; padding:.1rem .45rem .4rem;
  border:1px solid var(--rule); border-radius:2px;
  display:flex; align-items:center; gap:.35rem;
}
.art legend{
  padding:0 .35rem;
  font-family:var(--mono); font-size:.55rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass);
}
.art select{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--parchment);
  background:rgba(10,4,16,.85);
  border:1px solid var(--rule); border-radius:2px;
  padding:.36rem .4rem; cursor:pointer;
}
.art select:focus-visible{outline:2px solid var(--brass-hi); outline-offset:2px}
.btn.mini{padding:.4rem .62rem; font-size:.62rem; letter-spacing:.12em}

.toggle{
  flex:0 0 auto; display:flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--haze-dim); cursor:pointer;
}
.toggle input{accent-color:var(--brass-hi); width:15px; height:15px; cursor:pointer}
.toggle:hover{color:var(--parchment)}

.note{
  flex:1 1 100%; margin:0;
  font-size:.8rem; line-height:1.45; color:var(--haze);
}
.note b{font-weight:400; color:var(--parchment)}
.note[data-tone="warn"]{color:var(--ember)}
.note[data-tone="warn"] b{color:var(--ember)}

/* ------------------------------------------------------------- desktop */
@media (min-width:920px){
  .parlour{
    /*grid-template-columns:minmax(0,1fr) minmax(280px,344px);
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:
      "plate   reading"
      "stage   reading"
      "console reading";*/
    height:100%;
  }
  .plate{padding:1.6rem 2rem 1.1rem}
  .stage{min-height:0}
  .console{padding:1.1rem 2rem 1.2rem}
  .reading{
    border-top:0; border-left:1px solid var(--rule);
    padding:1.6rem 1.5rem; overflow:auto; gap:1rem;
  }
  .hint{bottom:7%}
}

@media (prefers-reduced-motion:reduce){
  .hint{transition:none}
}