/* ---- Base layout (Unity WebGL template) ---- */
body { padding: 0; margin: 0; background: #05102b; }
#unity-container { position: absolute; }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%); }
#unity-container.unity-mobile { position: fixed; width: 100dvw; height: 100dvh; }
#unity-canvas { display: block; width: 100dvw; height: 100%; max-height: 100dvh; }
.unity-mobile #unity-canvas { width: 100%; height: 100%; }

/* ---- Brand tokens ---- */
:root{
    --rc-navy-top:#0b1f4d;
    --rc-navy-bot:#05102b;
    --rc-navy:#091a40;
    --rc-cyan:#8bdcef;
    --rc-red:#e6443b;
    --rc-text:#ffffff;
    --rc-text-dim:rgba(255,255,255,.66);
}

/* Canvas background = in-game splash */
#unity-canvas{
    background:
        radial-gradient(1200px 800px at 50% 38%, rgba(139,220,239,.12), rgba(5,16,43,0) 60%),
        linear-gradient(180deg, var(--rc-navy-top), var(--rc-navy-bot));
}

/* ---- Loading splash (panel-less) ---- */
#unity-loading{
    position:absolute; inset:0;
    display:none;                 /* shown via JS */
    flex-direction:column; align-items:center; justify-content:center;
    gap:22px; z-index:2;
    font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--rc-text);
    transition:opacity .4s ease;
    pointer-events:none;
}
#unity-loading.hide{ opacity:0; }

/* Revolver cylinder: static lit body + a spinning mechanism layer on top.
   Keeping the lighting static (only the chambers spin) reads as a real cylinder
   spin rather than the whole sprite rotating. */
.rc-cyl{ position:relative; width:116px; height:116px; filter:drop-shadow(0 0 14px rgba(139,220,239,.42)); }
.rc-cyl svg{ width:100%; height:100%; display:block; }
/* transform-box:fill-box makes the % origin resolve against the group's bounding
   box (its centre), so the spin is centred on older WebKit/Firefox too. */
.rc-cyl .rc-mech{ transform-box:fill-box; transform-origin:50% 50%; animation:rc-spin 4s cubic-bezier(.28,.5,.45,1) infinite; }

/* Title (only on-screen text) */
.rc-title{
    font-weight:800; font-size:26px; letter-spacing:.16em; text-transform:uppercase;
    color:#fff; text-shadow:0 0 16px rgba(139,220,239,.55), 0 2px 0 rgba(0,0,0,.35);
}

/* Progress bar */
.rc-bar{
    position:relative; width:min(300px,72vw); height:8px;
    border-radius:999px; overflow:hidden;
    background:rgba(255,255,255,.12);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
}
.rc-bar-fill{
    position:absolute; inset:0 auto 0 0; width:0%;
    border-radius:999px;
    background:linear-gradient(90deg, var(--rc-cyan), #ffffff);
    box-shadow:0 0 12px rgba(139,220,239,.6);
    transition:width .18s ease;
}

/* Readout: symbols/units only */
.rc-readout{
    display:flex; align-items:center; gap:10px;
    font-weight:600; font-size:13px; letter-spacing:.04em;
    color:var(--rc-text-dim); font-variant-numeric:tabular-nums;
}
.rc-pct{ color:#fff; }

/* Wordless reload (error only) */
.rc-reload{
    display:none; margin-top:2px;
    width:46px; height:46px; border-radius:50%;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(230,68,59,.16);
    color:#fff; cursor:pointer; pointer-events:auto;
    align-items:center; justify-content:center;
}
.rc-reload svg{ width:22px; height:22px; }

/* Error state: red glow, frozen spin, reveal reload */
#unity-loading.is-error{ pointer-events:auto; }
#unity-loading.is-error .rc-cyl{ filter:drop-shadow(0 0 16px rgba(230,68,59,.6)); }
#unity-loading.is-error .rc-cyl .rc-mech{ animation:none; }
#unity-loading.is-error .rc-bar-fill{ background:var(--rc-red); box-shadow:0 0 12px rgba(230,68,59,.6); }
#unity-loading.is-error .rc-readout{ display:none; }
#unity-loading.is-error .rc-reload{ display:flex; }

/* Warning banner (kept) */
/* Readable for any banner type: error/warning children set their own red/yellow
   background; other engine messages fall back to this light box (dark text). */
#unity-warning{ position:absolute; left:50%; top:8px; transform:translate(-50%); max-width:90vw; z-index:3; display:none; background:#fff; color:#10151f; padding:8px 12px; border-radius:6px; }

/* Spin that decelerates over most of the loop, then a short settle.
   720deg = 2 full turns, so each loop restarts seamlessly. */
@keyframes rc-spin{ 0%{transform:rotate(0deg)} 88%{transform:rotate(720deg)} 100%{transform:rotate(720deg)} }

@media (prefers-reduced-motion: reduce){
    .rc-cyl .rc-mech{ animation:none; }
}