.phone.gate-loser{height:var(--phone-height,640px);border:0;border-radius:0;overflow:hidden;isolation:isolate;background:#082341 url('./assets/loser-gate.png') center/100% 100% no-repeat}
.gate-loser .gl-title{position:absolute;left:2%;top:3%;width:96%;height:34%;margin:0;z-index:2}
.gl-title img{display:block;width:100%;height:100%;object-fit:contain}
.gate-loser .gl-hero{position:absolute;left:15%;bottom:22%;width:70%;height:31%;object-fit:contain;object-position:bottom;image-rendering:pixelated;filter:drop-shadow(2px 3px 0 #152135)}
.gl-killer{position:absolute;z-index:3;top:37%;left:5%;width:90%;box-sizing:border-box;margin:0;padding:4px 0;text-align:center;color:#fff;font:15px/1.35 Bungee,sans-serif;overflow-wrap:anywhere;-webkit-text-stroke:3px #071b36;paint-order:stroke fill;text-shadow:0 2px #071b36}
.gl-killer:empty{display:none}
.gl-footer{position:absolute;bottom:3%;left:5%;width:90%;display:grid;gap:8px}
.gl-stats{height:54px;display:flex;background:transparent;border:0;color:#f2faff;text-shadow:2px 2px #071b36,-1px -1px #071b36}
.gl-stats>span{flex:1;display:grid;align-content:center;justify-items:center;font:28px/1 Bungee,sans-serif}.gl-stats>span+span{border:0}.gl-stats small{font:11px/1.4 Bungee,sans-serif}.gl-stats>span:last-child b{color:#ffdc36}
.gl-actions{display:grid;grid-template-columns:1fr 80px;gap:7px}
.gate-loser button{position:relative;inset:auto;transform:none;rotate:none;translate:none;display:block;width:100%;height:46px;margin:0;padding:0;font:22px/1 Bungee,sans-serif;cursor:pointer;border-radius:0}
.gate-loser .gl-play{color:#071b36;background:#ffcf26;border:3px solid #071b36;box-shadow:inset 0 3px #fff091,inset 0 -5px #da8f08;overflow:hidden;isolation:isolate}
.gate-loser .gl-play::after{pointer-events:none}
.gate-loser .gl-home{font-size:20px;color:#eefaff;background:transparent;border:0;box-shadow:none;text-shadow:2px 2px #071b36,-1px -1px #071b36}
.gate-loser button:focus-visible{outline:3px solid white;outline-offset:2px}
@media(prefers-reduced-motion:no-preference){.gate-loser:not([hidden]) .gl-title{animation:gl-enter .25s ease-out both}.gate-loser:not([hidden]) .gl-hero{animation:gl-land .35s ease-out both}@keyframes gl-enter{from{opacity:0;translate:0 -12px}to{opacity:1;translate:0 0}}@keyframes gl-land{from{translate:0 -16px}70%{translate:0 3px}to{translate:0 0}}}

/* Five upright stars travel around an elliptical ring above the KO pose. */
.gl-dizzy{position:absolute;z-index:2;left:50%;top:48%;width:160px;height:40px;translate:-50% -50%;pointer-events:none}
.gl-dizzy::before{content:"";position:absolute;left:10px;top:6px;width:140px;height:28px;border:2px solid #e9fbff;border-left-color:transparent;border-right-color:transparent;border-radius:50%;opacity:.85}
.gl-star{position:absolute;width:20px;height:20px;offset-path:ellipse(70px 14px at 80px 20px);offset-distance:var(--phase);offset-rotate:0deg;filter:drop-shadow(0 1px #fff0a0)}
@media(prefers-reduced-motion:no-preference){.gate-loser:not([hidden]) .gl-star{animation:gl-orbit 2s linear infinite}@keyframes gl-orbit{from{offset-distance:var(--phase)}to{offset-distance:calc(var(--phase) + 100%)}}}

.gl-stats .gl-kos{color:#ff5545}