/* =========================================================
   Fruit Merge Game UI V2
   Visual target: polished casual-game marketing art
   Core physics/game logic remains unchanged.
   ========================================================= */

:root {
  --v2-ink: #130b2f;
  --v2-purple-1: #2a0f5e;
  --v2-purple-2: #43127f;
  --v2-purple-3: #6b26a8;
  --v2-cream: #fff5df;
  --v2-coral: #ff6252;
  --v2-gold: #ffd66e;
  --v2-pink: #ff4f9b;
}

body.game-host-page {
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 209, 114, 0.18), transparent 28%),
    radial-gradient(circle at 90% 5%, rgba(255, 95, 154, 0.16), transparent 25%),
    linear-gradient(145deg, #140b2d 0%, #090719 54%, #170b32 100%);
}

body:not(.mobile-playing) .game-host-main .game-player {
  width: min(1040px, calc(100vw - 28px));
  height: min(700px, calc(100dvh - 28px));
  border-radius: 34px;
  background: #100823;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255,255,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

body:not(.mobile-playing) .game-host-main .game-viewport {
  border-radius: 34px 34px 0 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 226, 154, 0.16), transparent 24%),
    radial-gradient(circle at 86% 10%, rgba(255, 87, 160, 0.13), transparent 26%),
    linear-gradient(145deg, #1c0c3b, #0a071c 62%, #1f0d41);
}

body:not(.mobile-playing) .game-viewport::before,
body:not(.mobile-playing) .game-viewport::after {
  opacity: 0;
}

.game-scene-v2 {
  width: min(940px, calc(100% - 54px));
  height: min(600px, calc(100dvh - 105px));
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) minmax(430px, 1.55fr);
  gap: 22px;
  align-items: center;
}

.v2-brand-panel {
  min-width: 0;
  padding: 22px 8px 22px 2px;
  align-self: center;
  color: white;
}

.v2-game-logo {
  position: relative;
  display: inline-grid;
  transform: rotate(-2deg);
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.28));
}

.v2-game-logo span,
.v2-game-logo strong {
  display: block;
  width: max-content;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-weight: 1000;
  letter-spacing: -0.07em;
  line-height: .82;
  -webkit-text-stroke: 5px #fff4df;
  paint-order: stroke fill;
  text-shadow:
    0 6px 0 #7e1a86,
    0 12px 0 #3b0c56,
    0 18px 24px rgba(0,0,0,.32);
}

.v2-game-logo span {
  color: #ffab24;
  font-size: clamp(56px, 6vw, 84px);
}

.v2-game-logo strong {
  margin-left: 14px;
  color: #ffffff;
  font-size: clamp(54px, 5.7vw, 80px);
}

