/* ================================================================
   বনের বন্ধু — ডিজাইন
   দিক: উষ্ণ কাগজ-রঙা মঞ্চঘর, নরম প্রবাল (পর্দার রং) মূল রং,
   সবুজ মানে "যুক্ত / চলছে"। গোল-মিষ্টি অক্ষর, শান্ত স্প্রিং-চলন।
   বাচ্চার পর্দা খোলে নকশিকাঁথার সেলাই করা পর্দা সরিয়ে।
   ================================================================ */

/* ---------- আকাশের রং (JS বদলায়, CSS ধীরে মেশায়) ---------- */
@property --sky1 { syntax: '<color>'; inherits: true; initial-value: #92caf0; }
@property --sky2 { syntax: '<color>'; inherits: true; initial-value: #c8e5f3; }
@property --sky3 { syntax: '<color>'; inherits: true; initial-value: #f5e3d1; }
@property --glow { syntax: '<color>'; inherits: true; initial-value: #fffbe4; }
@property --gx { syntax: '<percentage>'; inherits: true; initial-value: 78%; }
@property --gy { syntax: '<percentage>'; inherits: true; initial-value: 13%; }
@property --cloud { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --cloud-a { syntax: '<number>'; inherits: true; initial-value: .9; }

/* ---------- টোকেন ---------- */
:root {
  color-scheme: light;
  --paper: #FBF6EF;
  --paper-2: #F3EBE0;
  --card: #FFFDFA;
  --card-2: #FFF9F3;
  --ink: #2B2420;
  --ink-2: #6E625A;
  --ink-3: #A29387;
  --hair: rgb(70 45 25 / .09);
  --hair-2: rgb(70 45 25 / .15);

  --coral: #F0876A;
  --coral-2: #E5765A;
  --coral-deep: #A8472A;
  --coral-tint: #FDE9E0;
  --leaf: #6FB57F;
  --leaf-deep: #2E6A43;
  --leaf-tint: #E4F2E4;
  --amber: #F0B04F;
  --amber-deep: #85560E;
  --amber-tint: #FCEFD5;

  /* ভাবভঙ্গির ছবির রং */
  --rf: #FFE6CF; --rs: #3A2E28; --rc: #F6A493; --rm: #E2654F; --ry: #F6C553; --rg: #6FB57F; --rb: #CFE7F7;

  --display: "Baloo Da 2", "Anek Bangla", system-ui, sans-serif;
  --body: "Anek Bangla", "Hind Siliguri", "Noto Sans Bengali", system-ui, sans-serif;

  --r-sm: 14px; --r-md: 20px; --r-lg: 26px; --r-xl: 40px;
  --sh-1: 0 1px 2px rgb(70 45 25 / .05), 0 6px 18px -10px rgb(70 45 25 / .18);
  --sh-2: 0 2px 6px rgb(70 45 25 / .05), 0 24px 48px -20px rgb(70 45 25 / .3);
  --sh-up: 0 -12px 34px -14px rgb(70 45 25 / .28);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  transition: --sky1 1.4s ease, --sky2 1.4s ease, --sky3 1.4s ease, --glow 1.4s ease, --gx 1.4s ease, --gy 1.4s ease, --cloud 1.4s ease, --cloud-a 1.4s ease;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #1C1815; --paper-2: #2A2420; --card: #24201C; --card-2: #282320;
    --ink: #F4EBE3; --ink-2: #C3B5A9; --ink-3: #8F8175;
    --hair: rgb(255 238 220 / .08); --hair-2: rgb(255 238 220 / .14);
    --coral: #F29A80; --coral-2: #EA8A6E; --coral-deep: #FFB9A4; --coral-tint: rgb(242 154 128 / .16);
    --leaf: #7FC48E; --leaf-deep: #A8DDB3; --leaf-tint: rgb(127 196 142 / .15);
    --amber: #F2BC63; --amber-deep: #F8D597; --amber-tint: rgb(242 188 99 / .15);
    --rf: #F6DCC4; --rs: #2B2420; --rb: #BFDDF2;
    --sh-1: 0 1px 2px rgb(0 0 0 / .25), 0 8px 20px -12px rgb(0 0 0 / .5);
    --sh-2: 0 2px 6px rgb(0 0 0 / .3), 0 24px 48px -20px rgb(0 0 0 / .6);
    --sh-up: 0 -12px 34px -14px rgb(0 0 0 / .6);
  }
}

/* ---------- ভিত ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; color: var(--ink); font-family: var(--body); font-size: 15.5px; line-height: 1.55;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .14 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(1200px 600px at 12% -10%, color-mix(in srgb, var(--coral-tint) 70%, transparent), transparent 70%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--coral) 70%, transparent); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { display: block; }

/* ---------- পাতার কাঠামো ---------- */
.app {
  display: grid; gap: 22px 26px; max-width: 1680px; margin: 0 auto; overflow-x: clip;
  padding: 20px max(22px, env(safe-area-inset-right, 0px)) 28px max(22px, env(safe-area-inset-left, 0px));
  grid-template-columns: minmax(296px, 344px) minmax(0, 1fr) minmax(300px, 352px);
  grid-template-areas: "setup stage perform";
  align-items: start;
}
.setup { grid-area: setup; }
.perform { grid-area: perform; }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dock { display: contents; }
.perform .mic-card { order: 1; }
.perform .help { order: 2; }
.perform .react-card { order: 3; }
.perform .voice-card { order: 4; }

/* ---------- ব্র্যান্ড ---------- */
.brand { display: flex; align-items: center; gap: 13px; padding: 4px 4px 6px; animation: rise .6s var(--ease) both; }
.logo { width: 46px; height: 46px; flex: none; filter: drop-shadow(0 8px 12px rgb(240 135 106 / .35)); transform: rotate(-4deg); }
.brand-text { min-width: 0; }
.brand h1 { margin: 0; font: 800 1.72rem/1 var(--display); letter-spacing: -.01em; }
.brand p { margin: 4px 0 0; font-size: .88rem; color: var(--ink-2); line-height: 1.35; }
.tag { align-self: flex-start; margin-left: auto; font: 600 .74rem/1 var(--body); padding: 6px 10px; border-radius: 999px; background: var(--amber-tint); color: var(--amber-deep); }

/* ---------- কার্ড ---------- */
.card {
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: 18px; box-shadow: var(--sh-1); min-width: 0;
  animation: rise .6s var(--ease) both;
}
.col > :nth-child(2) { animation-delay: .05s; }
.col > :nth-child(3) { animation-delay: .1s; }
.col > :nth-child(4) { animation-delay: .15s; }
.dock > :nth-child(2) { animation-delay: .08s; }
.card-title { margin: 0 0 14px; font: 700 1.12rem/1.2 var(--display); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-title > span { display: inline-flex; align-items: center; gap: 8px; }
.card-title svg { width: 20px; height: 20px; }
.kbd-hint { font: 500 .78rem/1 var(--body); color: var(--ink-3); }
.hint { margin: 14px 0 0; font-size: .86rem; line-height: 1.5; color: var(--ink-2); }
.hint.with-icon { display: flex; gap: 10px; align-items: flex-start; }
.hint.with-icon svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ink-3); }

@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.985); } }

