/* ============================================================================
   Order of the Tile - CANONICAL ANSWER WHEEL (shared by every /app/ game)
   ----------------------------------------------------------------------------
   A single-answer spinning wheel that shows ONE choice at a time. It replaces a
   wrapping row of choice buttons for single-select questions, so the answer looks
   the SAME in portrait and in landscape (a physical wheel, not a button grid that
   reflows). Multi-select questions and tile-pick answers are left alone.

   wheel.js turns any `#game .choices` (a list of `.choice` buttons) into this
   wheel, adds `ottw-on` to #game while it is active, and removes both the wheel
   and `ottw-on` the moment the question is revealed, so each game's own reveal
   styling shows through untouched. Do NOT fork this per game.

   Colors come from the theme anchors every app game already defines
   (--rose, --rose-deep, --ink, --line, --shadow, --accent-wash), so the wheel
   reskins with the seasonal color swap for free.
   ============================================================================ */

/* while the wheel is live, hide the native choice row + its "choose then submit"
   chrome; the wheel IS the picker. (Kept in the DOM so clicks still fire.) */
#game.ottw-on .choices{ position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); opacity:0; pointer-events:none; margin:0 !important; }
#game.ottw-on .choosehdr, #game.ottw-on .submitbar{ display:none !important; }

/* the wheel itself sits where the choices were */
.ottw{ display:flex; align-items:center; justify-content:center; gap:10px; margin:12px 0 4px; }
.ottw .ottw-scroll{ height:56px; width:min(230px,60%); overflow-y:auto; scroll-snap-type:y mandatory;
  scrollbar-width:none; -ms-overflow-style:none; border:1.5px solid var(--rose,#148F87); border-radius:13px; background:var(--card,#fff);
  box-shadow:inset 0 6px 8px -6px rgba(43,38,34,.25), inset 0 -6px 8px -6px rgba(43,38,34,.25); }
.ottw .ottw-scroll::-webkit-scrollbar{ display:none; }
.ottw .ottw-item{ height:56px; display:flex; align-items:center; justify-content:center; scroll-snap-align:center;
  text-align:center; font-family:"Playfair Display",serif; font-weight:700; font-size:1.7rem; color:var(--ink,#2B2622); padding:0 10px; }
/* answers that are words, not digits: smaller type, a wider window, and they wrap
   rather than spill. Added for Hand Building's section names. */
.ottw.ottw-words .ottw-scroll{ width:min(280px,72%); }
.ottw.ottw-words .ottw-item{ font-size:22px;   /* the reading size, her pass 2026-09-01 */ line-height:1.15; padding:0 8px; text-wrap:balance; }
.ottw .ottw-arrow{ appearance:none; -webkit-appearance:none; border:1px solid var(--line,#e7ddcf); background:var(--card,#fff); border-radius:50%;
  width:34px; height:34px; font-size:.9rem; color:var(--rose-deep,#0B5651); cursor:pointer; flex:0 0 auto; line-height:1; }
.ottw .ottw-go{ appearance:none; -webkit-appearance:none; border:1px solid var(--rose-deep,#0B5651); background-color:var(--rose,#148F87);
  color:#fff; border-radius:999px; min-width:46px; height:46px; font-size:1.35rem; line-height:1; cursor:pointer;
  box-shadow:var(--shadow,0 6px 18px rgba(43,38,34,.14)); flex:0 0 auto; }
.ottw .ottw-go:active{ transform:translateY(1px); }

/* landscape: the wheel shrinks a touch so the big tiles keep the room */
@media (orientation:landscape) and (max-height:600px){
  .ottw{ margin:4px 0 2px; }
  .ottw .ottw-scroll{ height:48px; }
  .ottw .ottw-item{ height:48px; font-size:1.55rem; }
  .ottw .ottw-go{ height:44px; min-width:44px; }
}