/* MODIBU - Monopoli Digital Anti-Bullying */
/* Global Styles */

:root {
  --sky: #B5E3F7;
  --sky-deep: #7BC8EE;
  --sky-soft: #DAF1FB;
  --ink: #2C3E50;
  --ink-soft: #5A6B7A;
  --white: #FFFFFF;
  --cream: #FFF8EB;

  /* Category colors */
  --c-edukasi: #51CF66;
  --c-edukasi-deep: #2F9E44;
  --c-fakta: #FFD93D;
  --c-fakta-deep: #F59F00;
  --c-tantangan: #FF8FAB;
  --c-tantangan-deep: #E64980;
  --c-refleksi: #66D9CB;
  --c-refleksi-deep: #0CA678;
  --c-kesempatan: #4DABF7;
  --c-kesempatan-deep: #1971C2;
  --c-hukuman: #FF6B6B;
  --c-hukuman-deep: #E03131;
  --c-start: #FFA94D;
  --c-start-deep: #F76707;
  --c-finish: #9775FA;
  --c-finish-deep: #6741D9;

  /* Player colors */
  --p-merah: #FF6B6B;
  --p-biru: #4DABF7;
  --p-hijau: #51CF66;
  --p-kuning: #FFD93D;

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-xl: 40px;

  --shadow-toy: 0 4px 0 rgba(0, 0, 0, 0.12), 0 6px 14px rgba(20, 50, 80, 0.08);
  --shadow-soft: 0 8px 24px rgba(20, 50, 80, 0.10);
  --shadow-pop: 0 12px 36px rgba(20, 50, 80, 0.18);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--sky);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(ellipse at 20% 10%, #DAF1FB 0%, transparent 50%),
    radial-gradient(ellipse at 80% 0%, #C5E9F8 0%, transparent 60%),
    var(--sky);
  background-attachment: fixed;
}

.font-display {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
}

.font-display-b {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
}

/* ============ Layout / Screen Frame ============ */

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.screen-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(123, 200, 238, 0.35);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.screen-nav .brand {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-right: 6px;
}

.screen-nav .brand .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--p-merah);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 2px;
}

.screen-nav .tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.screen-nav .tab {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.screen-nav .tab:hover {
  background: rgba(123, 200, 238, 0.18);
  color: var(--ink);
}

.screen-nav .tab.active {
  background: var(--ink);
  color: white;
}

.screen-nav .tab .num {
  display: inline-block;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.25);
  padding: 2px 6px;
  border-radius: 999px;
  margin-right: 6px;
  font-weight: 800;
  opacity: 0.8;
}

.screen-nav .tab:not(.active) .num {
  background: rgba(0, 0, 0, 0.08);
  color: var(--ink-soft);
}

.stage {
  flex: 1;
  padding: 28px 0;
  position: relative;
}

/* Decorative clouds */
.cloud {
  position: absolute;
  background: white;
  border-radius: 999px;
  opacity: 0.85;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(40, 80, 120, 0.06);
}

.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  background: white;
  border-radius: 50%;
}

/* ============ Buttons ============ */

.btn {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 17px;
  padding: 14px 26px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  letter-spacing: 0.01em;
}

.btn:active {
  transform: translateY(2px);
}

