/* =========================================================================
   High Ground, stylesheet

   Organised in layers, reading from the most general rule to the most
   specific. Custom properties live at the top so that the whole look of the
   game can be adjusted from one place.
   ========================================================================= */

/* ------------------------------------------------------------ 1. tokens */
:root {
  --bg-deep:      #05060b;
  --bg-panel:     #10131f;
  --bg-raised:    #181d2e;
  --border:       #2a3148;

  --text:         #e8ecf8;
  --text-muted:   #8f99b5;

  --light-side:   #4db8ff;
  --dark-side:    #ff3b3b;
  --grey-side:    #b48ead;
  --gold:         #ffd53d;

  --radius:       14px;
  --shadow:       0 18px 45px rgba(0, 0, 0, 0.55);

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------- 2. reset */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1100px 600px at 50% -10%, #1b2340 0%, transparent 60%),
    var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* --------------------------------------------------------- 3. structure */
#app {
  width: 100%;
  max-width: 920px;
}

.screen { display: none; text-align: center; }
.screen.is-active { display: block; }

/* ------------------------------------------------------ 4. title screen */
.game-title {
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 200;
}

.game-title__accent {
  color: var(--gold);
  font-weight: 700;
  margin-left: 0.3em;
}

.tagline {
  color: var(--text-muted);
  max-width: 34rem;
  margin: 0 auto 28px;
  line-height: 1.65;
  font-size: 1.02rem;
}

.best-score {
  color: var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin: 0 0 20px;
}

