/* =========================================================================
   Joust — DOM overlay stylesheet
   "Medieval Ghibli": parchment, ochre, banner red & deep blue, soft gold.
   Scoped entirely to #stage / #hud / .screen / #countdown / #toast and their
   documented children. No bare body/a/h1/button rules — see global.css.
   ========================================================================= */

:root {
  /* palette */
  --jt-parchment:       #f5ead0;
  --jt-parchment-dark:  #e7d4a3;
  --jt-parchment-deep:  #d8c28c;
  --jt-ink:             #3f2a18;   /* warm dark brown, never pure black */
  --jt-ink-soft:        #6b4a2c;
  --jt-ochre:           #c98a2e;
  --jt-ochre-deep:      #96601c;
  --jt-gold:            #caa23e;
  --jt-gold-deep:       #93691a;
  --jt-meadow:          #7c8f5a;
  --jt-meadow-deep:     #57692f;
  --jt-red:             #9c3b3a;
  --jt-red-deep:        #742c2b;
  --jt-blue:            #34506b;
  --jt-blue-deep:       #24384c;
  --jt-shadow:          rgba(40, 26, 12, .45);

  --jt-font-display: 'Crimson Pro', Georgia, serif;
  --jt-font-body:    'Gentium Book Basic', Georgia, serif;

  /* Flat art direction: one ink hairline in place of bevels, and nothing
     that pretends to float. --jt-lift stays a valid (transparent) shadow
     rather than `none`, because `none` is illegal inside a shadow list. */
  --jt-deckle: 0 0 0 1px rgba(63, 42, 24, .26);
  --jt-lift:   0 0 0 0 rgba(0, 0, 0, 0);
}

/* Whatever specificity a later rule gives an element, [hidden] always wins. */
[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------- *
 * Stage — full-bleed canvas, sits behind every overlay
 * ---------------------------------------------------------------------- */

#stage {
  position: fixed;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
  z-index: 0;
  /* Flat meadow, matching the canvas — only ever seen as letterboxing. */
  background: #93b167;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------------- *
 * HUD — persistent scoreboard banner
 * ---------------------------------------------------------------------- */

#hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px)
           max(16px, env(safe-area-inset-right, 0px))
           10px
           max(16px, env(safe-area-inset-left, 0px));
  font-family: var(--jt-font-body);
  color: var(--jt-parchment);
  background: linear-gradient(180deg, rgba(63, 42, 24, .82), rgba(63, 42, 24, .58) 70%, transparent);
  -webkit-tap-highlight-color: transparent;
}

#hud .tally {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.1;
}

#hud .tally.foe {
  align-items: flex-end;
  text-align: right;
}

#hud .who {
  font-size: clamp(.72rem, 3vw, .85rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--jt-parchment-dark);
  opacity: .9;
}

#hud .pts {
  font-family: var(--jt-font-display);
  font-size: clamp(1.3rem, 6vw, 1.7rem);
  font-weight: 700;
  color: var(--jt-gold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

#hud .tally.foe .pts {
  color: #e2a5a0;
}

#hud .bout {
  font-family: var(--jt-font-display);
  font-size: clamp(.75rem, 3vw, .95rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--jt-parchment-dark);
  white-space: nowrap;
  padding: 3px 10px;
  border: 1px solid rgba(245, 234, 208, .3);
  border-radius: 999px;
}

/* ---------------------------------------------------------------------- *
 * Screens — full-viewport, centred, modal overlays over the canvas
 * ---------------------------------------------------------------------- */

.screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top, 0px) + 64px)
           max(20px, env(safe-area-inset-right, 0px))
           calc(env(safe-area-inset-bottom, 0px) + 28px)
           max(20px, env(safe-area-inset-left, 0px));
  text-align: center;
  font-family: var(--jt-font-body);
  color: var(--jt-ink);
  /* One flat parchment wash. The scene behind it is the nice part; a
     modal screen only has to be legible, not decorated. */
  background: rgba(245, 234, 208, .94);
  animation: jt-fade-rise .5s cubic-bezier(.22, .61, .36, 1) both;
}

/* Bare variant (charge screen) must pass touches straight through to the
   canvas — the player drags on it to aim — while its own text stays put. */
.screen.bare {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
  touch-action: none;
  justify-content: flex-start;
  padding-top: calc(env(safe-area-inset-top, 0px) + 18dvh);
}

/* The shield is placed by touching the field itself, so this screen must
   neither veil the canvas nor swallow the drag — only its own controls take
   touches, and they keep clear of the middle where the aiming happens. */
