/*
 * Mobile fit overrides for Cozyplay portal integration
 * Applied on screens narrower than 640px (verysmallscreen breakpoint)
 * Copyright 2014 Daniel Beck, Karin Beck (original game)
 * Cozyplay integration fixes - no warranty
 */

@media (max-width: 639px) {
  /*
   * The game-buttons toolbar is fixed at left:0,top:0, ~56px wide x 220px tall.
   * The verysmallscreen tile size: card 38x48, #cards 530px wide.
   * Available game width after buttons column: 412 - 56 = 356px.
   * Scale so 530px board fits in 356px: 356/530 = 0.671 → use 0.67.
   * Position game scene starting at x=56 (past buttons column).
   */
  #gameScene {
    left: 0 !important;
    top: 0 !important;
    width: 100%;
    height: 100%;
    /* Use padding-left to shift content past the buttons column */
  }

  /* Scale the inner game section to fit available space */
  #game {
    padding-left: 58px;
  }

  /* Scale the cards container so it fits 412px - 58px = 354px */
  #cards {
    transform: scale(0.67);
    -webkit-transform: scale(0.67);
    transform-origin: top left;
    -webkit-transform-origin: top left;
  }

  /* Layout selection screen: scale down the large 300px thumbnails */
  #layouts {
    transform: scale(0.75);
    -webkit-transform: scale(0.75);
    transform-origin: top center;
    -webkit-transform-origin: top center;
  }

  /* Keep top bar buttons visible, ensure pointer events work on buttons */
  div.game-buttons {
    top: 0;
    left: 0;
    z-index: 100;
    pointer-events: auto;
  }

  /* Make the game-buttons non-intercepting for the game area (only the actual buttons get events) */
  div.game-buttons ul {
    pointer-events: none;
  }
  div.game-buttons ul li a {
    pointer-events: auto;
  }

  /* Timer and points - adjust for narrower viewport */
  .points {
    right: 80px;
    font-size: 1.0rem;
  }

  #timer {
    right: 4px;
    font-size: 1.0rem;
  }

  /* Popups should still be centered */
  div#winningMessage,
  div#loseMessage {
    width: 85%;
    left: 7.5%;
    right: 7.5%;
  }
}