.sten-arena { box-sizing: border-box; width: min(1060px, calc(100% - 20px)); max-height: calc(100dvh - 20px); overflow-y: auto; padding: 0 12px 12px; border: 3px solid #29231b; border-radius: 10px; color: #29231b; background: #e5d5b0; font-family: monospace; }
.sten-arena::backdrop { background: #000c; }
.sten-arena header { display: flex; position: sticky; top: 0; z-index: 1; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; background: #e5d5b0; border-bottom: 2px solid #29231b; }
.sten-arena h2 { margin: 0; font-size: 1.15rem; }
.sten-arena p { font-size: .8rem; line-height: 1.4; }
.sten-arena button, .sten-arena select, .sten-arena summary { box-sizing: border-box; min-height: 44px; border: 2px solid #29231b; border-radius: 4px; padding: 8px; font: bold .85rem monospace; color: #29231b; background: #f7e8c4; cursor: pointer; }
.sten-arena button:disabled, .sten-arena select:disabled { opacity: .5; cursor: default; }
.sten-arena :focus-visible { outline: 3px solid #1c577b; outline-offset: 2px; }
.arena-grid { display: grid; grid-template-columns: minmax(0, 1fr) 265px; gap: 12px; margin-top: 10px; }
.arena-grid canvas { display: block; width: 100%; height: auto; margin-inline: auto; border: 2px solid #29231b; box-sizing: border-box; }
.arena-grid label { display: block; font-size: .8rem; margin: 8px 0; }
.arena-grid select { display: block; width: 100%; max-width: 100%; margin-top: 4px; }
.arena-grid aside { min-width: 0; }
.arena-grid aside > button { width: 100%; }
.arena-grid details { margin-top: 8px; }
.arena-grid summary { display: list-item; line-height: 24px; }
.arena-grid textarea { box-sizing: border-box; width: 100%; min-height: 90px; margin: 8px 0; font: .75rem monospace; }
.arena-grid details button { width: 100%; margin: 4px 0; }
.arena-maal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.arena-maal h3 { font-size: .85rem; margin: 8px 0 4px; overflow-wrap: anywhere; }
.arena-maal p { margin: 4px 0 0; font-size: .75rem; }
.arena-maal meter { display: block; width: 100%; height: 12px; }
.arena-handlinger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.arena-log { max-height: 200px; overflow-y: auto; padding-left: 22px; font-size: .75rem; line-height: 1.5; }
.arena-log li { margin: 8px 0; }
@media (max-width: 699px) {
  .arena-grid { display: flex; flex-direction: column; gap: 8px; }
  .arena-grid aside { display: contents; }
  .arena-grid aside > label { order: -3; margin: 0; }
  .arena-grid [data-start] { order: -2; }
  .arena-grid [data-liga] { order: -1; margin: 0; }
  .arena-grid details, .arena-grid [data-praemier] { order: 2; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .arena-grid { display: grid; grid-template-columns: minmax(0, 1fr) 265px; }
  .arena-grid aside { display: block; }
  .arena-grid canvas { width: min(100%, calc(233dvh - 560px)); }
  .arena-maal h3 { font-size: .7rem; margin: 4px 0; }
  .arena-maal p { font-size: .7rem; line-height: 1.1; margin: 2px 0 0; }
  .arena-maal meter { height: 8px; }
  .arena-grid [data-status] { margin: 4px 0; }
}