#screen-aim {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
  justify-content: flex-end;
}

#screen-aim > * { pointer-events: auto; }
#screen-aim .flavour { margin-bottom: auto; }

@keyframes jt-fade-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.screen .flavour {
  max-width: 32ch;
  font-size: clamp(1rem, 4vw, 1.15rem);
  line-height: 1.4;
  color: var(--jt-ink-soft);
  font-style: italic;
}

/* Buttons — carved wood / wax-sealed banner ------------------------------ */

.screen .big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  min-width: 48px;
  padding: 14px 30px;
  font-family: var(--jt-font-display);
  font-size: clamp(1.05rem, 4.4vw, 1.3rem);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--jt-parchment);
  background: var(--jt-red);
  border: 1px solid var(--jt-red-deep);
  border-radius: 12px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, opacity .15s ease;
}

.screen .big:active {
  background: var(--jt-red-deep);
}

.screen .big:disabled {
  opacity: .55;
  filter: grayscale(.4);
  cursor: default;
  transform: none;
}

.screen .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 18px;
  background: transparent;
  border: 1px solid var(--jt-ink-soft);
  border-radius: 10px;
  color: var(--jt-ink-soft);
  font-family: var(--jt-font-body);
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, color .15s ease;
}

.screen .ghost:active {
  background: rgba(63, 42, 24, .1);
}

/* ---------------------------------------------------------------------- *
 * #screen-gate — title / create / join
 * ---------------------------------------------------------------------- */

#screen-gate h1 {
  margin: 0;
  font-family: var(--jt-font-display);
  font-size: clamp(2.4rem, 13vw, 3.6rem);
  font-weight: 700;
  color: var(--jt-ink);
  text-shadow: 0 2px 0 rgba(255, 255, 255, .4), 0 1px 12px rgba(201, 138, 46, .35);
}

#screen-gate .or {
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--jt-ink-soft);
  opacity: .7;
}

#join-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(88vw, 360px);
}

#code-input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  font-family: var(--jt-font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
  color: var(--jt-ink);
  background: rgba(255, 250, 235, .8);
  border: 1px solid var(--jt-parchment-deep);
  border-radius: 12px;
  box-shadow: var(--jt-deckle);
  -webkit-user-select: text;
  user-select: text;
  -webkit-tap-highlight-color: transparent;
}

#code-input::placeholder {
  color: var(--jt-ink-soft);
  opacity: .45;
}

#code-input:focus {
  outline: none;
  border-color: var(--jt-ochre);
  box-shadow: var(--jt-deckle), 0 0 0 3px rgba(201, 138, 46, .25);
}

#screen-gate .err {
  max-width: 30ch;
  font-size: .9rem;
  color: var(--jt-red-deep);
  font-style: italic;
}

/* ---------------------------------------------------------------------- *
 * #screen-lobby — the match code, roster, ready-up
 * ---------------------------------------------------------------------- */

#screen-lobby .code {
  font-family: var(--jt-font-display);
  font-size: clamp(2.1rem, 11vw, 3.1rem);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--jt-gold-deep);
  padding: 16px 26px;
  border-radius: 12px;
  background: var(--jt-parchment-dark);
  box-shadow: var(--jt-deckle);
}

#screen-lobby .roster {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(84vw, 320px);
}

#screen-lobby .roster li {
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255, 250, 235, .55);
  border: 1px solid rgba(107, 74, 44, .2);
  font-size: 1rem;
}

#screen-lobby .roster li.me {
  font-weight: 700;
  color: var(--jt-ink);
  background: rgba(124, 143, 90, .2);
  border-color: var(--jt-meadow-deep);
}

#screen-lobby .roster li.waiting {
  font-style: italic;
  color: var(--jt-ink-soft);
  opacity: .75;
  animation: jt-breathe 2.6s ease-in-out infinite;
}

@keyframes jt-breathe {
  0%, 100% { opacity: .55; }
  50%      { opacity: .95; }
}

/* ---------------------------------------------------------------------- *
 * #screen-aim — secret shield placement
 * ---------------------------------------------------------------------- */

#screen-aim .wait {
  font-size: .95rem;
  font-style: italic;
  color: var(--jt-ink-soft);
  animation: jt-breathe 2.6s ease-in-out infinite;
}

/* ---------------------------------------------------------------------- *
 * #screen-charge — pass-through aiming overlay
 * ---------------------------------------------------------------------- */