.btn-primary {
  background: linear-gradient(180deg, #FFC04D 0%, #FFA94D 100%);
  color: white;
  box-shadow: 0 5px 0 #E8852C, 0 8px 20px rgba(232, 133, 44, 0.30);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.10);
  border: 3px solid white;
}

.btn-primary:hover {
  box-shadow: 0 6px 0 #E8852C, 0 10px 24px rgba(232, 133, 44, 0.35);
}

.btn-primary:active {
  box-shadow: 0 2px 0 #E8852C;
}

.btn-blue {
  background: linear-gradient(180deg, #5BB8FD 0%, #4DABF7 100%);
  color: white;
  box-shadow: 0 5px 0 #1971C2, 0 8px 20px rgba(25, 113, 194, 0.30);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.10);
  border: 3px solid white;
}

.btn-blue:active {
  box-shadow: 0 2px 0 #1971C2;
}

.btn-green {
  background: linear-gradient(180deg, #69DB7C 0%, #51CF66 100%);
  color: white;
  box-shadow: 0 5px 0 #2F9E44, 0 8px 20px rgba(47, 158, 68, 0.30);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.10);
  border: 3px solid white;
}

.btn-green:active {
  box-shadow: 0 2px 0 #2F9E44;
}

.btn-pink {
  background: linear-gradient(180deg, #FF95B5 0%, #FF8FAB 100%);
  color: white;
  box-shadow: 0 5px 0 #C2185B, 0 8px 20px rgba(194, 24, 91, 0.30);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.10);
  border: 3px solid white;
}

.btn-pink:active {
  box-shadow: 0 2px 0 #C2185B;
}

.btn-red {
  background: linear-gradient(180deg, #FF8585 0%, #FF6B6B 100%);
  color: white;
  box-shadow: 0 5px 0 #C92A2A, 0 8px 20px rgba(201, 42, 42, 0.30);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.10);
  border: 3px solid white;
}

.btn-red:active {
  box-shadow: 0 2px 0 #C92A2A;
}

.btn-ghost {
  background: white;
  color: var(--ink);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08), 0 6px 14px rgba(0, 0, 0, 0.05);
  border: 2px solid #E8F4FB;
}

.btn-ghost:active {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.btn-sm {
  padding: 9px 16px;
  font-size: 14px;
}

.btn-lg {
  padding: 18px 38px;
  font-size: 22px;
}

/* Round icon button */
.icon-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid white;
  cursor: pointer;
  transition: transform 0.1s;
  font-size: 22px;
  color: white;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
}

.icon-btn:active {
  transform: translateY(2px);
}

.icon-btn.orange {
  background: linear-gradient(180deg, #FFB95C, #FFA94D);
  box-shadow: 0 4px 0 #E8852C;
}

.icon-btn.pink {
  background: linear-gradient(180deg, #FF95B5, #FF8FAB);
  box-shadow: 0 4px 0 #C2185B;
}

.icon-btn.red {
  background: linear-gradient(180deg, #FF8585, #FF6B6B);
  box-shadow: 0 4px 0 #C92A2A;
}

.icon-btn.blue {
  background: linear-gradient(180deg, #5BB8FD, #4DABF7);
  box-shadow: 0 4px 0 #1971C2;
}

.icon-btn.green {
  background: linear-gradient(180deg, #69DB7C, #51CF66);
  box-shadow: 0 4px 0 #2F9E44;
}

.icon-btn.lg {
  width: 72px;
  height: 72px;
  font-size: 28px;
}

/* ============ Card ============ */

.card {
  background: white;
  border-radius: var(--radius-l);
  padding: 24px;
  box-shadow: var(--shadow-soft);
  border: 3px solid white;
}

.card-toy {
  background: white;
  border-radius: var(--radius-l);
  border: 4px solid white;
  box-shadow:
    0 0 0 4px var(--c-start),
    var(--shadow-soft);
  padding: 28px;
}

/* ============ Logo MODIBU ============ */

.modibu-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.modibu-logo .l {
  display: inline-block;
  font-size: inherit;
  text-shadow: 3px 3px 0 white, -1px -1px 0 rgba(0, 0, 0, 0.05);
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.10));
  position: relative;
  transform-origin: center bottom;
}

.modibu-logo .l:nth-child(odd) {
  transform: rotate(-3deg);
}

.modibu-logo .l:nth-child(even) {
  transform: rotate(3deg);
}

.modibu-logo .l1 {
  color: #FF6B6B;
}

.modibu-logo .l2 {
  color: #4DABF7;
}

.modibu-logo .l3 {
  color: #FFA94D;
}

.modibu-logo .l4 {
  color: #51CF66;
}

.modibu-logo .l5 {
  color: #FF8FAB;
}

.modibu-logo .l6 {
  color: #9775FA;
}

.modibu-tagline {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  color: #1971C2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ============ Avatars / Pawns ============ */

.pawn {
  width: 28px;
  height: 36px;
  position: relative;
  display: inline-block;
}

.pawn .head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid white;
}

.pawn .base {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 10px;
  border-radius: 999px;
  border: 2.5px solid white;
}

.pawn .stem {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 16px;
  border-radius: 3px;
}

.pawn.red .head,
.pawn.red .base,
.pawn.red .stem {
  background: var(--p-merah);
}

.pawn.blue .head,
.pawn.blue .base,
.pawn.blue .stem {
  background: var(--p-biru);
}

.pawn.green .head,
.pawn.green .base,
.pawn.green .stem {
  background: var(--p-hijau);
}

.pawn.yellow .head,
.pawn.yellow .base,
.pawn.yellow .stem {
  background: var(--p-kuning);
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 22px;
  border: 3px solid white;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
}

.avatar.red {
  background: linear-gradient(180deg, #FF8585, #FF6B6B);
}

.avatar.blue {
  background: linear-gradient(180deg, #5BB8FD, #4DABF7);
}

.avatar.green {
  background: linear-gradient(180deg, #69DB7C, #51CF66);
}

.avatar.yellow {
  background: linear-gradient(180deg, #FFE066, #FCC419);
  color: #5C3A00;
}

/* Dice */
.dice {
  width: 72px;
  height: 72px;
  background: white;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #E5EEF4;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.10), 0 8px 20px rgba(0, 0, 0, 0.10);
  position: relative;
}

.dice-face {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  width: 56px;
  height: 56px;
  gap: 2px;
}

.dice-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
  align-self: center;
  justify-self: center;
}

@keyframes diceRoll {
  0% {
    transform: rotate(0deg) scale(1);
  }

  25% {
    transform: rotate(180deg) scale(1.08);
  }

  50% {
    transform: rotate(360deg) scale(1);
  }

  75% {
    transform: rotate(540deg) scale(1.05);
  }

  100% {
    transform: rotate(720deg) scale(1);
  }
}

.dice.rolling {
  animation: diceRoll 0.8s ease-in-out;
}

/* ============ Modal ============ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 50, 80, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
  animation: fadeIn 0.2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal {
  background: white;
  border-radius: var(--radius-l);
  padding: 28px;
  max-width: 720px;
  width: 100%;
  max-height: 92vh;
  position: relative;
  overflow: visible;
  box-shadow: var(--shadow-pop);
  border: 4px solid white;
  animation: popIn 0.25s ease-out;
}

/* Tile / Board */

.tile {
  background: white;
  border: 2px solid white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.tile-label {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: white;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.tile-price-top {
  width: 100%;
  padding: 4px 2px;
  text-align: center;
  color: var(--ink-deep);
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: clamp(9px, 12cqi, 14px);
  letter-spacing: 0.01em;
  border-radius: 4px 4px 0 0;
  line-height: 1;
}

.tile-cat-bottom {
  width: 100%;
  padding: 2px;
  text-align: center;
  color: var(--cat-deep);
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: clamp(8px, 14cqi, 16px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  line-height: 0.95;
  margin-top: auto;
  margin-bottom: 15%;
  /* Reserve bottom area for pawns */
  height: 25%;
}

.tile-stripe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tile types */
.tile-edukasi {
  background: var(--c-edukasi);
}

.tile-fakta {
  background: var(--c-fakta);
}

.tile-tantangan {
  background: var(--c-tantangan);
}

.tile-refleksi {
  background: var(--c-refleksi);
}

.tile-kesempatan {
  background: var(--c-kesempatan);
}

.tile-hukuman {
  background: var(--c-hukuman);
}

.tile-start {
  background: var(--c-start);
}

.tile-finish {
  background: var(--c-finish);
}

.tile-penjara {
  background: #495057;
}

.tile-bonus {
  background: #FAB005;
}

.tile-corner {
  background: linear-gradient(135deg, #FFE5B4, #FFCB7B);
}

/* Active player turn ring */
@keyframes pulseRing {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 169, 77, 0.6), 0 3px 0 rgba(0, 0, 0, 0.12);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(255, 169, 77, 0.0), 0 3px 0 rgba(0, 0, 0, 0.12);
  }
}

.avatar.active {
  animation: pulseRing 1.6s infinite;
}

/* Timer bar */
.timer-bar {
  height: 14px;
  border-radius: 999px;
  background: #E5EEF4;
  overflow: hidden;
  position: relative;
}

.timer-bar .fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #51CF66, #FFD93D);
  transition: width 1s linear, background 0.5s;
}

.timer-bar.danger .fill {
  background: linear-gradient(90deg, #FF8585, #FF6B6B);
}

/* Scoreboard */

.score-pill {
  background: white;
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08);
  border: 2px solid white;
}

/* Cloud bg shapes */
.bg-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.bg-clouds .c {
  position: absolute;
  background: white;
  opacity: 0.7;
  border-radius: 999px;
  filter: drop-shadow(0 8px 16px rgba(40, 80, 120, 0.04));
}

.bg-clouds .c::before,
.bg-clouds .c::after {
  content: '';
  position: absolute;
  background: white;
  border-radius: 50%;
}

/* Skyline silhouette */
.skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 110px;
  pointer-events: none;
  z-index: 0;
}

/* Question card buttons */
.option-btn {
  width: 100%;
  text-align: left;
  background: linear-gradient(180deg, #5BB8FD 0%, #4DABF7 100%);
  color: white;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 16px 20px;
  border-radius: 18px;
  border: 3px solid white;
  box-shadow: 0 4px 0 #1971C2, 0 6px 16px rgba(25, 113, 194, 0.20);
  cursor: pointer;
  transition: transform 0.1s;
  display: flex;
  gap: 12px;
  align-items: center;
}

.option-btn:hover {
  transform: translateY(-1px);
}

.option-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #1971C2;
}

.option-btn.correct {
  background: linear-gradient(180deg, #69DB7C, #51CF66);
  box-shadow: 0 4px 0 #2F9E44;
}

.option-btn.wrong {
  background: linear-gradient(180deg, #FF8585, #FF6B6B);
  box-shadow: 0 4px 0 #C92A2A;
}

.option-btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.option-btn .opt-letter {
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

/* Headings */
.h-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
}

/* Session code */
.session-code {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: clamp(34px, 6vw, 56px);
  color: white;
  background: linear-gradient(180deg, #5BB8FD 0%, #4DABF7 100%);
  padding: clamp(14px, 2.4vw, 22px) clamp(20px, 3.5vw, 38px);
  border-radius: 26px;
  border: 4px solid white;
  box-shadow: 0 6px 0 #1971C2, 0 10px 22px rgba(25, 113, 194, 0.25);
  display: inline-block;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
  white-space: nowrap;
}

/* Tag chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  color: var(--ink);
  border: 1.5px solid rgba(255, 255, 255, 1);
}

.chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Helpful spacing */
.stack>*+* {
  margin-top: var(--gap, 12px);
}