/* styles.css — Aurora Glass (full, stretchy) */

/* ================= TOKENS ================= */
:root{
  /* Фон — северное сияние (не тёмный и не белый) */
  --bg-a:#eaf2ff; --bg-b:#f4f7fb; --bg-c:#f8efe8;

  /* Текст */
  --ink:#0f2533;
  --muted:#5b7080;

  /* Акценты */
  --c1:#7bd3ff;   /* ледяной голубой */
  --c2:#8ef0cf;   /* мята */
  --c3:#ffd79a;   /* тёплый свет */
  --c4:#a98bff;   /* сиреневый */

  /* Карточки/бордеры */
  --glass:#ffffffa6;   /* стекло */
  --glass-2:#ffffff70;
  --stroke:#d9e6f3;

  /* Размеры / отступы */
  --page-pad:12px;
  --gap:12px;

  /* ВЫСОТА ШАПКИ (держим как в исходнике) */
  --header-h:30svh;

  /* Сетка: управляем количеством ячеек через переменные */
  --cols:6;
  --rows:6;

  /* Тени */
  --shadow-soft:0 8px 20px rgba(20,40,60,.12);
  --shadow-press:0 14px 30px rgba(20,40,60,.16);
}

/* ================= BASE ================= */
*{ box-sizing:border-box }
html,body{ height:100%; margin:0 }

