/* Game page, after WildOnes' frame in Dragon City's own look: the game
   sits in a sky-blue frame with its bar on top, and NgideIn Social's panel
   (Peringkat, Online, Chat, Teman) stands to its right; on narrow screens
   the panel goes below. */

.game-page {
  --frame-light: #43aef0;
  --frame: #1f74c4;
  --frame-dark: #0d3f7a;
  --ink: #0a2242;
  --gold: #ffd23c;
  --panel: #eef8ff;
  --panel-deep: #cfe7fa;
  --panel-text: #1d5590;
  --leaf: #5ec237;
  --leaf-dark: #2f8a14;
  --bar-h: 58px;
  --board-w: 320px;
  --gap: 18px;
  --frame-pad: 12px;
  /* The stage is 760x600 (19:15), 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) * 19 / 15)
  );
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, #0b4f94 0%, #1f86d1 48%, #6fd0f5 85%, #c8f0ff 100%);
}

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

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

.sky__sun {
  position: absolute;
  top: 6vh;
  left: 5vw;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fffbe0 0%, #ffe27a 55%, #ffb627 100%);
  box-shadow: 0 0 80px 22px rgba(255, 220, 120, 0.4);
  opacity: 0.9;
}

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

/* ---- The sky-blue 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:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
    linear-gradient(180deg, var(--frame-light) 0%, var(--frame) 45%, var(--frame-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: var(--gold);
  font: 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: #fff;
  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[hidden] { display: none; }

.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, #ffd65c 0%, #ff9a1f 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 #fff; outline-offset: 2px; }
.btn svg { width: 18px; height: 18px; }
.panel-toggle[aria-expanded="false"] { background: linear-gradient(180deg, #d9e8f5 0%, #9fbad3 100%); }

.game {
  width: var(--game-w);
  aspect-ratio: 19 / 15;
  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(--panel); 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 * 19 / 15)); height: auto; aspect-ratio: 19 / 15; }

/* Without the Fullscreen API (iPhone) the game fills the window instead. */
.game-exit { display: none; }
.game-filled, .game-filled body { overflow: hidden; }
.game-filled .game {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  width: 100vw; height: 100dvh; aspect-ratio: auto; border: 0; border-radius: 0; background: #000;
}
.game-filled .game ruffle-player { width: min(100vw, calc(100dvh * 19 / 15)); height: auto; aspect-ratio: 19 / 15; }
.game-filled .game-exit {
  position: fixed; z-index: 1001; display: grid; place-items: center;
  top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right));
  width: 40px; height: 40px; border: 2px solid var(--ink); border-radius: 10px;
  background: linear-gradient(180deg, #ff8a6a 0%, #d62828 100%); color: #fff; box-shadow: 0 3px 0 var(--ink);
}
.game-exit svg { width: 18px; height: 18px; }

/* The game sets the row's height; a long chat scrolls inside the panel
   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) * 19 / 15));
    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; height: 70vh; contain: none; }
  .sky__sun { 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 { display: none; }
}