.deck-status {
  margin-top: 26px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.deck-status--error { color: var(--dark-side); }

/* ----------------------------------------------------------- 5. buttons */
.button {
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text);
  padding: 14px 42px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.button:disabled { opacity: 0.45; cursor: not-allowed; }

.button--primary {
  background: linear-gradient(135deg, #2b3d6b, #16203c);
  border-color: #3c4c78;
}

.button--ghost { padding: 11px 28px; font-size: 0.82rem; }

/* =========================================================== 6. the card */

.card {
  width: 300px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
}

/* The alignment tint. Each card sets --accent, and every rule below reads
   from it, so adding a fourth alignment later means adding one rule here. */
.card--light { --accent: var(--light-side); }
.card--dark  { --accent: var(--dark-side); }
.card--grey  { --accent: var(--grey-side); }

.card--light,
.card--dark,
.card--grey { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }

/* ---- portrait ---- */
.card__portrait {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #0b0e18;
  overflow: hidden;
}

.card__placeholder,
.card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__alignment {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(5, 6, 11, 0.72);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  backdrop-filter: blur(4px);
}

/* ---- the lightsaber strip ---- */
.card__saber {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: #080b14;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.card__saber--none { min-height: 42px; }

.card__no-saber {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.6;
}

/* The saber is drawn in src/js/art/sabers.js. Every shape is the same in that
   file whatever the character carries, and this is the only place the blade
   gets its colour and its glow. Adding a new lightsaber type needs no CSS. */
/* Height is left to the browser so that the drawing scales to the full width
   of the card. Fixing the height instead letterboxes the saber, because the
   300 by 64 viewBox and the strip have different proportions, and the blade
   then looks half as long as it really is. */
.saber { width: 100%; height: auto; display: block; }

.saber .blade {
  fill: var(--blade, #ffffff);
  filter:
    drop-shadow(0 0 2px var(--blade, #fff))
    drop-shadow(0 0 7px var(--blade, #fff))
    drop-shadow(0 0 14px var(--blade, #fff));

  /* Scale the blade about the emitter rather than about its own middle.
     transform-box tells the browser to measure the transform against the
     shape itself, which SVG does not do by default. */
  transform-box: fill-box;
  transform-origin: left center;
}

/* Which end of the blade sits at the emitter. sabers.js decides this, because
   a staff grows out of both ends and a crossguard grows sideways as well. */
.saber .blade--right { transform-origin: left center; }
.saber .blade--left  { transform-origin: right center; }
.saber .blade--up    { transform-origin: center bottom; }
.saber .blade--down  { transform-origin: center top; }

/* ---------------------------------------------------------- ignition

   Only a card carrying the ignite class animates, which is how a card that
   is merely being redrawn stays lit rather than firing up again. ui.js
   decides which cards those are. */

@keyframes saber-ignite-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes saber-ignite-y {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.card--ignite .saber .blade {
  animation: saber-ignite-x 420ms cubic-bezier(0.22, 0.85, 0.3, 1) both;
}

.card--ignite .saber .blade--up,
.card--ignite .saber .blade--down {
  /* The quillons on a crossguard catch a moment after the main blade. */
  animation-name: saber-ignite-y;
  animation-duration: 260ms;
  animation-delay: 150ms;
}

/* The hilt flares as the blade strikes. */
@keyframes emitter-flash {
  0%   { opacity: 0; }
  25%  { opacity: 0.85; }
  100% { opacity: 0; }
}

.card--ignite .saber .emitter-flash {
  animation: emitter-flash 520ms ease-out both;
}

.saber .emitter-flash {
  fill: var(--blade, #ffffff);
  opacity: 0;
  filter: blur(3px);
}

/* ---- text ---- */
.card__body { padding: 16px 18px 6px; flex: 1; }

.card__name {
  margin: 0 0 4px;
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.card__epithet {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.card__hilt-desc {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.card__hilt-label {
  display: inline-block;
  min-width: 34px;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.6rem;
}

/* ---- the number, which is the focal point of the card, see FR-05 ---- */
.card__power {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px 18px;
}

.card__power-label {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.card__power-value {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ---- the face down card ---- */
.card--facedown { --accent: var(--text-muted); }

.card__back {
  flex: 1;
  min-height: 300px;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg, #0d1120 0 12px, #0a0e1a 12px 24px);
}

.card__back-mark {
  font-size: 4.4rem;
  font-weight: 200;
  color: var(--text-muted);
  opacity: 0.55;
}

/* ------------------------------------------------- 7. the play area layout */
.table {
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.preview-note {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 0 0 22px;
}

/* ------------------------------------------------- 7b. the play screen HUD */
.hud {
  display: flex;
  justify-content: center;
  gap: 34px;
  margin-bottom: 22px;
}

.hud__item { display: flex; flex-direction: column; gap: 4px; }

.hud__label {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hud__value {
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.prompt {
  margin: 0 0 22px;
  font-size: 1.02rem;
  color: var(--text);
}

.controls {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}

.button--guess { min-width: 148px; }

/* The outcome is carried by the words as well as the colour, so that nothing
   depends on telling green from red. See NFR-04. */
.result {
  min-height: 1.6em;
  margin: 0;
  font-size: 0.94rem;
  color: var(--text-muted);
}

.result--correct { color: #55e08a; }
.result--wrong   { color: var(--dark-side); }

/* -------------------------------------------------- 7c. the ending screens */
.ending-heading {
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  font-weight: 200;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.ending-heading--win { color: var(--gold); }

.ending-detail {
  color: var(--text-muted);
  max-width: 32rem;
  margin: 0 auto 30px;
  line-height: 1.6;
}

.ending-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
}

.ending-score__label {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ending-score__value {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ 7d. choosing a path */
.difficulty { margin: 0 0 26px; }

.difficulty__heading {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  margin: 0 0 14px;
}

.difficulty__options {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.mode {
  font: inherit;
  text-align: left;
  width: 218px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}

.mode:hover { transform: translateY(-2px); border-color: #3c4c78; }

.mode:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.mode.is-chosen {
  border-color: var(--gold);
  background: linear-gradient(135deg, #241f0e, #14161f);
}

.mode__name {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

.mode.is-chosen .mode__name { color: var(--gold); }

.mode__blurb { color: var(--text-muted); font-size: 0.78rem; line-height: 1.45; }

.mode__detail {
  color: var(--text-muted);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* ------------------------------------------------- 7e. chances remaining */
.hud__lives { display: flex; gap: 6px; align-items: center; min-height: 1.5rem; }

.pip {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
}

.pip--spent {
  background: transparent;
  border: 1px solid var(--border);
  box-shadow: none;
}

.ending-mode {
  margin: 0 0 10px;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ending-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* -------------------------------------------------- 7f. name and leaderboard */
.identity { margin: 0 0 22px; }

.identity__label {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.identity__input {
  font: inherit;
  text-align: center;
  width: 100%;
  max-width: 260px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
}

.identity__input::placeholder { color: var(--text-muted); opacity: 0.7; }

.identity__input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.identity__hint {
  margin: 8px 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.title-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.mode--tab { width: auto; padding: 10px 22px; }
.mode--tab .mode__name { font-size: 0.72rem; }

.board {
  max-width: 480px;
  margin: 22px auto 14px;
  text-align: left;
}

.board__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.board__row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  grid-template-areas:
    "rank name  score"
    "rank meta  score";
  align-items: center;
  gap: 0 12px;
  padding: 12px 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.board__row:last-child { border-bottom: 0; }

/* Your own row is marked by a gold edge as well as the word "you", so it does
   not rely on noticing a colour. */
.board__row.is-you {
  background: linear-gradient(90deg, #211d0d, var(--bg-panel) 60%);
  box-shadow: inset 3px 0 0 var(--gold);
}

.board__rank {
  grid-area: rank;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.board__name { grid-area: name; font-weight: 600; font-size: 0.94rem; }
.board__name em { font-style: normal; color: var(--gold); font-size: 0.66rem;
                  text-transform: uppercase; letter-spacing: 0.14em; margin-left: 6px; }

.board__meta { grid-area: meta; color: var(--text-muted); font-size: 0.7rem; }

.board__score {
  grid-area: score;
  font-size: 1.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

.board__empty,
.board__status {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
  margin: 14px 0 0;
  min-height: 1.2em;
}

.board__empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 30px 20px;
  margin: 0;
}

.ending-identity { margin: 0 auto 20px; max-width: 360px; }

.ending-identity__row {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.ending-identity__input { max-width: none; flex: 1; }

/* ----------------------------------------------------------- 8. helpers */
.placeholder {
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 46px 20px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------ 9. narrow screens, NFR */
/* FR-17 asks for the game to stay usable at 375 pixels wide. */
@media (max-width: 720px) {
  body { padding: 16px; }
  .table { gap: 18px; }
  .card { width: 100%; max-width: 320px; }
  .card__back { min-height: 300px; }
  .hud { gap: 22px; }
  .controls { flex-direction: column; align-items: center; }
  .button--guess { width: 100%; max-width: 320px; }
  .mode { width: 100%; max-width: 320px; }
  .mode--tab { width: auto; }
  .ending-actions { flex-direction: column; align-items: center; }
  .title-actions { flex-direction: column; }
  .ending-identity__row { flex-direction: column; }
  .ending-identity__row .button { width: 100%; }
  .board { max-width: 100%; }
}

/* -------------------------------------------------- 10. reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}