:root {
  /* Ultra Friendly & Childish Palette */
  --bg-sky: #4fc3f7;
  --bg-sky-light: #e1f5fe;
  --grass: #8bc34a;
  
  --p-rojo: #FF5252;
  --p-azul: #29B6F6;
  --p-verde: #66BB6A;
  --p-amarillo: #FFEE58;
  --p-rosa: #FF80AB;

  --border-bubbly: #0288D1;
  --text-main: #5D4037; /* Soft friendly brown */
  --text-light: #FFFFFF;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  font-family: 'Fredoka', cursive, sans-serif;
  background: linear-gradient(180deg, var(--bg-sky) 0%, var(--bg-sky-light) 60%, var(--grass) 100%);
  color: var(--text-main);
  overflow: hidden;
  overscroll-behavior: none;
}

/* Bubbly Animated Clouds */
.sky-background { display: none; }
.clouds {
  position: absolute; top: 0; left: 0; width: 400%; height: 50%;
  background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50" opacity="0.6"><path d="M 20 25 a 10 10 0 0 1 15 -10 a 15 15 0 0 1 25 5 a 12 12 0 0 1 10 15 q 0 5 -5 5 h -40 q -10 0 -5 -15" fill="white"/></svg>') repeat-x;
  background-size: auto 150px;
  animation: floatClouds 60s linear infinite;
  z-index: 1; pointer-events: none;
}

@keyframes floatClouds {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.screen {
  position: absolute; top: 0; left: 0; width: 100vw; height: 100%;
  display: flex; flex-direction: column; opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease; z-index: 10;
}
.screen.active { opacity: 1; pointer-events: all; z-index: 20; }

/* ==================================
   BUBBLY CUTE PANELS
   ================================== */
.wooden-board, .message-box, .dice-container {
  background-color: #FFFFFF;
  border: 8px solid var(--border-bubbly);
  border-radius: 36px;
  box-shadow: 0 10px 0 rgba(2, 136, 209, 0.3);
  position: relative;
  z-index: 5;
}

/* Cute pill shaped buttons */
.primary-btn {
  background: var(--p-verde);
  border: 4px solid #388E3C; border-bottom-width: 8px;
  border-radius: 50px; /* Fully rounded pill */
  color: white; font-family: inherit; font-size: 1.6rem; font-weight: 700;
  padding: 14px 40px; cursor: pointer;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1); transition: all 0.1s; position: relative; top: 0;
  letter-spacing: 1px; text-shadow: 2px 2px 0 #388E3C;
}
.primary-btn:active { top: 4px; border-bottom-width: 4px; }
.green-btn { background: #66BB6A; } 

.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; display: flex; justify-content: center; align-items: center;
  font-size: 1.4rem; color: white; background: #FF5252;
  border: 4px solid #D32F2F; border-bottom-width: 6px; cursor: pointer; font-family: inherit; font-weight: bold;
}
.icon-btn:active { transform: translateY(3px); border-bottom-width: 3px; }

/* ==================================
   SETUP SCREEN 
   ================================== */
#setup-screen { justify-content: center; align-items: center; padding: 20px; z-index: 100; }

.setup-container {
  width: 100%; max-width: 460px; padding: 30px; display: flex; flex-direction: column; gap: 20px; text-align: center;
}

.game-title {
  font-size: 3rem; color: var(--border-bubbly);
  text-shadow: 3px 3px 0 #FFF, 0px 8px 0 rgba(0,0,0,0.1);
  line-height: 1.1; margin-top: -10px; margin-bottom: 5px;
}

.config-row {
  display: flex; justify-content: space-around; background: #E1F5FE; border-radius: 24px; padding: 15px; gap: 15px; border: 4px solid #81D4FA;
}
.config-column { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--border-bubbly); font-size: 1.1rem; }

