#mayhem-controls[hidden] { display: none; }
#mayhem-controls { position: fixed; z-index: 30; inset: auto auto max(82px, env(safe-area-inset-bottom)) 12px; display: flex; gap: 8px; align-items: flex-end; max-width: calc(100vw - 24px); color: #fdf6e6; font-family: Arial, sans-serif; pointer-events: none; }
.mayhem-seat { width: min(190px, 42vw); min-height: 56px; padding: 8px; border-left: 3px solid #e6d24b; background: #111b19e8; box-shadow: 0 3px 14px #0008; pointer-events: auto; }
.mayhem-seat[data-side="away"] { border-color: #aac0c2; }
.mayhem-seat[data-active]:not([data-active=""]) { border-style: double; border-width: 5px; }
.mayhem-seat-name { display: block; font-size: 11px; font-weight: 800; }
.mayhem-marks { display: flex; gap: 4px; height: 9px; margin: 6px 0; }
.mayhem-marks i { flex: 1; transform: skew(-20deg); background: #65716d; }
.mayhem-marks i.on { background: #e6d24b; }
.mayhem-power-name { display: flex; align-items: center; gap: 5px; min-height: 20px; font-size: 12px; font-weight: 800; }
.mayhem-symbol { display: inline-block; flex: none; width: 24px; height: 24px; }
.screen-title .home-more-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; padding: 8px 12px; border: 1px solid var(--line-strong); border-left: 3px solid var(--paper-muted); background: rgb(var(--ink-rgb) / .92); color: var(--paper); cursor: pointer; font: 800 12px/1.2 var(--font-body); text-align: left; text-transform: uppercase; }
.home-more-trigger span { color: var(--yellow); font: 500 20px/1 var(--font-body); }
.screen-title .home-more-trigger:is(:hover,:focus-visible) { border-left-color: var(--yellow); color: var(--yellow); }
.screen-title .home-more-trigger:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.other-modes-panel { box-sizing: border-box; width: min(440px, calc(100vw - 32px)); max-height: min(620px, calc(100dvh - 32px)); margin: auto; padding: 0; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #63746e; border-left: 4px solid #e6d24b; border-radius: 2px; background: #111918; color: #fdf6e6; box-shadow: 0 20px 60px #000b; font-family: var(--font-body); }
.other-modes-panel::backdrop { background: #050908c9; }
.other-modes-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; border-bottom: 1px solid #52615b; background: #111918; }
.other-modes-header h2 { margin: 4px 0 0; font: 26px/1.1 var(--font-display); }
.other-modes-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 16px 20px; }
.other-mode-action { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; min-width: 0; min-height: 58px; padding: 10px 12px; border: 1px solid #52615b; border-radius: 2px; background: #1a2622; color: #fdf6e6; cursor: pointer; font: 800 13px/1.15 var(--font-body); text-align: left; }
.other-mode-action span { color: #cbd2ca; font: 12px/1.3 var(--font-body); }
.other-mode-action:is(:hover,:focus-visible) { border-color: #e6d24b; color: #e6d24b; }
.other-mode-action:focus-visible, .other-mode-guide:focus-visible { outline: 2px solid #e6d24b; outline-offset: 2px; }
.other-mode-mayhem { border-color: #8b7e37; }
.other-mode-guide { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; width: calc(100% - 40px); min-height: 52px; margin: 0 20px 18px; padding: 8px 12px; border: 0; border-top: 1px solid #52615b; background: transparent; color: #fdf6e6; cursor: pointer; font: 800 12px/1.2 var(--font-body); text-align: left; }
.other-mode-guide span { color: #cbd2ca; font: 12px/1.3 var(--font-body); }
@media (max-width: 420px) { .other-modes-header { padding-inline: 16px; } .other-modes-actions { padding-inline: 16px; } .other-mode-guide { width: calc(100% - 32px); margin-inline: 16px; } .other-mode-action { padding-inline: 9px; font-size: 12px; } }
.mayhem-guide { box-sizing: border-box; width: min(640px, calc(100vw - 32px)); max-height: min(680px, calc(100dvh - 32px)); margin: auto; padding: 0; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #63746e; border-left: 4px solid #e6d24b; border-radius: 2px; background: #111918; color: #fdf6e6; box-shadow: 0 20px 60px #000b; font-family: var(--font-body); }
.mayhem-guide::backdrop { background: #050908c9; }
.mayhem-guide-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 20px 20px 12px; border-bottom: 1px solid #52615b; background: #111918; }
.mayhem-guide-kicker { color: #e6d24b; font: 800 11px/1.2 var(--font-body); }
.mayhem-guide h2 { margin: 4px 0 0; font: 28px/1.1 var(--font-display); }
.mayhem-guide-close { min-width: 64px; min-height: 44px; padding: 8px; border: 1px solid #81918a; background: transparent; color: inherit; cursor: pointer; font: 700 12px var(--font-body); }
.mayhem-guide-close:is(:hover,:focus-visible) { border-color: #e6d24b; color: #e6d24b; }
.mayhem-guide-close:focus-visible { outline: 3px solid #e6d24b; outline-offset: 2px; }
.mayhem-guide-intro { margin: 0; padding: 14px 20px 2px; color: #cbd2ca; font: 14px/1.45 var(--font-body); }
.mayhem-guide-list { padding: 4px 20px 20px; }
.mayhem-guide-section { margin: 14px 0 0; }
.mayhem-guide-section h3 { margin: 0; padding: 8px 0; border-bottom: 1px solid #839087; color: #e6d24b; font: 800 11px/1.2 var(--font-body); }
.mayhem-guide-section dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: 0; }
.mayhem-guide-item { min-width: 0; padding: 12px 0; border-bottom: 1px solid #52615b; }
.mayhem-guide dt { display: flex; align-items: center; gap: 8px; font: 800 13px/1.2 var(--font-body); }
.mayhem-guide dd { margin: 3px 0 0 28px; color: #cbd2ca; font: 13px/1.35 var(--font-body); }
.mayhem-guide .mayhem-symbol { width: 20px; height: 20px; }
.mayhem-ball-state { display: flex; align-items: center; gap: 5px; margin-top: 5px; padding-top: 5px; border-top: 1px solid #66716b; font-size: 10px; font-weight: 800; }
.mayhem-ball-state .mayhem-symbol { width: 17px; height: 17px; }
@media (max-width: 520px) { .mayhem-guide-list { padding-inline: 16px; } .mayhem-guide-section dl { grid-template-columns: 1fr; } .mayhem-guide-header { padding: 16px 16px 10px; } .mayhem-guide-intro { padding-inline: 16px; } }
.mayhem-arm, .mayhem-choices button { min-height: 48px; border: 1px solid #e6d24b; border-radius: 2px; background: #17221f; color: #fdf6e6; font: 800 12px Arial, sans-serif; cursor: pointer; }
.mayhem-arm { width: 100%; margin-top: 6px; }
.mayhem-arm[aria-pressed="true"] { background: #e6d24b; color: #111b19; }
.mayhem-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; margin-top: 6px; }
.mayhem-choices button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 5px; }
.mayhem-choices small { font-size: 10px; line-height: 1.15; font-weight: 400; }
@media (max-width: 600px) { #mayhem-controls { bottom: max(60px, env(safe-area-inset-bottom)); left: 8px; gap: 5px; } .mayhem-seat { width: min(166px, 43vw); padding: 6px; } .mayhem-choices { grid-template-columns: 1fr; } .mayhem-choices button { min-height: 44px; } }

/* MAYHEM on the home screen: a slab of lava thrown down off-square, with a scrawl that will not sit still. */
.screen-title .btn.home-mayhem { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; width: 100%; min-height: 54px; padding: 8px 16px; border: 0; background: #e2552a; color: #f4eee0; text-align: left; transform: rotate(-1.2deg); box-shadow: 4px 5px 0 #18201b; clip-path: none; touch-action: manipulation; }
.screen-title .home-mayhem .home-mayhem-name { font: 800 var(--text-xl)/1 var(--font-display); letter-spacing: .02em; color: #18201b; white-space: nowrap; }
.screen-title .home-mayhem small { grid-column: 1; font: 700 var(--text-xs)/1.1 var(--font-body); color: #f4eee0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-mayhem-scrawl { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 28px; color: #f4d64e; animation: home-mayhem-boil .5s steps(1) infinite; }
@keyframes home-mayhem-boil { 0% { transform: rotate(-3deg) translate(0, 0); } 25% { transform: rotate(2deg) translate(1px, -1px); } 50% { transform: rotate(-1deg) translate(-1px, 1px); } 75% { transform: rotate(4deg) translate(1px, 1px); } }
@media (hover: hover) { .screen-title .btn.home-mayhem:hover { background: #f4d64e; color: #18201b; transform: rotate(0deg); } .screen-title .home-mayhem:hover small { color: #18201b; } .screen-title .home-mayhem:hover .home-mayhem-scrawl { color: #e2552a; } }
.screen-title .home-mayhem:focus-visible { outline: 3px solid #f4d64e; outline-offset: 3px; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .home-mayhem-scrawl { animation: none; } }
/* Solo and two-player MAYHEM share one row, so the home menu grows by one row and no more. */
.screen-title .home-mayhem-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.screen-title .btn.home-mayhem-two { grid-template-columns: 1fr; justify-items: center; width: auto; min-width: 58px; padding-inline: 10px; background: #18201b; color: #f4d64e; text-align: center; transform: rotate(1.6deg); box-shadow: 4px 5px 0 #e2552a; }
.screen-title .home-mayhem-two .home-mayhem-name { color: #f4d64e; }
@media (hover: hover) { .screen-title .btn.home-mayhem-two:hover { box-shadow: 4px 5px 0 #18201b; } .screen-title .home-mayhem-two:hover .home-mayhem-name { color: #18201b; } }
/* Street Legends and Other modes sit side by side, which gives back the row MAYHEM took. */
.screen-title .menu-stack > :is(.home-venues, .home-more-trigger) { grid-column: auto; }
.screen-title .menu-stack > .home-venues { text-align: center; padding-inline: 12px; font-size: var(--text-sm); }
.screen-title .menu-stack > .home-more-trigger { min-height: 0; height: 100%; }
@media (max-width: 480px) { .home-mayhem-scrawl { display: none; } }

/* Phones and small tablets: a seat never grows up over the pitch. Its meter stays on the left and whatever it
   offers (two powers to choose from, or the button that arms one) sits beside it in the same row. While a side is
   choosing, its seat takes the row: the other seat and the camera buttons step aside until the choice is made. */
@media (max-width: 900px), (max-height: 500px) {
  #mayhem-controls { left: max(8px, env(safe-area-inset-left)); gap: 5px; align-items: stretch; max-width: calc(100vw - 16px); }
  .mayhem-seat { display: grid; grid-template-columns: 112px auto; column-gap: 8px; align-content: center; width: auto; min-height: 56px; padding: 6px 8px; }
  .mayhem-seat > :is(.mayhem-seat-name, .mayhem-marks, .mayhem-power-name, .mayhem-ball-state) { grid-column: 1; min-width: 0; }
  .mayhem-seat > :is(.mayhem-arm, .mayhem-choices) { grid-column: 2; grid-row: 1 / span 4; align-self: stretch; margin: 0; }
  .mayhem-marks { margin: 4px 0; }
  .mayhem-ball-state { margin-top: 3px; padding-top: 3px; }
  .mayhem-arm { width: auto; min-width: 104px; max-width: 132px; padding-inline: 8px; }
  .mayhem-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .mayhem-choices button { min-height: 48px; padding: 4px 6px; }
  #mayhem-controls[data-choosing="home"] .mayhem-seat[data-side="away"], #mayhem-controls[data-choosing="away"] .mayhem-seat[data-side="home"] { display: none; }
  #mayhem-controls:is([data-choosing="home"], [data-choosing="away"]) .mayhem-seat { grid-template-columns: 104px minmax(0, 1fr); width: min(460px, calc(100vw - 16px)); box-sizing: border-box; }
  body.mayhem-choosing .player-camera { visibility: hidden; }
}
/* A phone held sideways has a free band under the table: the seats sit in it, beside the camera buttons. */
@media (max-height: 500px) { #mayhem-controls { bottom: max(8px, env(safe-area-inset-bottom)); } .mayhem-seat { grid-template-columns: 104px auto; } }
/* Upright phones: narrower seats so both fit the width, and a choosing seat drops into the space the camera buttons left. */
@media (max-width: 600px) {
  .mayhem-seat { grid-template-columns: 96px auto; padding: 6px; }
  #mayhem-controls:is([data-choosing="home"], [data-choosing="away"]) { bottom: max(8px, env(safe-area-inset-bottom)); }
}
/* Some camera views fill the screen with the table, so a seat can sit over a strip of pitch. Only its buttons take
   touches: a cap under the rest of a seat can still be picked up. And while a flick is being aimed the seats fade
   like the other match controls, so nothing hides where the cap is being pulled. */
.mayhem-seat { pointer-events: none; transition: opacity 220ms ease; }
.mayhem-seat button { pointer-events: auto; }
body:has(#game-canvas.aiming) .mayhem-seat { opacity: .28; }
/* A small phone held sideways has no room for an arm button, the other seat and the camera buttons in one band. */
@media (max-height: 500px) and (max-width: 760px) {
  #mayhem-controls[data-arming="home"] .mayhem-seat[data-side="away"], #mayhem-controls[data-arming="away"] .mayhem-seat[data-side="home"] { display: none; }
}
@media (max-width: 600px) and (min-height: 501px) { #mayhem-controls { bottom: max(64px, calc(env(safe-area-inset-bottom) + 56px)); } } /* clear of the camera buttons below */
/* The seats' second home, just under the score bar, for when pieces have come to rest under the first (see avoid()). */
#mayhem-controls.mayhem-top, #mayhem-controls.mayhem-top:is([data-choosing="home"], [data-choosing="away"]) { bottom: auto; top: var(--mayhem-top, 72px); align-items: flex-start; }