/* v18: missões mais de jogo. Cartão à esquerda com ícone, etiqueta (principal / secundária / livre), passos e seta; diário; festa */
#mission.q { display:grid; grid-template-columns:44px 1fr; column-gap:11px; align-items:start; padding:11px 14px 11px 11px; border-radius:18px; max-width:min(390px,56vw); overflow:visible;
  background:linear-gradient(160deg,rgba(20,38,58,.94),rgba(8,16,26,.9)); border:1px solid rgba(255,210,87,.35); box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateX(-120%); transition:transform .55s cubic-bezier(.2,.9,.25,1.15); }
#mission.q.show { transform:none; }
#mission.q::before { display:none; }
#mission.q > * { grid-column:2; }
#micon { grid-column:1 !important; grid-row:1 / span 4; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-style:normal; font-size:24px;
  background:radial-gradient(circle at 35% 30%, #ffe48a, #f0a91e 70%); box-shadow:0 0 0 3px rgba(255,210,87,.25), 0 6px 14px rgba(240,169,30,.35); animation:qbob 3.2s ease-in-out infinite; }
#mission.q[data-kind=side] #micon { background:radial-gradient(circle at 35% 30%, #9ff0e6, #2ec4b6 70%); box-shadow:0 0 0 3px rgba(46,196,182,.25), 0 6px 14px rgba(46,196,182,.35); }
#mission.q[data-kind=free] #micon { background:radial-gradient(circle at 35% 30%, #cfe3ff, #3a86ff 70%); box-shadow:0 0 0 3px rgba(58,134,255,.25), 0 6px 14px rgba(58,134,255,.35); }
#mission.q[data-kind=side] { border-color:rgba(46,196,182,.45); }
#mission.q[data-kind=free] { border-color:rgba(58,134,255,.4); }
@keyframes qbob { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-2px) rotate(-4deg); } }
#mchip { justify-self:start; font:800 9.5px/1 var(--ui, system-ui); letter-spacing:.14em; text-transform:uppercase; color:#1a1206; background:#ffd23f; border-radius:999px; padding:4px 8px 3px; }
#mission.q[data-kind=side] #mchip { background:#2ec4b6; color:#062521; }
#mission.q[data-kind=free] #mchip { background:#3a86ff; color:#fff; }
#mission.q #mtitle { margin-top:5px; font:900 16px/1.15 var(--ui, system-ui); letter-spacing:0; text-transform:none; color:#fff; display:block; }
#mission.q #mtitle::before { display:none; }
#mission.q #mobj { margin-top:3px; font:600 13.5px/1.32 var(--ui, system-ui); color:#d9e6f0; }
#mprog { display:flex; gap:4px; align-items:center; margin-top:7px; }
#mprog:empty { display:none; }
#mprog i { flex:1; max-width:34px; height:5px; border-radius:3px; background:rgba(255,255,255,.18); }
#mprog i.on { background:linear-gradient(90deg,#ffd23f,#ff9a4d); box-shadow:0 0 6px rgba(255,210,87,.6); }
#mission.q[data-kind=side] #mprog i.on { background:linear-gradient(90deg,#2ec4b6,#9ff0e6); box-shadow:0 0 6px rgba(46,196,182,.6); }
#mprog small { font:800 11px var(--ui, system-ui); color:#fff; margin-left:4px; }
#mission.q #objdist { margin-top:7px; }
#mlog { pointer-events:auto; justify-self:start; margin-top:8px; display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:999px; padding:5px 10px; font:800 12px var(--ui, system-ui); cursor:pointer; }
#mlog b { min-width:18px; height:18px; border-radius:9px; background:#ff5a5a; color:#fff; font-size:11px; display:grid; place-items:center; padding:0 4px; }
#mlog b:empty { display:none; }
#mission.q.flash { animation:qflash 1.4s ease-out; }
#mission.q.flash #micon { animation:qpop .7s cubic-bezier(.2,1.6,.4,1); }
#mission.q.flash::after { content:'Novo objetivo'; position:absolute; left:62px; top:-11px; font:900 10px var(--ui, system-ui); letter-spacing:.14em; text-transform:uppercase; color:#1a1206; background:#fff; border-radius:999px; padding:4px 9px; box-shadow:0 4px 12px rgba(0,0,0,.3); animation:qtag 1.6s ease forwards; }
@keyframes qflash { 0% { box-shadow:0 0 0 0 rgba(255,210,87,.8), 0 10px 30px rgba(0,0,0,.35); } 100% { box-shadow:0 0 0 18px rgba(255,210,87,0), 0 10px 30px rgba(0,0,0,.35); } }
@keyframes qpop { 0% { transform:scale(.4) rotate(-20deg); } 100% { transform:scale(1) rotate(0); } }
@keyframes qtag { 0% { opacity:0; transform:translateY(6px); } 15% { opacity:1; transform:none; } 80% { opacity:1; } 100% { opacity:0; } }
#btnQuests .qe { font-size:19px; line-height:1; }
/* diário */
#qlog { position:fixed; inset:0; z-index:45; background:rgba(4,10,16,.45); opacity:0; pointer-events:none; transition:opacity .25s; }
#qlog.show { opacity:1; pointer-events:auto; }
#qlog .box { position:absolute; left:max(12px,env(safe-area-inset-left)); top:max(12px,env(safe-area-inset-top)); bottom:max(12px,env(safe-area-inset-bottom)); width:min(430px,92vw); overflow:auto; border-radius:20px;
  background:linear-gradient(170deg,#13283d,#0a1621); border:1px solid rgba(255,210,87,.3); box-shadow:0 20px 50px rgba(0,0,0,.5); color:#fff; transform:translateX(-30px); transition:transform .3s cubic-bezier(.2,.9,.3,1); }
#qlog.show .box { transform:none; }
#qlog header { position:sticky; top:0; z-index:1; padding:16px 52px 12px 18px; background:linear-gradient(180deg,#13283d 80%,rgba(19,40,61,0)); }
#qlog header b { display:block; font:900 20px var(--ui, system-ui); }
#qlog header small { display:block; margin-top:4px; font:600 12.5px/1.35 var(--ui, system-ui); color:#b9cbd9; }
#qlog .x { position:absolute; right:12px; top:12px; width:34px; height:34px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:15px; cursor:pointer; }
#qlog .list { padding:0 12px 16px; }
#qlog h4 { margin:14px 6px 6px; font:900 10.5px var(--ui, system-ui); letter-spacing:.16em; text-transform:uppercase; color:#2ec4b6; }
#qlog .qi { display:grid; grid-template-columns:40px 1fr auto; gap:10px; align-items:center; padding:10px; margin-top:7px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); animation:qin .35s ease both; }
#qlog .qi:nth-child(n) { animation-delay:calc(var(--i, 0) * 40ms); }
#qlog .qi > i { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-style:normal; font-size:21px; background:rgba(46,196,182,.18); }
#qlog .qi.main { background:rgba(255,210,87,.1); border-color:rgba(255,210,87,.35); } #qlog .qi.main > i { background:rgba(255,210,87,.25); }
#qlog .qi small { font:800 9.5px var(--ui, system-ui); letter-spacing:.12em; text-transform:uppercase; color:#9fb6c8; }
#qlog .qi b { display:block; font:800 15px var(--ui, system-ui); margin-top:2px; }
#qlog .qi p { margin:3px 0 0; font:500 12.5px/1.35 var(--ui, system-ui); color:#c9d7e2; }
#qlog .qi button { border:0; border-radius:999px; padding:8px 11px; font:800 12px var(--ui, system-ui); background:#fff; color:#0c1622; cursor:pointer; white-space:nowrap; }
#qlog .qi button.on { background:#2ec4b6; color:#062521; box-shadow:0 0 0 3px rgba(46,196,182,.3); }
#qlog .qi.main button.on { background:#ffd23f; color:#1a1206; box-shadow:0 0 0 3px rgba(255,210,87,.3); }
#qlog .qi.done { opacity:.7; } #qlog .qi.done > i { background:rgba(120,220,140,.25); color:#8ef0a0; font-weight:900; }
#qlog .qi.lock { opacity:.55; }
@keyframes qin { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:none; } }
/* missão cumprida */
#qdone { position:fixed; inset:0; z-index:44; pointer-events:none; display:grid; place-items:start center; }
#qdone .b { margin-top:max(70px,12vh); text-align:center; color:#fff; padding:16px 26px 14px; border-radius:20px; background:linear-gradient(160deg,rgba(20,38,58,.96),rgba(8,16,26,.94)); border:2px solid #ffd23f; box-shadow:0 0 40px rgba(255,210,87,.45); opacity:0; transform:scale(.6); }
#qdone.show .b { animation:qwin 4.2s cubic-bezier(.2,1.4,.4,1) forwards; }
#qdone small { display:block; font:900 11px var(--ui, system-ui); letter-spacing:.2em; text-transform:uppercase; color:#ffd23f; }
#qdone b { display:block; font:900 clamp(20px,3.4vw,30px) var(--ui, system-ui); margin:4px 0; }
#qdone span { font:700 13px var(--ui, system-ui); color:#e8f0f6; }
@keyframes qwin { 0% { opacity:0; transform:scale(.6); } 10% { opacity:1; transform:scale(1.06); } 16% { transform:scale(1); } 85% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(.95) translateY(-10px); } }
#qdone .cf { position:absolute; left:50%; top:max(90px,14vh); }
#qdone .cf i { position:absolute; width:8px; height:13px; border-radius:2px; background:var(--c); opacity:0; }
#qdone.show .cf i { animation:qcf var(--d) ease-out forwards; }
@keyframes qcf { 0% { opacity:1; transform:translate(0,0) rotate(0); } 100% { opacity:0; transform:translate(var(--x), 60vh) rotate(var(--r)); } }
@media (max-height:500px) {
  #mission.q { grid-template-columns:34px 1fr; padding:7px 10px 8px 8px; max-width:min(330px,46vw); column-gap:8px; }
  #micon { width:34px; height:34px; font-size:18px; border-radius:11px; }
  #mission.q #mtitle { font-size:13.5px; margin-top:3px; } #mission.q #mobj { font-size:12px; }
  #mlog { margin-top:5px; padding:3px 8px; font-size:11px; }
  #mission.q.flash::after { left:50px; }
}
body.bcine-on #qdone { display:none; }
#hud.photo #mission.q { opacity:0; }