/* Feedback stays in the existing layout. Motion explains an actual state change. */
:root{--ui-ease:cubic-bezier(.22,1,.36,1);--ui-control-duration:180ms}
html body :is(#workspace,.masthead) :is(button,a){-webkit-tap-highlight-color:transparent}
html body :is(#workspace,.masthead) :is(button,[role=button]){transition:background var(--ui-control-duration),border-color var(--ui-control-duration),color var(--ui-control-duration),transform 120ms var(--ui-ease),box-shadow var(--ui-control-duration)}
html body :is(#workspace,.masthead) button:not(:disabled):active{transform:scale(.975)}
/* The news pull tab is rotated; a press scale would replace that transform and flip the tab. */
html body #workspace .news-handle{transition:background var(--ui-control-duration),color var(--ui-control-duration)}
html body #workspace .news-handle:not(:disabled):active{transform:translateY(-50%) rotate(180deg)}
html body .ui-tabs{position:relative;isolation:isolate}
html body .ui-tabs::before{content:'';position:absolute;z-index:0;pointer-events:none;left:0;top:0;width:var(--ui-pill-width,0);height:var(--ui-pill-height,0);transform:translate(var(--ui-pill-x,0),var(--ui-pill-y,0));background:#e9e9e2;border-radius:7px;box-shadow:0 1px 4px #0003;transition:transform 240ms var(--ui-ease),width 240ms var(--ui-ease),height 240ms var(--ui-ease)}
html body .ui-tabs>:is(button,a){position:relative;z-index:1}
html body .ui-tabs>:is([aria-pressed=true],[aria-current=page]){background:transparent!important;color:#141414!important;box-shadow:none!important}
html body .ui-tabs>:is(button,a):focus-visible{outline:2px solid #aaa;outline-offset:2px}
html body :is(#page-community,#page-duell) :is(.dc-thread,.duel-player,.duel-pick-player,.duel-history-item,.duel-context-link){transition:border-color 180ms,box-shadow 180ms,background 180ms}
html body :is(#page-community,#page-duell) :is(.dc-search,.duel-search-box):focus-within{border-color:#999;box-shadow:0 0 0 3px #ffffff0a}
html body #workspace :is(input,textarea,select){transition:border-color 180ms,box-shadow 180ms,background 180ms}
html body #workspace :is(input,textarea):focus{border-color:#777;box-shadow:0 0 0 3px #ffffff08}
html body :is(#page-community,#page-duell) [data-ui-value]{font-variant-numeric:tabular-nums}
html body :is(#page-community,#page-duell) .ui-value-changed{animation:ui-value-confirmed 300ms var(--ui-ease)}
html body :is(#page-community,#page-duell) .ui-meter-updated{animation:ui-meter-confirmed 360ms var(--ui-ease) both}
html body :is(#page-community,#page-duell) :is(.dc-poll-option,.duel-history-toggle){transition:background 180ms,border-color 180ms,color 180ms}
html body :is(#page-community,#page-duell) [aria-busy=true]{cursor:progress}
html body :is(#page-community,#page-duell) button[aria-busy=true]::after,html body .dc-board-dialog button[aria-busy=true]::after{content:'';display:inline-block;flex-shrink:0;width:12px;height:12px;margin-left:6px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ui-working 700ms linear infinite}
html body :is(#page-community,#page-duell) .dc-club-scroll>button:disabled{opacity:.25;cursor:default}
html body :is(#page-community,#page-duell) :is(.dc-clear-search,.duel-clear-search){display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;margin-right:6px;border:0;border-radius:6px;background:none;color:#aaa}
html body :is(#page-community,#page-duell) :is(.dc-clear-search,.duel-clear-search):hover{background:#2b2b2b;color:#eee}
@media(hover:hover) and (pointer:fine){
 html body :is(#page-community,#page-duell) :is(.dc-thread,.duel-player,.duel-history-item,.duel-context-link):hover{border-color:#555;box-shadow:0 3px 16px #0002}
 html body :is(#page-community,#page-duell) .duel-pick-player:not(:disabled):hover{background:#242424;border-color:#777}
 html body #workspace :is(.tool-button,.icon-button,.text-button):hover{background:#ffffff09}
 html body .ui-tabs>:is(button,a):not([aria-pressed=true],[aria-current=page]):hover{background:#ffffff08}
}
@keyframes ui-value-confirmed{0%{color:#fff;transform:translateY(2px)}100%{transform:translateY(0)}}
@keyframes ui-meter-confirmed{from{width:var(--ui-meter-from)}to{width:var(--ui-meter-to)}}
@keyframes ui-working{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
 html body .ui-tabs::before{transition:none!important}
 html body :is(#workspace,.masthead) :is(button,a,input,textarea,select){transition:none!important}
 html body :is(#page-community,#page-duell) :is(.ui-value-changed,.ui-meter-updated){animation:none!important}
 html body :is(#page-community,#page-duell) button[aria-busy=true]::after,html body .dc-board-dialog button[aria-busy=true]::after{animation:none}
 html body :is(#workspace,.masthead) button:not(:disabled):active{transform:none}
}

html body :is(#page-community,#page-duell) .duel-vote-button[aria-busy=true]::after{display:none}

html body :is(#window,.dc-board-dialog,.mp-dialog,.mobile-more-sheet)[open]{animation:ui-dialog-enter 160ms var(--ui-ease)}
@keyframes ui-dialog-enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){html body :is(#window,.dc-board-dialog,.mp-dialog,.mobile-more-sheet)[open]{animation:none}}