/* =========================================================
   Digi Idle — Área de Descanso (D-REST)
   Tema Digivice: shell laranja + LCD
   ========================================================= */

.rest-overlay{
  --rr-shell:#e88928;
  --rr-shell-2:#c45f12;
  --rr-shell-hi:#ffb45a;
  --rr-cyan:#3ecfff;
  --rr-lcd:#07141a;
  --rr-text:#d7f4ff;
  --rr-muted:#6f93a3;
  --rr-ok:#5dffb0;
  --rr-warn:#ffc14d;
  --rr-neg:#ff8a7a;
  --rr-font:"Rajdhani","Segoe UI",system-ui,sans-serif;
  --rr-display:"Orbitron","Rajdhani",system-ui,sans-serif;

  position:absolute;
  inset:0;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom));
  box-sizing:border-box;
  background:
    radial-gradient(90% 70% at 50% 18%, rgba(232,137,40,.22), transparent 55%),
    radial-gradient(120% 100% at 50% 40%, rgba(7,20,26,.82), rgba(4,10,14,.94));
  backdrop-filter:blur(4px) saturate(1.1);
  font-family:var(--rr-font);
  color:var(--rr-text);
}

.rest-card{
  width:min(420px, 100%);
  max-height:min(92vh, calc(var(--vvh, 100dvh) - 24px));
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:0 !important;
  text-align:left !important;
  border-radius:16px !important;
  border:2px solid #8a4a10 !important;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(255,180,90,.35), transparent 42%),
    linear-gradient(165deg, var(--rr-shell-hi) 0%, var(--rr-shell) 40%, var(--rr-shell-2) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255,220,160,.35) inset,
    0 0 0 4px rgba(0,0,0,.22) inset,
    0 22px 50px rgba(0,0,0,.55) !important;
  overflow:hidden;
  box-sizing:border-box;
}

/* —— Head (dobradiça) —— */
.rest-head{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px 9px;
  background:linear-gradient(180deg, rgba(255,220,160,.22), rgba(0,0,0,.18));
  border-bottom:1px solid rgba(0,0,0,.28);
}
.rest-badge{
  flex:0 0 auto;
  margin-top:2px;
  padding:3px 7px;
  border-radius:5px;
  border:1px solid rgba(0,0,0,.25);
  background:linear-gradient(180deg,#0c1f28,#07141a);
  color:var(--rr-cyan);
  font:700 8px var(--rr-display);
  letter-spacing:.12em;
}
.rest-head-text{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.rest-kicker{
  font:700 9px var(--rr-display) !important;
  letter-spacing:.14em !important;
  text-transform:uppercase;
  color:#1a0e05 !important;
  opacity:.75;
}
.rest-title{
  margin:0 !important;
  font:700 15px var(--rr-display) !important;
  letter-spacing:.04em;
  line-height:1.2;
  color:#1a0e05 !important;
  text-shadow:0 1px 0 rgba(255,230,180,.3);
}
.rest-sub{
  margin:0 !important;
  font:600 12px var(--rr-font) !important;
  line-height:1.35;
  color:rgba(26,14,5,.72) !important;
}

/* —— Body (LCD) —— */
.rest-body{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  background:
    linear-gradient(180deg, rgba(7,20,26,.78), rgba(7,20,26,.94)),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.1) 2px, rgba(0,0,0,.1) 3px),
    var(--rr-lcd);
  border-top:1px solid rgba(62,207,255,.12);
}

.rest-panel{
  margin:0 !important;
  max-width:none !important;
  padding:8px 9px;
  border-radius:10px;
  border:1px solid rgba(62,207,255,.16);
  background:linear-gradient(180deg, rgba(16,36,48,.95), rgba(8,18,26,.98));
  box-sizing:border-box;
}
.rest-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
  min-width:0;
}
.rest-panel-tag,
.rest-supplies-label{
  font:700 8px var(--rr-display);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--rr-cyan);
}

