/* The clock feeds a copper pipe. The icons mark 1, 3, 5 and 10 minutes. */
#arena .milestones{position:relative;isolation:isolate;display:block!important;width:min(950px,98%);height:70px;margin:6px auto 8px!important;flex:none;background:url('assets/arena-conduit.svg') center/100% 100% no-repeat;font:800 11px/1.05 system-ui,sans-serif;letter-spacing:.07em;color:#c7a88d;overflow:visible}
#arena .milestones .conduit-track{position:absolute;left:5%;right:5%;top:34px;height:10px;border:1px solid #9b5132;border-radius:20px;background:#10080e;box-shadow:inset 0 1px 3px #000,0 0 7px #b24c2538;overflow:hidden}
#arena .milestones .conduit-liquid{width:var(--track-fill,0%);height:100%;border-radius:20px;background:linear-gradient(180deg,#ffbe80 0%,#ee4533 30%,#aa001a 60%,#5b0612 100%);box-shadow:0 0 11px 3px #f62926a8,inset 0 1px 2px #fff5;transition:width .38s linear}
#arena .milestones .pump-piston{position:absolute;left:var(--track-fill,0%);top:0;width:8px;height:100%;border-radius:30%;background:#ffe1a1;box-shadow:0 0 12px 4px #ff632f;transform:translateX(-50%);animation:meterPiston .85s ease-in-out infinite alternate}
@keyframes meterPiston{to{filter:brightness(1.5);height:74%;top:13%}}
#arena .milestones span[data-at]{position:absolute;left:var(--checkpoint);top:2px;z-index:2;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;width:70px;min-width:0;text-align:center;color:#aa9692;text-shadow:0 1px 2px #080509;white-space:nowrap;transition:color .3s}
#arena .milestones span[data-at="60"]{--checkpoint:14%}#arena .milestones span[data-at="180"]{--checkpoint:32%}#arena .milestones span[data-at="300"]{--checkpoint:50%}#arena .milestones span[data-at="600"]{--checkpoint:95%}
#arena .checkpoint-symbol{position:relative;width:33px;height:33px;display:grid;place-items:center;border:2px solid #6e5955;border-radius:50%;background:radial-gradient(circle,#231e29 35%,#09080f 75%);box-shadow:inset 0 0 0 2px #110b10,0 3px 6px #000c;filter:grayscale(1) brightness(.72);transition:filter .35s,box-shadow .35s,border-color .35s}
#arena .checkpoint-symbol img{width:27px;height:27px;object-fit:contain;pointer-events:none}
#arena .milestones span b{font-size:10px;color:#cdb7a3}
#arena .milestones span small{font-size:9px;color:#a58c83;letter-spacing:.12em}
#arena .milestones span.won{color:#f9c979}
#arena .milestones span.won .checkpoint-symbol{filter:none;border-color:#f4a251;box-shadow:inset 0 0 0 2px #5a2118,0 0 12px 3px #ef542772}
#arena .milestones span.won b,#arena .milestones span.won small{color:#ffe0a5}
#arena .milestones span.won .checkpoint-symbol img{animation:checkpointWake .95s cubic-bezier(.12,.8,.26,1) both}
@keyframes checkpointWake{from{transform:scale(.4) rotate(-110deg)}to{transform:scale(1) rotate(0)}}

