#word-duel-arena {
    --duel-bg: light-dark(#f5f5f2, #161817);
    --duel-panel: light-dark(#ffffff, #202321);
    --duel-ink: light-dark(#1d2521, #eff4ef);
    --duel-muted: light-dark(#626d65, #b0bab2);
    --duel-line: light-dark(#dfe4dd, #3a423c);
    --duel-green: light-dark(#336345, #a0d4a9);
    --duel-green-bg: light-dark(#eaf3e9, #2b3e2f);
    --duel-orange: light-dark(#ad3c1d, #ffa98a);
    --duel-orange-bg: light-dark(#fff0e9, #452c24);
    --duel-action: light-dark(#253e2e, #bce1c1);
    --duel-action-text: light-dark(#ffffff, #182c1d);
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--duel-ink);
    width: 100%;
    background: transparent;
  }
  #word-duel-arena * { box-sizing: border-box; }
  #word-duel-arena button, #word-duel-arena input { font: inherit; }
  #word-duel-arena button, #word-duel-arena summary { cursor: pointer; }
  #word-duel-arena button:disabled { cursor: wait; opacity: .65; }
  #word-duel-arena .duel-shell { background: var(--duel-bg); border: 1px solid var(--duel-line); border-radius: 20px; overflow: hidden; }
  #word-duel-arena .duel-header { padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--duel-line); flex-wrap: wrap; }
  #word-duel-arena .duel-brand { display: flex; align-items: center; gap: 12px; }
  #word-duel-arena .duel-brand-icon { display: grid; place-items: center; width: 38px; height: 38px; background: var(--duel-action); color: var(--duel-action-text); border-radius: 10px; }
  #word-duel-arena h2, #word-duel-arena h3, #word-duel-arena p { margin: 0; }
  #word-duel-arena h2 { font-size: 19px; font-weight: 500; letter-spacing: -.6px; }
  #word-duel-arena .duel-subtitle { font-size: 12px; color: var(--duel-muted); }
  #word-duel-arena .duel-mode { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--duel-orange); }
  #word-duel-arena .duel-main { padding: 24px 26px; }
  #word-duel-arena .duel-scoreboard { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px; padding: 2px 10px 24px; }
  #word-duel-arena .duel-player { display: flex; align-items: center; gap: 12px; min-width: 0; }
  #word-duel-arena .duel-player-right { justify-content: flex-end; text-align: right; }
  #word-duel-arena .duel-avatar { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; color: var(--duel-green); background: var(--duel-green-bg); }
  #word-duel-arena .duel-player-right .duel-avatar { color: var(--duel-orange); background: var(--duel-orange-bg); }
  #word-duel-arena .duel-player-name { font-size: 17px; font-weight: 500; }
  #word-duel-arena .duel-player-note { font-size: 12px; color: var(--duel-muted); }
  #word-duel-arena .duel-score { display: flex; align-items: center; gap: 16px; font-size: 42px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -2px; }
  #word-duel-arena .duel-score-separator { color: var(--duel-muted); font-size: 22px; }
  #word-duel-arena .duel-match-grid { display: grid; grid-template-columns: minmax(0, 1fr) 192px; gap: 14px; }
  #word-duel-arena .duel-stage { min-width: 0; border: 1px solid var(--duel-line); background: var(--duel-panel); border-radius: 16px; padding: 22px; }
  #word-duel-arena .duel-stage-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  #word-duel-arena .duel-round { font-size: 12px; color: var(--duel-muted); letter-spacing: .7px; }
  #word-duel-arena .duel-turn { border-radius: 6px; padding: 4px 9px; font-size: 12px; background: var(--duel-green-bg); color: var(--duel-green); }
  #word-duel-arena .duel-word-area { text-align: center; padding: 30px 0 24px; }
  #word-duel-arena .duel-word-label { color: var(--duel-muted); font-size: 12px; }
  #word-duel-arena .duel-word { font-size: 68px; font-weight: 500; line-height: 1.25; letter-spacing: -4px; margin: 7px 0 14px; }
  #word-duel-arena .duel-word em { color: var(--duel-orange); font-style: normal; }
  #word-duel-arena .duel-next { color: var(--duel-muted); }
  #word-duel-arena .duel-next strong { font-weight: 500; color: var(--duel-orange); }
  #word-duel-arena .duel-entry { border-top: 1px solid var(--duel-line); padding-top: 18px; }
  #word-duel-arena .duel-entry label { display: block; font-size: 12px; color: var(--duel-muted); margin-bottom: 7px; }
  #word-duel-arena .duel-input-row { display: flex; gap: 8px; }
  #word-duel-arena .duel-input { width: 100%; min-width: 0; border: 1px solid var(--duel-line); border-radius: 9px; padding: 11px 12px; background: var(--duel-bg); color: var(--duel-ink); font-size: 16px; }
  #word-duel-arena .duel-input::placeholder { color: var(--duel-muted); }
  #word-duel-arena .duel-submit { white-space: nowrap; border: none; border-radius: 9px; padding: 11px 16px; background: var(--duel-action); color: var(--duel-action-text); font-weight: 500; }
  #word-duel-arena .duel-entry-footer { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 9px; }
  #word-duel-arena .duel-entry-note { color: var(--duel-muted); font-size: 12px; }
  #word-duel-arena .duel-concede { display: inline-flex; align-items: center; gap: 4px; background: transparent; color: var(--duel-muted); border: none; padding: 5px 0 5px 8px; white-space: nowrap; font-size: 12px; }
  #word-duel-arena .duel-message { margin-top: 10px; font-size: 12px; color: var(--duel-green); overflow-wrap: anywhere; }
  #word-duel-arena .duel-error { color: var(--duel-orange); }
  #word-duel-arena .duel-message:empty { display: none; }
  #word-duel-arena .duel-side { border: 1px solid var(--duel-line); background: var(--duel-panel); border-radius: 16px; padding: 18px 16px; }
  #word-duel-arena .duel-side h3 { font-size: 13px; font-weight: 500; }
  #word-duel-arena .duel-rules { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; color: var(--duel-muted); font-size: 12px; }
  #word-duel-arena .duel-rules li { display: flex; align-items: flex-start; gap: 7px; }
  #word-duel-arena .duel-rules i, #word-duel-arena .duel-rules svg { flex-shrink: 0; margin-top: 1px; }
  #word-duel-arena .duel-rules .duel-rule-attack { color: var(--duel-orange); }
  #word-duel-arena .duel-current-log { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--duel-line); }
  #word-duel-arena .duel-log-step { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
  #word-duel-arena .duel-step-number { font-size: 12px; color: var(--duel-muted); font-variant-numeric: tabular-nums; }
  #word-duel-arena .duel-step-name { font-size: 12px; color: var(--duel-muted); }
  #word-duel-arena .duel-step-word { font-size: 15px; font-weight: 500; }
  #word-duel-arena .duel-waiting { color: var(--duel-green); }
  #word-duel-arena .duel-history { margin-top: 18px; border-top: 1px solid var(--duel-line); padding-top: 16px; }
  #word-duel-arena .duel-history summary { font-size: 12px; color: var(--duel-muted); padding: 4px 0; }
  #word-duel-arena .duel-history summary span { color: var(--duel-ink); margin-left: 7px; }
  #word-duel-arena .duel-history-list { padding: 14px 0 0; margin: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; }
  #word-duel-arena .duel-history-list li { display: grid; grid-template-columns: 20px 42px minmax(0, 1fr); gap: 6px; align-items: baseline; padding: 6px 0; font-size: 12px; }
  #word-duel-arena .duel-history-list .duel-history-number, #word-duel-arena .duel-history-list .duel-history-player { color: var(--duel-muted); }
  #word-duel-arena .duel-history-list .duel-history-word { overflow-wrap: anywhere; font-size: 14px; }
  #word-duel-arena .duel-history-final { color: var(--duel-green); }
  #word-duel-arena .duel-bottom { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-top: 17px; color: var(--duel-muted); font-size: 11px; }
  @media (max-width: 620px) {
    #word-duel-arena .duel-header { padding: 18px; }
    #word-duel-arena .duel-main { padding: 18px; }
    #word-duel-arena .duel-match-grid { grid-template-columns: minmax(0, 1fr); }
    #word-duel-arena .duel-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
    #word-duel-arena .duel-current-log { margin: 0; padding: 0 0 0 18px; border-top: none; border-left: 1px solid var(--duel-line); }
    #word-duel-arena .duel-scoreboard { gap: 10px; padding-left: 0; padding-right: 0; }
    #word-duel-arena .duel-avatar { display: none; }
    #word-duel-arena .duel-score { gap: 12px; font-size: 36px; }
    #word-duel-arena .duel-player-name { font-size: 15px; }
    #word-duel-arena .duel-player-note { font-size: 11px; }
  }
  @media (max-width: 380px) {
    #word-duel-arena .duel-header, #word-duel-arena .duel-main { padding: 14px; }
    #word-duel-arena .duel-stage { padding: 16px; }
    #word-duel-arena .duel-input-row { flex-direction: column; }
    #word-duel-arena .duel-history-list { grid-template-columns: minmax(0, 1fr); }
    #word-duel-arena .duel-side { padding: 16px 12px; gap: 12px; }
    #word-duel-arena .duel-current-log { padding-left: 12px; }
  }
  @media (pointer: coarse) {
    #word-duel-arena button, #word-duel-arena summary { min-height: 44px; }
  }


  html, body { color-scheme: light dark; margin: 0; min-height: 100%; background: light-dark(#f5f5f2, #161817); }
  body { padding: 24px 14px !important; }
  #word-duel-arena { max-width: 900px; margin: auto; font-size: 16px; }
  #word-duel-arena .duel-shell { overflow: visible; }
  #word-duel-arena h2 { font-size: 22px; }
  #word-duel-arena .duel-rules, #word-duel-arena .duel-mode,
  #word-duel-arena .duel-side h3, #word-duel-arena .duel-entry label,
  #word-duel-arena .duel-turn, #word-duel-arena .duel-next,
  #word-duel-arena .duel-step-name, #word-duel-arena .duel-concede,
  #word-duel-arena .duel-word-label { font-size: 14px; }
  #word-duel-arena .duel-bottom, #word-duel-arena .duel-player-note,
  #word-duel-arena .duel-subtitle, #word-duel-arena .duel-entry-note,
  #word-duel-arena .duel-message, #word-duel-arena .duel-history summary { font-size: 13px; }
  #word-duel-arena .duel-match-grid { grid-template-columns: minmax(0, 1fr) 220px; }
  #word-duel-arena .duel-word { overflow-wrap: anywhere; letter-spacing: 0; font-size: clamp(38px, 8vw, 68px); }
  #word-duel-arena .duel-log-step { align-items: flex-start; }
  #word-duel-arena .duel-log-step > div { min-width: 0; overflow-wrap: anywhere; }
  #word-duel-arena .duel-step-word { font-size: 15px; }
  #word-duel-arena a { color: var(--duel-green); }
  #word-duel-arena [hidden] { display: none !important; }
  #word-duel-arena .duel-dictionary-link { display: inline-block; font-size: 13px; margin-top: 10px; }
  #word-duel-arena .duel-next-round { display: block; width: 100%; margin-top: 14px; }
  #word-duel-arena .duel-result { margin: 12px 0 0; color: var(--duel-green); text-align: center; }
  #word-duel-arena .duel-category-toolbar { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
  #word-duel-arena .duel-category-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--duel-line); border-radius: 10px; }
  #word-duel-arena .duel-category-tab { border: 0; background: transparent; border-radius: 7px; color: var(--duel-muted); font: inherit; font-size: 14px; padding: 10px 12px; cursor: pointer; }
  #word-duel-arena .duel-category-tab[aria-selected="true"] { background: var(--duel-green); color: light-dark(#fff, #152018); font-weight: 650; }
  #word-duel-arena .duel-sound-button { border: 1px solid var(--duel-line); border-radius: 8px; background: transparent; color: var(--duel-green); font: inherit; font-size: 13px; padding: 9px 12px; cursor: pointer; }
  #word-duel-arena .duel-category-tab:focus-visible, #word-duel-arena .duel-sound-button:focus-visible { outline: 2px solid var(--duel-green); outline-offset: 3px; }
  #word-duel-arena .duel-finder { background: light-dark(#fff, #1c211e); border: 1px solid var(--duel-line); border-radius: 16px; padding: 24px; }
  #word-duel-arena .duel-finder-kicker { color: var(--duel-green); font-size: 13px; margin: 0 0 8px; }
  #word-duel-arena .duel-finder-heading { margin: 0 0 10px; font-size: 26px; letter-spacing: -.04em; }
  #word-duel-arena .duel-finder-intro { margin: 0 0 24px; color: var(--duel-muted); font-size: 16px; line-height: 1.65; }
  #word-duel-arena .duel-finder-form label { display: block; font-size: 14px; color: var(--duel-muted); margin-bottom: 8px; }
  #word-duel-arena .duel-finder-status { font-size: 15px; line-height: 1.65; margin: 22px 0 12px; color: var(--duel-green); }
  #word-duel-arena .duel-finder-status:empty { display: none; }
  #word-duel-arena .duel-finder-results { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
  #word-duel-arena .duel-finder-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--duel-line); border-left: 3px solid var(--duel-green); border-radius: 10px; padding: 15px 16px; background: light-dark(#f5f8f3, #222e25); }
  #word-duel-arena .duel-finder-card-content { min-width: 0; }
  #word-duel-arena .duel-finder-word { display: block; font-size: 22px; color: var(--duel-green); overflow-wrap: anywhere; }
  #word-duel-arena .duel-finder-tail { display: block; font-size: 13px; color: var(--duel-muted); margin-top: 5px; line-height: 1.5; }
  #word-duel-arena .duel-finder-source { font-size: 14px; white-space: nowrap; }
  #word-duel-arena .duel-finder-note { color: var(--duel-muted); font-size: 13px; line-height: 1.65; margin: 18px 0 0; }
  #word-duel-arena .duel-starter-controls { margin: 0 0 18px; padding: 14px; border: 1px solid var(--duel-line); border-radius: 10px; }
  #word-duel-arena .duel-starter-title { margin: 0 0 10px; color: var(--duel-muted); font-size: 14px; font-weight: 500; }
  #word-duel-arena .duel-starter-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #word-duel-arena .duel-starter-button { padding: 10px 8px; min-height: 42px; font: inherit; font-size: 14px; color: var(--duel-green); background: transparent; border: 1px solid var(--duel-line); border-radius: 8px; cursor: pointer; }
  #word-duel-arena .duel-starter-button[aria-pressed="true"] { background: var(--duel-green); border-color: var(--duel-green); color: light-dark(#fff, #152018); font-weight: 650; }
  #word-duel-arena .duel-starter-button:disabled { opacity: .5; cursor: default; }
  #word-duel-arena .duel-starter-button:focus-visible { outline: 2px solid var(--duel-green); outline-offset: 3px; }
  #word-duel-arena .duel-starter-note { margin: 8px 0 0; color: var(--duel-muted); font-size: 13px; line-height: 1.6; }
  #word-duel-arena .duel-error:not(:empty) { background: light-dark(#fff7f0, #30251f); border: 1px solid light-dark(#e8cfbb, #624937); border-radius: 10px; padding: 13px 14px; font-size: 14px; line-height: 1.7; }
  #word-duel-arena .duel-error-detail, #word-duel-arena .duel-error-note { display: block; }
  #word-duel-arena .duel-error-note { font-size: 13px; margin-top: 7px; color: var(--duel-muted); }
  #word-duel-arena .duel-error-source { display: inline-block; margin-top: 6px; }
  #word-duel-arena .duel-hint-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
  #word-duel-arena .duel-hint-button { color: var(--duel-green); border: 1px solid var(--duel-line); background: transparent; border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 14px; cursor: pointer; }
  #word-duel-arena .duel-hint-button:disabled, #word-duel-arena .duel-hint-word:disabled { opacity: .5; cursor: default; }
  #word-duel-arena .duel-hint-button:focus-visible, #word-duel-arena .duel-hint-word:focus-visible { outline: 2px solid var(--duel-green); outline-offset: 3px; }
  #word-duel-arena .duel-hint-note { font-size: 13px; color: var(--duel-muted); line-height: 1.6; margin: 8px 0 0; }
  #word-duel-arena .duel-hint-controls .duel-hint-note { margin: 0; }
  #word-duel-arena .duel-hint-panel { border: 1px solid var(--duel-line); background: light-dark(#f0f5f0, #202d24); padding: 12px 14px; border-radius: 10px; margin-top: 10px; }
  #word-duel-arena .duel-hint-title { font-size: 14px; color: var(--duel-green); margin: 0 0 8px; }
  #word-duel-arena .duel-hint-words { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  #word-duel-arena .duel-hint-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
  #word-duel-arena .duel-hint-word { font: inherit; font-weight: 650; cursor: pointer; border-radius: 6px; border: 1px solid var(--duel-line); background: light-dark(#fff, #18231c); color: var(--duel-green); padding: 7px 10px; overflow-wrap: anywhere; max-width: 100%; }
  #word-duel-arena .duel-hint-source { font-size: 13px; white-space: nowrap; }
  #word-duel-arena .duel-hint-notice { font-size: 14px; margin: 6px 0 0; line-height: 1.6; }
  @media (max-width: 680px) {
    #word-duel-arena .duel-match-grid { grid-template-columns: minmax(0, 1fr); }
    #word-duel-arena .duel-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
    #word-duel-arena .duel-current-log { margin: 0; padding: 0 0 0 16px; border: 0; border-left: 1px solid var(--duel-line); }
  }
  @media (max-width: 400px) {
    body { padding: 10px 6px !important; }
    #word-duel-arena .duel-side { grid-template-columns: minmax(0, 1fr); }
    #word-duel-arena .duel-current-log { padding: 16px 0 0; border: 0; border-top: 1px solid var(--duel-line); }
    #word-duel-arena .duel-input-row { flex-direction: column; }
    #word-duel-arena .duel-category-toolbar { align-items: stretch; }
    #word-duel-arena .duel-category-tabs { flex: 1; }
    #word-duel-arena .duel-category-tab { flex: 1; padding: 10px 8px; white-space: nowrap; }
    #word-duel-arena .duel-finder { padding: 18px 14px; }
  }

/* Turn clock stays next to the entry; meanings follow it on small screens. */
#word-duel-arena .duel-clock{margin:16px 0;padding:16px;border:1px solid #b8ccbf;border-radius:16px;background:#f3f8f5}
#word-duel-arena .duel-clock-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#284d38;font-size:14px;font-weight:650}
#word-duel-arena .duel-clock-value{font-size:24px;font-variant-numeric:tabular-nums;white-space:nowrap}
#word-duel-arena .duel-clock-track{height:8px;margin:10px 0;background:#dfe9e2;border-radius:99px;overflow:hidden}
#word-duel-arena .duel-clock-bar{height:100%;background:#24704a;border-radius:inherit;transition:width .1s linear}
#word-duel-arena .duel-clock.urgent{border-color:#c34d27;background:#fff4eb}
#word-duel-arena .duel-clock.urgent .duel-clock-value{color:#ad3918}
#word-duel-arena .duel-clock.urgent .duel-clock-bar{background:#c34d27}
#word-duel-arena .duel-clock-note{margin:8px 0 0;color:#526257;font-size:14px;line-height:1.6}
#word-duel-arena .duel-clock-start{display:block;width:100%;min-height:44px;margin-top:12px;border:0;border-radius:10px;background:#174d32;color:#fff;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer}
#word-duel-arena .duel-clock-start[hidden]{display:none}
#word-duel-arena .duel-clock-start:disabled{opacity:.65;cursor:wait}
#word-duel-arena .duel-input[readonly]{opacity:1;background:#f3f7f4;cursor:wait}
#word-duel-arena .duel-meanings{margin-bottom:20px}
#word-duel-arena .duel-meaning-cards{display:grid;gap:12px}
#word-duel-arena .duel-meaning-card{border:1px solid #cbdccf;border-radius:12px;background:#f6faf7;padding:14px;overflow-wrap:anywhere}
#word-duel-arena .duel-meaning-card h4{margin:0 0 8px;font-size:16px;color:#19492f;line-height:1.5}
#word-duel-arena .duel-meaning-card p{margin:0 0 10px;font-size:16px;line-height:1.75;color:#34483b}
#word-duel-arena .duel-meaning-card a{font-size:14px;color:#236641;text-decoration:underline;text-underline-offset:3px}
#word-duel-arena .duel-meaning-card button{min-height:44px;border:1px solid #a7bbae;border-radius:8px;background:#fff;font:inherit;color:#236641;cursor:pointer}
#word-duel-arena .duel-meaning-credit{margin:10px 0 0;font-size:12px;line-height:1.7;color:#617468}
#word-duel-arena .duel-meaning-credit a{color:inherit}
@media(min-width:850px){#word-duel-arena .duel-match-grid{grid-template-columns:minmax(0,1fr) 300px}}
@media(prefers-reduced-motion:reduce){#word-duel-arena .duel-clock-bar{transition:none}}

#word-duel-arena .duel-meaning-select{display:grid;gap:6px;margin-bottom:10px;font-size:13px;color:#526257}
#word-duel-arena .duel-meaning-select select{width:100%;min-width:0;max-width:100%;min-height:44px;padding:8px;border:1px solid #b8ccbf;border-radius:8px;background:#fff;color:#19492f;font:inherit;font-size:14px;text-overflow:ellipsis}

@media(max-width:380px){#word-duel-arena .duel-clock-heading{flex-direction:column;align-items:flex-start;gap:4px}#word-duel-arena .duel-clock-value{font-size:22px}}