/* style.css - Icebound Riches theme + global layout */

.ir-bg{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -5;
}

/* Snow particles (non-interactive overlay above bg video) */
.ir-snow{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}

.ir-snow__drop{
  position: absolute;
  top: -24px;
  width: var(--size, 10px);
  height: var(--size, 10px);
  opacity: var(--alpha, 0.65);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  background: url("../assets/particles/snowdrop.svg") no-repeat center / contain;
  filter: blur(0.2px);

  animation:
    irSnowFall var(--dur, 6.5s) linear forwards,
    irSnowSway var(--swayDur, 2.8s) ease-in-out infinite;
}

@keyframes irSnowFall{
  from{ transform: translate3d(0, -10px, 0); }
  to{ transform: translate3d(0, calc(100vh + 40px), 0); }
}

@keyframes irSnowSway{
  0%{ margin-left: calc(var(--sway, 14px) * -1); }
  50%{ margin-left: var(--sway, 14px); }
  100%{ margin-left: calc(var(--sway, 14px) * -1); }
}

/* Keep stage spacing sensible on smaller screens */
body[data-game="icebound-riches"] .ui-stage{
  padding-bottom: 170px;
}

/* =========================================================
   PORTRAIT-ONLY (Mobile)
   Block gameplay in landscape on touch devices.
========================================================= */

body[data-game="icebound-riches"] .ir-orientation[hidden]{
  display: none !important;
}

body[data-game="icebound-riches"].ir-landscape-block{
  overflow: hidden;
}

body[data-game="icebound-riches"].ir-landscape-block .ui-header,
body[data-game="icebound-riches"].ir-landscape-block .ui-bottombar,
body[data-game="icebound-riches"].ir-landscape-block .ui-stage,
body[data-game="icebound-riches"].ir-landscape-block .ui-modal,
body[data-game="icebound-riches"].ir-landscape-block #irBonusOverlay{
  pointer-events: none;
}

body[data-game="icebound-riches"] .ir-orientation{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 16px;
}

body[data-game="icebound-riches"] .ir-orientation__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
}

body[data-game="icebound-riches"] .ir-orientation__panel{
  position: relative;
  width: min(520px, 92vw);
  border-radius: 16px;
  background: rgba(10, 18, 28, 0.92);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
  padding: 16px 16px 14px;
  text-align: center;
}

body[data-game="icebound-riches"] .ir-orientation__title{
  margin: 0 0 6px;
  font-weight: 950;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.92);
}

body[data-game="icebound-riches"] .ir-orientation__text{
  margin: 0;
  font-weight: 800;
  color: rgba(255,255,255,0.86);
}

/* Shield HUD: animated shield icons shown to the side of the board */
.ir-shieldHud{
  position: absolute;
  top: 18%;
  right: clamp(-56px, -4.5vw, -34px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.1vw, 12px);
  align-items: center;
  pointer-events: none;
  user-select: none;
  z-index: 5;
}

@media (max-width: 768px){
  .ir-shieldHud{
    top: 10px;
    right: 10px;
    flex-direction: row;
  }
}

.ir-shieldIcon{
  width: clamp(28px, 3.5vw, 44px);
  height: auto;
  display: block;
  opacity: 0.98;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.45));
  transform: translate3d(0,0,0);
  will-change: transform, opacity, filter;
}

@keyframes irShieldGain{
  0%{ transform: translate3d(0, 10px, 0) scale(0.6) rotate(-6deg); opacity: 0; filter: blur(0.6px); }
  60%{ transform: translate3d(0, 0, 0) scale(1.10) rotate(0deg); opacity: 1; filter: blur(0px); }
  100%{ transform: translate3d(0, 0, 0) scale(1) rotate(0deg); opacity: 1; }
}

@keyframes irShieldFloat{
  0%{ transform: translate3d(0, 0px, 0); }
  50%{ transform: translate3d(0, -3px, 0); }
  100%{ transform: translate3d(0, 0px, 0); }
}

@keyframes irShieldUse{
  0%{ transform: translate3d(0, 0, 0) scale(1); opacity: 1; filter: blur(0px); }
  100%{ transform: translate3d(0, -14px, 0) scale(0.55) rotate(-12deg); opacity: 0; filter: blur(0.8px); }
}

.ir-shieldIcon.is-gain{
  animation: irShieldGain 420ms ease-out both, irShieldFloat 3.4s ease-in-out 420ms infinite;
}

.ir-shieldIcon.is-idle{
  animation: irShieldFloat 3.6s ease-in-out infinite;
}

.ir-shieldIcon.is-use{
  animation: irShieldUse 320ms ease-in both;
}

@media (prefers-reduced-motion: reduce){
  .ir-shieldIcon,
  .ir-shieldIcon.is-gain,
  .ir-shieldIcon.is-idle,
  .ir-shieldIcon.is-use{
    animation: none !important;
    transition: none !important;
  }
}


/* Crack feedback escalates per crack */
body[data-game="icebound-riches"].ir-crack-1 .ir-container__art,
body[data-game="icebound-riches"].ir-crack-2 .ir-container__art,
body[data-game="icebound-riches"].ir-crack-3 .ir-container__art{
  transition: filter 180ms ease;
}

body[data-game="icebound-riches"].ir-crack-1 .ir-container__art{
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.45)) saturate(1.02);
}

body[data-game="icebound-riches"].ir-crack-2 .ir-container__art{
  filter: drop-shadow(0 22px 40px rgba(0,0,0,0.55)) saturate(1.05) contrast(1.03);
}

body[data-game="icebound-riches"].ir-crack-3 .ir-container__art{
  filter: drop-shadow(0 26px 48px rgba(0,0,0,0.65)) saturate(1.08) contrast(1.06);
}

@keyframes irShake{
  0%{ transform: translate(0,0) rotate(0deg); }
  10%{ transform: translate(-2px, 1px) rotate(-0.5deg); }
  20%{ transform: translate(2px, -1px) rotate(0.6deg); }
  30%{ transform: translate(-3px, -1px) rotate(-0.7deg); }
  40%{ transform: translate(3px, 2px) rotate(0.4deg); }
  50%{ transform: translate(-2px, 0px) rotate(-0.3deg); }
  60%{ transform: translate(2px, 1px) rotate(0.3deg); }
  70%{ transform: translate(-1px, -1px) rotate(-0.2deg); }
  80%{ transform: translate(1px, 0px) rotate(0.2deg); }
  90%{ transform: translate(-1px, 1px) rotate(-0.1deg); }
  100%{ transform: translate(0,0) rotate(0deg); }
}

.ir-shake{
  animation: irShake 520ms ease-in-out;
}

/* DEV: make revealed types easier to read */
body[data-game="icebound-riches"][data-dev="1"] #grid.grid--icebound .ir-tile--revealed{
  outline: 2px dashed rgba(255,255,255,0.22);
  outline-offset: -2px;
}