/* ===== TUGOFWAR ===== */
/* File: /games/tugofwar/styles-tugofwar.css */

/* ---------- Layout ---------- */
#game-tugofwar {
  width: 100%;
  height: 100%;
  background: #0a0a12;
  overflow: hidden;
}

.tugofwar-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 560px;
  background: #0a0a12;
  font-family: 'Arial Black', 'Arial Bold', Arial, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overflow: hidden;
}

/* Landscape fullscreen — the wrapper's hardcoded 560px height doesn't
   shrink to fit shorter landscape viewports (common on phones, often
   under 400px tall), clipping the bottom of the play area and its
   buttons. In fullscreen mode the outer #game-tugofwar wrapper already
   expands to 100vh, so let the inner wrapper fill it instead of keeping
   its fixed portrait-sized height. */
#tugofwar-container {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
}
#tugofwar-container .tugofwar-wrapper {
  flex: 1;
}

.game-wrapper.landscape-fullscreen-active .tugofwar-wrapper {
  height: 100%;
}

/* Landscape fullscreen — TugofWar's config screen stacks icon + title +
   how-to-play card + two player inputs + duration row + start button,
   which can exceed typical phone landscape heights (often under 400px)
   even with .start-overlay's overflow-y:auto scroll fallback, making the
   Start Battle button and duration row feel "cut off" since nothing on
   screen hints that scrolling further would reveal them. Compact the
   spacing/sizing in fullscreen landscape so the whole stack fits without
   scrolling in the first place. */
.game-wrapper.landscape-fullscreen-active#game-tugofwar .start-overlay {
  gap: 8px;
  padding: 12px 20px;
}
.game-wrapper.landscape-fullscreen-active#game-tugofwar .so-icon {
  font-size: 1.4rem;
}
.game-wrapper.landscape-fullscreen-active#game-tugofwar .so-howto {
  padding: 10px 14px;
}
.game-wrapper.landscape-fullscreen-active#game-tugofwar .tugofwar-player-inputs {
  gap: 10px;
  margin: 0;
}
.game-wrapper.landscape-fullscreen-active#game-tugofwar .tugofwar-duration-row {
  gap: 8px;
}

/* ---------- Start Overlay ---------- */
.tugofwar-start-overlay {
  position: absolute;
  inset: 0;
  background: #0a0a12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
  gap: 20px;
}

.tugofwar-start-title {
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}

.tugofwar-start-subtitle {
  font-size: clamp(13px, 3vw, 18px);
  color: #9090aa;
  text-align: center;
  font-weight: 400;
  font-family: Arial, sans-serif;
  margin: 0;
}

.tugofwar-player-inputs {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 420px;
}

.tugofwar-player-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tugofwar-player-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tugofwar-player-label.tugofwar-player-label-left {
  color: #4fc3f7;
}

.tugofwar-player-label.tugofwar-player-label-right {
  color: #f06292;
}

