/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url('/src/web/bg.gif');
}

.wrapper {
  display: flex;
  margin: 0.5em;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-direction: column;
}

#logo {
  position: relative;
  top: -2em;
}

.room {
  background-color: white;
  position: relative;
  width: 400px;
  height: 200px;
  overflow: hidden;
}

.room .draggable-item {
  position: absolute;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  display: block;
  transform-origin: center center;
}

.room .draggable-item:active {
  cursor: grabbing;
}

.room .draggable-item.flipped {
  transform: scaleX(-1);
}

.room, 
.room img, 
canvas {
  image-rendering: optimizeQuality;
  -ms-interpolation-mode: nearest-neighbor;
}

.bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#wall-layer {
  z-index: 2;
}

#floor-layer {
  z-index: 1;
}

.menu-container {
  position: relative;
}

.ui-container {
  position: relative;
}

.ui-buttons {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 0.5em;
}

.ui-buttons button {
  padding: 0.5em 1em;
  cursor: pointer;
  background-color: #e7a5a5;
  border: 3px solid #fff;
  border-radius: 10px;
  color: white;
  transition: 0.4s;
}

.ui-buttons button:hover {
  background-color: #f48989;
  transition: 0.4s;
}

.tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 0.5em;
}

.tab-btn {
  padding: 0.5em 1em;
  cursor: pointer;
  background-color: #e7a5a5;
  border: 2px solid #fff;
  border-radius: 5px;
  color: white;
}

.tab-btn.active {
  background-color: #ff8d9d;
  border-bottom: 2.5px solid #e51848;
  font-weight: bold;
}

.menu-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 1em;
  border: 1px solid #ccc;
  background-color: #fff;
}

.bg-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
}

.bg-thumb:hover {
  opacity: 0.8;
}

.bg-thumb.selected {
  border-color: #ff007f;
}

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 182, 193, 0.4);
  backdrop-filter: blur(2px);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #fff5f8;
  padding: 24px 28px;
  border-radius: 16px;
  border: 3px solid #ffb6c1;
  box-shadow: 0 8px 20px rgba(255, 105, 180, 0.25);
  max-width: 380px;
  width: 90%;
  position: relative;
  text-align: center;
  color: #5c3a43;
}

.modal-content h2 {
  margin-top: 5px;
  margin-bottom: 12px;
  color: #ee6787;
  font-size: 20px;
  letter-spacing: 0.5px;
}

.modal-content a {
  color: #ee6787;
  transition: 0.4s;
}

.modal-content a:hover {
  color: #f48989;
  letter-spacing: 0.05em;
  transition: 0.4s;
}

.modal-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  background: #e7a5a5;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 50%;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: 0.15s ease;
}

.modal-close:hover {
  background: #f48989;
  transform: scale(1.1);
}

.modal-instructions {
  background: #ffffff;
  border: 2px dashed #ffc0cb;
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 15px;
  text-align: left;
}

.modal-instructions p {
  margin: 0 0 8px 0;
  color: #ee6787;
  font-weight: bold;
}

.modal-instructions ul {
  margin: 0;
  padding-left: 18px;
}

.modal-instructions li {
  margin-bottom: 6px;
  font-size: 13px;
  color: #6d4c54;
}