/* QUARTERLY - qhook.css (Phase 3D): fanfare banner, sticky-note confetti, the Snack-o-Matic, modifier cards, floor-event
   screen effects, the active-modifier chip, the Career page and the Performance Snapshot. All animation is CSS (the JS
   only toggles classes when something happens). */

/* ---- the rare-drop banner ---- */
#qhBanner { position:fixed; left:50%; top:24%; transform:translate(-50%,-12px) scale(.92); z-index:60; pointer-events:none; opacity:0;
  width:min(640px,92vw); box-sizing:border-box; padding:14px 26px 14px; text-align:center; border-radius:12px;
  font-family:'Segoe UI',Arial,sans-serif; color:#fff; background:linear-gradient(180deg,#1d2a44f2,#101828f4);
  border:2px solid #9cc0f0; box-shadow:0 10px 40px #000a, 0 0 0 4px #00000055; transition:opacity .25s, transform .35s cubic-bezier(.2,1.6,.4,1); }
#qhBanner.on { opacity:1; transform:translate(-50%,0) scale(1); }
#qhBanner .qhTag { font-weight:900; letter-spacing:6px; font-size:13px; color:#9cc0f0; }
#qhBanner .qhName { font-weight:900; font-size:34px; line-height:1.15; margin:4px 0 4px; letter-spacing:.5px; text-shadow:0 2px 0 #0008; }
#qhBanner .qhSub { font-size:14px; color:#e2ebf8; line-height:1.35; }
#qhBanner .qhFoot { margin-top:8px; font-size:11px; letter-spacing:1px; color:#9aa8bc; font-style:italic; }
#qhBanner.t-chase { background:linear-gradient(180deg,#5a0c12f4,#2a0608f6); border-color:#ff5a4a; box-shadow:0 0 0 4px #ffd76a55, 0 0 60px #ff4a3a88, 0 10px 40px #000a; }
#qhBanner.t-chase .qhTag { color:#ffd76a; animation:qhTagGlow .6s ease-in-out infinite alternate; }
#qhBanner.t-chase .qhName { color:#ffe9a8; font-size:40px; }
#qhBanner.t-leg { border-color:#ff9a3c; box-shadow:0 0 50px #ff9a3c66, 0 10px 40px #000a; }
#qhBanner.t-leg .qhTag, #qhBanner.t-leg .qhName { color:#ffb45a; }
#qhBanner.t-set { border-color:#5fd07a; } #qhBanner.t-set .qhTag, #qhBanner.t-set .qhName { color:#8af0a4; }
#qhBanner.t-twin { border-color:#e060a0; } #qhBanner.t-twin .qhTag, #qhBanner.t-twin .qhName { color:#ff9ad5; }
#qhBanner.t-jackpot, #qhBanner.t-bonus { background:linear-gradient(180deg,#5a4206f4,#2a1e04f6); border-color:#ffd040; box-shadow:0 0 0 4px #ffd04055, 0 0 70px #ffc02088, 0 10px 40px #000a; }
#qhBanner.t-jackpot .qhTag, #qhBanner.t-bonus .qhTag { color:#fff2a8; animation:qhTagGlow .5s ease-in-out infinite alternate; }
#qhBanner.t-jackpot .qhName, #qhBanner.t-bonus .qhName { color:#ffe070; }
#qhBanner.t-event { border-color:#ff6a5a; background:linear-gradient(180deg,#2a1420f2,#160a12f4); }
#qhBanner.t-event .qhTag { color:#ffb0a0; font-size:18px; letter-spacing:4px; } #qhBanner.t-event .qhName { font-size:26px; }
#qhBanner.t-win { border-color:#7ae8a0; } #qhBanner.t-win .qhTag { color:#9ff0b8; font-size:16px; } #qhBanner.t-win .qhName { font-size:26px; }
@keyframes qhTagGlow { from { text-shadow:0 0 4px #ffd76a55; } to { text-shadow:0 0 16px #ffd76a, 0 0 2px #fff; } }
/* the LootReveal name card steps aside while the banner says it */
html.qhFan #qoLootCard { opacity:0 !important; }

/* ---- the flash ---- */
#qhFlash { position:fixed; inset:0; z-index:59; pointer-events:none; opacity:0; background:radial-gradient(ellipse at 50% 45%, #fff8 0%, #ffd76a33 30%, transparent 70%); }
#qhFlash.on { animation:qhFlash .7s ease-out forwards; }
#qhFlash.t-chase.on { background:radial-gradient(ellipse at 50% 45%, #fffc 0%, #ff5a4a55 35%, transparent 75%); animation-duration:1.1s; }
@keyframes qhFlash { 0% { opacity:0; } 12% { opacity:1; } 100% { opacity:0; } }

/* ---- sticky-note confetti ---- */
#qhConf { position:fixed; inset:0; z-index:61; pointer-events:none; overflow:hidden; }
#qhConf i { position:absolute; left:var(--x); top:var(--y); width:15px; height:15px; opacity:0; box-shadow:1px 2px 0 #0003; border-bottom-right-radius:5px; }
#qhConf i.cash { width:26px; height:13px; background:#5fbf5a; color:#1d4a1a; font:900 10px/13px 'Segoe UI',Arial; text-align:center; border:1px solid #2e7a2a; border-radius:2px; }
#qhConf i.go { animation:qhConf 2s cubic-bezier(.15,.65,.35,1) var(--del) forwards; }
@keyframes qhConf {
  0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(.5); }
  25% { opacity:1; transform:translate(calc(var(--dx)*.65),calc(var(--dy)*.65)) rotate(calc(var(--rot)*.35)) scale(1); }
  100% { opacity:0; transform:translate(var(--dx),calc(var(--dy) + 420px)) rotate(var(--rot)) scale(.9); }
}

/* ---- screen effects of floor events ---- */
#qhFx { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .8s; }
#qhFx.fire { opacity:1; box-shadow:inset 0 0 120px 30px #ff2a1a66; animation:qhFire .5s steps(2) infinite; }
@keyframes qhFire { 0% { box-shadow:inset 0 0 120px 30px #ff2a1a77; } 100% { box-shadow:inset 0 0 90px 10px #ff2a1a22; } }
#qhFx.dark { opacity:1; background:radial-gradient(ellipse 34% 40% at 50% 55%, transparent 0%, #02040acc 70%, #000000f0 100%); }
#qhGlow { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity 1s; box-shadow:inset 0 0 90px 12px #ffc82a48; }
html.qhBonus #qhGlow { opacity:1; }

/* ---- what is active on this floor ---- */
#qhMods { position:fixed; left:50%; top:62px; transform:translateX(-50%); z-index:31; pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:3px;
  font:700 12px 'Segoe UI',Arial,sans-serif; letter-spacing:1px; }
#qhMods > div { padding:3px 12px; border-radius:12px; background:#0d1420e0; border:1px solid #3a5a88; color:#dbe8ff; white-space:nowrap; text-shadow:0 1px 2px #000; }
#qhMods i { font-style:normal; font-weight:500; color:#9aa8bc; letter-spacing:0; margin-left:6px; }
#qhMods b { color:#fff; margin-left:4px; }
#qhMods .qmB { background:linear-gradient(90deg,#5a4206e8,#3a2a04e8); border-color:#ffd040; color:#ffe070; }
#qhMods .qmE { border-color:#ff6a5a; color:#ffc0b0; }
#qhMods .qmO { border-color:#7ab8ff; } #qhMods .qmO.hot { border-color:#ff5a4a; color:#ffb0a0; animation:qhTagGlow .5s infinite alternate; }

/* ---- the Snack-o-Matic 3000 ---- */
#qhVendTip { position:fixed; left:50%; bottom:150px; transform:translateX(-50%) translateY(10px); z-index:32; opacity:0; pointer-events:none; cursor:pointer;
  padding:7px 16px; border-radius:16px; background:#2a0c10ee; border:2px solid #ffd040; color:#ffe9b0; font:600 13px 'Segoe UI',Arial,sans-serif; transition:opacity .2s, transform .2s; white-space:nowrap; }
#qhVendTip.on { opacity:1; transform:translateX(-50%); pointer-events:auto; }
#qhVendTip b { color:#ffd040; letter-spacing:1px; }
#qhVendTip kbd, #qhCareerBtn kbd, .qkFoot kbd { display:inline-block; padding:0 5px; border-radius:3px; background:#fff2; border:1px solid #fff5; font:700 11px 'Segoe UI',Arial; }
#qhSlot { position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center; background:#05080ccc; font-family:'Segoe UI',Arial,sans-serif; }
#qhSlot.on { display:flex; }
#qhSlot .qsBox { width:min(560px,94vw); padding:18px 22px 14px; border-radius:16px; background:linear-gradient(180deg,#c8222e,#7a0e16); border:4px solid #ffd040;
  box-shadow:0 0 0 6px #3a0a0e, 0 20px 60px #000c; color:#fff; text-align:center; }
#qhSlot .qsHead { font:900 30px 'Segoe UI',Arial; letter-spacing:3px; color:#ffd040; text-shadow:0 3px 0 #5a0a0e; }
#qhSlot .qsHead b { color:#fff; }
#qhSlot .qsHead small { display:block; font:600 11px 'Segoe UI',Arial; letter-spacing:2px; color:#ffc0b8; text-shadow:none; }
#qhSlot .qsReels { position:relative; display:flex; gap:10px; justify-content:center; margin:14px 0 10px; padding:10px; background:#2a0608; border-radius:10px; box-shadow:inset 0 4px 12px #000; }
#qhSlot .qsReel { width:110px; height:84px; overflow:hidden; background:linear-gradient(180deg,#d8d2c4,#fffdf6 30%,#fffdf6 70%,#d8d2c4); border-radius:6px; border:3px solid #ffd040; }
#qhSlot .qsSym { height:84px; display:flex; align-items:center; justify-content:center; }
#qhSlot .qsSym img { height:72px; width:72px; object-fit:contain; filter:drop-shadow(0 2px 2px #0006); }
#qhSlot .qsSym b { font-size:40px; color:#7a0e16; }
#qhSlot .qsLine { position:absolute; left:6px; right:6px; top:50%; height:2px; background:#ff304088; pointer-events:none; }
#qhSlot .qsMsg { min-height:42px; font:700 15px 'Segoe UI',Arial; color:#fff; display:flex; align-items:center; justify-content:center; padding:0 6px; }
#qhSlot.jack .qsMsg { color:#ffe070; font-size:20px; animation:qhTagGlow .4s infinite alternate; }
#qhSlot.jack .qsBox { animation:qhShake .12s 8 linear; box-shadow:0 0 0 6px #ffd040, 0 0 80px #ffd040aa, 0 20px 60px #000c; }
#qhSlot.win .qsMsg { color:#b8ffcc; } #qhSlot.near .qsMsg { color:#ffe08a; } #qhSlot.lose .qsMsg { color:#ffc0c0; }
@keyframes qhShake { 0% { transform:translate(0,0); } 25% { transform:translate(-4px,2px); } 50% { transform:translate(3px,-2px); } 75% { transform:translate(-2px,-3px); } 100% { transform:translate(0,0); } }
#qhSlot .qsBtns { display:flex; gap:10px; justify-content:center; margin:6px 0 10px; }
#qhSlot button { cursor:pointer; border-radius:24px; padding:10px 24px; font:900 17px 'Segoe UI',Arial; letter-spacing:2px; border:3px solid #fff; }
#qhSlot .qsPull { background:linear-gradient(180deg,#ffe070,#ffb020); color:#5a1a00; border-color:#fff4c0; box-shadow:0 4px 0 #8a5a00; }
#qhSlot .qsPull:disabled { filter:grayscale(.8) brightness(.7); cursor:default; }
#qhSlot .qsAway { background:#3a0a0e; color:#ffd0c8; border-color:#ffb0a8; font-size:13px; }
#qhSlot .qsOdds { font:500 11px/1.5 'Segoe UI',Arial; color:#ffe4dc; background:#00000033; border-radius:8px; padding:6px 10px; }
#qhSlot .qsOdds img { height:15px; width:15px; vertical-align:-3px; }
#qhSlot .qsStats { margin-top:6px; font:600 11px 'Segoe UI',Arial; color:#ffc0b8; }

/* ---- the modifier cards ---- */
#qhCards { position:fixed; inset:0; z-index:69; display:none; align-items:center; justify-content:center; background:#05080cbb; font-family:'Segoe UI',Arial,sans-serif; }
#qhCards.on { display:flex; }
#qhCards .qcBox { width:min(820px,96vw); text-align:center; }
#qhCards .qcHead { color:#dbe8ff; font-size:15px; letter-spacing:2px; margin-bottom:14px; }
#qhCards .qcHead b { color:#ffd76a; }
#qhCards .qcHead small { display:block; color:#9aa8bc; letter-spacing:1px; font-size:12px; margin-top:3px; }
#qhCards .qcRow { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
#qhCards .qcCard { position:relative; width:250px; padding:16px 16px 14px; border-radius:14px; cursor:pointer; text-align:left; background:linear-gradient(180deg,#fdfbf4,#ece6d6);
  color:#1e2a3a; border:3px solid #c8d0da; box-shadow:0 10px 30px #0009; transition:transform .15s, border-color .15s, box-shadow .15s; }
#qhCards .qcCard:hover { transform:translateY(-6px) rotate(-.6deg); border-color:#5a7aa8; }
#qhCards .qcCard.on { border-color:#2fa860; box-shadow:0 0 0 4px #2fa86055, 0 10px 30px #0009; transform:translateY(-6px); }
#qhCards .qcIcon { font-size:40px; line-height:1; }
#qhCards .qcName { font-weight:900; letter-spacing:2px; font-size:16px; margin:8px 0 8px; color:#1f4ea6; }
#qhCards .qcGood { color:#1a7a3a; font-weight:700; font-size:13px; margin-bottom:4px; }
#qhCards .qcBad { color:#b8262c; font-weight:700; font-size:13px; }
#qhCards .qcFlav { margin-top:10px; font-size:12px; font-style:italic; color:#5a6a7e; }
#qhCards .qcTick { position:absolute; right:12px; top:12px; padding:2px 8px; border:2px solid #2fa860; color:#2fa860; font-weight:900; font-size:12px; border-radius:4px; transform:rotate(8deg); opacity:0; }
#qhCards .qcCard.on .qcTick { opacity:1; }
#qhCards .qcBtns { margin-top:18px; display:flex; gap:12px; justify-content:center; }
#qhCards button { cursor:pointer; padding:10px 26px; border-radius:22px; font:900 15px 'Segoe UI',Arial; letter-spacing:2px; border:2px solid #9cc0f0; background:#1f4ea6; color:#fff; }
#qhCards .qcNo { background:#141b26; color:#c8d4e8; border-color:#5a7aa8; }
#qhCards .qcTimer { margin-top:8px; color:#8a94a6; font-size:12px; }

/* ---- the Career page ---- */
#qhCareerBtn { position:fixed; left:14px; top:156px; z-index:31; cursor:pointer; padding:4px 12px; border-radius:14px; background:#141b26ee; border:1px solid #5a7aa8;
  color:#ffd76a; font:800 12px 'Segoe UI',Arial,sans-serif; letter-spacing:1px; }
#qhCareerBtn b { color:#fff; }
#qhCareerBtn:hover { border-color:#ffd76a; }
#qhCareer { position:fixed; inset:0; z-index:68; display:none; align-items:center; justify-content:center; background:#05080cc8; font-family:'Segoe UI',Arial,sans-serif; }
#qhCareer.on { display:flex; }
#qhCareer .qkBox { width:min(1080px,96vw); max-height:90vh; overflow:auto; background:linear-gradient(180deg,#141b26fa,#0d121afa); border:2px solid #3a5a88; border-radius:12px; padding:16px 20px; color:#d8dee8; box-sizing:border-box; }
#qhCareer .qkHead { font-size:15px; color:#9cc0f0; display:flex; align-items:center; gap:8px; margin-bottom:6px; }
#qhCareer .qkHead b { font-size:20px; letter-spacing:5px; color:#fff; }
#qhCareer .qkHead span { margin-left:auto; color:#ffd76a; font-weight:800; font-size:18px; }
#qhCareer .qkX { cursor:pointer; background:none; border:1px solid #5a7aa8; color:#c8d4e8; border-radius:6px; padding:2px 9px; font-size:14px; }
#qhCareer .qkBar { height:7px; background:#0006; border-radius:4px; overflow:hidden; margin:4px 0; }
#qhCareer .qkBar i { display:block; height:100%; background:linear-gradient(90deg,#2c62c6,#7ae8a0); border-radius:4px; }
#qhCareer .qkNear { margin:10px 0 12px; padding:8px 12px; border-radius:8px; background:#ffd76a1a; border:1px solid #ffd76a66; color:#ffe9b0; font-size:14px; }
#qhCareer .qkGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:12px; }
#qhCareer .qkSec { background:#0a0f17; border:1px solid #2a3a58; border-radius:10px; padding:10px 12px; }
#qhCareer .qkSecH { font-weight:900; letter-spacing:2px; color:#dbe8ff; font-size:13px; text-transform:uppercase; }
#qhCareer .qkSecH span { float:right; color:#9cc0f0; letter-spacing:0; font-weight:700; }
#qhCareer .qkItems { max-height:300px; overflow:auto; margin-top:6px; }
#qhCareer .qkIt { padding:5px 4px 6px; border-top:1px solid #ffffff10; opacity:.75; }
#qhCareer .qkIt.got { opacity:1; }
#qhCareer .qkItN { font-weight:800; font-size:13px; color:#c8d4e8; }
#qhCareer .qkIt.got .qkItN { color:#7ae8a0; }
#qhCareer .qkItL { font-size:12px; color:#a8b4c8; }
#qhCareer .qkItH { font-size:11px; color:#7a8aa0; font-style:italic; }
#qhCareer .qkRec div { display:flex; justify-content:space-between; padding:3px 0; border-top:1px solid #ffffff10; font-size:13px; }
#qhCareer .qkRec b { color:#ffe08a; }
#qhCareer .qkFoot { margin-top:10px; color:#7a8aa0; font-size:12px; text-align:center; }

/* ---- the Performance Snapshot: in the Lobby (#qhSnap) and inside the HR sick-leave memo (#qhSnapIn) ---- */
#qhSnap { position:fixed; inset:0; z-index:67; display:none; align-items:center; justify-content:center; background:#05080cb8; font-family:'Segoe UI',Arial,sans-serif; }
#qhSnap.on { display:flex; }
#qhSnap .snBox { width:min(640px,94vw); background:#f7f6f1; color:#1e2a3a; border-radius:6px; border-top:10px solid #2f5d8a; padding:16px 26px 14px; box-shadow:0 20px 60px #000c; }
.snHead { font-weight:900; letter-spacing:5px; font-size:18px; color:#2f5d8a; text-align:left; }
.snHead small { display:block; letter-spacing:1px; font-weight:500; font-size:11px; color:#5a6a7e; margin-top:2px; }
.snRate { font-weight:900; font-size:26px; letter-spacing:3px; margin:8px 0 6px; text-shadow:0 1px 0 #0003; -webkit-text-stroke:.5px #1e2a3a55; }
.snTiles { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.snT { position:relative; background:#fff; border:1px solid #c8d0da; border-radius:6px; padding:6px 8px; text-align:left; }
.snT span { display:block; font-size:10px; color:#5a6a7e; letter-spacing:1px; text-transform:uppercase; }
.snT b { display:block; font-size:16px; color:#1e2a3a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.snT.pb { border-color:#2fa860; background:#effaf2; }
.snT em { position:absolute; right:-4px; top:-9px; background:#2fa860; color:#fff; font:900 9px 'Segoe UI'; letter-spacing:1px; padding:2px 5px; border-radius:3px; font-style:normal; transform:rotate(4deg); }
.snCo { margin-top:8px; font-size:12px; color:#8a2a2a; text-align:left; }
.snEv { margin-top:6px; font-size:12px; color:#3a4a5e; text-align:left; }
.snCols { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; text-align:left; }
.snCols > div { background:#fff; border:1px solid #c8d0da; border-radius:6px; padding:7px 10px; font-size:12.5px; line-height:1.4; }
.snCols b { display:block; letter-spacing:3px; font-size:11px; margin-bottom:3px; }
.snClose b { color:#c8620a; } .snNext b { color:#2f5d8a; }
.snBtns { margin-top:12px; display:flex; gap:10px; justify-content:center; }
.snBtns button { cursor:pointer; border-radius:26px; padding:12px 30px; font:900 18px 'Segoe UI',Arial; letter-spacing:3px; border:none; }
.snGo { background:linear-gradient(180deg,#3aa860,#22803e); color:#fff; box-shadow:0 5px 0 #145a26, 0 0 24px #3aa86066; animation:qhGo 1.2s ease-in-out infinite; }
.snLater { background:#e0e4ea; color:#3a4a5e; font-size:13px !important; }
@keyframes qhGo { 0%,100% { transform:scale(1); } 50% { transform:scale(1.04); } }
.snFoot { margin-top:8px; font-size:11px; color:#7a8a9e; text-align:center; }
html body #deathScr.qMemo > #qhSnapIn { padding-top:4px; padding-bottom:6px; }
#qhSnapIn .snHead { font-size:14px; letter-spacing:4px; border-top:2px solid #c8d0da; padding-top:8px; }
#qhSnapIn .snRate { font-size:20px; margin:4px 0; }
#qhSnapIn .snT b { font-size:14px; }
#qhSnapIn .snBtns button { padding:9px 24px; font-size:15px; }
@media (max-height:760px){ #qhSnapIn .snCols { display:none; } }
/* the memo grew a snapshot: it scrolls instead of pushing its buttons off a short screen */
html body #deathScr.qMemo { overflow-y:auto; justify-content:safe center; }
#qhSnapIn .snCols > div { font-size:12px; }