/* ==========================================================================
   Polly Space — main page (button board)
   Desktop positions come from main-page/polly-space-ws.svg: a 1440px-wide
   design, content ending around y=1543. Every value is a % of a 1440 x 1640 box.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#FFFFFF;color:#000000;font-family:Arial,Helvetica,sans-serif}
img{display:block;max-width:100%;height:auto}

.board{position:relative;width:100%;max-width:1440px;margin:0 auto;aspect-ratio:1440/1640}

/* Title: x 47, y 79, w 1029 */
.title{position:absolute;left:3.244%;top:4.845%;width:71.48%;margin:0}
.title img{width:100%}

/* Clickable items */
.item{position:absolute;display:block;padding:0;border:0;background:none;cursor:pointer;line-height:0;-webkit-tap-highlight-color:transparent}
.item img{width:100%;transition:transform .2s ease,filter .2s ease}
.item:hover img,
.item:focus-visible img{transform:translateY(-6px) scale(1.04);filter:drop-shadow(0 10px 12px rgba(0,0,0,.18))}
.item:active img{transform:translateY(-2px) scale(1.01)}
.item:focus{outline:none}
.item:focus-visible{outline:3px dashed #000000;outline-offset:8px;border-radius:12px}

/* Buttons row (x, y, width from the design) */
.btn-blue {left:16.227%;top:16.556%;width:12.755%}
.btn-red  {left:35.578%;top:16.746%;width:11.506%}
.btn-heart{left:53.718%;top:17.064%;width:11.245%}
.btn-daisy{left:73.058%;top:16.161%;width:12.599%}

/* Daisies (x 144, y 617, w 1152) with the envelope on top of them */
.arrangement{position:absolute;left:10.017%;top:37.613%;width:79.967%}
.daisies{position:relative;z-index:1;width:100%;pointer-events:none;user-select:none}
.envelope{z-index:2;left:59.79%;top:12.025%;width:29.557%}

/* "coming soon" bubble (added by js/main.js) */
.bubble{position:absolute;left:50%;bottom:calc(100% + 10px);z-index:10;transform:translate(-50%,4px);
  padding:7px 12px;border-radius:999px;background:#000000;color:#FFFFFF;
  font:700 14px/1 Arial,Helvetica,sans-serif;white-space:nowrap;letter-spacing:.02em;
  opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease}
.bubble::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:#000000}
.bubble.show{opacity:1;transform:translate(-50%,0)}

/* Footer */
.main-footer{padding:0 16px 32px;text-align:center}
.main-footer p{margin:0;font-size:12px;color:#666666}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion: reduce){
  .item img,.bubble{transition:none}
  .item:hover img,.item:focus-visible img,.item:active img{transform:none}
}

/* ---------- Phones: normal flow, buttons in a 2x2 grid ---------- */
@media (max-width: 700px){
  .board{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:28px 16px;padding:28px 16px 48px;justify-items:center;align-items:center}
  .title{position:static;grid-column:1/-1;width:100%;margin-bottom:8px}
  .board > .item{position:relative;left:auto;top:auto;width:min(140px,38vw)}
  .arrangement{position:relative;left:auto;top:auto;grid-column:1/-1;width:100%;margin-top:8px}
  .bubble{font-size:13px}
}