/* ============ TOKENS ============ */
.amga-opening {
  /* palette: navy + royal blue + gold (matches the school logo) */
  --background: oklch(0.17 0.06 258);
  --foreground: oklch(0.985 0.005 250);
  --primary: oklch(0.83 0.16 86);
  --primary-foreground: oklch(0.2 0.06 258);
  --secondary: oklch(0.3 0.09 258);
  --secondary-foreground: oklch(0.985 0.005 250);
  --muted-foreground: oklch(0.86 0.02 250);
  --accent: oklch(0.87 0.14 90);
  --accent-foreground: oklch(0.17 0.06 258);
  --border: oklch(1 0 0 / 0.18);
  --ring: oklch(0.83 0.16 86);
  --amga-blue: oklch(0.6 0.2 258);
  --amga-success: oklch(0.79 0.14 160);
  --amga-danger: oklch(0.78 0.14 25);
  --amga-photo-overlay: linear-gradient(180deg, oklch(0.17 0.06 258 / 0.55), oklch(0.17 0.06 258 / 0.72) 70%, var(--background));
  --amga-shadow: 0 12px 28px oklch(0.08 0.03 255 / 0.25);
  --amga-font: 'Poppins', 'Segoe UI', Arial, sans-serif;

  /* glass tokens */
  --amga-glass: oklch(0.98 0.01 250 / 0.08);
  --amga-glass-strong: oklch(0.22 0.06 258 / 0.78);
  --amga-glass-border: oklch(1 0 0 / 0.24);
  --amga-glass-highlight: oklch(1 0 0 / 0.14);
  --amga-blur: 24px;

  /* fluid sizing */
  --slot-w: clamp(38px, 11.5vw, 48px);
  --slot-h: clamp(44px, 12.5vw, 52px);
  --space-x: clamp(16px, 4vw, 40px);
}

/* ============ BASE LAYOUT ============ */
.amga-opening,
.amga-opening *,
.amga-opening *::before,
.amga-opening *::after { box-sizing: border-box; }

.amga-opening {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  padding-bottom: calc(clamp(14px, 3vw, 32px) + env(safe-area-inset-bottom, 0px));
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  letter-spacing: 0;
  background: var(--background);
  color: var(--foreground);
  -webkit-text-size-adjust: 100%;
}

.amga-backdrop {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* overlay + ambient colour blobs (gives the glass something to blur) */
.amga-shade {
  position: absolute; inset: 0;
  background: var(--amga-photo-overlay);
  overflow: hidden;
}
.amga-shade::before,
.amga-shade::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .55; pointer-events: none;
}
.amga-shade::before {
  width: min(420px, 70vw); aspect-ratio: 1;
  top: 18%; left: 4%;
  background: var(--amga-blue); opacity: .6;
}
.amga-shade::after {
  width: min(380px, 65vw); aspect-ratio: 1;
  bottom: 10%; right: 6%;
  background: var(--primary); opacity: .22;
}

/* ============ HEADER ============ */
.amga-header {
  position: relative; z-index: 2;
  width: 100%; max-width: none; margin: 0;
  padding: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-top, 0px)) calc(var(--space-x) + env(safe-area-inset-right, 0px)) clamp(12px, 2vw, 20px) calc(var(--space-x) + env(safe-area-inset-left, 0px));
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  animation: amga-enter .7s both;
}
.amga-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.amga-brand img { width: 38px; height: 44px; object-fit: contain; flex-shrink: 0; }
.amga-brand strong { display: block; font-family: var(--amga-font); font-size: 13px; }
.amga-brand small { display: block; color: var(--muted-foreground); font-size: 11px; margin-top: 4px; }
.amga-location { display: flex; gap: 8px; align-items: center; color: var(--foreground); font-size: 13px; font-weight: 500; text-align: right; }
.amga-location i { color: var(--accent); font-size: 15px; }

