/* ==========================================================================
   Runtime Lightmap Baker — WebGL demo player
   Dark-theme only. All colour goes through the tokens below.
   ========================================================================== */

:root{
  color-scheme: dark;

  --bg-0:#0B0D0E; --bg-1:#121618; --bg-2:#171C1F; --panel:#1A1F22;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --text:#F2F5F4; --text-dim:#9AA5A4; --text-faint:#858F8D;
  --green:#45C64A; --green-bright:#5CE05F; --green-deep:#2E8A31;
  --amber:#FF8A1F; --amber-deep:#C96A12;
  --radius:14px; --maxw:1180px;

  /* player-local tokens */
  --danger:#FF5B5B;
  --danger-deep:#7A2020;
  --ribbon-h:58px;
  --font-display:'Anton','Arial Narrow',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}

body{
  /* Column layout: the stage takes whatever height is left after the ribbon,
     so the canvas ENDS where the bar begins instead of running underneath it.
     No magic numbers - the ribbon can change height per breakpoint freely. */
  display:flex;
  flex-direction:column;
  height:100vh;
  height:var(--app-h,100vh);
  background:var(--bg-0);
  color:var(--text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}

@supports (height:100svh){
  body{ height:100svh; }
}

a{ color:var(--green); }

:focus-visible{
  outline:2px solid var(--green-bright);
  outline-offset:2px;
}

/* --------------------------------------------------------------------------
   Stage / canvas — genuinely fullscreen
   -------------------------------------------------------------------------- */

.stage{
  position:relative;            /* containing block for the canvas + overlay */
  flex:1 1 auto;
  min-height:0;                 /* let it shrink below content size          */
  width:100%;
  background:var(--bg-0);
  z-index:0;
}

.stage__canvas{
  display:block;
  position:absolute;            /* definite box, so Unity's drawing buffer
                                   always matches the stage exactly          */
  inset:0;
  width:100%;
  height:100%;
  background:var(--bg-0);
  touch-action:none;
}
/* The canvas is keyboard-focusable (tabindex=0) so a keyboard user can get back
   into the game after tabbing to the ribbon. Ring only for keyboard focus, not
   for the click that starts play. */
.stage__canvas:focus{ outline:none; }
.stage__canvas:focus-visible{ outline:2px solid var(--green-bright); outline-offset:-2px; }

/* --------------------------------------------------------------------------
   Loading overlay
   -------------------------------------------------------------------------- */

.loading{
  position:absolute;            /* inside .stage, so the ribbon stays visible
                                   during the multi-minute first download     */
  inset:0;
  z-index:40;
  display:flex;
  /* Centre via auto margins on the card rather than align-items, so that when
     the card is taller than the viewport (400% zoom / short landscape phones)
     it top-aligns and scrolls instead of being clipped at both ends. */
  align-items:flex-start;
  justify-content:flex-start;
  overflow:auto;
  padding:24px;
  background:
    linear-gradient(180deg,var(--bg-0) 0%,var(--bg-1) 48%,var(--bg-0) 100%);
  opacity:1;
  transition:opacity .45s ease;
}

.loading__glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(58vw 46vh at 26% 24%, rgba(69,198,74,.12), transparent 70%),
    radial-gradient(52vw 42vh at 82% 82%, rgba(255,138,31,.07), transparent 72%);
}

.loading.is-hidden{ opacity:0; pointer-events:none; }

.load-card{
  position:relative;
  margin:auto;               /* optically centred when it fits, scrollable when it does not */
  width:min(520px,100%);
  padding:34px 34px 30px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.55);

  /* diagonal motif — bottom-right corner cut */
  --cut:38px;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}

/* the green hairline that sits exactly on the diagonal cut */
.load-card::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:calc(var(--cut) * 1.4142);
  height:1px;
  background:linear-gradient(90deg,var(--green-deep),var(--green-bright));
  box-shadow:0 0 12px rgba(92,224,95,.55);
  transform:translate(calc(var(--cut) * .2071), calc(var(--cut) * -.5)) rotate(-45deg);
  pointer-events:none;
}

