/* Lobby prompts, crates and touch controls. Loaded last so it can adjust the earlier sheets. */
#lobby-prompt{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);z-index:6;padding:11px 18px;border-radius:9px;border:1px solid #b8f557aa;background:#12271fe6;color:#eaffc9;font:800 12px var(--display,Montserrat),sans-serif;letter-spacing:1px;box-shadow:0 3px 0 #14271e99;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
#lobby-prompt:hover{background:#1a3a2bf2}
body.menu-open #lobby-prompt{display:none}

.crate-view{display:grid;gap:14px}
.crate-wallet{margin:0;font-size:11px;font-weight:800;letter-spacing:1.5px;color:#c1d4c3}
.crate-note{margin:0;color:#ffb3a8;font-weight:700;font-size:13px}
.crate-odds{margin:0;font-size:11px;color:#a9bcae}
.crate-pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.crate-pool figure{margin:0;padding:8px;border-radius:9px;background:#ffffff0d;border:1px solid #ffffff1f;text-align:center}
.crate-pool figure.owned{border-color:#b8f55766;background:#b8f55712}
.crate-pool img{width:100%;height:74px;object-fit:contain;display:block}
.crate-pool figcaption{font-size:9px;font-weight:800;letter-spacing:.6px;margin-top:5px}
.crate-won{display:flex;gap:16px;align-items:center;padding:14px;border-radius:12px;background:#ffffff12;border:1px solid #ffffff33;animation:crate-pop .5s cubic-bezier(.2,1.5,.4,1)}
.crate-won.fresh{border-color:#ffd24a;background:linear-gradient(120deg,#ffd24a2e,#ffffff0d)}
.crate-won img{width:150px;height:110px;object-fit:contain}
.crate-won small{display:block;font-size:9px;font-weight:900;letter-spacing:2px;color:#ffd24a}
.crate-won b{display:block;font:900 24px var(--display,Montserrat),sans-serif;margin:3px 0}
.crate-won span{display:block;font-size:12px;color:#d5e3d6}
.crate-won button{margin-top:9px;padding:8px 14px;border-radius:7px;background:#b8f557;color:#14271f;font-weight:900;font-size:11px;letter-spacing:1px}
@keyframes crate-pop{from{transform:scale(.6) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.crate-won{animation:none}}

/* Touch screens: no text selection, no browser gestures over the field. */
#world canvas{touch-action:none}
@media(pointer:coarse){
 html,body{overscroll-behavior:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
 #joystick{left:max(22px,env(safe-area-inset-left));bottom:max(34px,env(safe-area-inset-bottom));width:124px;height:124px;background:#ffffff14;border:2px solid #ffffff40;opacity:.55;transition:opacity .15s}
 #joystick.held{opacity:1;background:#ffffff1f;border-color:#b8f557aa}
 #joystick>i{top:38px;left:38px;width:48px;height:48px;background:#ffffffb0;box-shadow:0 2px 8px #0005}
 .touch-actions{right:max(18px,env(safe-area-inset-right));bottom:max(30px,env(safe-area-inset-bottom));gap:12px;pointer-events:auto;align-items:flex-end}
 .touch-actions button{width:60px;height:60px;font-size:22px;font-weight:900;color:#fff;background:#172d20d9;border:2px solid #ffffff66;box-shadow:0 3px 0 #0b1a1288}
 .touch-actions button:active{transform:scale(.92)}
 .touch-actions button:last-child{width:88px;height:88px;font-size:38px}
 .touch-actions #touch-attack{width:74px;height:74px;font-size:30px;background:#e2473fe6;border-color:#ffd0cb}
 .touch-actions #touch-dash.cooling{background:#b8f55766;color:#14271f99}
 .touch-actions [hidden]{display:none}
 /* The on-screen buttons replace the keyboard ones. */
 .action-bar #ability-button,.action-bar #attack-button,#item-button,.dash-slot kbd,.reference-services,#quests-button{display:none!important}
 .action-bar{width:min(300px,46vw);bottom:10px}
 #lobby-prompt,#revive-button{bottom:130px;font-size:11px;padding:13px 16px}
 /* The wallet moves out of the left thumb's corner. */
 .wallet{left:auto;right:max(12px,env(safe-area-inset-right));top:58px;bottom:auto;transform:scale(.82);transform-origin:top right}
 .cooldown-track::after,.cooldown-track[data-hint]::after{display:none}
}
@media(pointer:coarse) and (max-height:480px){
 .left-rail{top:54px;transform:scale(.78);transform-origin:top left}
 #toast{top:36%}
 .right-rail{left:58px;max-width:230px;max-height:118px;overflow:hidden}
}
/* Upright phone: the buttons stack so they do not reach the stick. */
@media(pointer:coarse) and (orientation:portrait){
 .touch-actions{flex-direction:column-reverse;align-items:flex-end}
}
@media(pointer:coarse) and (max-height:480px){
 #joystick{width:104px;height:104px;bottom:18px}#joystick>i{top:31px;left:31px;width:42px;height:42px}
 .touch-actions{bottom:16px}.touch-actions button{width:52px;height:52px}.touch-actions button:last-child{width:74px;height:74px;font-size:32px}.touch-actions #touch-attack{width:64px;height:64px}
 #lobby-prompt,#revive-button{bottom:96px}
}

/* Five maps on the vote: small picture cards in a row. */
#vote-panel{width:min(700px,94vw)}
.vote-cards{grid-template-columns:repeat(5,1fr);gap:6px}
.vote-card{grid-template-columns:1fr;row-gap:4px;padding:5px;text-align:center;border-radius:8px;transition:transform .12s ease,border-color .12s ease}
.vote-card:hover{transform:translateY(-2px);border-color:#ffffff88}
.vote-card img{grid-row:auto;width:100%;height:auto;aspect-ratio:1.6;border-radius:5px}
.vote-card b{font-size:9px}
@media(max-width:560px){.vote-cards{grid-template-columns:repeat(3,1fr)}}

/* Loading screen in the colours of the menu. */
#loading{background:radial-gradient(ellipse at 50% 40%,#12372c 0,#081a16 55%,#030a09 100%);gap:18px}
#loading>b{font:800 12px/1 var(--font);letter-spacing:.42em;text-indent:.42em;color:#b8f557}
#loading .loading-mark{font:800 clamp(48px,9vw,92px)/.86 var(--display,var(--font));letter-spacing:.01em;color:#fff;text-shadow:0 5px 0 rgba(3,14,12,.9),0 16px 40px rgba(0,0,0,.55)}
#loading .loading-mark em{font-style:normal;color:#b8f557}
#loading>span:not(.loading-mark){font:600 14px/1 var(--font);letter-spacing:.06em;color:rgba(255,255,255,.7)}
#loading>i{width:min(60vw,360px);height:6px;border-radius:6px;margin-top:8px;background:linear-gradient(90deg,transparent,#b8f557,transparent) no-repeat,rgba(255,255,255,.1);background-size:40% 100%,100% 100%;animation:load-slide 1.2s ease-in-out infinite}
@keyframes load-slide{from{background-position:-70% 0,0 0}to{background-position:170% 0,0 0}}
@media(prefers-reduced-motion:reduce){#loading>i{animation:none}}

/* End of match: the result card in the colours of the menu. */
body[data-modal=result] #modal-backdrop,body[data-modal=online-result] #modal-backdrop{justify-content:center;padding:24px;background:radial-gradient(ellipse at 50% 45%,rgba(6,22,19,.35),rgba(2,8,7,.8));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body[data-modal=result] #modal,body[data-modal=online-result] #modal{width:min(560px,100%);padding:26px;border:0;border-radius:26px;background:linear-gradient(165deg,rgba(26,54,46,.92),rgba(8,20,18,.95));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(184,245,87,.22),0 30px 80px rgba(0,0,0,.6),0 0 70px rgba(184,245,87,.12);animation:result-in .45s cubic-bezier(.2,.9,.2,1) both}
@keyframes result-in{from{opacity:0;transform:translateY(24px) scale(.95)}to{opacity:1;transform:none}}
body[data-modal=result] #modal-title,body[data-modal=online-result] #modal-title{font:800 15px/1 var(--font);letter-spacing:.22em;color:#b8f557}
body[data-modal=result] #modal-eyebrow,body[data-modal=online-result] #modal-eyebrow{display:none}
body[data-modal=result] .result-banner,body[data-modal=online-result] .result-banner{margin:18px 0 10px;font:800 clamp(38px,7vw,64px)/.92 var(--display,var(--font));background:linear-gradient(180deg,#f2ffd0 5%,#b8f557 55%,#8fdc3a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 rgba(3,14,12,.9))}
body[data-modal=result] .result-note,body[data-modal=online-result] #modal-content>p{text-align:center;font:600 13px/1.5 var(--font);color:rgba(255,255,255,.78);margin:4px 0}
body[data-modal=online-result] #modal-content>p:last-of-type{margin:12px 0 18px;padding:12px;border-radius:14px;background:rgba(184,245,87,.1);border:1px solid rgba(184,245,87,.25);font-weight:800;color:#e6ffc0}
body[data-modal=result] .result-score{gap:10px;margin:18px 0}
body[data-modal=result] .result-score>div{padding:16px 8px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
body[data-modal=result] .result-score b{font:800 32px/1 var(--display,var(--font));color:#b8f557}
body[data-modal=result] .result-score small{display:block;margin-top:6px;font:800 9px/1 var(--font);letter-spacing:.16em;color:rgba(255,255,255,.65)}
body[data-modal=result] .menu-actions,body[data-modal=online-result] .menu-actions{gap:10px}
body[data-modal=result] .menu-actions button,body[data-modal=online-result] .menu-actions button{padding:15px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);font:800 13px var(--font);letter-spacing:.06em;transition:transform .12s ease,border-color .12s ease,filter .12s ease}
body[data-modal=result] .menu-actions button:hover,body[data-modal=online-result] .menu-actions button:hover{transform:translateY(-2px);border-color:#b8f557}
body[data-modal=result] .menu-actions .primary,body[data-modal=online-result] .menu-actions .primary{grid-column:span 2;border:0;background:linear-gradient(115deg,#d6ff86,#b8f557 45%,#8fdc3a);color:#0c211c;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 5px 0 #5f8a1f,0 14px 30px rgba(110,190,40,.28);font-size:15px}
body[data-modal=online-result] .menu-actions button:not(.primary){grid-column:span 2}
@media(prefers-reduced-motion:reduce){body[data-modal=result] #modal,body[data-modal=online-result] #modal{animation:none}}