:root {
  --bg-cyan: #6af7ff;
  --bg-blue: #4aa3ff;
  --bg-pink: #ff75d8;
  --paper: #f7ffff;
  --paper-2: #f2f7ff;
  --ink: #14305a;
  --hot-pink: #ff4cc7;
  --violet: #785dff;
  --sky: #39d9ff;
  --mint: #77ffc8;
  --sun: #f8ff74;
  --acid: #b8ff40;
  --deep: #16213d;
  --shadow: rgba(22, 33, 61, 0.28);
  --glitter-a: #ffffff;
  --glitter-b: #ff74d3;
  --glitter-c: #42e5ff;
}

* {
  box-sizing: border-box;
}

html {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.5) 0 3px, transparent 4px),
    radial-gradient(circle at 80% 25%, rgba(255, 255, 255, 0.5) 0 2px, transparent 3px),
    radial-gradient(circle at 15% 70%, rgba(255, 255, 255, 0.35) 0 4px, transparent 5px),
    linear-gradient(180deg, #d7ff75 0%, #ff7cdb 28%, #4ea8ff 68%, #74f7ff 100%);
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 50%, transparent 50%),
    linear-gradient(rgba(255, 255, 255, 0.1) 50%, transparent 50%);
  background-size: 18px 18px;
}

a {
  color: #d91baa;
  text-decoration-style: wavy;
}

a:hover {
  color: #275fff;
}

code {
  padding: 0 0.28rem;
  border: 1px dotted rgba(120, 93, 255, 0.5);
  background: rgba(255, 255, 255, 0.78);
  font-family: "Courier New", monospace;
}

.page-frame {
  position: relative;
  width: min(1380px, calc(100% - 24px));
  margin: 12px auto 28px;
  padding: 18px 18px 56px;
  border: 6px double #ffffff;
  outline: 4px dashed #3fe6ff;
  background:
    linear-gradient(180deg, rgba(215, 255, 117, 0.9) 0%, rgba(255, 124, 219, 0.88) 28%, rgba(78, 168, 255, 0.9) 68%, rgba(116, 247, 255, 0.92) 100%),
    repeating-linear-gradient(45deg, rgba(255, 117, 216, 0.16) 0 14px, rgba(106, 247, 255, 0.18) 14px 28px);
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.45),
    0 18px 40px var(--shadow);
  overflow: hidden;
}

.page-frame::before,
.page-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.page-frame::before {
  inset: 10px;
  border: 3px dotted rgba(120, 93, 255, 0.28);
}

.page-frame::after {
  top: 24px;
  right: 18px;
  width: 120px;
  height: 120px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 30%, transparent 31%),
    radial-gradient(circle, rgba(255, 76, 199, 0.28) 0 58%, transparent 59%);
  opacity: 0.7;
}

.window,
.deco,
.mini-card,
.scrap-card,
.journal-entry,
.shelf-item {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  box-shadow: 5px 6px 0 rgba(66, 229, 255, 0.34);
}

.window {
  margin-bottom: 18px;
  padding: 14px;
}

.hero {
  margin-bottom: 20px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(248, 255, 255, 0.95), rgba(244, 247, 255, 0.97)),
    repeating-linear-gradient(90deg, rgba(106, 247, 255, 0.22) 0 12px, rgba(255, 117, 216, 0.12) 12px 24px);
}

.hero-tag,
.tiny-label,
.panel-tabs span,
.button-wall a,
.mini-card,
.shelf-item,
.deco,
.hero-photo span {
  font-family: "Press Start 2P", monospace;
}

.hero-tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 10px;
  font-size: 0.62rem;
  color: #fff;
  background: linear-gradient(90deg, var(--deep), var(--hot-pink));
  border: 2px solid #fff;
  box-shadow: 3px 3px 0 rgba(120, 93, 255, 0.35);
}

.hero-inner {
  display: grid;
  grid-template-columns: 2.15fr 1fr;
  gap: 18px;
  align-items: center;
}

.hero h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  line-height: 1;
  letter-spacing: 0.03em;
  color: #37f248;
  text-shadow:
    2px 2px 0 #ffffff,
    4px 4px 0 rgba(255, 76, 199, 0.82);
}

.tiny-label {
  display: inline-block;
  margin: 0 0 10px;
  padding: 8px 10px;
  font-size: 0.52rem;
  line-height: 1.5;
  background: #efff7d;
  border: 2px dotted #31dfff;
}

.lede {
  max-width: 62ch;
  font-size: 1.08rem;
}