.rest-mon-name{
  font:700 13px var(--rr-font) !important;
  color:#fff3d8 !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.rest-hp{
  position:relative;
  margin:0 0 5px !important;
  height:9px !important;
  border-radius:6px !important;
  background:rgba(0,0,0,.45) !important;
  overflow:hidden;
  border:1px solid rgba(62,207,255,.12);
}
.rest-hp:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.16), transparent 50%);
}
.rest-hp-ghost{
  position:absolute;
  left:0; top:0; bottom:0;
  border-radius:5px;
  background:rgba(255,120,110,.45);
  transition:width .9s ease-out .15s;
}
.rest-hp-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  height:100%;
  border-radius:5px;
  background:linear-gradient(90deg, #2f9d52, var(--rr-ok));
  transition:width .28s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 8px rgba(93,255,176,.25);
}
.rest-mon-tr{
  display:block;
  font:600 11px var(--rr-font) !important;
  color:var(--rr-muted) !important;
}
.rest-mon-tr.neg{
  color:var(--rr-neg) !important;
}

.rest-stamina-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
  margin-bottom:5px;
}
.rest-stamina-label{
  font:700 8px var(--rr-display) !important;
  letter-spacing:.1em !important;
  text-transform:uppercase;
  color:var(--rr-cyan) !important;
}
.rest-stamina-val{
  font:700 12px var(--rr-font) !important;
  color:var(--rr-text) !important;
  font-variant-numeric:tabular-nums;
}
.rest-stamina-bar{
  position:relative;
  margin:0 0 5px !important;
  height:9px !important;
  border-radius:6px !important;
  background:rgba(0,0,0,.45) !important;
  overflow:hidden;
  border:1px solid rgba(255,193,77,.2);
}
.rest-stamina-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  height:100%;
  border-radius:5px;
  background:linear-gradient(90deg, #d99320, var(--rr-warn));
  transition:width .5s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 8px rgba(255,193,77,.28);
}
.rest-stamina-note{
  margin:0 !important;
  font:600 11px var(--rr-font) !important;
  line-height:1.35;
  color:var(--rr-muted) !important;
}

.rest-gains-wrap .rest-panel-tag{
  display:block;
  margin-bottom:6px;
}
.rest-gains{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px !important;
  justify-content:stretch !important;
  margin:0 !important;
}
.rest-stat{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  min-width:0 !important;
  padding:7px 8px !important;
  border-radius:8px !important;
  background:rgba(0,0,0,.32) !important;
  border:1px solid rgba(62,207,255,.14) !important;
}
.rest-stat-label{
  font:700 8px var(--rr-display) !important;
  letter-spacing:.08em !important;
  text-transform:uppercase;
  color:var(--rr-muted) !important;
}
.rest-stat-value{
  font:800 16px var(--rr-font) !important;
  color:var(--rr-warn) !important;
  font-variant-numeric:tabular-nums;
  line-height:1.15;
}
.rest-stat-value.neg{
  color:var(--rr-neg) !important;
}
.rest-stat-sub{
  font:600 10px var(--rr-font) !important;
  color:var(--rr-muted) !important;
}

.rest-supplies-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-start !important;
  margin-top:6px;
}
.rest-supply{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 8px !important;
  border-radius:8px !important;
  background:rgba(0,0,0,.32) !important;
  border:1px solid rgba(62,207,255,.14) !important;
  font-variant-numeric:tabular-nums;
}
.rest-supply-ico{
  width:18px;
  height:18px;
  object-fit:contain;
  image-rendering:pixelated;
}
.rest-supply-n{
  font:700 12px var(--rr-font) !important;
  color:var(--rr-text) !important;
}
.rest-spent .rest-supply-n{
  color:var(--rr-neg) !important;
}
.rest-spent-gold{
  margin-top:6px !important;
  font:700 11px var(--rr-font) !important;
  color:var(--rr-neg) !important;
}

