/** Shopify CDN: Minification failed

Line 628:37 The "+" operator only works if there is whitespace on both sides
Line 631:41 The "+" operator only works if there is whitespace on both sides

**/
/*-----------------------------------------------
  GLOBAL RESET & UTILITY
-----------------------------------------------*/
.drq-controls {
  display: flex;       /* or inline-flex if you don’t want it to span the full width */
  gap: 1rem;           /* whatever horizontal space you’d like */
  padding-bottom: 5rem;  /* if you also want space *below* both buttons */
}
.drq-message           { transition: opacity .3s; }

/* FIX: lock background scroll when overlays are open (toggle this class via JS) */
body.drq-scroll-lock {
  position: fixed;
  overflow: hidden;
  width: 100%;
}

/*-----------------------------------------------
  ROOT VARIABLES
-----------------------------------------------*/
:root {
  /* Colours */
  --drq-bg-left:        #232322;
  --drq-bg-center:      #353533;
  --drq-bg-right:       #232322;
  --drq-text-color:     #232322;
  --drq-header-text:    #E3E3F1;
  --drq-accent:         #DA8900;
  --drq-primary:        #232322;
  --drq-secondary:      #E3E3F1;
  --drq-warning:        #D9534F;
  --drq-info:           #5BC0DE;

  /* Cell colours */
  --drq-cell-bg:        #E3E3F1;
  --drq-cell-border:    #999999;
  --drq-cell-text:      #232322;
  --drq-cell-correct:   #28a745;
  --drq-cell-present:   #DA8900;
  --drq-cell-absent:    #7D7D7D;

  /* Keyboard colours */
  --drq-key-bg:         #F0F0F0;
  --drq-key-border:     #CCCCCC;
  --drq-key-text:       #232322;
  --drq-key-correct:    var(--drq-cell-correct);
  --drq-key-present:    var(--drq-cell-present);
  --drq-key-absent:     var(--drq-cell-absent);

  /* Sizing & spacing */
  --drq-tile-size:      48px;
  --drq-grid-gap:       8px;
  --drq-transition:     0.2s;

  /* Typography */
  --drq-font-family:    "{{ section.settings.font_family }}", sans-serif;
  --drq-timer-colour:   #E3E3F1;
}

/*───────────────────────────────────────────────────*/
/*  GLOBAL MESSAGE POPUP – polished fade & scale    */
/*───────────────────────────────────────────────────*/
:root {
  --drq-message-bg:        rgba(225, 112, 112, 0.85);
  --drq-message-color:     #fff;
  --drq-message-padding:   0.75rem 1.5rem;
  --drq-message-radius:    0.5rem;
  --drq-message-shadow:    0 4px 12px rgba(0,0,0,0.35);
  --drq-message-duration:  0.25s;
}

/*───────────────────────────────────────────────────*/
/*  POLISHED FLASH MESSAGE (fade + scale + pop)     */
/*───────────────────────────────────────────────────*/
.drq-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: var(--drq-message-bg);
  color: var(--drq-message-color);
  padding: var(--drq-message-padding);
  border-radius: var(--drq-message-radius);
  box-shadow: var(--drq-message-shadow);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity var(--drq-message-duration) ease-in-out,
    transform var(--drq-message-duration) ease-in-out;
  z-index: 2100;
}

.drq-message.info,
.drq-message.error {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* this empty class is used by JS to retrigger the above transitions */
.drq-message.drq-pop { }

/*-----------------------------------------------
  CONTAINER & BACKGROUND
-----------------------------------------------*/
.daily-rune-quest-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(
    90deg,
    var(--drq-bg-left) 0%,
    var(--drq-bg-center) 50%,
    var(--drq-bg-right) 100%
  );
  color: var(--drq-text-color);
  font-family: var(--drq-font-family);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  position: relative;
}

