#bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} layout fits a phone held sideways and a desktop window. --sw / --sh = stage width / height in px. */ #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #4fa3ee; overscroll-behavior: none; #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} font-family: "Mitr", "Prompt", "Noto Sans Thai", "Leelawadee UI", "Segoe UI", system-ui, -apple-system, "Hiragino Sans", "Noto Sans CJK SC", "Microsoft YaHei", "Malgun Gothic", "Nirmala UI", sans-serif; #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} color: #3a2466; user-select: none; -webkit-user-select: none; touch-action: none; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #stage { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; --u: 1; --sw: 100vw; --sh: 100vh; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} body.rot #stage { left: 100%; width: var(--sw); height: var(--sh); transform-origin: 0 0; transform: rotate(90deg); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #unity-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; background: #4fa3ee; outline: none; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} button { font: inherit; color: inherit; border: 0; cursor: pointer; padding: 0; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .hide { display: none !important; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #top { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 40px); display: flex; align-items: center; gap: calc(var(--u) * 6px); #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} padding: calc(var(--u) * 5px) calc(var(--u) * 8px) 0; padding-left: max(calc(var(--u) * 8px), env(safe-area-inset-left)); padding-right: max(calc(var(--u) * 8px), env(safe-area-inset-right)); pointer-events: none; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #top > * { pointer-events: auto; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .pill { height: calc(var(--u) * 30px); min-width: calc(var(--u) * 30px); padding: 0 calc(var(--u) * 10px); border-radius: 999px; background: rgba(255,255,255,.92); #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} box-shadow: 0 calc(var(--u) * 2px) 0 rgba(58,36,102,.28); display: flex; align-items: center; gap: calc(var(--u) * 4px); font-size: calc(var(--u) * 15px); white-space: nowrap; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .pill b { font-weight: 600; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .pill .ico { font-size: calc(var(--u) * 14px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .pill.sq { padding: 0; width: calc(var(--u) * 34px); justify-content: center; font-weight: 600; font-size: calc(var(--u) * 14px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .pill.wave { background: linear-gradient(180deg, #ff9be0, #a66bff); color: #fff; text-shadow: 0 1px 0 rgba(58,36,102,.5); padding: 0 calc(var(--u) * 12px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .pill.wave i { font-style: normal; font-size: calc(var(--u) * 12px); opacity: .95; margin-left: calc(var(--u) * 4px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .pill.gold b { color: #a8651a; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .pill.en b { color: #2f7fd6; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .pill.en.low { animation: pulse 1s infinite; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .hp { flex: 1; min-width: 0; max-width: calc(var(--u) * 330px); display: flex; align-items: center; gap: calc(var(--u) * 4px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .hp .ico { font-size: calc(var(--u) * 18px); filter: drop-shadow(0 1px 0 rgba(255,255,255,.8)); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .hp .bar { position: relative; flex: 1; height: calc(var(--u) * 20px); border-radius: 999px; background: rgba(40,26,70,.55); border: calc(var(--u) * 2px) solid #fff; overflow: hidden; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .hp .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(180deg, #8dee6c, #46c04f); transition: width .18s; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .hp.mid .fill { background: linear-gradient(180deg, #ffe07a, #ffb02e); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .hp.low .fill { background: linear-gradient(180deg, #ff9a8a, #f0473e); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .hp.shield .bar { border-color: #ffe58a; box-shadow: 0 0 calc(var(--u) * 10px) #ffe58a; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .hp span#tHp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: calc(var(--u) * 12px); font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.6); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} @keyframes pulse { 50% { transform: scale(1.08); } } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bottom { position: absolute; left: max(calc(var(--u) * 8px), env(safe-area-inset-left)); right: max(calc(var(--u) * 8px), env(safe-area-inset-right)); bottom: calc(var(--u) * 6px); #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} display: flex; align-items: flex-end; gap: calc(var(--u) * 8px); pointer-events: none; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bottom > * { pointer-events: auto; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #left { flex: none; display: flex; gap: calc(var(--u) * 6px); margin-bottom: calc(var(--u) * 2px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #ui.tight .act b { display: none; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #ui.tight .act { padding: 0 calc(var(--u) * 11px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #ui.tight2 .sk { width: calc(var(--u) * 44px); height: calc(var(--u) * 44px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #ui.tight2 .go { padding: 0 calc(var(--u) * 12px); font-size: calc(var(--u) * 16px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #ui.tight3 .sk { width: calc(var(--u) * 38px); height: calc(var(--u) * 38px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #ui.tight3 #skills { gap: calc(var(--u) * 4px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .act { position: relative; height: calc(var(--u) * 44px); padding: 0 calc(var(--u) * 12px); border-radius: calc(var(--u) * 14px); background: rgba(255,255,255,.94); #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} box-shadow: 0 calc(var(--u) * 3px) 0 rgba(58,36,102,.3); display: flex; align-items: center; gap: calc(var(--u) * 5px); font-size: calc(var(--u) * 14px); font-weight: 600; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .act span { font-size: calc(var(--u) * 18px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .act:active, .go:active, .sk:active { transform: translateY(calc(var(--u) * 2px)); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .dot { position: absolute; right: calc(var(--u) * -3px); top: calc(var(--u) * -3px); width: calc(var(--u) * 12px); height: calc(var(--u) * 12px); border-radius: 50%; background: #ff4d6d; border: 2px solid #fff; display: none; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .dot.on { display: block; animation: pulse .9s infinite; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #skills { flex: 1; min-width: 0; display: flex; justify-content: center; gap: calc(var(--u) * 7px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .sk { flex: none; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .sk { position: relative; width: calc(var(--u) * 52px); height: calc(var(--u) * 52px); border-radius: calc(var(--u) * 16px); background: #fff; overflow: hidden; #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} box-shadow: 0 calc(var(--u) * 3px) 0 rgba(58,36,102,.35); border: calc(var(--u) * 2.5px) solid #fff; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .sk .pt { position: absolute; inset: 0; background-image: var(--pt); background-size: 700% 100%; background-repeat: no-repeat; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .sk .cd { position: absolute; inset: 0; background: conic-gradient(rgba(30,18,60,.72) var(--cd, 0%), rgba(30,18,60,0) 0); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .sk .lv { position: absolute; right: 0; bottom: 0; padding: 0 calc(var(--u) * 4px); border-top-left-radius: calc(var(--u) * 8px); background: rgba(58,36,102,.85); color: #fff; font-size: calc(var(--u) * 10px); line-height: 1.5; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .sk.ready { border-color: #ffe14d; box-shadow: 0 0 calc(var(--u) * 10px) #ffe14d, 0 calc(var(--u) * 3px) 0 rgba(58,36,102,.35); animation: pulse 1s infinite; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .sk.empty { background: rgba(255,255,255,.45); border-style: dashed; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 20px); color: #fff; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .go { flex: none; position: relative; height: calc(var(--u) * 52px); padding: 0 calc(var(--u) * 18px); border-radius: calc(var(--u) * 18px); #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} background: linear-gradient(180deg, #ffd65a, #ff9a2e); color: #5a2a00; font-size: calc(var(--u) * 18px); font-weight: 700; box-shadow: 0 calc(var(--u) * 4px) 0 #b65a10; display: flex; align-items: center; gap: calc(var(--u) * 8px); #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} animation: pulse 1.4s infinite; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .go i { font-style: normal; font-size: calc(var(--u) * 13px); background: rgba(255,255,255,.75); border-radius: 999px; padding: calc(var(--u) * 1px) calc(var(--u) * 7px); color: #2f7fd6; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #hint { position: absolute; left: 50%; bottom: calc(var(--u) * 66px); transform: translateX(-50%); padding: calc(var(--u) * 4px) calc(var(--u) * 12px); border-radius: 999px; background: rgba(58,36,102,.78); color: #fff; #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} font-size: calc(var(--u) * 13px); pointer-events: none; opacity: 0; transition: opacity .3s; white-space: nowrap; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #hint.on { opacity: 1; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .lnk { position: absolute; right: max(calc(var(--u) * 10px), env(safe-area-inset-right)); top: calc(var(--u) * 44px); padding: calc(var(--u) * 4px) calc(var(--u) * 12px); border-radius: 999px; #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} background: rgba(42,31,82,.82); color: #ffd65a; font-size: calc(var(--u) * 12px); font-weight: 600; text-decoration: none; box-shadow: 0 calc(var(--u) * 2px) 0 rgba(20,10,50,.35); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #drawer { position: absolute; right: 0; top: calc(var(--u) * 42px); bottom: 0; width: min(calc(var(--u) * 300px), 52%); background: rgba(255,250,244,.97); border-top-left-radius: calc(var(--u) * 18px); #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} box-shadow: calc(var(--u) * -4px) 0 calc(var(--u) * 16px) rgba(40,26,70,.3); transform: translateX(105%); transition: transform .2s; display: flex; flex-direction: column; padding-right: env(safe-area-inset-right); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #drawer.on { transform: none; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .dh { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 8px) calc(var(--u) * 12px) calc(var(--u) * 4px); font-size: calc(var(--u) * 16px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .dh button { width: calc(var(--u) * 30px); height: calc(var(--u) * 30px); border-radius: 50%; background: #efe4ff; font-size: calc(var(--u) * 14px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #rows { flex: 1; overflow-y: auto; padding: 0 calc(var(--u) * 8px) calc(var(--u) * 10px); touch-action: pan-y; -webkit-overflow-scrolling: touch; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .row { display: flex; align-items: center; gap: calc(var(--u) * 8px); padding: calc(var(--u) * 6px); margin-top: calc(var(--u) * 6px); border-radius: calc(var(--u) * 14px); background: #fff; box-shadow: 0 calc(var(--u) * 2px) 0 rgba(58,36,102,.12); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .row .ic { flex: none; width: calc(var(--u) * 42px); height: calc(var(--u) * 42px); border-radius: calc(var(--u) * 12px); background: #f1e8ff center/700% 100% no-repeat; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 22px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .row .ic.pt { background-image: var(--pt); background-size: 700% 100%; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .row .tx { flex: 1; min-width: 0; line-height: 1.25; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .row .tx b { display: block; font-size: calc(var(--u) * 14px); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .row .tx small { display: block; font-size: calc(var(--u) * 11px); opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .buy { flex: none; min-width: calc(var(--u) * 66px); height: calc(var(--u) * 36px); padding: 0 calc(var(--u) * 8px); border-radius: calc(var(--u) * 12px); background: linear-gradient(180deg, #8dee6c, #46c04f); color: #fff; font-weight: 600; #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} font-size: calc(var(--u) * 13px); box-shadow: 0 calc(var(--u) * 3px) 0 #2c8a36; text-shadow: 0 1px 0 rgba(0,0,0,.25); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .buy.no { background: #d9d3e6; box-shadow: 0 calc(var(--u) * 3px) 0 #b3abc6; color: #7a6f94; text-shadow: none; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .buy:active { transform: translateY(calc(var(--u) * 2px)); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #veil { position: absolute; inset: 0; background: rgba(34,20,66,.55); display: none; align-items: center; justify-content: center; padding: calc(var(--u) * 10px); z-index: 20; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #veil.on { display: flex; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card { width: min(calc(var(--u) * 380px), 94%); max-height: 96%; overflow-y: auto; background: linear-gradient(180deg, #ffffff, #fff3fb); border-radius: calc(var(--u) * 22px); padding: calc(var(--u) * 14px) calc(var(--u) * 16px); #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} text-align: center; box-shadow: 0 calc(var(--u) * 8px) 0 rgba(58,36,102,.35); touch-action: pan-y; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card.wide { width: min(calc(var(--u) * 520px), 96%); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card h2 { margin: 0 0 calc(var(--u) * 6px); font-size: calc(var(--u) * 21px); font-weight: 700; color: #7a3fe0; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card p { margin: calc(var(--u) * 4px) 0 calc(var(--u) * 8px); font-size: calc(var(--u) * 14px); line-height: 1.45; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .big, .ghost { display: block; width: 100%; margin-top: calc(var(--u) * 8px); padding: calc(var(--u) * 10px); border-radius: calc(var(--u) * 14px); font-size: calc(var(--u) * 16px); font-weight: 600; text-decoration: none; text-align: center; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .big { background: linear-gradient(180deg, #ff8fdc, #a66bff); color: #fff; box-shadow: 0 calc(var(--u) * 4px) 0 #6a3fc0; text-shadow: 0 1px 0 rgba(58,36,102,.4); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .big:disabled { filter: grayscale(.7); opacity: .7; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .ghost { background: #f1e8ff; color: #5a3ab0; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .rowopt { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--u) * 8px); font-size: calc(var(--u) * 15px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .sw { min-width: calc(var(--u) * 96px); padding: calc(var(--u) * 6px) calc(var(--u) * 10px); border-radius: calc(var(--u) * 12px); background: #f1e8ff; color: #5a3ab0; font: inherit; font-weight: 600; border: 0; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .gain { display: flex; justify-content: center; gap: calc(var(--u) * 14px); font-size: calc(var(--u) * 17px); font-weight: 600; margin: calc(var(--u) * 6px) 0; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .newhero { display: flex; align-items: center; gap: calc(var(--u) * 10px); text-align: left; padding: calc(var(--u) * 8px); border-radius: calc(var(--u) * 16px); background: linear-gradient(90deg, #fff1b8, #ffe0f7); margin: calc(var(--u) * 6px) 0; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .newhero .ic { flex: none; width: calc(var(--u) * 64px); height: calc(var(--u) * 64px); border-radius: calc(var(--u) * 16px); background: #fff var(--pt) 0 0/700% 100% no-repeat; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .newhero b { display: block; font-size: calc(var(--u) * 16px); color: #7a3fe0; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .newhero small { font-size: calc(var(--u) * 12px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .xp { display: block; margin-top: calc(var(--u) * 8px); padding: calc(var(--u) * 8px); border-radius: calc(var(--u) * 14px); background: #2a1f52; color: #fff; text-decoration: none; font-size: calc(var(--u) * 13px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .xp b { color: #ffd65a; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * 6px); margin: calc(var(--u) * 6px) 0; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .slot { position: relative; height: calc(var(--u) * 58px); border-radius: calc(var(--u) * 14px); background: #f1e8ff center/700% 100% no-repeat; border: calc(var(--u) * 3px) solid transparent; display: flex; align-items: flex-end; justify-content: center; #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} font-size: calc(var(--u) * 11px); overflow: hidden; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .slot .p { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 1 / 1; transform: translateX(-50%); background: var(--pt) 0 0 / 700% 100% no-repeat; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .slot span { position: relative; background: rgba(58,36,102,.8); color: #fff; padding: 0 calc(var(--u) * 6px); border-radius: 999px; margin-bottom: calc(var(--u) * 2px); white-space: nowrap; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .slot.sel { border-color: #ff8fdc; box-shadow: 0 0 calc(var(--u) * 8px) #ff8fdc; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .slot.lock { opacity: .6; align-items: center; font-size: calc(var(--u) * 11px); padding: calc(var(--u) * 4px); line-height: 1.2; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .pick { display: flex; gap: calc(var(--u) * 6px); justify-content: center; flex-wrap: wrap; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .pick .slot { width: calc(var(--u) * 58px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .adrow { display: flex; gap: calc(var(--u) * 12px); align-items: stretch; text-align: left; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .adimg { flex: 0 0 46%; display: block; border-radius: calc(var(--u) * 14px); overflow: hidden; background: #2a2350; min-height: calc(var(--u) * 120px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .adimg img { width: 100%; height: 100%; object-fit: cover; display: block; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .adtx { flex: 1; min-width: 0; display: flex; flex-direction: column; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .adtx small { font-size: calc(var(--u) * 11px); opacity: .6; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .adtx h2 { margin-top: calc(var(--u) * 2px) !important; font-size: calc(var(--u) * 18px) !important; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .adtx p { flex: 1; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .skill { text-align: left; background: #f7f0ff; border-radius: calc(var(--u) * 12px); padding: calc(var(--u) * 6px) calc(var(--u) * 10px); font-size: calc(var(--u) * 13px); line-height: 1.4; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .skill b { color: #7a3fe0; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #toast { position: absolute; left: 50%; top: calc(var(--u) * 52px); transform: translateX(-50%); padding: calc(var(--u) * 6px) calc(var(--u) * 16px); border-radius: 999px; background: rgba(58,36,102,.9); color: #fff; font-size: calc(var(--u) * 15px); #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 30; white-space: nowrap; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #toast.on { opacity: 1; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #toast.boss { background: linear-gradient(180deg, #ff6a7a, #c22a4a); font-size: calc(var(--u) * 20px); font-weight: 700; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #load { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 6px); #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} background: radial-gradient(circle at 50% 35%, #ffb8ee, #b56cff 55%, #4c2cc4); color: #fff; text-align: center; transition: opacity .4s; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #load.off { opacity: 0; pointer-events: none; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #load img { width: min(calc(var(--u) * 250px), 60%); height: auto; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #load h1 { margin: 0; font-size: calc(var(--u) * 26px); font-weight: 700; text-shadow: 0 calc(var(--u) * 3px) 0 #3a1b8c; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #load .track { width: min(calc(var(--u) * 260px), 70%); height: calc(var(--u) * 12px); border-radius: 999px; background: rgba(36,9,63,.45); overflow: hidden; border: 2px solid #fff; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #load .fill { height: 100%; width: 0; background: linear-gradient(90deg, #ffe14d, #ff9a2e); transition: width .2s; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #load p { margin: 0; font-size: calc(var(--u) * 13px); opacity: .95; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #cut { position: absolute; left: 50%; top: calc(var(--u) * 116px); #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} height: calc(var(--u) * 44px); display: flex; align-items: center; gap: calc(var(--u) * 8px); #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} padding: 0 calc(var(--u) * 22px) 0 calc(var(--u) * 4px); border-radius: 999px; background: linear-gradient(90deg, rgba(58,36,102,.94), rgba(122,63,224,.88)); color: #fff; #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} font-weight: 700; font-size: calc(var(--u) * 19px); white-space: nowrap; pointer-events: none; transform: translateX(-50%) scale(0); opacity: 0; z-index: 15; #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} box-shadow: 0 calc(var(--u) * 3px) 0 rgba(20,10,50,.35); text-shadow: 0 2px 0 rgba(0,0,0,.35); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #cut.on { animation: cut 1.1s ease-out both; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #cut .p { width: calc(var(--u) * 40px); height: calc(var(--u) * 40px); border-radius: 50%; background: #fff var(--pt) 0 0 / 700% 100% no-repeat; border: calc(var(--u) * 2px) solid #ffe14d; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #cut.c0 { background: linear-gradient(90deg, rgba(120,30,20,.94), rgba(255,120,90,.9)); } #cut.c1 { background: linear-gradient(90deg, rgba(30,90,40,.94), rgba(110,200,90,.9)); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #cut.c2 { background: linear-gradient(90deg, rgba(120,50,10,.94), rgba(255,150,60,.9)); } #cut.c3 { background: linear-gradient(90deg, rgba(110,80,10,.94), rgba(245,200,70,.92)); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #cut.c4 { background: linear-gradient(90deg, rgba(25,50,120,.94), rgba(110,160,255,.9)); } #cut.c5 { background: linear-gradient(90deg, rgba(110,10,30,.94), rgba(255,70,90,.9)); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #cut.c6 { background: linear-gradient(90deg, rgba(70,30,120,.94), rgba(190,130,255,.9)); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} @keyframes cut { 0% { transform: translateX(-50%) scale(.3); opacity: 0; } 14% { transform: translateX(-50%) scale(1.12); opacity: 1; } 24% { transform: translateX(-50%) scale(1); } 78% { transform: translateX(-50%) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-40%) scale(1); opacity: 0; } } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .sk .st { position: absolute; left: calc(var(--u) * 3px); top: 0; font-size: calc(var(--u) * 9px); line-height: 1.4; color: #ffd23c; text-shadow: 0 1px 0 #3a2466, 0 0 2px #3a2466; letter-spacing: -1px; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .stars { font-size: calc(var(--u) * 30px); letter-spacing: calc(var(--u) * 4px); margin: calc(var(--u) * 2px) 0; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .stars i { display: inline-block; font-style: normal; filter: grayscale(1) opacity(.3); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .stars i.on { filter: none; animation: pop .4s both; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .stars i.on:nth-child(2) { animation-delay: .15s; } .stars i.on:nth-child(3) { animation-delay: .3s; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} @keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .adb { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: calc(var(--u) * 44px); height: calc(var(--u) * 36px); padding: 0 calc(var(--u) * 6px); #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} border-radius: calc(var(--u) * 12px); background: linear-gradient(180deg, #ffd56a, #ff9f43); color: #fff; font-weight: 600; font-size: calc(var(--u) * 15px); line-height: 1; #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} box-shadow: 0 calc(var(--u) * 3px) 0 #d0762a; text-shadow: 0 1px 0 rgba(120,60,10,.35); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .adb i { font-style: normal; font-size: calc(var(--u) * 9px); margin-top: calc(var(--u) * 2px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .adb.wide { flex-direction: row; gap: calc(var(--u) * 4px); font-size: calc(var(--u) * 13px); padding: 0 calc(var(--u) * 10px); white-space: nowrap; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .adb:active, .adx:active { transform: translateY(calc(var(--u) * 2px)); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .row.boost { background: linear-gradient(90deg, #fff4e0, #ffffff); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .row.boost .ic { background: #ffe7c2; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .okp { flex: none; font-weight: 600; color: #2f9a45; font-size: calc(var(--u) * 13px); padding: 0 calc(var(--u) * 6px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .freeleft { margin: calc(var(--u) * 6px) calc(var(--u) * 4px) 0; font-size: calc(var(--u) * 12px); color: #b0611a; font-weight: 600; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .adx { display: block; width: 100%; margin-top: calc(var(--u) * 8px); padding: calc(var(--u) * 9px); border-radius: calc(var(--u) * 14px); font-size: calc(var(--u) * 15px); font-weight: 600; #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} background: linear-gradient(180deg, #ffd56a, #ff9f43); color: #fff; box-shadow: 0 calc(var(--u) * 4px) 0 #d0762a; text-shadow: 0 1px 0 rgba(120,60,10,.35); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .adx b { white-space: nowrap; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .gain em.x2 { font-style: normal; color: #ff7a2a; margin-left: calc(var(--u) * 4px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .row.boost .tx b { white-space: normal; font-size: calc(var(--u) * 13px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .story p { text-align: left; color: #5b4a6e; margin: calc(var(--u) * 6px) 0; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .story p:first-child::first-letter { font-size: 1.5em; color: #7a3fe0; font-weight: 700; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .chap { padding: calc(var(--u) * 6px) 0 calc(var(--u) * 4px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .chap small { display: block; letter-spacing: .08em; color: #e0782a; font-size: calc(var(--u) * 12px); font-weight: 700; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .chap h2 { font-size: calc(var(--u) * 26px); margin: calc(var(--u) * 4px) 0; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .chap p { color: #6b5a7a; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .sk.gate { border-color: #6ab8ff; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .sk.gate.empty { border-color: #6ab8ff; color: #dff0ff; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .sk .gm { position: absolute; left: 0; bottom: 0; font-size: calc(var(--u) * 11px); line-height: 1; filter: drop-shadow(0 1px 0 rgba(58,36,102,.6)); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .sk .fh { position: absolute; left: calc(var(--u) * 3px); right: calc(var(--u) * 3px); top: calc(var(--u) * 3px); height: calc(var(--u) * 4px); border-radius: 9px; background: rgba(30,18,60,.55); overflow: hidden; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .sk .fh i { display: block; height: 100%; width: var(--fh, 100%); background: linear-gradient(90deg, #6ab8ff, #9ae0ff); border-radius: 9px; transition: width .2s; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .sk.down { filter: grayscale(.8) brightness(.8); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .sk.down::after { content: '💫'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 20px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .gaterow { margin: calc(var(--u) * 6px) 0 0; padding: calc(var(--u) * 6px); border-radius: calc(var(--u) * 12px); background: rgba(106,184,255,.14); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .gaterow b { display: block; color: #3a6ac8; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .gaterow small { display: block; opacity: .8; font-size: .82em; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .slots.three { grid-template-columns: repeat(3, 1fr); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .slot.no { opacity: .35; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .note { font-size: .82em; opacity: .8; margin: 4px 0 0; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .role { font-size: .85em; margin: 6px 0 0; color: #3a6ac8; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #rows .sec { margin: calc(var(--u) * 8px) 0 calc(var(--u) * 2px); font-weight: 700; color: #6a3fc8; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #rows .row.dim { opacity: .55; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .buy.build { background: linear-gradient(180deg, #ffd46a, #f2a93a); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .turs { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 6px); margin: calc(var(--u) * 6px) 0; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .tur { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2px); padding: calc(var(--u) * 8px) calc(var(--u) * 4px); border-radius: calc(var(--u) * 14px); border: 2px solid #e6dcff; background: #fff; font: inherit; color: #3a2466; cursor: pointer; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .tur i { font-style: normal; font-size: calc(var(--u) * 28px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .tur b { font-size: calc(var(--u) * 13px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .tur small { font-size: calc(var(--u) * 10.5px); opacity: .8; min-height: 2.6em; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .tur span { font-weight: 700; color: #b06a00; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .tur.no { opacity: .5; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .tax { margin: 2px 0 6px; font-weight: 700; color: #b06a00; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .sk .sv { position: absolute; right: 0; top: 0; font-size: calc(var(--u) * 13px); line-height: 1; padding: calc(var(--u) * 2px); background: rgba(255,255,255,.85); border-bottom-left-radius: calc(var(--u) * 8px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} .sk .sv i { display: block; font-style: normal; font-size: calc(var(--u) * 8px); color: #7a3fe0; letter-spacing: -1px; text-align: center; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .skill { margin: calc(var(--u) * 4px) 0; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .skill.lock { opacity: .55; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .skill em { font-style: normal; font-size: .8em; color: #b06a00; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .msec { margin: calc(var(--u) * 8px) 0 calc(var(--u) * 4px); font-weight: 700; color: #7a3fe0; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .mhint { margin: calc(var(--u) * 8px) 0; font-size: .85em; color: #8a6a3a; text-align: center; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .mounts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 6px); margin-bottom: calc(var(--u) * 8px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .mnt { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1px); padding: calc(var(--u) * 6px); border-radius: calc(var(--u) * 12px); #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} border: calc(var(--u) * 2px) solid #e6dcf8; background: #fbf8ff; font: inherit; color: #3a2a5a; cursor: pointer; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .mnt span { font-size: calc(var(--u) * 24px); line-height: 1.1; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .mnt b { font-size: calc(var(--u) * 13px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .mnt small { font-size: calc(var(--u) * 10px); color: #7a6a90; text-align: center; line-height: 1.2; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .mnt.on { border-color: #ffb020; background: #fff6dc; box-shadow: 0 0 0 calc(var(--u) * 2px) rgba(255,176,32,.35); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #card .mnt.lock { opacity: .5; cursor: default; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #nightNote { position: absolute; right: calc(var(--u) * 14px); bottom: calc(var(--u) * 92px); padding: calc(var(--u) * 5px) calc(var(--u) * 12px); border-radius: 999px; #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} background: rgba(40, 20, 60, .82); color: #fff; font-size: calc(var(--u) * 13px); white-space: nowrap; display: none; pointer-events: auto; cursor: pointer; #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} box-shadow: 0 calc(var(--u) * 2px) 0 rgba(20, 10, 40, .35); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #nightNote.on { display: block; animation: notePulse 2.4s ease-in-out infinite; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #nightNote b { color: #ffd76a; margin-right: calc(var(--u) * 4px); } #nightNote i { font-style: normal; color: #ffe9a0; margin-left: calc(var(--u) * 4px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} @keyframes notePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #nightBan { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%) scale(0); opacity: 0; z-index: 16; pointer-events: none; text-align: center; #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} padding: calc(var(--u) * 14px) calc(var(--u) * 34px); border-radius: calc(var(--u) * 22px); color: #fff; background: rgba(40, 20, 70, .9); box-shadow: 0 calc(var(--u) * 4px) 0 rgba(0,0,0,.3); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #nightBan span { display: block; font-size: calc(var(--u) * 46px); line-height: 1.1; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #nightBan b { display: block; font-size: calc(var(--u) * 28px); text-shadow: 0 2px 0 rgba(0,0,0,.35); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #nightBan small { display: block; font-size: calc(var(--u) * 13px); opacity: .9; margin-top: calc(var(--u) * 4px); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #nightBan.k1 { background: linear-gradient(180deg, rgba(120, 10, 40, .94), rgba(200, 40, 60, .9)); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #nightBan.k2 { background: linear-gradient(180deg, rgba(90, 50, 10, .94), rgba(200, 120, 40, .9)); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #nightBan.k3 { background: linear-gradient(180deg, rgba(70, 10, 90, .94), rgba(150, 50, 200, .9)); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #nightBan.on { animation: nightBan 2.6s ease-out both; } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} @keyframes nightBan { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 12% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 20% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(.96); } } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #toast.night { background: rgba(60, 20, 70, .92); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none} #nightBan.k1 span, #nightNote .k1 { display: inline-block; filter: hue-rotate(-50deg) saturate(3) brightness(.85); } #bQuest{position:relative}#bQuest .qdot{position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 2px #fff}#bQuest .qdot[hidden]{display:none}