/* ============ WELCOME = GLASS CARD ============ */
.amga-welcome {
  position: relative; z-index: 1;
  width: min(690px, calc(100% - 2 * var(--space-x)));
  margin: auto;                       /* centres vertically + horizontally in the flex column */
  padding: clamp(24px, 5vw, 44px) clamp(18px, 5vw, 44px) clamp(26px, 4.5vw, 40px);
  text-align: center;

  background:
    linear-gradient(135deg, var(--amga-glass-highlight), transparent 45%),
    var(--amga-glass);
  border: 1px solid var(--amga-glass-border);
  border-radius: clamp(20px, 4vw, 28px);
  box-shadow:
    0 24px 60px oklch(0.05 0.04 258 / 0.4),
    inset 0 1px 0 oklch(1 0 0 / 0.25),
    inset 0 -1px 0 oklch(1 0 0 / 0.05);
  -webkit-backdrop-filter: blur(var(--amga-blur)) saturate(150%);
          backdrop-filter: blur(var(--amga-blur)) saturate(150%);
  animation: amga-enter .8s .05s both;
}
/* soft light edge */
.amga-welcome::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(160deg, oklch(1 0 0 / 0.45), transparent 35%, transparent 65%, oklch(1 0 0 / 0.15));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
/* fallback for browsers without backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .amga-welcome { background: var(--amga-glass-strong); }
}

.welcome-logo {
  display: block;
  width: clamp(56px, 14vw, 74px); height: auto; aspect-ratio: 74 / 82;
  margin: 0 auto clamp(14px, 3vw, 20px); object-fit: contain;
  filter: drop-shadow(0 8px 18px oklch(0.05 0.03 255 / 0.4));
  animation: amga-enter .7s .1s both, logo-breathe 4s 1s ease-in-out infinite;
}
.amga-eyebrow { font-size: 11px; text-transform: uppercase; font-weight: 600; color: var(--accent); margin: 0 0 14px; letter-spacing: .08em; }
.amga-welcome h1 {
  font-family: var(--amga-font);
  font-size: clamp(24px, 6.2vw, 36px); line-height: 1.3;
  margin: 0 auto 16px; font-weight: 700; text-wrap: balance;
  overflow-wrap: anywhere;
}
.amga-greeting {
  max-width: 490px; margin: 0 auto;
  font-size: clamp(12.5px, 3.2vw, 14px); line-height: 1.8;
  color: var(--muted-foreground);
}

.amga-reveal { animation: amga-enter .75s both; }
.amga-reveal:nth-child(3) { animation-delay: .2s; }
.amga-reveal:nth-child(4) { animation-delay: .3s; }
.amga-reveal:nth-child(5) { animation-delay: .4s; }

/* ============ WEATHER ============ */
.amga-weather {
  margin: clamp(18px, 3vw, 24px) auto 14px; padding: 16px 0;
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 8px 16px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  text-align: left;
}
.amga-weather-icon { font-size: 32px; line-height: 1; flex-shrink: 0; animation: logo-breathe 5s infinite; }
.weather-info { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; }
.weather-location { display: block; margin: 0 0 4px; color: var(--accent); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.weather-detail { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.weather-description { margin: 0; font-size: 12px; color: var(--muted-foreground); text-align: left; }
.weather-temp { font-family: var(--amga-font); font-size: clamp(22px, 5vw, 26px); margin-left: 0; }
.amga-datetime { color: var(--muted-foreground); font-size: 11px; margin: 12px 0 clamp(20px, 4vw, 28px); }

/* ============ PUZZLE ============ */
.amga-puzzle { animation: amga-enter .8s .5s both; }
.puzzle-heading {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 7px; margin: 0 0 14px; color: var(--foreground); font-size: 13px; font-weight: 500;
}
.puzzle-heading svg { width: 14px; color: var(--accent); }
.puzzle-heading strong { color: var(--accent); }

.letter-slots, .letter-bank { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(6px, 1.8vw, 8px); }
.letter-slot {
  width: var(--slot-w); height: var(--slot-h);
  position: relative; display: grid; place-items: center;
  border: 1px dashed var(--amga-glass-border); border-radius: 8px;
  font-family: var(--amga-font); font-size: clamp(17px, 4.6vw, 21px);
  color: var(--foreground);
  background: oklch(0.15 0.04 255 / 0.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.letter-slot .letter-button { width: 100%; height: 100%; border: 1px solid var(--accent); }
.letter-slot.empty::after { content: ''; width: 12px; height: 2px; background: var(--border); }

.letter-bank { margin: 15px 0 12px; }
.letter-button {
  width: var(--slot-w); height: calc(var(--slot-h) - 4px); min-height: 44px; padding: 0;
  border: 1px solid var(--amga-glass-border); border-radius: 8px;
  background: oklch(0.35 0.09 258 / 0.55); color: var(--foreground);
  font: 600 clamp(16px, 4.4vw, 19px) var(--amga-font);
  box-shadow: var(--amga-shadow);
  transition: transform .2s, background .2s, border-color .2s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.letter-button:active { transform: scale(.94); }
.letter-button:disabled { opacity: .22; }
.puzzle-tool {
  background: transparent; color: var(--muted-foreground); border: 0;
  width: 44px; height: 44px; min-height: 44px; padding: 10px; box-shadow: none;
}
.puzzle-feedback {
  min-height: 24px; margin: 0; display: flex; justify-content: center; align-items: center;
  gap: 6px; color: var(--muted-foreground); font-size: 11px; text-wrap: balance;
}
.puzzle-feedback.success { color: var(--amga-success); }
.puzzle-feedback.error { color: var(--amga-danger); }
.puzzle-controls { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 2px; }

/* ============ BUTTON ============ */
.amga-button {
  background: var(--primary); color: var(--primary-foreground);
  border: 1px solid var(--primary); border-radius: 10px;
  font-weight: 600; min-height: 48px; padding: 0 25px;
  box-shadow: var(--amga-shadow), 0 0 0 0 transparent;
  transition: transform .2s, background .2s, box-shadow .2s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.amga-button:active { transform: scale(.98); }
.amga-button:disabled { opacity: .3; }
.entry-button { margin-top: 15px; min-width: min(225px, 100%); }

/* hover only on devices that really hover (avoids sticky hover on touch) */
@media (hover: hover) {
  .letter-button:hover:not(:disabled) { transform: translateY(-4px); border-color: var(--accent); background: var(--amga-blue); }
  .puzzle-tool:hover { color: var(--accent); background: oklch(1 0 0 / 0.08); }
  .amga-button:hover:not(:disabled) { transform: translateY(-2px); background: oklch(0.89 0.15 90); border-color: oklch(0.89 0.15 90); box-shadow: var(--amga-shadow), 0 8px 24px oklch(0.83 0.16 86 / 0.35); }
}

/* ============ FOOTER ============ */
.amga-footer {
  position: relative; z-index: 1;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px;
  padding: 20px var(--space-x) calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  color: var(--muted-foreground); font-size: 10px; text-align: center;
  animation: amga-enter .9s .7s both;
}
.amga-footer span { display: flex; align-items: center; gap: 5px; }
.amga-footer svg { width: 12px; height: 12px; color: var(--accent); }

/* ============ LOADING VIEW ============ */
.loading-view {
  position: fixed; z-index: 30; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--background); text-align: center;
  padding: max(24px, env(safe-area-inset-top, 0px)) 24px max(24px, env(safe-area-inset-bottom, 0px));
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif; color: var(--foreground);
  overflow-y: auto;
}
.loading-view .amga-eyebrow { margin-top: 36px; }
.loading-view h2 { font-family: var(--amga-font); font-size: clamp(17px, 4.6vw, 21px); line-height: 1.5; margin: 0 0 12px; text-wrap: balance; }
.loading-status { font-size: 12px; color: var(--muted-foreground); }

.orbit-scene { width: min(320px, 80vw); aspect-ratio: 1; height: auto; position: relative; display: grid; place-items: center; animation: amga-enter .7s both; }
.orbit-logo { width: 26%; height: auto; aspect-ratio: 83 / 94; object-fit: contain; animation: logo-breathe 2.5s ease-in-out infinite; }
.orbit-ring { position: absolute; border: 1px solid var(--border); border-radius: 50%; }
.orbit-ring.inner  { width: 44%; height: 44%; border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); animation: orbit-spin 5s linear infinite; }
.orbit-ring.middle { width: 58%; height: 58%; border-right: 2px solid var(--amga-blue); border-left: 2px solid var(--primary); animation: orbit-spin 9s linear infinite reverse; }
.orbit-ring.outer  { width: 86%; height: 86%; border-style: dashed; opacity: .6; }

.department-orbit { position: absolute; inset: 0; animation: orbit-spin 32s linear infinite; }
.department-position { position: absolute; inset: 0; transform: rotate(var(--orbit-angle)); }
.department-icon {
  position: absolute; left: calc(50% - 22px); top: 2px; width: 44px; height: 44px;
  border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--amga-glass-border); background: oklch(0.28 0.055 252 / 0.7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--accent); transform: rotate(calc(-1 * var(--orbit-angle)));
}
.department-icon svg { width: 21px; height: 21px; animation: orbit-spin 32s linear infinite reverse; }
.department-position:nth-child(3n+2) .department-icon { color: var(--amga-blue); }
.department-position:nth-child(3n) .department-icon { color: var(--primary); }
.department-position:nth-child(1) { --orbit-angle: 0deg; }
.department-position:nth-child(2) { --orbit-angle: 40deg; }
.department-position:nth-child(3) { --orbit-angle: 80deg; }
.department-position:nth-child(4) { --orbit-angle: 120deg; }
.department-position:nth-child(5) { --orbit-angle: 160deg; }
.department-position:nth-child(6) { --orbit-angle: 200deg; }
.department-position:nth-child(7) { --orbit-angle: 240deg; }
.department-position:nth-child(8) { --orbit-angle: 280deg; }
.department-position:nth-child(9) { --orbit-angle: 320deg; }

.loading-track { width: 160px; height: 2px; overflow: hidden; background: var(--border); margin: 24px auto; }
.loading-track::after { content: ''; display: block; width: 50%; height: 100%; background: var(--accent); animation: loading-slide 1.5s ease-in-out infinite; }

/* compact orbit used inside the loading view */
.loading-view .orbit-scene { width: 160px; }
.loading-view .orbit-logo { width: 42px; }
.loading-view .department-icon { width: 24px; height: 24px; left: calc(50% - 12px); }
.loading-view .department-icon svg { width: 12px; height: 12px; }
.loading-view .loading-status { margin-top: 22px; }

.legacy-site { display: block; width: 100%; height: 100vh; height: 100svh; border: 0; background: var(--background); }

/* ============ KEYFRAMES ============ */
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes logo-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.04); } }
@keyframes amga-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes loading-slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* ============ BREAKPOINTS ============ */
/* large / tall screens */

