#wrduel{position:fixed;inset:0;z-index:30;display:grid;place-items:center;overflow:auto;overscroll-behavior:contain;background:#0e1925eb;color:#f4efdd;font-family:system-ui,sans-serif}
#wrduel [hidden]{display:none!important}
.wrduel-practice{position:absolute;z-index:5;top:15%;left:50%;transform:translateX(-50%);display:flex;gap:.6em;align-items:center;background:#16242def;border:1px solid #b5dfb1;border-radius:.45em;padding:.4em .7em;white-space:nowrap;font-size:clamp(12px,1.35cqw,20px)}
.wrduel-shell{position:relative;display:grid;place-items:center;width:100%;min-height:100%;outline:none}
#wrduel button,#wrduel textarea,#wrduel input,#wrduel select{font:inherit}
#wrduel button{padding:8px 14px;border:1px solid #6c837f;border-radius:7px;background:#30474f;color:#fff0cd;font-weight:720;cursor:pointer}
#wrduel button:focus-visible,#wrduel textarea:focus-visible,#wrduel input:focus-visible,#wrduel select:focus-visible{outline:2px solid #fbd787;outline-offset:3px}
#wrduel button:hover{background:#416268}
#wrduel button:disabled{opacity:.52;cursor:wait}
#wrduel .wrduel-primary{background:#d8ad62;color:#211d18;border-color:#f4d298}
#wrduel .wrduel-primary:hover{background:#edc980}
#wrduel .wrduel-exit{position:absolute;z-index:4;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));background:#233641e8;font-size:13px}
.wrduel-lobby{box-sizing:border-box;width:min(870px,calc(100% - 30px));margin:50px 0 28px;padding:clamp(17px,3vw,32px);border:1px solid #78958a7d;border-radius:17px;background:#172932;box-shadow:0 16px 64px #060d167f}
.wrduel-lobby h2,.wrduel-lobby h3,.wrduel-lobby p{margin:0}
.wrduel-kicker{color:#d2b77c;font-size:11px;font-weight:750;letter-spacing:.18em}
.wrduel-lobby header h2{margin:4px 0 6px;font-size:clamp(26px,4.8vw,41px);line-height:1.1;color:#fff0c5}
.wrduel-lobby header p:last-child,.wrduel-lobby article p{color:#c0d2cd;font-size:13px;line-height:1.5}
.wrduel-loadout,.wrduel-room-join{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:14px 0 10px;font-weight:700}
.wrduel-loadout label{display:flex;align-items:center;gap:6px}
.wrduel-avatar{display:block;object-fit:cover;width:46px;height:46px;border:1px solid #e5c893;border-radius:9px;background:#263745}
.wrduel-room-join input{width:min(290px,58vw)}
.wrduel-guide{margin:0 0 14px;padding:11px 13px;border:1px solid #47646b;border-radius:10px;background:#10232c}
.wrduel-guide h3{color:#ffe3a0;font-size:14px}
.wrduel-guide [data-duel=skills]{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:6px 16px;margin-top:6px}
.wrduel-guide [data-duel=skills]>div{display:flex;gap:8px;align-items:start;color:#c5d8dc;font-size:13px;line-height:1.4}
.wrduel-guide kbd{flex:none;min-width:19px;text-align:center;border-radius:4px;background:#34565e;color:#fff2bd}
.wrduel-guide b{margin-right:.5em;color:#fff4dd}
#wrduel select,#wrduel textarea,#wrduel input{box-sizing:border-box;border:1px solid #738881;background:#0e1f2a;color:#f8f0df;border-radius:6px;padding:7px 9px}
#wrduel select{min-width:140px}
.wrduel-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wrduel-pair article{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:13px;border:1px solid #59716e99;background:#213941;border-radius:10px}
.wrduel-pair article h3{color:#f2dda7;font-size:17px}
.wrduel-pair article label,.wrduel-local label{width:100%;color:#cfe5db;font-size:12px}
#wrduel textarea{width:100%;display:block;margin-top:4px;resize:vertical;min-height:38px;font:13px/1.25 ui-monospace,monospace;letter-spacing:.025em}
.wrduel-local{margin:14px 0 8px;color:#c9ddd0;font-size:13px}
.wrduel-local summary{cursor:pointer;padding:5px 0}
.wrduel-local>div{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:7px 0}
.wrduel-local label{width:auto}
#wrduel .wrduel-local input{width:112px;font-family:ui-monospace,monospace;text-transform:uppercase}
.wrduel-status{min-height:1.5em;color:#ffd993;font-size:14px;font-weight:650}
.wrduel-status[data-state=error]{color:#ffab93}
.wrduel-lobby>small{display:block;margin-top:3px;color:#a9bfb5}
.wrduel-match{position:relative;width:min(100vw,calc(100vh * 16 / 9));aspect-ratio:16/9;max-width:1440px;container-type:inline-size;overflow:hidden;isolation:isolate;background:#19252f}
.wrduel-match canvas[data-duel=canvas]{display:block;width:100%;height:100%}
.wrduel-score{position:absolute;inset:3% 6% auto;display:grid;grid-template-columns:1fr minmax(51px,12%) 1fr;gap:3%;align-items:center;pointer-events:none}
.wrduel-board{position:absolute;inset:2.5% 12% auto 3%;display:flex;justify-content:space-between;align-items:start;gap:8px;pointer-events:none}
.wrduel-board ol{display:flex;gap:clamp(3px,1cqw,12px);margin:0;padding:0;list-style:none}
.wrduel-board li{display:grid;justify-items:center;gap:2px;white-space:nowrap;color:#f4eee4;padding:4px 5px;border-radius:8px;background:#162737e0;border:1px solid #a7b7c480;font-size:clamp(9px,1.1cqw,15px)}
.wrduel-board li[data-local=true]{border-color:#ffd979;color:#ffe9a7}
.wrduel-board li[data-leader=true]{box-shadow:0 2px 10px #08172977}
.wrduel-board li b{max-width:clamp(36px,9cqw,120px);overflow:hidden;text-overflow:ellipsis}
.wrduel-board .wrduel-avatar,.wrduel-score .wrduel-avatar{width:clamp(22px,4.5cqw,58px);height:clamp(22px,4.5cqw,58px);border-radius:6px}
.wrduel-board .wrduel-clock{min-width:clamp(33px,6cqw,85px)}
.wrduel-health{background:#142c34de;border-radius:7px;border:1px solid #78988e80;overflow:hidden;padding:4px 8px 5px;color:#e3fff0}
.wrduel-health .wrduel-avatar{float:left;margin:0 8px 0 0}
.wrduel-health:last-child .wrduel-avatar{float:right;margin:0 0 0 8px}
.wrduel-health:last-child{background:#372831e8;text-align:right;color:#ffdfc6;border-color:#c78d708f}
.wrduel-health b,.wrduel-health small{display:block;font-size:clamp(9px,1.2cqw,15px);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wrduel-health small{font-size:clamp(9px,1.08cqw,14px);font-weight:650;color:#f6ecc7}
.wrduel-health i{display:block;overflow:hidden;border-radius:10px;height:clamp(4px,1cqw,11px);background:#11222a;margin:3px 0}
.wrduel-health em{display:block;height:100%;width:100%;background:linear-gradient(90deg,#418b7c,#a4f6bf)}
.wrduel-health:last-child em{margin-left:auto;background:linear-gradient(90deg,#ffcb83,#a84b58)}
.wrduel-health i.wrduel-energy{height:clamp(6px,1.05cqw,13px);background:#151b32}
.wrduel-health .wrduel-energy em{background:linear-gradient(90deg,#58bce0,#b1f3ff)}
.wrduel-clock{text-align:center;line-height:1;background:#182e39ee;border:1px solid #91a99c99;border-radius:8px;padding:4px 2px}
.wrduel-clock span{display:block;font-size:clamp(7px,1cqw,12px);color:#e8ca89}
.wrduel-clock b{font-size:clamp(13px,2.2cqw,28px);color:#fff1c5}
.wrduel-count{position:absolute;top:24%;left:50%;transform:translateX(-50%);font-size:clamp(42px,13cqw,140px);font-weight:950;color:#ffdb8b;line-height:1;text-shadow:0 3px 0 #4b3534,0 0 35px #16152e;pointer-events:none}
.wrduel-hints{position:absolute;left:2%;bottom:4%;display:grid;gap:3px;font-size:clamp(9px,1.13cqw,15px);color:#fff1cc;text-shadow:0 1px 3px #172333;pointer-events:none}
.wrduel-actions,.wrduel-pad{position:absolute;display:flex;right:3%;bottom:4%;gap:6px;touch-action:none;user-select:none}
#wrduel .wrduel-actions button{display:grid;justify-items:center;align-content:center;width:clamp(49px,8.6cqw,116px);height:clamp(46px,7.5cqw,90px);padding:0 3px;gap:2px;background:#25404ce8;border-color:#dfc693ab;border-radius:12px;touch-action:none}
#wrduel .wrduel-actions button b{font-size:clamp(15px,1.95cqw,23px);color:#ffe7a9;line-height:1}
#wrduel .wrduel-actions button span{font-size:clamp(8px,1cqw,13px);line-height:1.15}
#wrduel .wrduel-actions button[data-down],#wrduel .wrduel-pad button[data-down]{background:#bc925b;color:#182631}
#wrduel .wrduel-sub{
  position:absolute;z-index:2;right:3%;bottom:calc(4% + clamp(46px,7.5cqw,90px) + 8px);
  display:flex;align-items:center;gap:.5em;min-height:38px;padding:5px 10px;
  border:1px solid #ddcc9f;background:#314c5b;color:#ffe7af;touch-action:none;
}
#wrduel .wrduel-sub:disabled{opacity:1;background:#343941;border-color:#666c72;color:#b1b6bb;cursor:default}
#wrduel .wrduel-raigo{right:max(146px,15%);border-color:#b7e8ff;background:#213f66;color:#dff9ff}
#wrduel .wrduel-aid{right:max(250px,27%);border-color:#9bdfb5;background:#24483e;color:#e2f7c7}
.wrduel-bound{position:absolute;bottom:4%;left:2%;display:grid;gap:4px;background:#1e2135e8;padding:5px 8px;border-radius:8px;color:#ffdbe5;border:1px solid #f0a2b2;font-size:clamp(10px,1.1cqw,15px);touch-action:none}
.wrduel-match:has(.wrduel-bound:not([hidden])) .wrduel-hints{display:none}
.wrduel-bound i{display:block;height:5px;background:#18192a;border-radius:5px;overflow:hidden}
.wrduel-bound em{display:block;height:100%;background:linear-gradient(90deg,#e15c7c,#ffdcac)}
.wrduel-bound div{display:flex;gap:4px}
#wrduel .wrduel-bound button{padding:4px 6px;background:#372b44;touch-action:none}
.wrduel-quote{position:absolute;z-index:3;top:17%;left:50%;transform:translateX(-50%);
  padding:.25em 1.2em;color:#fff1c7;background:#192535de;border-block:1px solid #cdb174;
  font-size:clamp(17px,3.2cqw,42px);font-weight:800;white-space:nowrap;pointer-events:none}
@media(max-width:660px) and (orientation:portrait){
  #wrduel .wrduel-sub{bottom:auto;top:calc(100% + 66px);min-height:44px}
  #wrduel .wrduel-aid{right:3%;top:calc(100% + 117px)}
  .wrduel-bound{top:calc(100% + 166px);bottom:auto;left:auto;right:3%}
  .wrduel-board{inset-inline:2% 3%;gap:4px}
  .wrduel-board li{padding:2px}
}
.wrduel-pad{display:none;right:auto;left:2%;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(2,36px);gap:4px}
#wrduel .wrduel-pad button{padding:0;touch-action:none;background:#1e3545dd}
.wrduel-pad button:nth-child(1){grid-area:1/2}
.wrduel-pad button:nth-child(2){grid-area:2/1}
.wrduel-pad button:nth-child(3){grid-area:2/2}
.wrduel-pad button:nth-child(4){grid-area:2/3}
.wrduel-result{position:absolute;z-index:3;left:50%;top:49%;transform:translate(-50%,-50%);width:max-content;max-width:92%;padding:14px 22px;text-align:center;background:#172d39f4;border:1px solid #e6c477;border-radius:13px;box-shadow:0 9px 32px #142232a8}
.wrduel-result h3{margin:0;color:#ffe39a;font-size:clamp(22px,5cqw,53px)}
.wrduel-result p{margin:0 0 10px;font-size:clamp(10px,1.3cqw,15px)}
.wrduel-finish-splash{position:fixed;z-index:20;inset:0;margin:0;overflow:hidden;background:#080912;pointer-events:none}
.wrduel-finish-splash canvas{width:100%;height:100%;object-fit:cover;transform:scale(1.012);animation:wrduel-finish-shake .47s linear infinite}
.wrduel-finish-splash figcaption{position:absolute;bottom:9%;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;padding:.4em 1em;border-radius:.25em;background:#090c17d9;color:#fff1d3;font-size:clamp(18px,3.2vw,42px);font-weight:900;text-align:center;text-shadow:0 2px 4px #000}
@keyframes wrduel-finish-shake{0%,100%{transform:translate(0,0) scale(1.012)}25%{transform:translate(2px,-1px) scale(1.012)}55%{transform:translate(-2px,1px) scale(1.012)}78%{transform:translate(1px,1px) scale(1.012)}}
@media(prefers-reduced-motion:reduce){.wrduel-finish-splash canvas{animation:none;transform:none}}
@media(orientation:portrait){.wrduel-finish-splash canvas{object-fit:contain}}
@media(pointer:coarse),(max-width:690px){
  .wrduel-hints{display:none}
  .wrduel-pad{display:grid}
}
@media(pointer:coarse) and (orientation:landscape){.wrduel-bound{bottom:calc(4% + 84px)}}
@media(max-width:660px) and (orientation:portrait){
  .wrduel-shell{align-content:start}
  .wrduel-pair{grid-template-columns:1fr}
  .wrduel-lobby{margin-top:53px}
  .wrduel-match{width:100%;margin-top:46px;aspect-ratio:auto;overflow:visible}
  .wrduel-match canvas[data-duel=canvas]{height:auto;aspect-ratio:16/9}
  .wrduel-actions,.wrduel-pad{bottom:auto;top:calc(100% + 11px)}
  #wrduel .wrduel-actions button{width:max(42px,10vw);height:46px}
  .wrduel-pad{grid-template-columns:repeat(3,36px);grid-template-rows:repeat(2,35px)}
}

#wrduel .wrduel-practice {flex-wrap:wrap;align-items:center;max-width:min(96%,950px);}
#wrduel .wrduel-practice label {display:flex;align-items:center;gap:5px;white-space:nowrap;}
#wrduel .wrduel-practice select {max-width:11rem;}
@media(max-width:700px) {
  #wrduel .wrduel-practice {max-width:calc(100% - 14px);gap:4px;font-size:12px;}
  #wrduel .wrduel-practice button,#wrduel .wrduel-practice select {padding:4px 5px;font-size:12px;min-height:28px;}
}

#wrduel .wrduel-practice-options {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.35em .65em;
  flex:1 1 500px;
  min-width:0;
}
#wrduel .wrduel-practice {width:max-content;justify-content:center;}
#wrduel .wrduel-practice [data-duel="practiceStats"] {font-variant-numeric:tabular-nums;}
@media(max-width:700px) {
  #wrduel .wrduel-practice-options {gap:3px 6px;}
  #wrduel .wrduel-practice label {gap:3px;}
}