/* A carved, brass-rimmed encounter strip, with Dofus egg and monster glyphs. */
.round-panel {
  --round-ink:#18302a;
  --round-accent:#b6db92;
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:520px; max-width:calc(100% - 100px); display:block; z-index:10;
  filter:drop-shadow(0 4px 5px #10191260);
}
.round-frame {
  height:49px; padding:0 2px 2px;
  background:linear-gradient(105deg,#71633b,#c2ac71 28%,#7c734a 50%,#c2ac71 72%,#71633b);
  clip-path:polygon(0 0,100% 0,calc(100% - 19px) 100%,19px 100%);
}
.round-face {
  height:100%; display:grid; grid-template-columns:96px 1fr 96px; align-items:center;
  padding:0 18px; gap:9px;
  background:radial-gradient(ellipse at 50% 0,#3c5141 0,transparent 72%),linear-gradient(#223a30,#142b25);
  box-shadow:inset 0 -2px #0b1b15,inset 0 -3px #d1bb7c25;
  clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,18px 100%);
}
.round-stage { display:flex; align-items:center; gap:9px; color:#e6d7a5; min-width:0; }
.round-stage strong { font-size:19px; font-weight:650; letter-spacing:1px; font-variant-numeric:tabular-nums; }
.round-phase-icon { display:flex; color:#c4d5a0; }
.round-phase-icon svg { width:23px; height:27px; filter:drop-shadow(0 1px 1px #0005); }
.round-sequence { height:100%; display:flex; align-items:stretch; justify-content:center; gap:3px; margin:0; border-left:1px solid #d1c49515; border-right:1px solid #d1c49515; padding:0 8px; }
.round-step { position:relative; display:flex; align-items:center; justify-content:center; flex:1; min-width:26px; max-width:39px; padding:0; border:0; border-radius:0; color:#5d806d; background:transparent; }
.round-step svg { width:22px; height:22px; }
.round-step.complete { color:#6b987f; opacity:.65; }
.round-step.current { color:#f3d676; opacity:1; background:linear-gradient(0deg,#c8b15b24,transparent); border:0; }
.round-step.current svg { filter:drop-shadow(0 0 5px #efcb5c66); }
.round-step.current::after { content:''; position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:8px; height:5px; background:#d7c084; clip-path:polygon(50% 0,100% 100%,0 100%); }
.round-step:focus-visible { outline:1px solid #ddc88f; outline-offset:-5px; }
.round-step:hover { color:#e8dba7; }
.round-clock { display:flex; align-items:center; gap:7px; justify-content:flex-start; color:#c3cda6; padding-left:3px; }
.round-clock svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; }
#phase-timer { font-size:19px; line-height:1; color:#e6d7a5; font-weight:650; font-variant-numeric:tabular-nums; min-width:26px; }
.round-details-toggle { position:absolute; top:10px; right:22px; width:24px; height:27px; display:grid; place-items:center; padding:0; background:transparent; border:0; color:#a6b69a; border-radius:2px; }
.round-details-toggle svg { width:13px; height:13px; stroke:currentColor; stroke-width:2; fill:none; transition:transform .15s; }
.round-details-toggle[aria-expanded=true] svg { transform:rotate(180deg); }
.round-details-toggle:hover { color:#f3dfa0; }
.round-details-toggle:focus-visible { outline:1px solid #e6d7a5; outline-offset:0; }
.round-panel .phase-track { display:block; height:6px; margin:3px 27px 0; border:1px solid #14221c; background:#152820; box-shadow:0 1px 0 #b7c58a30; overflow:hidden; }
#phase-progress { width:100%; height:100%; transform-origin:left center; transition:none; background:linear-gradient(90deg,#5d9b7a,#b5dca0); box-shadow:0 0 7px #9ecf8466; }
.round-panel[data-phase=combat] #phase-progress { background:linear-gradient(90deg,#8b8c4d,#dfcf82); }
.round-panel[data-phase=arrival] #phase-progress { background:linear-gradient(90deg,#a58645,#e9cc86); }
.round-panel.urgent #phase-timer { color:#f1b985; }
.round-panel.urgent #phase-progress { background:linear-gradient(90deg,#a57f49,#efd294); }
.round-panel[data-waiting=true] .round-clock svg { opacity:.5; }
.round-details { position:absolute; top:65px; left:50%; transform:translateX(-50%); width:max-content; max-width:100%; display:flex; flex-direction:column; align-items:center; gap:5px; padding:11px 18px; color:#e1d6af; background:#1b3028f5; border:1px solid #8b7c4d; border-radius:3px; box-shadow:0 7px 20px #0004; font-size:11px; }
.round-details strong { font-size:12px; font-weight:550; color:#cbdcb3; }
.round-details span { color:#b6c0a7; }
@media (max-width:1100px) and (min-width:761px) {
  .round-panel { left:42%; width:440px; }
  .round-face { grid-template-columns:78px 1fr 78px; gap:5px; padding:0 16px; }
  .round-sequence { padding:0 4px; gap:1px; }
  .round-stage { gap:6px; }
  .round-stage strong,#phase-timer { font-size:17px; }
  .round-details-toggle { right:18px; }
}
@media (max-width:760px) {
  .topbar,.live-match .topbar { height:112px; flex-basis:112px; padding:7px 12px 63px; align-content:center; flex-wrap:nowrap; }
  .round-panel { position:absolute; top:51px; left:50%; width:min(440px,calc(100% - 20px)); max-width:calc(100% - 20px); transform:translateX(-50%); display:block; }
  .round-frame { height:45px; }
  .round-face { grid-template-columns:76px 1fr 76px; gap:4px; padding:0 16px; }
  .round-stage { gap:5px; }
  .round-stage strong,#phase-timer { font-size:17px; }
  .round-sequence { gap:0; padding:0 3px; }
  .round-step { min-width:0; }
  .round-step svg { width:19px; max-width:100%; height:19px; }
  .round-phase-icon svg { width:20px; height:24px; }
  .round-details-toggle { right:17px; top:8px; }
  .round-clock { gap:4px; padding:0; }
  .round-clock svg { width:13px; height:13px; }
  .round-panel .phase-track { height:5px; }
  .round-details { top:59px; }
  .connection-notice { top:119px; }
}