/* tablets & phones */
@media (max-width: 600px) {
  .amga-location { font-size: 11px; max-width: 118px; line-height: 1.3; gap: 6px; }
  .amga-location i { font-size: 13px; }
  .amga-brand strong { font-size: 12px; }
  .amga-weather { gap: 8px 12px; }
  .weather-temp { margin-left: 0; }
  .weather-location { font-size: 9px; }
  .amga-datetime { font-size: 10px; }
  .amga-footer { font-size: 9px; gap: 6px 13px; }
  .entry-button { width: 100%; }
  :where(.amga-opening) { --amga-blur: 16px; }   /* lighter blur = smoother on mobile GPUs */
}

/* very small phones (≤ 360px) */
@media (max-width: 360px) {
  .amga-welcome { width: calc(100% - 24px); padding-inline: 14px; }
  .amga-header { padding-inline: 14px; }
  .amga-weather { flex-direction: row; text-align: left; }
}

/* landscape phones / short viewports */
@media (max-height: 600px) {
  .amga-header { padding-block: 12px 8px; }
  .amga-welcome { margin-block: 8px 16px; padding-block: 18px; }
  .welcome-logo { width: 44px; margin-bottom: 8px; }
  .amga-greeting { display: none; }
  .amga-weather { margin-block: 12px 8px; padding-block: 10px; }
  .amga-datetime { margin-bottom: 14px; }
  .amga-footer { padding-block: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .amga-opening *, .loading-view * { animation: none !important; transition: none !important; }
  .loading-track::after { width: 100%; }
}

/* ============ PORTABLE OVERLAY ============ */
.amga-opening.portable-opening {
  position: fixed; inset: 0; z-index: 10001;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transition: opacity .3s ease;
}
.portable-opening.splash-hidden { opacity: 0; pointer-events: none; }
.amga-opening button { cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.amga-opening button:disabled { cursor: default; }
.amga-opening button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.amga-opening .letter-slot button { font: 600 clamp(16px, 4.4vw, 19px) var(--amga-font); }
.amga-opening .welcome-logo { display: block; }

/* isolate welcome bands from legacy header/footer selectors */
.amga-opening .amga-header { position: relative; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--foreground); }
.amga-opening .amga-header::before, .amga-opening .amga-header::after { content: none; }
.amga-opening .amga-footer { background: transparent; border: 0; border-top: 1px solid var(--border); box-shadow: none; margin: 0; }
.amga-opening .amga-footer::before, .amga-opening .amga-footer::after { content: none; }
.amga-opening .puzzle-heading i, .amga-opening .puzzle-tool i { color: var(--accent); }

/* ===== Countdown sambutan (pengganti pemilih bulan) ===== */
.splash-countdown { --dial: min(240px, 62vw); display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2vw, 18px); width: 100%; }
.splash-countdown .puzzle-heading { margin: 0; text-align: center; }
.cd-dial { position: relative; width: var(--dial); aspect-ratio: 1; margin: clamp(10px, 2.4vw, 16px) 0; }
.cd-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.cd-track, .cd-bar { fill: none; stroke-width: 5; }
.cd-track { stroke: var(--border); }
.cd-bar { stroke: url(#cdGrad); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; filter: drop-shadow(0 0 8px oklch(0.87 0.14 90 / .55)); }
.splash-countdown.run .cd-bar { animation: cd-fill var(--cd-dur, 5s) linear forwards; }
.splash-countdown.is-done .cd-bar { animation: none; stroke-dashoffset: 0; }
.cd-dash { position: absolute; inset: -9%; border: 1px dashed var(--amga-glass-border); border-radius: 50%; animation: cd-spin 24s linear infinite; }
.cd-dash::after { content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.cd-center { position: absolute; inset: 9%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 50%; background: radial-gradient(circle, oklch(1 0 0 / .12), oklch(1 0 0 / .02) 72%); }
.cd-num { font: 700 calc(var(--dial) * .34) var(--amga-font); line-height: 1; color: var(--foreground); }
.cd-num.pop { animation: cd-pop .5s cubic-bezier(.3, 1.5, .5, 1); }
.cd-unit { font-size: clamp(10px, calc(var(--dial) * .055), 13px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.splash-countdown.is-done .cd-num { color: var(--amga-success); }
.cd-message { width: 100%; min-height: 5.2em; display: flex; align-items: center; justify-content: center; text-align: center; font-size: clamp(12.5px, 3.3vw, 14px); line-height: 1.7; color: var(--foreground); }
.cd-message p { margin: 0; max-width: 42ch; text-wrap: balance; animation: amga-enter .7s both; }
.cd-message small { display: block; margin-bottom: 4px; color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.splash-countdown .entry-button { width: min(260px, 100%); }
.entry-button.is-ready { animation: cd-pulse 1.6s ease-in-out 2; }
@keyframes cd-fill { from { stroke-dashoffset: 326.7; } to { stroke-dashoffset: 0; } }
@keyframes cd-spin { to { transform: rotate(360deg); } }
@keyframes cd-pop { from { transform: scale(.6); opacity: .3; } to { transform: scale(1); opacity: 1; } }
@keyframes cd-pulse { 50% { box-shadow: var(--amga-shadow), 0 0 0 9px oklch(0.83 0.16 86 / .25); } }
@media (max-height: 560px) and (max-width: 899px) { .splash-countdown { --dial: min(190px, 52vw); } .cd-message { min-height: 4.4em; } }

/* ===== v75: layout satu kolom di tengah (semua ukuran layar), tema kaca tetap ===== */
.amga-opening .amga-header { display: none; }
.amga-welcome {
  margin-block: clamp(16px, 4vh, 40px);
  padding: clamp(22px, 4vh, 38px) clamp(18px, 5vw, 44px) clamp(22px, 3.6vh, 34px);
}
.welcome-logo { width: clamp(52px, 9vh, 72px); margin-bottom: clamp(10px, 2vh, 16px); }
.amga-eyebrow { margin-bottom: 8px; }
.amga-welcome h1 { font-size: clamp(24px, 4.4vw, 34px); margin-bottom: 12px; }
.amga-greeting { max-width: 520px; }
.amga-weather { margin: clamp(14px, 2.4vh, 20px) auto 10px; padding: 12px 0; justify-content: center; }
.amga-datetime { margin: 8px 0 clamp(12px, 2.4vh, 20px); }
.splash-countdown { --dial: clamp(116px, 22vh, 168px); gap: clamp(8px, 1.6vh, 14px); }
.cd-dial { margin: clamp(6px, 1.4vh, 12px) 0; }
.cd-message { min-height: 4.6em; }
.splash-countdown .entry-button { width: min(320px, 100%); margin-top: 4px; }
@media (max-width: 600px) {
  /* ringan di HP: tanpa blob blur besar, blur kaca lebih kecil */
  .amga-shade::before, .amga-shade::after { filter: none; opacity: .35; }
  .amga-shade::before { background: radial-gradient(circle, var(--amga-blue), transparent 68%); }
  .amga-shade::after { background: radial-gradient(circle, var(--primary), transparent 68%); opacity: .16; }
  .cd-dash { animation: none; }
  :where(.amga-opening) { --amga-blur: 12px; }
}
@media (max-height: 640px) {
  .amga-greeting { display: none; }
  .cd-message { min-height: 3.6em; }
}

/* v75b: muat satu layar di laptop (tinggi ~650px) */
@media (min-width: 601px) { .amga-welcome h1 br { display: none; } }
.amga-welcome { margin-block: clamp(8px, 2vh, 24px); padding-block: clamp(16px, 3vh, 34px); }
.welcome-logo { width: clamp(44px, 7.5vh, 68px); margin-bottom: clamp(6px, 1.4vh, 14px); }
.amga-weather { padding: clamp(6px, 1.2vh, 12px) 0; margin-block: clamp(10px, 1.8vh, 18px) 6px; }
.amga-datetime { margin-bottom: clamp(8px, 1.6vh, 16px); }
.splash-countdown { --dial: clamp(84px, 13vh, 118px); gap: clamp(6px, 1.2vh, 12px); }
.cd-message { min-height: 4.2em; }

.amga-button:disabled{opacity:1}

/* ===== v77: ikon cuaca dikembalikan ke emoji dari API (plek ketiplek v65),
   menggantikan SVG custom yang bentuknya kurang cocok — markup & CSS lain
   di sekitarnya (kartu kaca, layout) tetap seperti v76/v77. */

/* ===== v77: sedikit pattern pembeda dari v76, sangat halus (tidak mengubah
   nuansa kaca navy-gold v76) — titik-titik tipis menyapu lembut di overlay
   kartu, supaya splash v77 tetap terasa beda walau sekilas sama dengan v76. */
.amga-welcome {
  background-color: var(--amga-glass);
  background-image:
    radial-gradient(oklch(1 0 0 / 0.05) 1px, transparent 1.6px),
    linear-gradient(135deg, var(--amga-glass-highlight), transparent 45%);
  background-size: 15px 15px, auto;
  background-position: 0 0, 0 0;
  animation: amga-enter .8s .05s both, amga-pattern-drift 26s linear infinite;
}
@keyframes amga-pattern-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 90px 90px, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .amga-welcome { animation: amga-enter .8s .05s both; }
}