/* —— Foot —— */
.rest-foot{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px 11px;
  background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.22));
  border-top:1px solid rgba(0,0,0,.25);
}
.rest-foot-meta{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.rest-clock{
  margin:0 !important;
  font:700 12px var(--rr-font) !important;
  color:#1a0e05 !important;
}
.rest-note{
  margin:0 !important;
  max-width:none !important;
  font:600 10px var(--rr-font) !important;
  line-height:1.3;
  color:rgba(26,14,5,.65) !important;
}
.rest-back{
  flex:0 0 auto;
  padding:9px 14px !important;
  border-radius:9px !important;
  border:1px solid #8a4a10 !important;
  cursor:pointer;
  font:700 11px var(--rr-display) !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#1a0e05 !important;
  background:linear-gradient(180deg, #ffe0a8, #e88928 55%, #c45f12) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset;
  white-space:nowrap;
}
.rest-back:hover{
  filter:brightness(1.05);
}
.rest-back:active{
  transform:translateY(1px);
}

/* —— Responsivo (D-REST) —— */
@media (max-width: 420px){
  .rest-overlay:not(.offline-overlay) .rest-gains{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .rest-overlay:not(.offline-overlay) .rest-title{
    font-size:13px !important;
  }
  .rest-overlay:not(.offline-overlay) .rest-foot{
    flex-direction:column;
    align-items:stretch;
  }
  .rest-overlay:not(.offline-overlay) .rest-back{
    width:100%;
    text-align:center;
  }
}

@media (max-height: 520px){
  .rest-overlay:not(.offline-overlay) .rest-sub{ display:none; }
  .rest-overlay:not(.offline-overlay) .rest-stamina-note{ display:none; }
  .rest-overlay:not(.offline-overlay) .rest-body{ gap:6px; padding:8px; }
  .rest-overlay:not(.offline-overlay) .rest-panel{ padding:6px 7px; }
}

@media (max-height: 400px){
  .rest-overlay:not(.offline-overlay) .rest-note{ display:none; }
  .rest-overlay:not(.offline-overlay) .rest-head{ padding:7px 10px; }
  .rest-overlay:not(.offline-overlay) .rest-title{ font-size:12px !important; }
}

/* =========================================================
   Offline overlay (rest-overlay.offline-overlay)
   Visual distinto: link remoto ciano + shell Digivice
   ========================================================= */

.rest-overlay.offline-overlay{
  --of-shell:#2eb8e8;
  --of-shell-2:#1578a8;
  --of-shell-hi:#7adfff;
  --of-orange:#ff9a2e;
  --of-lcd:#061018;
  --of-text:#d7f4ff;
  --of-muted:#6f93a3;
  --of-ok:#5dffb0;
  --of-warn:#ffc14d;
  --of-font:"Rajdhani","Segoe UI",system-ui,sans-serif;
  --of-display:"Orbitron","Rajdhani",system-ui,sans-serif;

  z-index:520;
  background:
    radial-gradient(70% 55% at 50% 12%, rgba(62,207,255,.2), transparent 55%),
    radial-gradient(90% 70% at 80% 80%, rgba(255,154,46,.1), transparent 50%),
    radial-gradient(120% 100% at 50% 40%, rgba(4,12,20,.88), rgba(2,6,10,.96));
  backdrop-filter:blur(6px) saturate(1.15);
}

.rest-overlay.offline-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:
    linear-gradient(rgba(62,207,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62,207,255,.07) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 65% 55% at 50% 42%, #000 15%, transparent 72%);
}

.rest-overlay.offline-overlay::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:18%;
  height:2px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(62,207,255,.45), transparent);
  animation:offlineScan 4.5s ease-in-out infinite;
  opacity:.55;
}
@keyframes offlineScan{
  0%,100%{ transform:translateY(0); opacity:.25; }
  50%{ transform:translateY(42vh); opacity:.7; }
}

.rest-overlay.offline-overlay .offline-card{
  position:relative;
  z-index:1;
  width:min(400px, 100%);
  max-height:min(88vh, calc(var(--vvh, 100dvh) - 28px));
  border-color:#0e5a78 !important;
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(122,223,255,.4), transparent 42%),
    radial-gradient(90% 60% at 100% 100%, rgba(20,60,80,.45), transparent 50%),
    linear-gradient(165deg, var(--of-shell-hi) 0%, var(--of-shell) 40%, var(--of-shell-2) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(200,240,255,.35) inset,
    0 0 0 4px rgba(0,0,0,.22) inset,
    0 24px 56px rgba(0,0,0,.55),
    0 0 36px rgba(62,207,255,.12) !important;
  animation:offlineCardIn .35s ease;
}
@keyframes offlineCardIn{
  from{ opacity:0; transform:translateY(12px) scale(.97); }
  to{ opacity:1; transform:none; }
}

.rest-overlay.offline-overlay .offline-head{
  align-items:center;
  gap:8px;
  padding:9px 10px 9px 12px;
  background:linear-gradient(180deg, rgba(200,240,255,.22), rgba(0,0,0,.2));
  border-bottom:1px solid rgba(0,0,0,.28);
}

.rest-overlay.offline-overlay .rest-badge{
  background:linear-gradient(180deg,#0a1c28,#041018);
  color:#7adfff;
  border-color:rgba(0,40,60,.45);
}

.rest-overlay.offline-overlay .rest-kicker{
  color:#052030 !important;
  opacity:.8;
}

.rest-overlay.offline-overlay .rest-title{
  font-size:14px !important;
  color:#041820 !important;
  text-shadow:0 1px 0 rgba(220,245,255,.35);
}

.rest-overlay.offline-overlay .rest-sub{
  color:rgba(4,24,32,.72) !important;
  font-size:11.5px !important;
}

.rest-overlay.offline-overlay .offline-live{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  align-self:flex-start;
  margin-top:1px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(4,24,32,.28);
  background:rgba(4,24,32,.2);
  color:#041820;
  font:700 8px var(--of-display);
  letter-spacing:.12em;
  white-space:nowrap;
}
.rest-overlay.offline-overlay .offline-live > i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ff4d4d;
  box-shadow:0 0 8px rgba(255,70,70,.7);
  animation:offlinePulse 1.2s ease-in-out infinite;
}
@keyframes offlinePulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.45; transform:scale(.85); }
}

