/* ClicksDoc Examen — sélecteur d'épreuve. Namespaced .xp- */
.xp { margin-bottom: 2rem; }
.xp-head { display: flex; align-items: center; gap: .7rem; margin: 1.4rem 0 .8rem; }
.xp-head h2 { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.5rem); }
.xp-step {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--coral), var(--marigold)); color: #fff; font-weight: 800;
  box-shadow: 0 6px 14px -6px hsl(var(--shadow) / .5);
}
.xp-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 1.2rem; }
.xp-group h3 { margin: 0 0 .5rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.xp-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.xp-chips-3 { grid-template-columns: repeat(3, 1fr); }
.xp-chip {
  display: flex; align-items: center; gap: .7rem; text-align: start; cursor: pointer;
  padding: .85rem .95rem; border-radius: 18px; border: 2px solid var(--paper-line);
  background: var(--card-bg); color: var(--ink); font: inherit;
  box-shadow: 0 1px 0 hsl(var(--shadow) / .06);
  animation: xpIn .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 70ms);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, border-color .2s ease, background .25s ease;
}
.xp-chip:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 12px 24px -12px hsl(var(--shadow) / .45); border-color: var(--sky); }
.xp-chip:active:not(:disabled) { transform: scale(.97); }
.xp-chip:focus-visible, .xp-go:focus-visible, .xp-stop:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.xp-chip:disabled { opacity: .55; cursor: not-allowed; }
.xp-chip.is-active {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--sky), color-mix(in srgb, var(--sky) 55%, var(--leaf)));
  box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--sky) 80%, #000);
}
.xp-chip-ico { font-size: 1.7rem; line-height: 1; }
.xp-chip-txt { display: flex; flex-direction: column; min-width: 0; }
.xp-chip-txt strong { font-size: 1rem; }
.xp-chip-txt small { font-size: .74rem; opacity: .8; }
.xp-chips-3 .xp-chip { flex-direction: column; text-align: center; gap: .3rem; }