/*-----------------------------------------------
  HEADER & TITLE
-----------------------------------------------*/
.drq-header {
  text-align: center;
  margin-bottom: 24px;
}
.drq-title {
  font-size: 2.8rem;
  color: var(--drq-accent);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
  margin: 0;
}
.drq-subtitle {
  font-size: 1.2rem;
  color: var(--drq-secondary);
  font-weight: 500;
  text-transform: uppercase;
  margin: 8px 0;
  letter-spacing: 1px;
}
.drq-puzzle-info {
  font-size: 1rem;
  color: var(--drq-header-text);
  font-weight: 600;
  margin-top: 6px;
}
.drq-puzzle-info span { margin: 0 4px; }
.drq-separator       { margin: 0 8px; color: var(--drq-secondary); }
#drq-timer          { font-weight: 700; color: var(--drq-timer-colour); }

/*───────────────────────────────────────────────────*/
/* 1) Backdrop: use flex to center children          */
/*───────────────────────────────────────────────────*/
.drq-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.8);
  z-index: 2000;
  overflow: hidden;

  /* FIX: stop scroll chaining + stable full-height */
  overscroll-behavior: contain;
  height: 100dvh;
}

/*───────────────────────────────────────────────────*/
/* 2) Default overlays (win/lose/stats/share/etc)   */
/*───────────────────────────────────────────────────*/
.drq-overlay-content {
  position: relative;
  background: #F1F1F1;
  /* original top/right/bottom padding:
     48px top, 24px sides, 24px bottom */
  padding: 48px 24px 24px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.7);
  width: 100%;
  max-width: 500px;

  /* FIX: use dvh so top never gets cropped by mobile chrome */
  max-height: calc(100dvh - 64px) !important;
  margin: 32px auto !important;

  overflow-y: auto;
  box-sizing: border-box;

  /* FIX: block scroll-bleed from this scroller too + smooth iOS scrolling */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/*───────────────────────────────────────────────────*/
/*  Extra bottom-padding on Win/Lose overlays        */
/*───────────────────────────────────────────────────*/
/* so their “Show Answers” / “All Word Lengths” 
   controls never sit flush against the bottom edge */
#drq-win-overlay .drq-overlay-content,
#drq-lose-overlay .drq-overlay-content {
  padding-bottom: 4rem !important;
}

/*───────────────────────────────────────────────────*/
/* 3) Help overlay only: full-page, no side-scroll ──*/
/*───────────────────────────────────────────────────*/
#drq-help-overlay .drq-overlay-content {
  position: absolute;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
  padding: 48px 24px 24px;  /* keep your existing padding */
  background: #F1F1F1;
  border-radius: 0;         /* remove rounded corners so it fills */
  max-width: none;          /* ignore your 500px limit */
  width: auto;
  height: auto;
  box-sizing: border-box;

  overflow-y: auto;         /* vertical scroll if content is tall */
  overflow-x: hidden;       /* never scroll horizontally */

  /* ensure really long words wrap */
  word-wrap: break-word;
  word-break: break-word;

  /* keep the same scroll-behavior fixes here too */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* force normal wrapping inside the How to Play text */
#drq-help-overlay .drq-terms-text p,
#drq-help-overlay .drq-terms-text ul li {
  white-space: normal;
}

/*───────────────────────────────────────────────────*/
/*  SHARE OVERLAY – full layout & sticky footer     */
/*───────────────────────────────────────────────────*/
#drq-share-overlay .drq-overlay-content {
  display: flex;
  padding-top: 64px;
  flex-direction: column;
  max-height: 90dvh;       /* use dvh here too */
}

#drq-share-overlay .drq-share-diagram,
#drq-share-overlay textarea {
  flex: 1 1 auto;          /* fill remaining space */
  overflow-y: auto;        /* scroll internally */
}

#drq-share-overlay .drq-share-controls {
  position: sticky;
  bottom: 0;               /* stick to the bottom */
  background: #F1F1F1;     /* match overlay-content bg */
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 10;
}

#drq-share-overlay .drq-share-buttons {
  position: absolute;      /* bring the copy button back to the top */
  top: 16px;
  right: 16px;
  z-index: 11;
}

#drq-share-overlay .drq-share-invite {
  position: absolute;
  top: 16px;
  left: 24px;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--drq-primary);
}

