/* Shared look of the mission pages (world map, debrief): Brawler theme with the Lobby fonts. */
* { box-sizing: border-box; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; }
body { min-height: 100vh; font-family: 'Nunito', sans-serif; font-weight: 800; color: #fff; letter-spacing: .2px;
  background: repeating-conic-gradient(from 0deg at 50% 300px, #ffffff0c 0 8deg, transparent 8deg 16deg), radial-gradient(circle at 50% 300px, #4fb2ff 0, #2462e0 650px, #173b9c 1300px) #173b9c; }
.L { font-family: 'Luckiest Guy', sans-serif; font-weight: 400; letter-spacing: 1px; }
.T { font-family: 'Titan One', sans-serif; font-weight: 400; }
.o { -webkit-text-stroke: 2.5px #10183a; paint-order: stroke fill; text-shadow: 0 4px 0 #10183a; }
.sh { filter: drop-shadow(0 14px 12px rgba(0,0,0,.3)); }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }

.top { display: flex; align-items: center; gap: 14px; padding: 20px 0; flex-wrap: wrap; }
.logo { font-family: 'Luckiest Guy', sans-serif; font-size: 30px; letter-spacing: 1px; -webkit-text-stroke: 2.5px #10183a; paint-order: stroke fill; text-shadow: 0 4px 0 #10183a; }
.logo span { color: #ffd84d; }
.back { width: 50px; height: 50px; border-radius: 14px; background: #ffd84d; border: 4px solid #10183a; box-shadow: 0 4px 0 #10183a; display: grid; place-items: center; color: #10183a; font: 400 26px 'Luckiest Guy', sans-serif; }
.pills { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.pill { display: flex; align-items: center; gap: 6px; background: #10183a99; border-radius: 14px; padding: 4px 14px 4px 6px; font: 400 20px 'Luckiest Guy', sans-serif; letter-spacing: 1px; }
.pill img { height: 34px; }
.pill.shop { color: #fff; border: 3px solid #ffd84d; padding-right: 16px; transition: transform .12s; }
.pill.shop:hover { transform: translateY(-2px); }
.snd { width: 46px; height: 46px; border-radius: 14px; border: 0; cursor: pointer; background: #10183a99; color: #fff; font-size: 22px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font: 400 28px 'Luckiest Guy', sans-serif; letter-spacing: 1px; color: #fff; background: linear-gradient(#ffe666, #ffb800); border: 4px solid #10183a; border-radius: 18px; padding: 8px 30px 4px; box-shadow: 0 6px 0 #10183a; -webkit-text-stroke: 2px #10183a; paint-order: stroke fill; transition: transform .1s, box-shadow .1s; }
.btn:hover { transform: translateY(2px); box-shadow: 0 4px 0 #10183a; }
.btn.g { background: linear-gradient(#7dff8a, #22c45a); }
.btn.b { background: linear-gradient(#7cc8ff, #2f7bff); }
.btn[disabled] { filter: grayscale(.7); opacity: .7; cursor: not-allowed; transform: none; }
.box { background: #10183aaa; border-radius: 20px; border: 3px solid #ffffff22; }
.card { background: #fff; color: #10183a; border-radius: 22px; border: 4px solid #10183a; box-shadow: 0 8px 0 #10183a; }
.bar { height: 18px; border-radius: 9px; background: #10183a; border: 2px solid #ffffff33; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3be06a, #a6ff5c); transition: width 1s ease-out; }

/* full-screen portal used when entering a mission and when coming back */
.portal-fx { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #fff 0, #c8f4ff 6%, #6ee7ff 14%, #8a3bff 34%, #2a0f6e 62%, #0a0726 100%); opacity: 0; transition: opacity .35s; }
.portal-fx.on { opacity: 1; }
.portal-fx .swirl { position: absolute; width: 1800px; height: 1800px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #ffffff22 0 6deg, transparent 6deg 16deg, #6ee7ff22 16deg 22deg, transparent 22deg 30deg); animation: spin 2.4s linear infinite; }
.portal-fx .gate { position: absolute; width: min(560px, 80vw); filter: drop-shadow(0 0 60px #6ee7ff); transform: scale(.6); transition: transform 1.6s cubic-bezier(.3, 0, .5, 1); }
.portal-fx.on .gate { transform: scale(1); }
.portal-fx .hero { position: absolute; height: 300px; transform: translate(max(-340px, -30vw), 140px) scale(1); transition: transform 1.3s cubic-bezier(.5, 0, .7, .4), opacity 1.3s; }
.portal-fx.in .hero { transform: translate(0, -30px) scale(.08) rotate(25deg); opacity: 0; }
.portal-fx .msg { position: absolute; bottom: 9vh; left: 0; right: 0; text-align: center; }
.portal-fx .msg .L { font-size: 56px; }
.portal-fx .msg p { margin-top: 6px; color: #d7e6ff; font-size: 18px; }
.portal-fx .flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .35s; }
.portal-fx.flash .flash { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .portal-fx .swirl { animation: none; } .portal-fx .gate, .portal-fx .hero { transition: none; } }

/* Kling portal clip shown full screen (js/game.js Game.portalVideo); the CSS portal above is the fallback. */
.portal-vid { position: fixed; inset: 0; z-index: 110; background: #1d0f55; display: grid; place-items: center; opacity: 0; transition: opacity .25s; }
.portal-vid.on { opacity: 1; }
.portal-vid video { width: 100%; height: 100%; object-fit: cover; }
.portal-vid .msg { position: absolute; left: 0; right: 0; bottom: 7vh; text-align: center; font: 400 52px 'Luckiest Guy', sans-serif; letter-spacing: 1px; color: #fff; -webkit-text-stroke: 2.5px #10183a; paint-order: stroke fill; text-shadow: 0 4px 0 #10183a; }
.portal-vid .msg small { display: block; font: 800 18px 'Nunito', sans-serif; color: #d7e6ff; -webkit-text-stroke: 0; text-shadow: none; margin-top: 4px; }
.portal-vid.gone { opacity: 0; pointer-events: none; transition: opacity .5s; }

/* Sign-in (js/auth.js): account button in the top bar and the sign-in box */
.acct { position: relative; }
.acct-b { border: 0; cursor: pointer; color: #fff; font: 400 18px 'Luckiest Guy', sans-serif; letter-spacing: 1px; padding: 4px 14px 4px 6px; }
.acct-b.signin { background: linear-gradient(#7dff8a, #22c45a); border: 3px solid #10183a; padding: 6px 16px 3px; -webkit-text-stroke: 1.5px #10183a; paint-order: stroke fill; }
.acct-pic { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #ffd84d; display: grid; place-items: center; font-size: 18px; background: #10183a; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; width: 300px; background: #fff; color: #10183a; border: 4px solid #10183a; border-radius: 20px; box-shadow: 0 7px 0 #10183a; padding: 14px; }
.acct-who { display: flex; align-items: center; gap: 12px; padding: 0 2px 12px; border-bottom: 2px dashed #e3e7f5; }
.acct-who b { display: block; font: 400 22px/1.05 'Luckiest Guy', sans-serif; letter-spacing: 1px; color: #10183a; word-break: break-all; }
.acct-who small { display: block; margin-top: 4px; color: #667; font: 700 12px/1.3 'Nunito', sans-serif; overflow-wrap: anywhere; }
.acct-edit, .acct-out { display: block; margin-top: 10px; width: 100%; font: 400 15px 'Titan One', sans-serif; letter-spacing: .3px; color: #10183a; border: 3px solid #10183a; border-radius: 14px; box-shadow: 0 4px 0 #10183a; padding: 7px 10px 6px; cursor: pointer; transition: transform .1s, box-shadow .1s; }
.acct-edit { background: linear-gradient(#ffe666, #ffb800); }
.acct-out { background: #f1f4ff; }
.acct-edit:hover, .acct-out:hover { transform: translateY(2px); box-shadow: 0 2px 0 #10183a; }
.acct-out:hover { background: #ffe1e1; }
.auth-ov { position: fixed; inset: 0; z-index: 90; background: #0a1030b3; display: grid; place-items: center; padding: 20px; }
.auth-box { position: relative; width: min(460px, 100%); padding: 30px 30px 24px; text-align: center; }
.auth-box h2 { font-size: 40px; margin-top: 4px; }
.auth-box > p { color: #3b4466; font-size: 16px; margin-top: 6px; }
.auth-kid { height: 130px; margin: -80px auto 0; filter: drop-shadow(0 10px 8px rgba(0,0,0,.25)); }
.auth-x { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 12px; border: 3px solid #10183a; background: #ffd84d; cursor: pointer; font: 400 20px 'Luckiest Guy', sans-serif; color: #10183a; }
.auth-btns { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 18px; }
.auth-g { min-height: 44px; }
.auth-dev { font-size: 20px; padding: 6px 22px 2px; }
.auth-err { color: #d22; font-size: 14px; min-height: 18px; margin-top: 10px; }

/* Avatars (Game.avatarHTML) and the player-name box (js/auth.js openProfile) */
.av { display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 40%, #fff 0, #cfe6ff 70%); border: 2px solid #ffd84d; vertical-align: middle; }
.av img { width: 82%; height: 82%; object-fit: contain; }
.av.face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.9); transform-origin: 50% 12%; }
.av.sm { width: 34px; height: 34px; }
.av.lg { width: 64px; height: 64px; border-width: 3px; }
.auth-box.pf { width: min(560px, 100%); }
.pf h2 { font-size: 34px; line-height: 1.05; padding: 0 30px; }
.pf h3 { font-size: 20px; margin-top: 18px; color: #10183a; }
.pf-name { display: flex; gap: 8px; margin-top: 16px; }
.pf-name input { flex: 1; min-width: 0; font: 400 26px 'Luckiest Guy', sans-serif; letter-spacing: 1px; color: #10183a; border: 3px solid #10183a; border-radius: 14px; padding: 8px 14px 4px; text-align: center; }
.pf-name input:focus { outline: 3px solid #ffd84d; }
.pf-dice { width: 54px; border: 3px solid #10183a; border-radius: 14px; background: #ffd84d; font-size: 26px; cursor: pointer; }
.pf-msg { min-height: 20px; margin-top: 6px; font-size: 14px; color: #d22; }
.pf-msg.good { color: #1b9a4b; }
.pf-avs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; max-height: 260px; overflow-y: auto; padding: 4px; }
.pf-avs button { border: 0; background: none; padding: 3px; border-radius: 50%; cursor: pointer; transition: transform .12s; }
.pf-avs button:hover { transform: scale(1.08); }
.pf-avs button.on { box-shadow: 0 0 0 4px #22c45a; }
.pf-more { display: block; margin-top: 8px; color: #667; font-size: 13px; }
.pf-save { margin-top: 16px; width: 100%; font-size: 26px; }
.pf-out { margin-top: 10px; background: none; border: 0; color: #667; font: 700 13px 'Nunito', sans-serif; text-decoration: underline; cursor: pointer; }
.acct-b .av.sm { border-width: 2px; }