/* ==========================================================================
   CubRawl · Pause, game over, reward & loading screens
   ========================================================================== */

/* ---- game over / pause ---- */
.over-title{margin:0 0 4px;font:700 20px/1.3 var(--font-ui);color:var(--ink)}
.over-title::before{content:'// ';color:var(--magenta);font-family:var(--font-mono);font-weight:500}
.final-cube{
  width:104px;height:104px;margin:16px auto 10px;font-size:34px;border-radius:5px;
  box-shadow:
    inset 0 -8px 0 color-mix(in srgb,var(--c) 48%,#04060f),
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 0 34px color-mix(in srgb,var(--c) 40%,transparent);
}
.final-cube[data-len="3"]{font-size:30px}
.final-cube[data-len="4"]{font-size:25px}
.final-cube[data-len="5"]{font-size:21px}
.final-label{margin:0;font:500 12px/1 var(--font-ui);color:var(--ink-soft)}
.pause-note{margin:6px 0 18px}
.record{
  display:inline-block;margin:12px 0 0;padding:6px 12px;border-radius:2px;
  background:linear-gradient(180deg,#ffd76a,var(--amber));color:#211400;
  font:800 11.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 0 22px rgba(255,176,32,.45);
}
.over-board{margin:5px 0 0;font:700 14px/1.3 var(--font-ui);color:var(--amber)}
.stats{margin:18px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stats div{
  padding:12px 10px;border-radius:2px;background:rgba(0,234,255,.04);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:7px;
}
.stats dt{font:500 10.5px/1.2 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.stats dd{margin:0;font:400 20px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--cyan-soft)}
.stats .cube{width:40px;height:40px;font-size:14px}
.btns{display:grid;gap:10px}
.small-card{width:min(360px,100%)}

/* ---- coin reward box ---- */
.reward{
  margin:14px auto 4px;max-width:380px;border-radius:2px;padding:12px 16px;text-align:left;
  background:linear-gradient(180deg,rgba(255,176,32,.12),rgba(255,176,32,.04));
  border:1px solid var(--line-amber);box-shadow:inset 0 0 26px rgba(255,176,32,.08);
}
.r-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font:600 13px/1.2 var(--font-ui);color:var(--ink-soft)}
.r-total{display:inline-flex;align-items:center;gap:6px;font:400 23px/1 var(--font-mono);color:var(--amber);text-shadow:0 0 14px rgba(255,176,32,.4)}
.r-total .coin{width:24px;height:24px}
.r-lines{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font:500 12px/1.2 var(--font-mono);color:var(--amber)}
.r-lines:empty{display:none}
.coin-burst{animation:coinBurst .6s ease}
@keyframes coinBurst{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}

/* ---- loading ---- */
#loading{background:var(--void);color:var(--ink)}
#loading::before{
  content:'';position:fixed;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,234,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,234,255,.05) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 50%,#000,transparent 72%);
}
.loader{display:flex;flex-direction:column;align-items:center;gap:16px;font:500 13.5px/1.4 var(--font-ui);text-align:center;max-width:320px;position:relative;z-index:1}
.loader .dots{display:flex;gap:8px}
.loader .dots i{width:18px;height:18px;border-radius:3px;background:var(--cyan);box-shadow:0 0 14px rgba(0,234,255,.6);animation:hop .9s ease-in-out infinite}
.loader .dots i:nth-child(2){background:var(--violet);box-shadow:0 0 14px rgba(122,92,255,.6);animation-delay:.12s}
.loader .dots i:nth-child(3){background:var(--magenta);box-shadow:0 0 14px rgba(255,47,208,.6);animation-delay:.24s}
.loader .dots i:nth-child(4){background:var(--amber);box-shadow:0 0 14px rgba(255,176,32,.6);animation-delay:.36s}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-12px)}}
.loader .load-bar{width:210px;height:6px;border-radius:1px;background:rgba(255,255,255,.08);border:1px solid var(--line);overflow:hidden}
.loader .load-bar i{display:block;height:100%;width:6%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--violet) 55%,var(--magenta));box-shadow:0 0 12px rgba(0,234,255,.55);transition:width .3s}
.load-msg{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;font-size:11.5px;color:var(--ink-soft);margin:0}
#loading.error .dots{display:none}
#loading.error .load-bar{display:none}
#loading.error .load-msg{color:var(--red);letter-spacing:.04em;text-transform:none;font-size:13px}

/* ---- responsive ---- */
@media (max-width:720px){
  .final-cube{width:88px;height:88px;font-size:28px}
  .over-title{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .loader .dots i,.coin-burst{animation:none}
}