/* ---------- বোতাম ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px;
  border-radius: 999px; border: 0; font: 600 .92rem/1 var(--body); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .16s var(--ease), background-color .2s, color .2s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: scale(.96); }
.btn.soft { background: var(--paper-2); color: var(--ink); }
.btn.soft:hover { background: color-mix(in srgb, var(--paper-2) 82%, var(--ink) 7%); }
.btn.text { min-height: 34px; padding: 0 4px; background: none; color: var(--ink-2); font-weight: 500; }
.btn.text:hover { color: var(--ink); }
.btn.text svg { width: 16px; height: 16px; }
.btn.text.confirm { color: var(--coral-deep); font-weight: 600; }
.icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hair);
  background: var(--card); color: var(--ink-2); cursor: pointer; box-shadow: var(--sh-1); transition: transform .16s var(--ease), color .2s;
}
.icon-btn:hover { color: var(--ink); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 19px; height: 19px; }

/* সুইচ */
.switch { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; font-size: .92rem; line-height: 1.3; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.switch .track { position: relative; flex: none; width: 42px; height: 26px; border-radius: 99px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--hair-2); transition: background-color .25s; }
.switch .track i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgb(70 45 25 / .28); transition: transform .32s var(--spring); }
.switch input:checked + .track { background: var(--leaf); box-shadow: none; }
.switch input:checked + .track i { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 3px solid color-mix(in srgb, var(--coral) 70%, transparent); outline-offset: 2px; }

/* ---------- বাচ্চার ফোন যুক্ত করা ---------- */
.card-head h2 { margin: 0; font: 700 1.12rem/1.2 var(--display); }
.card-head p { margin: 6px 0 0; font-size: .86rem; line-height: 1.45; color: var(--ink-2); }
.pair-body { display: flex; gap: 14px; align-items: center; margin-top: 14px; }
.qr {
  flex: none; width: 124px; height: 124px; padding: 9px; border-radius: 18px; background: #fff;
  box-shadow: 0 0 0 1px var(--hair), 0 8px 18px -10px rgb(70 45 25 / .3); position: relative;
}
.qr::after { /* কোণের সেলাই */ content: ""; position: absolute; inset: -5px; border-radius: 22px; border: 1.5px dashed color-mix(in srgb, var(--coral) 55%, transparent); pointer-events: none; }
.qr img, .qr canvas { display: block; width: 106px !important; height: 106px !important; image-rendering: pixelated; }
.code-box { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.code-label { font-size: .8rem; color: var(--ink-2); }
.code { display: flex; gap: 3px; font: 700 1.32rem/1 var(--display); letter-spacing: .02em; color: var(--ink); }
.code i { font-style: normal; display: grid; place-items: center; width: 22px; height: 30px; border-radius: 8px; background: var(--paper-2); }
.code i.gap { width: 6px; background: none; }
.pair-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pair-actions .btn { min-height: 36px; padding: 0 12px; font-size: .84rem; }
.pair-actions .btn svg { width: 16px; height: 16px; }
.link-field {
  display: block; width: 100%; margin-top: 12px; padding: 8px 12px; border-radius: 12px; border: 1px dashed var(--hair-2);
  background: transparent; color: var(--ink-3); font: 500 .74rem/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace; text-overflow: ellipsis;
}
.link-field:focus { color: var(--ink); outline: none; border-style: solid; border-color: var(--coral); }
.link-card .pairing > .btn.text { margin-top: 6px; }

.kid-live { display: none; }
.link-card[data-mode="live"] .pairing, .link-card[data-mode="waiting"] .pairing { display: none; }
.link-card[data-mode="live"] .kid-live, .link-card[data-mode="waiting"] .kid-live { display: block; }
.link-card[data-mode="live"] .pairing.show, .link-card[data-mode="waiting"] .pairing.show { display: block; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--hair-2); }
.link-card[data-mode="live"] { background: linear-gradient(160deg, color-mix(in srgb, var(--leaf-tint) 70%, var(--card)), var(--card) 70%); }
.kid-row { display: flex; align-items: center; gap: 12px; }
.kid-avatar { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--leaf-tint); display: grid; place-items: center; }
.kid-avatar svg { width: 44px; height: 44px; }
.kid-avatar::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2.5px solid var(--leaf); opacity: 0; transform: scale(calc(.92 + var(--kid, 0) * .2)); transition: opacity .3s; }
.link-card[data-mode="live"] .kid-avatar::after { opacity: calc(.25 + var(--kid, 0) * .75); }
.link-card[data-mode="waiting"] .kid-avatar { filter: grayscale(.5); opacity: .75; }
.kid-text { min-width: 0; flex: 1; }
.kid-text b { display: block; font: 700 1.08rem/1.2 var(--display); }
.kid-text small { display: block; font-size: .84rem; color: var(--ink-2); line-height: 1.35; }
.kid-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.mini-wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.mini-wave i { width: 4px; height: 100%; border-radius: 4px; background: var(--leaf); transform: scaleY(.15); transform-origin: center; opacity: .8; }
.link-card[data-mode="waiting"] .mini-wave { visibility: hidden; }

