/* WINGED — the account layer's skin.
 *
 * No new visual language. Everything here is built from the vocabulary already
 * in index.html and menu.css: gold on slate, `.tacct` for the title strip,
 * `.screen`/`.shead`/`.sbody` for the full-screen panel, the global `button`
 * and `button.ghost` rules, and the same focus ring. If a value below is not
 * one of those, it is a size, not a colour.
 *
 * Sized for 375 x 812 first. The panel is a single 520px column that simply
 * gets narrower; nothing here has a fixed width, a horizontal scroll or a hover
 * that hides information from a touch screen.
 */

/* ---------------- the title strip ---------------- */

/* `.tacct` already gives the plate, the radius and the border. This adds the
   status dot, the wrapping behaviour and the button on the end. */
.wgstrip {
  width: min(430px, 92%);
  max-width: 100%;
  flex-wrap: wrap;
  row-gap: 6px;
  line-height: 1.45;
  text-align: left;
  /* `.tacct` centres its row; with wrapping text that floats the status dot to
     the middle of a three-line paragraph. Pin it to the first line instead. */
  align-items: flex-start;
}
.wgstrip.wgquiet { opacity: .55 }
.wgstriptx { flex: 1 1 190px; min-width: 0 }
.wgstrip b { color: var(--gold-l); font-weight: normal }

