/* styles.css - extracted from index.html */

/* Base + layout */
html,body{height:100%;margin:0;background:#000;color:#fff;font-family:Arial}
:root{
  --label-width:160px;
  --muted:#bbb;
  --accent1:linear-gradient(90deg,#6cf,#09f,#0cf);
  --accent2:linear-gradient(90deg,#ffb86b,#ff7b3a);
  --accent3:linear-gradient(90deg,#7af,#4bf);
  --group-bg:rgba(0,0,0,.45)
}
.app{position:relative;height:100vh;overflow:hidden}
.bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .6s;filter:brightness(.9)}
.overlay{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:24px}
.top-left{background:rgba(0,0,0,.4);padding:8px;border-radius:6px;display:inline-block}
.center{display:flex;align-items:center;justify-content:center;flex:1}
h1{font-size:clamp(28px,6vw,64px);margin:0;text-align:center}

/* Make the project completion area sit on a dark translucent surface similar
   to other content (details groups, top-left). This improves contrast and
   legibility while matching the app's visual style. */
.bottom{
  position:absolute;
  left:24px;
  right:24px;
  bottom:20vh;
  display:flex;
  align-items:center;
  gap:16px;
  padding:10px 14px;
  z-index:3;
  background:var(--group-bg);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02)
}
.bar-label{color:#ddd;font-size:13px;min-width:var(--label-width)}
.details{position:absolute;left:24px;right:24px;bottom:calc(20vh + 60px);z-index:3;display:none}
.details .group{display:flex;gap:16px;align-items:center;margin-bottom:8px;background:var(--group-bg);padding:10px;border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.details .group .label{min-width:var(--label-width);color:#ddd;font-size:14px}
.details .group .mini{flex:1;display:flex;align-items:center;gap:8px}
.mini .mini-wrap{background:rgba(255,255,255,.04);height:18px;border-radius:12px;overflow:hidden;flex:1;border:1px solid rgba(255,255,255,.03)}
.mini .mini-bar{height:100%;width:0%;background:var(--accent2);box-shadow:0 0 8px rgba(0,0,0,.4) inset}
.mini .mini-text{width:45px;text-align:right;font-size:13px;color:#fff}

.bar-wrap{
  background:rgba(0,0,0,.5);
  height:34px;
  border-radius:16px;
  overflow:hidden;
  flex:1;
  box-shadow:0 6px 18px rgba(0,0,0,.7),inset 0 1px 2px rgba(255,255,255,.06);
  border:2px solid rgba(102,204,255,.18)
}
.bar{height:100%;width:0%;background:var(--accent1);transition:width .6s;box-shadow:inset 0 1px 8px rgba(0,0,0,.35)}
.bar-text{color:#fff;font-weight:bold;font-size:14px;min-width:45px;text-align:right;text-shadow:0 2px 4px rgba(0,0,0,.8)}

.controls{position:absolute;top:12px;right:12px;z-index:3;opacity:.8;display:flex;align-items:center}
button{margin-left:6px;padding:6px 8px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08);color:#fff;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;line-height:1;font-size:16px}
.controls button:first-child{margin-left:0}

.logo{position:absolute;left:24px;bottom:24px;z-index:4;display:flex;flex-direction:column;align-items:center;gap:6px}
/* ensure logos of any aspect ratio are fully visible; don't crop logos
   — object-fit:contain preserves the complete image inside a fixed box.
   Add subtle padding to avoid the image touching the rounded corners. */
.logo img{
  width:48px;height:48px;max-width:48px;max-height:48px;border-radius:6px;object-fit:contain;object-position:center;box-shadow:0 6px 18px rgba(0,0,0,.6);opacity:.9;padding:3px;background:rgba(20, 20, 20, 0.342);box-sizing:border-box
}
.logo .name{color:#fff;font-size:14px;text-shadow:0 2px 6px rgba(0,0,0,.8);opacity:.65}

@media (max-width:420px){
  .logo img{width:40px;height:40px}
  .logo .name{font-size:12px}
}

.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}

/* config label display & fade */
#configName{display:inline-block;margin-left:10px;font-size:12px;opacity:.75;transition:opacity .6s ease}

/* project counter */
.counter{position:absolute;right:16px;bottom:16px;z-index:40;color:#ddd;font-size:12px;background:rgba(0,0,0,.28);padding:6px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.04);pointer-events:none;opacity:.9}

/* accessibility: focus outlines */
button:focus{outline:2px solid #8fd6ff;outline-offset:3px}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .bg,.bar{transition:none!important}
}

/* small bottom-left footer — do not shift layout (absolute) */
.footer{position:absolute;left:1px;bottom:1px;padding:1px;opacity:.4;font-size:12px;color:#ddd;z-index:50;pointer-events:none;transition:opacity .6s ease}