@keyframes cellClickAnim {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-0.4em); }
  60%  { transform: translateY(-0.4em) rotate(3deg); }
  80%  { transform: translateY(-0.4em) rotate(-3deg); }
  100% { transform: translateY(0); }
}

@keyframes pressAnim {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.press-animate {
  animation: pressAnim 0.3s ease;
}

@keyframes rollOut {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-100%); opacity: 0; }
}

@keyframes rollIn {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.roll-out {
  animation: rollOut 0.4s forwards;
}

.roll-in {
  animation: rollIn 0.4s forwards;
}

.calendar-day {
  /* ensure transforms don’t overflow neighboring cells */
  transform-origin: center center;
}

.calendar-day.click-animate {
  animation: cellClickAnim 0.4s ease-out;
}

#calendar-btn.click-animate {
  animation: cellClickAnim 0.4s ease-out;
}

@keyframes calendarFloatCenter {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 3px)); }
}

@keyframes calendarFloatSide {
  0%, 100% { transform: translateY(-50%); }
  50% { transform: translateY(calc(-50% - 3px)); }
}

#calendar-btn .calendar-display .date-number {
  animation: calendarFloatCenter 4s ease-in-out infinite;
}

#calendar-btn .calendar-display .date-day,
#calendar-btn .calendar-display .date-month {
  animation: calendarFloatSide 4s ease-in-out infinite;
}

#calendar-btn .calendar-display .date-month {
  animation-delay: 0.2s;
}

#calendar-btn .calendar-display .date-day {
  animation-delay: 0.4s;
}

#calendar-btn .calendar-display .date-number.roll-in,
#calendar-btn .calendar-display .date-day.roll-in,
#calendar-btn .calendar-display .date-month.roll-in {
  animation: rollIn 0.4s forwards;
}

#calendar-btn .calendar-display .date-number.roll-out,
#calendar-btn .calendar-display .date-day.roll-out,
#calendar-btn .calendar-display .date-month.roll-out {
  animation: rollOut 0.4s forwards;
}



.checklist-panel {
  position: fixed;
  top: 8vh; /* below navbar */
  right: -320px;
  width: 300px;
  max-width: 80vw;
  height: calc(100vh - 8vh);
  background: rgba(0, 20, 40, 0.95);
  color: var(--text-color);
  padding: 1rem;
  box-sizing: border-box;
  transition: right 0.5s ease;
  z-index: 900;
  overflow-y: auto;
}

.checklist-panel.active {
  right: 0;
}

/* … keep your existing body, navbar styles unchanged … */

.bottom-waves {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 12vh; /* matches navbar proportionally */
  min-height: 40px;
  overflow: hidden;
  z-index: 5;
}

.bottom-waves .nav-wave {
  transition: background 0.6s;
  position: absolute;
  bottom: 0;
  width: 200%;
  height: 250%;
  opacity: 0.2;
  background: linear-gradient(
    135deg,
    var(--wave-color1) 0%,
    var(--wave-color2) 50%,
    var(--wave-color3) 100%
  );
  clip-path: polygon(
    0% 100%, 20% 80%, 40% 100%, 60% 80%, 80% 100%, 100% 80%, 100% 100%, 0% 100%
  );
  animation: bottomWaveAnim var(--wave-speed) infinite linear;
}

.bottom-waves .nav-wave.nav-wave2 {
  opacity: 0.1;
  animation-duration: calc(var(--wave-speed) * 1.25);
  animation-direction: reverse;
}

.bottom-waves .nav-wave.nav-wave3 {
  opacity: 0.08;
  animation-duration: calc(var(--wave-speed) * 1.5);
}

@keyframes bottomWaveAnim {
  0%   { transform: translateX(0%) translateY(0); }
  25%  { transform: translateX(-12.5%) translateY(calc(var(--wave-amplitude) * -1)); }
  50%  { transform: translateX(-25%) translateY(0); }
  75%  { transform: translateX(-37.5%) translateY(var(--wave-amplitude)); }
  100% { transform: translateX(-50%) translateY(0); }
}

.particles div {
  transition: background 0.6s;
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--accent-color);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  opacity: 0;
  animation: rise var(--particle-speed) infinite ease-in-out;
  width: 100%;
  height: 100%;
  max-width: 10px;
  max-height: 10px;
  min-width: 2px;
  min-height: 2px;
  pointer-events: none;
}

@keyframes rise {
  0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 0; }
  20% { opacity: 0.8; }
  100% { transform: translateY(-50vh) scale(0.8) rotate(360deg); opacity: 0; }
}

#novel-container {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 8vh); /* below navbar */
  padding: 1rem;
  box-sizing: border-box;
  position: relative;
}

#cut-in-left,
#cut-in-right {
  position: fixed;
  top: 8vh;
  bottom: 0;
  width: 20vw;
  z-index: 1001;
  overflow: hidden;

  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);

  /* start offscreen */
  transform: translateX(-100%);
}

