/* ==========================================================================
   DIPOLE BOARD GAME - UNIFIED STYLE SHEET
   ========================================================================== */

:root {
  /* Default fallbacks - overwritten dynamically by GameData */
  --color-app-bg: #2c3e50;
  --color-board-bg: #e0ecd3;
  --color-ring-main: #d32f2f;
  --color-ring-border: #ffffff;
  --color-ring-text: #ffffff;
  --color-lines: #000000;
  --color-panel-bg: rgba(52, 73, 94, 0.95);

  /* UI Button & Accents */
  --color-btn-yes: #2ecc71;
  --color-btn-no: #e74c3c;
  --color-btn-ok: #3498db;
  --color-countdown: #e74c3c;   /* countdown clock color (item 4: should be red) */
  --color-muted: #7f8c8d;       /* shared "muted / disabled / spectator" gray, reused across modals, disabled inputs and buttons */

  /* Transparency of the modal card's BACKGROUND (item 4), 0-1. This is an alpha channel on
     the background color, not opacity of the entire box - so content with its own background
     (modal-card-preview, card images, buttons) remains sharp and 100% visible, while
     the empty space in the dialog remains transparent so the countdown shows through. */
  --modal-card-opacity: 0.7;

  /* Font Sizes (All integers, min 11px) */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base-sm: 13px;
  --fs-base: 16px;
  --fs-md-sm: 17px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-xxl: 30px;
  --fs-icon: 40px;
  --fs-huge: 45px;
  --fs-dice: 140px;
  --fs-countdown: 120px;
}

/* --- Base --- */
html, body {
  overscroll-behavior: none;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

/* --- Layout Wrappers --- */
#board-wrapper {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 20px auto 0 auto;
}

#layout-container {
  display: flex;
  flex: 1;
  width: 100%;
  min-height: 0;
}

#board-side {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2vh;
  min-height: 0;
}

/* --- SVG Base --- */
svg {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--color-board-bg);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  overflow: visible;
}

