/* Equal-size objects and matching slots keep quantity, not size, the clue. */
.game-room[data-slug="more-or-less"] .stage-inner { min-height:0; gap:0; }
.game-room[data-slug="more-or-less"] .stage { background:#edf2e5; }
.game-room:has(.compare-game) .speech-caption { display:none; }
.compare-game { --compare-cell:clamp(54px,6.5vw,76px); display:flex; flex-direction:column; flex:1; width:100%; min-height:0; gap:14px; color:#284f4b; }
.compare-board { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); flex:1; min-height:0; gap:20px; }
.compare-group { display:flex; flex-direction:column; align-items:center; min-width:0; min-height:0; padding:16px; gap:12px; border:2px solid #bdd2bc; border-radius:25px; background:linear-gradient(#fffdf7,#f8f4e4); box-shadow:0 4px #d1ddc7; transition:border-color .18s,background .18s; }
.compare-group[data-side="right"] { border-color:#b6ccd3; background:linear-gradient(#fffdf7,#edf6f5); box-shadow:0 4px #d0dee0; }
.compare-heading { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; color:#51665e; font-size:15px; font-weight:650; }
.compare-total { display:flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 7px; border:2px solid #b1c2b2; border-radius:14px; background:#fffdf6; color:#4e665b; font-size:26px; font-weight:750; }
.compare-group.count-complete .compare-total { background:#265f55; border-color:#265f55; color:#fffdf4; }
.compare-pictures { width:100%; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; container:compare-pictures / size; }
.compare-set { --cols:3; --rows:var(--rows-three); --compare-cell:clamp(44px,min(calc((100cqw - 12px) / var(--cols)),calc((100cqh - 6px * var(--rows)) / var(--rows))),76px); display:grid; grid-template-columns:repeat(var(--cols),var(--compare-cell)); grid-auto-rows:var(--compare-cell); gap:6px; }
@container compare-pictures (min-width:390px) { .compare-set { --cols:5; --rows:var(--rows-five); } }
.compare-object { position:relative; appearance:none; display:flex; align-items:center; justify-content:center; width:var(--compare-cell); height:var(--compare-cell); min-height:44px; min-width:44px; padding:4px; background:transparent; color:#244c48; border:2px solid transparent; border-radius:17px; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.compare-art { width:100%; height:100%; display:block; pointer-events:none; }
.compare-art svg { width:100%; height:100%; display:block; }
.compare-object:hover:not(:disabled) { background:#f6e6b8; }
.compare-object.counted { background:#ecf0da; border-color:#a7bb96; }
.compare-badge { position:absolute; bottom:-3px; right:-3px; display:grid; place-items:center; min-width:28px; height:28px; padding:0 4px; border-radius:50%; background:#244f48; color:#fffefa; font-size:19px; font-weight:750; line-height:1; border:2px solid #fffdf2; box-shadow:0 2px 3px #274a4920; animation:compare-pop .25s ease-out; pointer-events:none; }
.compare-object.is-counting { background:#ffe5a0; border-color:#a57828; box-shadow:0 0 0 3px #f9d779; }
.compare-object.is-counting .compare-badge { background:#7b4c12; transform:scale(1.15); }
.compare-group.is-counting { border-color:#987432; background:#fff9e7; }
.compare-answer,.compare-aid { appearance:none; font:inherit; font-weight:650; min-height:48px; border:2px solid #346e62; border-radius:16px; padding:9px 18px; cursor:pointer; touch-action:manipulation; }
.compare-answer { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; max-width:310px; color:#fffdf4; background:#296d5f; box-shadow:0 3px #174c42; font-size:20px; flex:none; }
.compare-choice-arrow { display:inline-grid; place-items:center; border:1.5px solid #b4d5c4; border-radius:50%; width:26px; height:26px; font-size:15px; }
.compare-answer:hover:not(:disabled) { background:#1c584c; }
.compare-aid { display:flex; align-items:center; justify-content:center; gap:8px; color:#4d401e; background:#fff0bf; border-color:#b59b59; box-shadow:0 3px #d6c58e; white-space:nowrap; font-size:17px; }
.compare-aid[aria-pressed="true"] { background:#fffaf0; border-color:#876f3b; }
.compare-aid-icon { display:flex; width:29px; height:29px; }
.compare-aid-icon svg { width:100%; height:100%; }
.compare-support { display:flex; justify-content:center; align-items:center; gap:18px; flex:none; padding-bottom:4px; }
.compare-status { font-size:16px; line-height:1.3; max-width:340px; margin:0; color:#36564b; }
.compare-group.chosen { border-color:#347a60; background:#e7f1d6; box-shadow:0 0 0 3px #96bb88; }
.compare-extra { outline:2px dashed #9c7130; outline-offset:1px; }
.compare-game button:disabled { opacity:1; cursor:default; }
.compare-game button:focus-visible { outline:3px solid #285c9a; outline-offset:3px; }
.compare-game[data-phase="celebrate"] .compare-status { font-weight:700; font-size:21px; }
@keyframes compare-pop { from { transform:scale(.5); } to { transform:scale(1); } }
@media(max-width:700px) {
  .compare-game { --compare-cell:44px; gap:10px; }
  .compare-board { gap:10px; }
  .compare-group { border-radius:19px; padding:9px 5px; gap:8px; }
  .compare-heading { font-size:12px; padding:0 5px; }
  .compare-total { min-width:34px; height:34px; font-size:23px; border-radius:11px; }
  .compare-set { gap:6px 2px; }
  .compare-object { padding:2px; border-radius:12px; }
  .compare-badge { min-width:23px; height:23px; font-size:15px; bottom:-3px; right:-2px; }
  .compare-answer { font-size:16px; padding:8px; min-height:46px; border-radius:13px; gap:8px; }
  .compare-choice-arrow { width:22px; height:22px; font-size:12px; }
  .compare-support { gap:9px; }
  .compare-aid { min-height:46px; padding:7px 9px; font-size:14px; border-radius:13px; gap:5px; }
  .compare-aid-icon { width:24px; height:24px; }
  .compare-status { font-size:12px; flex:1; }
  .compare-game[data-phase="celebrate"] .compare-status { font-size:15px; }
}
.game-room[data-slug="more-or-less"] .activity-actions .compare-support { display:flex; align-items:center; gap:10px; padding:0; }
.game-room[data-slug="more-or-less"] .activity-actions .compare-aid { color:#4d401e; background:#fff0bf; border:2px solid #b59b59; flex:none; }
.game-room[data-slug="more-or-less"] .activity-actions .compare-status { color:#fff9e9; flex:1; font-size:12px; }
body:not(.immersive) .game-room[data-slug="more-or-less"] .activity-actions .compare-status { color:#36564b; }
@media(max-width:359px) {
  body.immersive .game-room[data-slug="more-or-less"] .game-room-title { display:none; }
  body.immersive .game-room[data-slug="more-or-less"] .stage { padding:2px; }
  .compare-board { gap:8px; }
  .compare-group { padding:6px 2px; }
  .compare-set { --compare-cell:44px; gap:3px 2px; }
  .game-room[data-slug="more-or-less"] .activity-actions .compare-support { gap:5px; }
  .game-room[data-slug="more-or-less"] .activity-actions .compare-aid { font-size:12px; padding:6px; }
}
@media(orientation:landscape) and (max-height:600px) {
  .compare-game { --compare-cell:44px; gap:10px; }
  .compare-board { gap:12px; }
  .compare-group { padding:6px; gap:4px; border-radius:17px; }
  .compare-heading { font-size:12px; height:25px; }
  .compare-total { height:25px; min-width:32px; font-size:20px; border-radius:9px; }
  .compare-set { gap:3px; }
  .compare-answer { min-height:44px; padding:5px; font-size:16px; }
  .compare-aid { min-height:48px; white-space:normal; font-size:14px; padding:7px; }
  .compare-aid-icon { width:22px; height:22px; flex:none; }
  .compare-status { font-size:12px; text-align:center; flex:none; }
  .game-room[data-slug="more-or-less"] .activity-actions .compare-support { flex-direction:column; gap:8px; }
  .game-room[data-slug="more-or-less"] .activity-actions .compare-aid { width:100%; }
}
@media(prefers-reduced-motion:reduce) { .compare-game * { animation:none!important; transition:none!important; } }