#cut-in-right {
  left: auto;
  right: 0;
  transform: translateX(100%);
}

#cut-in-left {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

#cut-in-right {
  clip-path: polygon(100% 100%, 0 100%, 100% 0);
}

/* slide in */
#cut-in-left.active {
  transform: translateX(0);
}

#cut-in-right.active {
  transform: translateX(0);
}

/* inner content (wiggle only) */
.wiggle-inner {
  width: 100%;
  height: 100%;
  background: inherit;
  background-image: inherit;
}

.wiggle-inner.wiggling {
  animation: wiggle 3s infinite ease-in-out 0.6s;
}

@keyframes wiggle {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-2px); }
  50%  { transform: translateY(2px); }
  75%  { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

#text-area {
  flex: 1;
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem 2rem 6vh;
  border-radius: 0.5rem;
  line-height: 1.8;
  font-size: 1.1rem;
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  position: relative;
}

#text-area.visible {
  opacity: 1;
  transform: translateY(0);
}

#text-area.fade-out {
  opacity: 0;
}

#text-area p {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#text-area p.visible {
  opacity: 1;
  transform: translateY(0);
}

p {
  margin-bottom: 1rem;
}

@keyframes warp {
  0% { transform: skewX(0deg); }
  50% { transform: skewX(3deg); }
  100% { transform: skewX(0deg); }
}

#text-area.warp {
  animation: warp 0.5s ease;
}


#line-indicator {
  position: absolute;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 1;
  overflow: visible;
}

#line-indicator .triangle {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: none;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(0, 153, 255, 0.5));
}

#line-indicator .triangle::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-bottom: 1em solid rgba(0, 153, 255, 0.3);
  animation: erratic 1.5s infinite ease-in-out alternate;
}


#line-indicator .triangle:nth-child(1) {
  animation-delay: 0s;
}

#line-indicator .triangle:nth-child(2) {
  animation-delay: 0.2s;
  opacity: 0.7;
}

#line-indicator .triangle:nth-child(3) {
  animation-delay: 0.4s;
  opacity: 0.5;
}

@keyframes erratic {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateX(-2px) translateY(1px) rotate(-2deg) scale(1.05);
  }
  50% {
    transform: translateX(1px) translateY(-2px) rotate(2deg) scale(0.95);
  }
  75% {
    transform: translateX(-1px) translateY(2px) rotate(-1deg) scale(1.1);
  }
  100% {
    transform: translateX(2px) translateY(-1px) rotate(1deg) scale(1);
  }
}


#text-area p.current {
  background: rgba(0, 60, 255, 0.085);
}



#line-counter {
  position: absolute;
  left: 0; /* adjust this below */
  width: auto;
  text-align: left;
  font-size: 1.5rem; /* smaller */
  font-weight: bold;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  transition: top 0.3s ease, left 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  z-index: 5;
  opacity: 1;
  transform: translateY(-50%);
}

#line-indicator.off {
  transform: translateX(-50px) scale(0);
  opacity: 0;
}

#line-counter.off {
  transform: translateX(-50px) translateY(-50%) scale(0);
  opacity: 0;
}


.event-particle {
  position: fixed;
  width: 12px;
  height: 12px;
  background: #ffbb00;
  pointer-events: none;
  z-index: 10000;

  /* shape */
  clip-path: polygon(
    50% 0%,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0% 50%,
    40% 40%
  );

  box-shadow: 0 0 8px rgba(0,170,255,0.6);
  animation: star-spin 1s linear infinite;
}

@keyframes star-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(45deg) scale(1.2); }
  100% { transform: rotate(90deg) scale(1); }
}

/* --------------------------------------------------
   Responsive adjustments
   -------------------------------------------------- */
@media (max-width: 600px) {
  .navbar {
    height: 50px;
    padding: 0 0.5rem;
  }

  #novel-container {
    flex-direction: column;
    padding: 0.5rem;
  }

  #text-area {
    margin: 1rem 0;
    padding: 1rem;
    font-size: 1rem;
  }

  #cut-in-left,
  #cut-in-right {
    width: 40vw;
  }

  .calendar-panel,
  .checklist-panel {
    width: 100%;
    max-width: none;
    border-radius: 0;
  }

  .checklist-panel {
    right: -100%;
  }

  .schedule-panel .schedule-grid {
    grid-template-columns: 1fr;
  }

  .calendar-grid {
    grid-auto-rows: 40px;
  }
}

