/* The in-game layout every host shares — the .game-app grid, the work pane, the companion chat, the
   completion banner, the stimulation chip, and the full-bleed variant the Phaser arcade games declare
   (appClass: "full-bleed", rootClass: "phaser-fill"). Every rule is scoped under .game-app so a host page's
   own styles (the teacher panel has its own .chat) never collide. Lifted from the student shell. */

.game-app {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
  height: 100%;
  max-width: 1480px;
  margin: 0 auto;
}
.game-app .work {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 4vh, 44px) clamp(20px, 3.5vw, 56px);
  overflow-y: auto;
  border-right: 1px solid var(--line);
}
.game-app .unit-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: clamp(24px, 5vh, 56px); }
.game-app .continue { font: inherit; font-size: 0.86rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 10px 26px; cursor: pointer; transition: color 120ms ease, border-color 120ms ease; }
.game-app .continue:hover { color: var(--text); border-color: var(--muted); }
.game-app .complete-banner { margin-top: 8px; }
.game-app .complete-banner.hidden { display: none; }
.game-app .done-title { font-size: 1.4rem; font-weight: 400; color: var(--text); text-transform: none; letter-spacing: 0; margin-bottom: 6px; }
.game-app .complete-banner .muted { margin-bottom: 18px; }
.game-app .hidden { display: none; }
.game-app .chat { display: flex; flex-direction: column; background: var(--panel); min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.game-app .chat-log { flex: 1 1 0; min-height: 0; overflow-y: scroll; scrollbar-gutter: stable; padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.game-app .chat-log::-webkit-scrollbar { width: 10px; }
.game-app .chat-log::-webkit-scrollbar-track { background: transparent; }
.game-app .chat-log::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid var(--panel); }
.game-app .msg { max-width: 86%; padding: 11px 15px; border-radius: var(--radius); font-size: 0.97rem; white-space: pre-wrap; overflow-wrap: anywhere; animation: fadein 240ms ease both; }
.game-app .msg.companion { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); }
.game-app .msg.student { align-self: flex-end; background: rgba(143,182,217,0.12); border: 1px solid rgba(143,182,217,0.25); }
.game-app .msg.system { align-self: center; color: var(--faint); font-size: 0.84rem; border: none; background: none; }
.game-app .msg.pending { color: var(--faint); }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.game-app .chat-input { display: flex; flex-direction: row; gap: 10px; padding: 14px clamp(20px,3vw,32px) 18px; border-top: 1px solid var(--line); }
.game-app .chat-input input { flex: 1; min-width: 0; font: inherit; font-size: 0.97rem; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 14px; }
.game-app .chat-input input:focus { outline: none; border-color: var(--accent); }
.game-app .chat-input button { font: inherit; font-size: 0.86rem; font-weight: 500; letter-spacing: 0.06em; color: var(--bg); background: var(--accent); border: none; border-radius: var(--radius); padding: 0 20px; cursor: pointer; }
.game-app .chat-input button:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 880px) {
  .game-app { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr); }
  .game-app .work { border-right: none; border-bottom: 1px solid var(--line); }
  .game-app .options { grid-template-columns: 1fr; }
}
.game-app.full-bleed {
  display: flex;
  flex-direction: column;
  max-width: none;
  margin: 0;
}
.game-app.full-bleed .work {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 12px 4px;
  border-right: none;
  overflow: hidden;
}
.game-app.full-bleed .unit-row { margin-bottom: 6px; }
.game-app.full-bleed .chat {
  flex: 0 0 auto;
  height: clamp(150px, 22vh, 230px);
  border-top: 1px solid var(--line);
}
.game-app .phaser-fill {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: #070b16;
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-app .phaser-fill canvas { display: block; margin: 0 auto; max-width: 100%; max-height: 100%; }
.game-app .tc-stim { display: inline-flex; gap: 4px; }
.game-app .tc-stim button {
  font: inherit; font-size: 0.82rem; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; cursor: pointer;
}
.game-app .tc-stim button.active { color: var(--text); background: var(--panel); border-color: var(--accent); }