/* ==========================================================================
   SmooshQube (smooshqube.html): her dressing room, on top of fun.css (the page, the header, the tray)
   ========================================================================== */

/* She's a little taller than wide: as tall as the stage lets her be (--qh), standing on the floor */
.qube-room .fun-stage {
  --qh: min(52vh, 500px);
  --size: calc(var(--qh) * 0.62);   /* the floor under her (fun.css) */
}

@supports (width: 1cqh) {
  .qube-room .fun-stage {
    --qh: min(calc(100cqh - 20px), 118cqw, 720px);
  }
}

.qube {
  position: relative;
  z-index: 2;
  width: calc(var(--qh) * 0.7186);   /* her picture's box: 332 x 462 */
  height: var(--qh);
  margin-bottom: calc(var(--qh) * -0.035);
  cursor: pointer;
}

.qube svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Breathing, a hop when she's dressed, a wave when she's tapped (her arms turn at the shoulder) */
.qube .q-figure {
  transform-box: view-box;
  transform-origin: 120px 352px;
  animation: qubeBreathe 3s ease-in-out infinite;
}

.qube.is-hopping .q-figure {
  animation: qubeHop 0.5s ease-out;
}

.qube .q-arm-r {
  transform-box: view-box;
  transform-origin: 195px 162px;
}

.qube.is-waving .q-arm-r {
  animation: qubeWave 1.1s ease-in-out;
}

.qube.is-blinking .q-lids {
  display: inline;
}

@keyframes qubeBreathe {
  50% { transform: translateY(-2px) scale(1.01, 0.99); }
}

@keyframes qubeHop {
  0% { transform: none; }
  30% { transform: translateY(-28px); }
  55% { transform: none; }
  70% { transform: scale(1.05, 0.94); }
  100% { transform: none; }
}

@keyframes qubeWave {
  20%, 50%, 80% { transform: rotate(-150deg); }
  35%, 65% { transform: rotate(-125deg); }
}

/* Play: a big round button beside her */
.qube-play {
  position: absolute;
  z-index: 3;
  right: max(10px, calc(50% - var(--qh) * 0.36 - clamp(78px, 17vw, 124px) - 16px));
  bottom: calc(var(--qh) * 0.2);
  width: clamp(78px, 17vw, 124px);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 6px 0 var(--coral-dark), 0 14px 26px rgba(123, 92, 230, 0.28);
  font-family: var(--font-display);
  font-size: clamp(16px, 3.4vw, 23px);
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  touch-action: manipulation;
  animation: qubePlay 2.4s ease-in-out infinite;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.qube-play-icon {
  font-size: 1.55em;
  line-height: 1;
}

.qube-play:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--coral-dark);
}

@keyframes qubePlay {
  50% { scale: 1.06; }
}

/* The tray: things are tapped, not dragged, so it may scroll under a finger; what she has on is ringed */
.qube-room .tray-item,
.qube-room .tray-undress {
  cursor: pointer;
  touch-action: manipulation;
}

.qube-room .tray-item.is-on {
  background: #ffffff;
  box-shadow: inset 0 0 0 3px var(--coral);
}

.qube-room .tray-undress .item-art {
  font-size: 24px;
}