/* body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 170, 255, 0.1) 40%,
    rgba(0, 170, 255, 0) 80%
  );
  transition: background 1s ease, opacity 1s ease;
  opacity: 0.7;
  animation: vignettePulseLow 8s infinite ease-in-out;
}

body.intensity-medium::before {
  animation: vignettePulseMedium 4s infinite ease-in-out;
}

body.intensity-high::before {
  animation: vignettePulseHigh 2s infinite ease-in-out;
}

/* Animations */ /*
@keyframes vignettePulseLow {
  0%   { transform: scaleX(1) scaleY(1); opacity: 0.2; }
  25%  { transform: scaleX(1.05) scaleY(0.95); opacity: 0.25; }
  50%  { transform: scaleX(0.97) scaleY(1.03); opacity: 0.15; }
  75%  { transform: scaleX(1.02) scaleY(0.98); opacity: 0.22; }
  100% { transform: scaleX(1) scaleY(1); opacity: 0.2; }
}

@keyframes vignettePulseMedium {
  0%   { transform: scaleX(1) scaleY(1); opacity: 0.5; }
  20%  { transform: scaleX(1.1) scaleY(0.9); opacity: 0.85; }
  40%  { transform: scaleX(0.95) scaleY(1.05); opacity: 0.45; }
  60%  { transform: scaleX(1.07) scaleY(0.93); opacity: 0.52; }
  80%  { transform: scaleX(0.98) scaleY(1.02); opacity: 0.48; }
  100% { transform: scaleX(1) scaleY(1); opacity: 0.5; }
}

@keyframes vignettePulseHigh {
  0%   { transform: scaleX(1) scaleY(1); opacity: 0.9; }
  15%  { transform: scaleX(1.2) scaleY(0.8); opacity: 0.95; }
  30%  { transform: scaleX(0.9) scaleY(1.1); opacity: 0.85; }
  45%  { transform: scaleX(1.15) scaleY(0.85); opacity: 0.93; }
  60%  { transform: scaleX(0.92) scaleY(1.08); opacity: 0.87; }
  75%  { transform: scaleX(1.1) scaleY(0.9); opacity: 0.9; }
  100% { transform: scaleX(1) scaleY(1); opacity: 0.9; }
} */

.intensity-edges {
  position: fixed;
  top: 8vh;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 900;
}

.edge-svg {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5vw;
  height: 100%;
  fill: none;
  stroke: var(--accent-color);
  stroke-width: 0.7;
  opacity: 0.7;
  transition: stroke 0.3s ease;
}

.edge-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


.edge-left {
  left: 0;
}

.edge-right {
  right: 0;
  transform: scaleX(-1);
}

body.intensity-high .edge-svg {
  animation: colorPulse 2s infinite alternate ease-in-out;
}

@keyframes colorPulse {
  0%   { stroke: var(--accent-color); }
  100% { stroke: #66ffff; }
}

.edge-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.edge-full .edge-path {
  fill: var(--accent-color);
  fill-opacity: 0.6;
  stroke: none;
  fill-rule: evenodd;
}

.free-time-banner {
  position: fixed;
  top: 0;
  left: 0; /* not -100% anymore */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 200% 200%;
  animation: bannerBackgroundScroll 6s linear infinite;
  z-index: 2000;
  pointer-events: none;
  overflow: hidden;
}

@keyframes bannerBackgroundScroll {
  0%   { background-position: 0 0; }
  100% { background-position: 200px 0; }
}


.free-time-banner-bar {
  position: absolute;
  top: 0;
  left: -200px;
  height: 100vh;
  background: rgba(0, 170, 255, 0.4);
  z-index: 0;
  pointer-events: none;
  transform: skewX(-20deg); /* slant the bar */
  animation: barMove linear forwards;
}


@keyframes barMove {
  from { transform: translateX(0) skewX(-20deg); }
  to   { transform: translateX(120vw) skewX(-20deg); }
}


.free-time-banner span {
  position: absolute;
  font-size: 3rem;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0.4em;
  color: var(--text-color);
  white-space: nowrap;
  transform: translateX(-100vw);
  opacity: 0; /* hide by default */
  z-index: 2;
}

.free-time-banner span.enter,
.free-time-banner span.hold,
.free-time-banner span.exit {
  opacity: 1; /* only visible during animation */
}

@keyframes textEnter {
  from { transform: translateX(-100vw); }
  to   { transform: translateX(0); }
}

@keyframes textHold {
  0%, 100% { transform: translateX(0); }
}

@keyframes textExit {
  from { transform: translateX(0); }
  to   { transform: translateX(100vw); }
}

.free-time-banner span.enter {
  animation: textEnter 1s ease-out forwards;
}

.free-time-banner span.hold {
  animation: textHold 1s linear forwards;
}

.free-time-banner span.exit {
  animation: textExit 1s ease-in forwards;
}

.free-time-menu.pop {
  animation: freeTimeMenuPop 0.6s ease-out forwards;
}

@keyframes freeTimeMenuPop {
  0% { transform: scale(0); }
  60% { transform: scale(1.1); }
  80% { transform: scale(0.95); }
100% { transform: scale(1); }
}

@keyframes locationDrop {
  0% { transform: translate(-50%, -50%) scale(1); }
  60% { transform: translate(-50%, 150%) scale(1.3); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.location-display.drop {
  animation: locationDrop 0.8s ease-in-out;
}