/* Azul board — RTL, vanilla. Loaded only on the room page. */

#azul-root {
  max-width: 1100px; margin: 18px auto;
  background: url("../img/azul/background.jpg") repeat center;
  border-radius: 20px; padding: 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
  background-size: 400px;
}

.azul-code {
  font-size: 1.4rem; background: rgba(255,255,255,.85);
  padding: 4px 14px; border-radius: 8px; letter-spacing: 1px;
  color: #003764; font-weight: 700;
}
.azul-actions { margin-top: 12px; display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* ---- top bar ---- */
.azul-bar {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,255,255,.88); border: 2px solid #0083ad;
  border-radius: 12px; padding: 10px 16px; margin-bottom: 14px;
  backdrop-filter: blur(6px);
}
.azul-round { font-weight: 700; color: #003764; }
.azul-turn { font-size: .95rem; color: #003764; }
.azul-turn.you { color: #f5333f; font-weight: 700; }

/* ---- tiles ---- */
.tile {
  width: 36px; height: 36px; border-radius: 5px; display: inline-block;
  border: 2px outset; box-sizing: border-box;
  vertical-align: middle; position: relative; overflow: hidden;
  box-shadow: 1px 1px 3px rgba(0,0,0,.45);
}
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 15%, #fff 50%, transparent 85%);
  opacity: .13;
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer { 0% { transform: translateX(-200%); } 100% { transform: translateX(200%); } }

.tile-sm { width: 26px; height: 26px; border-radius: 4px; }

.tile-blue {
  background: url("../img/azul/blue.svg") #0083ad center/cover;
  border-color: #0083ad;
}
.tile-yellow {
  background: url("../img/azul/yellow.svg") #ffbf3c center/cover;
  border-color: #ffbf3c;
}
.tile-red {
  background: url("../img/azul/red.svg") #f5333f center/cover;
  border-color: #f5333f;
}
.tile-black {
  background: url("../img/azul/black.svg") #231f20 center/cover;
  border-color: #231f20;
}
.tile-white {
  background: url("../img/azul/cyan.svg") #1dcad3 center/cover;
  border-color: #1dcad3;
}
.tile-first {
  background: url("../img/azul/first-player.svg") #fff center/cover;
  border-color: #003764; color: #003764; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.tile-first::after { display: none; }
.tile-empty {
  background: transparent; border: 1px dashed rgba(0,55,100,.25);
  box-shadow: none;
}
.tile-empty::after { display: none; }

/* ---- factories + center ---- */
.azul-factories {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
  padding: 20px; background: rgba(255,255,255,.3);
  border: 2px solid rgba(0,131,173,.3); border-radius: 20px; margin-bottom: 18px;
  backdrop-filter: blur(4px);
}
.factory {
  width: 100px; height: 100px; border-radius: 50%;
  background: url("../img/azul/factory.png") center/cover;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  align-content: center; justify-content: center; padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.factory.empty { opacity: .3; }
.center-pool {
  min-width: 130px; min-height: 100px; border-radius: 20px;
  background: rgba(255,255,255,.5); border: 2px dashed #0083ad;
  display: flex; flex-wrap: wrap; gap: 5px; align-content: center;
  justify-content: center; padding: 12px;
  backdrop-filter: blur(3px);
}

/* a clickable color group (selectable source) */
.tile.selectable { cursor: pointer; transition: transform .1s, box-shadow .1s; }
.tile.selectable:hover { transform: scale(1.15); box-shadow: 0 0 8px 3px rgba(255,255,255,.6); }
.tile.picked { outline: 3px solid #f5333f; outline-offset: 2px; }

/* ---- player boards ---- */
.azul-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.pboard {
  position: relative;
  overflow: hidden;
  border: 3px solid #003764; border-radius: 14px; padding: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.6), transparent 60%),
    linear-gradient(135deg, #f3ece0 0%, #e8ddc8 50%, #ddd0b6 100%);
}
.pboard::before {
  content: '';
  position: absolute; inset: 0;
  background: url("../img/azul/background.jpg") center/300px;
  opacity: .08; z-index: 0; pointer-events: none;
}
.pboard > * { position: relative; z-index: 1; }
.pboard.active { border-color: #f5333f; box-shadow: 0 0 0 3px rgba(245,51,63,.25), 0 4px 16px rgba(0,0,0,.3); }
.pboard.you .pboard-name::after { content: " (شما)"; color: #f5333f; font-size: .8rem; }
.pboard-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
  background: rgba(255,255,255,.8); border-radius: 8px; padding: 6px 10px;
}
.pboard-name { font-weight: 700; color: #003764; }
.pboard-score { font-weight: 800; font-size: 1.2rem; color: #003764; }

.pboard-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; direction: ltr; }

/* pattern lines: tiles fill toward the wall (right), capacity 1..5 */
.lines { display: flex; flex-direction: column; gap: 6px; }
.line {
  display: flex; gap: 4px; justify-content: flex-end;
  padding: 4px; border-radius: 8px;
  background: rgba(0,55,100,.06);
  border: 1px solid rgba(0,55,100,.12);
}
.line.droppable { cursor: pointer; outline: 3px dashed #f5333f; background: rgba(245,51,63,.12); }
.line.droppable:hover { background: rgba(245,51,63,.22); }
.slot {
  width: 32px; height: 32px; border-radius: 6px;
  border: 1px solid rgba(0,55,100,.18); box-sizing: border-box;
  background: rgba(255,255,255,.45);
  box-shadow: inset 0 1px 3px rgba(0,55,100,.12);
}

.wall-sep {
  width: 3px; align-self: stretch; border-radius: 3px;
  background: linear-gradient(rgba(0,55,100,.45), rgba(0,55,100,.15));
}

/* wall 5x5: navy panel like the real board */
.wall {
  display: grid; grid-template-columns: repeat(5, 32px); gap: 4px;
  background: linear-gradient(135deg, #0a3a5c, #06283e);
  border-radius: 10px; padding: 6px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.4);
}
.wcell {
  width: 32px; height: 32px; border-radius: 6px; box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.12);
}
.wcell.hint { opacity: .28; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.wcell.filled { opacity: 1; box-shadow: 1px 1px 4px rgba(0,0,0,.45), inset 0 1px 2px rgba(255,255,255,.3); }

/* floor line */
.floor {
  display: flex; gap: 4px; margin-top: 12px; align-items: center;
  direction: ltr; padding: 6px; border-radius: 8px;
  background: rgba(0,55,100,.06); border: 1px solid rgba(0,55,100,.12);
}
.floor.droppable { cursor: pointer; outline: 3px dashed #f5333f; }
.floor-pen { font-size: .72rem; color: #003764; text-align: center; width: 32px; font-weight: 700; }
.floor-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }

/* ---- messages / final ---- */
.azul-msg {
  position: fixed; bottom: 18px; right: 18px; z-index: 50;
  background: #f5333f; color: #fff; padding: 10px 16px;
  border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: 320px;
  font-weight: 600;
}
.azul-msg.ok { background: #16a34a; }
.azul-final { display: flex; flex-direction: column; gap: 8px; max-width: 360px; margin: 14px auto; }
.azul-final-row {
  display: flex; justify-content: space-between; padding: 10px 14px;
  background: rgba(255,255,255,.85); border: 2px solid #003764; border-radius: 10px;
  color: #003764;
}
.azul-final-row.win { border-color: #ffbf3c; background: rgba(255,191,60,.2); font-weight: 700; }

/* waiting section */
#azul-waiting { background: rgba(255,255,255,.85); border-radius: 16px; padding: 24px; }
#azul-waiting h1 { color: #003764; }

/* finished section */
#azul-finished { background: rgba(255,255,255,.85); border-radius: 16px; padding: 24px; }
#azul-finished h1 { color: #003764; }

@media (max-width: 700px) {
  #azul-root { padding: 10px; border-radius: 14px; background-size: 300px; }
  .azul-bar { padding: 8px 12px; }
  .azul-factories { padding: 12px; gap: 10px; }
  .factory { width: 76px; height: 76px; padding: 10px; }
  .tile { width: 28px; height: 28px; border-width: 1.5px; }
  .slot { width: 24px; height: 24px; }
  .wcell { width: 24px; height: 24px; }
  .wall { grid-template-columns: repeat(5, 24px); gap: 3px; padding: 3px; }
  .floor-pen { width: 24px; }
  .azul-boards { display: flex; flex-direction: column; }
  .pboard.you { order: -1; }   /* your own board on top when stacked */
  .pboard { padding: 10px; overflow-x: auto; }
  .pboard-grid { gap: 6px; }
  .center-pool { min-width: 90px; min-height: 76px; }
}

@media (max-width: 400px) {
  .factory { width: 66px; height: 66px; padding: 8px; }
  .tile { width: 24px; height: 24px; }
  .slot { width: 21px; height: 21px; }
  .wcell { width: 21px; height: 21px; }
  .wall { grid-template-columns: repeat(5, 21px); gap: 2px; }
  .floor-pen { width: 21px; font-size: .65rem; }
}