/* Four stone tablets hang from short linked chains. Only the tablets bob. */
#arena .player-cards{overflow:visible;gap:clamp(8px,1vw,15px);padding-top:18px;margin-top:0!important}
#arena .player-cards:has(.player-card:only-child){max-width:min(520px,96vw)}
#arena .player-cards:has(.player-card:nth-child(2):last-child){max-width:min(760px,96vw)}
#arena .player-card{position:relative;isolation:isolate;overflow:visible;min-width:0;padding:clamp(10px,1vw,15px);border:2px solid #745447;border-radius:5px 5px 11px 11px;background:linear-gradient(145deg,#28202beb,#17121aef 58%,#231319ee),url('assets/rhr-stone-wall.webp') center/320px auto;box-shadow:inset 0 0 0 2px #130e15,inset 0 10px 26px #f85e2010,0 13px 18px #0009;animation:tabletDrift 4.4s ease-in-out infinite;animation-delay:var(--stone-delay,0s);transition:border-color .24s,box-shadow .24s}
#arena .player-card::before{content:'';position:absolute;left:0;right:0;top:-23px;height:31px;background:url('assets/arena-chains.svg') center/100% 100% no-repeat;pointer-events:none;filter:drop-shadow(1px 3px 2px #000c)}
#arena .player-card::after{content:'';position:absolute;inset:5px;border:1px solid #9370553d;border-radius:1px 1px 8px 8px;pointer-events:none}
#arena .player-card:hover{animation-play-state:paused;border-color:#af7955;box-shadow:inset 0 0 0 2px #241317,inset 0 8px 32px #ec572b20,0 14px 22px #000b}
#arena .player-card:active{animation:none;transform:translateY(2px) rotate(.25deg);border-color:#c98756}
#arena .player-card.spin-ready{border-color:#bd7a4a}
#arena .player-card.finished{opacity:.72}
@keyframes tabletDrift{0%,100%{transform:translateY(0) rotate(-.18deg)}50%{transform:translateY(-4px) rotate(.18deg)}}
#arena .player-state{margin:6px 0 8px}
#arena .player-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
#arena .player-controls button{position:relative;min-width:0;min-height:62px;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px;border-radius:8px 8px 11px 11px;clip-path:polygon(7% 0,93% 0,100% 16%,100% 84%,93% 100%,7% 100%,0 84%,0 16%);touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent;transition:filter .16s,transform .16s,box-shadow .16s}
#arena .player-controls button:active:not(:disabled){transform:scale(.95) translateY(2px)}
#arena .player-controls button:focus-visible{clip-path:none;outline:3px solid #ffe2a6;outline-offset:3px}
#arena .player-controls .spin-btn{background:linear-gradient(145deg,#413b3e,#14121a 52%,#483d42);border:2px solid #756561;box-shadow:inset 0 0 0 2px #1b151a,inset 0 5px 9px #aaa1a024,0 4px 8px #0008}
#arena .spin-btn:disabled{opacity:.84;cursor:not-allowed}
#arena .spin-btn:disabled .spin-disc{filter:grayscale(1) brightness(.5)}
#arena .spin-btn:disabled .control-copy{color:#b4a49d}
#arena .spin-btn:not(:disabled){background:linear-gradient(145deg,#845038,#2b191c 54%,#6c3427);border-color:#eca368;box-shadow:inset 0 0 0 2px #3f1817,inset 0 7px 11px #e47c2b3f,0 0 14px #f2642849}
#arena .spin-btn:not(:disabled) .spin-disc{animation:wheelIdle 9s linear infinite;filter:drop-shadow(0 0 6px #ff8e3b)}
#arena .spin-btn:not(:disabled):hover{filter:brightness(1.18)}
@keyframes wheelIdle{to{transform:rotate(360deg)}}
#arena .spin-disc,#arena .quit-emblem{flex:none;width:clamp(29px,2.6vw,36px);height:clamp(29px,2.6vw,36px);display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#37292b,#110e15 73%);border:1px solid #8f6550;box-shadow:0 2px 4px #0009}
#arena .spin-disc img{width:100%;height:100%;object-fit:contain}
#arena .player-controls .surrender-btn{background:linear-gradient(145deg,#aa312b,#650c18 52%,#2d0710)!important;border:2px solid #fa9069!important;box-shadow:inset 0 0 0 2px #520816,inset 0 5px 14px #ff9e4b4b,0 4px 9px #0009}
#arena .surrender-btn:hover{filter:brightness(1.16)}
#arena .quit-emblem{border-color:#eb6b51;background:radial-gradient(circle,#3f080f,#18070c 72%)}
#arena .quit-emblem img{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 0 4px #ff2734)}
#arena .control-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;text-align:left;line-height:1.04;white-space:nowrap}
#arena .control-copy b{font:900 clamp(11px,1.15vw,16px)/1 system-ui,sans-serif;letter-spacing:.035em;color:#ffeed7}
#arena .control-copy small{font:700 clamp(8px,.75vw,10px)/1.2 system-ui,sans-serif;letter-spacing:.09em;color:#e0bd9f;margin-top:4px}
#arena .surrender-btn .control-copy small{color:#ffd5c1}
#arena .player-emblems{margin-top:8px}

