/* Tristans Verden — LEGO/Minecraft styling. No border-radius anywhere. */

* {
  box-sizing: border-box;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1b1b1b;
  font-family: 'VT323', monospace;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

/* fixed body: no iOS rubber-banding, and safe-area padding for notches */
body {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

@supports (height: 100dvh) {
  body { height: 100dvh; }
}

#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1024px;
  height: 768px;
  overflow: hidden;
  transform-origin: 0 0;
  transform: scale(1);
  background: #1b1b1b;
}

/* ---- mockup base classes ---- */
.px { font-family: 'Press Start 2P', monospace; }
.clocknum { font-family: 'Press Start 2P', monospace; }

.bevel {
  border: 4px solid #000;
  box-shadow: inset -5px -7px 0 rgba(0, 0, 0, .28), inset 5px 7px 0 rgba(255, 255, 255, .35);
}

.bevel-sm {
  border: 3px solid #000;
  box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .28), inset 3px 4px 0 rgba(255, 255, 255, .35);
}

img { image-rendering: pixelated; }

.screen {
  position: relative;
  overflow: hidden;
}

/* ---- tap feedback ---- */
.tap { cursor: pointer; }
.tap:active { transform: translateY(3px); }

/* ---- answer cards ---- */
.card { cursor: pointer; position: relative; }

.card.dead {
  opacity: .4;
  pointer-events: none;
}

.card.shake { animation: tvShake 380ms steps(6, end) 1; }

@keyframes tvShake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-14px); }
  40%  { transform: translateX(14px); }
  60%  { transform: translateX(-10px); }
  80%  { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

.card.right {
  animation: tvRight 600ms ease-out 1;
}

@keyframes tvRight {
  0%   { box-shadow: 0 0 0 0 rgba(90, 191, 58, 0), inset -5px -7px 0 rgba(0,0,0,.28), inset 5px 7px 0 rgba(255,255,255,.35); }
  25%  { box-shadow: 0 0 0 6px #5abf3a, 0 0 34px 12px rgba(90, 191, 58, .95), inset -5px -7px 0 rgba(0,0,0,.28), inset 5px 7px 0 rgba(255,255,255,.35); }
  100% { box-shadow: 0 0 0 6px #5abf3a, 0 0 20px 6px rgba(90, 191, 58, .5), inset -5px -7px 0 rgba(0,0,0,.28), inset 5px 7px 0 rgba(255,255,255,.35); }
}

.card.guide { animation: tvGuide 900ms ease-in-out infinite; }

@keyframes tvGuide {
  0%, 100% { box-shadow: 0 0 0 5px #5abf3a, 0 0 14px 4px rgba(90,191,58,.5), inset -5px -7px 0 rgba(0,0,0,.28), inset 5px 7px 0 rgba(255,255,255,.35); }
  50%      { box-shadow: 0 0 0 7px #7cff52, 0 0 40px 14px rgba(90,191,58,.95), inset -5px -7px 0 rgba(0,0,0,.28), inset 5px 7px 0 rgba(255,255,255,.35); }
}

/* ---- mascot jump ---- */
.mascot.jump { animation: tvJump 700ms ease-out 1; }

@keyframes tvJump {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-54px) rotate(-6deg); }
  50%  { transform: translateY(0) rotate(0deg); }
  70%  { transform: translateY(-24px) rotate(5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* ---- flying diamond ---- */
.flydiamond {
  position: absolute;
  z-index: 60;
  pointer-events: none;
  transition: left 600ms cubic-bezier(.35, -.2, .5, 1), top 600ms cubic-bezier(.35, -.2, .5, 1), transform 600ms ease-in;
}

/* ---- hint arrow + cursor ---- */
#hint { pointer-events: none; z-index: 40; }
.hint-arrow { animation: tvHintArrow 1100ms ease-in-out infinite; }
.hint-cursor { animation: tvHintCursor 1100ms ease-in-out infinite; }

@keyframes tvHintArrow {
  0%, 100% { transform: translateY(-14px); opacity: .55; }
  50%      { transform: translateY(10px); opacity: 1; }
}

@keyframes tvHintCursor {
  0%, 100% { transform: translate(0, -18px) scale(1); }
  45%      { transform: translate(0, 12px) scale(1.12); }
  60%      { transform: translate(0, 12px) scale(.9); }
}

/* ---- diamond progress slot pop ---- */
.slot.pop { animation: tvPop 320ms ease-out 1; }

@keyframes tvPop {
  0%   { transform: scale(.4); }
  60%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ---- reward: confetti ---- */
.confetti {
  position: absolute;
  z-index: 30;
  animation: tvFall linear infinite;
}

@keyframes tvFall {
  0%   { transform: translateY(-120px) rotate(0deg); opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(880px) rotate(760deg); opacity: 0; }
}

.prize { animation: tvPrize 800ms cubic-bezier(.2, 1.5, .5, 1) 1; }

@keyframes tvPrize {
  0%   { transform: translateY(150px) scale(.2); opacity: 0; }
  60%  { transform: translateY(-24px) scale(1.12); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.newbadge { animation: tvBadge 1000ms ease-in-out infinite; }

@keyframes tvBadge {
  0%, 100% { transform: rotate(8deg) scale(1); }
  50%      { transform: rotate(8deg) scale(1.12); }
}

.rays { animation: tvSpin 26s linear infinite; }

@keyframes tvSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- interactive clock (set-the-hand) ---- */
.draghand { cursor: grab; }
.setclock svg { touch-action: none; }

/* ---- "LIGE NU" badge (real-clock task) ---- */
.nowbadge { animation: tvNow 1200ms ease-in-out infinite; }

@keyframes tvNow {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}

/* ---- golden figures ---- */
.golden {
  filter: sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(1.18)
          drop-shadow(0 0 12px rgba(252, 219, 5, .8));
}

.goldglow {
  box-shadow: 0 0 0 4px #fcdb05, 0 0 30px 10px rgba(252, 219, 5, .6);
}

/* ---- spell-the-word (Ord-Skoven level 6) ---- */
.spellslot {
  width: 84px;
  height: 100px;
  border: 5px dashed #fcdb05;
  background: rgba(27, 27, 27, .55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.spellslot.filled {
  border-style: solid;
  background: rgba(90, 191, 58, .55);
}

.spellslot.pop { animation: tvSlotPop 320ms ease-out 1; }

@keyframes tvSlotPop {
  0%   { transform: scale(.5); }
  55%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.spelltile {
  width: 96px;
  height: 110px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spelltile[style*="hidden"] { pointer-events: none; }

/* ---- daily chest banner ---- */
.dailybanner { animation: tvDaily 1000ms ease-in-out infinite; }

@keyframes tvDaily {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* ---- Min Verden build grid ---- */
.bcell { cursor: pointer; }
.bcell.pop { animation: tvPop 260ms ease-out 1; }
.bcell.nope { animation: tvNope 200ms ease-out 1; }

@keyframes tvNope {
  0%   { box-shadow: inset 0 0 0 4px #c8382e; }
  70%  { box-shadow: inset 0 0 0 4px #c8382e; }
  100% { box-shadow: inset 0 0 0 4px rgba(200, 56, 46, 0); }
}

.palitem:active { transform: translateY(2px); }
#figures img { image-rendering: pixelated; }

/* ---- grown-up overview ---- */
.parentscroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.parentscroll::-webkit-scrollbar { width: 10px; }
.parentscroll::-webkit-scrollbar-thumb { background: #4a4a4a; }