:root { --green: #0E3D2E; --orange: #FF6A00; --cream: #F7F3E9; --lettuce: #7BBF3F; --ink: #1E1E1E; --bg: #F2E8E1; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--green); font-family: Nunito, system-ui, sans-serif; color: var(--ink); user-select: none; }

/* Full screen on any display (the kiosk is a tall screen); Mo fills the whole stage behind the buttons */
.backdrop { position: fixed; inset: 0; background: var(--bg); }
.stage { position: relative; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg); }
.stage { container-type: size; }

.brand { position: absolute; top: 2.4cqh; left: 50%; transform: translateX(-50%); padding: .6cqh 2.6cqh; border-radius: 99px; background: rgba(247,243,233,.92);
  box-shadow: 0 .4cqh 1.4cqh rgba(14,61,46,.2); font: 4.4cqh "Lilita One", sans-serif; color: var(--green); letter-spacing: .02em; z-index: 3; white-space: nowrap; }
.brand span { color: var(--orange); }

/* Mo */
.scene { position: absolute; inset: 0; display: grid; place-items: center; }
.scene > * { position: absolute; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s ease; }
.scene .off { opacity: 0; pointer-events: none; }
.scene canvas.lips { pointer-events: none; z-index: 1; }
.scene > video { transition: opacity .35s ease; }
.scene canvas { width: 100%; height: 100%; }
.still.breathe { animation: breathe 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes breathe { 50% { transform: scale(1.012) translateY(-.4%); } }

/* Speech bubble */
/* captions and the game board stay inside Mo's tall video, whatever the screen shape */
.bubble, .heard, .game { left: 50%; right: auto; transform: translateX(-50%); width: min(90cqw, calc(100cqh * 9 / 16 * 0.88)); }
.bubble { position: absolute; top: 70cqh; background: #fff; border-radius: 2.4cqh; padding: 1.6cqh 2.2cqh;
  box-shadow: 0 .6cqh 2cqh rgba(14,61,46,.16); font: 2.05cqh/1.25 "Lilita One", sans-serif; color: var(--green); z-index: 4; text-align: center; }
.bubble::before { content: ""; position: absolute; top: -1.4cqh; left: 50%; transform: translateX(-50%); border: 1.4cqh solid transparent; border-top: 0; border-bottom-color: #fff; }
.bubble[hidden], .heard[hidden], .game[hidden] { display: none; }
.heard { position: absolute; top: 66cqh; text-align: center; font: 800 1.8cqh Nunito; color: var(--green); z-index: 4; }
.heard:not(:empty) { width: fit-content; max-width: min(90cqw, calc(100cqh * 9 / 16 * 0.88)); padding: .8cqh 2cqh; border-radius: 99px; background: rgba(247,243,233,.92); }
.game-on .bubble { top: 39cqh; }
.game-on .heard { display: none; }

/* Buttons */
.controls { position: absolute; left: 0; right: 0; bottom: 4cqh; display: flex; flex-direction: column; align-items: center; gap: 1.6cqh; z-index: 5; }
.btn { border: 0; border-radius: 99px; font: 2.7cqh "Lilita One", sans-serif; cursor: pointer; padding: 1.9cqh 5cqh; display: inline-flex; align-items: center; gap: 1.4cqh; transition: transform .15s, background .2s; }
.btn:active { transform: scale(.96); }
.talk { background: var(--orange); color: #fff; box-shadow: 0 .7cqh 0 #B54A00; font-size: 3.1cqh; padding: 2.3cqh 6cqh; }
.talk .mic { width: 2.6cqh; height: 2.6cqh; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 .6cqh var(--orange); }
.talk.listening { background: #E0002A; box-shadow: none; animation: pulse 1.4s infinite; cursor: default; }
.talk.busy { background: #B0A797; box-shadow: 0 .7cqh 0 #857C6D; }
@keyframes pulse { 50% { transform: scale(1.05); } }
.play { background: var(--green); color: #fff; box-shadow: 0 .6cqh 0 #062519; font-size: 2.3cqh; padding: 1.5cqh 4cqh; }
.game-on .controls { display: none; }
.bye { background: #fff; color: var(--green); box-shadow: 0 .6cqh 0 rgba(14,61,46,.25); font-size: 2.1cqh; padding: 1.3cqh 3.6cqh; }
.bye[hidden], .talk[hidden] { display: none; }

/* Tic-tac-toe */
.game { position: absolute; top: 49cqh; z-index: 5; padding: 2cqh; border-radius: 2.4cqh;
  background: rgba(247,243,233,.38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.5); }
.game-head { display: flex; justify-content: space-between; font: 900 2cqh Nunito; color: var(--green); margin-bottom: 1.2cqh; }
.game-head b { color: var(--orange); }
#gamestatus { font-family: "Lilita One"; font-size: 2.3cqh; }
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqh; aspect-ratio: 1; max-height: 34cqh; margin: 0 auto; }
.cell { background: rgba(255,255,255,.55); border-radius: 2cqh; box-shadow: 0 .5cqh 0 rgba(14,61,46,.18); display: grid; place-items: center; font: 8cqh "Lilita One"; cursor: pointer; }
.cell.x { color: var(--orange); } .cell.o { color: var(--green); }
.cell.win { background: var(--lettuce); color: #fff; }
.cell:empty:active { transform: scale(.95); }
.game-foot { display: flex; justify-content: center; gap: 1.6cqh; margin-top: 2cqh; }
.btn.small { font-size: 2.1cqh; padding: 1.3cqh 3.4cqh; background: var(--orange); color: #fff; box-shadow: 0 .5cqh 0 #B54A00; }
.btn.ghost { background: #fff; color: var(--green); box-shadow: 0 .5cqh 0 rgba(14,61,46,.25); }

.metrics { position: absolute; left: 1.5cqh; top: 1.2cqh; z-index: 9; font: 700 1.3cqh ui-monospace, Menlo, monospace; color: var(--green); white-space: pre; display: none; }
.metrics.show:not(:empty) { display: block; }

.start { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: var(--green); color: #fff; cursor: pointer; text-align: center; }
.start-brand { font: 7vh "Lilita One"; } .start-brand span { color: var(--orange); }
.start-big { font: 4.5vh "Lilita One"; margin-top: 3vh; }
.start small { display: block; font: 700 2vh Nunito; opacity: .75; margin-top: 1.2vh; }