.wgdot {
  width: 8px; height: 8px; flex: none; border-radius: 50%; margin-top: 5px;
  background: rgba(224, 185, 95, .28);
  box-shadow: inset 0 0 0 1px rgba(224, 185, 95, .5);
}
.wgdot.on {
  background: linear-gradient(180deg, #8ce087, #37853a);
  box-shadow: 0 0 8px rgba(111, 207, 107, .7);
}

.wgbtn { padding: 5px 12px; font-size: 11.5px; flex: none; margin-left: auto }

.wgnote { font-size: 11px }
.wgnote.wg-warn { color: #f0a08e }
.wgnote.wg-info { color: var(--gold) }

/* ---------------- the lock on a gated entry point ---------------- */

/* The button is not disabled — pressing it is how you find out why, and a dead
   control that does nothing teaches a player nothing. */
.tbtn.wglocked, button.wglocked { opacity: .62 }
.tbtn.wglocked { border-style: dashed }
.wglock { margin-left: auto; font-size: 12px; font-style: normal; opacity: .85; flex: none }
button.wglocked .wglock { margin-left: 5px; font-size: 10.5px }

/* ---------------- the account screen ---------------- */

/* `.screen` supplies the fixed overlay, the head and the scrolling body. */
.wgwrap {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wgcard {
  border-radius: 11px;
  padding: 15px 17px;
  background: linear-gradient(180deg, rgba(28, 40, 50, .9), rgba(12, 19, 26, .94));
  border: 1px solid rgba(224, 185, 95, .22);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.wgcard h3 {
  margin: 0 0 9px;
  font-size: 9.5px; letter-spacing: 3px; font-weight: normal;
  color: var(--gold);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(224, 185, 95, .2);
}
.wgsmall { font-size: 11.5px; line-height: 1.6; opacity: .82; margin: 0 0 8px }
.wgsmall:last-child { margin-bottom: 0 }
.wgsmall b, .wgcard p b { color: var(--gold-l); font-weight: normal }
.wgfoot { font-size: 11px; line-height: 1.6; opacity: .6; margin: 0; padding: 0 4px }

.wgreason {
  border-radius: 10px; padding: 11px 14px; font-size: 12px; line-height: 1.55;
  background: linear-gradient(180deg, rgba(58, 45, 20, .8), rgba(24, 19, 10, .86));
  border: 1px solid var(--gold-d);
}
.wgreason b { color: var(--gold-l); font-weight: normal }

/* ---------------- tabs ---------------- */

.wgtabs { display: flex; gap: 7px; margin-bottom: 14px }
.wgtab {
  flex: 1 1 0;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 12px; letter-spacing: 1.2px; font-weight: normal;
  color: var(--cream); text-shadow: none;
  background: linear-gradient(180deg, rgba(47, 63, 75, .8), rgba(20, 29, 36, .88));
  border: 1px solid rgba(224, 185, 95, .22);
  box-shadow: none;
}
.wgtab.on {
  color: #241a05; font-weight: bold;
  background: linear-gradient(180deg, var(--gold-l), var(--gold) 50%, #a57d2c);
  border-color: var(--gold-l);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}

/* ---------------- forms ---------------- */

.wgform { display: flex; flex-direction: column; gap: 12px }
.wgfield { display: flex; flex-direction: column; gap: 4px }
.wgfield label { font-size: 11px; letter-spacing: 1.4px; color: var(--gold); text-transform: uppercase }
/* 16px, deliberately: anything smaller makes iOS Safari zoom the whole page on
   focus, and a sign-in form that scrolls itself sideways on a phone is broken. */
.wgfield input {
  font-size: 16px; padding: 10px 12px; border-radius: 8px; width: 100%;
  background: rgba(6, 11, 15, .92); color: var(--cream);
  border: 1px solid rgba(224, 185, 95, .25);
}
.wgfield input:focus { border-color: var(--gold) }
.wgfield input[aria-invalid="true"] { border-color: var(--bad) }
.wghint { font-size: 10.5px; opacity: .58; line-height: 1.45 }

.wgerr { color: #f0776a; font-size: 11.5px; line-height: 1.45 }
.wgerr:empty { display: none }
.wgformerr { padding: 8px 11px; border-radius: 8px; background: rgba(142, 43, 32, .22); border: 1px solid rgba(224, 87, 74, .45) }
.wgok { color: #8ce087; font-size: 11.5px; line-height: 1.5; margin-top: 8px }
.wgok:empty { display: none }

.wgshow { font-size: 11.5px; opacity: .8; display: flex; align-items: center; gap: 7px; cursor: pointer }
.wgshow input { accent-color: var(--gold) }

.wgactions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap }
.wgprimary { flex: 1 1 160px; padding: 11px 16px; font-size: 13.5px; letter-spacing: .6px }
.wginline { margin-top: 12px }
.wgsub:empty { display: none }

/* ---------------- the recovery code ---------------- */

.wgrec { border-color: var(--gold-d) }
.wgreckicker { font-size: 9px; letter-spacing: 3px; color: var(--gold); opacity: .8; margin-bottom: 5px }
.wgrec h3 {
  font-size: 17px; letter-spacing: .4px; color: var(--gold-l);
  border: 0; padding: 0; margin: 0 0 12px; text-transform: none;
}

/* The code itself. Monospace, big, selectable, and it wraps rather than
   scrolling — a code you cannot read all of on a phone is a code you cannot
   write down. */
.wgcode {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(15px, 4.6vw, 21px);
  letter-spacing: 1.5px;
  line-height: 1.6;
  text-align: center;
  word-break: break-word;
  overflow-wrap: anywhere;
  user-select: all;
  padding: 15px 12px;
  border-radius: 10px;
  color: var(--gold-l);
  background: linear-gradient(180deg, rgba(58, 45, 20, .9), rgba(20, 16, 8, .95));
  border: 1px solid var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 26px rgba(224, 185, 95, .16);
}
.wgrecbtns { margin-top: 10px }
.wgcopied { font-size: 11px; color: #8ce087 }

.wgdanger {
  margin-top: 14px; padding: 11px 14px; border-radius: 9px;
  font-size: 12px; line-height: 1.6;
  background: rgba(142, 43, 32, .16);
  border: 1px solid rgba(224, 87, 74, .4);
}
.wgdanger p { margin: 0 0 7px }
.wgdanger p:last-child { margin: 0 }
.wgdanger b { color: #ffcfc5; font-weight: normal }

.wgack {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 14px 0 12px; font-size: 12.5px; line-height: 1.5; cursor: pointer;
}
.wgack input { margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--gold) }

/* ---------------- the signed-in panel ---------------- */

.wgwho { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.wgavatar {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 18px; color: #241a05;
  background: linear-gradient(180deg, var(--gold-l), var(--gold) 55%, #a57d2c);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .7);
}
.wgwhoname { font-size: 15px; color: var(--gold-l) }
.wgwho > div:nth-child(2) { flex: 1 1 140px; min-width: 0 }
.wgwho .wgsmall { margin: 2px 0 0; word-break: break-word }

.wgstats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 11px }
.wgstat {
  flex: 1 1 68px; text-align: center; padding: 8px 6px; border-radius: 8px;
  background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(224, 185, 95, .12);
}
.wgstat b { display: block; font-size: 19px; color: var(--gold-l); font-weight: normal }
.wgstat span { font-size: 9.5px; letter-spacing: 1.4px; opacity: .6 }

/* The level bar. How far into the current level, drawn from the two sides the
   server derives, so it cannot disagree with the number printed beside it.
   A plain div rather than <progress>, which cannot be themed consistently
   across engines and brings a UA stylesheet the rest of this screen does not. */
.wglv {
  height: 4px; border-radius: 3px; overflow: hidden; margin: -4px 0 9px;
  background: rgba(0, 0, 0, .38); box-shadow: inset 0 0 0 1px rgba(224, 185, 95, .12);
}
.wglv i { display: block; height: 100%; background: var(--gold); opacity: .72 }

.wgcols { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; line-height: 1.7 }
.wgcols ul { list-style: none; margin: 0; padding: 0; flex: 1 1 120px }
.wgcols li b { color: var(--gold); font-weight: normal; letter-spacing: 1px; font-size: 10px }

.wgconflicts {
  margin: 4px 0 10px; padding: 10px 13px; border-radius: 9px; font-size: 11.5px; line-height: 1.6;
  background: rgba(58, 45, 20, .5); border: 1px solid var(--gold-d);
}
.wgconflicts b { color: var(--gold-l); font-weight: normal }
.wgconflicts ul { margin: 6px 0 0; padding-left: 18px }

.wgsessions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px }
.wgsessions li {
  display: flex; gap: 10px; align-items: flex-start;
  padding-bottom: 9px; border-bottom: 1px solid rgba(224, 185, 95, .12);
}
.wgsessions li:last-child { border-bottom: 0; padding-bottom: 0 }
.wgsessions li > span { flex: 1 1 auto; min-width: 0; line-height: 1.5; word-break: break-word }
.wgsessions em { color: var(--gold); font-style: normal }
.wgsessions button { flex: none }

/* ---------------- today's card ---------------- */

/* Three tiles, one of which becomes yours. Deliberately the same visual grammar
   as the campaign's reward pick (`.cmpcard.pick`) rather than a new one: it is
   the same act — the game offering three and you taking one — and giving it a
   second look would make it read as a second mechanic. */
.wgdailyf { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 9px;
  font-size: 11px; letter-spacing: .6px; opacity: .85 }
.wgfac {
  padding: 4px 9px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 11px;
  color: var(--cream); background: rgba(255, 255, 255, .04); border: 1px solid rgba(224, 185, 95, .25);
}
.wgfac:hover { border-color: var(--gold) }
.wgfac.on { color: #1c1608; background: linear-gradient(180deg, var(--gold-l), var(--gold)); border-color: var(--gold) }

.wgpicks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.wgpick {
  padding: 0 0 7px; border-radius: 9px; cursor: pointer; overflow: hidden; font-family: inherit;
  display: flex; flex-direction: column; align-items: stretch; gap: 3px; text-align: center;
  color: var(--cream); background: linear-gradient(180deg, #1b262e, #0e151b);
  border: 1px solid rgba(224, 185, 95, .22); transition: transform .13s, border-color .13s;
}
.wgpick:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold) }
.wgpick:disabled { opacity: .45; cursor: default }
.wgpickart { display: block; height: 66px; background: #0e151b center 38% / cover no-repeat }
.wgpick b { font-size: 10.5px; font-weight: normal; color: #f0e7d4; padding: 4px 5px 0; line-height: 1.25 }
.wgpick i { font-size: 9.5px; font-style: normal; opacity: .6; letter-spacing: .4px }

/* ---------------- phones ---------------- */

@media (max-width: 560px) {
  .wgcard { padding: 13px 13px }
  .wgpickart { height: 54px }
  .wgfac { min-height: 34px }
  .wgstrip { width: 100%; font-size: 11.5px }
  /* 62x26 was a mouse target. "Sign in" is the one thing on the title screen a
     signed-out player is meant to press, and a thumb is about 44px wide. */
  .wgbtn { margin-left: 0; min-height: 44px; padding: 8px 14px }
  .wgprimary { flex: 1 1 100% }
  .wgcols { gap: 10px }
  .wgcols ul { flex: 1 1 100% }
}

/* The shell's focus ring, extended to the controls this file adds. */
.wgtab:focus-visible, .wgcode:focus-visible, .wgack input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 8px;
}