/* ---------- চরিত্র ---------- */
.chars { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.char {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 8px 12px;
  border-radius: var(--r-md); border: 1.5px solid var(--hair); background: var(--card-2); cursor: pointer; text-align: left;
  transition: transform .2s var(--ease), border-color .25s, box-shadow .25s, background-color .25s;
}
.char:hover { transform: translateY(-2px); box-shadow: var(--sh-1); }
.char:active { transform: scale(.97); }
.char-art {
  align-self: stretch; position: relative; height: 96px; margin-bottom: 9px; border-radius: 14px; overflow: hidden;
  display: grid; place-items: end center; background: linear-gradient(165deg, #CDE7F8 10%, #E4F2D8 85%);
}
.char[data-char="deer"] .char-art { background: linear-gradient(165deg, #F8DCAE 10%, #E5EDCF 85%); }
.char-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(transparent, rgb(255 255 255 / .35)); }
.char-art img { width: 108px; height: 108px; object-fit: contain; transform: translateY(10px); transition: transform .45s var(--spring); }
.char-fallback { width: 74px; height: 74px; margin-bottom: 8px; }
.char[aria-pressed="true"] .char-art img { transform: translateY(6px) scale(1.06); }
.char-name { padding: 0 6px; font: 700 1.2rem/1.15 var(--display); }
.char-sub { padding: 0 6px; font-size: .8rem; line-height: 1.3; color: var(--ink-2); }
.char[aria-pressed="true"] { border-color: var(--coral); background: var(--card); box-shadow: 0 0 0 4px var(--coral-tint), var(--sh-1); }
.tick { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--coral); color: #fff; box-shadow: 0 4px 10px -2px rgb(240 135 106 / .6); transform: scale(0); transition: transform .35s var(--spring); }
.tick svg { width: 14px; height: 14px; }
.char[aria-pressed="true"] .tick { transform: scale(1); }

/* ---------- দৃশ্য ---------- */
.tods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tod { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 .76rem/1.15 var(--body); color: var(--ink-2); text-align: center; }
.tod-sky {
  width: 100%; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(172deg, var(--a, #92caf0), var(--b, #c8e5f3) 62%, var(--c, #f5e3d1));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); transition: transform .25s var(--spring), box-shadow .25s;
}
.tod-sky svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .3)); }
.tod:hover .tod-sky { transform: translateY(-2px); }
.tod:active .tod-sky { transform: scale(.94); }
.tod[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.tod[aria-pressed="true"] .tod-sky { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--coral); transform: translateY(-2px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px 0 11px; border-radius: 999px;
  border: 1px solid var(--hair-2); background: var(--card); color: var(--ink-2); font: 500 .9rem/1 var(--body); cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .16s var(--ease);
}
.chip svg { width: 18px; height: 18px; }
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"] { background: var(--coral-tint); border-color: transparent; color: var(--coral-deep); font-weight: 600; }

/* ---------- মাইক ---------- */
.mic-card { display: flex; flex-direction: column; gap: 14px; transition: background-color .4s, border-color .4s; }
.mic-card.live { border-color: color-mix(in srgb, var(--coral) 35%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--coral-tint) 75%, var(--card)), var(--card) 75%); }
.mic-row { display: flex; align-items: center; gap: 16px; }
.mic {
  position: relative; flex: none; width: 78px; height: 78px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--coral-tint); color: var(--coral-deep);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--coral) 40%, transparent);
  transition: background-color .3s, color .3s, transform .18s var(--ease), box-shadow .3s;
}
.mic svg { position: relative; z-index: 1; width: 32px; height: 32px; }
.mic::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; background: var(--coral); opacity: 0; transform: scale(calc(.82 + var(--lvl, 0) * .5)); transition: opacity .3s; }
.mic::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--coral); opacity: 0; pointer-events: none; }
.mic:hover { transform: scale(1.03); }
.mic:active { transform: scale(.95); }
.mic.live { background: var(--coral); color: #fff; box-shadow: 0 12px 26px -8px rgb(229 118 90 / .7); }
.mic.live::before { opacity: .2; }
.mic.live::after { animation: ring 1.8s var(--ease) infinite; }
.mic.wait { animation: wait 1s ease-in-out infinite alternate; }
@keyframes ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.32); } }
@keyframes wait { to { opacity: .6; } }
.mic-text { min-width: 0; }
.mic-text b { display: block; font: 700 1.3rem/1.15 var(--display); }
.mic-text small { display: block; margin-top: 3px; font-size: .86rem; line-height: 1.4; color: var(--ink-2); }
.wave { display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 2px; }
.wave i { flex: 1; height: 100%; border-radius: 99px; background: var(--hair-2); transform: scaleY(.12); transition: background-color .4s; }
.mic-card.live .wave i { background: var(--coral); }

