@font-face {
  font-family: "ThenKhung";
  src: url("../assets/fonts/UoqMunThenKhung-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --ink: #fff9dd;
  --muted: #d8f1f7;
  --deep: #032c50;
  --panel: rgba(4, 47, 83, 0.82);
  --line: rgba(210, 244, 255, 0.48);
  --gold: #ffe588;
  --pink: #ff9ecf;
  --blue: #84d6ff;
  --safe-top: max(14px, env(safe-area-inset-top));
  --safe-right: max(18px, env(safe-area-inset-right));
  --safe-bottom: max(16px, env(safe-area-inset-bottom));
  --safe-left: max(18px, env(safe-area-inset-left));
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #04345d; }
body { color: var(--ink); font-family: "ThenKhung", "Noto Sans TC", sans-serif; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, input { font: inherit; }
button { -webkit-appearance: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.starbag-app {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
  background: #06365b url("../assets/backgrounds/ocean-touch-bg.png") center / cover no-repeat;
}

/* V79.1: legacy Group-only wave layers are retired. This intentionally does
   not target any Single Mode wave or any global animation. */
.starbag-app :is(.starbag-wave, .group-wave, .group-ocean-wave) {
  display: none !important;
  animation: none !important;
}

.starbag-header {
  position: absolute;
  z-index: 30;
  top: var(--safe-top);
  left: var(--safe-left);
  right: var(--safe-right);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}
.starbag-eyebrow { margin: 0 0 2px; color: rgba(225, 247, 255, .78); font: 700 14px/1.1 Arial, sans-serif; letter-spacing: .11em; }
.starbag-header h1 { margin: 0; font-size: clamp(24px, 3.2vw, 42px); letter-spacing: .06em; text-shadow: 0 4px 14px #001c36; }
.phase-chip { min-width: 150px; padding: 10px 18px; border: 1px solid rgba(255,255,255,.46); border-radius: 999px; background: rgba(2,38,72,.72); text-align: center; font-size: 18px; box-shadow: 0 8px 24px rgba(0,22,48,.28); }

.starbag-screen { position: absolute; inset: 0; z-index: 2; padding: clamp(88px, 12vh, 122px) var(--safe-right) var(--safe-bottom) var(--safe-left); }
.starbag-screen[hidden] { display: none !important; }
.shell-link {
  position: absolute; z-index: 35; left: var(--safe-left); bottom: var(--safe-bottom); width: 112px; height: 86px;
  display: grid; place-items: center; border: 0; color: #153e5b; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.05; font-weight: 900; text-decoration: none; cursor: pointer; white-space: nowrap; word-break: keep-all;
  background: url("../assets/buttons/back-shell.png") center / contain no-repeat; filter: drop-shadow(0 8px 13px rgba(0,19,42,.32));
  overflow: hidden;
}
.shell-link:focus-visible, button:focus-visible { outline: 4px solid #fff2a9; outline-offset: 4px; }

.group-home-copy { text-align: center; max-width: 820px; margin: 0 auto clamp(20px, 3vh, 32px); }
.section-kicker { margin: 0 0 6px; color: #cdeefa; font-size: clamp(17px, 2.2vw, 24px); font-weight: 800; letter-spacing: .08em; }
.group-home-copy h2, .setup-intro h2, .calibration-copy h2 { margin: 0; color: var(--gold); font-size: clamp(38px, 5.2vw, 64px); text-shadow: 0 6px 18px rgba(0,20,43,.55); }
.group-home-copy > p:last-child { margin: 9px 0 0; font-size: clamp(19px, 2.3vw, 27px); }
.group-activity-grid { width: min(980px, 82vw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 42px); }
.group-activity-card {
  position: relative; min-height: clamp(280px, 47vh, 430px); padding: 140px 32px 30px; border: 1px solid var(--line); border-radius: 40px;
  background: linear-gradient(155deg, rgba(6,70,113,.9), rgba(3,38,75,.82)); color: var(--ink); box-shadow: 0 24px 62px rgba(0,18,45,.38), inset 0 1px rgba(255,255,255,.18);
  text-align: center; cursor: pointer; overflow: hidden;
}
.group-activity-card strong { display: block; color: var(--gold); font-size: clamp(34px, 4vw, 50px); }
.group-activity-card > span:not(.activity-star-stack) { display: block; margin-top: 8px; font-size: clamp(19px, 2.2vw, 27px); }
.group-activity-card em { display: inline-block; margin-top: 18px; padding: 7px 18px; border: 1px solid rgba(255,243,173,.75); border-radius: 999px; color: #fff0aa; font-size: 17px; font-style: normal; }
.group-activity-card.is-ready:active { transform: scale(.985); }
.group-activity-card.is-research { opacity: .72; cursor: default; }
.activity-star-stack { position: absolute; top: 22px; left: 50%; width: 260px; height: 125px; transform: translateX(-50%); }
.group-star { object-fit: contain; pointer-events: none; user-select: none; }
.activity-star-stack .group-star { position: absolute; width: 106px; filter: drop-shadow(0 0 20px rgba(255,238,156,.45)); }
.activity-star-stack .star-a { left: 0; top: 28px; transform: rotate(-12deg); }
.activity-star-stack .star-b { left: 76px; top: 0; width: 118px; }
.activity-star-stack .star-c { right: 0; top: 28px; transform: rotate(12deg); }
.research-star { position: absolute; top: 24px; left: calc(50% - 58px); width: 116px; filter: grayscale(.3) drop-shadow(0 0 18px rgba(255,238,156,.35)); }

.setup-panel, .calibration-panel { width: min(1120px, calc(100vw - 140px)); height: min(670px, calc(100dvh - 130px)); margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: 32px; padding: clamp(24px, 3vw, 42px); border: 1px solid var(--line); border-radius: 40px; background: var(--panel); box-shadow: 0 24px 68px rgba(0,18,45,.42); }
.setup-intro { display: flex; flex-direction: column; justify-content: center; padding: 10px 18px; }
.setup-star { width: 108px; margin-bottom: 12px; filter: drop-shadow(0 0 20px rgba(255,233,130,.55)); }
.setup-intro > p:not(.section-kicker) { font-size: clamp(18px, 2.1vw, 25px); line-height: 1.55; }
.prototype-note { padding: 14px 18px; border-left: 5px solid #8ad9ee; border-radius: 12px; background: rgba(0,31,62,.38); color: #dff8ff; font-size: 17px !important; }
.setup-form { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.setup-form fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 10px 12px 12px; border: 1px solid rgba(207,242,255,.38); border-radius: 18px; }
.setup-form legend { padding: 0 8px; color: #d9f4fa; font-size: 18px; font-weight: 800; }
.setup-form label { cursor: pointer; }
.setup-form label span { display: grid; min-height: 54px; place-items: center; padding: 8px; border: 1px solid rgba(255,255,255,.3); border-radius: 14px; background: rgba(2,38,71,.52); font-size: 18px; font-weight: 800; text-align: center; }
.setup-form input[type="radio"] { position: absolute; opacity: 0; }
.setup-form input[type="radio"]:checked + span { border-color: #ffe595; background: rgba(255,225,128,.16); box-shadow: 0 0 0 2px rgba(255,226,132,.28); color: #fff0a8; }
.volume-field { display: grid; grid-template-columns: auto 1fr 56px; align-items: center; gap: 14px; padding: 9px 12px; }
.volume-field input { width: 100%; accent-color: #ffd870; }
.primary-action, .secondary-action { min-height: 62px; padding: 10px 28px; border: 1px solid rgba(255,248,205,.85); border-radius: 999px; background: linear-gradient(#fff1b4, #f7ce72); color: #113c59; font-size: 22px; font-weight: 900; cursor: pointer; box-shadow: 0 10px 25px rgba(0,22,45,.28); }
.secondary-action { background: rgba(4,53,91,.78); color: #effbff; border-color: rgba(213,244,255,.55); }

.calibration-panel { grid-template-columns: 1.15fr .85fr; }
.calibration-visual { position: relative; min-height: 420px; overflow: hidden; border: 1px solid rgba(206,242,255,.16); border-radius: 30px; background: linear-gradient(180deg, rgba(7,70,112,.34), rgba(3,35,68,.44)); }
#cameraPreview { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.calibration-constellation { position: absolute; inset: 0; }
.calibration-dot { position: absolute; width: 42px; height: 42px; object-fit: contain; background: transparent; filter: none; opacity: .9; animation: calibrationFloat 3s ease-in-out infinite alternate; }
.camera-privacy-badge { position: absolute; left: 18px; bottom: 18px; padding: 9px 15px; border-radius: 999px; background: rgba(0,25,52,.76); color: #e7faff; font: 700 15px Arial, sans-serif; }
.calibration-copy { display: flex; flex-direction: column; justify-content: center; }
.calibration-copy ol { margin: 20px 0; padding-left: 1.5em; font-size: clamp(18px, 2vw, 23px); line-height: 1.65; }
.calibration-status { min-height: 52px; padding: 12px 15px; border-radius: 14px; background: rgba(0,28,58,.4); color: #ddf6ff; font-size: 18px; }
.calibration-actions { display: grid; gap: 10px; }

.activity-screen { padding: 0; }
.elder-stage { position: absolute; inset: 0; overflow: hidden; background: #06365b url("../assets/backgrounds/ocean-touch-bg.png") center / cover no-repeat; transform-origin: center; }
.starbag-app.projection-table.orientation-180 .elder-stage { transform: rotate(180deg); }
.night-sky { position: absolute; inset: 0; background: transparent; overflow: hidden; }
.night-sky::after { content: ""; position: absolute; inset: 0; opacity: .45; background-image: radial-gradient(circle, #fff7c8 0 1px, transparent 2px); background-size: 80px 63px; }
.sky-star { position: absolute; width: 50px; opacity: .55; filter: drop-shadow(0 0 14px rgba(255,240,166,.55)); animation: skyPulse 4s ease-in-out infinite; }
.sky-star.s1 { left: 8%; top: 16%; }.sky-star.s2 { right: 10%; top: 12%; animation-delay: 1s; }.sky-star.s3 { left: 72%; top: 38%; width: 36px; animation-delay: 2s; }
.activity-prompt { position: absolute; z-index: 22; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); min-width: min(600px, 58vw); display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 24px; border: 1px solid rgba(255,255,255,.48); border-radius: 26px; background: rgba(2,35,67,.82); box-shadow: 0 12px 30px rgba(0,18,42,.38); text-align: center; }
.prompt-star { width: 54px; filter: drop-shadow(0 0 12px #ffe589); }
.activity-prompt strong, .activity-prompt span { display: block; }.activity-prompt strong { color: #fff0a8; font-size: clamp(24px, 3vw, 37px); }.activity-prompt span { color: #e8faff; font-size: clamp(16px, 1.8vw, 22px); }
.progress-cluster { position: absolute; z-index: 21; top: 100px; left: 24px; max-width: 240px; display: flex; flex-wrap: wrap; gap: 2px; }
.progress-cluster[hidden] { display: none !important; }
.progress-cluster img, .team-cluster img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 9px rgba(255,235,151,.65)); animation: collectedPop .45s ease-out both; }
.game-lane { position: absolute; z-index: 8; inset: 92px 15% 14%; touch-action: none; }
.falling-layer { position: absolute; inset: 0; pointer-events: none; }
.falling-star { position: absolute; z-index: 10; width: 68px; height: 68px; object-fit: contain; transform: translate(-50%, -50%); filter: drop-shadow(0 0 18px rgba(255,237,147,.75)); will-change: transform, top; }
.falling-star.is-big { width: 142px; height: 142px; filter: drop-shadow(0 0 34px rgba(255,238,153,.95)); }
.falling-star.is-fading { animation: starMist .6s ease-out forwards; }
.star-bag { position: absolute; z-index: 14; left: 50%; bottom: 5%; width: clamp(190px, 22vw, 310px); height: 112px; transform: translate3d(-50%, 0, 0); touch-action: none; cursor: grab; filter: none; will-change: left, transform; isolation: isolate; }
.star-bag::after { content: ""; position: absolute; z-index: 0; left: 18%; right: 18%; bottom: -2px; height: 18px; border-radius: 50%; background: rgba(0,22,43,.22); box-shadow: 0 7px 15px rgba(0,22,43,.22); pointer-events: none; }
.star-bag.is-catching .bag-body { animation: bagBodyGlow .55s ease-out; }
.star-bag.is-expanded { transform: translate3d(-50%, 0, 0) scaleX(1.4) scaleY(1.06); }
.bag-handle { position: absolute; z-index: 1; left: 20%; right: 20%; top: 0; height: 48px; border: 9px solid #ffe4a4; border-bottom: 0; border-radius: 50% 50% 0 0; opacity: .9; }
.bag-body { position: absolute; z-index: 1; left: 0; right: 0; top: 28px; bottom: 0; display: grid; place-items: center; clip-path: polygon(7% 0, 93% 0, 82% 100%, 18% 100%); border-radius: 25px; background: linear-gradient(150deg, rgba(255,238,178,.96), rgba(255,176,122,.92) 52%, rgba(232,108,129,.94)); color: #61394b; font-size: 24px; font-weight: 900; box-shadow: inset 0 5px 12px rgba(255,255,255,.42); }

.team-board { position: absolute; z-index: 8; inset: 92px 8% 12%; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.team-board[hidden] { display: none; }
.team-lane { position: relative; overflow: hidden; border: 2px solid rgba(255,255,255,.34); border-radius: 34px 34px 20px 20px; background: rgba(3,34,65,.2); touch-action: none; }
.team-lane header { position: absolute; z-index: 18; top: 12px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; }
.team-lane h3 { margin: 0; font-size: 28px; }.team-score { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(0,30,60,.65); font: 900 26px Arial, sans-serif; }
.pink-team { box-shadow: inset 0 0 80px rgba(255,126,190,.16); }.blue-team { box-shadow: inset 0 0 80px rgba(83,190,255,.16); }
.pink-team h3 { color: #ffc1df; }.blue-team h3 { color: #bce9ff; }
.team-bag { width: clamp(145px, 17vw, 230px); height: 92px; bottom: 3%; }.team-bag .bag-body { font-size: 20px; }
.pink-team .bag-body { background: linear-gradient(150deg, #ffe0ef, #ff9bc9 60%, #d968a4); color: #5d2750; }.blue-team .bag-body { background: linear-gradient(150deg, #e1f6ff, #7dcdf3 60%, #448dc0); color: #153b61; }
.team-cluster { position: absolute; z-index: 17; top: 64px; left: 16px; right: 16px; display: flex; gap: 1px; flex-wrap: wrap; }

.facilitator-rail { position: absolute; z-index: 40; top: 92px; right: var(--safe-right); width: clamp(178px, 13.5vw, 208px); display: grid; gap: 8px; }
.facilitator-status { min-height: 58px; display: grid; place-items: center; padding: 9px 12px; border-radius: 16px; background: rgba(0,30,58,.82); border: 1px solid rgba(211,244,255,.4); text-align: center; }.facilitator-status strong { display: block; color: #ffeaa0; font-size: clamp(14px, 1.3vw, 17px); line-height: 1.15; white-space: nowrap; word-break: keep-all; }
.facilitator-rail button { min-height: 50px; padding: 8px 12px; border: 1px solid rgba(224,247,255,.48); border-radius: 14px; background: rgba(3,45,80,.86); color: #effbff; font-size: clamp(14px, 1.25vw, 17px); line-height: 1.1; font-weight: 800; cursor: pointer; white-space: nowrap; word-break: keep-all; }
.facilitator-rail button:active { transform: scale(.97); }
.simulation-tray { position: absolute; z-index: 41; right: var(--safe-right); bottom: var(--safe-bottom); width: min(340px, 28vw); color: #e9faff; }
.simulation-tray[hidden] { display: none; }.simulation-tray details { border: 1px solid rgba(215,246,255,.42); border-radius: 18px; background: rgba(0,28,57,.88); overflow: hidden; }.simulation-tray summary { padding: 11px 15px; cursor: pointer; font-size: 16px; font-weight: 900; }.simulation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 9px 9px; }.simulation-actions button { min-height: 43px; border: 1px solid rgba(255,255,255,.35); border-radius: 11px; background: rgba(12,76,113,.9); color: white; font-size: 14px; font-weight: 800; }

.result-overlay { position: absolute; z-index: 32; inset: 12% 18%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; border: 1px solid rgba(255,255,255,.55); border-radius: 38px; background: rgba(2,35,68,.9); text-align: center; box-shadow: 0 24px 80px rgba(0,14,35,.52); }
.result-overlay[hidden] { display: none; }.result-overlay h2 { margin: 4px 0 10px; color: #ffeb96; font-size: clamp(36px, 5vw, 64px); }.result-overlay > p:not(.section-kicker) { margin: 0 0 20px; font-size: clamp(19px, 2.2vw, 27px); }.result-stars { min-height: 120px; display: flex; justify-content: center; align-items: center; gap: 8px; }.result-stars img { width: 110px; max-height: 125px; object-fit: contain; filter: drop-shadow(0 0 24px rgba(255,238,158,.75)); animation: resultFloat 2.4s ease-in-out infinite alternate; }

.portrait-notice { display: none; position: fixed; z-index: 100; inset: 0; place-content: center; justify-items: center; padding: 30px; background: #053861; text-align: center; }.portrait-notice img { width: 120px; }.portrait-notice p { max-width: 380px; color: #fff0ad; font-size: 25px; line-height: 1.45; }

@keyframes calibrationFloat { to { transform: translateY(-8px) rotate(5deg); } }
@keyframes skyPulse { 50% { opacity: .85; transform: scale(1.08); } }
@keyframes collectedPop { from { opacity: 0; transform: scale(.2) rotate(-18deg); } to { opacity: 1; transform: scale(1); } }
@keyframes starMist { to { opacity: 0; transform: translate(-50%, -50%) scale(1.8); filter: blur(5px) drop-shadow(0 0 20px #d8f7ff); } }
@keyframes bagBodyGlow { 50% { box-shadow: inset 0 5px 12px rgba(255,255,255,.42), 0 0 0 5px rgba(255,240,164,.22), 0 0 26px rgba(255,240,164,.56); } }
@keyframes resultFloat { to { transform: translateY(-9px) rotate(3deg); } }

@media (orientation: portrait) { .portrait-notice { display: grid; } }
@media (orientation: landscape) and (max-height: 700px) {
  .starbag-app { min-height: 0; }.starbag-screen { padding-top: 74px; }.starbag-header h1 { font-size: 28px; }.group-home-copy { margin-bottom: 14px; }.group-home-copy h2 { font-size: 42px; }.group-activity-card { min-height: 300px; padding-top: 116px; }.activity-star-stack { top: 10px; transform: translateX(-50%) scale(.82); }.setup-panel, .calibration-panel { height: calc(100dvh - 92px); padding: 18px 26px; }.setup-intro > p:not(.section-kicker) { margin: 7px 0; font-size: 18px; }.setup-intro h2, .calibration-copy h2 { font-size: 42px; }.setup-form { gap: 7px; }.setup-form label span { min-height: 43px; font-size: 16px; }.primary-action, .secondary-action { min-height: 50px; font-size: 18px; }.calibration-copy ol { margin: 8px 0; font-size: 17px; }.calibration-visual { min-height: 330px; }.activity-prompt { top: 8px; padding: 7px 18px; }.prompt-star { width: 42px; }.game-lane, .team-board { top: 72px; }.facilitator-rail { top: 74px; }.simulation-tray { width: 300px; }.result-overlay { inset: 8% 18%; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }

/* V79.1 Group-only readability and pause fixes. Single Mode styles are untouched. */
.starbag-app .phase-chip,
.starbag-app .primary-action,
.starbag-app .secondary-action,
.starbag-app .setup-form label span,
.starbag-app .simulation-actions button {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
.starbag-app .phase-chip { font-size: clamp(14px, 1.35vw, 18px); }
.starbag-app .setup-form label span { font-size: clamp(15px, 1.3vw, 18px); padding-inline: 10px; }
.starbag-app .primary-action, .starbag-app .secondary-action { font-size: clamp(17px, 1.65vw, 22px); }
.starbag-app .simulation-actions button { font-size: clamp(12px, 1.05vw, 14px); padding: 6px 7px; }
.starbag-app[data-state="PAUSED"] .activity-screen .falling-star,
.starbag-app[data-state="PAUSED"] .activity-screen .star-bag,
.starbag-app[data-state="PAUSED"] .activity-screen .progress-cluster img,
.starbag-app[data-state="PAUSED"] .activity-screen .team-cluster img,
.starbag-app[data-state="PAUSED"] .activity-screen .result-stars img,
.starbag-app[data-state="PAUSED"] .activity-screen .sky-star {
  animation-play-state: paused !important;
}
@media (orientation: landscape) and (min-width: 1200px) {
  .starbag-app .shell-link { width: 118px; height: 88px; }
  .starbag-app .simulation-tray { width: min(360px, 25vw); }
}