/* Talk & Play World – custom styles (Tailwind handles layout utilities) */
:root {
  --sky: #4dabf7;
  --ink: #2b2d42;
  --kid-font: "Baloo 2", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;
}
* { -webkit-tap-highlight-color: transparent; }
html, body { font-family: var(--kid-font); color: var(--ink); }
body {
  background: linear-gradient(180deg, #74c0fc 0%, #a5d8ff 45%, #b2f2bb 100%) fixed;
  overscroll-behavior: none;
}
.welcome-bg { background: radial-gradient(circle at 30% 20%, #ffe066 0, transparent 30%), linear-gradient(160deg, #74c0fc, #b197fc 60%, #f783ac); }

.card { background: #fff; border-radius: 28px; box-shadow: 0 10px 0 rgba(0,0,0,.08), 0 18px 40px rgba(0,0,0,.15); }
.topbar { background: rgba(255,255,255,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 3px solid rgba(255,255,255,.9); }

/* ---- Buttons ---- */
.btn-kid {
  font-family: var(--kid-font); font-weight: 800; font-size: 1.15rem; line-height: 1.2;
  padding: .65rem 1.2rem; border-radius: 18px; border: none; cursor: pointer; color: #fff;
  box-shadow: 0 5px 0 rgba(0,0,0,.22); transition: transform .08s, box-shadow .08s, filter .15s;
  min-height: 48px; user-select: none; touch-action: manipulation;
}
.btn-kid:hover { filter: brightness(1.07); }
.btn-kid:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.22); }
.btn-kid:disabled { filter: grayscale(.8) opacity(.6); cursor: not-allowed; transform: none; }
.btn-sm { font-size: 1rem; padding: .45rem .9rem; min-height: 42px; }
.btn-green { background: #40c057; } .btn-blue { background: #339af0; } .btn-purple { background: #845ef7; }
.btn-orange { background: #fd7e14; } .btn-pink { background: #f06595; } .btn-red { background: #fa5252; }
.btn-white { background: #fff; color: var(--ink); border: 3px solid #e9ecef; }
.btn-gold { background: #fab005; }

.chip {
  display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .3rem .8rem;
  font-weight: 800; font-size: 1rem; min-height: 42px; border: none; white-space: nowrap;
}
button.chip { cursor: pointer; }
.chip-white { background: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.1); }
.chip-purple { background: #845ef7; color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.18); }
.chip-gold { background: #ffd43b; color: #7a4b00; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.mic-off { background: #ffe3e3; color: #c92a2a; box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.mic-on { background: #40c057; color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.18); animation: micPulse 1.6s infinite; }
.mic-denied { background: #e9ecef; color: #868e96; }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(64,192,87,.6); } 50% { box-shadow: 0 0 0 8px rgba(64,192,87,0); } }

.net-dot { width: 12px; height: 12px; border-radius: 50%; background: #adb5bd; display: inline-block; }
.net-dot.on { background: #40c057; box-shadow: 0 0 6px #40c057; }
.net-dot.off { background: #fa5252; }

.input-kid {
  font-family: var(--kid-font); font-size: 1.35rem; font-weight: 700; padding: .5rem .9rem; border-radius: 16px;
  border: 3px solid #dee2e6; outline: none; background: #f8f9fa;
}
.input-kid:focus { border-color: var(--sky); background: #fff; }

.swatch { width: 40px; height: 40px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 2px #dee2e6; cursor: pointer; transition: transform .1s; }
.swatch.active { transform: scale(1.18); box-shadow: 0 0 0 3px var(--ink); }

/* ---- Members strip (speaking glow) ---- */
.member { position: relative; width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; transition: box-shadow .15s; }
.member canvas { width: 38px; height: 38px; }
.member.speaking { box-shadow: 0 0 0 3px #51cf66, 0 0 16px 4px rgba(81,207,102,.8); animation: speakGlow .6s infinite alternate; }
.member .mic-badge { position: absolute; right: -4px; bottom: -4px; font-size: 13px; }
@keyframes speakGlow { from { box-shadow: 0 0 0 3px #51cf66, 0 0 8px 2px rgba(81,207,102,.6); } to { box-shadow: 0 0 0 4px #51cf66, 0 0 20px 6px rgba(81,207,102,.9); } }
.member-card { display: flex; align-items: center; gap: .5rem; background: #f8f9fa; border-radius: 18px; padding: .4rem .6rem; font-weight: 800; }
.member-card .member { width: 54px; height: 54px; flex: none; }
.member-card .member canvas { width: 50px; height: 50px; }

/* ---- Stages ---- */
.stage { max-width: min(100%, calc((100dvh - 150px) * 1.6667)); }
.stage-wide { max-width: min(100%, calc((100dvh - 300px) * 1.935)); }
.stage-canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: pointer; }
.status-line { text-align: center; font-weight: 800; font-size: 1.2rem; color: #5f3dc4; background: #f3f0ff; border-radius: 14px; padding: .35rem .8rem; margin-bottom: .5rem; }

/* ---- Creative ---- */
.tool-panel { background: #fff5f9; border-radius: 20px; padding: .7rem; }
.tool-title { font-weight: 800; color: #c2255c; font-size: 1rem; margin-top: .2rem; }
.tool-btn {
  font-family: var(--kid-font); font-weight: 800; font-size: 1rem; background: #fff; border: 3px solid #fcc2d7;
  border-radius: 14px; padding: .35rem .7rem; min-height: 44px; cursor: pointer; text-align: left; transition: transform .08s;
}
.tool-btn:active { transform: scale(.95); }
.tool-btn.active { background: #f06595; color: #fff; border-color: #f06595; }
.tool-danger { border-color: #ffa8a8; color: #e03131; }
.draw-canvas { background: #fff; border: 4px dashed #fcc2d7; touch-action: none; cursor: crosshair; display: block; }
.dg-banner { background: #fff; border-radius: 14px; padding: .5rem; font-weight: 800; text-align: center; font-size: 1.05rem; }
.dg-banner .secret { font-size: 1.6rem; color: #c2255c; display: block; }
.dg-banner .pattern { font-size: 1.6rem; letter-spacing: .25em; display: block; }
.dg-feed { background: #fff; border-radius: 14px; padding: .5rem; height: 180px; overflow-y: auto; font-size: .95rem; }
.dg-feed div { padding: 2px 0; border-bottom: 1px dashed #f1f3f5; }
.dg-feed .good { color: #2b8a3e; font-weight: 800; }
.dg-feed .info { color: #5f3dc4; font-weight: 800; }
.emoji-btn { font-size: 1.9rem; background: #fff; border: 3px solid #fcc2d7; border-radius: 14px; min-height: 52px; cursor: pointer; }
.emoji-btn:active { transform: scale(.92); }

/* ---- Math ---- */
.race-problem { text-align: center; margin-top: .8rem; }
.rp-visual { font-size: 2.1rem; line-height: 1.2; min-height: 0; }
.rp-visual .op { font-weight: 800; color: #868e96; margin: 0 .3rem; }
.rp-visual .gone { opacity: .25; text-decoration: line-through; }
.rp-text { font-size: 3.2rem; font-weight: 800; color: #2b8a3e; }
.choice-btn { font-size: 2rem !important; min-height: 72px; }
.choice-btn.right { background: #2f9e44 !important; }
.choice-btn.wrong { background: #e03131 !important; animation: shake .35s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.countdown { position: absolute; inset: 0; display: grid; place-items: center; font-size: 6rem; font-weight: 800; color: #fff; text-shadow: 0 6px 0 rgba(0,0,0,.25); background: rgba(0,0,0,.25); border-radius: 1rem; }

.market-counter { background: linear-gradient(#fff9db, #ffec99); border-radius: 22px; padding: 1rem; }
.speech { background: #fff; border-radius: 18px; padding: .8rem 1rem; font-size: 1.25rem; font-weight: 700; position: relative; margin-top: .6rem; text-align: center; }
.speech::before { content: ""; position: absolute; top: -14px; left: 50%; margin-left: -10px; border: 10px solid transparent; border-bottom-color: #fff; border-top: 0; }
.speech b { color: #e8590c; }
.tray { min-height: 120px; border: 4px dashed #94d82d; background: #f4fce3; border-radius: 22px; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center; padding: .6rem; transition: background .15s; }
.tray.hot { background: #d8f5a2; }
.tray-hint { color: #94d82d; font-weight: 800; font-size: 1.2rem; }
.coin {
  width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.25rem;
  cursor: grab; user-select: none; touch-action: none; box-shadow: 0 4px 0 rgba(0,0,0,.25), inset 0 0 0 4px rgba(255,255,255,.35);
  color: #5c3c00;
}
.coin.small { width: 60px; height: 60px; font-size: 1.05rem; }
.coin-200 { background: radial-gradient(circle, #ffd43b 0 52%, #ced4da 53% 100%); }
.coin-100 { background: radial-gradient(circle, #dee2e6 0 52%, #fcc419 53% 100%); }
.coin-50  { background: radial-gradient(circle at 35% 35%, #ffe066, #f59f00); width: 66px; height: 66px; }
.coin-20  { background: radial-gradient(circle at 35% 35%, #ffe8a1, #e8a317); width: 58px; height: 58px; font-size: 1.05rem; }
.coin-ghost { position: fixed; pointer-events: none; z-index: 100; transform: translate(-50%, -50%) scale(1.15); opacity: .92; }

/* ---- Shop ---- */
.shop-stage { background: radial-gradient(circle at 50% 40%, #fff3bf, #ffd8a8); }
.item-card { background: #fff8f0; border: 3px solid #ffd8a8; border-radius: 22px; padding: .8rem; display: flex; gap: .8rem; align-items: center; }
.item-card.equipped { border-color: #40c057; background: #ebfbee; }
.item-card canvas { width: 92px; height: 92px; flex: none; background: #fff; border-radius: 18px; }

/* ---- Overlays, modals, toasts ---- */
.overlay { position: fixed; inset: 0; z-index: 60; background: rgba(30, 30, 60, .45); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.pop-in { animation: popIn .25s cubic-bezier(.2,1.6,.4,1); }
@keyframes popIn { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.room-code { font-size: 4rem; font-weight: 800; letter-spacing: .25em; text-align: center; color: #845ef7; line-height: 1.1; margin: .2rem 0 .6rem; }
.warn-box { background: #fff4e6; color: #d9480f; border-radius: 14px; padding: .5rem .8rem; font-weight: 700; margin-bottom: .8rem; }

.toasts { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: 92vw; }
.toast { background: #fff; border-radius: 18px; padding: .6rem 1.1rem; font-weight: 800; font-size: 1.1rem; box-shadow: 0 6px 20px rgba(0,0,0,.2); animation: toastIn .25s ease-out; transition: opacity .35s, transform .35s; text-align: center; }
.toast.out { opacity: 0; transform: translateY(12px); }
.toast-good { background: #d3f9d8; color: #2b8a3e; }
.toast-warn { background: #fff4e6; color: #d9480f; }
.toast-coin { background: #fff3bf; color: #a66400; }
@keyframes toastIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 640px) {
  .btn-kid { font-size: 1rem; padding: .55rem .9rem; }
  .rp-text { font-size: 2.4rem; }
  .room-code { font-size: 3rem; }
}