/* ---------- ভাবভঙ্গি ---------- */
.reacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.react {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 4px 10px; min-width: 0;
  border-radius: 18px; border: 1px solid var(--hair); background: var(--card-2); color: var(--ink); cursor: pointer;
  font: 600 .95rem/1.1 var(--display); transition: transform .18s var(--ease), background-color .2s, border-color .2s, box-shadow .2s;
}
.react svg { width: 42px; height: 42px; transition: transform .3s var(--spring); }
.react span { white-space: nowrap; }
.react kbd { position: absolute; top: 6px; right: 8px; font: 500 .7rem/1 var(--body); color: var(--ink-3); }
.react:hover { background: var(--card); box-shadow: var(--sh-1); transform: translateY(-2px); }
.react:hover svg { transform: scale(1.08) rotate(-4deg); }
.react:active { transform: scale(.94); }
.react[aria-pressed="true"] { background: var(--coral-tint); border-color: color-mix(in srgb, var(--coral) 60%, transparent); color: var(--coral-deep); }
.react[aria-pressed="true"] svg { animation: perk 1.4s ease-in-out infinite; }
.react.hit[data-expr="laugh"] svg { animation: wiggle .55s var(--ease); }
.react.hit[data-expr="bravo"] svg { animation: spin .7s var(--spring); }
.react.hit[data-expr="surprise"] svg { animation: popIn .5s var(--spring); }
.react.hit[data-expr="yes"] svg { animation: nod .6s ease-in-out; }
.react.hit[data-expr="no"] svg { animation: shake .6s ease-in-out; }
.react.hit[data-expr="wave"] svg { animation: wiggle .7s ease-in-out; }
.react.hit[data-expr="dance"] svg { animation: hop .6s ease-in-out 2; }
.react.hit[data-expr="bubbles"] svg { animation: floaty .8s var(--ease); }
@keyframes wiggle { 25% { transform: rotate(-12deg) scale(1.1); } 50% { transform: rotate(10deg) scale(1.1); } 75% { transform: rotate(-6deg); } }
@keyframes spin { from { transform: rotate(0) scale(.8); } to { transform: rotate(360deg) scale(1); } }
@keyframes popIn { 40% { transform: scale(1.3); } }
@keyframes nod { 25%, 75% { transform: translateY(4px); } 50% { transform: translateY(-3px); } }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@keyframes hop { 50% { transform: translateY(-6px) rotate(6deg); } }
@keyframes floaty { 50% { transform: translateY(-7px) scale(1.08); } }
@keyframes perk { 50% { transform: rotate(7deg) translateY(-1px); } }

/* ---------- কণ্ঠ ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-head { display: flex; justify-content: space-between; align-items: center; font-size: .94rem; font-weight: 500; }
.field-head output { font: 600 .82rem/1 var(--body); font-variant-numeric: tabular-nums; color: var(--coral-deep); background: var(--coral-tint); padding: 5px 9px; border-radius: 999px; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; --p: 62%; }
.range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--coral) var(--p), var(--paper-2) var(--p)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 0 0 1px var(--hair-2), 0 3px 9px rgb(70 45 25 / .3); transition: transform .18s var(--spring); }
.range:active::-webkit-slider-thumb { transform: scale(1.14); }
.range::-moz-range-track { height: 8px; border-radius: 99px; background: var(--paper-2); }
.range::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--coral); }
.range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 0 0 1px var(--hair-2), 0 3px 9px rgb(70 45 25 / .3); }
.range-ends { display: flex; justify-content: space-between; font-size: .76rem; color: var(--ink-3); margin-top: -2px; }
.voice-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; }
.voice-row .btn { min-height: 38px; font-size: .86rem; padding: 0 14px; }

/* সাহায্য */
.help { background: linear-gradient(160deg, var(--amber-tint), var(--card) 70%); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.help .card-title { color: var(--amber-deep); margin-bottom: 8px; }
.help p { margin: 0 0 10px; font-size: .9rem; line-height: 1.5; }
.filebtn { position: relative; overflow: hidden; background: var(--card); box-shadow: inset 0 0 0 1px var(--hair-2); }
.filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ================================================================
   মঞ্চ (বাচ্চার পর্দা)
   ================================================================ */
.stage-area {
  grid-area: stage; position: sticky; top: 20px; height: calc(100dvh - 40px); min-height: 520px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.stage-area::before {
  /* পর্দার পেছনে আকাশের আভা */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(118%, 980px); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; opacity: .75;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--sky2) 60%, transparent), color-mix(in oklab, var(--sky1) 22%, transparent) 55%, transparent);
}
.stage-bar { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; animation: rise .6s var(--ease) both; }
.status {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; max-width: 100%; padding: 0 16px 0 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--hair); box-shadow: var(--sh-1); font-size: .9rem; font-weight: 500; white-space: nowrap;
  transition: background-color .4s, color .4s, border-color .4s;
}
.status span { overflow: hidden; text-overflow: ellipsis; }
.status .dot { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); }
.status .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
.status[data-state="wait"] .dot { background: var(--amber); color: var(--amber); }
.status[data-state="wait"] .dot::after { animation: ring 1.6s var(--ease) infinite; }
.status[data-state="off"] .dot { background: transparent; border: 2px solid var(--ink-3); border-right-color: transparent; animation: turn .9s linear infinite; }
.status[data-state="ok"] { background: var(--leaf-tint); border-color: color-mix(in srgb, var(--leaf) 30%, transparent); color: var(--leaf-deep); }
.status[data-state="ok"] .dot { background: var(--leaf); box-shadow: 0 0 0 4px color-mix(in srgb, var(--leaf) 25%, transparent); }
.status[data-state="demo"] .dot { background: var(--coral); }
@keyframes turn { to { transform: rotate(360deg); } }