.xp-sheet {
  position: relative; padding: 1.2rem; border-radius: 24px; border: 2px solid var(--paper-line);
  background: linear-gradient(160deg, color-mix(in srgb, var(--sky) 10%, var(--card-bg)), var(--card-bg) 55%);
  box-shadow: 0 24px 40px -28px hsl(var(--shadow) / .55);
  animation: xpIn .55s cubic-bezier(.2,.8,.2,1) both;
}
.xp-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.xp-badge { padding: .3rem .75rem; border-radius: 999px; font-weight: 700; font-size: .8rem; background: var(--card-bg); border: 1.5px solid var(--paper-line); color: var(--ink); }
.xp-badge.b-time { background: linear-gradient(120deg, var(--coral), var(--marigold)); color: #fff; border-color: transparent; }
.xp-badge.b-words { background: color-mix(in srgb, var(--leaf) 18%, var(--card-bg)); color: var(--leaf-ink); }
.xp-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.2rem; align-items: start; }
.xp-paper {
  position: relative; padding: 1.4rem 1.4rem 1.2rem; border-radius: 6px 18px 18px 18px; background: #fff; color: #1f1f2e;
  border: 1px solid #e6e1d3; box-shadow: 0 14px 30px -18px hsl(var(--shadow) / .6), inset 0 0 0 6px #fff;
  font-size: 1.05rem; line-height: 1.7;
}
.xp-paper[dir="rtl"] { font-family: Amiri, Cairo, serif; font-size: 1.25rem; }
.xp-paper-tag { position: absolute; top: -.7rem; inset-inline-start: 1rem; padding: .15rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 800; color: #fff; background: var(--sky-ink); }
.xp-p-title { font-weight: 800; font-size: 1.2em; margin: .3rem 0 .6rem; }
.xp-p { margin: 0 0 .5rem; }
.xp-p-author { margin: .6rem 0; font-size: .9em; color: #55506f; }
.xp-table { border-collapse: collapse; margin: .4rem 0 .8rem; font-size: .95em; }
.xp-table th, .xp-table td { border: 1.5px solid #b9b3a0; padding: .25rem .8rem; }
.xp-table th { background: #f3eedd; }
.xp-img { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border: 2px dashed #b9b3a0; border-radius: 12px; color: #6b657f; font-size: .9em; }
.xp-tasks h3 { margin: 0 0 .6rem; font-size: 1rem; }
.xp-tasks ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; counter-reset: t; }
.xp-tasks li { animation: xpIn .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 60ms + 150ms); }
.xp-tasks label { display: flex; gap: .65rem; align-items: center; padding: .55rem .75rem; background: var(--card-bg); border: 1.5px solid var(--paper-line); border-radius: 14px; cursor: pointer; transition: background .2s, border-color .2s, transform .15s; }
.xp-tasks label:hover { border-color: var(--leaf); transform: translateX(3px); }
[dir="rtl"].xp-tasks label:hover { transform: translateX(-3px); }
.xp-tasks input { position: absolute; opacity: 0; }
.xp-box { flex: none; width: 1.35rem; height: 1.35rem; border-radius: 7px; border: 2px solid var(--leaf); display: grid; place-items: center; transition: background .2s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.xp-tasks input:checked + .xp-box { background: var(--leaf); transform: scale(1.12); }
.xp-tasks input:checked + .xp-box::after { content: "✓"; color: #fff; font-weight: 800; font-size: .85rem; }
.xp-tasks input:checked ~ span:last-child { text-decoration: line-through; opacity: .6; }
.xp-tasks input:focus-visible + .xp-box { outline: 3px solid var(--focus); outline-offset: 2px; }
.xp-grid-note { margin: .8rem 0 0; font-size: .78rem; color: var(--ink-soft); }
.xp-actions { display: flex; justify-content: center; margin-top: 1.3rem; }
.xp-go {
  position: relative; overflow: hidden; display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .9rem 2.4rem; border: 0; border-radius: 999px; cursor: pointer; color: #fff; font: inherit; font-weight: 800; font-size: 1.15rem;
  background: linear-gradient(120deg, var(--coral), var(--marigold), var(--coral)); background-size: 200% 100%;
  box-shadow: 0 16px 28px -14px var(--coral); animation: xpShine 4s linear infinite;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.xp-go small { font-weight: 600; font-size: .72rem; opacity: .9; }
.xp-go:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 22px 34px -14px var(--coral); }
.xp-go:active { transform: scale(.97); }
.xp-go-ico { margin-inline-end: .4rem; }

/* sticky timer */
.xp-timer { position: relative; z-index: 5; background: linear-gradient(120deg, var(--sky-ink), color-mix(in srgb, var(--sky-ink) 70%, var(--leaf-ink))); color: #fff; animation: xpDrop .45s cubic-bezier(.2,.8,.2,1) both; }
.xp-timer[hidden] { display: none; }
.xp-timer-in { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .5rem 1rem; }
.xp-timer-lbl { flex: none; }
.xp-stop:not(.xp-report) { margin-inline-start: auto; }
.xp-report { display: none; margin-inline-start: auto; }
.xp-timer.is-done .xp-report { display: inline-block; }
.xp-timer.is-done .xp-stop:not(.xp-report) { margin-inline-start: 0; }
.xp-timer-lbl { font-weight: 700; font-size: .9rem; }
.xp-timer-clock { font: 800 1.6rem/1 ui-monospace, Consolas, monospace; letter-spacing: .04em; padding: .2rem .8rem; border-radius: 12px; background: rgba(255,255,255,.14); }
.xp-stop { border: 0; border-radius: 999px; padding: .4rem 1rem; font: inherit; font-weight: 700; cursor: pointer; background: #fff; color: var(--sky-ink); transition: transform .15s; }
.xp-stop:hover { transform: scale(1.06); }
.xp-timer-track { height: 5px; background: rgba(255,255,255,.2); }
.xp-timer-track i { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, var(--leaf), var(--marigold)); transition: transform .5s linear; }
.xp-timer.is-warn { background: linear-gradient(120deg, var(--coral-ink), #a63a2b); }
.xp-timer.is-warn .xp-timer-clock { animation: xpPulse 1s ease-in-out infinite; }
.xp-timer.is-warn .xp-timer-track i { background: var(--coral); }
.xp-timer.is-done { background: linear-gradient(120deg, var(--leaf-ink), #2f7a52); }
.xp-timer.is-done .xp-timer-clock { display: none; }
.xp-timer.is-done .xp-timer-lbl { flex: 1; }

@keyframes xpIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes xpDrop { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes xpShine { to { background-position: -200% 0; } }
@keyframes xpPulse { 50% { transform: scale(1.1); background: rgba(255,255,255,.3); } }

@media (max-width: 860px) {
  .xp-grid, .xp-cols { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .xp-chips-3 { grid-template-columns: 1fr; }
  .xp-chips-3 .xp-chip { flex-direction: row; text-align: start; }
  .xp-go { width: 100%; padding-inline: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .xp *, .xp-timer, .xp-timer * { animation: none !important; transition: none !important; }
}
@media print { .xp, .xp-timer { display: none !important; } }

/* ===== Exam mode : le texte devant toi (colonne de gauche) ===== */
.cdoc-app.xc-on .cdoc-langbar { display: none; }
.cdoc-app.xc-on .cdoc-sidebar > *:not(.xc-source) { display: none !important; }
.cdoc-app.xc-on .cdoc-sidebar { padding: .6rem; gap: 0; }
#cdoc-spell-ignore[hidden] { display: none !important; }

.xc-chips { display: flex; flex-wrap: wrap; gap: .3rem; flex: 1 1 auto; min-width: 0; }
.xc-chip {
  display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem .18rem .35rem; border-radius: 999px;
  font-size: .74rem; font-weight: 700; background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.28);
  transition: background .3s, color .3s, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.xc-tick { width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.6); display: grid; place-items: center; font-style: normal; font-size: .7rem; line-height: 1; }
.xc-chip.is-on { background: #fff; color: var(--leaf-ink); transform: scale(1.06); border-color: #fff; }
.xc-chip.is-on .xc-tick { background: var(--leaf); border-color: var(--leaf); color: #fff; }

.xc-source { text-align: start; display: flex; flex-direction: column; min-height: 0; flex: 1; font-size: .84rem; line-height: 1.45; color: var(--ink); animation: xpIn .5s cubic-bezier(.2,.8,.2,1) both; }
.xc-source[dir="rtl"] { font-family: Amiri, Cairo, serif; font-size: .98rem; }
.xc-head { display: grid; grid-template-columns: 1fr auto; gap: .15rem .4rem; align-items: baseline; margin-bottom: .45rem; }
.xc-head strong { font-size: .8rem; }
.xc-count { font-size: .72rem; font-weight: 700; color: var(--ink-soft); }
.xc-prog { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--paper-line); overflow: hidden; }
.xc-prog i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--leaf), var(--marigold)); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.xc-scroll { flex: 1; min-height: 0; overflow: hidden auto; padding-inline-end: .1rem; }
.xc-blk { margin-bottom: .35rem; transition: max-height .6s ease, opacity .5s ease, margin .5s ease, transform .5s ease; max-height: 30rem; }
.xc-lbl { display: block; font: 800 .6rem/1 Nunito, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--sky); margin-bottom: .12rem; }
.xc-lbl:empty { display: none; }
.xc-p { margin: 0; overflow: hidden; max-height: 20rem; transition: max-height .6s ease, opacity .5s ease; }
.xc-p.is-gone { max-height: 0; opacity: 0; }
.xc-blk:has(> .xc-p.is-gone) { margin-bottom: 0; }
.xc-blk:has(> .xc-p.is-gone) > .xc-lbl { opacity: 0; height: 0; margin: 0; overflow: hidden; }

.xc-w {
  display: inline-block; vertical-align: bottom; white-space: nowrap; overflow: hidden; max-width: 14em;
  margin-inline-end: .28em; padding: 0 .12em; border-radius: 5px;
  transition: max-width .5s cubic-bezier(.2,.8,.2,1), opacity .35s ease, margin .5s ease, padding .5s ease, background .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.xc-w.is-done { max-width: 0; opacity: 0; margin-inline-end: 0; padding: 0; transform: scale(.4); }
.xc-w.is-next { background: color-mix(in srgb, var(--marigold) 45%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--marigold) 65%, transparent); animation: xcCue 1.2s ease-in-out infinite; }
.xc-w.is-bad { background: color-mix(in srgb, var(--coral) 24%, transparent); color: var(--coral-ink); font-weight: 800; animation: xcShake .4s ease; }
.xc-w.is-miss { background: color-mix(in srgb, var(--marigold) 30%, transparent); outline: 2px dashed var(--coral); outline-offset: 1px; }
.xc-tbl { border-collapse: collapse; margin: .1rem 0; font-size: .95em; }
.xc-tbl td { border: 1.5px solid var(--paper-line); padding: .1rem .5rem; min-width: 3.4rem; height: 1.5rem; background: var(--card-bg); }
.xc-c { display: inline-block; transition: opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }
.xc-c.is-done { opacity: 0; transform: scale(.3); }
.xc-tblk.is-gone, .xc-iblk.is-gone { max-height: 0; opacity: 0; margin: 0; overflow: hidden; transform: scale(.9); }
.xc-img { margin: 0; }
.xc-img img { display: block; width: 100%; height: 4.6rem; object-fit: cover; border-radius: 10px; border: 2px solid var(--paper-line); animation: xcCueBorder 1.6s ease-in-out infinite; }
.xc-img figcaption { font-size: .7rem; color: var(--ink-soft); margin-top: .15rem; }
.xc-done-msg { display: none; margin: .4rem 0 0; padding: .5rem; text-align: center; font-weight: 800; border-radius: 12px; background: color-mix(in srgb, var(--leaf) 22%, var(--card-bg)); color: var(--leaf-ink); animation: xpIn .5s cubic-bezier(.2,.8,.2,1) both; }
.xc-source.is-complete .xc-done-msg { display: block; }
.xc-tip { margin: .35rem 0 0; font-size: .68rem; color: var(--ink-soft); }
.xp-thumb { display: block; width: 100%; max-width: 16rem; height: 5.5rem; object-fit: cover; border-radius: 10px; border: 2px dashed #b9b3a0; }

@keyframes xcCue { 50% { background: color-mix(in srgb, var(--marigold) 75%, transparent); } }
@keyframes xcShake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes xcCueBorder { 50% { border-color: var(--marigold); } }
@media (max-width: 920px) { .cdoc-app.xc-on .cdoc-sidebar { flex-direction: column; } }

/* The panel never changes the editor's size: it fills the sidebar column that already exists. */
.cdoc-app.xc-on .cdoc-sidebar { position: relative; }
.cdoc-app.xc-on .xc-source { position: absolute; inset: .6rem; }
.xc-source.is-dense { font-size: .76rem; line-height: 1.34; }
.xc-source.is-dense[dir="rtl"] { font-size: .9rem; }
.xc-source.is-dense .xc-blk { margin-bottom: .22rem; }
.xc-source.is-dense .xc-img img { height: 3.4rem; }
.xc-source.is-dense .xc-img figcaption { display: none; }
.xc-source.is-dense .xc-tbl td { height: 1.25rem; padding: 0 .4rem; }

/* ===== Fenêtre de correction (note /20) ===== */
.xr-back { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem 1rem; background: color-mix(in srgb, var(--ink) 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: xrFade .3s ease both; }
.xr-card { width: min(56rem, 100%); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); padding: 1.4rem 1.5rem 1.2rem; border-radius: 26px; background: linear-gradient(170deg, color-mix(in srgb, var(--sky) 9%, var(--card-bg)), var(--card-bg) 45%); border: 2px solid var(--paper-line); box-shadow: 0 40px 70px -30px rgba(0,0,0,.55); animation: xpIn .5s cubic-bezier(.2,.8,.2,1) both; color: var(--ink); display: flex; flex-direction: column; overflow: hidden; }
.xr-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-inline-end: .3rem; }
.xr-card h2 { margin: 0 0 .8rem; font-size: 1.35rem; }
.xr-card h3 { margin: 1rem 0 .4rem; font-size: .95rem; }
.xr-top { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.xr-ring { --p: 0%; flex: none; width: 8.2rem; height: 8.2rem; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--leaf) var(--p), var(--paper-line) 0); box-shadow: 0 14px 30px -16px hsl(var(--shadow) / .6); animation: xrRing 1.1s cubic-bezier(.2,.8,.2,1) both; }
.xr-ring > div { width: 6.6rem; height: 6.6rem; border-radius: 50%; background: var(--card-bg); display: grid; place-items: center; align-content: center; text-align: center; line-height: 1.05; }
.xr-ring b { font: 800 2.2rem/1 Fredoka, Nunito, sans-serif; color: var(--sky-ink); }
.xr-ring small { font-weight: 800; color: var(--ink-soft); }
.xr-ring em { font-style: normal; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.xr-band { flex: 1 1 14rem; margin: 0; padding: .8rem 1rem; border-radius: 16px; font-weight: 800; font-size: 1.05rem; background: color-mix(in srgb, var(--leaf) 20%, var(--card-bg)); color: var(--leaf-ink); }
.xr-b0 { background: color-mix(in srgb, var(--marigold) 26%, var(--card-bg)); color: var(--marigold-ink); }
.xr-b1 { background: color-mix(in srgb, var(--sky) 20%, var(--card-bg)); color: var(--sky-ink); }
.xr-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 1.6rem; }
.xr-good, .xr-tips, .xr-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.xr-good li, .xr-tips li { padding: .5rem .75rem; border-radius: 12px; font-size: .9rem; line-height: 1.45; }
.xr-good li { background: color-mix(in srgb, var(--leaf) 16%, var(--card-bg)); }
.xr-tips { counter-reset: t; }
.xr-tips li { background: color-mix(in srgb, var(--marigold) 18%, var(--card-bg)); }
.xr-none { margin: 0; font-weight: 700; color: var(--leaf-ink); }
.xr-rows li { display: grid; grid-template-columns: 1fr 5.5rem auto; gap: .6rem; align-items: center; font-size: .85rem; animation: xpIn .4s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 45ms + 250ms); }
.xr-bar { height: .55rem; border-radius: 999px; background: var(--paper-line); overflow: hidden; }
.xr-bar i { display: block; height: 100%; width: var(--w); border-radius: 999px; transform-origin: left; animation: xrGrow .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: .5s; }
[dir="rtl"] .xr-bar i { transform-origin: right; }
.xr-bar.full i { background: var(--leaf); } .xr-bar.mid i { background: var(--marigold); } .xr-bar.low i { background: var(--coral); }
.xr-p { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xr-hint { margin: .7rem 0 0; font-size: .74rem; color: var(--ink-soft); }
.xr-actions { flex: none; padding-top: .8rem; border-top: 1px solid var(--paper-line); display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: .8rem; }
.xr-btn { border: 0; border-radius: 999px; padding: .7rem 1.5rem; font: inherit; font-weight: 800; cursor: pointer; color: #fff; background: linear-gradient(120deg, var(--coral), var(--marigold)); box-shadow: 0 12px 22px -12px var(--coral); transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.xr-btn:hover { transform: translateY(-2px) scale(1.03); } .xr-btn:active { transform: scale(.97); }
.xr-ghost { color: var(--sky-ink); background: var(--card-bg); border: 2px solid var(--paper-line); box-shadow: none; }
.xr-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@keyframes xrFade { from { opacity: 0; } }
@keyframes xrGrow { from { transform: scaleX(0); } }
@keyframes xrRing { from { background: conic-gradient(var(--leaf) 0%, var(--paper-line) 0); } }
@media (max-width: 760px) { .xr-cols { grid-template-columns: 1fr; } .xr-rows li { grid-template-columns: 1fr 4rem auto; } }
@media (prefers-reduced-motion: reduce) { .xr-back, .xr-card, .xr-ring, .xr-rows li, .xr-bar i { animation: none !important; } }
@media print { .xr-back { display: none !important; } }

/* ===== Choix du texte (5ème année) ===== */
.xp-text-group { margin-top: 1rem; }
.xp-text-row { display: flex; gap: .7rem; flex-wrap: wrap; }
.xp-select { flex: 1 1 18rem; min-width: 0; padding: .7rem 1rem; border-radius: 16px; border: 2px solid var(--paper-line); background: var(--card-bg); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.xp-select:hover:not(:disabled) { border-color: var(--sky); box-shadow: 0 10px 22px -14px hsl(var(--shadow) / .5); }
.xp-select:focus-visible, .xp-dice:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.xp-select:disabled, .xp-dice:disabled { opacity: .55; cursor: not-allowed; }
.xp-dice { border: 2px solid var(--paper-line); border-radius: 16px; padding: .7rem 1.1rem; background: linear-gradient(120deg, color-mix(in srgb, var(--marigold) 30%, var(--card-bg)), var(--card-bg)); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; }
.xp-dice:hover:not(:disabled) { transform: translateY(-2px) rotate(-2deg); box-shadow: 0 12px 22px -14px hsl(var(--shadow) / .5); }