.load-card__icon{
  display:block;
  width:104px;
  height:104px;
  margin:0 auto 18px;
  border-radius:22px;
  border:1px solid var(--line-strong);
}

.load-card__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(26px,5.2vw,36px);
  line-height:1.05;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.load-card__kicker{
  margin:8px 0 0;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--text-faint);
}
.load-card__kicker::after{
  content:"";
  display:block;
  width:44px;
  height:2px;
  margin:12px auto 0;
  background:var(--amber);
  opacity:.8;
}

.progress{
  position:relative;
  height:6px;
  margin:26px 0 12px;
  border-radius:99px;
  background:var(--line);
  overflow:hidden;
}

.progress__fill{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  border-radius:99px;
  background:linear-gradient(90deg,var(--green-deep),var(--green));
  box-shadow:0 0 14px rgba(69,198,74,.5);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.progress__fill::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-100%);
  animation:rlb-sheen 1.9s ease-in-out infinite;
}
@keyframes rlb-sheen{
  0%   { transform:translateX(-100%); }
  60%  { transform:translateX(100%); }
  100% { transform:translateX(100%); }
}

.load-card__pct{
  margin:0;
  font-size:13px;
  font-weight:600;
  color:var(--text-dim);
  font-variant-numeric:tabular-nums;
}
.load-card__pct #progress-pct{ color:var(--text); }
.load-card__pct-label{ color:var(--text-faint); font-weight:500; }

.load-card__note{
  margin:16px 0 0;
  font-size:12.5px;
  line-height:1.55;
  color:var(--text-faint);
}

/* failed state */
.loading.is-failed .progress__fill{
  background:linear-gradient(90deg,var(--danger-deep),var(--danger));
  box-shadow:none;
}
.loading.is-failed .progress__fill::after{ animation:none; opacity:0; }
.loading.is-failed .load-card__note{ color:var(--text-dim); }

/* --------------------------------------------------------------------------
   Banners (errors / warnings)
   -------------------------------------------------------------------------- */

.banners{
  position:fixed;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:60;
  width:min(680px,calc(100vw - 24px));
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}

.banner{
  pointer-events:auto;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:11px 12px 11px 14px;
  border-radius:10px;
  border:1px solid var(--line-strong);
  background:var(--bg-2);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  font-size:13.5px;
  opacity:1;
  transform:translateY(0);
  transition:opacity .22s ease, transform .22s ease;
}
.banner.is-out{ opacity:0; transform:translateY(-8px); }

.banner--error{
  border-color:rgba(255,91,91,.45);
  background:linear-gradient(180deg,rgba(122,32,32,.35),rgba(23,28,31,.96));
}
.banner--warning{
  border-color:rgba(255,138,31,.42);
  background:linear-gradient(180deg,rgba(201,106,18,.28),rgba(23,28,31,.96));
}

.banner__dot{
  flex:0 0 auto;
  width:8px; height:8px;
  margin-top:6px;
  border-radius:50%;
}
.banner--error   .banner__dot{ background:var(--danger); box-shadow:0 0 10px rgba(255,91,91,.7); }
.banner--warning .banner__dot{ background:var(--amber);  box-shadow:0 0 10px rgba(255,138,31,.6); }

.banner__text{
  margin:0;
  flex:1 1 auto;
  color:var(--text);
  word-break:break-word;
}

.banner__actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
}