.device {
  position: relative; flex: 1; min-height: 0; aspect-ratio: 10 / 16; max-width: 100%; padding: 10px; border-radius: var(--r-xl);
  background: linear-gradient(165deg, #FFFFFF, #F4EBE1); box-shadow: 0 0 0 1px var(--hair), var(--sh-2), inset 0 1px 0 #fff;
  animation: rise .7s .05s var(--ease) both;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .device { background: linear-gradient(165deg, #342D28, #26211D); box-shadow: 0 0 0 1px var(--hair), var(--sh-2); }
  /* অন্ধকারে ভাবভঙ্গির ছবিগুলো হালকা স্টিকারের ওপর, যাতে রেখাগুলো হারিয়ে না যায় */
  :root:not([data-theme="light"]) .react svg { padding: 3px; border-radius: 13px; background: #FBEFE3; box-shadow: 0 3px 8px -2px rgb(0 0 0 / .45); }
}
.stage-caption { margin: 0; min-height: 1.4em; font-size: .86rem; color: var(--ink-2); text-align: center; }

.stage {
  position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; isolation: isolate;
  container-type: inline-size; background: var(--sky3); touch-action: none; user-select: none; -webkit-user-select: none;
}
.stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at var(--gx) var(--gy), var(--glow) 0 4.6%, color-mix(in srgb, var(--glow) 40%, transparent) 11%, transparent 27%),
    linear-gradient(var(--sky1) 0%, var(--sky2) 34%, var(--sky3) 55%, var(--sky3) 100%);
}
.stage::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 55%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease;
  background-image: radial-gradient(1.2px 1.2px at 41% 16%, #fff 55%, transparent 62%), radial-gradient(2.2px 2.2px at 53% 64%, #fff 55%, transparent 62%), radial-gradient(1.2px 1.2px at 14% 11%, #fff 55%, transparent 62%), radial-gradient(1.2px 1.2px at 54% 73%, #fff 55%, transparent 62%), radial-gradient(1.6px 1.6px at 10% 31%, #fff 55%, transparent 62%), radial-gradient(2.2px 2.2px at 71% 49%, #fff 55%, transparent 62%), radial-gradient(1.6px 1.6px at 25% 16%, #fff 55%, transparent 62%), radial-gradient(1.6px 1.6px at 30% 6%, #fff 55%, transparent 62%), radial-gradient(2.2px 2.2px at 36% 37%, #fff 55%, transparent 62%), radial-gradient(1.2px 1.2px at 24% 42%, #fff 55%, transparent 62%), radial-gradient(1.6px 1.6px at 83% 50%, #fff 55%, transparent 62%), radial-gradient(1.2px 1.2px at 80% 46%, #fff 55%, transparent 62%), radial-gradient(2.2px 2.2px at 52% 67%, #fff 55%, transparent 62%), radial-gradient(1.2px 1.2px at 25% 34%, #fff 55%, transparent 62%), radial-gradient(1.6px 1.6px at 38% 14%, #fff 55%, transparent 62%), radial-gradient(2.2px 2.2px at 41% 3%, #fff 55%, transparent 62%), radial-gradient(1.6px 1.6px at 76% 42%, #fff 55%, transparent 62%), radial-gradient(2.2px 2.2px at 27% 55%, #fff 55%, transparent 62%), radial-gradient(1.6px 1.6px at 79% 39%, #fff 55%, transparent 62%), radial-gradient(1.6px 1.6px at 60% 23%, #fff 55%, transparent 62%), radial-gradient(1.2px 1.2px at 42% 36%, #fff 55%, transparent 62%), radial-gradient(1.2px 1.2px at 13% 8%, #fff 55%, transparent 62%), radial-gradient(1.6px 1.6px at 83% 38%, #fff 55%, transparent 62%), radial-gradient(2.2px 2.2px at 71% 85%, #fff 55%, transparent 62%), radial-gradient(1.6px 1.6px at 92% 46%, #fff 55%, transparent 62%), radial-gradient(1.2px 1.2px at 89% 28%, #fff 55%, transparent 62%);
  animation: twinkle 3.2s ease-in-out infinite alternate;
}
.stage[data-tod="dusk"]::after { opacity: .25; }
.stage[data-tod="night"]::after { opacity: 1; }
.stage[data-tod="bed"]::after { opacity: .9; }
@keyframes twinkle { from { filter: brightness(.7); } to { filter: brightness(1.3); } }
.stage:fullscreen { border-radius: 0; }

/* মেঘ আর তারা খসা */
.sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cloud {
  position: absolute; left: 0; top: var(--y); width: var(--w); height: calc(var(--w) * .3); border-radius: 999px;
  background: var(--cloud); opacity: var(--cloud-a); animation: drift var(--d) linear var(--dl) infinite; will-change: transform;
  box-shadow: inset 0 -5px 8px -6px rgb(90 110 140 / .25);
}
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 46%; aspect-ratio: 1; left: 16%; bottom: 32%; }
.cloud::after { width: 31%; aspect-ratio: 1; left: 52%; bottom: 30%; }
@keyframes drift { from { transform: translateX(calc(var(--w) * -1.1)); } to { transform: translateX(100cqw); } }
.shoot { position: absolute; top: 9%; left: 72%; width: 120px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff, rgb(255 255 255 / 0)); opacity: 0; }
.shoot.go { animation: shoot 1.1s var(--ease) both; }
@keyframes shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(-22deg); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(-48cqw, 20cqw) rotate(-22deg); } }

