/* ============================================================================
   WeaveArena engine · shared chrome

   Every value that could differ between clients is a token. Nothing in here names
   a colour directly, which is what makes a new client a twelve line file rather
   than a search and replace through nine games.
   ============================================================================ */

:root {
  --wa-bg:        #0A0810;
  --wa-surface:   #141019;
  --wa-line:      rgba(232,234,240,.14);
  --wa-ink:       #E8EAF0;
  --wa-pearl:     #CFC8DA;
  --wa-muted:     #8A8598;
  --wa-metal:     #8E93A3;
  --wa-metalHi:   #E8EAF0;
  --wa-grand:     #E8C87E;
  --wa-epic:      #E9DCAD;
  --wa-rare:      #B9AFC4;
  --wa-common:    #8A8598;
  /* The studio trio. Fraunces carries the theatre, Outfit does the talking,
     Sono counts. Chosen to be ours: none of the three is anybody's default. */
  --wa-head:      'Fraunces', Didot, Georgia, serif;
  --wa-body:      'Outfit', ui-sans-serif, system-ui, sans-serif;
  --wa-num:       'Sono', ui-monospace, monospace;

  /* How the tier announces itself. On a dark ground that is light growing out of
     nothing. On a light ground light is invisible, so the same job is done by
     saturated colour and a shadow that deepens. Same beat, different physics. */
  --wa-tellMode:  glow;
  --wa-tellSpread: 62%;
  --wa-cardBg:    radial-gradient(120% 80% at 50% 38%, rgba(20,16,25,.94), rgba(6,5,9,.985));
  --wa-btnInk:    #171126;
  --wa-artShadow: drop-shadow(0 22px 30px rgba(0,0,0,.65));
  --wa-sealShadow: none;
}

/* ============================================================================
   LIGHT

   Not a colour swap. Bone rather than white, because pure white has no warmth and
   a premium object needs a ground with some paper in it. The tier colours are
   pulled down until they hold against a bright field: gold becomes bronze, and
   the pearls become slate. The tell stops glowing and starts pressing, arriving
   as a saturated wash with a shadow gathering under the prize.
   ============================================================================ */
:root[data-theme="light"], .wa-light {
  --wa-bg:        #F4F1EC;
  --wa-surface:   #FFFFFF;
  --wa-line:      rgba(28,24,32,.14);
  --wa-ink:       #191520;
  --wa-pearl:     #2E2838;
  --wa-muted:     #6E6878;
  --wa-metal:     #6E6878;
  --wa-metalHi:   #26212E;
  --wa-grand:     #9A6B14;
  --wa-epic:      #8A6A3A;
  --wa-rare:      #4C5A78;
  --wa-common:    #6E6878;
  --wa-tellMode:  wash;
  --wa-tellSpread: 78%;
  --wa-cardBg:    radial-gradient(120% 80% at 50% 34%, #FFFDFA 0%, #F4F1EC 55%, #E9E4DC 100%);
  --wa-btnInk:    #FBF9F6;
  --wa-artShadow: drop-shadow(0 20px 26px rgba(28,22,38,.26));
  --wa-sealShadow: drop-shadow(0 14px 22px rgba(28,22,38,.20));
  --wa-statsBg:   rgba(255,255,255,.72);
}

/* ---- the reveal ---- */
#waCard {
  position: fixed; inset: 0; z-index: 90;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; padding: 22px 18px 26px; text-align: center;
  background: var(--wa-cardBg);
  backdrop-filter: blur(3px);
  overflow-y: auto; font-family: var(--wa-body); color: var(--wa-ink);
}
#waCard.on { display: flex; }

/* the tell: tier coloured light building behind a thing that has not opened yet */
#waTell {
  position: fixed; left: 50%; top: 50%; width: 120vw; height: 120vw;
  max-width: 760px; max-height: 760px; transform: translate(-50%,-50%);
  border-radius: 50%; pointer-events: none; opacity: 0;
  transition: opacity 1.1s ease-out;
  background: radial-gradient(circle, rgba(232,200,126,var(--waTellA,.4)) 0%,
                              rgba(232,200,126,0) 62%);
}
#waTell.on      { opacity: 1; }
#waTell.grand   { background: radial-gradient(circle, rgba(232,200,126,var(--waTellA)) 0%, rgba(232,200,126,0) var(--wa-tellSpread)); }
#waTell.epic    { background: radial-gradient(circle, rgba(233,220,173,var(--waTellA)) 0%, rgba(233,220,173,0) var(--wa-tellSpread)); }
#waTell.rare    { background: radial-gradient(circle, rgba(185,175,196,var(--waTellA)) 0%, rgba(185,175,196,0) var(--wa-tellSpread)); }
#waTell.common  { background: radial-gradient(circle, rgba(150,145,160,var(--waTellA)) 0%, rgba(150,145,160,0) var(--wa-tellSpread)); }

