/* Game page, after WildOnes' frame in Ninja Saga's own look: the game sits
   in a wooden frame with its bar on top, and the parchment board (Online,
   Chat, Teman) stands to its right; on narrow screens the board goes below. */

.game-page {
  --wood-light: #c98a43;
  --wood: #9a5a24;
  --wood-dark: #5e3110;
  --ink: #1e0f05;
  --gold: #f2c46b;
  --parchment: #f7e6bf;
  --parchment-deep: #ead09a;
  --leaf: #3fae3a;
  --leaf-dark: #1f6e1c;
  --bar-h: 58px;
  --board-w: 320px;
  --gap: 18px;
  --frame-pad: 12px;
  /* The game is 960x780: a 960x720 stage plus the friend bar it draws below
     (Data.GAME_HEIGTH_FULL), so 16:13, as large as the window allows. */
  --game-w: min(
    calc(100vw - var(--board-w) - var(--gap) - 2 * var(--frame-pad) - 40px),
    calc((100vh - var(--bar-h) - var(--frame-pad) - 44px) * 16 / 13)
  );
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, #0d0a1c 0%, #2b1534 48%, #6b2a2e 82%, #a8452a 100%);
}

.game-page.panel-hidden { --board-w: 0px; --gap: 0px; }
.panel-hidden .social { display: none; }

.sky { position: fixed; inset: 0; pointer-events: none; }

.sky__moon {
  position: absolute;
  top: 6vh;
  left: 5vw;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fff6dc 0%, #ffd98f 55%, #f0a24a 100%);
  box-shadow: 0 0 70px 18px rgba(255, 190, 110, 0.28);
  opacity: 0.9;
}

.layout {
  position: relative;
  display: flex;
  gap: var(--gap);
  align-items: stretch;
}

/* ---- The wooden frame ---- */

.frame {
  width: calc(var(--game-w) + 2 * var(--frame-pad));
  padding: 0 var(--frame-pad) var(--frame-pad);
  border: 3px solid var(--ink);
  border-radius: 18px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 45%, var(--wood-dark) 100%);
  box-shadow: 0 0 0 2px var(--gold) inset, 0 18px 50px rgba(0, 0, 0, 0.6);
}

.bar {
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo {
  margin-right: 4px;
  color: #fff3cf;
  font: italic 900 30px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--ink);
}

.bar-player {
  margin-left: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff3cf;
  font-weight: 800;
  text-shadow: 0 2px 0 var(--ink);
}

#player { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-player .avatar { border: 2px solid var(--ink); }

.btn {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 11px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffcf6a 0%, #f39a1f 100%);
  color: var(--ink);
  font: 800 13px system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
}

.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn:focus-visible { outline: 3px solid #fff3cf; outline-offset: 2px; }
.btn svg { width: 18px; height: 18px; }
.btn .tab-badge { position: absolute; top: -7px; right: -6px; }
.panel-toggle[aria-expanded="false"] { background: linear-gradient(180deg, #e6d3b0 0%, #bba27a 100%); }

.game {
  width: var(--game-w);
  aspect-ratio: 16 / 13;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: #000;
}

.game ruffle-player { display: block; width: 100%; height: 100%; }
.status { color: var(--parchment); font-weight: 600; }

.game:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border: 0; border-radius: 0; }
.game:fullscreen ruffle-player { width: min(100vw, calc(100vh * 16 / 13)); height: auto; aspect-ratio: 16 / 13; }

/* The game sets the row's height; a long chat scrolls inside the board
   instead of stretching the page. */
.layout > .social { width: var(--board-w); contain: size; }

/* Narrower: the less used buttons keep only their icon so the bar fits. */
@media (max-width: 1400px) {
  .bar a.btn span, #fullscreen span, #sign-out span { display: none; }
}

@media (max-width: 1000px) {
  .game-page {
    --board-w: 0px;
    --gap: 0px;
    --game-w: min(calc(100vw - 2 * var(--frame-pad) - 20px), calc((100vh - var(--bar-h) - 40px) * 16 / 13));
    align-items: flex-start;
    overflow: auto;
    padding: 10px 0 20px;
  }
  .layout { flex-direction: column; gap: 14px; align-items: center; }
  .layout > .social { width: calc(var(--game-w) + 2 * var(--frame-pad)); max-width: 640px; contain: none; }
  .chat-log { min-height: 220px; max-height: 50vh; }
  .sky__moon { width: 90px; }
}

@media (max-width: 640px) {
  .game-page { --bar-h: 50px; --frame-pad: 8px; }
  .logo { font-size: 21px; -webkit-text-stroke-width: 4px; text-shadow: 0 2px 0 var(--ink); }
  .bar-player { display: none; }
  .bar-player + .btn { margin-left: auto; }
  .btn { padding: 0 8px; height: 34px; }
  .btn span:not(.tab-badge) { display: none; }
}