/* put the tip just under the heading */
#drq-share-overlay .drq-share-tip {
  position: absolute;
  top: 64px;          /* under the 16px-tall heading area */
  left: 24px;
  right: 24px;
  margin: 0;
  font-size: 0.95rem;
  color: var(--drq-primary);
  opacity: 0.9;
}

/*───────────────────────────────────────────────────*/
/*  Prevent “Show Answers” / “All Word Lengths” from wrapping */
/*───────────────────────────────────────────────────*/
#drq-share-overlay .drq-share-options label {
  white-space: nowrap;
}

/*───────────────────────────────────────────────────*/
/* 4) Close button (inside any .drq-overlay-content) */
/*───────────────────────────────────────────────────*/
.drq-btn-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
}

.drq-hidden { display:none!important; }
.drq-overlay-content h3 {
  margin-top:0;
  font-size:1.5rem;
  font-weight:700;
  color: var(--drq-primary);
}

/*───────────────────────────────────────────────────*/
/*  IMPROVED STATS OVERLAY                          */
/*───────────────────────────────────────────────────*/

/* 1) Push the stats content down so our controls sit above */
#drq-stats-overlay .drq-overlay-content {
  padding-top: 56px;  /* same height as the close button + margin */
  position: relative; /* ensure absolute children position correctly */
}

/* 2) Absolutely position the “Select Word Length” */
#drq-stats-overlay .drq-stats-length-select {
  position: absolute;
  top: 16px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1rem;
  z-index: 10;
}

/* Label styling */
#drq-stats-overlay .drq-stats-length-select label {
  font-weight: 600;
  color: var(--drq-primary);
}

/* 3) Style the dropdown and force extra right-padding for the arrow */
#drq-stats-overlay .drq-stats-length-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  color: #232322;
  border: 1px solid var(--drq-primary);
  padding: 0.5rem 1.75rem 0.5rem 0.75rem; /* room for arrow */
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
  cursor: pointer;
  background-image:
    url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%227%22%20viewBox%3D%220%200%2012%207%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M6%207L0%200h12L6%207z%22%20fill%3D%22%23333333%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

/* Focus ring */
#drq-stats-overlay .drq-stats-length-select select:focus {
  outline: none;
  border-color: var(--drq-accent);
  box-shadow: 0 0 0 3px rgba(218,137,0,0.3);
}

/* 4) Stats-grid styling */
.drq-stats-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.drq-stat-block {
  text-align: center;
}
.drq-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--drq-primary);
}
.drq-stat-label {
  font-size: 0.9rem;
  color: #666;
  margin-top: 4px;
}
.drq-dist-title {
  font-size: 1rem;
  color: var(--drq-primary);
  margin: 12px 0 8px;
}

/* ──────────────── NO MEDIA OVERRIDE ───────────────
   We deliberately do NOT override mobile positioning,
   so the control stays up next to the close button. */

/* —— New Wordle-style histogram rows —— */
.drq-guess-bar-container {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  font-family: inherit;
}
.drq-guess-bar-label {
  width: 1.5em;
  text-align: right;
  margin-right: 0.5em;
  font-weight: bold;
}
.drq-guess-bar { flex: 1; }
.drq-guess-bar-fill {
  flex-grow: 1;
  min-width: 2em;
  height: 1.5em;
  background-color: #787c7e;  /* grey */
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.5em;
  color: #ffffff;
  font-weight: bold;
  overflow: hidden;
}
.drq-guess-bar-fill.correct { background-color: #6aaa64; }

/* ===========================================================================
   Distribution Header + Clear Button
============================================================================ */
.drq-dist-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:12px 0 8px;
}
.drq-dist-header .drq-dist-title {
  margin:0;
  font-size:1rem;
}
.drq-btn-clear {
  background:var(--drq-primary);
  color:var(--drq-secondary);
  padding:6px 10px;
  font-size:.9rem;
  border-radius:4px;
  border:none;
  cursor:pointer;
}
.drq-btn-clear:hover {
  background:var(--drq-secondary);
  color:var(--drq-primary);
}
.drq-clear-confirm {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:var(--drq-secondary);
  color:var(--drq-primary);
  padding:16px;
  border:1px solid var(--drq-primary);
  border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
  z-index:10;
  width:260px;
  text-align:center;
}
.drq-clear-confirm p {
  margin-bottom:12px;
  font-size:0.95rem;
}
.drq-clear-confirm .drq-btn-clear { margin:0 6px; }

