:root {
  --stage-w: 1920;
  --stage-h: 1080;
}

* { box-sizing: border-box; }

@font-face {
  font-family: "sHand";
  src: url("assets/fonts/S_Hand.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  font-family: 'Comic Sans MS', 'Segoe Print', cursive, sans-serif;
}

.viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

/* Fixed 1920x1080 design canvas, scaled uniformly to fit the viewport. */
.stage {
  position: relative;
  width: calc(var(--stage-w) * 1px);
  height: calc(var(--stage-h) * 1px);
  transform-origin: center center;
  flex-shrink: 0;
}

.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  pointer-events: none;
  user-select: none;
}

.archivelayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  pointer-events: none;
  user-select: none;
}


.pole-bg { z-index: 1; }

.shine {
  z-index: 2;
  mix-blend-mode: screen;
  opacity: 1;
}

.overlay {
  z-index: 6;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.stage.paper-open .overlay {
  opacity: 1;
}

.stage.archive-open .overlay {
  opacity: 1;
}

/* ---- generic icon button (idle/hover image swap) ---- */
.icon-btn {
  position: absolute;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 5;
}


.icon-btn img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.icon-btn .hover {
  opacity: 0;
  transform: translate(var(--hover-x, 0px), var(--hover-y, 0px))
             rotate(var(--hover-r, 0deg))
             scale(var(--hover-s, 1));
}

/* per-icon nudges: +x right, +y down, +r clockwise (degrees), --hover-s resize (1 = none) */
.paper-icon   { --hover-x: 0px; --hover-y: 1px; --hover-r: 0deg; --hover-s: 1.005; }
.folder-icon  { --hover-x: 0px; --hover-y: 0px; --hover-r: 0deg; --hover-s: 1; }
.xbutton-icon { --hover-x: 0px; --hover-y: 0px; --hover-r: 0deg; --hover-s: 1; }
.pay-icon     { --hover-x: 0px; --hover-y: 0px; --hover-r: 0deg; --hover-s: 1; }
.pay-kofi     { --hover-x: 0px; --hover-y: 0px; --hover-r: 0deg; --hover-s: 1; }


.icon-btn:hover .idle,
.icon-btn:focus-visible .idle { opacity: 0; }
.icon-btn:hover .hover,
.icon-btn:focus-visible .hover { opacity: 1; }

   .icon-btn.playing .idle  { opacity: 0; }
   .icon-btn.playing .hover { opacity: 1; }


@keyframes iconShake {
  0%   { transform: translateY(-1px); }
  20%  { transform: translateY(+5px); }
  40%  { transform: translateY(+6px); }
  60%  { transform: translateY(+6px); }
  80%  { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

.icon-btn.shaking {
  animation: iconShake 0.45s ease;
}

/* ---- paper icon (pinned note) ---- */
.paper-icon {
  left: 1113px;
  top: 235px;
  width: 259px;
  height: 348px;
}

/* ---- xbutton icon ---- */
.xbutton-icon {
  left: 1333px;
  top: 600px;
  width: 158px;
  height: 183px;
}
.folder-icon {
  left: 1070px;
  top: 550px;
  width: 259px;
  height: 348px;
}

.icon-btn-icon {
  left: 1151px;
  top: 624px;
  width: 158px;
  height: 183px;
}


.radio {
  left: 1420px;
  top: 790px;
  width: 96px;
  height: 290px;
}

/* ---- big paper view ---- */
.paper-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.archive-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease;
}




.stage.paper-open .paper-view {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.stage.archive-open .archive-view {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


.paper-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  background: transparent;
  cursor: pointer;
}

.paper-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  pointer-events: none;
  user-select: none;
}

.archive-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  background: transparent;
  cursor: pointer;
}
.archive-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  pointer-events: none;
  user-select: none;
}


.pay-icon {
  left: 870px;
  top: 525px;
  width: 135px;
  height: 142px;
}

.pay-kofi {
  left: 690px;
  top: 535px;
  width: 99px;
  height: 115px;
}

.stickers {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
}

.sticker {
  position: absolute;
  top: 695px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.2s ease;
}

.sticker img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.sticker:hover { transform: translateY(+4px); }

.sticker.removed {
  opacity: 0;
  pointer-events: none;
  transform: translateY(40px) scale(0.9);
}

.sticker[data-id="1"] { left: 191px; width: 71px;  height: 219px; }
.sticker[data-id="2"] { left: 268px; width: 67px;  height: 237px; }
.sticker[data-id="3"] { left: 339px; width: 70px;  height: 238px; }
.sticker[data-id="4"] { left: 409px; width: 61px;  height: 225px; }
.sticker[data-id="5"] { left: 474px; width: 73px;  height: 217px; }
.sticker[data-id="6"] { left: 538px; width: 62px;  height: 254px; }
.sticker[data-id="7"] { left: 594px; width: 65px;  height: 219px; }
.sticker[data-id="8"] { left: 650px; width: 57px;  height: 204px; }

.hitzone {
  position: absolute;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.hitzone:disabled {
  cursor: default;
  pointer-events: none;
}
.closeA { left: 1000px; top: 70px; width: 60px; height: 60px; }
.closeP { left: 1000px; top: 70px; width: 60px; height: 60px; }
.undo-zone { left: 887px; top: 700px; width: 40px; height: 200px; }
.redo-zone { left: 953px; top: 700px; width: 48px; height: 200px; }

.price-readout {
  position: absolute;
  left: 755px;
  top: 699px;
  width: 20px;
 font-family: "sHand", sans-serif;
  font-size: 45px;
  color: #1c3f7a;
  pointer-events: none;
  white-space: nowrap;
}