/*
  RONIN WebGL player styling.

  Palette follows the agreed art direction - ink, vermilion, rice gold - so the loading screen and
  the game read as the same product. Kept in step with Docs/ArtDirection rather than invented here.
*/

@font-face {
  font-family: "Ronin Cinzel";
  src: url("Cinzel-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ronin-ink: #14110f;
  --ronin-ink-soft: #241f1b;
  --ronin-vermilion: #c8452c;
  --ronin-gold: #d8a444;
  --ronin-rice: #efe6d6;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* No scrollbars and no rubber-banding: the canvas *is* the page. */
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--ronin-ink);
  color: var(--ronin-rice);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

#ronin-root { position: fixed; inset: 0; user-select: none; }

/* The whole point of this template: fill the viewport, at any size, on any device. */
#unity-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ronin-ink);
  outline: none;
  touch-action: none;
}

/* ---------- loading screen ---------- */

#ronin-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, rgba(5,16,18,.92), rgba(5,16,18,.62)), url("menu-background.png") center / cover;
  transition: opacity 400ms ease;
  z-index: 20;
}

#ronin-loading[hidden] { display: none; }
#ronin-loading.ronin-loaded { opacity: 0; pointer-events: none; }

.ronin-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Keeps the wordmark clear of the edges on a narrow phone. */
  padding: 0 24px;
  max-width: 100%;
}

.ronin-wordmark {
  font-family: "Ronin Cinzel", Georgia, serif;
  font-size: clamp(38px, 8vw, 82px);
  letter-spacing: 0.42em;
  /* letter-spacing pads the right edge; pull it back so the mark looks centred */
  margin-right: -0.42em;
  text-transform: uppercase;
  color: var(--ronin-rice);
  text-wrap: balance;
}

.ronin-rule {
  width: clamp(120px, 30vw, 220px);
  height: 1px;
  margin: 20px 0 26px;
  background: linear-gradient(90deg, transparent, var(--ronin-gold), transparent);
}

.ronin-bar {
  width: clamp(180px, 46vw, 320px);
  height: 3px;
  border-radius: 2px;
  background: rgba(239, 230, 214, 0.14);
  overflow: hidden;
}

#ronin-bar-fill {
  width: 0;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ronin-vermilion), var(--ronin-gold));
  transition: width 180ms ease-out;
}

#ronin-loading-note {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(239, 230, 214, 0.85);
  font-variant-numeric: tabular-nums;
}

.ronin-loading-eyebrow { color: #d2b175; font: 700 12px "Ronin Cinzel", Georgia, serif; letter-spacing: .24em; margin-bottom: 24px; }
.ronin-loading-tip { color: #babfaf; font: 18px/1.6 Georgia, serif; text-align: center; margin-top: 42px; }
#ronin-retry { margin-top: 16px; padding: 12px 30px; border: 1px solid #b49b69; background: #172623; color: #efe5cf; font: 700 15px "Ronin Cinzel", Georgia, serif; cursor: pointer; }
#ronin-retry:hover, #ronin-retry:focus-visible { outline: 2px solid #d2b175; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { #ronin-loading, #ronin-bar-fill { transition: none; } }

/* ---------- warning / error banner ---------- */

#unity-warning {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Must never eat a click meant for the game. */
  pointer-events: none;
  max-width: min(560px, calc(100% - 24px));
}

.ronin-banner {
  padding: 9px 14px;
  border-radius: 4px;
  border-left: 3px solid var(--ronin-gold);
  background: rgba(20, 17, 15, 0.92);
  color: var(--ronin-rice);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  word-break: break-word;
}

.ronin-banner-error { border-left-color: var(--ronin-vermilion); }

/* ---------- footer ---------- */

/*
  Top-centre, and the reasons are worth keeping.

  The RTS HUD owns all four corners: resource panel top-left, pause/speed top-right, command grid
  bottom-left, portrait bottom-centre, minimap bottom-right. Both earlier placements collided -
  top-right landed on the pause widget, bottom-right on the minimap. The minimap one was the worse
  of the two, because it is click-to-move-camera: the mouse movement that reaches that corner is the
  same movement that reveals this control, so it was guaranteed to swallow the click rather than
  occasionally.

  The HUD scales proportionally with the viewport (measured at 1600/1280/1000/820 px wide - the
  resource panel always ends near 33% and the pause widget starts near 95%), so the band between them
  is empty at every size. Centre is inside it comfortably. Attribution is dropped below 560px, which
  only shrinks what has to fit there.

  Hidden by default and revealed by script on pointer movement (see index.html). Opacity rather than
  display, so the control stays in the tab order and :focus-within can bring it back for keyboard
  users who never move a mouse. z-index sits above #unity-warning, which is pointer-events:none, so a
  banner can never cover or block the button.
*/
#ronin-footer {
  position: absolute;
  top: 12px;
  /* Stay just left of the centered resource bar at the canvas' Expand scale. */
  right: calc(50% + min(16.65vw, 29.6vh) + 12px);
  left: auto;
  transform: none;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}

#ronin-footer.ronin-visible,
#ronin-footer:focus-within {
  opacity: 1;
  pointer-events: auto;
}

#ronin-fullscreen {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(239, 230, 214, 0.28);
  border-radius: 4px;
  background: rgba(20, 17, 15, 0.72);
  color: var(--ronin-rice);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

#ronin-fullscreen:hover { border-color: var(--ronin-gold); color: var(--ronin-gold); }

#ronin-attribution {
  display: none;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(239, 230, 214, 0.7);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

#ronin-loading:not([hidden]) ~ #ronin-footer #ronin-attribution { display: inline; }

/* Attribution is the first thing to go when space is tight. */
@media (max-width: 560px) {
  #ronin-attribution { display: none; }
}