/* For measuring tray pictures */
.qube-scratch {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

/* Narrow phones: five rooms fit as icons */
@media (max-width: 480px) {
  .qube-room .tab-text {
    display: none;
  }

  .qube-room .room-tab {
    padding: 6px 13px;
    font-size: 20px;
  }
}

/* --- The game (js/qube-game.js): over the whole screen, with a sky behind it --- */
.qube-game {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  background: linear-gradient(180deg, #bfe6ff 0%, #e9e1ff 60%, #fde3ef 100%);
  touch-action: none;
}

.qube-game[hidden] {
  display: none;
}

.qube-canvas {
  position: absolute;
  inset: 0;
}

.qube-canvas canvas {
  display: block;
}

/* While she plays, her dressing room rests */
body.is-playing .qube .q-figure,
body.is-playing .qube-play {
  animation-play-state: paused;
}

/* The bar on top: hearts, gems, lives, pause and back to the dressing room */
.qube-hud {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: calc(12px + env(safe-area-inset-left, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  pointer-events: none;
}

.qube-hearts {
  display: flex;
  gap: 1px;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1;
  color: #ff4f8f;
  text-shadow: 0 2px 0 #ffffff;
}

.qube-heart.is-empty {
  color: rgba(255, 79, 143, 0.25);
}

.qube-gems,
.qube-lives,
.qube-power {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  font-size: clamp(18px, 2.4vw, 26px);
}

.qube-gems svg {
  width: 24px;
  height: 27px;
}

.qube-life svg {
  display: block;
  width: 30px;
  height: 37px;
}

.qube-hud-buttons {
  display: flex;
  gap: 8px;
  margin-left: auto;
  pointer-events: auto;
}

.qube-hud-btn {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 3px 0 rgba(123, 92, 230, 0.25);
  font-size: 22px;
  cursor: pointer;
  touch-action: manipulation;
}

.qube-power {
  position: absolute;
  top: calc(66px + env(safe-area-inset-top, 0px));
  left: calc(12px + env(safe-area-inset-left, 0px));
  padding: 4px 14px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--coral-dark);
  pointer-events: none;
}

.qube-power[hidden] {
  display: none;
}

/* Buttons to play with on touch screens: left and right, and a big jump (and bubbles, with the wand) */
.qube-pad {
  position: absolute;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: none;
  align-items: flex-end;
  gap: 14px;
}

@media (pointer: coarse) {
  .qube-pad {
    display: flex;
  }
}

.qube-pad--left {
  left: calc(16px + env(safe-area-inset-left, 0px));
}

.qube-pad--right {
  right: calc(16px + env(safe-area-inset-right, 0px));
}

.qube-key {
  width: clamp(70px, 11vw, 98px);
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 4px 0 rgba(123, 92, 230, 0.28);
  font-size: clamp(26px, 4vw, 38px);
  color: var(--coral-dark);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.qube-key.is-down {
  background: #ffffff;
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(123, 92, 230, 0.28);
}

.qube-key--jump {
  width: clamp(88px, 13.5vw, 120px);
  background: rgba(255, 122, 168, 0.88);
  color: #ffffff;
}

.qube-key--jump.is-down {
  background: #ff7aa8;
}

.qube-key[hidden] {
  display: none;
}

.qube-turn {
  position: absolute;
  left: 50%;
  bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--coral-dark);
  white-space: nowrap;
  pointer-events: none;
}

.qube-turn[hidden] {
  display: none;
}

/* Messages: paused, a life lost for good, home at last */
.qube-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(240, 222, 206, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.qube-msg[hidden] {
  display: none;
}

.qube-msg-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  padding: 26px 24px 24px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: center;
  animation: qubePop 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.qube-msg-title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  color: var(--coral);
}

.qube-msg-text {
  font-size: 17px;
  line-height: 1.45;
  color: var(--text);
}

.qube-msg-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.qube-msg-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 999px;
  background: var(--coral);
  box-shadow: 0 4px 0 var(--coral-dark);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  touch-action: manipulation;
}

.qube-msg-btn.is-quiet {
  background: #efe9ff;
  box-shadow: 0 4px 0 #d9ccff;
  color: var(--coral-dark);
}

@keyframes qubePop {
  0% { transform: translateY(12px) scale(0.97); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* Small phones: a tighter bar */
@media (max-width: 480px) {
  .qube-hud { gap: 6px; }
  .qube-hearts { font-size: 24px; }
  .qube-gems, .qube-lives { padding: 2px 10px 2px 6px; font-size: 17px; }
  .qube-life svg { width: 24px; height: 30px; }
  .qube-hud-btn { width: 42px; height: 42px; font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .qube .q-figure,
  .qube-play,
  .qube-msg-card {
    animation: none;
  }
}