/*-----------------------------------------------
  HELP OVERLAY
-----------------------------------------------*/
.drq-overlay-content ul {
  list-style: disc inside;
  margin: 12px 0 24px 24px;
}
.drq-cell-colour-sample {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 2px solid var(--drq-cell-border);
  margin-right: 8px;
  border-radius: 4px;
  vertical-align: text-bottom;
}
.drq-cell-colour-sample.correct {
  background: var(--drq-cell-correct);
  border-color: var(--drq-cell-correct);
}
.drq-cell-colour-sample.present {
  background: #DA8900;
  border-color: #DA8900;
}
.drq-cell-colour-sample.absent {
  background: var(--drq-cell-absent);
  border-color: var(--drq-cell-absent);
}

/*-----------------------------------------------
  SHARE & WIN/LOSE DIAGRAMS
-----------------------------------------------*/
.drq-circle {
  width:18px; height:18px; border-radius:50%;
  margin:0 4px; border:1px solid #888;
}
.circle-correct { background:var(--drq-cell-correct); }
.circle-present { background:var(--drq-cell-present); }
.circle-absent  { background:var(--drq-cell-absent); }

/*-----------------------------------------------
  MAIN GAME AREA (keep relative for absolute children)
-----------------------------------------------*/
.drq-game-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/*-----------------------------------------------
  REVEAL / VIEW BUTTON ROW (absolutely positioned)
-----------------------------------------------*/
.drq-reveal-container {
  display: flex;                /* line up the button */
  justify-content: center;      /* center it horizontally */
  gap: var(--drq-grid-gap);     /* same spacing as your stats/share row */
  margin: 1rem 0;               /* equal breathing-room above & below */
}
.drq-reveal-container:empty { display: none; }

