/* ── KALENDAR EMBED ──────────────────────────────────────── */
#kalendar-section{padding:32px 0}
.game-header{display:flex;align-items:baseline;gap:16px;margin-bottom:8px}
.game-title{font-family:'Bebas Neue',sans-serif;font-size:2.5rem;letter-spacing:0.12em;color:var(--text)}
.game-links{display:flex;gap:12px;margin-bottom:32px;flex-wrap:wrap}
.game-link-btn{
  font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;
  border:1px solid var(--cell-border);color:var(--text-dim);
  padding:6px 14px;border-radius:5px;text-decoration:none;
  transition:all 0.15s;
}
.game-link-btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.game-link-btn.primary{border-color:var(--accent);color:var(--accent)}
.game-link-btn.primary:hover{background:var(--accent);color:var(--bg)}


/* Kalendar game specific styles */
#board .cell {
  width:56px;height:56px;background:var(--cell);border:1px solid var(--cell-border);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:1rem;color:var(--text-dim);transition:all 0.1s;
}
#board .cell.target{background:var(--text);color:var(--bg);border-color:var(--text)}
#board .cell.occupied{background:var(--accent);color:transparent;border-color:transparent}
#board .cell.highlight{outline:3px solid var(--accent3);outline-offset:2px}
#board .cell.invalid-highlight{outline:3px solid #c47a7a;outline-offset:2px}
#board .cell.blocked{background:#000;border-color:#333;color:#333;opacity:0.3;cursor:not-allowed}

.tile-slot{margin-bottom:20px}
.tile-canvas-wrap{cursor:grab;display:inline-block;background:var(--cell);border-radius:8px;padding:8px;border:1px solid var(--cell-border)}
.tile-canvas-wrap.placed{opacity:0.5;cursor:not-allowed}
.tile-canvas-wrap canvas{display:block;width:auto;height:auto}
.tile-controls{display:flex;gap:6px;margin-top:6px}
.tile-btn{background:none;border:1px solid var(--cell-border);color:var(--text-dim);font-size:0.65rem;padding:4px 8px;border-radius:4px;cursor:pointer;font-family:'DM Mono',monospace}
.tile-btn:hover{border-color:var(--accent);color:var(--accent)}

.kalendar-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.board-sticky {
  position: sticky;
  top: 80px;
}

.tray-scrollable {
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  padding-right: 10px;
}
/* ── MOBILE OPTIMIZATIONS ───────────────────────────────── */
@media (max-width: 640px) {
  
  /* Kalendar mobile layout */
  .kalendar-layout {
    flex-direction: column;
    gap: 0;
  }
  
  .board-sticky {
    position: sticky;
    top: 56px;
    z-index: 100;
    background: var(--bg);
    padding: 16px 0;
    border-bottom: 1px solid var(--cell-border);
    display: flex;
    justify-content: center;
  }
  
  /* Smaller board for mobile */
  .board-sticky #board {
    grid-template-columns: repeat(7, 48px);
    grid-template-rows: repeat(5, 48px);
    gap: 2px;
    margin: 0;
  }
  
  .board-sticky #board .cell {
    width: 48px;
    height: 48px;
    font-size: 0.85rem;
  }
  
  .tray-scrollable {
    max-height: none;
    overflow-y: visible;
    padding: 16px;
  }
  
  /* Compact tiles */
  .tile-slot {
    margin-bottom: 12px;
  }
  
  .tile-canvas-wrap canvas {
    max-width: 100%;
    height: auto;
  }
  
  .tile-controls {
    flex-wrap: wrap;
    gap: 4px;
  }
  
  .tile-btn {
    padding: 4px 8px;
    font-size: 0.6rem;
  }
}