.rest-overlay.offline-overlay .offline-body{
  gap:8px;
  padding:10px;
  background:
    linear-gradient(180deg, rgba(6,16,24,.82), rgba(6,16,24,.95)),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.1) 2px, rgba(0,0,0,.1) 3px),
    var(--of-lcd);
  border-top:1px solid rgba(62,207,255,.18);
}

.rest-overlay.offline-overlay .offline-hero{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 11px !important;
  border-color:rgba(62,207,255,.22) !important;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(62,207,255,.12), transparent 55%),
    linear-gradient(180deg, rgba(12,32,44,.98), rgba(6,16,24,.98)) !important;
}

.rest-overlay.offline-overlay .offline-hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.rest-overlay.offline-overlay .offline-hero-tag{
  font:700 8px var(--of-display);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#7adfff;
}
.rest-overlay.offline-overlay .offline-hero-pct{
  font:700 11px var(--of-display);
  letter-spacing:.04em;
  color:var(--of-warn);
  font-variant-numeric:tabular-nums;
}

.rest-overlay.offline-overlay .offline-hero-val{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
}
.rest-overlay.offline-overlay .offline-hero-val strong{
  font:800 28px/1 var(--of-display);
  color:var(--of-text);
  letter-spacing:.02em;
  text-shadow:0 0 18px rgba(62,207,255,.25);
  font-variant-numeric:tabular-nums;
}
.rest-overlay.offline-overlay .offline-hero-val > span{
  font:700 13px var(--of-font);
  color:var(--of-muted);
  font-variant-numeric:tabular-nums;
}

