.duel-hero { padding-bottom: 36px; }
.duel-shell { display:grid; grid-template-columns:240px minmax(0,1fr) 270px; gap:18px; max-width:1440px; margin:0 auto; }
.duel-lobby,.duel-play,.duel-rules { border:1px solid rgba(135,170,210,.18); background:rgba(10,19,33,.88); border-radius:22px; }
.duel-lobby { padding:28px; align-self:start; }
.duel-lobby h2 { font-size:1.35rem; margin:12px 0; }
.duel-muted { color:#9aadc2; font-size:.92rem; line-height:1.7; }
.duel-lobby .button { width:100%; margin-top:14px; padding:12px; min-width:0; }
.duel-lobby form { margin:28px 0 18px; }
.duel-lobby label { font-size:.8rem; color:#b9c9da; }
.duel-join { display:flex; gap:8px; margin-top:8px; }
.duel-join input,#invite-fallback { width:100%; min-width:0; padding:12px 10px; border:1px solid #33445b; border-radius:9px; background:#071321; color:#ecf4ff; }
.duel-join input { text-transform:uppercase; font-family:monospace; letter-spacing:.06em; }
.duel-join .button { width:auto; margin:0; }
#room-code { display:block; font-family:monospace; letter-spacing:.14em; font-size:1.5rem; color:#68dfff; }
#room-info { border-top:1px solid #233449; padding-top:18px; }
.duel-connection { color:#7de8c2; font-size:.82rem; margin:18px 0 0; }
.duel-error { color:#ffb4bc; line-height:1.6; font-size:.88rem; }
.duel-scoreboard { display:grid; grid-template-columns:1fr 100px 1fr; padding:26px; text-align:center; border-bottom:1px solid #233449; }
.duel-scoreboard div { display:flex; flex-direction:column; gap:6px; }
.duel-scoreboard span { font-size:.75rem; letter-spacing:.13em; color:#a5b9d0; }
.duel-scoreboard strong { font-size:3.5rem; font-variant-numeric:tabular-nums; line-height:1.15; color:#ecf5ff; }
.duel-scoreboard div:first-child strong { color:#65ddff; }
.duel-scoreboard small { color:#829ab5; font-size:.72rem; min-height:1em; }
.duel-versus { justify-content:center; }
.duel-stage { min-height:425px; display:flex; flex-direction:column; align-items:center; text-align:center; padding:30px 20px; background:radial-gradient(ellipse at center,rgba(27,77,102,.2),transparent 65%); }
.duel-stage h2 { font-size:clamp(1.3rem,2.5vw,2rem); margin:10px 0 6px; }
.duel-stage p { margin:0; min-height:22px; }
.duel-ball { display:grid; place-items:center; width:min(100%,440px); height:210px; flex-shrink:0; border-radius:18px; margin:28px 0; border:2px solid #68aaff; background:linear-gradient(135deg,#2c82ff,#1559df); color:white; font-size:clamp(1.4rem,3vw,2.2rem); font-weight:700; box-shadow:0 14px 45px rgba(30,105,235,.22); cursor:pointer; touch-action:manipulation; user-select:none; }
.duel-ball:disabled { cursor:default; }
.duel-ball:focus-visible { outline:3px solid #fafcff; outline-offset:7px; }
.duel-stage[data-phase="go"] .duel-ball { background:#ff3e53; border-color:#ff9da6; box-shadow:0 0 65px rgba(255,51,76,.36),0 0 0 12px rgba(255,51,76,.05); color:white; }
.duel-hint { color:#8194ac; font-size:.8rem; }
.duel-history { padding:22px 26px; border-top:1px solid #233449; }
.duel-history h2 { font-size:.95rem; margin:0 0 16px; }
.duel-table-wrap { max-height:240px; overflow:auto; }
.duel-history table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.duel-history th,.duel-history td { text-align:left; padding:10px 5px; font-size:.82rem; border-bottom:1px solid #1d2b3e; }
.duel-history th { color:#829ab5; font-weight:500; }
.duel-rules { max-width:1200px; margin:26px auto 60px; padding:28px; }
.duel-rules h2 { font-size:1.3rem; margin:0 0 24px; }
.duel-rules>div { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.duel-rules h3 { font-size:.95rem; color:#cce7f5; }
.duel-rules p { color:#9aadc2; line-height:1.75; font-size:.85rem; }
.duel-rules>p { border-top:1px solid #233449; margin-top:24px; padding-top:18px; }
.duel-shell [hidden] { display:none !important; }
@media(max-width:850px) { .duel-shell { grid-template-columns:1fr; } .duel-lobby { padding:22px; } .duel-rules>div { grid-template-columns:1fr; gap:12px; } .duel-stage { min-height:390px; } }
.rank-panel { padding:22px 18px; align-self:start; border:1px solid #304159; border-radius:20px; background:linear-gradient(155deg,#182b3d,#0b1525 45%); }
.rank-panel-heading { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.rank-panel-symbol { display:grid; place-items:center; color:#7cdef8; background:#224a613d; border:1px solid #416c8260; width:35px; height:35px; border-radius:10px; font-size:22px; }
.rank-panel h2 { margin:0; font-size:1.03rem; }
.rank-panel-heading p { color:#8199b3; font-size:.7rem; margin:6px 0 0; }
.rank-panel select { width:100%; height:38px; padding:8px; background:#091525; color:#cfdeef; border:1px solid #344960; border-radius:8px; font:inherit; font-size:.79rem; }
.rank-panel label { display:block; font-size:.72rem; color:#91abc5; margin:12px 0 6px; }
.device-note { font-size:.7rem; line-height:1.7; color:#8099b2; margin:0 0 16px; }
#device-group { color:#80d9ed; font-size:.8rem; margin:10px 0 5px; }
.rank-panel-columns { display:grid; grid-template-columns:30px 1fr auto; gap:9px; margin:19px 0 8px; font-size:.67rem; color:#8194ae; }
.rank-panel-rows { list-style:none; padding:0; margin:0; }
.rank-panel-rows li { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:9px; align-items:center; border-bottom:1px solid #2b3c4d70; padding:12px 0; }
.rank-number { font-size:.85rem; color:#8699b2; }
.rank-panel-rows li:nth-child(-n+3) .rank-number { color:#e9c87f; }
.rank-panel-rows strong { display:block; font-size:.79rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-panel-rows small { display:block; font-size:.66rem; color:#829ab4; margin-top:4px; }
.rank-panel-rows b { font-size:.82rem; font-variant-numeric:tabular-nums; color:#78d8ed; }
#panel-status { color:#859db6; font-size:.8rem; line-height:1.8; min-height:120px; display:flex; align-items:center; justify-content:center; text-align:center; }
#panel-status:empty { display:none; }
.rank-panel-link { display:block; text-align:center; margin-top:16px; padding:11px; color:#a8dbed; border:1px solid #344b62; border-radius:8px; font-size:.78rem; text-decoration:none; }
.rank-panel-link:hover { background:#1b3347; }
.rank-panel-note { margin:16px 0 0; color:#70859e; font-size:.68rem; line-height:1.8; }
@media(min-width:851px) and (max-width:1100px) { .duel-shell { grid-template-columns:230px minmax(0,1fr); } .rank-panel { grid-column:2; } }
@media(max-width:850px) { .rank-panel { grid-column:1; } }
.mobile-only,.mobile-duel-toolbar { display:none; }
.round-feedback { border:1px solid #344b62; border-radius:12px; padding:12px; font-size:.85rem; color:#ccdaea; width:100%; }
.round-feedback[data-outcome="win"] { color:#83e5bc; border-color:#34785f; }
.round-feedback[data-outcome="lose"] { color:#ffb1bb; border-color:#854656; }
.match-summary { margin:16px; border:1px solid #4aa9be; border-radius:12px; background:#142e40; padding:16px; color:#c8f1ff; line-height:1.8; }
.duel-history summary { cursor:pointer; font-size:.9rem; color:#bad3e7; padding-bottom:10px; }
.rank-details>summary { display:none; }
@media(max-width:850px) {
  .duel-page { padding-bottom:calc(116px + env(safe-area-inset-bottom)); }
  .duel-page .site-header { padding-top:12px; padding-bottom:12px; }
  .duel-page .hero { padding:14px 0 16px; }
  .duel-page .hero .eyebrow { display:none; }
  .duel-page .hero h1 { font-size:1.35rem; margin:0 0 6px; }
  .duel-page .hero__subtitle { font-size:.8rem; margin:0; }
  .duel-page .duel-shell { gap:12px; }
  .duel-page .duel-lobby { display:none; }
  .duel-page .duel-lobby[data-open="true"] { display:block; position:fixed; inset:70px 12px calc(116px + env(safe-area-inset-bottom)); z-index:45; overflow:auto; background:#0b1627; box-shadow:0 0 0 100vmax #000a; }
  .duel-page .duel-lobby #ranked-player,.duel-page .duel-lobby #ready,.duel-page .duel-lobby #leave { display:none; }
  .duel-page .mobile-only { display:block; }
  .duel-page .duel-scoreboard { padding:12px; grid-template-columns:1fr 74px 1fr; }
  .duel-page .duel-scoreboard strong { font-size:2rem; }
  .duel-page .duel-stage { min-height:0; padding:14px 12px; }
  .duel-page .duel-stage h2 { font-size:1.15rem; margin:6px 0; }
  .duel-page .duel-stage #phase-copy { font-size:.75rem; }
  .duel-page .duel-ball { height:clamp(110px,18dvh,160px); margin:12px 0; border-radius:16px; }
  .duel-page .duel-stage .duel-hint { font-size:.7rem; margin-top:6px; }
  .duel-page .duel-stage .round-feedback { margin:0; min-height:44px; padding:10px; font-size:.78rem; }
  .duel-page .duel-history { padding:12px 16px; }
  .duel-page .mobile-duel-toolbar { display:block; position:fixed; inset:auto 0 0; z-index:50; padding:8px 14px calc(12px + env(safe-area-inset-bottom)); background:#0a1527f5; border-top:1px solid #30445f; backdrop-filter:blur(16px); }
  .mobile-duel-toolbar>div { display:grid; grid-template-columns:1.5fr 1fr; gap:10px; }
  .mobile-duel-toolbar .button { width:100%; min-width:0; margin:0; padding:12px 8px; min-height:48px; }
  #mobile-status { color:#9bd8e8; font-size:.75rem; text-align:center; margin:0 0 6px; min-height:18px; }
  .duel-page .rank-details>summary { display:block; padding:14px; cursor:pointer; color:#bad3e7; border:1px solid #304159; border-radius:12px; }
  .duel-page .rank-details:not([open]) .rank-panel { display:none; }
  .duel-page .duel-rules { padding:16px; margin:12px auto; }
  .duel-page .duel-rules>summary { cursor:pointer; color:#bad3e7; }
  .duel-page .site-footer { margin-top:12px; }
}
@media(max-width:850px) and (max-height:680px) { .duel-page .hero { display:none; } .duel-page .duel-stage .duel-hint { display:none; } .duel-page .duel-ball { height:120px; } }
.mobile-room-info{align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;}
.rank-details{align-self:start;}
@media(min-width:851px) and (max-width:1100px){.rank-details{grid-column:2;}}
@media(max-width:850px){.mobile-room-info:not([hidden]){display:flex;}.mobile-room-info[hidden]{display:none;}}