/* The host needs headroom to bob above its text box without touching the header. */
#tutorial .host-slot,#entry .host-slot,#map .host-slot,#setup>.host-slot,#results>.host-slot,.hall-host-slot{overflow:visible;padding-top:clamp(10px,1.5svh,17px)}
#tutorial .host:not(.laugh):not(.lunge):not(.fly):not(.recoil) .avatar,#entry .host:not(.laugh):not(.lunge):not(.fly):not(.recoil) .avatar,#map .host:not(.laugh):not(.lunge):not(.fly):not(.recoil) .avatar,#setup .host:not(.laugh):not(.lunge):not(.fly):not(.recoil) .avatar,#results .host:not(.laugh):not(.lunge):not(.fly):not(.recoil) .avatar,.hall-host:not(.laugh) .avatar{animation:smallHostFloat 3.1s ease-in-out infinite}
@keyframes smallHostFloat{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-5px) rotate(.8deg)}}
/* A one-player sheet should end after the form, leaving the tunnel visible around it. */
#setup.active[data-step="0"]{justify-content:center;gap:5px}
#setup[data-step="0"] .setup-sheet{flex:0 1 auto;max-height:calc(100svh - var(--rhr-header-height,76px) - 115px);justify-content:flex-start;gap:8px}
#setup[data-step="0"] #setupBody{flex:0 0 auto;justify-content:flex-start}
#setup[data-step="0"] .actions{margin-top:clamp(10px,2svh,22px)}

@media(max-width:800px){
 #arena .milestones{width:min(100%,550px);height:63px;font-size:10px}
 #arena .checkpoint-symbol{width:30px;height:30px}
 #arena .checkpoint-symbol img{width:25px;height:25px}
 #arena .milestones span[data-at]{width:56px;top:1px}
 #arena .milestones .conduit-track{top:29px;height:9px}
 #arena .milestones span b{font-size:9px}
 #arena .milestones span small{font-size:8px}
 #arena .player-cards{padding-top:15px}
 #arena .player-card{animation-duration:5.5s}
 #arena .player-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
 #arena .player-controls button{min-height:52px;gap:5px;padding:5px 4px}
 #arena .spin-disc,#arena .quit-emblem{width:28px;height:28px}
 #arena .control-copy b{font-size:clamp(10px,2.5vw,13px)}
 #arena .control-copy small{font-size:8px}
}
@media(max-width:430px){#arena .player-controls{grid-template-columns:1fr}#arena .player-controls button{min-height:46px}#arena .player-card{padding:8px}#arena .player-emblems{margin-top:6px}}
@media(max-height:690px){#arena .milestones{height:57px}#arena .player-card{animation-duration:6s}#arena .player-controls button{min-height:50px}}
@media(prefers-reduced-motion:reduce){#arena .player-card,#arena .spin-btn:not(:disabled) .spin-disc,#arena .milestones .pump-piston,#tutorial .host .avatar,#entry .host .avatar,#map .host .avatar,#setup .host .avatar,#results .host .avatar,.hall-host .avatar{animation:none!important}#arena .milestones .conduit-liquid{transition:none}}