.rest-overlay.offline-overlay .offline-stamina-bar{
  position:relative;
  height:10px;
  margin:2px 0 0;
  border-radius:6px;
  overflow:hidden;
  background:rgba(0,0,0,.5);
  border:1px solid rgba(62,207,255,.2);
}
.rest-overlay.offline-overlay .offline-stamina-fill{
  position:absolute;
  inset:0 auto 0 0;
  height:100%;
  border-radius:5px;
  background:linear-gradient(90deg, #1a9ec4, #7adfff 70%, #b8f0ff);
  box-shadow:0 0 12px rgba(122,223,255,.35);
  transition:width .45s cubic-bezier(.4,0,.2,1);
}
.rest-overlay.offline-overlay .offline-stamina-fill::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.28), transparent 55%);
}

.rest-overlay.offline-overlay .offline-hero-note{
  margin:0 !important;
  font:600 11px/1.35 var(--of-font) !important;
  color:var(--of-muted) !important;
}

.rest-overlay.offline-overlay .offline-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
  padding:6px !important;
}
.rest-overlay.offline-overlay .offline-metric{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  padding:8px 9px;
  border-radius:8px;
  background:rgba(0,0,0,.32);
  border:1px solid rgba(62,207,255,.14);
}
.rest-overlay.offline-overlay .offline-metric-label{
  font:700 8px var(--of-display);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--of-muted);
}
.rest-overlay.offline-overlay .offline-metric-value{
  font:800 16px/1.15 var(--of-font);
  color:var(--of-warn);
  font-variant-numeric:tabular-nums;
}
.rest-overlay.offline-overlay .offline-metric-value.muted{
  color:var(--of-text);
  font-size:14px;
  font-weight:700;
}

.rest-overlay.offline-overlay .offline-sync-note{
  margin:0 !important;
  padding:7px 9px;
  border-radius:8px;
  border:1px dashed rgba(62,207,255,.2);
  background:rgba(0,0,0,.22);
  font:600 11px/1.4 var(--of-font) !important;
  color:var(--of-muted) !important;
}

.rest-overlay.offline-overlay .offline-foot{
  padding:9px 11px 11px;
  background:linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.26));
  border-top:1px solid rgba(0,0,0,.28);
}

.rest-overlay.offline-overlay .offline-foot .rest-clock{
  color:#041820 !important;
  font-size:11px !important;
}
.rest-overlay.offline-overlay .offline-foot .rest-note{
  color:rgba(4,24,32,.65) !important;
}

.rest-overlay.offline-overlay .rest-back{
  border-color:#0e5a78 !important;
  color:#041820 !important;
  background:linear-gradient(180deg, #dff6ff, #3ecfff 55%, #1a9ec4) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 6px 16px rgba(0,80,120,.25);
}

.rest-overlay.offline-overlay .rest-back:hover{
  filter:brightness(1.06);
}

/* legacy flat classes (se ainda existirem em cache) */
.rest-overlay.offline-overlay .offline-stamina{
  display:none;
}

@media (max-width: 420px){
  .rest-overlay.offline-overlay .offline-card{
    width:min(100%, 400px);
  }
  .rest-overlay.offline-overlay .offline-head{
    flex-wrap:wrap;
  }
  .rest-overlay.offline-overlay .offline-live{
    margin-left:auto;
  }
  .rest-overlay.offline-overlay .offline-hero-val strong{
    font-size:24px;
  }
  .rest-overlay.offline-overlay .offline-foot{
    flex-direction:column;
    align-items:stretch;
  }
  .rest-overlay.offline-overlay .rest-back{
    width:100%;
    text-align:center;
  }
}

@media (max-height: 520px){
  .rest-overlay.offline-overlay .rest-sub,
  .rest-overlay.offline-overlay .offline-hero-note,
  .rest-overlay.offline-overlay .offline-foot .rest-note{
    display:none;
  }
  .rest-overlay.offline-overlay .offline-body{ gap:6px; padding:8px; }
  .rest-overlay.offline-overlay .offline-hero-val strong{ font-size:22px; }
}

@media (prefers-reduced-motion: reduce){
  .rest-overlay.offline-overlay::after,
  .rest-overlay.offline-overlay .offline-live > i,
  .rest-overlay.offline-overlay .offline-card{
    animation:none !important;
  }
}