.stage .gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; touch-action: none; }
.fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.star { position: absolute; left: 0; top: 0; width: 28px; height: 28px; filter: drop-shadow(0 2px 3px rgb(60 40 0 / .2)); }
.star svg { width: 100%; height: 100%; display: block; }
.ripple { position: absolute; left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 2.5px solid rgb(255 255 255 / .9); box-shadow: 0 0 12px rgb(255 255 255 / .6); }

/* বুদবুদ */
.bubble {
  position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%; pointer-events: auto; cursor: pointer; will-change: transform;
  background:
    radial-gradient(circle at 31% 27%, rgb(255 255 255 / .95) 0 8%, rgb(255 255 255 / 0) 11%),
    radial-gradient(circle at 70% 76%, rgb(255 255 255 / .45) 0 4%, rgb(255 255 255 / 0) 6%),
    radial-gradient(circle, rgb(190 225 255 / .1) 50%, rgb(255 255 255 / .25) 72%, rgb(255 255 255 / .7) 100%);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .75), 0 3px 10px -2px rgb(50 80 120 / .28);
}
.bubble::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: .85;
  background: conic-gradient(from 200deg, #ffb0d6, #a9dcff, #b9f5c6, #fff1a0, #ffb0d6);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 72%); mask: radial-gradient(circle, transparent 60%, #000 72%);
}
.bubble.popped { pointer-events: none; animation: bpop .22s ease-out forwards; }
@keyframes bpop { to { opacity: 0; scale: 1.45; } }

.noscene { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; background: rgb(255 253 250 / .94); color: #2B2420; border-radius: 16px; padding: 12px 14px; font-size: .9rem; box-shadow: var(--sh-1); }

.toast {
  position: absolute; left: 50%; top: 14px; z-index: 9; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 28px);
  padding: 8px 15px 8px 11px; border-radius: 999px; background: rgb(255 253 250 / .96); color: #2B2420; font: 500 .88rem/1.3 var(--body);
  box-shadow: 0 12px 28px -12px rgb(40 25 15 / .5); pointer-events: none; opacity: 0; transform: translate(-50%, -150%) scale(.94);
  transition: transform .5s var(--spring), opacity .25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.toast svg { flex: none; width: 20px; height: 20px; color: var(--coral); }
.toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.seek {
  position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 7; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 13px; border-radius: 999px; white-space: nowrap;
  background: rgb(255 253 250 / .9); color: #2B2420; font: 600 .95rem/1 var(--display); box-shadow: 0 10px 24px -12px rgb(40 25 15 / .45);
}
.dots { display: flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); animation: dot 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 30% { transform: translateY(-5px); opacity: 1; } 0%, 60%, 100% { transform: none; opacity: .5; } }