body{
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 460px at 85% -10%, #bfe9ff33, transparent 60%),
    radial-gradient(900px 360px at 10% -20%, #ffd7b84a, transparent 60%),
    linear-gradient(180deg, var(--bg-a) 0%, var(--bg-b) 60%, var(--bg-c) 100%);
  height:100svh;
  overflow:hidden;
}

/* Лёгкий «снег» */
body::before{
  content:""; position:fixed; inset:-80px 0 0 0; pointer-events:none; opacity:.45;
  background-image:
    radial-gradient(1.6px 1.6px at 20px 10px, #fff 98%, transparent),
    radial-gradient(1.2px 1.2px at 80px 40px, #fff 98%, transparent),
    radial-gradient(1.4px 1.4px at 140px 70px, #fff 98%, transparent),
    radial-gradient(1.2px 1.2px at 200px 20px, #fff 98%, transparent);
  background-size:260px 120px; background-repeat:repeat;
  animation: snow 24s linear infinite;
}
@keyframes snow{ from{transform:translateY(-60px)} to{transform:translateY(120px)} }

.page{
  height:100%;
  padding:var(--page-pad);
  display:flex; flex-direction:column; gap:var(--gap);
  min-height:0; /* чтобы .wrap мог сжиматься внутри */
}

/* Рукописный шрифт */
@font-face{
  font-family:"Marck Script";
  src: local("Marck Script"), url("/fonts/MarckScript.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ================= TOP ================= */
.top{
  position:relative; height:var(--header-h); min-height:160px; max-height:320px;
  display:flex; align-items:center; padding:16px; gap:16px;
  border-radius:18px;
  background:
    linear-gradient(180deg, var(--glass) 0%, var(--glass-2) 100%),
    radial-gradient(80% 120% at 85% 30%, #bfe6ff55 0%, #ffffff00 70%);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow-soft), inset 0 1px 0 #ffffff;
  backdrop-filter: blur(8px);
}
.top::after{
  content:""; position:absolute; inset:-2px; border-radius:20px; pointer-events:none;
  padding:1px; border:1px solid transparent;
  background:
    conic-gradient(from 0deg, #7bd3ff55, #8ef0cf55, #ffd79a55, #a98bff55, #7bd3ff55) 0 0/cover no-repeat,
    transparent;
  background-clip:border-box, content-box;
  filter:blur(5px); opacity:.6;
}

.user{ display:flex; gap:16px; align-items:center; min-width:0; width:100% }
.avatar-img{
  width:min(18svh, 112px); height:min(18svh, 112px);
  border-radius:14px; object-fit:cover; border:1px solid #ffffffcc;
  box-shadow:0 8px 18px rgba(35,55,75,.12);
}
.hello{ min-width:0; flex:1 }
.hello-line{
  margin:0 0 .35rem; font-family:"Marck Script"; font-weight:400;
  font-size:clamp(28px, 7vw, 46px); line-height:1.1; color:#123549;
  text-shadow:0 1px 0 #fff, 0 10px 30px #7bd3ff30;
}
.countdown{ margin:0; color:var(--muted); font-size:clamp(16px, 3.2vw, 20px) }
.cd-prefix{ display:block }
.cd-value{ display:block; margin-top:.15rem; font-weight:800; color:#0f3f4c }

/* Мотто */
.motto{ display:flex; align-items:center; justify-content:center; gap:.6rem; padding:4px 8px }
.motto::before, .motto::after{ content:""; flex:1 1 0; height:1px; background:linear-gradient(90deg, transparent, #cfe2f1, transparent) }
.motto-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 .35rem; font-weight:900; color:#163e4c }

/* ================= GRID (растягивается на весь экран) ================= */
.wrap{
  height: calc(100svh - var(--header-h) - var(--page-pad)*3 - var(--gap)*2);
  display:flex;
  min-height:0; /* критично для корректного сжатия/растяжения */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.grid{
  display:grid; width:100%; height:100%;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows:    repeat(var(--rows), 1fr);
  gap: 12px;
}

/* ================= DAY BUTTON (glass-chip) ================= */
.day{
  width:100%; height:100%; /* занимает всю ячейку сетки */
  position:relative; display:grid; place-items:center;
  border-radius:16px;
  color:#0f2a33; font-weight:900; font-size:clamp(12px, 2.2svh, 18px);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  background:
    /* мягкая «глянцевая» полоска */
    linear-gradient(180deg, #ffffff 0%, #ffffffc8 35%, #ffffff90 100%),
    radial-gradient(140% 180% at 50% 0%, #dfeaf3, #f6fbff 60%);
  border:1px solid #ffffffcc;
  box-shadow:
    var(--shadow-soft),
    0 0 0 1px rgba(255,255,255,.65) inset,
    0 -1px 0 rgba(210,225,240,.9) inset;
  transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

/* Hover / Active */
.day:not(:disabled):hover{
  transform: translateY(-2px);
  box-shadow:
    var(--shadow-press),
    0 0 0 3px color-mix(in oklab, var(--c1) 24%, transparent),
    0 0 0 1px rgba(255,255,255,.8) inset;
  background:
    linear-gradient(180deg, #ffffff, #ffffffde 40%, #ffffffb0),
    radial-gradient(130% 160% at 50% 0%, #d7eef8, #f5fbff 60%);
}
.day:active{ transform: translateY(1px) }

/* Сегодня — «световое кольцо» без mask */
.day.today{
  position:relative;
  box-shadow:
    var(--shadow-press),
    0 0 0 4px color-mix(in oklab, var(--c2) 30%, transparent),
    0 0 0 1px rgba(255,255,255,.95) inset;
}
.day.today::after{
  content:""; position:absolute; inset:-2px; border-radius:18px; pointer-events:none;
  background:
    conic-gradient(from 0deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c1)),
    transparent;
  background-clip: border-box, content-box; /* делаем полую рамку без mask */
  padding:2px; opacity:.8; filter:blur(3px);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%{ opacity:.35; transform:scale(.995) rotate(0turn) }
  50%{ opacity:.95; transform:scale(1.01) rotate(.25turn) }
  100%{ opacity:.35; transform:scale(.995) rotate(.5turn) }
}

/* Доступность клавиатуры */
.day:focus-visible{
  outline:0;
  box-shadow:
    var(--shadow-press),
    0 0 0 4px color-mix(in oklab, var(--c1) 30%, #fff 10%),
    0 0 0 1px rgba(255,255,255,.95) inset;
}

/* Disabled */
.day:disabled{
  opacity:.6; cursor:not-allowed; color:#5e7686;
  box-shadow:0 6px 14px rgba(27,61,79,.08), 0 0 0 0 transparent;
}

/* ================= VIDEO DIALOG ================= */
dialog#videoDialog{
  border:none; padding:0; overflow:hidden;
  width:min(96vw, 760px); max-height:96vh; border-radius:16px;
  background:linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow:0 22px 60px rgba(25,48,69,.25);
}
dialog#videoDialog::backdrop{ background:rgba(22,38,52,.45) }
.vd-wrap{ position:relative; background:#000; width:100%; height:100% }
#vd{ display:block; width:100%; height:auto; max-height:96vh; background:#000 }
.vd-close{
  position:absolute; top:10px; right:10px; width:42px; height:42px; border-radius:12px; border:0;
  background:linear-gradient(180deg, #ffffff, #ebf5fb); color:#0f2a3a; font-size:22px; line-height:1; cursor:pointer;
  box-shadow:0 10px 22px rgba(27,61,79,.18), 0 1px 0 #fff inset, 0 -1px 0 #e6eef6 inset;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.vd-close:hover{
  background:linear-gradient(180deg, #ffffff, #e6f3fa);
  box-shadow:0 14px 28px rgba(27,61,79,.22), 0 0 0 3px color-mix(in oklab, #86d2ff 30%, transparent), 0 1px 0 #fff inset;
}
.vd-close:active{ transform:translateY(1px) }

/* ================= RESPONSIVE COLS/ROWS ================= */
/* Десктоп 6×6 (36 слотов) */
@media (max-width: 1200px){
  :root{ --cols:6; --rows:6; }
}
/* Планшеты 5×7 (35 слотов) */
@media (max-width: 1024px){
  :root{ --cols:5; --rows:7; }
  .top{ height:26svh }
}
/* Средние телефоны 4×8 (32 слота) */
@media (max-width: 768px){
  :root{ --cols:4; --rows:8; }
  .top{ height:24svh; padding:12px; gap:12px }
  .avatar-img{ width:90px; height:90px }
}
/* Маленькие телефоны 3×11 (33 слота) */
@media (max-width: 480px){
  :root{ --cols:3; --rows:11; }
  .hello-line{ font-size:26px }
  .countdown{ font-size:14px }
}

/* Уважение к reduce-motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important }
}