/* Layout treatments only: approved logo and bird SVGs are used unchanged. */
.playful { min-height: 100svh; display: flex; flex-direction: column; }
.play-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 5%; font-size: 11px; }
.all-layouts { padding: 10px 0; white-space: nowrap; }
.play-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 24px; }
.play-nav a { padding: 10px 0; border-bottom: 2px solid transparent; }
.play-nav a:hover, .play-nav a[aria-current="page"] { border-color: currentColor; }
.play-nav a[aria-current="page"] { font-weight: 700; }
.playful h1 { width: 100%; }
.playful h1 img { width: 100%; }

/* 04: a chunky game box, with an inset lid and a solid offset edge. */
.tabletop { background: #e7eddb; }
.box-stage { position: relative; width: min(1240px, 88%); margin: auto; padding: 25px 0 60px; }
.box-edge { position: absolute; inset: 43px -13px 43px 13px; background: #246b41; border: 3px solid var(--ink); border-radius: 35px; }
.box-lid { position: relative; min-height: 640px; display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 20px; padding: 60px 6% 85px; background: #fff9e8; border: 3px solid var(--ink); border-radius: 35px; }
.box-lid::before { content: ''; position: absolute; inset: 16px; border: 2px dashed #7bad2d; border-radius: 23px; pointer-events: none; }
.box-copy { position: relative; z-index: 1; padding-bottom: 20px; }
.box-status { display: table; margin: 38px auto 0; padding: 14px 24px; font-size: clamp(16px, 2vw, 24px); font-weight: 800; background: var(--gold); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-5deg); }
.box-bird { position: relative; z-index: 1; width: 100%; }
.box-domain { position: absolute; left: 0; right: 0; bottom: 32px; font-size: 11px; letter-spacing: 1px; text-align: center; }
.box-corner { position: absolute; width: 58px; height: 58px; background: #129db1; border: 3px solid var(--ink); border-radius: 50%; }
.corner-one { top: -20px; left: 52px; }
.corner-two { right: 50px; bottom: -20px; background: #ed2635; }
.box-token { position: absolute; width: 23px; height: 23px; border: 2px solid var(--ink); border-radius: 50%; background: var(--gold); }
.token-one { top: 38px; right: 75px; }
.token-two { top: 70px; right: 40px; background: #ed2635; }
.token-three { bottom: 75px; left: 40px; background: #7bad2d; }

/* 05: oversized paper stickers on a flat blue field. */
.stickers { background: #a3dfeb; }
.sticker-stage { position: relative; width: min(1280px, 90%); min-height: 730px; margin: auto; }
.wordmark-sticker { position: absolute; z-index: 2; top: 140px; left: 1%; width: 47%; padding: 44px 38px; background: #fffdf4; border: 3px solid var(--ink); border-radius: 34px 70px 35px 60px; box-shadow: 8px 9px 0 var(--ink); transform: rotate(-7deg); }
.bird-sticker { position: absolute; z-index: 1; width: 49%; top: 65px; right: 1%; padding: 30px 20px; background: #fffdf4; border: 3px solid var(--ink); border-radius: 45% 38% 35% 22%; box-shadow: 8px 9px 0 var(--ink); transform: rotate(5deg); }
.soon-sticker { position: absolute; z-index: 3; left: 28%; top: 430px; padding: 21px 32px; background: #ed2635; color: #fffdf4; border: 3px solid var(--ink); border-radius: 50%; box-shadow: 5px 6px 0 var(--ink); font-size: 30px; font-weight: 800; line-height: 1.1; text-align: center; transform: rotate(8deg); }
.domain-sticker { position: absolute; z-index: 2; bottom: 48px; right: 7%; padding: 13px 22px; font-size: 11px; font-weight: 600; background: #fffdf4; border: 2px solid var(--ink); border-radius: 5px; transform: rotate(-3deg); }
.sticker-flower { position: absolute; left: 2%; top: 50px; width: 80px; aspect-ratio: 1; background: var(--gold); clip-path: polygon(50% 0,62% 20%,85% 8%,82% 35%,100% 50%,80% 62%,92% 88%,65% 82%,50% 100%,36% 80%,10% 92%,18% 64%,0 50%,20% 36%,8% 12%,36% 18%); transform: rotate(-10deg); }
.sticker-ring { position: absolute; bottom: 100px; left: 7%; width: 90px; height: 90px; border: 18px solid #246b41; border-radius: 50%; }
.sticker-spark { position: absolute; font-size: 75px; line-height: 1; }
.spark-one { top: 20px; left: 49%; }
.spark-two { right: 0; bottom: 90px; color: #246b41; }

/* 06: an asymmetric comic spread, with drawn rays and a speech balloon. */
.comic { background: #fff7e3; }
.comic-stage { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; width: min(1280px, 90%); margin: auto; padding: 18px 0 45px; }
.comic-title { position: relative; display: flex; align-items: center; padding: 60px 9%; background: #fffdf4; border: 4px solid var(--ink); border-radius: 5px; min-height: 590px; }
.comic-title h1 { position: relative; z-index: 1; transform: rotate(-5deg); }
.comic-spark { position: absolute; top: 27px; left: 32px; color: #ed2635; font-size: 95px; line-height: 1; }
.comic-scene { position: relative; isolation: isolate; display: flex; align-items: flex-end; padding: 95px 7% 28px; overflow: hidden; background: #ffe59b; border: 4px solid var(--ink); border-radius: 5px; }
.comic-rays { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.speech-bubble { position: absolute; top: 27px; left: 8%; z-index: 2; padding: 22px 30px; background: #fffdf4; border: 3px solid var(--ink); border-radius: 50%; font-size: 22px; font-weight: 800; transform: rotate(4deg); }
.speech-bubble::after { content: ''; position: absolute; width: 22px; height: 23px; right: 37px; bottom: -17px; background: #fffdf4; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: skewY(35deg); }
.comic-bird { width: 100%; }
.comic-caption { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; background: #7bad2d; border: 4px solid var(--ink); border-radius: 5px; font-size: 12px; font-weight: 700; letter-spacing: .6px; }
.comic-caption span { font-size: 24px; line-height: 1; }

@media (max-width: 900px) {
  .box-lid { min-height: 540px; padding-inline: 5%; }
  .sticker-stage { min-height: 650px; }
  .wordmark-sticker { padding: 32px 25px; }
  .soon-sticker { top: 370px; font-size: 25px; }
  .comic-title { min-height: 510px; }
  .speech-bubble { font-size: 18px; padding: 20px; }
}
@media (max-width: 650px) {
  .play-header { flex-direction: column; gap: 4px; padding: 14px 5% 18px; }
  .play-nav { gap: 20px; justify-content: center; font-size: 10px; }
  .all-layouts { font-size: 10px; }
  .box-stage { padding-top: 15px; padding-bottom: 35px; width: 86%; }
  .box-edge { inset: 29px -9px 22px 9px; border-radius: 26px; }
  .box-lid { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 62px 10% 72px; border-radius: 26px; }
  .box-lid::before { inset: 11px; border-radius: 17px; }
  .box-copy { padding-bottom: 0; }
  .box-status { margin-top: 25px; padding: 11px 18px; font-size: 17px; }
  .box-domain { bottom: 28px; font-size: 9px; }
  .box-corner { width: 40px; height: 40px; }
  .corner-one { left: 33px; top: -15px; }
  .corner-two { right: 30px; bottom: -15px; }
  .box-token { width: 15px; height: 15px; }
  .token-one { top: 26px; right: 45px; }
  .token-two { top: 46px; right: 24px; }
  .token-three { bottom: 75px; left: 23px; }
  .sticker-stage { width: 90%; min-height: 735px; }
  .wordmark-sticker { top: 53px; left: 6%; width: 84%; padding: 28px; border-radius: 26px 40px 25px 35px; box-shadow: 5px 6px 0 var(--ink); }
  .bird-sticker { top: 295px; right: 5%; width: 85%; padding: 24px 14px; box-shadow: 5px 6px 0 var(--ink); }
  .soon-sticker { top: 220px; left: 5%; padding: 16px 25px; font-size: 23px; }
  .domain-sticker { bottom: 18px; right: 8%; padding: 12px 18px; font-size: 10px; }
  .sticker-flower { width: 55px; top: 4px; left: 0; }
  .spark-one { top: 215px; left: auto; right: 3%; font-size: 55px; }
  .spark-two { font-size: 45px; bottom: 78px; right: 0; }
  .sticker-ring { width: 50px; height: 50px; border-width: 10px; bottom: 70px; left: 0; }
  .comic-stage { grid-template-columns: minmax(0,1fr); padding-top: 0; gap: 10px; }
  .comic-title { min-height: 235px; padding: 55px 12%; }
  .comic-spark { font-size: 53px; top: 9px; left: 12px; }
  .comic-scene { min-height: 400px; padding: 100px 9% 25px; }
  .speech-bubble { font-size: 18px; top: 16px; left: 7%; padding: 16px 24px; }
  .comic-caption { font-size: 10px; padding: 15px 20px; }
}