:root {
  --ice: #eaf8ff;
  --blue: #050a72;
  --glass: rgba(4, 12, 92, .16);
  --glass-locked: rgba(1, 4, 46, .34);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: white; background: #030752; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.calendar-page {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background-image: linear-gradient(rgba(0,3,56,.12), rgba(0,3,56,.2)), url("assets/advent-background-landscape.jpg");
  background-size: cover;
  background-position: center;
}
.calendar-page::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 50% 45%, transparent 35%, rgba(0,2,45,.2) 100%); }

.calendar-header {
  position: absolute;
  z-index: 5;
  top: max(18px, env(safe-area-inset-top));
  left: max(22px, env(safe-area-inset-left));
  right: max(22px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;
}
.calendar-header h1 { margin: 0; color: white; font: 500 clamp(28px,4vw,60px)/.95 Georgia, "Times New Roman", serif; letter-spacing: -.035em; text-shadow: 0 3px 22px rgba(0,0,40,.85); }
.language-switch { display: flex; padding: 3px; pointer-events: auto; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: rgba(0,4,62,.28); backdrop-filter: blur(8px); }
.language { width: 39px; height: 32px; color: white; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-size: 11px; font-weight: 800; }
.language.active { color: var(--blue); background: rgba(255,255,255,.92); }

.calendar-grid {
  position: absolute;
  inset: clamp(88px,11vh,116px) clamp(14px,2vw,32px) clamp(12px,2vh,24px);
  display: grid;
  grid-template-columns: repeat(8, minmax(0,1fr));
  grid-template-rows: repeat(5, minmax(0,1fr));
  grid-auto-flow: dense;
  gap: clamp(6px,1vw,14px);
}
.door {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: white;
  border: 1px solid rgba(235,250,255,.62);
  border-radius: clamp(8px,1.1vw,17px);
  background: linear-gradient(145deg, rgba(255,255,255,.13), transparent 45%), var(--glass);
  box-shadow: inset 0 0 0 1px rgba(112,219,255,.12), 0 6px 22px rgba(0,0,55,.15);
  backdrop-filter: blur(2px) saturate(1.2);
  cursor: pointer;
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.door::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(255,255,255,.25); border-radius: inherit; pointer-events: none; }
.door:hover, .door:focus-visible { z-index: 3; transform: scale(1.045) rotate(-.8deg); outline: none; border-color: white; background: rgba(18,82,178,.28); box-shadow: 0 12px 35px rgba(0,0,40,.35), inset 0 0 30px rgba(132,229,255,.15); }
.door-number { position: relative; z-index: 1; font: 500 clamp(25px,4.2vmin,58px)/1 Georgia, serif; text-shadow: 0 2px 4px rgba(0,0,70,.8), 0 0 18px rgba(190,240,255,.9); }
.door-lock { position: absolute; right: 8px; bottom: 7px; z-index: 1; font-size: clamp(9px,1.2vmin,14px); opacity: .8; }
.door.locked { color: rgba(255,255,255,.72); background: var(--glass-locked); border-color: rgba(255,255,255,.35); }
.door.locked:hover { background: rgba(1,4,46,.48); }
.door.empty { border-style: dashed; }

.door:nth-child(1), .door:nth-child(7), .door:nth-child(13), .door:nth-child(19) { grid-column: span 2; }
.door:nth-child(5), .door:nth-child(16) { grid-row: span 2; }
.door:nth-child(9), .door[data-day="24"] { grid-column: span 2; grid-row: span 2; }

.calendar-gap {
  pointer-events: none;
  visibility: hidden;
}

.toast { position: fixed; z-index: 40; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); max-width: min(520px, calc(100% - 32px)); padding: 11px 17px; color: #08114d; border-radius: 999px; background: rgba(245,252,255,.95); box-shadow: 0 12px 35px rgba(0,0,40,.32); font-size: 13px; font-weight: 700; text-align: center; opacity: 0; transform: translate(-50%,18px); pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
.toast.visible { opacity: 1; transform: translate(-50%,0); }

.reminder-button { position: fixed; z-index: 12; right: max(14px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); padding: 10px 15px; color: #08114d; border: 1px solid rgba(255,255,255,.82); border-radius: 999px; background: rgba(245,252,255,.94); box-shadow: 0 8px 28px rgba(0,0,40,.3); cursor: pointer; font-size: 12px; font-weight: 800; }

.install-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0,2,24,.78); backdrop-filter: blur(7px); }
.install-overlay[hidden] { display: none; }
.install-card { position: relative; width: min(440px,100%); max-height: calc(100dvh - 28px); overflow: auto; padding: clamp(24px,6vw,38px); color: white; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; background: #1d0624; box-shadow: 0 28px 90px rgba(0,0,0,.58); }
.install-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; color: white; border: 0; background: transparent; cursor: pointer; font-size: 32px; font-weight: 700; line-height: 1; }
.install-heading { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 14px; padding-right: 20px; }
.install-heading img { width: 54px; height: 54px; border-radius: 12px; box-shadow: 0 5px 18px rgba(0,0,0,.35); }
.install-heading h2 { margin: 0; font-size: clamp(27px,7vw,35px); line-height: 1.08; letter-spacing: -.035em; }
.install-heading p { margin: 5px 0 0; color: rgba(255,255,255,.88); font-size: clamp(20px,5.6vw,28px); line-height: 1.05; }
.install-copy h3 { margin: 18px 0 8px; font-size: 25px; }
.install-copy ul { margin: 0 0 18px; padding-left: 21px; font-size: clamp(17px,4.6vw,22px); line-height: 1.3; }
.install-copy li + li { margin-top: 7px; }
.install-confirm { padding: 10px 20px; color: #1d0624; border: 0; border-radius: 999px; background: white; cursor: pointer; font-size: 18px; font-weight: 850; }
.install-reminder { margin: 15px 0 0; font-size: clamp(17px,4.5vw,21px); font-weight: 800; line-height: 1.25; }

.memory-dialog { width: min(940px, calc(100% - 24px)); max-height: min(850px, calc(100dvh - 24px)); overflow: auto; padding: 0; color: #10253a; border: 0; border-radius: 22px; background: #fbfaf5; box-shadow: 0 40px 120px rgba(0,0,0,.56); }
.memory-dialog::backdrop { background: rgba(0,2,44,.72); backdrop-filter: blur(9px); }
.dialog-close { position: absolute; z-index: 4; top: 13px; right: 13px; width: 42px; height: 42px; display: grid; place-items: center; color: white; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; background: rgba(0,6,68,.64); cursor: pointer; font-size: 28px; line-height: 1; }
.dialog-image-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #06115c; }
.dialog-image-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; }
.dialog-number { position: absolute; left: 20px; bottom: 17px; width: 60px; height: 60px; display: grid; place-items: center; color: white; border: 2px solid rgba(255,255,255,.75); border-radius: 50%; background: rgba(4,12,92,.82); font: 600 27px Georgia, serif; }
.dialog-copy { padding: clamp(24px,4vw,50px); }
.dialog-date { margin: 0 0 10px; color: #244ab1; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.dialog-copy h2 { margin: 0; font: 500 clamp(34px,5vw,62px)/.98 Georgia, serif; }
.dialog-text { max-width: 760px; margin: 20px 0 0; color: rgba(16,37,58,.76); font-size: clamp(16px,2vw,20px); line-height: 1.58; }
.source-link { display: inline-block; margin-top: 24px; padding-bottom: 4px; color: #10253a; border-bottom: 1px solid #4671dc; text-decoration: none; font-size: 12px; font-weight: 800; }
body.dialog-open { overflow: hidden; }

@media (orientation: portrait), (max-width: 700px) {
  .calendar-page { background-image: linear-gradient(rgba(0,3,56,.08), rgba(0,3,56,.16)), url("assets/advent-background-portrait.jpg"); background-position: center; }
  .calendar-header { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); }
  .calendar-header h1 { max-width: calc(100% - 96px); font-size: clamp(23px,7vw,36px); }
  .calendar-grid { inset: clamp(68px,10vh,92px) 8px 8px; grid-template-columns: repeat(5, minmax(0,1fr)); grid-template-rows: repeat(7, minmax(0,1fr)); gap: 5px; }
  .door { border-radius: 8px; }
  .door::before { inset: 4px; }
  .door:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .door:nth-child(1), .door:nth-child(7), .door:nth-child(13), .door:nth-child(19) { grid-column: span 2; }
  .door:nth-child(5), .door:nth-child(16) { grid-row: span 2; }
  .door[data-day="24"] { grid-column: span 2; grid-row: span 2; }
  .calendar-gap.desktop-only { display: none; }
  .door-number { font-size: clamp(25px,8vw,42px); }
  .dialog-image-wrap { aspect-ratio: 4/3; }
  .install-overlay { padding: 12px; }
  .install-card { border-radius: 23px; }
}

@media (max-height: 610px) and (orientation: landscape) {
  .calendar-header { top: 10px; }
  .calendar-header h1 { font-size: clamp(25px,5vh,42px); }
  .calendar-grid { inset: 62px 12px 8px; gap: 5px; }
  .door::before { inset: 4px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }