#hud .colosseum-panel { width: 810px; background: linear-gradient(115deg, #ece3d1f5, #e0d2b8f7); }
#hud .colosseum-panel > header { padding-bottom: 17px; }
#hud .colosseum-panel > header p { color: #786344; font-size: 9px; letter-spacing: 2px; }
#hud .colosseum-panel > header h2 { font-size: 34px; }
#hud .colosseum-panel .panel-body { padding-top: 16px; padding-bottom: 24px; background: none; }
#hud .colosseum-intro { margin: 0 0 19px; max-width: 660px; font-size: 14px; line-height: 1.65; color: #675740; }
.colosseum-facts { display: grid; grid-template-columns: 1.4fr 1.2fr .8fr 1fr; margin: 0; padding: 17px 0; border-block: 1px solid #8d764541; }
.colosseum-facts > div { padding-inline: 17px; border-left: 1px solid #8d76452b; }
.colosseum-facts > div:first-child { padding-left: 0; border: 0; }
.colosseum-facts dt { font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: #715c3d; }
.colosseum-facts dd { margin: 6px 0 0; font-size: 26px; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
#hud .colosseum-facts small { display: block; margin-top: 5px; font-size: 11px; color: #736149; }
.colosseum-guide-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: center; padding: 19px 0; }
.colosseum-plan { margin: 0; border: 1px solid #9b835142; background: radial-gradient(ellipse, #f7efdf88, #c4b08b18); padding: 12px 3px 13px; }
.colosseum-plan svg { display: block; width: 100%; overflow: visible; }
.colosseum-plan svg text { text-anchor: middle; font: 10px Georgia, serif; fill: #664b2f; letter-spacing: 1px; }
.colosseum-plan svg .colosseum-plan-small { font-size: 8px; letter-spacing: 0; }
.colosseum-plan svg .colosseum-plan-floor { font-size: 8px; letter-spacing: .8px; }
.colosseum-plan-court { fill: #ccb99555; stroke: #9e8456; stroke-width: .8; }
.colosseum-plan-shell { fill: #ab9877; stroke: #705a39; stroke-width: 2; }
.colosseum-plan-seats { fill: none; stroke: #e2d5b7; stroke-width: 3; }
.colosseum-plan-aisles { stroke: #ece1c8; stroke-width: 5; fill: none; }
.colosseum-plan-sand { fill: #e1c491; stroke: #8c7248; stroke-width: 1.5; }
.colosseum-plan-marks { fill: none; stroke: #826033; stroke-width: 1.5; }
.colosseum-plan-you { fill: #547669; stroke: #fff7de; stroke-width: 2.5; }
.colosseum-plan figcaption { display: flex; justify-content: center; align-items: center; gap: 7px; font-size: 10px; color: #725f44; }
.colosseum-plan figcaption i { width: 7px; height: 7px; background: #547669; border: 1px solid #fff7de; border-radius: 50%; }
.colosseum-plan figcaption span { margin-left: 8px; font-size: 9px; }
.colosseum-visit h3 { font-size: 21px; font-weight: 400; margin: 0 0 16px; }
.colosseum-visit article { display: flex; gap: 10px; margin: 0 0 16px; }
.colosseum-visit article:last-child { margin-bottom: 0; }
#hud .colosseum-visit article > span { font-size: 11px; color: #997d4e; border-top: 1px solid #b49b704f; padding-top: 4px; }
.colosseum-visit h4 { margin: 0 0 5px; font-size: 13px; font-weight: 600; }
#hud .colosseum-visit p { margin: 0; font-size: 12px; line-height: 1.55; color: #695a45; }
.colosseum-craft { display: flex; gap: 13px; padding: 14px 17px; background: #b39a6b14; border-block: 1px solid #9a81512e; }
.colosseum-craft .icon { width: 28px; height: 28px; }
#hud .colosseum-craft p { margin: 0; font-size: 12px; line-height: 1.6; color: #695a45; }
.colosseum-craft strong { display: block; margin-bottom: 3px; font-size: 13px; }
.colosseum-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
#hud .colosseum-actions .primary-button { margin: 0; width: auto; padding: 12px 18px; }
.colosseum-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 12px; }
.colosseum-actions .icon { width: 17px; height: 17px; }
.colosseum-actions button:focus-visible { outline: 2px solid #816234; outline-offset: 4px; }
@media (max-width: 640px) {
  #hud .colosseum-panel { padding: 20px 20px 0; }
  #hud .colosseum-panel > header h2 { font-size: 26px; }
  .colosseum-guide-layout { grid-template-columns: 1fr; gap: 20px; }
  .colosseum-facts { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .colosseum-facts > div:nth-child(3) { border: 0; padding-left: 0; }
  .colosseum-facts dd { font-size: 24px; }
  .colosseum-actions { flex-direction: column; align-items: stretch; }
}