/* ---------- পর্দা (নকশিকাঁথার সেলাই) ---------- */
.curtain {
  --c1: #F3A189; --c2: #F8B6A0; --c3: #E88A70; --c4: #D9735A; --thread: rgb(255 241 224 / .92);
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23FFF1E0' stroke-width='3.2' stroke-linecap='round' stroke-dasharray='5.5 6'%3E%3Ccircle cx='60' cy='60' r='11'/%3E%3Ccircle cx='60' cy='60' r='46' stroke-dasharray='3 7'/%3E%3Cg id='p'%3E%3Cpath d='M60 47c-9-8-9-22 0-30 9 8 9 22 0 30z'/%3E%3C/g%3E%3Cuse href='%23p' transform='rotate(45 60 60)'/%3E%3Cuse href='%23p' transform='rotate(90 60 60)'/%3E%3Cuse href='%23p' transform='rotate(135 60 60)'/%3E%3Cuse href='%23p' transform='rotate(180 60 60)'/%3E%3Cuse href='%23p' transform='rotate(225 60 60)'/%3E%3Cuse href='%23p' transform='rotate(270 60 60)'/%3E%3Cuse href='%23p' transform='rotate(315 60 60)'/%3E%3C/svg%3E");
  position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden;
}
.curtain[data-state="off"] { display: none; }
.curtain[data-state="open"] { visibility: hidden; transition: visibility 0s 1.3s; }
.drape { position: absolute; top: 0; bottom: 0; width: 53%; transition: transform 1.15s var(--ease-io); will-change: transform; }
.drape.l { left: 0; transform-origin: 0 50%; }
.drape.r { right: 0; transform-origin: 100% 50%; }
.curtain[data-state="open"] .drape.l { transform: translateX(-101%) scaleX(.3); }
.curtain[data-state="open"] .drape.r { transform: translateX(101%) scaleX(.3); }
.fabric {
  position: absolute; inset: 0;
  background:
    var(--motif) 50% calc(100% - 9%) / min(58%, 150px) auto no-repeat,
    repeating-linear-gradient(90deg, var(--thread) 0 7px, transparent 7px 13px) 0 calc(100% - 3.4%) / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--thread) 0 7px, transparent 7px 13px) 4px calc(100% - 4.8%) / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--thread) 0 5px, transparent 5px 12px) 0 calc(100% - 30%) / 100% 2px no-repeat,
    linear-gradient(180deg, rgb(110 35 15 / .3), transparent 22%, transparent 74%, rgb(110 35 15 / .22)),
    repeating-linear-gradient(90deg, var(--c1) 0, var(--c2) 6%, var(--c1) 11%, var(--c3) 16%, var(--c4) 19%, var(--c1) 22%);
  animation: billow 6s ease-in-out infinite;
}
.drape.l .fabric { left: -6%; transform-origin: 0 0; box-shadow: inset -16px 0 22px -14px rgb(100 30 12 / .45); }
.drape.r .fabric { right: -6%; transform-origin: 100% 0; box-shadow: inset 24px 0 26px -16px rgb(100 30 12 / .55); animation-name: billowR; }
.drape.r .fabric::after { /* দুই পর্দার মাঝের জোড় */ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(rgb(110 35 15 / .5), rgb(110 35 15 / .3)); }
@keyframes billow { 50% { transform: skewX(.5deg) scaleX(1.006); } }
@keyframes billowR { 50% { transform: skewX(-.5deg) scaleX(1.006); } }
.valance { position: absolute; left: -2%; right: -2%; top: 0; height: clamp(58px, 11%, 104px); filter: drop-shadow(0 8px 10px rgb(90 25 10 / .3)); transition: transform 1s .1s var(--ease-io); }
.valance-cloth {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, var(--thread) 0 7px, transparent 7px 13px) 0 calc(100% - 34px) / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, #E8876C 0, #F29D83 2.2%, #DA7258 4.4%);
  -webkit-mask: radial-gradient(circle at 50% 0, #000 70%, transparent 72%) 0 100% / 44px 22px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 21px) no-repeat;
  mask: radial-gradient(circle at 50% 0, #000 70%, transparent 72%) 0 100% / 44px 22px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 21px) no-repeat;
}
.curtain[data-state="open"] .valance { transform: translateY(-110%); }
.curtain-note {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; width: max-content; max-width: 82%;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 18px; border-radius: 20px; text-align: center;
  background: rgb(255 248 240 / .93); color: #2B2420; box-shadow: 0 14px 30px -14px rgb(90 25 10 / .55); transition: opacity .3s;
}
.curtain-note b { font: 700 1.05rem/1.2 var(--display); }
.curtain-note span { font-size: .84rem; color: #6E625A; }
.curtain[data-state="open"] .curtain-note { opacity: 0; }
html[data-role="child"] .curtain-note { display: none; }

/* ---------- বাচ্চার শুরু ---------- */
.start { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; }
.play {
  position: relative; display: grid; place-items: center; width: 136px; height: 136px; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 36% 30%, #FFFFFF, #FFEBDC 70%); color: #E5765A;
  box-shadow: 0 0 0 10px rgb(255 244 232 / .3), 0 22px 40px -12px rgb(95 28 10 / .6), inset 0 -7px 0 rgb(229 118 90 / .18);
  animation: breathe 2.8s ease-in-out infinite;
}
.play svg { width: 60px; height: 60px; margin-left: 9px; }
.play::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid rgb(255 244 232 / .85); animation: ring 2.2s var(--ease) infinite; }
.play:active { transform: scale(.94); }
@keyframes breathe { 50% { transform: scale(1.05); } }
.play-label { margin: 0; padding: 10px 22px 8px; border-radius: 999px; background: rgb(255 248 240 / .94); color: #A8472A; font: 800 1.5rem/1.1 var(--display); box-shadow: 0 12px 26px -12px rgb(95 28 10 / .55); }
.codeform {
  display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(330px, 100%); padding: 22px 22px 18px;
  background: rgb(255 250 244 / .97); color: #2B2420; border-radius: 26px; box-shadow: 0 22px 44px -18px rgb(95 28 10 / .6);
  outline: 2px dashed rgb(240 135 106 / .55); outline-offset: -9px;
}
.codeform-art { width: 52px; height: 52px; margin-top: -4px; }
.codeform label { font: 700 1.3rem/1.2 var(--display); }
.codeform input {
  width: 100%; padding: 12px; border-radius: 16px; border: 2px solid #EBD9CB; background: #fff; color: #2B2420; text-align: center;
  font: 700 1.5rem/1.2 var(--display); letter-spacing: .1em;
}
.codeform input:focus { outline: none; border-color: #F0876A; box-shadow: 0 0 0 4px #FDE9E0; }
.codeform button { border: 0; border-radius: 999px; min-height: 52px; padding: 0 30px; font: 800 1.25rem/1 var(--display); background: #F0876A; color: #fff; cursor: pointer; box-shadow: 0 10px 22px -10px rgb(229 118 90 / .9); }
.codeform button:active { transform: scale(.96); }
.codeform .err { min-height: 1.2em; font-size: .86rem; color: #A8472A; text-align: center; }

/* ================================================================
   বাচ্চার ফোন: শুধু মঞ্চ, পুরো পর্দা জুড়ে
   ================================================================ */
html[data-role="child"], html[data-role="child"] body { height: 100%; overflow: hidden; background: #92caf0; }
html[data-role="child"] .app { display: block; padding: 0; height: 100%; max-width: none; }
html[data-role="child"] .setup, html[data-role="child"] .perform, html[data-role="child"] .stage-bar, html[data-role="child"] .stage-caption { display: none; }
html[data-role="child"] .stage-area { position: static; height: 100%; min-height: 0; }
html[data-role="child"] .stage-area::before { display: none; }
html[data-role="child"] .device { width: 100%; height: 100%; aspect-ratio: auto; padding: 0; border-radius: 0; box-shadow: none; background: none; animation: none; }
html[data-role="child"] .stage { border-radius: 0; }

/* ================================================================
   মাঝারি পর্দা (ট্যাবলেট/ছোট ল্যাপটপ): বাঁয়ে সব নিয়ন্ত্রণ, ডানে মঞ্চ
   ================================================================ */
@media (max-width: 1179px) and (min-width: 820px) {
  /* সব কার্ড বাঁয়ের এক সারিতে, কাজের ক্রমে: যুক্ত করা → মাইক → ভাবভঙ্গি → চরিত্র → দৃশ্য → কণ্ঠ */
  .app { grid-template-columns: minmax(320px, 390px) minmax(0, 1fr); grid-template-areas: none; grid-template-rows: repeat(8, auto); gap: 16px 24px; }
  .setup, .perform { display: contents; }
  .app > *, .setup > *, .perform > *, .dock > * { grid-column: 1; }
  .stage-area { grid-column: 2; grid-row: 1 / -1; }
  .brand { order: 0; }
  .link-card { order: 1; }
  .perform .mic-card { order: 2; }
  .perform .help { order: 3; }
  .perform .react-card { order: 4; }
  .setup > .card:not(.link-card) { order: 5; }
  .perform .voice-card { order: 6; }
}

/* ================================================================
   ফোন: ওপরে মঞ্চ, নিচে আঙুলের কাছে মাইক আর ভাবভঙ্গি
   ================================================================ */
@media (max-width: 819px) {
  body { font-size: 15px; }
  .app { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 12px 14px calc(176px + env(safe-area-inset-bottom, 0px)); }
  .setup { display: contents; }
  .brand { order: 0; padding: 2px 2px 0; }
  .logo { width: 40px; height: 40px; }
  .brand h1 { font-size: 1.5rem; }
  .brand p { font-size: .82rem; }
  .stage-area { order: 1; position: relative; top: auto; height: auto; min-height: 0; }
  .stage-area::before { width: 140%; }
  .device { flex: none; width: 100%; aspect-ratio: auto; height: min(56vh, 500px); padding: 7px; border-radius: 30px; }
  .stage { border-radius: 23px; }
  .stage-bar { justify-content: space-between; }
  .stage-caption { display: none; }
  .link-card { order: 2; }
  .setup > .card:not(.link-card) { order: 3; }
  .perform { order: 4; }
  .card { padding: 16px; border-radius: 22px; }

  .dock {
    display: flex; flex-direction: column-reverse; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--card);
    border-radius: 26px 26px 0 0; box-shadow: var(--sh-up); border-top: 1px solid var(--hair); animation: dockIn .6s .2s var(--ease) both;
  }
  .dock .card { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; animation: none; }
  .dock .mic-card { flex-direction: row; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--paper-2); }
  .dock .mic-card.live { background: var(--coral-tint); }
  .mic-row { gap: 10px; flex: none; }
  .mic { width: 52px; height: 52px; }
  .mic svg { width: 24px; height: 24px; }
  .mic::before { inset: -6px; }
  .mic-text b { font-size: 1.08rem; }
  .mic-text small { display: none; }
  .wave { flex: 1; height: 30px; min-width: 0; }
  .react-card .card-title { display: none; }
  .reacts {
    display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 -12px; padding: 2px 12px; -webkit-mask: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 22px), transparent); mask: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 22px), transparent);
  }
  .reacts::-webkit-scrollbar { display: none; }
  .react { flex: none; width: 66px; padding: 7px 2px 6px; gap: 3px; border-radius: 16px; font-size: .78rem; scroll-snap-align: start; }
  .react svg { width: 32px; height: 32px; }
  .react kbd { display: none; }
  .react:hover { transform: none; box-shadow: none; }
  @keyframes dockIn { from { transform: translateY(100%); } }
}
@media (max-width: 380px) {
  .pair-body { flex-direction: column; align-items: flex-start; }
  .tods { gap: 6px; }
  .tod { font-size: .7rem; }
}
@media (hover: none) { .kbd-hint, .react kbd { display: none; } }

/* ---------- কম নড়াচড়া চাইলে ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cloud { animation: none; transform: translateX(14cqw); }
  .cloud:nth-child(2) { transform: translateX(58cqw); }
  .cloud:nth-child(3) { transform: translateX(80cqw); }
  .stage::after { animation: none; }
}