#screen-charge .prompt {
  margin: 0;
  padding: 10px 20px;
  border-radius: 999px;
  font-family: var(--jt-font-display);
  font-size: clamp(1.1rem, 5vw, 1.4rem);
  letter-spacing: .04em;
  color: var(--jt-parchment);
  background: rgba(63, 42, 24, .62);
  animation: jt-prompt-fade 3.2s ease-out both;
}

@keyframes jt-prompt-fade {
  0%   { opacity: 0; transform: translateY(8px); }
  15%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------------------------------------------------------------------- *
 * #screen-result — bout verdict
 * ---------------------------------------------------------------------- */

/* The frozen clash is the whole payoff of the bout — don't paint over it.
   The verdict sits in a scrim at the foot of the screen, and the top of the
   frame stays clear so the player can see where their lance actually went. */
#screen-result {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  justify-content: flex-end;
  background: linear-gradient(to bottom,
    rgba(245, 234, 208, 0) 0%,
    rgba(245, 234, 208, 0) 34%,
    rgba(245, 234, 208, .82) 56%,
    rgba(240, 226, 193, .96) 78%,
    rgba(236, 220, 183, .98) 100%);
}

#screen-result .verdict {
  font-family: var(--jt-font-display);
  font-size: clamp(1.7rem, 8vw, 2.4rem);
  font-weight: 700;
  color: var(--jt-red-deep);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}

#screen-result .tale {
  max-width: 30ch;
  font-size: clamp(1rem, 4vw, 1.1rem);
  font-style: italic;
  color: var(--jt-ink-soft);
}

#screen-result .points {
  display: flex;
  gap: 14px;
  margin-top: 4px;
}

#screen-result .pt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 96px;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(255, 250, 235, .7);
  box-shadow: var(--jt-deckle);
}

#screen-result .pt span {
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jt-ink-soft);
}

#screen-result .pt b {
  font-family: var(--jt-font-display);
  font-size: clamp(1.4rem, 6vw, 1.8rem);
}

#screen-result .pt.you b {
  color: var(--jt-meadow-deep);
}

#screen-result .pt.foe b {
  color: var(--jt-red-deep);
}

/* ---------------------------------------------------------------------- *
 * #countdown — huge pulsing tick number
 * ---------------------------------------------------------------------- */

#countdown {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: var(--jt-font-display);
  font-weight: 700;
  font-size: clamp(6rem, 32vw, 11rem);
  color: var(--jt-parchment);
  color: var(--jt-cream, #faf4e2);
  text-shadow: 0 2px 0 rgba(74, 55, 40, .45);
}

#countdown:not([hidden]) {
  animation: jt-countdown-pulse 1s ease-out infinite;
}

@keyframes jt-countdown-pulse {
  0%   { transform: scale(.6); opacity: 0; }
  30%  { transform: scale(1.15); opacity: 1; }
  55%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* ---------------------------------------------------------------------- *
 * #toast — small transient message
 * ---------------------------------------------------------------------- */

#toast {
  position: fixed;
  left: 50%;
  bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 20px));
  z-index: 40;
  max-width: min(84vw, 380px);
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(63, 42, 24, .9);
  color: var(--jt-parchment);
  font-family: var(--jt-font-body);
  font-size: .95rem;
  text-align: center;
  pointer-events: none;
  transform: translateX(-50%);
}

#toast:not([hidden]) {
  animation: jt-toast-in .25s ease-out both;
}

@keyframes jt-toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------------------------------------------------------------------- *
 * Landscape — keep everything reachable on a sideways phone
 * ---------------------------------------------------------------------- */

@media (orientation: landscape) and (max-height: 560px) {
  #hud {
    padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
    padding-bottom: 6px;
  }

  .screen {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 44px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  }

  #screen-gate h1 {
    width: 100%;
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }

  #screen-lobby .code {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    padding: 12px 18px;
  }

  #screen-result .verdict {
    width: 100%;
    font-size: clamp(1.4rem, 5vw, 1.8rem);
  }

  .screen .big {
    min-height: 48px;
    padding: 10px 22px;
    font-size: 1rem;
  }

  #screen-charge .prompt {
    font-size: 1.05rem;
  }

  #countdown {
    font-size: clamp(4.5rem, 22vh, 8rem);
  }
}

/* ---------------------------------------------------------------------- *
 * Reduced motion — keep state changes, drop the automatic motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .screen,
  #screen-charge .prompt,
  #countdown:not([hidden]),
  #toast:not([hidden]),
  #screen-lobby .roster li.waiting,
  #screen-aim .wait {
    animation: none !important;
  }

  .screen .big,
  .screen .ghost {
    transition: none !important;
  }
}