.tugofwar-player-input {
  background: #1a1a2e;
  border: 2px solid #2a2a44;
  border-radius: 8px;
  color: #ffffff;
  font-size: 15px;
  font-family: Arial, sans-serif;
  padding: 10px 12px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.tugofwar-player-input:focus {
  border-color: #4a4a88;
}

.tugofwar-duration-row {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 420px;
}

.tugofwar-duration-label {
  font-size: 11px;
  color: #9090aa;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  width: 100%;
  max-width: 420px;
  text-align: left;
  margin-bottom: -8px;
}

.tugofwar-duration-button {
  flex: 1;
  background: #1a1a2e;
  border: 2px solid #2a2a44;
  border-radius: 8px;
  color: #9090aa;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Arial Black', Arial, sans-serif;
  padding: 12px 0;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.tugofwar-duration-button.tugofwar-duration-button-active {
  background: #1e1e48;
  border-color: #5c5cff;
  color: #ffffff;
}

.tugofwar-start-button {
  background: linear-gradient(135deg, #5c5cff 0%, #a855f7 100%);
  border: none;
  border-radius: 14px;
  color: #ffffff;
  font-size: clamp(16px, 4vw, 22px);
  font-weight: 900;
  font-family: 'Arial Black', Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 40px;
  cursor: pointer;
  width: 100%;
  max-width: 420px;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 24px rgba(92, 92, 255, 0.4);
}

.tugofwar-start-button:active {
  opacity: 0.85;
  transform: scale(0.98);
}

/* ---------- Countdown Overlay ---------- */
.tugofwar-countdown-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 18, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 90;
}

.tugofwar-countdown-number {
  font-size: clamp(100px, 25vw, 180px);
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  font-family: 'Arial Black', Arial, sans-serif;
  transition: transform 0.12s, opacity 0.12s;
}

.tugofwar-countdown-number.tugofwar-countdown-go {
  color: #5cff7a;
  font-size: clamp(70px, 18vw, 130px);
}

.tugofwar-countdown-number.tugofwar-countdown-pop {
  transform: scale(1.25);
  opacity: 0;
}

/* ---------- Game Arena (Landscape) ---------- */
.tugofwar-arena {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* ---------- Player Zones ---------- */
.tugofwar-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  transition: background 0.05s;
}

/* Left player: content rotated 90deg CCW so they read facing right (toward center) */
.tugofwar-zone-left {
  background: linear-gradient(90deg, #0d1a2e 0%, #0a1020 100%);
}

.tugofwar-zone-left .tugofwar-zone-inner {
  transform: rotate(-90deg);
}

/* Right player: content rotated 90deg CW so they read facing left (toward center) */
.tugofwar-zone-right {
  background: linear-gradient(270deg, #2e0d1a 0%, #20080e 100%);
}

.tugofwar-zone-right .tugofwar-zone-inner {
  transform: rotate(90deg);
}

.tugofwar-zone-left.tugofwar-zone-flash {
  background: linear-gradient(90deg, #1a2e4a 0%, #152030 100%);
}

.tugofwar-zone-right.tugofwar-zone-flash {
  background: linear-gradient(270deg, #4a1a28 0%, #301018 100%);
}

.tugofwar-zone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* Rotated content's effective on-screen WIDTH is the zone's actual
     height (100vh, since each zone spans the full arena height) — that
     part was already correct. What was missing: the content's effective
     on-screen HEIGHT is the zone's actual WIDTH, which is only half the
     viewport (.tugofwar-zone has flex:1 with two zones side by side).
     Nothing constrained that dimension, so if the stacked name+count+hint
     content was taller than that half-width budget, it silently
     overflowed and got clipped by .tugofwar-zone's overflow:hidden —
     this is what produced the squished/cut-off tap counts. Capping
     height to 50vw (with a small margin) guarantees the stack always
     fits regardless of viewport size. */
  width: 100vh;
  max-width: 100vh;
  height: 46vw;
  max-height: 46vw;
  overflow: hidden;
}

.tugofwar-player-name {
  font-size: clamp(11px, 2.4vw, 16px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tugofwar-zone-left .tugofwar-player-name {
  color: #4fc3f7;
}

.tugofwar-zone-right .tugofwar-player-name {
  color: #f06292;
}

.tugofwar-tap-count {
  font-size: clamp(32px, 7vw, 56px);
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
}

.tugofwar-tap-hint {
  font-size: clamp(9px, 2vw, 13px);
  color: #555577;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Ripple effect */
.tugofwar-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  animation: tugofwar-ripple-anim 0.45s ease-out forwards;
}

.tugofwar-zone-left .tugofwar-ripple {
  background: rgba(79, 195, 247, 0.25);
}

.tugofwar-zone-right .tugofwar-ripple {
  background: rgba(240, 98, 146, 0.25);
}

@keyframes tugofwar-ripple-anim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ---------- Center HUD ---------- */
.tugofwar-center-heads-up-display {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: 100%;
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 12px;
  pointer-events: none;
  z-index: 10;
  gap: 6px;
}

.tugofwar-timer-display {
  background: #0a0a12;
  border: 2px solid #2a2a44;
  border-radius: 10px;
  color: #ffffff;
  font-size: clamp(18px, 4vw, 28px);
  font-weight: 900;
  padding: 6px 14px;
  letter-spacing: 0.04em;
}

.tugofwar-timer-display.tugofwar-timer-urgent {
  border-color: #ff4444;
  color: #ff4444;
}

/* ---------- Tug of War Rope Canvas ---------- */
.tugofwar-rope-canvas {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 90px;
  pointer-events: none;
  z-index: 5;
}

/* ---------- Result Overlay ---------- */
.tugofwar-result-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 18, 0.96);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  gap: 18px;
  padding: 24px;
}

.tugofwar-result-winner-label {
  font-size: clamp(11px, 2.5vw, 14px);
  color: #9090aa;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

.tugofwar-result-winner-name {
  font-size: clamp(36px, 10vw, 72px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1;
}

.tugofwar-result-winner-name.tugofwar-result-color-left {
  color: #4fc3f7;
}

.tugofwar-result-winner-name.tugofwar-result-color-right {
  color: #f06292;
}

.tugofwar-result-winner-name.tugofwar-result-color-draw {
  color: #aaaacc;
}

.tugofwar-result-subtitle {
  font-size: clamp(14px, 3.5vw, 20px);
  color: #9090aa;
  text-align: center;
  font-family: Arial, sans-serif;
}

.tugofwar-result-score-row {
  display: flex;
  gap: 24px;
  align-items: center;
}

.tugofwar-result-score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tugofwar-result-score-name {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.tugofwar-result-score-name.tugofwar-result-color-left {
  color: #4fc3f7;
}

.tugofwar-result-score-name.tugofwar-result-color-right {
  color: #f06292;
}

.tugofwar-result-score-number {
  font-size: clamp(28px, 7vw, 48px);
  font-weight: 900;
  color: #ffffff;
}

.tugofwar-result-score-divider {
  font-size: 22px;
  color: #3a3a5a;
  font-weight: 700;
}

.tugofwar-result-button-row {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 360px;
}

.tugofwar-result-button {
  flex: 1;
  background: #1a1a2e;
  border: 2px solid #2a2a44;
  border-radius: 10px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Arial Black', Arial, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}

.tugofwar-result-button:active {
  background: #252540;
}

.tugofwar-result-button-primary {
  background: linear-gradient(135deg, #5c5cff 0%, #a855f7 100%);
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(92, 92, 255, 0.35);
}

.tugofwar-result-button-primary:active {
  opacity: 0.85;
}