/* On a light ground the tell presses instead of glowing: the tier's own colour
   soaks into the page and a shadow gathers under the sealed thing. */
:root[data-theme="light"] #waTell.grand,  .wa-light #waTell.grand
  { background: radial-gradient(circle, rgba(196,140,26,calc(var(--waTellA) * .58)) 0%, rgba(196,140,26,0) var(--wa-tellSpread)); }
:root[data-theme="light"] #waTell.epic,   .wa-light #waTell.epic
  { background: radial-gradient(circle, rgba(168,126,66,calc(var(--waTellA) * .52)) 0%, rgba(168,126,66,0) var(--wa-tellSpread)); }
:root[data-theme="light"] #waTell.rare,   .wa-light #waTell.rare
  { background: radial-gradient(circle, rgba(86,106,148,calc(var(--waTellA) * .48)) 0%, rgba(86,106,148,0) var(--wa-tellSpread)); }
:root[data-theme="light"] #waTell.common, .wa-light #waTell.common
  { background: radial-gradient(circle, rgba(120,114,130,calc(var(--waTellA) * .40)) 0%, rgba(120,114,130,0) var(--wa-tellSpread)); }
#waTell.beat    { animation: waTellPulse .62s ease-in-out infinite alternate; }
@keyframes waTellPulse { from { transform: translate(-50%,-50%) scale(1); }
                         to   { transform: translate(-50%,-50%) scale(1.06); } }

/* everything that drips in. display none until its beat, so nothing holds
   layout space and pushes the card off screen before it has arrived. */
.wrv { opacity: 0; transform: translateY(9px); transition: opacity .45s, transform .45s; }
.wrv.in { opacity: 1; transform: none; }

#waEyebrow { position: relative; font-size: 10.5px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--wa-muted); }
#waSealed { position: relative; margin: 12px 0; transition: transform .5s, opacity .5s; }
#waSealed img { width: min(40vw,168px); max-height: 26vh; object-fit: contain;
  filter: var(--wa-sealShadow); }
#waSealed.opened { transform: scale(1.06); opacity: 0; }

#waTier { position: relative; font-family: var(--wa-head); font-weight: 400;
  font-size: clamp(26px,7vw,42px); letter-spacing: .3em; text-transform: uppercase;
  margin-top: 4px; }
#waTier.grand  { color: var(--wa-grand); }
#waTier.epic   { color: var(--wa-epic); }
#waTier.rare   { color: var(--wa-rare); }
#waTier.common { color: var(--wa-common); }

#waName { position: relative; font-family: var(--wa-head); letter-spacing: .04em;
  font-size: clamp(28px,7.5vw,46px); margin-top: 6px; color: var(--wa-pearl); }

#waArt { position: relative; margin-top: 10px; }
#waArt img { width: min(46vw,205px); max-height: 32vh; object-fit: contain;
  filter: var(--wa-artShadow); }
/* a card shaped prize wants width, not a square */
#waArt.card img { width: min(90vw,390px); max-height: 30vh; border-radius: 9px; }

#waNewWrap { position: relative; margin-top: 14px; }
#waNew { display: inline-block; padding: 7px 15px; border-radius: 3px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--wa-btnInk);
  background: linear-gradient(100deg, var(--wa-metal), var(--wa-metalHi) 45%, var(--wa-metal)); }

#waStats { position: relative; display: flex; align-items: center; gap: 18px;
  margin-top: 14px; padding: 11px 20px; border: 1px solid var(--wa-line);
  border-radius: 8px; background: var(--wa-statsBg, rgba(255,255,255,.03)); }