.banner__action{
  font:inherit;
  font-weight:600;
  font-size:12.5px;
  color:var(--text);
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:8px;
  padding:5px 10px;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.banner__action:hover{ color:var(--green-bright); border-color:var(--green-deep); background:rgba(69,198,74,.08); }

.banner__close{
  font:inherit;
  line-height:1;
  font-size:18px;
  color:var(--text-faint);
  background:transparent;
  border:0;
  border-radius:8px;
  padding:2px 7px 4px;
  cursor:pointer;
  transition:color .15s ease;
}
.banner__close:hover{ color:var(--text); }

/* --------------------------------------------------------------------------
   CTA ribbon
   -------------------------------------------------------------------------- */

.ribbon{
  position:relative;            /* in flow: it no longer covers the canvas */
  flex:0 0 auto;
  z-index:20;
  min-height:var(--ribbon-h);
  display:flex;
  align-items:center;
  gap:14px;
  padding:9px 14px;
  padding-right:max(14px, env(safe-area-inset-right));
  padding-left:max(14px, env(safe-area-inset-left));
  padding-bottom:calc(9px + env(safe-area-inset-bottom));
  /* No backdrop-filter here: the ribbon's backdrop is the live WebGL canvas,
     which repaints every frame, so a blur would re-run per frame for the whole
     session. An opaque gradient is visually identical over a dark scene. */
  background:linear-gradient(180deg,rgba(11,13,14,.93),var(--bg-0));
  border-top:1px solid var(--line);
}

/* diagonal motif — a skewed green hairline riding the ribbon's top edge */
.ribbon::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:180px;
  height:1px;
  background:linear-gradient(90deg,var(--green-bright),rgba(69,198,74,0));
  transform:skewX(-38deg);
  transform-origin:left center;
  pointer-events:none;
}

.ribbon__mark{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  text-decoration:none;
  color:var(--text);
  padding:4px 6px;
  margin:-4px -6px;
  border-radius:10px;
  transition:color .15s ease, background .15s ease;
}
.ribbon__mark:hover{ color:var(--green-bright); background:rgba(255,255,255,.04); }

.ribbon__mark img{
  display:block;
  width:30px; height:30px;
  border-radius:8px;
  border:1px solid var(--line);
  flex:0 0 auto;
}

.ribbon__mark-text{
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ribbon__sep{
  flex:1 1 auto;
}

.ribbon__actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

/* buttons ------------------------------------------------------------------ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:38px;
  padding:0 16px;
  border-radius:10px;
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, color .15s ease,
             border-color .15s ease, box-shadow .15s ease;
}

.btn--primary{
  background:var(--green);
  color:var(--bg-0);
  box-shadow:0 6px 20px rgba(69,198,74,.28);
}
.btn--primary:hover{
  background:var(--green-bright);
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(92,224,95,.36);
}

.btn--ghost{
  background:transparent;
  color:var(--text-dim);
  border-color:var(--line-strong);
}
.btn--ghost:hover{
  color:var(--text);
  border-color:var(--green-deep);
  background:rgba(69,198,74,.08);
}
.btn--ghost[disabled]{
  opacity:.4;
  cursor:not-allowed;
  transform:none;
  color:var(--text-faint);
  border-color:var(--line);
  background:transparent;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width:960px){
  .ribbon__mark-text{ font-size:12.5px; }
  .btn{ padding:0 13px; }
}

/* Under 720px: essentials only — mark + primary button, single row, no wrap */
@media (max-width:720px){
  :root{ --ribbon-h:52px; }
  .ribbon{ gap:10px; }
  .ribbon__mark-text,
  .btn--back,
  #btn-fullscreen,
  .btn__long{ display:none; }
  .ribbon__actions{ margin-left:auto; }
  .btn{ height:36px; padding:0 14px; }
}

@media (max-width:400px){
  .load-card{ padding:26px 20px 24px; --cut:30px; }
  .load-card__icon{ width:84px; height:84px; border-radius:18px; }
}

@media (max-height:520px){
  .load-card{ padding:22px 24px 20px; }
  .load-card__icon{ width:64px; height:64px; margin-bottom:12px; border-radius:14px; }
  .load-card__note{ display:none; }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .progress__fill::after{ display:none; }
  .btn:hover{ transform:none; }
  .banner.is-out{ transform:none; }
}