.photo-placeholder {
  min-height: 200px;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(255, 127, 225, 0.5) 0 12px, rgba(106, 247, 255, 0.55) 12px 24px);
}

.hero-photo span {
  font-size: 0.58rem;
  line-height: 1.8;
}

.marquee-box {
  margin-top: 16px;
  padding: 10px;
  background: rgba(247, 255, 255, 0.84);
}

.layout-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(210px, 0.95fr) minmax(420px, 1.8fr) minmax(210px, 0.95fr);
  gap: 18px;
  align-items: start;
}

.sidebar {
  position: relative;
}

.main-column {
  position: relative;
}

.main-column::before,
.main-column::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 74px;
  height: 74px;
  border-radius: 18px;
  opacity: 0.7;
}

.main-column::before {
  top: 72px;
  left: -20px;
  background: rgba(184, 255, 64, 0.35);
  transform: rotate(-10deg);
}

.main-column::after {
  bottom: 120px;
  right: -26px;
  background: rgba(255, 76, 199, 0.26);
  transform: rotate(14deg);
}

.main-panel {
  padding-top: 0;
}

.panel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px -2px 14px;
}

.panel-tabs span {
  padding: 8px 10px;
  font-size: 0.52rem;
  background: #e6ffff;
  border: 2px solid #37ddff;
}

h2,
h3 {
  margin-top: 0;
}

h2 {
  font-size: 1.45rem;
  color: #6a3fff;
  text-shadow: 1px 1px 0 #fff;
}

p,
li {
  line-height: 1.55;
}

.mini-gallery,
.scrap-row,
.journal-grid {
  display: grid;
  gap: 12px;
}

.mini-gallery {
  grid-template-columns: 1fr 1fr;
  margin-top: 10px;
}

.mini-card {
  min-height: 72px;
  display: grid;
  place-items: center;
  padding: 12px 8px;
  text-align: center;
  font-size: 0.52rem;
  line-height: 1.55;
}

.button-wall {
  display: grid;
  gap: 8px;
}