#waStats .stat { display: flex; flex-direction: column; align-items: center; gap: 3px; }
#waStats .k { font-size: 8.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--wa-muted); }
#waStats .v { font-family: var(--wa-num); font-weight: 700; font-size: 15px;
  letter-spacing: .08em; color: var(--wa-pearl); }
#waStats .statDiv { width: 1px; height: 26px; background: var(--wa-line); }
#waStats.grand .v { color: var(--wa-grand); }
#waStats.epic  .v { color: var(--wa-epic); }
#waStats.rare  .v { color: var(--wa-rare); }

.waHair { width: 92px; height: 1px; margin: 18px 0 0;
  background: linear-gradient(90deg, transparent, var(--wa-line), transparent); }
#waSet  { margin-top: 10px; font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--wa-pearl); }
#waCode { margin-top: 12px; font-family: var(--wa-num); font-weight: 700;
  font-size: 22px; letter-spacing: .35em; color: var(--wa-ink); }
#waNote { margin-top: 8px; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--wa-muted); }

.waBtn { appearance: none; border: 0; margin-top: 18px; cursor: pointer;
  padding: 14px 30px; border-radius: 3px; font-family: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--wa-btnInk);
  background: linear-gradient(100deg, var(--wa-metal), var(--wa-metalHi) 45%, var(--wa-metal)); }
.waBtn:active { transform: scale(.97); }


/* ---- the daily board ---- */
#waBoard{position:fixed;inset:0;z-index:92;display:none;align-items:center;justify-content:center;
  padding:22px;background:var(--wa-cardBg);backdrop-filter:blur(4px);
  font-family:var(--wa-body);color:var(--wa-ink)}
#waBoard.on{display:flex}
.wbCard{width:min(92vw,400px);display:flex;flex-direction:column;gap:12px;text-align:center}
.wbEyebrow{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--wa-muted)}
.wbScore{font-family:var(--wa-head);font-weight:400;font-size:clamp(30px,8vw,46px);color:var(--wa-pearl)}
.wbAsk{display:flex;flex-direction:column;gap:9px;align-items:center}
.wbAsk span{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--wa-muted)}
#wbName{appearance:none;border:1px solid var(--wa-line);background:var(--wa-statsBg,rgba(255,255,255,.06));
  color:var(--wa-ink);font-family:var(--wa-num);font-size:22px;font-weight:700;letter-spacing:.3em;
  text-align:center;text-transform:uppercase;padding:11px;border-radius:6px;width:200px;outline:none}
#wbName:focus{border-color:var(--wa-grand)}
.wbBtn{appearance:none;border:0;cursor:pointer;padding:13px 26px;border-radius:4px;
  font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--wa-btnInk);background:linear-gradient(100deg,var(--wa-metal),var(--wa-metalHi) 45%,var(--wa-metal))}
.wbWide{width:100%;margin-top:2px}
.wbList{display:flex;flex-direction:column;gap:5px;max-height:38vh;overflow-y:auto;padding:2px}
.wbDay{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--wa-muted);margin:2px 0 4px}
.wbRow{display:flex;align-items:center;gap:12px;padding:9px 13px;border-radius:7px;
  border:1px solid var(--wa-line);background:var(--wa-statsBg,rgba(255,255,255,.04))}
.wbRow b{font-family:var(--wa-num);font-size:11px;color:var(--wa-muted);width:20px;text-align:left}
.wbRow span{font-family:var(--wa-num);font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--wa-ink)}
.wbRow i{font-style:normal;margin-left:auto;font-family:var(--wa-num);font-weight:700;font-size:13px;
  color:var(--wa-pearl)}
.wbRow.me{border-color:var(--wa-grand);background:rgba(232,200,126,.12)}
.wbRow.me i{color:var(--wa-grand)}
.wbNote{font-size:11px;letter-spacing:.08em;color:var(--wa-muted);padding:10px}

/* the board's two views: today, and every day the machine has run */
.wbTabs{display:flex;gap:6px;justify-content:center;margin:6px 0 10px}
.wbTabs button{appearance:none;cursor:pointer;border:1px solid var(--wa-line);
  background:transparent;color:var(--wa-muted);font-family:var(--wa-num);font-size:9px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:7px 13px;
  border-radius:999px;transition:all .15s}
.wbTabs button.on{border-color:var(--wa-grand);color:var(--wa-grand);
  background:rgba(224,145,43,.12)}