/* Ragnarok WebGL — centered resizable game frame + a rounded footer "chrome" bar + light/dark toggle (default LIGHT/white).
   LOCAL TEST EDIT [Claude AI - Opus 4.8] (2026-07-06) in Build Web/ — port to WebGLTemplates/Ragnarok once approved.
   Drag the grip at the frame's bottom-right corner to resize the game resolution in real time. */

:root      { --page-bg: #ffffff; --page-fg: #24211e; --frame-border: #d0d4da; --bar-bg: #f4f6f8; }
body.dark  { --page-bg: #14100f; --page-fg: #d7cfc6; --frame-border: #3a322e; --bar-bg: #1c1714; }

html, body { padding: 0; margin: 0; width: 100%; }
body { min-height: 100vh; box-sizing: border-box; padding: 12px 0;
  background: var(--page-bg); color: var(--page-fg); font-family: arial, sans-serif;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  transition: background .15s ease; }

#unity-container { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#unity-container.unity-desktop { position: static; left: auto; top: auto; transform: none; }

/* Resizable game frame — drag the bottom-right corner grip; Unity re-syncs the render target so resolution updates live. */
#unity-frame { position: relative; width: 1024px; height: 720px;
  min-width: 480px; min-height: 270px; max-width: 98vw; max-height: 82vh;
  resize: both; overflow: hidden; box-sizing: border-box; border: 1px solid var(--frame-border);
  border-radius: 6px; background: #231F20; box-shadow: 0 4px 18px rgba(0,0,0,.18); }
#unity-canvas { width: 100%; height: 100%; display: block; background: #231F20; }

/* ---- MOBILE (Android / iPhone / iPad): the loader tags #unity-container ".unity-mobile". Drop the desktop resizable-frame
   chrome (frame border/resize/limits, footer bar, theme toggle) and MAXIMIZE the game to fill the whole screen — the
   original mobile behavior. Desktop/PC keeps the resizable frame + light/dark design above. ---- */
#unity-container.unity-mobile { position: fixed; inset: 0; left: 0; top: 0; width: 100vw; height: 100vh; gap: 0 }
.unity-mobile #unity-frame { width: 100% !important; height: 100% !important;
  min-width: 0; min-height: 0; max-width: none; max-height: none; resize: none; border: 0; border-radius: 0; box-shadow: none }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
.unity-mobile #game-footer-bar, .unity-mobile #theme-toggle { display: none }

#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -60%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }

/* Rounded footer "chrome" bar — holds the Unity logo, title, PC-Client/DB buttons, and the fullscreen button.
   Width defaults to the game frame width (1280) and is synced to it live by index.html as you resize the frame, so the
   bar spans the full width under the game (content spread left/right) instead of shrinking to fit. */
#game-footer-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  width: 1024px; max-width: 98vw; box-sizing: border-box;
  padding: 9px 20px; background: var(--bar-bg); border: 1px solid var(--frame-border); border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.10); }
.unity-mobile #game-footer-bar { display: none }
.fb-left, .fb-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }

#unity-webgl-logo { width: 116px; height: 26px; background: url('webgl-logo.png') no-repeat center / contain }
body.dark #unity-webgl-logo { filter: invert(1) brightness(1.7) contrast(.9) }
#unity-build-title { font-size: 15px; font-weight: 700; color: var(--page-fg); opacity: .85 }

.footer-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.footer-btn { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; cursor: pointer;
  padding: 8px 15px; border-radius: 9px; font-size: 13px; font-weight: 700; color: #fff; border: 0; line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.22); transition: transform .08s ease, box-shadow .15s ease, filter .15s ease }
.footer-btn:hover  { filter: brightness(1.08); box-shadow: 0 3px 9px rgba(0,0,0,.28) }
.footer-btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,.22) }
.footer-btn.pc { background: linear-gradient(180deg, #46a4ec, #1f6fc0) }
.footer-btn.db { background: linear-gradient(180deg, #eabb57, #c8912a); color: #3a2a05 }
.footer-btn .ico { font-size: 15px; line-height: 1 }

#unity-fullscreen-button { width: 36px; height: 36px; border-radius: 9px; cursor: pointer; border: 0;
  background: #2aa5d6 url('fullscreen-button.png') no-repeat center / 20px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.22); transition: filter .15s ease, transform .08s ease }
#unity-fullscreen-button:hover  { filter: brightness(1.1) }
#unity-fullscreen-button:active { transform: translateY(1px) }

/* Light/dark toggle button — sits in the footer bar, just before the fullscreen button. */
#theme-toggle { display: inline-flex; align-items: center; height: 36px; padding: 0 13px; box-sizing: border-box;
  cursor: pointer; user-select: none; border-radius: 9px; border: 1px solid var(--frame-border);
  font: 13px arial, sans-serif; background: #e9ecf0; color: #333; box-shadow: 0 1px 3px rgba(0,0,0,.15);
  transition: filter .15s ease }
#theme-toggle:hover { filter: brightness(.97) }
body.dark #theme-toggle { background: #2a2320; color: #eee }
body.dark #theme-toggle:hover { filter: brightness(1.15) }

#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: #2a2320; color: #fff; padding: 10px; display: none }