/* Number Duel shares the arena palette, with cyan reserved for the player. */
.duel-page { --duel-muted: #a4aec5; }
.duel-page [hidden] { display: none !important; }
.duel-page button, .duel-page a, .duel-page summary { -webkit-tap-highlight-color: transparent; }
.duel-page button { font: inherit; }
.duel-page button:focus-visible, .duel-page a:focus-visible, .duel-page summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.duel-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .6rem 0 2rem; }
.duel-eyebrow, .duel-kicker { font: 700 .65rem/1.5 var(--mono); letter-spacing: .15em; color: var(--duel-muted); }
.duel-eyebrow { display: flex; align-items: center; gap: .65rem; }
.duel-live-dot { width: 7px; height: 7px; background: var(--cyan); box-shadow: 0 0 12px #31c8e650; border-radius: 50%; }
.duel-hero h1 { font: italic 950 clamp(2.7rem, 7.5vw, 5.1rem)/1 var(--display); letter-spacing: -.055em; margin: .7rem 0 .7rem; }
.duel-hero h1 span { color: var(--cyan); }
.duel-hero p { color: var(--duel-muted); margin: 0; font-size: 1.02rem; }
.duel-hero p strong { color: var(--ink); font-weight: 600; }
.duel-hero-mark { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; transform: rotate(-10deg); margin-right: .8rem; }
.duel-hero-mark span { display: grid; place-items: center; width: 47px; height: 47px; border: 1px solid #263144; border-radius: 9px; font: 400 1.8rem/1 var(--mono); color: #586883; background: #101620; }
.duel-hero-mark span:nth-child(3) { background: var(--cyan); color: #09212a; border-color: var(--cyan); }
.duel-modebar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.duel-tabs { display: flex; padding: 4px; background: #080a10; border: 1px solid var(--line); border-radius: 8px; gap: 4px; flex-shrink: 0; }
.duel-tabs a { padding: .55rem 1.1rem; color: var(--duel-muted); font-size: .82rem; font-weight: 700; border-radius: 5px; }
.duel-tabs a:hover { text-decoration: none; color: var(--ink); }
.duel-tabs .is-active { background: #223140; color: #c1f3fc; box-shadow: inset 0 0 0 1px #3b6573; }
.duel-edition { font: .6rem/1.5 var(--mono); letter-spacing: .05em; color: var(--duel-muted); text-align: right; }
.duel-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.duel-arena { background: #121720; border: 1px solid #2a3547; border-radius: 12px; overflow: hidden; min-width: 0; }
.duel-target-zone { background: radial-gradient(ellipse at 50% 135%, #1e586044, transparent 72%), repeating-linear-gradient(0deg, transparent, transparent 23px, #ffffff03 24px), #101822; padding: 1.2rem 1.5rem 1.25rem; border-bottom: 1px solid #263345; text-align: center; }
.duel-target-meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; text-align: left; }
.duel-target-meta .duel-kicker { color: var(--cyan); }
.duel-no-clock { color: var(--duel-muted); font-size: .68rem; }
.duel-target { font: 750 clamp(4.8rem, 10vw, 6.8rem)/1.1 var(--mono); color: var(--ink); letter-spacing: -.075em; padding: .5rem .075em .15rem 0; text-shadow: 0 2px 35px #31c8e610; }
.duel-target-zone > p { color: var(--duel-muted); font-size: .75rem; margin: .2rem 0 0; }
.duel-workbench, .duel-finished { padding: 1.35rem 1.5rem 1.5rem; }
.duel-board-heading { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .85rem; }
.duel-board-heading h2 { font-size: .85rem; margin: 0; font-weight: 700; }
.duel-board-heading > span { font: .64rem var(--mono); color: var(--duel-muted); }
.duel-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .55rem; min-height: 69px; }
.duel-page .duel-tile { position: relative; min-width: 0; min-height: 69px; padding: .35rem .12rem .55rem; background: linear-gradient(180deg, #243345, #1a2736); border: 1px solid #3c526a; border-bottom: 3px solid #101a27; border-radius: 8px; color: #f6f9ff; font: 700 clamp(1.05rem, 2.1vw, 1.65rem)/1.2 var(--mono); cursor: pointer; transition: background .12s, border-color .12s, transform .12s; overflow-wrap: anywhere; }
.duel-page .duel-tile:hover { border-color: #6e9db3; background: #2a4054; }
.duel-page .duel-tile.is-selected { color: #06222b; border-color: #88eaff; background: var(--cyan); transform: translateY(-3px); box-shadow: 0 4px 20px #31c8e622; }
.duel-page .duel-tile.is-created { border-color: #55756b; background: #1c3536; }
.duel-page .duel-tile.is-created.is-selected { background: var(--cyan); color: #06222b; }
.duel-tile .duel-tile-tag { display: block; margin-top: .3rem; font: .52rem/1 var(--mono); color: #b3c7d4; letter-spacing: .02em; }
.duel-tile.is-selected .duel-tile-tag { color: #113e49; }
.duel-tile.is-large { font-size: 1rem; }
.duel-operators { display: flex; justify-content: center; gap: .7rem; margin: 1.1rem 0 .85rem; }
.duel-operators button { display: grid; place-items: center; width: 54px; height: 47px; border-radius: 7px; border: 1px solid #344256; background: #19212e; color: #dee9f6; font: 400 1.55rem/1 var(--mono); cursor: pointer; }
.duel-operators button:hover { border-color: var(--cyan); }
.duel-operators button[aria-pressed="true"] { color: #09222a; background: var(--cyan); border-color: #95ecff; }
.duel-operators button:disabled { opacity: .4; cursor: default; }
.duel-instruction { color: #bec9db; font-size: .75rem; text-align: center; min-height: 2.5em; margin: 0; }
.duel-instruction.is-error { color: #ffb5a5; }
.duel-tools { display: flex; align-items: center; gap: 1rem; padding: .3rem 0 1rem; }
.duel-page .duel-text-button { border: 0; background: none; color: #d0d8e5; padding: .45rem 0; font-size: .72rem; cursor: pointer; }
.duel-page .duel-text-button:disabled { color: #66768a; cursor: default; }
.duel-tools > span { margin-left: auto; color: var(--duel-muted); font: .6rem var(--mono); }
.duel-current { border: 1px solid #334050; border-radius: 8px; padding: .8rem 1rem; background: #0d131c; margin-bottom: 1rem; }
.duel-current > div:first-child { display: flex; align-items: center; gap: .8rem; }
.duel-current .duel-kicker { font-size: .57rem; letter-spacing: .1em; }
.duel-current strong { color: var(--cyan); font: 700 1.8rem/1.3 var(--mono); overflow-wrap: anywhere; }
.duel-current #duel-best-distance { margin-left: auto; font: .65rem/1.4 var(--mono); color: #b8c7d8; text-align: right; }
.duel-current.is-exact { border-color: #3ad17a80; background: #102319; }
.duel-current.is-exact strong, .duel-current.is-exact #duel-best-distance { color: #74eda5; }
.duel-best-expression { display: flex; justify-content: space-between; gap: .7rem; font: .69rem/1.6 var(--mono); color: var(--duel-muted); margin-top: .3rem; }
.duel-best-expression > span { overflow-wrap: anywhere; min-width: 0; }
.duel-best-expression small { white-space: nowrap; font-size: .6rem; }
.duel-page .duel-primary, .duel-page .duel-secondary { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .8rem 1.15rem; border: 1px solid #80e6fa; border-radius: 7px; background: var(--cyan); color: #062530; font-size: .86rem; font-weight: 800; cursor: pointer; transition: background .15s; }
.duel-page .duel-primary { width: 100%; }
.duel-page .duel-primary:hover { background: #74dff3; }
.duel-page .duel-primary:disabled { cursor: wait; opacity: .65; }
.duel-page .duel-secondary { border-color: #3e5266; background: #1b2837; color: #d0edf7; font-size: .75rem; }
.duel-page .duel-secondary:hover { background: #293d50; }
.duel-submit-note { font-size: .65rem; text-align: center; line-height: 1.55; color: var(--duel-muted); margin: .7rem .4rem 0; }
.duel-scratch { border-top: 1px solid #2a3747; margin-top: 1rem; padding-top: .8rem; font-size: .74rem; }
.duel-scratch summary { color: #b7c7d9; cursor: pointer; padding: .25rem 0; }
.duel-scratch summary span { color: #8094ad; }
.duel-scratch ol { font: .78rem/1.85 var(--mono); padding-left: 1.7rem; margin-bottom: 0; color: #c5d5e4; overflow-wrap: anywhere; }
.duel-sidebar { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.duel-side-panel { background: #12151d; border: 1px solid #272e3e; border-radius: 10px; padding: 1.2rem 1.3rem; }
.duel-side-panel h2 { font-size: 1.12rem; line-height: 1.35; margin: .6rem 0 1rem; letter-spacing: -.02em; }
.duel-rules > ol { list-style: none; padding: 0; margin: 0; }
.duel-rules > ol li { display: flex; gap: .8rem; align-items: baseline; margin: .9rem 0; }
.duel-rules > ol li > span { font: .65rem var(--mono); color: var(--cyan); }
.duel-rules li p { margin: 0; font-size: .77rem; color: #a8b4ca; line-height: 1.65; }
.duel-rules li strong { color: #d8e0ee; font-weight: 600; }
.duel-rules-details { border-top: 1px solid #272e3e; padding-top: .6rem; }
.duel-rules-details summary { font-size: .72rem; color: #c4d0e2; cursor: pointer; padding: .3rem 0; }
.duel-rules-details p { font-size: .73rem; color: var(--duel-muted); }
.duel-record-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin: .7rem 0; }
.duel-record-grid > div { display: flex; flex-direction: column; }
.duel-record-grid b { font: 700 1.6rem/1.4 var(--mono); color: #f1f5fb; }
.duel-record-grid span { font: .47rem var(--mono); color: #a8b3c7; letter-spacing: .025em; }
.duel-record-note, .duel-storage-note { font-size: .7rem; color: var(--duel-muted); margin: .75rem 0 0; }
.duel-storage-note { color: #ffc68d; }
.duel-refresh { padding: .2rem 1.3rem .7rem; display: flex; flex-direction: column; gap: .3rem; }
.duel-refresh b { font: 600 1.2rem var(--mono); color: #d5deef; }
.duel-refresh > span:last-child, .duel-refresh p { color: #96a5bc; font-size: .65rem; margin: 0; }
.duel-refresh a { font-size: .8rem; font-weight: 700; }
.duel-house { margin-top: 2.1rem; }
.duel-house-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.duel-house-heading .duel-eyebrow { font-size: .58rem; color: #8f9bb2; }
.duel-house h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.04em; margin: .35rem 0 0; }
.duel-house-badge { font: .53rem var(--mono); letter-spacing: .07em; color: #b2a3b4; border: 1px solid #493342; padding: .4rem .55rem; border-radius: 4px; white-space: nowrap; }
.duel-house-locked { display: flex; align-items: center; gap: 1.5rem; border: 1px dashed #3d3444; background: linear-gradient(100deg, #241b273b, #12141b); border-radius: 10px; padding: 1.4rem 1.7rem; }
.duel-locked-mark { display: grid; flex-shrink: 0; place-items: center; width: 53px; height: 61px; border: 1px solid #594059; background: #2c2130; border-radius: 8px; color: #c895cc; transform: rotate(-7deg); font: 700 1.8rem var(--mono); }
.duel-house-locked h3 { font-size: .9rem; font-weight: 650; margin: 0 0 .4rem; }
.duel-house-locked p, .duel-house-intro { color: var(--duel-muted); font-size: .78rem; line-height: 1.75; margin: 0; max-width: 80ch; }
.duel-house-intro { margin: 0 0 1.2rem; }
.duel-house-intro strong { color: var(--ink); }
.duel-originals { display: flex; gap: .4rem; margin-bottom: 1.3rem; flex-wrap: wrap; }
.duel-originals span { display: grid; place-items: center; min-width: 35px; height: 33px; padding: 0 .3rem; border: 1px solid #344458; border-radius: 4px; color: #9eb3cc; background: #182330; font: .75rem var(--mono); }
.duel-finished h2 { font: 800 1.7rem/1.2 var(--display); letter-spacing: -.025em; margin: .55rem 0 1rem; }
.duel-result-line { display: flex; align-items: center; gap: 1.2rem; }
.duel-result-line > strong { color: var(--cyan); font: 700 3.5rem/1 var(--mono); letter-spacing: -.06em; overflow-wrap: anywhere; }
.duel-result-line > strong.is-exact { color: var(--green); }
.duel-result-line > span { font: .65rem/1.8 var(--mono); color: #b9c7db; }
.duel-result-expression { font: .8rem/1.7 var(--mono); color: #afc2d8; overflow-wrap: anywhere; }
.duel-share { margin-top: 1.2rem; }
.duel-share > p { font-size: .68rem; color: var(--duel-muted); margin: .55rem 0; }
.duel-share-text { box-sizing: border-box; display: block; width: 100%; padding: .7rem; background: #0b111b; border: 1px solid #34455a; border-radius: 6px; color: var(--ink); font: .72rem/1.65 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; resize: vertical; }
.duel-practice-link { display: block; font-size: .76rem; line-height: 1.6; margin-top: 1.1rem; }
.duel-new-practice { padding: 1rem 1.5rem; border-top: 1px solid #293647; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.duel-new-practice > span { font-size: .65rem; color: var(--duel-muted); }
.duel-rivals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.duel-rival { min-width: 0; display: flex; flex-direction: column; background: #141820; border: 1px solid #2b3544; border-radius: 9px; padding: 1rem; }
.duel-rival-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.duel-rival-emoji { font-size: 1.55rem; }
.duel-outcome { font: 700 .5rem var(--mono); letter-spacing: .04em; color: #ddacbb; padding: .28rem .35rem; background: #39222c; border-radius: 4px; }
.duel-outcome-beat .duel-outcome { color: #91eeb5; background: #1b3728; }
.duel-outcome-tied .duel-outcome { color: #9bdff1; background: #203742; }
.duel-rival h3 { font-size: .95rem; margin: .65rem 0 .15rem; }
.duel-rival-signature { color: #96a7bd; font-size: .63rem; margin: 0; line-height: 1.5; }
.duel-rival-score { display: flex; align-items: center; gap: .65rem; margin: .8rem 0 .4rem; }
.duel-rival-score b { color: #e8effa; font: 700 1.85rem var(--mono); letter-spacing: -.06em; overflow-wrap: anywhere; }
.duel-rival-score span { color: #bdc9dc; font-size: .62rem; line-height: 1.6; }
.duel-rival-reaction { font-size: .73rem; line-height: 1.6; color: #d1dceb; margin: .5rem 0; }
.duel-rival-strategy { color: #a6b3c9; font-size: .7rem; line-height: 1.65; margin: .35rem 0 .9rem; }
.duel-rival-solution { border-top: 1px solid #2b3544; margin-top: auto; padding-top: .65rem; }
.duel-rival-solution summary { color: #bbdce7; cursor: pointer; font-size: .68rem; padding: .2rem 0; }
.duel-rival-solution p, .duel-rival-solution ol { color: #b0c4db; font: .65rem/1.7 var(--mono); overflow-wrap: anywhere; }
.duel-rival-solution ol { padding-left: 1.3rem; }
.duel-error { border: 1px solid #804951; background: #351e24; color: #ffd4d4; padding: .9rem 1rem; border-radius: 7px; margin-bottom: 1rem; font-size: .82rem; }
.duel-noscript { padding: 1.5rem; color: #c4d2e6; font-size: .88rem; }
@media (max-width: 850px) {
  .duel-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; }
  .duel-workbench, .duel-finished, .duel-target-zone { padding-left: 1rem; padding-right: 1rem; }
  .duel-tiles { gap: .35rem; }
  .duel-side-panel { padding: 1.05rem; }
  .duel-record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .65rem; }
  .duel-rivals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duel-edition > span { display: none; }
}
@media (max-width: 640px) {
  .duel-hero { margin-top: 0; margin-bottom: 1.5rem; }
  .duel-hero h1 { font-size: clamp(2.3rem, 10vw, 3.5rem); }
  .duel-hero p { font-size: .82rem; max-width: 30ch; }
  .duel-hero-mark { gap: 3px; margin-right: .2rem; }
  .duel-hero-mark span { width: 30px; height: 30px; font-size: 1.2rem; border-radius: 6px; }
  .duel-eyebrow { font-size: .54rem; letter-spacing: .1em; }
  .duel-layout { grid-template-columns: minmax(0, 1fr); }
  .duel-modebar { gap: .6rem; }
  .duel-tabs a { font-size: .74rem; padding: .5rem .8rem; }
  .duel-edition { font-size: .53rem; max-width: 15ch; }
  .duel-target { font-size: 5.4rem; }
  .duel-target-zone { padding-top: 1rem; padding-bottom: .9rem; }
  .duel-workbench { padding-top: 1.1rem; }
  .duel-tiles { gap: .45rem; }
  .duel-page .duel-tile { min-height: 63px; font-size: clamp(1.15rem, 4.8vw, 1.55rem); }
  .duel-page .duel-tile.is-large { font-size: .88rem; }
  .duel-sidebar { display: grid; grid-template-columns: minmax(0, 1fr); }
  .duel-record-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .duel-rules h2 br { display: none; }
  .duel-rules > ol li { margin: .65rem 0; }
  .duel-house { margin-top: 1.6rem; }
  .duel-house-heading { align-items: start; }
  .duel-house-badge { font-size: .46rem; max-width: 13ch; white-space: normal; text-align: center; line-height: 1.5; }
  .duel-house-locked { padding: 1.1rem; gap: 1rem; }
  .duel-locked-mark { width: 40px; height: 49px; font-size: 1.5rem; }
  .duel-house-locked p { font-size: .72rem; }
  .duel-rival { padding: .85rem; }
  .duel-rival-score { gap: .5rem; }
  .duel-rival-score b { font-size: 1.6rem; }
}
@media (max-width: 360px) {
  .duel-hero-mark { display: none; }
  .duel-tiles { gap: .3rem; }
  .duel-page .duel-tile { font-size: 1rem; min-height: 59px; }
  .duel-tile .duel-tile-tag { font-size: .42rem; }
  .duel-current { padding: .7rem; }
  .duel-current > div:first-child { gap: .5rem; }
  .duel-current .duel-kicker { font-size: .5rem; }
  .duel-rivals { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .duel-page *, .duel-page *::before, .duel-page *::after { transition: none !important; animation: none !important; }
}