/* Mirror Drawing keeps the adult controls in the common shell. */
body[data-game="mirror"] .game-progress { display: none; }
body[data-game="mirror"] .game-content { width: min(1080px, 100%); }
body[data-game="mirror"] .play-heading { padding-bottom: 18px; }
body[data-game="mirror"] .play-heading h1 { font-size: clamp(1.35rem, 2.7vw, 2rem); }
.mirror-scene { display: flex; flex-direction: column; gap: 14px; }
.mirror-stage { min-width: 0; min-height: 0; flex: 1 1 auto; display: flex; justify-content: center; align-items: center; }
.mirror-paper { position: relative; flex: 0 0 auto; overflow: hidden; border-radius: 20px; background: #fff9ec; box-shadow: 0 3px 0 #c4bba8, 0 10px 32px rgb(0 0 0 / 8%); }
.mirror-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.mirror-canvas:focus-visible { outline: 3px solid #569dbc; outline-offset: -5px; border-radius: 20px; }
.mirror-axis { position: absolute; top: 13px; bottom: 13px; left: 50%; width: 1px; background: repeating-linear-gradient(to bottom, #c9bfae 0 4px, transparent 4px 11px); opacity: .8; pointer-events: none; }
.mirror-axis-horizontal { top: 50%; bottom: auto; left: 13px; right: 13px; width: auto; height: 1px; background: repeating-linear-gradient(to right, #c9bfae 0 4px, transparent 4px 11px); }
.mirror-axis[hidden] { display: none; }
.mirror-toolbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 18px; }
.mirror-actions { display: flex; align-items: center; gap: 8px; }
.mirror-tool { min-width: 48px; height: 48px; padding: 5px; display: flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--tf-border); background: transparent; border-radius: 12px; color: var(--tf-text); font: 600 13px var(--tf-font); touch-action: manipulation; }
.mirror-tool svg { width: 29px; height: 29px; }
.mirror-tool:disabled { opacity: .35; }
.mirror-brush-button { padding: 5px 10px; }
.mirror-brush-button[aria-expanded="true"] { border-color: var(--tf-accent); }
.mirror-brush-panel { position: fixed; z-index: 15; width: min(300px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 16px; border: 1px solid var(--tf-border); border-radius: 16px; background: var(--tf-surface); color: var(--tf-text); box-shadow: 0 8px 26px rgb(0 0 0 / 22%); display: flex; flex-direction: column; gap: 12px; }
.mirror-brush-panel[hidden] { display: none; }
.mirror-options { display: flex; gap: 5px; }
.mirror-options button { flex: 1; min-width: 44px; min-height: 56px; border: 1px solid var(--tf-border); border-radius: 9px; background: transparent; color: var(--tf-text); font: 13px var(--tf-font); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 5px; }
.mirror-options button[aria-pressed="true"] { border-color: var(--tf-accent); box-shadow: inset 0 0 0 1px var(--tf-accent); }
.mirror-shapes button > span:first-child { font-size: 24px; height: 25px; line-height: 25px; }
.mirror-width-dot { display: block; width: var(--dot); height: var(--dot); border-radius: 50%; background: currentColor; }
.mirror-custom-label { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.mirror-custom-label input { width: 64px; height: 44px; padding: 4px; background: transparent; border: 1px solid var(--tf-border); border-radius: 8px; }
.mirror-tools-done { width: 100%; }
.mirror-palette { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; gap: 12px; }
.mirror-color { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 2px solid transparent; border-radius: 50%; background: transparent; padding: 7px; touch-action: manipulation; }
.mirror-color-dot { width: 100%; height: 100%; border-radius: 50%; background: var(--mirror-color); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 8%); pointer-events: none; }
.mirror-color[aria-pressed="true"] { border-color: var(--tf-text); }
.mirror-color-check { display: none; position: absolute; font: 700 20px/1 var(--tf-font); color: #fff; text-shadow: 0 1px 2px #304456; pointer-events: none; }
.mirror-color[aria-pressed="true"] .mirror-color-check { display: block; }
.mirror-cursor { position: absolute; width: 26px; height: 26px; border: 2px solid #274855; box-shadow: 0 0 0 2px #fff9ec; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.mirror-cursor::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--mirror-brush); }
.mirror-invitation { position: absolute; inset: 0; pointer-events: none; }
.mirror-invitation span { position: absolute; width: 38px; height: 38px; top: calc(50% - 19px); left: calc(30% - 19px); border: 2px dashed #7c9aa8; border-radius: 50%; }
.mirror-invitation span:nth-child(2), .mirror-invitation span:nth-child(4) { left: calc(70% - 19px); }
.mirror-invitation span:nth-child(n+3) { display: none; }
.mirror-invitation[data-symmetry="4"] span { top: calc(30% - 19px); }
.mirror-invitation[data-symmetry="4"] span:nth-child(n+3) { display: block; top: calc(70% - 19px); }
.mirror-invitation[hidden], .mirror-cursor[hidden] { display: none; }
.mirror-parent-tools { padding: 16px 0; border-bottom: 1px solid var(--tf-border); }
.mirror-parent-tools .tf-help { margin-bottom: 0; }
.mirror-parent-mode .tf-help { margin: 0 0 16px; }
.mirror-keepsake { padding: 14px 0; border-bottom: 1px solid var(--tf-border); }
.mirror-keepsake .tf-help { margin: 8px 0 0; }
.mirror-keepsake .tf-help:empty { display: none; }
#mirror-download { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#mirror-download svg { width: 20px; height: 20px; }
.gp-keepsake-host .mirror-keepsake { text-align: center; padding-top: 0; border: 0; }
@media (max-width: 600px) {
  .mirror-scene { gap: 10px; }
  .mirror-palette { gap: 5px; }
  .mirror-color { width: 50px; height: 50px; }
  .mirror-toolbar { flex-direction: column; gap: 6px; }
  .mirror-actions { gap: 10px; }
  .mirror-tool { min-width: 44px; height: 44px; }
  body[data-game="mirror"] .play-heading { padding-bottom: 14px; }
  body[data-game="mirror"] .play-heading > p:last-child { font-size: .8rem; }
  .mirror-paper { border-radius: 16px; }
}
@media (max-height: 600px) and (min-aspect-ratio: 1/1) {
  .mirror-scene { flex-direction: row; gap: 14px; }
  .mirror-palette { flex-direction: column; gap: 0; }
  .mirror-color { width: 44px; height: 44px; padding: 6px; }
  .mirror-stage { height: 100%; }
  .mirror-toolbar { flex-direction: column; gap: 8px; width: 94px; }
  .mirror-actions { gap: 6px; }
  .mirror-tool { min-width: 44px; width: 44px; height: 44px; padding: 5px; }
  .mirror-brush-button span { display: none; }
  .mirror-palette { display: grid; grid-template-columns: repeat(2, 44px); gap: 4px; }
  body[data-game="mirror"] .play-heading { position: absolute; top: 18px; left: 155px; right: 105px; padding: 0; }
  body[data-game="mirror"] .play-heading h1 { font-size: 17px; }
  body[data-game="mirror"] .play-heading > p:last-child { font-size: 11px; }
  body[data-game="mirror"] .play-topline { flex-basis: 57px; }
  body[data-game="mirror"] .play-brand { display: none; }
  body[data-game="mirror"] .game-content { margin-top: 0; }
  body[data-game="mirror"] .play-view { --play-bottom-space: calc(36px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-height: 360px) and (min-aspect-ratio: 1/1) {
  .mirror-palette { justify-content: space-between; }
  .mirror-color { height: 44px; width: 44px; flex: 0 0 44px; }
  body[data-game="mirror"] .play-topline { flex-basis: 48px; }
  body[data-game="mirror"] .play-heading > p:last-child { display: none; }
}
@media (max-height: 600px) and (min-aspect-ratio: 1/1) {
  body[data-game="mirror"] .play-view { --play-bottom-space: calc(72px + env(safe-area-inset-bottom, 0px)); }
  body[data-game="mirror"] .play-topline { flex-basis: 66px; }
}
@media (max-height: 360px) and (min-aspect-ratio: 1/1) {
  .mirror-palette { display: grid; grid-template-columns: repeat(2, 44px); gap: 2px; align-content: center; }
  .mirror-toolbar { gap: 4px; }
}
@media (max-height: 400px) and (min-aspect-ratio: 1/1) {
  .mirror-brush-panel { width: min(340px, calc(100vw - 16px)); max-height: calc(100dvh - 80px); padding: 12px; gap: 8px; display: grid; grid-template-columns: 1fr 1fr; }
  .mirror-brush-panel > strong, .mirror-options { grid-column: 1 / -1; }
  .mirror-custom-label { gap: 8px; }
  .mirror-tools-done { min-width: 0; padding: 6px 12px; }
}