/* datei: /public/css/base.css
   thesweeper - global base
   - dark, clean, high-end ui
   - global background art + smooth fade out (no hard cutoff)
*/

:root{
  /* palette (logo-friendly: deep space + cyan/teal highlights) */
  --bg: #050812;
  --bg2:#060b18;
  --panel: rgba(10, 16, 32, 0.78);
  --panel2: rgba(10, 16, 32, 0.58);
  --line: rgba(255,255,255,0.08);
  --line2: rgba(255,255,255,0.12);
  --text: rgba(236,244,255,0.94);
  --muted: rgba(214,228,255,0.70);

  --cyan: #4ef0ff;
  --teal: #33d6c8;
  --violet:#7b5cff;
  --danger:#ff4d4d;
  --warn:  #ffb24a;

  --shadow: 0 24px 90px rgba(0,0,0,0.62);
  --shadow2: 0 10px 30px rgba(0,0,0,0.45);

  --radius: 18px;
  --radius2: 26px;
  --max: 1160px;

  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --focus: 0 0 0 3px rgba(78, 240, 255, 0.22), 0 0 0 1px rgba(78, 240, 255, 0.25) inset;

  /* subtle scanlines (very light) */
  --scanline: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    rgba(255,255,255,0.00) 4px,
    rgba(255,255,255,0.00) 7px
  );

  /* global background art */
  --bg-art-url: url("../assets/img/bg/bg_main.png");

  /* ✅ nur leicht dunkler als ganz am Anfang, NICHT absaufen */
  --bg-art-opacity: 0.60;

  --bg-art-height: clamp(760px, 92vh, 1320px);
  --bg-art-fade: clamp(420px, 40vh, 720px);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  min-height: 100vh; /* ✅ sticky footer robust */
  font-family: var(--font-ui);
  color: var(--text);

  background:
    radial-gradient(1200px 900px at 18% -10%, rgba(78,240,255,0.08), transparent 60%),
    radial-gradient(900px 700px at 88% 10%, rgba(123,92,255,0.08), transparent 55%),
    radial-gradient(1100px 900px at 50% 120%, rgba(51,214,200,0.06), transparent 58%),
    linear-gradient(180deg, var(--bg2), var(--bg));

  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
button, input, select, textarea{ font: inherit; color: inherit; }
::selection{ background: rgba(78,240,255,0.22); }

.container{
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
}

.page-shell{
  min-height: 100vh; /* ✅ statt 100%: klebt immer an viewport */
  display: flex;
  flex-direction: column;

  position: relative;
  isolation: isolate;
}

/* ✅ sticky footer: main wächst, footer bleibt unten */
.page-main{
  flex: 1 0 auto;
}
.site-footer{
  margin-top: auto;
}

/* background art layer (top area only) */
.page-shell::before{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;

  height: calc(var(--bg-art-height) + var(--bg-art-fade));

  z-index: 0;
  pointer-events: none;

  background:
    /* ✅ overlay viel softer (damit das BG nicht absäuft) */
    linear-gradient(
      180deg,
      rgba(5, 8, 18, 0.20) 0%,
      rgba(5, 8, 18, 0.28) 40%,
      rgba(5, 8, 18, 0.48) 78%,
      rgba(5, 8, 18, 0.62) 100%
    ),

    /* controlled glows */
    radial-gradient(1100px 680px at 18% 18%, rgba(78,240,255,0.14), transparent 60%),
    radial-gradient(900px 620px at 84% 16%, rgba(255, 86, 28, 0.10), transparent 62%),
    radial-gradient(900px 760px at 55% 65%, rgba(236,244,255,0.06), transparent 66%),

    /* artwork */
    var(--bg-art-url);

  background-repeat: no-repeat;
  background-position: center, center, center, center, right bottom;
  background-size: cover, auto, auto, auto, cover;

  opacity: var(--bg-art-opacity);
  filter: saturate(1.05) contrast(1.06);

  /* ✅ Smooth fade (keine harte kante) */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) calc(var(--bg-art-height) - 40px),
    rgba(0,0,0,0) calc(var(--bg-art-height) + var(--bg-art-fade))
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) calc(var(--bg-art-height) - 40px),
    rgba(0,0,0,0) calc(var(--bg-art-height) + var(--bg-art-fade))
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* fallback shading */
.page-shell::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--bg-art-height) - 1px);
  height: calc(var(--bg-art-fade) + 2px);
  z-index: 0;
  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(5, 8, 18, 0.00) 0%,
    rgba(5, 8, 18, 0.45) 45%,
    rgba(5, 8, 18, 0.72) 75%,
    var(--bg) 100%
  );
}

/* keep real page content above the background art */
.page-shell > *{
  position: relative;
  z-index: 1;
}

/* ---------------------------------------
   buttons
---------------------------------------- */
.btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10,16,32,0.25);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
  letter-spacing: 0.2px;
}

.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(78,240,255,0.28);
  background: rgba(10,16,32,0.38);
  box-shadow: 0 14px 34px rgba(0,0,0,0.34);
}

.btn:active{ transform: translateY(0px); }

.btn:focus-visible{
  outline: none;
  box-shadow: var(--focus), 0 14px 34px rgba(0,0,0,0.34);
}

.btn-lg{
  padding: 13px 18px;
  border-radius: 16px;
}

.btn-primary{
  border-color: rgba(78,240,255,0.35);
  background:
    radial-gradient(120% 140% at 10% 10%, rgba(78,240,255,0.40), rgba(10,16,32,0.10) 55%),
    linear-gradient(180deg, rgba(19, 30, 58, 0.72), rgba(9, 14, 28, 0.64));
  position: relative;
}

.btn-primary::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(78,240,255,0.55), rgba(51,214,200,0.25), rgba(255,86,28,0.28));
  opacity: .22;
  pointer-events:none;
}

.btn-primary:hover::before{ opacity: .32; }

.btn-ghost{
  border-color: rgba(255,255,255,0.12);
  background: rgba(10,16,32,0.14);
}

/* ---------------------------------------
   utilities
---------------------------------------- */
.muted{ color: var(--muted); }
.hr{
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ---------------------------------------
   responsive
---------------------------------------- */
@media (max-width: 860px){
  .container{
    width: min(var(--max), calc(100% - 28px));
  }

  :root{
    --bg-art-opacity: 0.62;
    --bg-art-height: clamp(620px, 85vh, 980px);
    --bg-art-fade: clamp(360px, 34vh, 560px);
  }

  .page-shell::before{
    background-position: center, center, center, center, 70% 90%;
  }
}