/* Edition 09 · accessible, tactile UX surfaces. Load after the existing theme stylesheet. */
:root {
  --ux-paper: #f6f3e9;
  --ux-ink: #163d31;
  --ux-muted: #52675c;
  --ux-accent: #174e3c;
  --ux-line: rgba(22,61,49,.12);
  --ux-raised: -5px -5px 12px rgba(255,255,255,.94), 7px 7px 16px rgba(22,61,49,.15);
  --ux-inset: inset -3px -3px 8px rgba(255,255,255,.8), inset 4px 4px 9px rgba(22,61,49,.13);
  --ux-danger: #a23b32;
}
html[data-appearance="dark"], html[data-theme="dark"] {
  --ux-paper: #151515;
  --ux-ink: rgba(255,255,255,.9);
  --ux-muted: rgba(255,255,255,.64);
  --ux-accent: #004d40;
  --ux-line: rgba(255,255,255,.09);
  --ux-raised: -5px -5px 11px #292929, 7px 7px 16px rgba(0,0,0,.48);
  --ux-inset: inset -3px -3px 8px rgba(42,42,42,.75), inset 4px 4px 9px rgba(0,0,0,.48);
  --ux-danger: #ffb4ab;
}
.appui-shade {
  position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center;
  overflow: auto; overscroll-behavior: contain;
  padding: max(18px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  background: rgba(10,17,14,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: appui-fade .16s ease-out both;
}
.appui-dialog {
  position: relative; width: min(100%, 500px); max-height: min(88dvh, 760px); overflow: auto;
  padding: clamp(22px,5vw,34px); border: 1px solid var(--ux-line); border-radius: 28px;
  color: var(--ux-ink); background: var(--ux-paper); box-shadow: var(--ux-raised);
  font: 400 16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;
  animation: appui-rise .2s cubic-bezier(.2,.75,.25,1) both;
}
.appui-title { margin: 0 48px 12px 0; color: var(--ux-ink); font-size: clamp(22px,6vw,30px); line-height: 1.15; letter-spacing: -.035em; }
.appui-message { margin: 0 0 24px; color: var(--ux-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.appui-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; color: var(--ux-ink); background: var(--ux-paper); box-shadow: var(--ux-raised); font: 400 28px/1 system-ui,sans-serif; cursor: pointer; }
.appui-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.appui-button { min-height: 48px; min-width: 108px; padding: 12px 18px; border: 0; border-radius: 18px; color: var(--ux-ink); background: var(--ux-paper); box-shadow: var(--ux-raised); font: 700 15px/1.2 system-ui,sans-serif; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease; }
.appui-button:hover { transform: translateY(-1px); }
.appui-button:active { transform: translateY(1px); box-shadow: var(--ux-inset); }
.appui-primary { color: #fff; background: var(--ux-accent); }
html[data-appearance="dark"] .appui-primary, html[data-theme="dark"] .appui-primary { color: #fff; }
.appui-secondary { color: var(--ux-ink); }
.appui-danger { color: #fff; background: #9b3b32; }
html[data-appearance="dark"] .appui-danger, html[data-theme="dark"] .appui-danger { color: #ffb4ab; background: #321f1c; }
.appui-rules-content { color: var(--ux-muted); line-height: 1.6; }
.appui-rules-content > :first-child { margin-top: 0; }
.appui-rules-content h3, .appui-rules-content h4 { margin: 22px 0 9px; color: var(--ux-ink); line-height: 1.25; }
.appui-rules-content p { margin: 8px 0 14px; }
.appui-rules-content ul, .appui-rules-content ol { margin: 10px 0 18px; padding-left: 1.35em; }
.appui-rules-content li { margin: 7px 0; padding-left: 3px; }
.appui-rules-content .rule-card, .appui-rules-content article, .appui-rules-content blockquote {
  margin: 12px 0; padding: 15px 17px; border: 1px solid var(--ux-line); border-radius: 20px;
  color: var(--ux-ink); background: var(--ux-paper); box-shadow: var(--ux-inset);
}
.appui-rules-content .rule-card strong, .appui-rules-content article strong { color: var(--ux-accent); }
html[data-appearance="dark"] .appui-rules-content .rule-card strong, html[data-theme="dark"] .appui-rules-content .rule-card strong,
html[data-appearance="dark"] .appui-rules-content article strong, html[data-theme="dark"] .appui-rules-content article strong { color: #81c784; }
.appui-select-wrap { position: relative; width: 100%; min-width: 0; }
.appui-native-select { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; }
.appui-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 50px; padding: 12px 17px; border: 1px solid var(--ux-line); border-radius: 18px; color: var(--ux-ink); background: var(--ux-paper); box-shadow: var(--ux-inset); font: 600 16px/1.3 system-ui,-apple-system,sans-serif; text-align: left; cursor: pointer; }
.appui-select-trigger:disabled { opacity: .48; cursor: not-allowed; }
.appui-select-chevron { flex: 0 0 auto; color: var(--ux-accent); font-size: 23px; line-height: 1; }
.appui-select-wrap[hidden] { display: none !important; }
.appui-picker-shade { place-items: end center; padding: 0; }
.appui-picker { width: min(100%,620px); max-height: min(84dvh,760px); padding: 18px 18px max(20px,env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; animation-name: appui-sheet; }
.appui-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.appui-picker-head h2 { margin: 0; color: var(--ux-ink); font-size: 21px; line-height: 1.2; }
.appui-picker-head .appui-close { position: static; flex: 0 0 48px; }
.appui-search { width: 100%; min-height: 48px; margin: 0 0 12px; padding: 11px 15px; border: 1px solid var(--ux-line); border-radius: 16px; color: var(--ux-ink); background: var(--ux-paper); box-shadow: var(--ux-inset); font: inherit; }
.appui-option-list { display: grid; gap: 9px; max-height: min(57dvh,520px); overflow: auto; padding: 3px 5px 6px 3px; overscroll-behavior: contain; }
.appui-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; padding: 12px 15px; border: 1px solid var(--ux-line); border-radius: 17px; color: var(--ux-ink); background: var(--ux-paper); box-shadow: var(--ux-raised); font: 600 15px/1.35 system-ui,sans-serif; text-align: left; cursor: pointer; }
.appui-option[aria-selected="true"] { color: var(--ux-accent); box-shadow: var(--ux-inset); }
html[data-appearance="dark"] .appui-option[aria-selected="true"], html[data-theme="dark"] .appui-option[aria-selected="true"] { color: #81c784; background: #004d40; }
.appui-option:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.appui-option-check { flex: 0 0 22px; color: var(--ux-accent); font-size: 19px; text-align: center; }
.appui-empty { padding: 14px; color: var(--ux-muted); text-align: center; }
.appui-suggestions { position: absolute; z-index: 30; right: 0; left: 0; top: calc(100% + 7px); display: grid; gap: 7px; max-height: 250px; overflow: auto; padding: 8px; border: 1px solid var(--ux-line); border-radius: 18px; background: var(--ux-paper); box-shadow: var(--ux-raised); }
.appui-suggestions[hidden] { display: none !important; }
.appui-suggestion { min-height: 46px; padding: 10px 13px; border: 0; border-radius: 13px; color: var(--ux-ink); background: transparent; font: 600 15px/1.3 system-ui,sans-serif; text-align: left; cursor: pointer; }
.appui-suggestion:hover, .appui-suggestion[aria-selected="true"] { background: rgba(23,78,60,.12); }
html[data-appearance="dark"] .appui-suggestion:hover, html[data-theme="dark"] .appui-suggestion:hover,
html[data-appearance="dark"] .appui-suggestion[aria-selected="true"], html[data-theme="dark"] .appui-suggestion[aria-selected="true"] { background: rgba(129,199,132,.14); }
.appui-shade :focus-visible, .appui-select-trigger:focus-visible, .appui-option:focus-visible, .appui-suggestion:focus-visible { outline: 3px solid #4e9b70; outline-offset: 3px; }
html[data-appearance="dark"] .appui-shade :focus-visible, html[data-theme="dark"] .appui-shade :focus-visible,
html[data-appearance="dark"] .appui-select-trigger:focus-visible, html[data-theme="dark"] .appui-select-trigger:focus-visible { outline-color: #81c784; }
/* Full-screen Time’s Up countdown surface supplied for the game integration. */
.tu-countdown { position: fixed; inset: 0; z-index: 11000; display: grid; place-content: center; justify-items: center; gap: clamp(14px,4vh,30px); width: 100vw; min-height: 100vh; min-height: 100dvh; padding: max(24px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom)); overflow: auto; color: var(--ux-ink); background: var(--ux-paper); text-align: center; }
.tu-countdown-number { display: grid; place-items: center; width: min(65vw,56vh,360px); aspect-ratio: 1; border-radius: 50%; color: var(--ux-accent); background: var(--ux-paper); box-shadow: var(--ux-raised); font: 800 clamp(100px,32vw,260px)/1 system-ui,sans-serif; letter-spacing: -.08em; }
html[data-appearance="dark"] .tu-countdown-number, html[data-theme="dark"] .tu-countdown-number { color: #81c784; }
@keyframes appui-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes appui-rise { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes appui-sheet { from { transform: translateY(28px); opacity: .8; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 420px) {
  .appui-actions { display: grid; grid-template-columns: 1fr; }
  .appui-button { width: 100%; }
  .appui-picker { border-radius: 24px 24px 0 0; padding-right: 14px; padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .appui-shade, .appui-dialog, .appui-picker, .appui-button { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Édition 12 — rythme léger sans animer les secrets ni retarder leur masquage. */
.appui-button,.appui-option,.appui-select-trigger,.appui-close{transition:transform .16s ease,background-color .18s ease,box-shadow .18s ease,border-color .18s ease}
.appui-button:active,.appui-option:active{transform:translateY(1px)}
@media(prefers-reduced-motion:reduce){.appui-button,.appui-option,.appui-select-trigger,.appui-close{transition:none!important;animation:none!important}.appui-button:active,.appui-option:active{transform:none!important}}
html[data-motion="reduce"] .appui-button,html[data-motion="reduce"] .appui-option,html[data-motion="reduce"] .appui-select-trigger,html[data-motion="reduce"] .appui-close{transition:none!important;animation:none!important}

/* Edition 33: unobtrusive progress feedback while the unchanged corpus loads on first play. */
.lexical-status:not([hidden]) {
  position: fixed; z-index: 13000; left: 50%; bottom: max(16px,env(safe-area-inset-bottom));
  width: min(calc(100vw - 28px),520px); margin: 0; padding: 13px 18px;
  transform: translateX(-50%); border: 1px solid var(--ux-line); border-radius: 18px;
  color: #fff; background: var(--ux-accent); box-shadow: 0 8px 28px rgba(0,0,0,.2);
  font: 600 14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif; text-align: center;
}