/*-----------------------------------------------
  GRID CONTAINER & CELLS
-----------------------------------------------*/
.drq-grid-container {
  display:grid;
  grid-template-rows:repeat({{ section.settings.max_rows }},1fr);
  grid-template-columns:repeat(5,1fr);
  gap:3px; margin-bottom:12px; z-index:1;
}
.drq-cell {
  width:60px; height:60px; font-size:2rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  text-transform:uppercase; border-radius:2px;
  background:var(--drq-cell-bg);
  border:2px solid var(--drq-cell-border);
  color:var(--drq-cell-text);
  box-shadow:0 2px 6px rgba(0,0,0,0.4);
  transition:transform var(--drq-transition) ease, background var(--drq-transition) ease;
}
.drq-cell.flipping { transform:rotateX(90deg); }
.drq-cell.correct  { background:var(--drq-cell-correct); border-color:var(--drq-cell-correct); color:#fff; }
.drq-cell.present  { background:var(--drq-cell-present); border-color:var(--drq-cell-present); color:#fff; }
.drq-cell.absent   { background:var(--drq-cell-absent);  border-color:var(--drq-cell-absent);  color:#fff; }
.drq-cell.underline { color:#888; }

/*───────────────────────────────────────────────────*/
/*  Cell “pop” animation                            */
/*───────────────────────────────────────────────────*/
@keyframes drq-cell-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.drq-cell.pop-cell { animation: drq-cell-pop 150ms ease-out; }

/*-----------------------------------------------
  BLOCK ANY ACCIDENTAL HORIZONTAL SCROLL
-----------------------------------------------*/
html, body { overflow-x:hidden; }

/* shake animation for invalid guesses */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-7px); }
  40%,80% { transform: translateX(7px); }
}
.drq-shake { animation: shake 0.48s ease-out; }

/* ===========================================================================
   KEYBOARD BACKGROUND SHAPE
============================================================================ */
.drq-keyboard-bg {
  position:absolute;
  bottom:80px; left:0; width:100%;
  box-sizing:border-box; padding:20px;
  background:var(--drq-keyboard-bg-color);
  border-radius:8px; z-index:0;
  --drq-grid-gap:8px;
  --drq-tile-size:calc((100% - (10 - 1)*var(--drq-grid-gap))/10);
  overflow-x:hidden;
}

/* ===========================================================================
   ROWS
============================================================================ */
.drq-keyboard {
  display:flex; flex-direction:column; gap:var(--drq-grid-gap);
  padding:10px 0 50px;
  z-index:1;
}
.drq-key-row {
  display:flex; gap:var(--drq-grid-gap); justify-content:center;
}
.drq-key-row:nth-child(2) {
  margin:0 calc((var(--drq-tile-size)+var(--drq-grid-gap))/2);
}
.drq-key-row:nth-child(3) {
  margin:0 calc((var(--drq-tile-size)*1.2+var(--drq-grid-gap))/2);
}

/* ===========================================================================
   KEYS
============================================================================ */
.drq-key {
  width:var(--drq-tile-size); height:var(--drq-tile-size);
  background:var(--drq-key-bg); border:1px solid var(--drq-key-border);
  border-radius:4px; display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--drq-tile-size)*0.35); font-weight:600;
  cursor:pointer; user-select:none;
  transition:background var(--drq-transition) ease, transform var(--drq-transition) ease;
  box-shadow:0 2px 4px rgba(0,0,0,0.3);
}
.drq-key.enter, .drq-key.backspace {
  width:calc(var(--drq-tile-size)*1.2); font-size:0.9rem; font-weight:bold; color:#fff;
}
.drq-key.enter { background:#4682B4; }
.drq-key.backspace { background:#e17070; }
.drq-key.enter:active, .drq-key.backspace:active {
  transform:translateY(2px); box-shadow:inset 0 2px 4px rgba(0,0,0,0.2);
}
.drq-key.correct { background: var(--drq-key-correct); color: #fff; }
.drq-key.present { background: var(--drq-key-present); color: #fff; }
.drq-key.absent  { background: var(--drq-key-absent);  color: #fff; }
.drq-key.enter:hover, .drq-key.enter:focus { background:#4682B4; color:#fff; }
.drq-key.backspace:hover, .drq-key.backspace:focus { background:#e17070; color:#fff; }

/* Prevent mobile double-tap zoom on the on-screen keyboard */
.drq-keyboard, .drq-key { touch-action:manipulation; -ms-touch-action:manipulation; }

/*───────────────────────────────────────────────────*/
/*  Key “pop” animation (namespaced)                */
/*───────────────────────────────────────────────────*/
@keyframes drq-key-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.15); background-color: #A889E4; }
  100% { transform: scale(1); }
}
.drq-key:not(.enter):not(.backspace).pop {
  animation: drq-key-pop 0.3s ease-out forwards;
}

/* Make the “reveal answer” cells line up in a row */
#drq-lose-answer-row {
  display:flex; flex-direction:row; justify-content:center; gap:var(--drq-grid-gap);
}

/* Word Definition text under win/lose overlays */
.drq-definition {
  margin:4px 0 12px; font-style:italic; color:var(--drq-primary); text-align:center;
}
/* Ensure both win and reveal answer‐rows sit horizontally */
.drq-answer-row {
  display:flex; justify-content:center; gap:var(--drq-grid-gap); margin:12px 0;
}

/*───────────────────────────────────────────────────*/
/* Overlay textareas: disable native focus/highlight,
   strip outlines & shadows, allow JS-driven resize   */
/*───────────────────────────────────────────────────*/
.drq-overlay-content textarea {
  width: 100%;
  box-sizing: border-box;
  overflow-y: hidden;
  resize: none;
  min-height: 80px;
  outline: none !important;
  box-shadow: none !important;
}

/*-----------------------------------------------
  FOOTER CONTROLS & RESPONSIVE
-----------------------------------------------*/
.drq-btn {
  background:var(--drq-primary); color:var(--drq-secondary);
  border:none; padding:10px 20px; font-size:1rem;
  border-radius:6px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.3);
  transition:background var(--drq-transition) ease;
}
.drq-btn:hover { background:var(--drq-secondary); color:var(--drq-primary); }
.drq-btn-secondary { background:var(--drq-secondary); color:var(--drq-primary); }
.drq-btn-secondary:hover { background:var(--drq-primary); color:var(--drq-secondary); }

/* Responsive tweaks */
@media (max-width:768px){
  :root { --drq-tile-size:50px; }
  .drq-cell { width:50px; height:50px; font-size:1.6rem; }
  .drq-key  { width:36px; height:44px; font-size:1rem; }
  .drq-share-diagram .drq-circle,
  .drq-win-diagram   .drq-circle { width:16px; height:16px; }
}
@media (max-width:480px){
  :root { --drq-tile-size:42px; }
  .drq-cell { width:42px; height:42px; font-size:1.4rem; }
  .drq-key  { width:30px; height:40px; font-size:.9rem; }
  .drq-share-diagram .drq-circle,
  .drq-win-diagram   .drq-circle { width:14px; height:14px; }
}

/* ===========================================================================
   INLINE “Guess the _-letter word in _ attempts.” with non-selectable dropdown
=============================================================================*/
.drq-inline-settings {
  text-align: center;
  margin: 0.5rem 0;
}
.drq-inline-settings p {
  font: inherit;
  color: #e3e3f1;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* make the <select> easy to tap but not highlightable */
.drq-inline-settings select {
  font: inherit;
  color: #232322;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;

  /* restored original “side” padding/margin */
  padding: 0.25rem 0.5rem;
  margin: 0 0.25rem;
  min-width: 2.5rem;

  cursor: pointer;

  /* disable text selection/highlight */
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;

  /* remove iOS tap highlight */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.drq-inline-settings select:focus {
  outline: 2px solid #5A9BD5;
}
.drq-inline-settings select option {
  color: #232322;
}

/* on very narrow screens, keep the same sizing */
@media (max-width: 480px) {
  .drq-inline-settings select {
    /* same as above, no chunky increase */
    padding: 0.25rem 0.5rem;
    margin: 0 0.25rem;
    min-width: 2.5rem;
    font-size: 1rem;
  }
}

/* —————————————————————————————————————————————
   Terms of Play
   ————————————————————————————————————————————— */
.terms-heading { color:#232322; }

/*———————————————————————————————————————————————
  WIN OVERLAY: headline (“primary”) + subline (“secondary”)
———————————————————————————————————————————————*/
#drq-win-primary {
  font-size:2rem; margin-top:-16px; padding-top:0;
 	margin-bottom:1rem; text-align:left;
}
#drq-win-secondary {
  font-size:1.75rem; margin-bottom:2rem;
  display:block; text-align:center;
  color:var(--drq-primary) !important; opacity:1 !important;
  font-weight:650;
}
@media (max-width:480px) {
  #drq-win-primary { font-size:1.6rem; margin-bottom:6px; }
  #drq-win-secondary { font-size:0.9rem; margin-bottom:12px; }
}

/*———————————————————————————————————————————————
  LOSE OVERLAY: headline (“primary”) + subline (“secondary”)
———————————————————————————————————————————————*/
#drq-lose-primary {
  font-size:2rem; margin-top:-16px; padding-top:0;
  margin-bottom:1rem; text-align:left;
}
#drq-lose-secondary {
  font-size:1.75rem; margin-bottom:2rem;
  display:block; text-align:center;
  color:var(--drq-primary) !important; opacity:1 !important;
  font-weight:650;
}
@media (max-width:480px) {
  #drq-lose-primary { font-size:1.6rem; margin-bottom:6px; }
  #drq-lose-secondary { font-size:0.9rem; margin-bottom:12px; }
}

/*───────────────────────────────────────────────────*/
/*  SHARE CONTROLS: Copy + pill-style checkboxes    */
/*───────────────────────────────────────────────────*/
.drq-share-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
  position: relative;
}
.drq-share-buttons {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.drq-share-controls textarea {
  flex: 1 1 auto;
  min-width: 160px;
  padding: 0.5rem;
  box-sizing: border-box;
}

/*───────────────────────────────────────────────────*/
/*  The two toggle buttons (“Show Answers” / “All Lengths”) */
/*───────────────────────────────────────────────────*/
.drq-share-options {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;           
  margin: 1rem 0;
}
.drq-share-options label {
  display: inline-flex;
  flex-direction: row-reverse;  
  align-items: center;
  gap: 1rem;                   
  padding: 0.4rem 1rem;         
  background: #fff;             
  color: #232322;               
  font-size: 1.05rem;
  font-weight: 500;
  border: 1px solid #232322;     
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

/* Fixed-size checkbox square */
.drq-share-options input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 1.6rem;              
  height: 1.6rem;              
  border: 1px solid #232322;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.drq-share-options input[type="checkbox"]::after {
  content: '✓';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;          
  font-weight: bold;
  color: #000;
  opacity: 0;            
  transition: opacity 0.15s ease;
}
/* Checked = orange fill, show tick */
.drq-share-options input[type="checkbox"]:checked {
  background: var(--drq-accent);
  border-color: var(--drq-accent);
}
.drq-share-options input[type="checkbox"]:checked::after { opacity: 1; }

/*───────────────────────────────────────────────────*/
/*  COPY BUTTON                                     */
/*───────────────────────────────────────────────────*/
.drq-social-btn {
  background: var(--drq-accent);
  color: #fff;
  border: 1px solid #232322;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: background var(--drq-transition) ease, transform var(--drq-transition) ease;
}
.drq-social-btn:hover,
.drq-social-btn:active {
  filter: brightness(1);
  transform: none;
}

/*───────────────────────────────────────────────────*/
/*  Textarea copy-highlight style (applied via JS)  */
/*───────────────────────────────────────────────────*/
textarea.drq-copy-highlight { outline: 2px solid #000 !important; }
.drq-copy-highlight { outline: 2px solid #000; }

/* ─────────────────────────────────────────────────────────
   Info-icon & tooltip (simplified)
──────────────────────────────────────────────────────── */
.drq-info-icon {
  display: inline-block;
  margin-left: 0.25rem;
  cursor: pointer;
  font-style: normal;
  font-weight: bold;
  font-size: 1.2em;
  color: var(--drq-info);
}

.drq-stat-tooltip {
  position: fixed !important;
  background: #fff;
  color: #232322;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  max-width: 300px;
  min-width: 200px;
  z-index: 10000;
  display: none;
  font-size: 1rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  pointer-events: auto;
}

/* ────────────────────────────────────────────────────
   Slightly larger & bolder letter-keys only
───────────────────────────────────────────────────*/
@media (max-width: 768px) {
  .drq-key:not(.enter):not(.backspace) {
    font-size: calc(var(--drq-tile-size) * 0.35) !important;
    font-weight: 700 !important;
  }
}
@media (max-width: 480px) {
  .drq-key:not(.enter):not(.backspace) {
    font-size: calc(var(--drq-tile-size) * 0.40) !important;
  }
}

/* ────────────────────────────────────────────────────
   Increase grid‐cell font size only on narrower screens
───────────────────────────────────────────────────*/
@media (max-width: 768px) {
  .drq-cell { font-size: 2.1rem; }
}
@media (max-width: 480px) {
  .drq-cell { font-size: 1.9rem; }
}

/* ────────────────────────────────────────────────────
   Prevent accidental text selection on grid & keys
───────────────────────────────────────────────────*/
.drq-cell,
.drq-key {
  user-select: none !important;
  -webkit-user-select: none !important;  /* Safari */
  -ms-user-select: none !important;      /* IE/Edge */
  -webkit-touch-callout: none !important;/* iOS callout */
}

/*───────────────────────────────────────────────────
   Contain all touch gestures (no scroll, no pinch-zoom)
   for our on-screen keyboard
───────────────────────────────────────────────────*/
.drq-keyboard-bg,
.drq-keyboard {
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;    /* allow only one-finger pans, block pinch-zoom */
  -ms-touch-action: pan-x pan-y;
}

/* make all three share-text <textarea>s completely unselectable */
#drq-share-text,
#drq-win-share-text,
#drq-lose-share-text {
  user-select: none;
  pointer-events: none;
}