.button-wall a {
  display: inline-block;
  padding: 8px 10px;
  font-size: 0.52rem;
  line-height: 1.4;
  text-align: center;
  color: #18315f;
  text-decoration: none;
  background:
    linear-gradient(180deg, #efff79 0%, #70f6ff 100%);
  border: 2px solid #ffffff;
  outline: 2px solid #ff52c9;
}

.tiny-list {
  padding-left: 18px;
  margin-bottom: 0;
}

.scrap-row {
  grid-template-columns: 1fr 1fr;
  margin-top: 16px;
}

.scrap-card {
  padding: 14px;
}

.deco-showcase {
  position: relative;
  min-height: 390px;
  margin-top: 14px;
  padding: 18px;
  background:
    radial-gradient(circle at top left, rgba(184, 255, 64, 0.28), transparent 25%),
    radial-gradient(circle at bottom right, rgba(66, 229, 255, 0.38), transparent 28%),
    linear-gradient(180deg, rgba(248, 255, 255, 0.95), rgba(242, 247, 255, 0.98));
  overflow: hidden;
}

/* Reusable center area for instructions while decorations float around it. */
.deco-demo-text {
  position: relative;
  z-index: 2;
  width: min(100%, 430px);
  margin: 92px auto 0;
  padding: 16px;
  background: rgba(248, 255, 255, 0.9);
  border: 3px dashed #38deff;
}

.journal-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.journal-entry {
  padding: 12px;
}

.treasure-stack {
  display: grid;
  gap: 10px;
}

.shelf-item {
  padding: 12px 10px;
  font-size: 0.54rem;
  line-height: 1.6;
  text-align: center;
}

.link-list {
  list-style: square;
  padding-left: 20px;
  margin-bottom: 0;
}

.footer {
  margin-top: 12px;
  text-align: center;
  font-size: 0.98rem;
}

.floating-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.sparkle {
  position: absolute;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 8px rgba(255, 76, 199, 0.82);
}

.sparkle-1 { top: 22px; left: 30px; }
.sparkle-2 { top: 160px; right: 70px; }
.sparkle-3 { top: 420px; left: 18px; }
.sparkle-4 { bottom: 180px; right: 30px; }
.sparkle-5 { bottom: 36px; left: 60px; }
.sparkle-6 { top: 56%; left: 83%; }

.corner-decor {
  pointer-events: none;
}

.corner {
  position: absolute;
}

.corner-tl { top: 40px; left: 8px; }
.corner-tr { top: 52px; right: 16px; }
.corner-bl { bottom: 88px; left: 12px; }
.corner-br { right: 10px; bottom: 64px; }

.deco {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 68px;
  min-height: 52px;
  padding: 8px;
  text-align: center;
  line-height: 1.4;
  color: #28407a;
  background:
    linear-gradient(180deg, rgba(249, 255, 255, 0.97), rgba(242, 247, 255, 0.96));
}

.deco img {
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  display: block;
}

.deco-sm {
  width: 72px;
  min-height: 56px;
  font-size: 0.48rem;
}

.deco-md {
  width: 104px;
  min-height: 72px;
  font-size: 0.52rem;
}

.deco-lg {
  width: 140px;
  min-height: 96px;
  font-size: 0.56rem;
}

/* Layer and tilt helpers are meant to be mixed onto any .deco item. */
.layer-low { z-index: 1; }
.layer-mid { z-index: 3; }
.layer-top { z-index: 5; }

.tilt-left { transform: rotate(-6deg); }
.tilt-right { transform: rotate(6deg); }
.tilt-soft-left { transform: rotate(-3deg); }
.tilt-soft-right { transform: rotate(3deg); }

.deco-star::before,
.deco-heart::before,
.deco-flower::before,
.deco-bow::before,
.deco-toy::before,
.deco-scrap::before,
.deco-trash::before,
.deco-weird::before,
.mini-card::before,
.shelf-item::before {
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
}

.deco-star::before { content: "\2605"; color: var(--sun); }
.deco-heart::before { content: "\2665"; color: var(--hot-pink); }
.deco-flower::before { content: "\273f"; color: var(--violet); }
.deco-bow::before { content: "\0F04"; color: var(--violet); }
.deco-toy::before { content: "\25A3"; color: var(--sky); }
.deco-scrap::before { content: "\2702"; color: #1fd4a2; }
.deco-trash::before { content: "\2726"; color: var(--acid); }
.deco-weird::before { content: "\263C"; color: #8a63ff; }

.deco-frame::before { font-size: 1.1rem; }
.shelf-item::before { content: "\2726"; color: var(--hot-pink); }

.dotted-border,
.border-dotted {
  border: 3px dotted #ff59cb;
}

.dashed-border,
.border-dashed {
  border: 3px dashed #32deff;
}

.double-border,
.border-double {
  border: 5px double #7b60ff;
}

.bevel-border,
.border-bevel {
  border-width: 4px;
  border-style: solid;
  border-color: #ffffff #ff58cb #36dfff #ffffff;
  box-shadow:
    inset 2px 2px 0 #ffffff,
    inset -2px -2px 0 rgba(120, 93, 255, 0.55),
    5px 6px 0 rgba(66, 229, 255, 0.32);
}

.glitter-border,
.border-glitter {
  border: 4px solid transparent;
  border-image: repeating-linear-gradient(
    45deg,
    var(--glitter-a) 0 6px,
    var(--glitter-b) 6px 12px,
    var(--glitter-c) 12px 18px,
    #fff5b7 18px 24px
  ) 1;
}

.pixel-border,
.border-pixel {
  border: 4px solid #18305d;
  box-shadow:
    0 0 0 4px #ffffff,
    0 0 0 8px #ff54c9;
}

.stack-border {
  border: 3px solid #ffffff;
  outline: 3px solid #38deff;
  box-shadow:
    0 0 0 8px #efff79,
    5px 6px 0 rgba(66, 229, 255, 0.36);
}

.left-column .window:nth-child(2) {
  margin-left: 10px;
}

.right-column .window:nth-child(1) {
  margin-right: 8px;
}

.right-column .window:nth-child(3) {
  margin-top: -6px;
}

@media (max-width: 1024px) {
  .layout-grid {
    grid-template-columns: 1fr;
  }

  .hero-inner {
    grid-template-columns: 1fr;
  }

  .scrap-row,
  .journal-grid {
    grid-template-columns: 1fr;
  }

  .deco-showcase {
    min-height: 520px;
  }

  .corner {
    opacity: 0.7;
  }
}

@media (max-width: 680px) {
  .page-frame {
    width: calc(100% - 12px);
    margin: 6px auto 18px;
    padding: 12px 12px 44px;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .hero-tag,
  .tiny-label,
  .panel-tabs span,
  .button-wall a,
  .mini-card,
  .shelf-item,
  .deco,
  .hero-photo span {
    font-size: 0.5rem;
  }

  .deco-showcase {
    min-height: 620px;
    padding: 12px;
  }

  .deco-demo-text {
    margin-top: 180px;
  }
}