.toggle-group { display: flex; background: #B3E5FC; border-radius: 16px; padding: 6px; gap: 6px; }

.toggle-btn {
  background: transparent; border: none; font-family: inherit; font-weight: 700;
  font-size: 1.3rem; padding: 10px 20px; border-radius: 12px; cursor: pointer;
  color: #0288D1; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.toggle-btn.selected {
  background: #FFF; color: var(--border-bubbly);
  box-shadow: 0 4px 0 rgba(2, 136, 209, 0.4); transform: translateY(-3px) scale(1.05);
}

.players-list { display: flex; flex-direction: column; gap: 12px; max-height: 45vh; overflow-y: auto; padding: 0 10px 10px 5px; }

.player-form-row {
  display: flex; align-items: center; gap: 12px; background: #FFF; padding: 12px; border-radius: 24px;
  border: 4px solid #81D4FA; box-shadow: 0 4px 0 rgba(129, 212, 250, 0.5);
}

.skin-selector {
  width: 65px; height: 65px; border-radius: 20px; background: #FFF9C4;
  border: 4px solid #FBC02D; border-bottom-width: 6px; font-size: 2.3rem;
  display: flex; justify-content: center; align-items: center; cursor: pointer; user-select: none;
}
.skin-selector:active { transform: translateY(3px); border-bottom-width: 3px; }

.name-input {
  flex: 1; background: transparent; border: none; font-family: inherit;
  font-size: 1.4rem; font-weight: 700; color: var(--text-main); outline: none;
}
.name-input::placeholder { color: #BCAAA4; font-weight: 400; }

/* ==================================
   GAME SCREEN 
   ================================== */
#game-screen { flex-direction: column; z-index: 50; }

.top-bar {
  flex: 0 0 70px; padding: 0 20px; display: flex; justify-content: space-between; align-items: center;
  background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(8px);
  border-bottom: 6px solid var(--border-bubbly); z-index: 50;
}

.top-bar h2 {
  color: var(--border-bubbly); font-size: 1.8rem; font-weight: 700;
  text-shadow: 2px 2px 0 #FFF; letter-spacing: 1px;
}

.canvas-container {
  flex: 1; display: flex; justify-content: center; align-items: center;
  width: 100%; padding: 15px; overflow: hidden;
}

#board-canvas {
  aspect-ratio: 1 / 1; max-width: 100%; max-height: 100%;
  background-color: transparent; /* Seamless floating */
  /* Remove heavy dark borders, add super cute soft bubble padding */
  border: 8px solid rgba(255,255,255,0.7);
  border-radius: 50px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.1), inset 0 0 20px rgba(255,255,255,0.5);
  display: block;
}

/* OVERLAYS */
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; pointer-events: none; z-index: 100; }
.dice-container, .message-box { pointer-events: all; }
.hidden { display: none !important; }

.dice-container { padding: 40px; animation: bounceIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.dice-wrapper { display: flex; gap: 15px; justify-content: center; }
.dice {
  font-size: 4.5rem; background: #FFF; border-radius: 24px; width: 90px; height: 90px;
  display: flex; justify-content: center; align-items: center;
  border: 6px solid #4FC3F7; border-bottom-width: 10px; color: var(--text-main);
  animation: wobble 0.3s infinite alternate; box-shadow: 0 5px 0 rgba(0,0,0,0.1);
}

.message-box { padding: 30px 40px; max-width: 85%; width: 450px; text-align: center; animation: bounceIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.message-box h3 { color: #FF5252; font-size: 2.5rem; margin-bottom: 10px; text-shadow: 2px 2px 0 #FFF; }
.message-box p { font-size: 1.5rem; font-weight: 700; color: var(--text-main); }

/* ==================================
   BOTTOM BAR (PASS & PLAY) 
   ================================== */
.bottom-bar {
  flex: 0 0 110px; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px);
  border-top: 8px solid var(--grass); display: flex; justify-content: space-between; align-items: center;
  padding: 0 20px; z-index: 200; border-radius: 40px 40px 0 0; box-shadow: 0 -10px 30px rgba(139, 195, 74, 0.2);
}

.turn-info {
  padding: 8px 16px; background: #F1F8E9; border-radius: 20px;
  border: 4px solid #AED581; display: flex; align-items: center; gap: 15px;
}

.avatar-box {
  background: #FFF; border-radius: 16px; width: 56px; height: 56px; display: flex; justify-content: center; align-items: center;
  font-size: 2.2rem; border: 4px solid var(--border-bubbly); border-bottom-width: 6px; box-shadow: 0 4px 0 rgba(0,0,0,0.05);
}

.player-meta { display: flex; flex-direction: column; line-height: 1.1; }
.turn-label { font-size: 0.9rem; color: #558B2F; font-weight: 800; text-transform: uppercase; }
.name-label { font-size: 1.5rem; color: var(--text-main); font-weight: 700; }

.action-btn {
  background: var(--p-azul); border: 4px solid #0288D1; border-bottom-width: 10px;
  border-radius: 30px; padding: 0 35px; height: 75px; color: white; font-family: inherit; font-size: 1.8rem; font-weight: 700;
  text-shadow: 2px 2px 0 #0288D1; letter-spacing: 1px; cursor: pointer; transition: all 0.1s; position: relative; top: 0; white-space: nowrap;
}
.action-btn:active { top: 6px; border-bottom-width: 4px; }
.action-btn.disabled { filter: grayscale(1); opacity: 0.5; pointer-events: none; }

/* Animations */
@keyframes bounceIn {
  0% { transform: scale(0.4) translateY(60px); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes wobble {
  0% { transform: rotate(-15deg) scale(0.95); }
  100% { transform: rotate(15deg) scale(1.05); }
}