@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Myanmar:wght@600;700&display=swap');

:root {
  color-scheme: dark;
  font-family: 'Noto Sans Myanmar', 'Myanmar MN', 'Myanmar Text', sans-serif;
  background: #130f1c;
  color: #fff0e6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 50% 48%, #64404d50, transparent 48%),
    radial-gradient(ellipse at 24% 24%, #59396b30, transparent 48%),
    radial-gradient(ellipse at 80% 80%, #493e6830, transparent 45%),
    #130f1c;
}
.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.ambient::before, .ambient::after {
  content: '';
  position: absolute;
  inset: 13% 18%;
  border: 1px solid #dfbad00b;
  border-radius: 50%;
  transform: rotate(-24deg);
}
.ambient::after { inset: 20% 10%; transform: rotate(24deg); border-color: #dfbad006; }
.page {
  position: relative;
  width: min(100%, 980px);
  height: 100vh;
  height: 100svh;
  margin-inline: auto;
  padding: clamp(24px, 5vh, 48px) clamp(28px, 6vw, 72px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(24px, 5vh, 44px);
  justify-items: center;
}
.character-row {
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(12px, 3vw, 34px);
  pointer-events: none;
  user-select: none;
}
.portrait {
  position: relative;
  width: min(100%, 212px);
  aspect-ratio: 4 / 5;
  max-height: 100%;
  border: 1px solid #fff0e62b;
  border-radius: 26px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 28%, var(--glow), transparent 85%), var(--base);
  box-shadow: 0 20px 40px #0004, inset 0 1px 0 #ffffff1a;
  transform: translateY(var(--offset)) rotate(var(--rotation));
}
.portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 6px #ffffff05;
  background: linear-gradient(transparent 65%, #130f1c50);
}
.portrait img {
  position: absolute;
  display: block;
  width: var(--image-width);
  max-width: none;
  height: auto;
  left: var(--image-x, 50%);
  top: var(--image-top, 0%);
  transform: translateX(-50%);
  filter: drop-shadow(0 4px 8px #0002);
}
.portrait-1 { --base: #31413d; --glow: #95b4a56b; --rotation: -10deg; --offset: 12px; --image-width: 112%; }
.portrait-2 { --base: #463242; --glow: #b386a455; --rotation: -3deg; --offset: -12px; --image-width: 128%; }
.portrait-3 { --base: #5c4239; --glow: #e3b39c66; --rotation: 9deg; --offset: 12px; --image-width: 148%; --image-x: 30%; }
.portrait-4 { --base: #353547; --glow: #a9a5c955; --rotation: 8deg; --offset: -8px; --image-width: 155%; --image-top: -3%; }
.portrait-5 { --base: #583333; --glow: #d99b7966; --rotation: 3deg; --offset: 12px; --image-width: 138%; --image-top: 3%; --image-x: 16%; }
.portrait-6 { --base: #293e46; --glow: #83b5ba55; --rotation: -9deg; --offset: -8px; --image-width: 135%; --image-top: -3%; --image-x: 45%; }
.read-button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: min(100%, 580px);
  min-height: 86px;
  padding: 18px 24px 18px 32px;
  border: 1px solid #fff0df;
  border-radius: 100px;
  color: #352029;
  background: linear-gradient(110deg, #ffe6cd, #ffc9ac);
  box-shadow: 0 0 0 7px #ffcfaf07, 0 12px 48px #ffb98e24, inset 0 1px 0 #fff8;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.9;
  text-align: center;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.button-arrow {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #35202920;
  border-radius: 50%;
  background: #ffffff26;
}
.button-label span { white-space: nowrap; }
.read-button:hover { box-shadow: 0 0 0 7px #ffcfaf12, 0 14px 60px #ffb98e38; transform: translateY(-2px); }
.read-button:active { transform: translateY(0); }
.read-button:focus-visible { outline: 3px solid #fff; outline-offset: 8px; }
::selection { color: #352029; background: #ffe6cd; }

@media (max-width: 700px) and (orientation: portrait) {
  .page { padding: 32px 24px; gap: clamp(30px, 6vh, 50px); }
  .character-row { gap: 10px; }
  .portrait { width: 110%; aspect-ratio: 3 / 4; border-radius: 18px; }
  .portrait::after { box-shadow: inset 0 0 0 4px #ffffff05; }
  .portrait-1, .portrait-3 { --offset: 12px; }
  .portrait-2 { --offset: -6px; }
  .portrait-4, .portrait-6 { --offset: -12px; }
  .portrait-5 { --offset: 6px; }
  .read-button { width: calc(100% + 8px); min-height: 78px; padding: 16px 18px; gap: 10px; font-size: clamp(14px, 4vw, 18px); }
  .button-arrow { flex-basis: 30px; width: 30px; height: 30px; }
  .button-arrow svg { width: 17px; height: 17px; }
  .ambient::before { inset: 23% -30%; }
  .ambient::after { inset: 17% -38%; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .page { width: min(100%, 760px); padding: 20px 48px; gap: 22px; }
  .character-row { gap: 36px; }
  .portrait { width: auto; height: 100%; max-width: 100%; border-radius: 14px; }
  .portrait-1, .portrait-3 { --offset: 3px; }
  .portrait-2 { --offset: -3px; }
  .portrait-4, .portrait-6 { --offset: -3px; }
  .portrait-5 { --offset: 3px; }
  .read-button { width: min(100%, 450px); min-height: 58px; padding: 10px 18px; gap: 14px; font-size: 16px; }
  .button-arrow { flex-basis: 32px; width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .read-button { transition: none; } }