.v2-tagline {
  width: max-content;
  max-width: 100%;
  margin: 32px 0 22px;
  padding: 12px 17px;
  border-radius: 16px;
  color: white;
  background: linear-gradient(180deg, #8e30c2, #5b188a);
  box-shadow:
    0 16px 32px rgba(87, 19, 132, .34),
    inset 0 1px 0 rgba(255,255,255,.24);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .015em;
}

.v2-tagline i {
  margin: 0 5px;
  color: #dfff69;
  font-style: normal;
}

.v2-goal-card {
  width: min(230px, 100%);
  padding: 16px;
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  column-gap: 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 23px;
  background:
    radial-gradient(circle at 28% 30%, rgba(255, 91, 169, .23), transparent 25%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.v2-goal-card img {
  width: 76px;
  height: 76px;
  grid-row: 1 / 4;
  object-fit: contain;
  filter:
    drop-shadow(0 0 12px rgba(255, 84, 164, .68))
    drop-shadow(0 10px 18px rgba(0,0,0,.30));
}

.v2-goal-kicker,
.v2-goal-card strong,
.v2-goal-card small {
  display: block;
}

.v2-goal-kicker {
  color: #ff88be;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .13em;
}

.v2-goal-card strong {
  margin-top: 3px;
  color: #fff;
  font-size: 16px;
  line-height: 1.05;
}

.v2-goal-card small {
  margin-top: 4px;
  color: rgba(255,255,255,.65);
  font-size: 9px;
  line-height: 1.3;
}

.v2-board-shell {
  position: relative;
  width: min(540px, 100%);
  max-height: 100%;
  justify-self: end;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 7px solid #f7d79d;
  border-radius: 34px;
  background: #211047;
  box-shadow:
    0 30px 70px rgba(0,0,0,.48),
    0 0 0 2px rgba(255,255,255,.28),
    inset 0 0 0 2px rgba(126, 69, 142, .32);
}

.v2-board-hud {
  min-height: 82px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 1.28fr repeat(3, 1fr);
  align-items: stretch;
  color: white;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 89, 173, .13), transparent 30%),
    linear-gradient(180deg, #28114f, #170b36);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
}

.v2-hud-next,
.v2-hud-stat {
  min-width: 0;
  display: grid;
  place-items: center;
  align-content: center;
  border-right: 1px solid rgba(255,255,255,.11);
}

.v2-hud-stat:last-child {
  border-right: 0;
}

.v2-hud-next {
  grid-template-columns: auto 42px;
  grid-template-rows: auto auto;
  column-gap: 8px;
}

.v2-hud-next > span,
.v2-hud-stat > span {
  color: rgba(255,255,255,.72);
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .13em;
}

.v2-hud-next > span {
  justify-self: end;
}

.v2-hud-next canvas {
  width: 42px;
  height: 42px;
  grid-column: 2;
  grid-row: 1 / 3;
}

.v2-hud-next strong {
  max-width: 80px;
  overflow: hidden;
  justify-self: end;
  color: #fff;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.v2-hud-stat strong {
  display: block;
  margin-top: 5px;
  color: #ffe7a8;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -.03em;
  text-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.v2-hud-time strong {
  font-size: 18px;
}

.game-scene-v2 .scene-center {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  min-height: 0;
  z-index: 2;
  display: block;
}

.game-scene-v2 .glass-top {
  display: none;
}

.game-scene-v2 .canvas-frame {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: #2b105c;
  box-shadow: none;
}

.game-scene-v2 #gameCanvas {
  width: 100%;
  height: 100%;
  max-height: none;
  display: block;
  object-fit: contain;
  border-radius: 0;
  background: #2b105c;
}

.v2-board-footer {
  min-height: 96px;
  padding: 8px 11px 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  background:
    linear-gradient(180deg, #fce5ba 0%, #f6cf91 100%);
  border-top: 1px solid rgba(255,255,255,.42);
}

.v2-evolution-copy {
  min-width: 70px;
}

.v2-evolution-copy span,
.v2-evolution-copy small {
  display: block;
}

.v2-evolution-copy span {
  color: #58215d;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .12em;
}

.v2-evolution-copy small {
  margin-top: 4px;
  color: #7f5872;
  font-size: 8px;
  line-height: 1.2;
}

.v2-evolution-strip.evolution-circle {
  position: relative;
  width: 100%;
  height: 58px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .55vw, 7px);
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.v2-evolution-strip.evolution-circle::before {
  display: none;
}

.v2-evolution-strip .fm-evo-item {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: clamp(26px, 3vw, 34px) !important;
  height: clamp(26px, 3vw, 34px) !important;
  margin: 0 !important;
  flex: 0 0 auto;
  transform: none !important;
  border: 1px solid rgba(96, 41, 95, .12) !important;
  background: rgba(255,255,255,.50) !important;
  box-shadow:
    0 5px 11px rgba(90, 43, 66, .12),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.v2-evolution-strip .fm-evo-item:not(:last-child)::after {
  content: "›";
  position: absolute;
  left: calc(100% + 1px);
  top: 50%;
  transform: translateY(-52%);
  color: #9d6296;
  font-size: 12px;
  font-weight: 1000;
}

.v2-evolution-strip .fm-evo-item img {
  width: 82% !important;
  height: 82% !important;
}

.v2-evolution-strip .fm-evo-item.is-active {
  background: #fff9ea !important;
  border-color: rgba(255, 83, 157, .55) !important;
  box-shadow:
    0 0 0 3px rgba(255, 74, 158, .14),
    0 7px 14px rgba(91, 34, 72, .18) !important;
}

.v2-controls {
  display: grid;
  grid-template-columns: repeat(2, 34px);
  gap: 6px;
}

.v2-controls button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(83, 32, 83, .12);
  border-radius: 11px;
  color: #522052;
  background: rgba(255,255,255,.62);
  box-shadow:
    0 6px 12px rgba(94, 41, 65, .12),
    inset 0 1px 0 rgba(255,255,255,.85);
  cursor: pointer;
  font-size: 16px;
  font-weight: 1000;
}

.v2-controls button:hover {
  transform: translateY(-1px);
  background: white;
}

.v2-hidden-data {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Premium start screen uses the website promo art, while real play uses the V2 UI. */
.viewport-start-overlay {
  background: #1b0d3a;
}

.viewport-start-overlay .cover-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(90deg, rgba(24,10,50,.10), rgba(24,10,50,.06)),
    url('/assets/ui/fruit-merge-v2-cover.webp') center / cover no-repeat;
}

.viewport-start-overlay .cover-art > * {
  display: none !important;
}

.viewport-start-overlay .cover-mask {
  background:
    linear-gradient(180deg, rgba(13,6,31,.03) 0%, rgba(13,6,31,.12) 62%, rgba(13,6,31,.48) 100%);
}

.cover-play-button {
  min-height: 54px;
  padding: 0 24px;
  border: 3px solid rgba(255,255,255,.90);
  color: white;
  background: linear-gradient(180deg, #ff7156, #ff4e68);
  box-shadow:
    0 18px 34px rgba(255, 75, 98, .34),
    inset 0 1px 0 rgba(255,255,255,.32);
}

/* Game-over card follows the new purple / cream visual language. */
.game-over-panel {
  inset: 0;
  border-radius: 0;
  background: rgba(18, 8, 44, .72);
}

.game-over-card {
  color: #2d1546;
  background:
    radial-gradient(circle at 95% 0%, rgba(255, 81, 158, .18), transparent 29%),
    linear-gradient(180deg, #fff8e9, #f8dca6);
  border: 2px solid rgba(255,255,255,.7);
}

.game-over-badge {
  background: linear-gradient(180deg, #ff6f58, #ff506f);
}

.game-over-actions .primary {
  background: linear-gradient(180deg, #8d37c2, #5f1b91);
}

/* The toolbar below the host remains compact and secondary. */
.game-host-page .game-toolbar {
  background: #100823;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* =========================================================
   Responsive / mobile immersive mode
   Existing mobile JS + HUD behavior is preserved.
   ========================================================= */

@media (max-width: 880px) {
  body:not(.mobile-playing) .game-host-main .game-player {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }

  .game-scene-v2 {
    width: min(780px, calc(100% - 22px));
    grid-template-columns: minmax(150px, .55fr) minmax(360px, 1.45fr);
    gap: 12px;
  }

  .v2-game-logo span { font-size: 45px; }
  .v2-game-logo strong { font-size: 43px; }
  .v2-goal-card { display: none; }
  .v2-tagline { font-size: 10px; }
}

body.mobile-playing .v2-brand-panel,
body.mobile-playing .v2-board-hud,
body.mobile-playing .v2-board-footer,
body.mobile-playing .v2-hidden-data {
  display: none !important;
}

body.mobile-playing .game-scene-v2 {
  display: block !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
}

body.mobile-playing .v2-board-shell {
  position: static !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.mobile-playing .game-scene-v2 .scene-center {
  /* Keep the already-tested immersive positioning rules in index.html. */
  position: fixed !important;
}

body.mobile-playing .game-scene-v2 .canvas-frame {
  border-radius: 22px !important;
  background: #28114f !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.08) !important;
}

body.mobile-playing .game-scene-v2 #gameCanvas {
  border-radius: 18px !important;
}

body.mobile-playing .mobile-game-hud {
  background: linear-gradient(180deg, rgba(41,16,82,.98), rgba(22,8,50,.98)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.35) !important;
}

body.mobile-playing .mobile-hud-pill {
  color: white !important;
  background: rgba(255,255,255,.065) !important;
  border-color: rgba(255,255,255,.09) !important;
}

body.mobile-playing .mobile-hud-pill span {
  color: rgba(255,255,255,.62) !important;
}

body.mobile-playing .mobile-hud-pill strong {
  color: #ffe6a6 !important;
}

body.mobile-playing .mobile-menu-button {
  color: #ffe6a6 !important;
  background: linear-gradient(180deg, #3a176c, #211042) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

@media (max-width: 620px) {
  body:not(.mobile-playing) .game-scene-v2 {
    width: 100%;
    height: 100%;
    display: block;
  }

  body:not(.mobile-playing) .v2-brand-panel {
    display: none;
  }

  body:not(.mobile-playing) .v2-board-shell {
    width: min(470px, calc(100vw - 12px));
    height: min(760px, calc(100dvh - 20px));
    margin: 0 auto;
    border-radius: 24px;
  }

  body:not(.mobile-playing) .v2-board-hud {
    min-height: 72px;
    padding: 7px 8px;
  }

  body:not(.mobile-playing) .v2-hud-time {
    display: none;
  }

  body:not(.mobile-playing) .v2-board-hud {
    grid-template-columns: 1.2fr 1fr 1fr;
  }

  body:not(.mobile-playing) .v2-board-footer {
    grid-template-columns: 1fr auto;
    min-height: 82px;
  }

  body:not(.mobile-playing) .v2-evolution-copy {
    display: none;
  }

  body:not(.mobile-playing) .v2-evolution-strip .fm-evo-item {
    width: 24px !important;
    height: 24px !important;
  }
}


/* =========================================================
   V2.3 EMBED MODE
   When the game runs inside fruitmerge.online's iframe,
   remove duplicated promotional chrome and give the board
   the full available space. Direct visits to play.* keep
   the branded standalone presentation.
   ========================================================= */

html.fm-embedded,
html.fm-embedded body.game-host-page {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

html.fm-embedded body:not(.mobile-playing) .v2-brand-panel,
html.fm-embedded body:not(.mobile-playing) .game-toolbar {
  display: none !important;
}

html.fm-embedded body:not(.mobile-playing) .game-host-shell,
html.fm-embedded body:not(.mobile-playing) .game-host-main {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

html.fm-embedded body:not(.mobile-playing) .game-host-main .game-player {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 212, 121, 0.10), transparent 25%),
    radial-gradient(circle at 82% 12%, rgba(255, 83, 159, 0.10), transparent 24%),
    linear-gradient(145deg, #160a31, #090719 60%, #180b34);
  box-shadow: none;
}

html.fm-embedded body:not(.mobile-playing) .game-host-main .game-viewport {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

html.fm-embedded body:not(.mobile-playing) .game-scene-v2 {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

html.fm-embedded body:not(.mobile-playing) .v2-board-shell {
  width: min(560px, calc(100vw - 24px));
  height: min(650px, calc(100dvh - 24px));
  max-width: 100%;
  max-height: 100%;
  justify-self: auto;
  margin: 0 auto;
}

/* On shorter embedded frames, trim non-essential board chrome first
   rather than shrinking the actual play area too aggressively. */
@media (max-height: 610px) and (min-width: 621px) {
  html.fm-embedded body:not(.mobile-playing) .v2-board-hud {
    min-height: 68px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  html.fm-embedded body:not(.mobile-playing) .v2-board-footer {
    min-height: 76px;
    padding-top: 4px;
    padding-bottom: 5px;
  }

  html.fm-embedded body:not(.mobile-playing) .v2-evolution-strip.evolution-circle {
    height: 48px;
  }
}

/* Small screens continue using the existing tested mobile behavior.
   Before immersive mode starts, keep only the game board visible. */
@media (max-width: 620px) {
  html.fm-embedded body:not(.mobile-playing) .game-scene-v2 {
    padding: 0;
  }

  html.fm-embedded body:not(.mobile-playing) .v2-board-shell {
    width: min(470px, 100vw);
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border-left-width: 0;
    border-right-width: 0;
  }
}


/* =========================================================
   V2.5 MOBILE EMBED LAUNCHER
   Compact pre-play presentation for the main website.
   Once Play is tapped, the existing immersive game mode takes over.
   ========================================================= */
@media (max-width: 620px) {
  html.fm-embedded body:not(.mobile-playing) .viewport-start-overlay {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    padding:
      14px
      12px
      max(16px, env(safe-area-inset-bottom))
      12px !important;
    background:
      radial-gradient(circle at 16% 8%, rgba(255, 214, 123, .14), transparent 28%),
      radial-gradient(circle at 86% 10%, rgba(255, 82, 155, .12), transparent 28%),
      linear-gradient(155deg, #1b0d3a, #0d091f 68%, #1b0b38) !important;
  }

  html.fm-embedded body:not(.mobile-playing)
  .viewport-start-overlay .cover-art {
    position: relative !important;
    inset: auto !important;
    width: min(100%, 430px) !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background:
      url('/assets/ui/fruit-merge-v2-cover.webp')
      center / cover no-repeat !important;
    box-shadow:
      0 18px 44px rgba(0, 0, 0, .34),
      0 0 0 1px rgba(255,255,255,.10) !important;
  }

  html.fm-embedded body:not(.mobile-playing)
  .viewport-start-overlay .cover-mask {
    display: none !important;
  }

  html.fm-embedded body:not(.mobile-playing)
  .cover-play-button {
    position: relative !important;
    inset: auto !important;
    width: min(86%, 310px) !important;
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 20px !important;
    flex: 0 0 auto !important;
    border: 2px solid rgba(255,255,255,.88) !important;
    border-radius: 16px !important;
    font-size: 17px !important;
    box-shadow:
      0 13px 28px rgba(255, 74, 99, .30),
      inset 0 1px 0 rgba(255,255,255,.28) !important;
  }

  html.fm-embedded body:not(.mobile-playing)
  .viewport-start-overlay::after {
    content: "Tap Play for immersive mode";
    display: block;
    color: rgba(255,255,255,.66);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .01em;
    text-align: center;
  }
}

@media (max-width: 380px) {
  html.fm-embedded body:not(.mobile-playing) .viewport-start-overlay {
    gap: 11px !important;
    padding-inline: 10px !important;
  }

  html.fm-embedded body:not(.mobile-playing)
  .viewport-start-overlay .cover-art {
    border-radius: 17px !important;
  }

  html.fm-embedded body:not(.mobile-playing)
  .cover-play-button {
    height: 50px !important;
    min-height: 50px !important;
    font-size: 16px !important;
  }
}