.bg { fill: var(--color-board-bg); }
.border-main { fill: none; stroke: var(--color-lines); stroke-width: 3; }
.box { fill: #ffffff; stroke: var(--color-lines); stroke-width: 2; }
.corner-box { fill: #eceff1; stroke: var(--color-lines); stroke-width: 2; }

/* --- Central Ring logo --- */
.center-ring { fill: none; stroke: var(--color-ring-main); stroke-width: 70; }
.center-ring-border { fill: none; stroke: var(--color-ring-border); stroke-width: 4; }
.center-text { font-size: var(--fs-huge); font-weight: bold; fill: var(--color-ring-text); letter-spacing: 4px; }
.center-text-sub { font-size: var(--fs-xl); font-weight: bold; fill: var(--color-ring-text); letter-spacing: 2px; }

/* --- Board Typography --- */
text { text-anchor: middle; fill: #000000; pointer-events: none; }
.text-light { fill: #ffffff; }
.title { font-size: var(--fs-sm); font-weight: bold; }
.title-small { font-size: var(--fs-xs); font-weight: bold; }
.desc { font-size: var(--fs-sm); }
.desc-small { font-size: var(--fs-xs); }
.category { font-size: var(--fs-xs); fill: #333333; font-weight: bold; }  /* color group or previously freq category */
.price { font-size: var(--fs-sm); font-weight: bold; }
.icon { font-size: var(--fs-xxl); }

/* --- Interactive Board Hovers (Only for index view) --- */
g[onclick] { cursor: pointer; }

.square-group {
  transform-box: fill-box;
  transform-origin: center center;
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

/* --- Hover effect on the game board --- */
/* The side spaces are rotated to become readable and pushed inwards towards the center */
.square-group.side-0.ruta-aktiv { transform: translate(0, -81px) scale(2.2) !important; filter: drop-shadow(0px 15px 25px rgba(0,0,0,0.8)); z-index: 10; }
.square-group.side-1.ruta-aktiv { transform: translate(0, -81px) rotate(-90deg) scale(2.2) !important; filter: drop-shadow(0px 15px 25px rgba(0,0,0,0.8)); z-index: 10; }
.square-group.side-2.ruta-aktiv { transform: translate(0, -81px) rotate(180deg) scale(2.2) !important; filter: drop-shadow(0px 15px 25px rgba(0,0,0,0.8)); z-index: 10; }
.square-group.side-3.ruta-aktiv { transform: translate(0, -81px) rotate(90deg) scale(2.2) !important; filter: drop-shadow(0px 15px 25px rgba(0,0,0,0.8)); z-index: 10; }

/* The corners do not need to be rotated, but are pushed diagonally towards the center */
.square-group.corner-0.ruta-aktiv { transform: translate(-81px, -81px) scale(2.2) !important; filter: drop-shadow(0px 15px 25px rgba(0,0,0,0.8)); z-index: 10; }
.square-group.corner-1.ruta-aktiv { transform: translate(81px, -81px) scale(2.2) !important; filter: drop-shadow(0px 15px 25px rgba(0,0,0,0.8)); z-index: 10; }
.square-group.corner-2.ruta-aktiv { transform: translate(81px, 81px) scale(2.2) !important; filter: drop-shadow(0px 15px 25px rgba(0,0,0,0.8)); z-index: 10; }
.square-group.corner-3.ruta-aktiv { transform: translate(-81px, 81px) scale(2.2) !important; filter: drop-shadow(0px 15px 25px rgba(0,0,0,0.8)); z-index: 10; }


/* --- Tokens & Masts --- */
@keyframes activePulse {
  0% { r: 14px; stroke-width: 3; }
  50% { r: 19px; stroke-width: 5; }
  100% { r: 14px; stroke-width: 3; }
}
.active-player-token { animation: activePulse 1.5s infinite ease-in-out; stroke: #ffffff !important; }

/* --- Dice --- */
.big-dice { cursor: pointer; user-select: none; transition: all 0.3s; transform-origin: center; transform-box: fill-box; pointer-events: auto; }
.big-dice text { font-size: var(--fs-dice); pointer-events: auto; cursor: pointer; }
.big-dice.my-turn { animation: dicePulse 1s infinite alternate; opacity: 1; }
.big-dice.dimmed { opacity: 0.3; cursor: default; filter: grayscale(100%); }

@keyframes dicePulse {
  from { filter: drop-shadow(0 0 10px #2ecc71) drop-shadow(0 0 20px #ffffff); transform: scale(1); }
  to { filter: drop-shadow(0 0 40px #2ecc71) drop-shadow(0 0 40px #ffffff); transform: scale(1.15); }
}
.roll-anim { animation: spinRoll 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
@keyframes spinRoll {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.3) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}

/* --- Countdown clock (item 2/4): replaces the die while a decision is pending.
     Lives as a SIBLING of #big-dice-icon (not nested inside it) so it is never
     affected by the die's .dimmed/.my-turn classes - it should always read
     clearly, red, full opacity, for everyone at the table. */
.countdown-display {
  font-size: var(--fs-countdown);
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace; /* fixed character width so the numbers do not "jump" */
  fill: var(--color-countdown);
  pointer-events: none;
}

/* --- Player Cards & Panels --- */
#bottom-ui {
  max-width: 1000px;
  margin: 15px auto;
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.player-card {
  background: var(--color-panel-bg);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  border: 4px solid var(--pcolor);
  overflow: hidden;
  /* Straight layout for desktop screens (4 per row) */
  box-sizing: border-box;
  width: 24%;
  min-width: 180px;
}
.player-name-bar {
  background-color: white;
  color: black;
  width: 100%;
  padding: 6px 0;
  font-size: var(--fs-base-sm);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.player-money {
  font-size: var(--fs-lg);
  font-weight: bold;
  color: #2ecc71;
  padding: 10px 0;
}

.active-turn {
  animation: blinkBorder 1.2s infinite alternate;
  transform: scale(1.05);
  z-index: 10;
}

@keyframes blinkBorder {
  0% { box-shadow: 0 0 5px var(--pcolor); border-color: var(--pcolor); }
  100% { box-shadow: 0 0 25px var(--pcolor), inset 0 0 10px var(--pcolor); border-color: #ffffff; }
}

/* --- UI Actions Icons --- */
.action-icon { cursor: pointer; font-size: var(--fs-md); transition: transform 0.2s; }
.leave-icon { font-size: var(--fs-xl); vertical-align: middle; line-height: 14px; }
.action-icon:hover, .leave-icon:hover { transform: scale(1.3); }

/* --- Modals & Popups --- */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.7); display: none; justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: 40px 20px;
  box-sizing: border-box;
  z-index: 9999;
  transform: translateZ(0); /* Forces mobile browsers to respect the layer order */
}
.modal-box {
  background: rgba(255, 255, 255, var(--modal-card-opacity));
  padding: 30px; border-radius: 12px; text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  max-width: 400px; width: 80%;
}

/* Shared accent border used by card-modal and lobby-modal - previously the
   exact same "border: 4px dashed #3498db;" fragment was hand-copied inline
   into four places (both modals, in both index.html and projector.html).
   One class, one place to change it. */
.modal-accent-info {
  border: 4px dashed #3498db;
}

/* The buy modal can contain a question image (properties with a knowledge question) -
     it should be allowed to be significantly larger than the old 150px height cap.
     Widened slightly further now that the question uses the same side-by-side
     image+text layout (.card-content-wrapper) as the card-draw modal. */
#buy-modal .modal-box {
  max-width: 560px;
}
.modal-media.buy-question-media {
  width: 220px;
  height: 330px;
  max-width: 100%;
}
@media (min-width: 1100px) {
  #buy-modal .modal-box {
    max-width: 640px;
  }
  .modal-media.buy-question-media {
    width: 260px;
    height: 390px;
  }
}

.modal-card-preview {
  width: 240px;
  height: 310px; margin: 0 auto 20px auto;
  border: 3px solid #000; border-radius: 8px; display: flex;
  flex-direction: column; justify-content: space-between; padding: 15px; box-sizing: border-box;
  background-color: white;
  opacity: 0.5;
}
#buy-text {
  font-size: var(--fs-md);
  margin: 15px 0;
  color: #222;
}
.btn-container { display: flex; justify-content: space-around; margin-top: 20px; }
.btn { padding: 12px 25px; font-size: var(--fs-md); font-weight: bold; border: none; border-radius: 25px; cursor: pointer; }
.btn-yes { background-color: var(--color-btn-yes); color: white; }
.btn-no { background-color: var(--color-btn-no); color: white; }
.btn-ok { background-color: var(--color-btn-ok); color: white; width: 100%; }

.btn:disabled,
.btn.btn-spectator {
  opacity: 1;
  filter: none;
  cursor: default;
  pointer-events: none;
  background-color: var(--color-muted);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.6);
}

label.option-spectator {
  opacity: 1;
}
label.option-spectator span {
  color: #111111;
}

/* --- Notifications --- */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 99999; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background-color: #34495e; color: #ecf0f1; padding: 15px 20px; border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5); border-left: 5px solid #e74c3c;
  font-weight: bold; font-size: var(--fs-base); animation: slideIn 0.3s ease-out forwards; max-width: 300px;
}
@keyframes slideIn { to { transform: translateX(0); opacity: 1; } }


/* Card Modal specific styles */
.card-content-wrapper {
  display: flex;
  gap: 20px;
  align-items: center;
  text-align: left;
}

.modal-media {
  width: 260px;
  height: 390px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

/* --- Modal Card Preview Details --- */
.modal-card-prop-header {
  height: 40px;
  border-bottom: 2px solid black;
  margin: -15px -15px 15px -15px;
  border-radius: 5px 5px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: var(--fs-base);
}

.modal-card-title {
  font-weight: bold;
  font-size: var(--fs-md);
  margin-top: 10px;
}

.modal-card-subtitle {
  font-weight: bold;
  font-size: var(--fs-md);
}

.modal-card-category {
  font-size: var(--fs-base);
  color: #555;
  margin-top: 5px;
}

.modal-card-icon {
  font-size: var(--fs-icon);
  margin: 10px 0;
}

.modal-card-info {
  font-size: var(--fs-base);
  font-style: italic;
  color: #000;
  margin-top: 15px;
  text-align: left;
  line-height: 1.3;
}

.modal-card-price {
  font-weight: bold;
  margin-top: auto;
  font-size: var(--fs-lg);
}

.lobby-vignette {
  font-style: italic;
  color: #576574;
  font-size: var(--fs-md);
  line-height: 1.4;
  margin: 8px 0 20px 0;
}



/* --- Responsive Adjustments --- */
@media (max-width: 800px) {
  #bottom-ui { gap: 8px; margin: 10px auto; }

  /* On mobile, we force 2 cards per row and drop the 180px width requirement */
  .player-card {
    width: 48%;
    min-width: 140px;
  }
  .player-money { font-size: var(--fs-md-sm); padding: 6px 0; }
  .player-name-bar { font-size: var(--fs-xs); padding: 4px 0; }

  /* Shrink image and stack content vertically in the card modal */
  .card-content-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .modal-media {
    width: 120px;
    height: 180px;
  }

  .modal-box {
    padding: 15px; /* Recover some screen space */
  }

}

/* Wider screens (laptops, desktops) - give the card image more space
     instead of letting it drown in a narrow column in the middle of a wide modal box. */
@media (min-width: 1100px) {
  .modal-media {
    width: 300px;
    height: 450px;
  }

  #card-modal .modal-box {
    max-width: 820px !important; /* Overrides inline style in index.html/projector.html */
  }
}

#board-spaces-container > g {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* Removes the ugly green box that sometimes flashes on mobile */
}

/* The clone layer where doHover() in index.html draws the enlarged square.
     pointer-events:none here is an extra safeguard beyond what is set inline on
     each <use> - the layer should never be able to capture the mouse. */
#hover-layer {
  pointer-events: none;
}


body {
  background-color: var(--color-app-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.admin-container {
  background: var(--color-panel-bg);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  width: 90%;
  max-width: 600px;
  margin-top: 50px;
}

/* --- Timer Warning Animation (FOOLPROOF) --- */
@keyframes borderHurry {
  0%, 100% {
    stroke: var(--color-lines, #333);
    stroke-width: 4px;
  }
  50% {
    stroke: #e74c3c;
    stroke-width: 16px; /* Makes the border dramatically thicker and red */
  }
}

.border-warning {
  animation: borderHurry 1s infinite ease-in-out !important;
  /* Forces the browser to re-render the border smoothly */
  stroke-linejoin: round !important;
}
.query-consequence-text {
    margin-top: 10px;
    font-size: var( --fs-base-sm );
    color: var(--color-muted);
    font-style: italic;
}
.spectator-wait-text {
    margin-top: 25px;
    font-weight: bold;
    color: var(--color-muted);
}

.modal-action-btn {
    margin-top: 25px;
}

.query-number-badge {
    font-size: var(--fs-xs);
    font-weight: bold;
    letter-spacing: 0.5px;
    color: var(--color-muted);
    margin-bottom: 8px;
}

.countdown-badge {
  display: none;
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  opacity: 0.5;
  background: #000;
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  min-width: 56px;
  height: 56px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}


/* Unified option row, used by both the event-card question (renderCardModal)
   and the property-purchase quiz (renderBuyModal). */
.query-option {
  display: flex;
  align-items: center;
  margin: 10px 0;
  font-size: 18px;
  cursor: pointer;
}

.query-option input[type="radio"],
.query-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
  border: 3px solid var(--color-btn-ok);
  background: #ffffff;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s, border-color 0.15s;
}

.query-option input[type="radio"] {
  border-radius: 50%;
}

.query-option input[type="checkbox"] {
  border-radius: 4px;
}

.query-option input[type="radio"]:checked,
.query-option input[type="checkbox"]:checked {
  background: var(--color-btn-ok);
}

.query-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
}

.query-option input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 7px;
  width: 6px;
  height: 12px;
  border: solid #ffffff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Disabled/spectator state: solid mid-gray border and fill, not a faded-out
   version of the active state - unmistakably "you can't click this" while
   still being easy to see from across a room (e.g. on a projector). */
.query-option input[type="radio"]:disabled,
.query-option input[type="checkbox"]:disabled {
  cursor: default;
  border-color: var(--color-muted);
  background: #ecf0f1;
}

.query-option input[type="radio"]:disabled:checked,
.query-option input[type="checkbox"]:disabled:checked {
  background: var(--color-muted);
}

.query-option span {
  white-space: normal;
  line-height: 1.2;
  font-weight: 600; /* active player: bold, draws the eye to the live choice */
}

.query-option.option-spectator {
  cursor: default;
}

.query-option.option-spectator span {
  font-weight: normal;
  color: #34495e;
}