/* ============================================
   CRAZYONOPOLY - Board & Token Styles
   HappyStoner5420 Games!
   ============================================ */

/* ============================================
   BOARD
   ============================================ */
#board-container {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-width: 0;
}

#board-canvas {
  display: block;
  box-shadow: 0 4px 40px rgba(0,0,0,0.7);
  border-radius: 2px;
}

/* Player Tokens on Board */
.board-token {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  pointer-events: none;
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              top  0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.board-token.moving {
  animation: tokenBounce 0.4s ease-in-out;
  z-index: 20;
}

@keyframes tokenBounce {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-16px) scale(1.3); }
  100% { transform: translateY(0) scale(1); }
}

.board-token.active {
  filter: drop-shadow(0 0 8px rgba(255,215,0,0.8)) drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

/* Space Highlight */
.space-highlight {
  position: absolute;
  pointer-events: none;
  border-radius: 4px;
  animation: spaceHighlight 0.6s ease-in-out;
}

@keyframes spaceHighlight {
  0%   { opacity: 0; transform: scale(0.8); }
  50%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0.6; transform: scale(1); }
}

/* Property Ownership Indicators */
.ownership-flag {
  position: absolute;
  width: 8px;
  height: 12px;
  pointer-events: none;
  z-index: 5;
}

/* Building Indicators */
.building-pip {
  position: absolute;
  pointer-events: none;
  z-index: 6;
}

/* ============================================
   SPACE TOOLTIP
   ============================================ */
.space-tooltip {
  position: absolute;
  background: rgba(8,8,25,0.97);
  border: 1px solid rgba(155,89,182,0.5);
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 180px;
  max-width: 240px;
  z-index: 200;
  pointer-events: none;
  box-shadow: 0 8px 30px rgba(0,0,0,0.8);
  animation: tooltipFadeIn 0.2s ease;
}

@keyframes tooltipFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tooltip-name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: white;
  margin-bottom: 6px;
}

.tooltip-type {
  font-size: 11px;
  color: #888;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.tooltip-price {
  font-family: var(--font-ui);
  font-size: 13px;
  color: #5dfc8a;
}

.tooltip-owner {
  font-size: 12px;
  color: #ffd700;
  margin-top: 4px;
}

.tooltip-rent {
  font-size: 12px;
  color: #ff8080;
  margin-top: 4px;
}

/* ============================================
   PROPERTY COLOR GROUPS
   ============================================ */
.color-group-badge {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Property card colors rendered on canvas */
/* These are referenced in graphics.js */
.prop-brown   { background: #8B4513; }
.prop-lblue   { background: #4FC3F7; }
.prop-pink    { background: #F48FB1; }
.prop-orange  { background: #FF9800; }
.prop-red     { background: #E53935; }
.prop-yellow  { background: #FDD835; }
.prop-green   { background: #43A047; }
.prop-dblue   { background: #1565C0; }

/* ============================================
   MINI MAP
   ============================================ */
#mini-map {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 100px;
  height: 100px;
  background: rgba(8,8,25,0.9);
  border: 1px solid rgba(80,80,160,0.4);
  border-radius: 8px;
  overflow: hidden;
  z-index: 50;
  display: none; /* shown only on mobile */
}

/* ============================================
   BOARD SPACE TYPES - Visual Cues
   ============================================ */

/* Special space glows applied as overlays */
.space-go        { box-shadow: inset 0 0 20px rgba(255,215,0,0.3); }
.space-jail      { box-shadow: inset 0 0 20px rgba(231,76,60,0.3); }
.space-casino    { box-shadow: inset 0 0 20px rgba(255,159,67,0.4); }
.space-freeparty { box-shadow: inset 0 0 20px rgba(39,174,96,0.3); }
.space-tax       { box-shadow: inset 0 0 20px rgba(155,89,182,0.3); }

/* ============================================
   PROPERTY DETAIL PANEL (shown in side panel)
   ============================================ */
#property-detail-panel {
  background: rgba(12,12,30,0.95);
  border: 1px solid rgba(80,80,160,0.3);
  border-radius: 10px;
  padding: 12px;
  display: none;
}

#property-detail-panel.visible {
  display: block;
  animation: slideUp 0.3s ease;
}

.prop-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.prop-detail-color {
  width: 16px; height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}

.prop-detail-name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: white;
}

.prop-detail-body {
  font-size: 11px;
  color: #aaa;
  line-height: 1.7;
}

.prop-detail-body span {
  color: #5dfc8a;
  font-weight: 700;
}

.prop-mortgage-tag {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(231,76,60,0.2);
  border: 1px solid rgba(231,76,60,0.4);
  border-radius: 10px;
  font-size: 10px;
  color: #ff8080;
  margin-left: 6px;
}

/* ============================================
   BUILDINGS ON BOARD
   ============================================ */
.board-house-svg {
  overflow: visible;
}

/* House glow effect */
.house-glow {
  filter: drop-shadow(0 0 4px rgba(39,174,96,0.8));
}

/* Hotel glow effect */
.hotel-glow {
  filter: drop-shadow(0 0 6px rgba(231,76,60,0.8));
}

/* ============================================
   DICE ANIMATIONS
   ============================================ */
.die-rolled {
  animation: dieResultBounce 0.5s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes dieResultBounce {
  0%   { transform: scale(0.5) rotate(-20deg); }
  60%  { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Doubles indicator */
.doubles-flash {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-gold);
  color: #000;
  font-family: var(--font-game);
  font-size: 14px;
  letter-spacing: 2px;
  padding: 3px 10px;
  border-radius: 10px;
  white-space: nowrap;
  animation: doublesFadeUp 2s ease-out forwards;
}

@keyframes doublesFadeUp {
  0%   { opacity: 0; transform: translateX(-50%) translateY(0); }
  20%  { opacity: 1; transform: translateX(-50%) translateY(-5px); }
  80%  { opacity: 1; transform: translateX(-50%) translateY(-10px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

/* ============================================
   BOARD CAMERA / ZOOM
   ============================================ */
#board-inner {
  transform-origin: center center;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   TOKEN SELECTION (setup screen)
   ============================================ */
.token-picker {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.token-option {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  border: 3px solid transparent;
  transition: var(--transition);
  background: rgba(20,20,45,0.8);
}

.token-option:hover,
.token-option.selected {
  border-color: var(--color-gold);
  background: rgba(40,35,10,0.9);
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(255,215,0,0.3);
}

/* ============================================
   SPACE LABELS ON BOARD (rendered via canvas)
   ============================================ */
/* These styles inform the canvas rendering logic */
/* Actual rendering happens in graphics.js/board.js */

/* Board space categories reference colors */
:root {
  --space-go:        #ffd700;
  --space-property:  #ffffff;
  --space-railroad:  #222222;
  --space-utility:   #888888;
  --space-tax:       #9b59b6;
  --space-chance:    #e67e22;
  --space-chaos:     #8e44ad;
  --space-jail:      #c0392b;
  --space-freeparty: #27ae60;
  --space-gotojail:  #e74c3c;
  --space-casino:    #ff9f43;
}

/* ============================================
   RESPONSIVE BOARD SIZING
   ============================================ */
@media (max-width: 700px) {
  #board-container {
    height: calc(100vh - 256px - 56px);
  }
}