/* Gems page and what players wear on their profile (owner 01.11.2026), everything pixel. Only .op-gm-* classes. */
.op-gm, .op-gm-worn {
  --gm-box: #121216; --gm-head: #1b1b22; --gm-tile: #1a1a21; --gm-mut: #a4a4b2; --gm-dim: #6d6d7a;
  --gm-common: #b4b8c2; --gm-uncommon: #6fd28a; --gm-divine: #fff0b0; --gm-eclipse: #8f8fa3; --gm-rare: #5aa9e6; --gm-epic: #b48cf2; --gm-legendary: #f0c04f; --gm-mythic: #ff4fa8;
  --gm-body: 'Pixelify Sans', ui-monospace, monospace; --gm-caps: Silkscreen, 'Pixelify Sans', monospace;
}
.op-gm { max-width: 1040px; padding-top: 16px; padding-bottom: 24px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); color: #f2f2f5; font: 500 16px/1.4 var(--gm-body); -webkit-font-smoothing: none; }
.op-gm *, .op-gm-worn * { border-radius: 0; box-sizing: border-box; }
.op-gm img, .op-gm-worn img { image-rendering: pixelated; }
/* stepped pixel corners */
.op-gm-px { clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)); }
.op-gm-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.op-gm .op-gm-top h1 { margin: 0; font: 700 2rem/1.1 var(--gm-caps) !important; color: inherit; }
.op-gm-top p { margin: 4px 0 0; color: var(--gm-mut); }
.op-gm-bal { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; background: var(--gm-box); font: 700 1.05rem/1 var(--gm-caps); }
.op-gm-bal img { width: 18px; height: 18px; }
.op-gm-card { background: var(--gm-box); overflow: hidden; min-width: 0; }
.op-gm .op-gm-card > h2 { margin: 0; padding: 10px 16px; background: var(--gm-head); font: 700 .8rem/1.3 var(--gm-caps) !important; color: #dcdce3; }
.op-gm-pad { padding: 16px; }
.op-gm-note { margin: 0 0 12px; color: var(--gm-mut); font-size: .95rem; }

.op-gm-hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; padding: 20px 16px 22px; }
.op-gm .op-gm-hero h3 { margin: 0; font: 700 1.1rem/1.2 var(--gm-caps) !important; color: inherit; }
.op-gm-stage { position: relative; width: 480px; height: 360px; max-width: 100%; overflow: hidden; background: #0b0b0f; }
.op-gm-stage canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.op-gm-pal { position: absolute; left: 10px; bottom: 14px; width: 58px; height: 58px; overflow: hidden; }
.op-gm-pal img { display: block; height: 100%; width: auto; max-width: none; }
.op-gm-snd { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border: 0; background: #1f1f27; color: #e6e6ec; cursor: pointer; }
.op-gm-snd .fa-volume-xmark { display: none; }
.op-gm-snd.op-gm-off .fa-volume-xmark { display: inline-block; }
.op-gm-snd.op-gm-off .fa-volume-high { display: none; }
.op-gm-reveal { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 8px; width: 250px; max-width: calc(100% - 40px); padding: 16px 12px 14px; background: #101014; box-shadow: inset 0 0 0 3px var(--c); text-align: center; opacity: 0; visibility: hidden; transform: translate(-50%, -50%) scale(.7); pointer-events: none; }
.op-gm-reveal.op-gm-on { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); transition: opacity .3s steps(4), transform .4s steps(6); }
.op-gm-rv-pic { display: grid; place-items: center; max-width: 100%; min-height: 52px; }
.op-gm-nm { max-width: 100%; font: 700 1rem/1.25 var(--gm-caps); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-gm-ty { display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--gm-mut); font-size: .85rem; }
.op-gm-ty img { width: 16px; height: 16px; }
.op-gm-ty em { font-style: normal; font-weight: 700; color: var(--c); }
.op-gm-open, .op-gm-login { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px 4px; border: 0; background: #f5f5f7; color: #0b0b10; font: 700 .95rem/1 var(--gm-caps); box-shadow: inset 0 -4px 0 #a4a7b3; cursor: pointer; text-decoration: none; }
.op-gm-open img { width: 15px; height: 15px; }
.op-gm-open:disabled { background: #22222a; color: var(--gm-dim); box-shadow: inset 0 -4px 0 #17171d; cursor: not-allowed; }
.op-gm-open:disabled img { opacity: .5; }
.op-gm-err { margin: 0; color: #ff8d86; }
/* open 1, 2 or 5 boxes at once */
.op-gm-free { margin: 0; padding: 6px 12px; background: #1d3a30; color: #bff3df; font-size: .95rem; }
.op-gm-free[hidden] { display: none; }
.op-gm-free b { font: 700 .9rem/1 var(--gm-caps); }
.op-gm-buyrow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 480px; }
.op-gm-buy { flex-direction: column; gap: 5px; height: 60px; padding: 0 6px 4px; min-width: 0; font-size: .85rem; }
.op-gm-pgems, .op-gm-pfree { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: #4d4d59; }
.op-gm-pgems[hidden], .op-gm-pfree[hidden] { display: none; }
.op-gm-buyrow .op-gm-big { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 12px; height: auto; min-height: 44px; padding: 6px 10px; }
.op-gm-bignote { font: inherit; font-size: .72rem; opacity: .75; }
.op-gm-pgems i { font-style: normal; }
.op-gm-pfree { color: #1f7a5c; }
.op-gm-open:disabled .op-gm-pgems { color: inherit; }
.op-gm-minis { position: absolute; inset: 0; pointer-events: none; }
.op-gm-mini { position: absolute; display: grid; justify-items: center; gap: 4px; width: 136px; max-width: 31%; padding: 10px 6px 8px; background: #101014; box-shadow: inset 0 0 0 3px var(--c); text-align: center; transform: translate(-50%, -50%); animation: opu-gm-mini .3s steps(4); }
@keyframes opu-gm-mini { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } }
.op-gm-mini .op-gm-rv-pic { min-height: 44px; }
.op-gm-mini .op-gm-nm { font-size: .68rem; }
.op-gm-mini .op-gm-kuro { width: 44px; height: 44px; }
.op-gm-mini .op-gm-look { width: 66px; height: 44px; }
.op-gm-mini .op-gm-prize { width: 40px; height: 40px; }
.op-gm-mini .op-gm-tag { font-size: .75rem; padding: 2px 5px; }

.op-gm-chance { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.op-gm-chance > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px; background: var(--gm-tile); min-width: 0; }
.op-gm-chance img { width: 32px; height: 32px; }
.op-gm-chance b { display: block; font: 700 1rem/1.2 var(--gm-caps); }
.op-gm-chance span { color: var(--c); font-size: .9rem; }
.op-gm-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.op-gm-earn > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; box-shadow: inset 0 -2px 0 var(--gm-head); }
.op-gm-earn > div:last-child { box-shadow: none; }
.op-gm-earn span { color: var(--gm-mut); }
.op-gm-earn b { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 700 .9rem/1.4 var(--gm-caps); }
.op-gm-earn img { width: 15px; height: 15px; }

.op-gm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.op-gm-it { display: grid; grid-template-rows: 56px auto; gap: 4px; width: 100%; padding: 10px; border: 0; background: var(--gm-tile); color: inherit; font: inherit; text-align: left; min-width: 0; }
button.op-gm-it { cursor: pointer; }
.op-gm-it.op-gm-locked { opacity: .35; }
.op-gm-it.op-gm-wearing { box-shadow: inset 0 0 0 3px var(--c); }
.op-gm-it .op-gm-pc { display: grid; place-items: center; min-width: 0; }
.op-gm-it .op-gm-nm2 { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-gm-it .op-gm-ty { justify-content: flex-start; white-space: nowrap; overflow: hidden; }
.op-gm-pics { display: none; }
.op-gm-it[hidden], .op-gm-ty[hidden] { display: none; }

.op-gm-topr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.op-gm-link { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; background: var(--gm-box); color: inherit; font: 700 .85rem/1 var(--gm-caps); text-decoration: none; }
.op-gm-link:hover { color: inherit; background: var(--gm-head); }
.op-gm-link img { width: 18px; height: 18px; }

/* inventory */
.op-gm-me { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px; background: var(--gm-tile); }
.op-gm-me.op-gm-th-sakura { background: linear-gradient(135deg, #5c1c40, #8a2c60); }
.op-gm-me.op-gm-th-ocean { background: linear-gradient(135deg, #0e4a80, #1e78b8); }
.op-gm-me.op-gm-th-mint { background: linear-gradient(135deg, #0f3a2e, #2f7a62); }
.op-gm-me.op-gm-th-sunset { background: linear-gradient(135deg, #5c1c30, #c0572c); }
.op-gm-me.op-gm-th-starry { background: linear-gradient(135deg, #0a0b24, #2a2a78); }
.op-gm-me.op-gm-th-royal { background: linear-gradient(135deg, #3a2408, #a87c1c); }
.op-gm-me.op-gm-th-snow { background: linear-gradient(135deg, #2a3a52, #7f9ab8); }
.op-gm-me.op-gm-th-neon { background: linear-gradient(135deg, #1a0a3a, #a0186a); }
.op-gm-me.op-gm-th-arcade { background: linear-gradient(135deg, #14062e, #a0186a); }
.op-gm-me.op-gm-th-library { background: linear-gradient(135deg, #3a2410, #a8652a); }
.op-gm-me.op-gm-th-volcano { background: linear-gradient(135deg, #2a0e0e, #c0401a); }
.op-gm-me.op-gm-th-night-sakura { background: linear-gradient(135deg, #0a0b24, #8a2c60); }
.op-gm-me.op-gm-th-tokyo { background: linear-gradient(135deg, #0a0620, #a01880); }
.op-gm-me.op-gm-th-atlantis { background: linear-gradient(135deg, #061a3a, #1e78b8); }
.op-gm-me.op-gm-th-synthwave { background: linear-gradient(135deg, #2a0a4a, #c02a8a); }
.op-gm-me.op-gm-th-sky-castle { background: linear-gradient(135deg, #3a78a8, #a8dcf5); }
.op-gm-me.op-gm-th-asteroid { background: linear-gradient(135deg, #050510, #3a3648); }
.op-gm-me.op-gm-th-graveyard { background: linear-gradient(135deg, #141e1e, #3a5050); }
.op-gm-me.op-gm-th-meadow { background: linear-gradient(135deg, #14503a, #4fae6a); }
.op-gm-me.op-gm-th-dusk { background: linear-gradient(135deg, #2a1a52, #c0602a); }
.op-gm-me.op-gm-th-candy { background: linear-gradient(135deg, #8a4a9a, #e06a9a); }
.op-gm-me.op-gm-th-galaxy { background: linear-gradient(135deg, #0a0b24, #6a2a8a); }
.op-gm-me.op-gm-th-crystal { background: linear-gradient(135deg, #0e1a3a, #3fa0d8); }
.op-gm-me.op-gm-th-void-rift { background: linear-gradient(135deg, #050510, #6a1a6a); }
.op-gm-me.op-gm-th-heaven { background: linear-gradient(135deg, #8a6a14, #e0bc4a); }
.op-gm-me.op-gm-th-lava { background: linear-gradient(135deg, #2a0e0e, #a83a1a); }
.op-gm-me.op-gm-th-deep { background: linear-gradient(135deg, #061a3a, #0e6a9a); }
.op-gm-me.op-gm-th-aurora { background: linear-gradient(135deg, #082a32, #2a8a6a 60%, #5a3a9a); }
.op-gm-me-av { width: 72px; height: 72px; object-fit: cover; }
.op-gm-me-tx { display: grid; gap: 6px; min-width: 0; flex: 1 1 180px; }
.op-gm-me-tx b { font: 700 1.05rem/1.2 var(--gm-caps); }
.op-gm-me-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.op-gm-me .op-gm-kuro { width: 64px; height: 64px; }
.op-gm-me [data-slot="theme"]:empty { display: none; }
.op-gm-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.op-gm-stats > div { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--gm-tile); min-width: 0; }
.op-gm-stats img { width: 22px; height: 22px; flex: none; }
.op-gm-stats b { font: 700 .85rem/1 var(--gm-caps); }
.op-gm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.op-gm-tools .op-gm-chips { margin: 0; }
.op-gm-find { flex: 1 1 180px; min-width: 0; height: 32px; padding: 0 10px; border: 0; background: var(--gm-tile); color: #f2f2f5; font: 500 .95rem/1 var(--gm-body); }
.op-gm-sec { margin: 14px 0 8px; font: 700 .78rem/1.3 var(--gm-caps); color: var(--gm-mut); }
.op-gm-sec:first-child { margin-top: 0; }
.op-gm-sec[hidden], .op-gm-grid[hidden] { display: none; }
.op-gm-it { position: relative; }
.op-gm-x { position: absolute; right: 8px; top: 6px; color: var(--gm-mut); font: 700 .72rem/1 var(--gm-caps); }

/* shiny versions run through all colours */
.op-gm-shiny { animation: opu-gm-hue 4s linear infinite; }
.op-gm-wrap { display: block; }
.op-gm-wrap.op-gm-shiny { filter: drop-shadow(0 0 4px rgba(255, 255, 255, .55)); }
@keyframes opu-gm-hue { to { filter: hue-rotate(360deg); } }
html[data-op-lite] .op-gm-shiny { animation-duration: 8s; }

/* season box */
.op-gm-seasonrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.op-gm-seasonit { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 104px; padding: 8px; background: var(--gm-tile); font-size: .85rem; text-align: center; min-width: 0; }

/* workshop, sets, ranking */
.op-gm-crafts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.op-gm-craft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; background: var(--gm-tile); min-width: 0; }
.op-gm-craft img { width: 26px; height: 26px; }
.op-gm-craft b { font: 700 .8rem/1 var(--gm-caps); }
.op-gm-craft .op-gm-open { height: 36px; padding: 0 12px 3px; font-size: .75rem; margin-left: auto; }
.op-gm-sets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.op-gm-set { display: grid; gap: 8px; padding: 12px; background: var(--gm-tile); min-width: 0; }
.op-gm-set > b { font: 700 .85rem/1.2 var(--gm-caps); }
.op-gm-setparts { display: flex; flex-wrap: wrap; gap: 8px; }
.op-gm-setparts .op-gm-missing { opacity: .3; }
.op-gm-setparts .op-gm-kuro { width: 44px; height: 44px; }
.op-gm-setreward { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--gm-mut); font-size: .85rem; }
.op-gm-set .op-gm-open { height: 36px; justify-self: start; padding: 0 12px 3px; font-size: .75rem; }
.op-gm-rank { display: grid; grid-template-columns: 34px 24px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px; background: var(--gm-tile); min-width: 0; }
.op-gm-rankn { font: 700 .85rem/1 var(--gm-caps); }
.op-gm-flag { width: 24px; height: auto; image-rendering: auto; }
.op-gm-rank a { color: inherit; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-gm-rank small { color: var(--gm-mut); font-size: .85rem; }
.op-gm-rank b { font: 700 .95rem/1 var(--gm-caps); }
@media (max-width: 760px) { .op-gm-crafts, .op-gm-sets { grid-template-columns: minmax(0, 1fr); } .op-gm-seasonrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .op-gm-rank small { display: none; } .op-gm-rank { grid-template-columns: 30px 24px minmax(0, 1fr) auto; } }

/* flying rewards */
.op-gm-fly { position: fixed; z-index: 2000; margin: 0; pointer-events: none; display: block; image-rendering: pixelated; }

/* trading, laid out like a trade window: your items, the offer, their items */
.op-gm-trade { display: grid; grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr); gap: 12px; align-items: start; }
.op-gm-trcol { min-width: 0; }
.op-gm-trcol h3 { margin: 0 0 8px; font: 700 .78rem/1.3 var(--gm-caps); color: var(--gm-mut); }
.op-gm-trgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-height: 420px; overflow-y: auto; }
.op-gm-trit { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 96px; padding: 8px 4px; border: 0; background: var(--gm-tile); color: inherit; font: 500 .75rem/1.2 var(--gm-body); text-align: center; cursor: pointer; min-width: 0; }
.op-gm-trit > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-gm-trit.op-gm-picked { box-shadow: inset 0 0 0 3px var(--c, #fff); }
.op-gm-trit .op-gm-kuro { width: 48px; height: 48px; }
.op-gm-trit .op-gm-look { width: 66px; height: 44px; }
.op-gm-trit .op-gm-tag { max-width: 84px; font-size: .68rem; padding: 2px 5px; }
.op-gm-offer { display: grid; gap: 8px; padding: 12px; background: var(--gm-tile); }
.op-gm-slot { display: grid; place-items: center; min-height: 96px; background: #0e0e12; color: var(--gm-dim); font-size: .85rem; text-align: center; padding: 6px; }
.op-gm-offer label { display: grid; gap: 3px; color: var(--gm-mut); font-size: .85rem; }
.op-gm-offer input { width: 100%; height: 34px; padding: 0 8px; border: 0; background: #0e0e12; color: #f2f2f5; font: 500 1rem/1 var(--gm-body); }
.op-gm-name { width: 100%; height: 40px; padding: 0 10px; border: 0; background: var(--gm-tile); color: #f2f2f5; font: 500 1rem/1 var(--gm-body); margin-bottom: 12px; }
.op-gm-sw { display: block; text-align: center; color: var(--gm-mut); font: 700 .9rem/1 var(--gm-caps); }
@media (max-width: 860px) { .op-gm-trade { grid-template-columns: minmax(0, 1fr); } .op-gm-trgrid { max-height: 280px; } }
.op-gm-tr { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; background: var(--gm-tile); margin-bottom: 8px; }
.op-gm-side { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.op-gm-side small { color: var(--gm-mut); font-size: .85rem; }
.op-gm-arrow { color: var(--gm-mut); font: 700 1rem/1 var(--gm-caps); }
.op-gm-btns { display: flex; gap: 6px; }
.op-gm-btns button { height: 34px; padding: 0 12px; border: 0; background: #2a2a33; color: #f2f2f5; font: 700 .75rem/1 var(--gm-caps); cursor: pointer; }
.op-gm-btns button.op-gm-yes { background: #f5f5f7; color: #0b0b10; }
.op-gm-none { margin: 0; color: var(--gm-mut); }
.op-gm-gemline { display: inline-flex; align-items: center; gap: 5px; font: 700 .85rem/1 var(--gm-caps); }
.op-gm-gemline img { width: 15px; height: 15px; }
@media (max-width: 760px) { .op-gm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .op-gm-tr { grid-template-columns: minmax(0, 1fr); } .op-gm-arrow { display: none; } }

.op-gm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.op-gm-chips button { height: 32px; padding: 0 12px; border: 0; background: var(--gm-tile); color: #dcdce3; font: 500 .95rem/1 var(--gm-body); cursor: pointer; }
.op-gm-chips button.op-gm-on { background: #f5f5f7; color: #0b0b10; }
.op-gm-count { margin-left: auto; color: var(--gm-mut); font-size: .85rem; }
.op-gm-worn-mark { display: none; color: var(--c); font-weight: 700; }
.op-gm-wearing .op-gm-worn-mark { display: inline; }
.op-gm-empty { display: grid; justify-items: center; gap: 12px; padding: 24px 16px; color: var(--gm-mut); text-align: center; }
.op-gm-empty .op-gm-kuro { width: 72px; height: 72px; }
.op-gm-empty .op-gm-link { background: var(--gm-tile); }

/* a title, or a badge with its rarity icon */
.op-gm-tag { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 9px; background: #26262f; color: #f2f2f5; font: 500 .85rem/1.3 var(--gm-body); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.op-gm-tag img { width: 16px; height: 16px; flex: none; }
/* Kuro with something on, the items sit on the 16 px grid of the bean */
.op-gm-kuro { position: relative; display: block; width: 52px; height: 52px; flex: none; }
.op-gm-kuro > span { display: block; overflow: hidden; width: 100%; height: 100%; }
.op-gm-kuro > span img { display: block; width: auto; height: 100%; max-width: none; }
.op-gm-kuro-s { width: 36px; height: 36px; }
.op-gm-acc { position: absolute; display: block; }
.op-gm-acc-tiny-crown { left: 33%; top: -6%; width: 34%; }
.op-gm-acc-party-hat { left: 38%; top: -14%; width: 24%; }
.op-gm-acc-sunglasses { left: 25%; top: 41%; width: 50%; }
.op-gm-acc-bow-tie { left: 32%; top: 72%; width: 36%; }
.op-gm-acc-headphones { left: 0; top: 0; width: 100%; }

.op-gm-worn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }

@media (max-width: 760px) {
  .op-gm-two { grid-template-columns: minmax(0, 1fr); }
  .op-gm-chance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-gm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .op-gm-stage { width: 288px; height: 216px; }
  .op-gm-pal { width: 36px; height: 36px; left: 6px; bottom: 8px; }
  .op-gm-mini { padding: 6px 3px 5px; gap: 2px; }
  .op-gm-mini .op-gm-rv-pic { min-height: 26px; }
  .op-gm-mini .op-gm-nm { font-size: .55rem; }
  .op-gm-mini .op-gm-kuro, .op-gm-mini .op-gm-prize { width: 26px; height: 26px; }
  .op-gm-mini .op-gm-look { width: 39px; height: 26px; }
  .op-gm-mini .op-gm-tag { font-size: .6rem; padding: 1px 3px; }
  .op-gm-buy { font-size: .7rem; }
}

/* titles and badges wear their rarity: colour in the text, legendary with a calm shine */
.op-gm-tag { position: relative; }
.op-gm-tag[data-r="rare"] { color: var(--gm-rare); }
.op-gm-tag[data-r="epic"] { color: var(--gm-epic); }
.op-gm-tag[data-r="legendary"] { color: var(--gm-legendary); overflow: hidden; }
.op-gm-tag[data-r="legendary"]::after { content: ""; position: absolute; top: 0; bottom: 0; left: -24%; width: 14%; background: rgba(255, 255, 255, .16); transform: skewX(-20deg); animation: opu-gm-shine 5s linear infinite; pointer-events: none; }
@keyframes opu-gm-shine { 0% { transform: translateX(0) skewX(-20deg); } 45%, 100% { transform: translateX(1000%) skewX(-20deg); } }

/* gems as a prize in the reveal */
.op-gm-prize { width: 52px; height: 52px; }

/* more Kuro items */
.op-gm-acc-beanie { left: 26%; top: 0; width: 48%; }
.op-gm-acc-scarf { left: 27%; top: 70%; width: 48%; }
.op-gm-acc-flower { left: 60%; top: 12%; width: 18%; }
.op-gm-acc-round-glasses { left: 26%; top: 40%; width: 48%; }
.op-gm-acc-cap { left: 28%; top: 6%; width: 46%; }
.op-gm-acc-wizard-hat { left: 30%; top: -24%; width: 40%; }
.op-gm-acc-pirate-hat { left: 24%; top: -2%; width: 52%; }
.op-gm-acc-pumpkin-hat { left: 30%; top: -5%; width: 40%; }
.op-gm-acc-santa-hat { left: 28%; top: -6%; width: 44%; }
.op-gm-acc-flower-crown { left: 21%; top: 8%; width: 58%; }
.op-gm-acc-straw-hat { left: 15%; top: 2%; width: 70%; }
.op-gm-acc-halo { left: 30%; top: -9%; width: 40%; animation: opu-gm-glow 3s ease-in-out infinite; }
.op-gm-acc-sparkles { left: 12%; top: 8%; width: 76%; animation: opu-gm-glow 2.4s ease-in-out infinite; }
.op-gm-acc-bandana { left: 21%; top: 13%; width: 58%; }
.op-gm-acc-cowboy-hat { left: 13%; top: 2%; width: 74%; }
.op-gm-acc-ninja-mask { left: 14%; top: 44%; width: 72%; }
.op-gm-acc-flames { left: 0; top: 0; width: 100%; animation: opu-gm-glow 1.2s steps(3) infinite; }
@keyframes opu-gm-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* a profile look is a small pixel picture */
.op-gm-look { display: block; width: 84px; height: 56px; image-rendering: pixelated; }

html[data-op-lite] .op-gm-tag[data-r="legendary"]::after, html[data-op-lite] .op-gm-acc-halo, html[data-op-lite] .op-gm-acc-sparkles, html[data-op-lite] .op-gm-acc-flames { animation: none; }

/* every day and the lucky meter */
.op-gm-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.op-gm-day { display: grid; justify-items: center; gap: 4px; padding: 8px 2px; background: var(--gm-tile); color: var(--gm-mut); font-size: .85rem; }
.op-gm-day img { width: 18px; height: 18px; opacity: .45; }
.op-gm-day b { font: 700 .75rem/1 var(--gm-caps); color: #f2f2f5; }
.op-gm-day.op-gm-got { background: #1d3a30; color: #bff3df; }
.op-gm-day.op-gm-got img, .op-gm-day.op-gm-next img { opacity: 1; }
.op-gm-day.op-gm-next { background: #f5f5f7; color: #0b0b10; }
.op-gm-day.op-gm-next b { color: #0b0b10; }
.op-gm-dayrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.op-gm-dayrow p { margin: 0; color: var(--gm-mut); }
.op-gm-claim { height: 40px; }
@media (max-width: 520px) { .op-gm-day b { font-size: .62rem; } }

/* quests, collection goals */
.op-gm-quests { display: grid; gap: 8px; }
.op-gm-quest { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; background: var(--gm-tile); min-width: 0; }
.op-gm-quest.op-gm-qdone { opacity: .55; }
.op-gm-qtx { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; min-width: 0; }
.op-gm-qtx small { color: var(--gm-mut); font-size: .85rem; }
.op-gm-qbar { grid-column: 1 / -1; height: 8px; background: #0e0e12; overflow: hidden; }
.op-gm-qbar i { display: block; height: 100%; background: #7fe0c0; }
.op-gm-quest > b { font: 700 .75rem/1.2 var(--gm-caps); white-space: nowrap; }
.op-gm-quest .op-gm-open { height: 36px; padding: 0 12px 3px; font-size: .75rem; }
.op-gm-need { display: grid; gap: 4px; width: 100%; max-width: 480px; color: var(--gm-mut); text-align: center; }
.op-gm-need[hidden] { display: none; }
.op-gm-shield { display: block; font-size: .85rem; }
.op-gm-shield b { font: 700 .8rem/1 var(--gm-caps); color: #f2f2f5; }
/* mini and sealed box */
.op-gm-boxcol { display: grid; gap: 10px; align-content: start; }
.op-gm-boxcol .op-gm-note { margin: 0; }
.op-gm-boxcol .op-gm-chance { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.op-gm-boxcol .op-gm-chance > div { padding: 8px; gap: 6px; }
.op-gm-boxcol .op-gm-chance img { width: 22px; height: 22px; }
.op-gm-boxcol .op-gm-chance b { font-size: .85rem; }
.op-gm-boxcol .op-gm-free { justify-self: start; }
.op-gm-sealedrow { background: var(--gm-tile); color: var(--gm-mut); }
.op-gm-buyone { grid-template-columns: minmax(0, 1fr); }
.op-gm-boxpic { display: block; width: 52px; height: auto; }
.op-gm-earn small { display: inline; }
/* numbers and first finders */
.op-gm-serial { position: absolute; left: 8px; top: 6px; color: var(--c); font: 700 .72rem/1 var(--gm-caps); }
.op-gm-first { display: block; color: var(--gm-mut); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-gm-first a { color: inherit; }
.op-gm-rv-first { color: var(--gm-legendary); font-weight: 700; }
.op-gm-tag small { color: var(--gm-mut); font-size: .75rem; }
/* scrap */
.op-gm-scraps { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.op-gm-shop { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.op-gm-shop select { height: 36px; }
.op-gm-shop .op-gm-open { height: 36px; padding: 0 14px 3px; font-size: .75rem; }
@media (max-width: 760px) { .op-gm-quest { grid-template-columns: minmax(0, 1fr) auto; } .op-gm-quest .op-gm-qtx { grid-column: 1 / -1; } }

/* mythic, the top tier: the colour runs */
.op-gm-tag[data-r="mythic"] { color: var(--gm-mythic); overflow: hidden; animation: opu-gm-hue 3s linear infinite; }
.op-gm-tag[data-r="mythic"]::after { content: ""; position: absolute; top: 0; bottom: 0; left: -24%; width: 18%; background: rgba(255, 255, 255, .28); transform: skewX(-20deg); animation: opu-gm-shine 2.4s linear infinite; pointer-events: none; }
.op-gm-acc-cosmic-crown { left: 31%; top: -10%; width: 38%; animation: opu-gm-glow 1.6s ease-in-out infinite; }
html[data-op-lite] .op-gm-tag[data-r="mythic"], html[data-op-lite] .op-gm-tag[data-r="mythic"]::after, html[data-op-lite] .op-gm-acc-cosmic-crown { animation: none; }

/* dropdowns: everything but the box stays shut until asked for */
.op-gm-fold { background: var(--gm-box); min-width: 0; }
.op-gm-fold > summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--gm-head); color: #dcdce3; font: 700 .8rem/1.3 var(--gm-caps); cursor: pointer; list-style: none; user-select: none; }
.op-gm-fold > summary::-webkit-details-marker { display: none; }
.op-gm-fold > summary::after { content: "+"; margin-left: auto; font-size: 1rem; line-height: 1; }
.op-gm-fold[open] > summary::after { content: "-"; }
.op-gm-fold > summary:hover { color: #fff; }
.op-gm-ready { padding: 2px 7px; background: #1d3a30; color: #bff3df; font: 500 .8rem/1.3 var(--gm-body); }

/* opening: the words, the colour wash, the mythic screen */
.op-gm-slam { position: absolute; left: 50%; top: 13%; z-index: 3; color: var(--c); font: 700 2rem/1 var(--gm-caps); white-space: nowrap; text-shadow: 0 3px 0 rgba(0, 0, 0, .85); transform: translateX(-50%); pointer-events: none; }
.op-gm-wash { position: fixed; inset: 0; z-index: 1890; pointer-events: none; }
.op-gm-stage.op-gm-lift { z-index: 1950; }
.op-gm-myth { position: fixed; inset: 0; z-index: 1940; display: grid; place-items: center; overflow: hidden; background: #000; opacity: 0; pointer-events: none; }
.op-gm-myth.op-gm-blast { z-index: 1990; pointer-events: auto; }
.op-gm-myth canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.op-gm-mcard { position: relative; display: grid; justify-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 18px; color: #fff; text-align: center; opacity: 0; }
.op-gm-mcard h2 { margin: 0; font: 700 clamp(2.6rem, 10vw, 6.5rem)/1 Silkscreen, 'Pixelify Sans', monospace !important; color: #fff; text-shadow: 0 5px 0 #000, 4px 0 0 #000, -4px 0 0 #000; }
.op-gm-mcard .op-gm-rv-pic { transform: scale(2.4); margin: 42px 0; }
.op-gm-mcard .op-gm-nm { font-size: clamp(1rem, 4vw, 1.6rem); white-space: normal; }
.op-gm-mcard .op-gm-ty { color: #fff; font-size: 1rem; }
@media (max-width: 520px) { .op-gm-slam { font-size: 1.25rem; } }


/* the reward arrives: its picture glows in the rarity colour and a light runs over the card */
.op-gm-pop { overflow: hidden; }
.op-gm-pop .op-gm-rv-pic { filter: drop-shadow(0 0 8px var(--c)); animation: opu-gm-arrive .45s steps(8); }
.op-gm-pop::after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 22%; background: rgba(255, 255, 255, .22); transform: skewX(-20deg); animation: opu-gm-sweep 1.1s steps(18) .15s 2; pointer-events: none; }
@keyframes opu-gm-arrive { from { opacity: 0; transform: scale(2.2); } }
@keyframes opu-gm-sweep { to { transform: translateX(800%) skewX(-20deg); } }

/* throwing items away */
.op-gm-binbtn { height: 32px; padding: 0 12px; border: 0; background: var(--gm-tile); color: #dcdce3; font: 500 .95rem/1 var(--gm-body); cursor: pointer; }
.op-gm-binbtn.op-gm-on { background: #f5f5f7; color: #0b0b10; }
.op-gm-binbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 10px; background: var(--gm-tile); color: var(--gm-mut); }
.op-gm-binbar[hidden] { display: none; }
.op-gm-binbar b { font: 700 .85rem/1 var(--gm-caps); color: #f2f2f5; }
.op-gm-binbar button { height: 32px; padding: 0 12px; border: 0; background: #2a2a33; color: #f2f2f5; font: 700 .72rem/1 var(--gm-caps); cursor: pointer; }
.op-gm-binbar button.op-gm-yes { margin-left: auto; background: #e5484d; color: #fff; }
.op-gm-binbar button:disabled { background: #22222a; color: var(--gm-dim); cursor: not-allowed; }
.op-gm-it.op-gm-sel { box-shadow: inset 0 0 0 3px #e5484d; }
.op-gm-bin { width: min(360px, calc(100vw - 32px)); padding: 18px; border: 0; background: var(--gm-box); color: #f2f2f5; font: 500 1rem/1.4 var(--gm-body); }
.op-gm-bin::backdrop { background: rgba(0, 0, 0, .7); }
.op-gm-bin h3 { margin: 0 0 8px; font: 700 .95rem/1.3 var(--gm-caps); color: inherit; }
.op-gm-bin p { margin: 0 0 8px; color: var(--gm-mut); }
.op-gm-bin p b { font: 700 .9rem/1 var(--gm-caps); color: #f2f2f5; }
.op-gm-binwarn { color: var(--gm-legendary) !important; }
.op-gm-bin label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.op-gm-bin .op-gm-btns { justify-content: flex-end; }
.op-gm-bin .op-gm-btns button.op-gm-yes { background: #e5484d; color: #fff; }

/* badges stand on their own, new icons */
.op-gm-tag.op-gm-badge { padding: 0; background: none; overflow: visible; }
.op-gm-tag.op-gm-badge::after { display: none; }
.op-gm-tag.op-gm-badge img { width: 22px; height: 22px; }
.op-gm-it .op-gm-badge img, .op-gm-trit .op-gm-badge img { width: 32px; height: 32px; }
/* tiles carry a little of their rarity colour */
.op-gm-it { background: linear-gradient(160deg, color-mix(in srgb, var(--c, #000) 16%, var(--gm-tile)), var(--gm-tile) 62%); }
.op-gm-trit { background: linear-gradient(160deg, color-mix(in srgb, var(--c, #000) 16%, var(--gm-tile)), var(--gm-tile) 62%); }
.op-gm-acc-top-hat { left: 24%; top: -22%; width: 52%; }
.op-gm-acc-viking-helmet { left: 18%; top: 0; width: 64%; }
.op-gm-acc-devil-horns { left: 19%; top: 0; width: 62%; }
.op-gm-acc-angel-wings { left: 0; top: 0; width: 100%; }
.op-gm-acc-monocle { left: 55%; top: 44%; width: 28%; }
.op-gm-acc-nerd-glasses { left: 26%; top: 44%; width: 48%; }
.op-gm-acc-propeller-cap { left: 22%; top: -4%; width: 56%; }

/* fast opening */
.op-gm-combo { position: absolute; left: 50%; top: 6px; z-index: 3; display: flex; align-items: baseline; gap: 6px; transform: translateX(-50%) scale(var(--big, 1)); transform-origin: top center; clip-path: none; color: #fff; font: 700 .8rem/1 var(--gm-caps); text-shadow: 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000; pointer-events: none; }
.op-gm-combo[hidden] { display: none; }
.op-gm-combo b { display: inline-block; color: hsl(var(--hue, 160), 100%, 68%); font: 700 1.3rem/1 var(--gm-caps); }
.op-gm-keys { margin: 0; max-width: 480px; color: var(--gm-dim); font-size: .85rem; text-align: center; }
.op-gm-new { position: absolute; right: 6px; top: 6px; z-index: 2; padding: 2px 5px; background: #ffe07a; color: #0b0b10; font: 700 .62rem/1 var(--gm-caps); transform: rotate(6deg); animation: opu-gm-stamp .3s steps(6); }
.op-gm-new[hidden] { display: none; }
@keyframes opu-gm-stamp { from { opacity: 0; transform: rotate(6deg) scale(3); } }
.op-gm-bulk { position: absolute; inset: 50px 10px 10px; z-index: 1; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 5px; align-content: center; }
.op-gm-bt { position: relative; display: grid; place-items: center; align-content: center; gap: 2px; min-height: 0; padding: 3px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 45%, rgba(16, 16, 20, .82)), rgba(16, 16, 20, .82) 72%); box-shadow: inset 0 0 0 2px var(--c); overflow: hidden; animation: opu-gm-tile .13s steps(4); }
@keyframes opu-gm-tile { from { opacity: 0; transform: scale(2.6) rotate(-6deg); } }
.op-gm-bt .op-gm-rv-pic { min-height: 0; }
.op-gm-bt .op-gm-kuro { width: 34px; height: 34px; }
.op-gm-bt .op-gm-look { width: 48px; height: 32px; }
.op-gm-bt .op-gm-prize, .op-gm-bt .op-gm-boxpic { width: 26px; height: auto; }
.op-gm-bt .op-gm-tag { max-width: 76px; padding: 1px 3px; background: none; font-size: .58rem; }
.op-gm-bt .op-gm-badge img { width: 24px; height: 24px; }
.op-gm-bt small { color: var(--gm-mut); font-size: .62rem; line-height: 1; }
.op-gm-bt .op-gm-new { right: 1px; top: 1px; font-size: .46rem; padding: 1px 2px; }
@media (max-width: 520px) { .op-gm-buyrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .op-gm-bulk { inset: 40px 4px 4px; gap: 3px; } .op-gm-bt .op-gm-kuro { width: 22px; height: 22px; } .op-gm-bt .op-gm-tag { font-size: .46rem; } }

/* the combo shakes harder the higher it gets */
.op-gm-combo.op-gm-hot { animation: none; }
.op-gm-combo.op-gm-fire { animation: none; }
.op-gm-combo.op-gm-fire b { animation: opu-gm-wob .34s steps(4) infinite; }
@keyframes opu-gm-wob { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes opu-gm-wob2 { 0%, 100% { rotate: -6deg; translate: -2px 1px; } 50% { rotate: 6deg; translate: 2px -1px; } }
.op-gm-mcard h2 span { display: inline-block; opacity: 0; animation: opu-gm-letter .24s steps(6) forwards; animation-delay: calc(var(--d) + 500ms); }
@keyframes opu-gm-letter { from { opacity: 0; transform: scale(5) rotate(-14deg); } to { opacity: 1; transform: none; } }
.op-gm-mcard .op-gm-nm { padding: 6px 12px; background: rgba(0, 0, 0, .55); }

/* several boxes: the good stuff in front, the rest in a pile behind */
.op-gm-bulk { inset: 0; display: block; }
.op-gm-back { position: absolute; inset: 0; opacity: .55; }
.op-gm-rs { position: absolute; display: grid; place-items: center; width: 54px; height: 54px; padding: 2px; background: rgba(16, 16, 20, .8); box-shadow: inset 0 0 0 2px var(--c); overflow: hidden; animation: opu-gm-tile .1s steps(3); }
.op-gm-rs .op-gm-kuro { width: 42px; height: 42px; }
.op-gm-rs .op-gm-look { width: 48px; height: 32px; }
.op-gm-rs .op-gm-prize, .op-gm-rs .op-gm-boxpic { width: 28px; height: auto; }
.op-gm-rs .op-gm-tag { max-width: 50px; padding: 0 2px; background: none; font-size: .46rem; }
.op-gm-rs .op-gm-badge img { width: 26px; height: 26px; }
.op-gm-fore { position: absolute; inset: 44px 12px 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: 8px; }
.op-gm-fore .op-gm-bt { width: 132px; max-width: 46%; min-height: 104px; background: rgba(12, 12, 16, .92); }
.op-gm-fore .op-gm-kuro { width: 52px; height: 52px; }
.op-gm-fore .op-gm-look { width: 72px; height: 48px; }
.op-gm-fore .op-gm-tag { max-width: 116px; font-size: .78rem; }
.op-gm-fore .op-gm-nm { font-size: .6rem; }
.op-gm-more { position: absolute; left: 10px; bottom: 10px; padding: 4px 8px; background: rgba(0, 0, 0, .75); color: #fff; font: 700 .85rem/1 var(--gm-caps); }
.op-gm-more[hidden] { display: none; }
@media (max-width: 520px) { .op-gm-rs { width: 36px; height: 36px; } .op-gm-rs .op-gm-kuro { width: 28px; height: 28px; } .op-gm-fore { inset: 34px 6px 28px; gap: 4px; } .op-gm-fore .op-gm-bt { width: 88px; min-height: 70px; } .op-gm-fore .op-gm-kuro { width: 34px; height: 34px; } .op-gm-fore .op-gm-nm { font-size: .46rem; } }
/* mythic: every letter its own rainbow colour, sliding */
.op-gm-mcard h2 span { filter: none; }
.op-gm-mcard h2 { animation: opu-gm-hue 1.1s linear infinite; }
.op-gm-mcard { filter: drop-shadow(0 0 16px rgba(255, 255, 255, .55)); }

/* the level name in the stage */
.op-gm-lv { position: absolute; left: 50%; bottom: 14px; z-index: 3; color: var(--c); font: 700 1.25rem/1 var(--gm-caps); white-space: nowrap; text-shadow: 0 3px 0 rgba(0, 0, 0, .85); transform: translateX(-50%); pointer-events: none; }
@media (max-width: 520px) { .op-gm-lv { font-size: .9rem; bottom: 8px; } }

.op-gm-mcard::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 150%; height: 150%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(0, 0, 0, .72), rgba(0, 0, 0, .5) 60%, transparent); pointer-events: none; }
/* the big screen: a spinning holo disc behind the reward, split colours on the word, a frame that runs */
.op-gm-myth canvas { transform-origin: center; }
.op-gm-myth::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 10px #ff4fa8, inset 0 0 90px 18px rgba(255, 79, 168, .7); animation: opu-gm-hue 1.1s linear infinite; pointer-events: none; }
.op-gm-mcard .op-gm-rv-pic { position: relative; z-index: 0; }
.op-gm-mcard .op-gm-rv-pic::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; background: repeating-conic-gradient(#ff4fa8 0 10%, #ffe07a 10% 20%, #7fe0c0 20% 30%, #5aa9e6 30% 40%, #b48cf2 40% 50%); -webkit-mask: radial-gradient(closest-side, #000 52%, rgba(0, 0, 0, .55) 56%, transparent 100%); mask: radial-gradient(closest-side, #000 52%, rgba(0, 0, 0, .55) 56%, transparent 100%); animation: opu-gm-disc 2.2s linear infinite; }
@keyframes opu-gm-disc { to { transform: rotate(360deg); } }
.op-gm-mcard h2 { text-shadow: 5px 0 0 rgba(255, 0, 90, .85), -5px 0 0 rgba(0, 230, 255, .85), 0 7px 0 #000; }
.op-gm-mcard h2 span { color: #fff; }
.op-gm-mcard .op-gm-nm { box-shadow: inset 0 0 0 3px #fff; }
.op-gm-gold::after { box-shadow: inset 0 0 0 8px #f0c04f, inset 0 0 80px 14px rgba(240, 192, 79, .65); animation: none; }
.op-gm-gold .op-gm-mcard h2 { animation: none; text-shadow: 4px 0 0 #7a4b0c, -4px 0 0 #7a4b0c, 0 6px 0 #000; }
.op-gm-gold .op-gm-mcard h2 span { color: #ffd95e; }
.op-gm-gold .op-gm-rv-pic::before { background: repeating-conic-gradient(#ffd95e 0 10%, #c98a1e 10% 20%); }
.op-gm-gold .op-gm-mcard .op-gm-nm { box-shadow: inset 0 0 0 3px #f0c04f; }
.op-gm-gold .op-gm-mcard { filter: drop-shadow(0 0 16px rgba(255, 217, 94, .6)); }

/* the box scene: a wide stage from edge to edge, everything lies on it. Fullscreen is the same, only bigger */
.op-gw-hero { position: relative; left: 50%; width: 100vw; margin-left: -50vw; margin-top: -28px; }
.op-gm-hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; height: clamp(480px, 74vh, 700px); padding: 0 16px 18px; overflow: hidden; background: #0d1a2a; }
.op-gm-hero .op-gm-stage { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; background: none; }
.op-gm-hero > .op-gm-buyrow, .op-gm-hero > .op-gm-need, .op-gm-hero > .op-gm-free, .op-gm-hero > .op-gm-err, .op-gm-hero > .op-gm-login { position: relative; z-index: 2; }
.op-gm-hero > h3, .op-gm-hero > .op-gm-keys { display: none; }
.op-gm-hero > .op-gm-free { padding: 4px 10px; background: rgba(8, 12, 16, .8); color: #fff; }
.op-gm-hero .op-gm-buyrow { max-width: min(100%, 900px); }
.op-gm-hero .op-gm-buy:not(:disabled) { box-shadow: 0 4px 0 rgba(0, 0, 0, .45); }
.op-gm-hero .op-gm-reveal, .op-gm-hero .op-gm-bulk, .op-gm-hero .op-gm-minis, .op-gm-hero .op-gm-combo, .op-gm-hero .op-gm-slam, .op-gm-hero .op-gm-lv, .op-gm-hero .op-gm-tier, .op-gm-hero .op-gm-sum { zoom: var(--fs, 1); }
.op-gm-hero .op-gm-reveal { top: 40%; }
.op-gm-hero .op-gm-bulk { bottom: 20%; }
.op-gm-hero .op-gm-sum { bottom: 24%; }
.op-gm-hero .op-gm-lv { bottom: auto; top: 7%; }
.op-gm-hero .op-gm-pal { left: 25%; bottom: 25%; width: calc(58px * var(--fs, 1)); height: calc(58px * var(--fs, 1)); }
.op-gm-pet { position: absolute; left: 19%; bottom: 25%; z-index: 1; width: calc(44px * var(--fs, 1)); image-rendering: pixelated; }
.op-gm-pethop { animation: opu-gm-pet 1.4s steps(4) infinite; }
@keyframes opu-gm-pet { 0%, 60%, 100% { translate: 0 0; } 75% { translate: 0 -5px; } 88% { translate: 0 -2px; } }
.op-gm-petpic { display: inline-block; width: 44px; height: 44px; image-rendering: pixelated; object-fit: contain; }
.op-gm-worn .op-gm-petpic { width: 30px; height: 30px; }
.op-gm-hero .op-gm-snd { z-index: 4; right: 16px; top: auto; bottom: 18px; width: 44px; height: 44px; font-size: 1.1rem; }
.op-gm-hero .op-gm-top { position: absolute; left: max(16px, calc(50% - 520px)); right: max(16px, calc(50% - 520px)); top: 14px; z-index: 3; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .55); }
.op-gm-hero .op-gm-top .op-gm-link, .op-gm-hero .op-gm-top .op-gm-bal { background: rgba(8, 12, 16, .78); }
.op-gm-hero .op-gm-combo { top: 72px; }
.op-gm-fsbal { display: none; }
.op-gm-hero.op-gm-fs { position: fixed; inset: 0; z-index: 1900; width: 100vw; height: 100vh; height: 100dvh; }
.op-gm-hero.op-gm-fs .op-gm-top { display: none; }
.op-gm-hero.op-gm-fs .op-gm-combo { top: 8px; }
.op-gm-hero.op-gm-fs .op-gm-snd { top: 16px; bottom: auto; }
.op-gm-hero.op-gm-fs .op-gm-fsbal { position: absolute; right: 70px; top: 16px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; background: #1f1f27; color: #f2f2f5; font: 700 1.05rem/1 var(--gm-caps); }
.op-gm-fsbal img { width: 22px; height: 18px; image-rendering: pixelated; }
.op-gm-hero.op-gm-fs ~ * { display: none; }
@media (max-width: 720px) { .op-gm-hero .op-gm-buyrow { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-right: 0; } .op-gm-hero .op-gm-snd { top: 62px; bottom: auto; right: 12px; } .op-gm-hero .op-gm-pal { left: 8%; } .op-gm-pet { left: 2%; } .op-gm-hero { height: 620px; } }

/* the page under it: earthy and alive, no more folding */
.op-gm { --gm-tile: #18241f; --gm-head: #233329; }
html:has(#op-gm) { overflow-x: clip; }
.op-gw-nav { position: sticky; top: 60px; z-index: 20; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 14px 0; padding: 6px; background: #12201a; box-shadow: inset 0 0 0 2px #2c4436; }
.op-gw-nav a { padding: 7px 14px; color: #d6f0dc; font: 700 .78rem/1 var(--gm-caps); text-decoration: none; }
.op-gw-nav a:hover { background: #2c4436; color: #fff; }
#op-gm > .op-gm-keys { margin: 10px auto 0; text-align: center; }
.op-gm-fold { margin-top: 14px; background: #101a16; box-shadow: inset 0 0 0 2px #233329; scroll-margin-top: 120px; }
.op-gw-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 12px 16px; background: linear-gradient(90deg, #1f3a2b, #15261e); color: #eafff0; font: 700 .95rem/1.2 var(--gm-caps) !important; }
.op-gw-two, .op-gw-boxes { display: grid; gap: 14px; margin-top: 14px; }
.op-gw-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.op-gw-two > .op-gm-fold { margin: 0; }
.op-gw-boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-gw-boxes .op-gm-card { background: #101a16; box-shadow: inset 0 0 0 2px #233329; }
.op-gw-boxes .op-gm-card h2 { margin: 0; padding: 12px 16px; background: linear-gradient(90deg, #1f3a2b, #15261e); color: #eafff0; font: 700 .95rem/1.2 var(--gm-caps) !important; }
.op-gw-boxes .op-gm-buyrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-gw-boxes .op-gm-buyone { grid-template-columns: minmax(0, 1fr); }
.op-gw-filter { margin-bottom: 12px; }
.op-gw-items .op-gm-it[hidden] { display: none; }
.op-gw-morebtn { display: block; margin: 12px auto 0; cursor: pointer; border: 0; color: #fff; }
.op-gw-morebtn[hidden] { display: none; }
.op-gm-pics { display: none; }
@media (max-width: 900px) { .op-gw-two, .op-gw-boxes { grid-template-columns: minmax(0, 1fr); } }

/* new things for Kuro */
.op-gm-acc-hair-bow { left: 56%; top: 8%; width: 24%; }
.op-gm-acc-sprout { left: 42%; top: 2%; width: 16%; }
.op-gm-acc-cat-bell { left: 42%; top: 72%; width: 16%; }
.op-gm-acc-bunny-ears { left: 30%; top: -18%; width: 40%; }
.op-gm-acc-chef-hat { left: 28%; top: -10%; width: 44%; }
.op-gm-acc-grad-cap { left: 22%; top: 2%; width: 56%; }
.op-gm-acc-laurel { left: 26%; top: -4%; width: 48%; }
.op-gm-acc-void-halo { left: 26%; top: -12%; width: 48%; }
.op-gm-acc-seraph-wings { left: -8%; top: 14%; width: 116%; }
/* Uncommon stays quiet, Divine shines white gold and keeps moving */
.op-gm-tag[data-r="uncommon"] { color: var(--gm-uncommon); }
.op-gm-tag[data-r="divine"] { color: #fff; overflow: hidden; text-shadow: 0 0 6px #ffd95e; box-shadow: inset 0 0 0 1px #ffd95e; }
.op-gm-tag[data-r="divine"]::after { content: ""; position: absolute; top: 0; bottom: 0; left: -24%; width: 22%; background: rgba(255, 255, 255, .5); transform: skewX(-20deg); animation: opu-gm-shine 1.6s linear infinite; pointer-events: none; }
.op-gm-divine::after { box-shadow: inset 0 0 0 10px #fff0b0, inset 0 0 110px 26px rgba(255, 240, 176, .8); animation: none; }
.op-gm-divine .op-gm-mcard h2 { animation: none; text-shadow: 0 0 22px #fff, 4px 0 0 #b8860b, -4px 0 0 #b8860b, 0 6px 0 #5a3a06; }
.op-gm-divine .op-gm-mcard h2 span { color: #fffbe6; }
.op-gm-divine .op-gm-rv-pic::before { background: repeating-conic-gradient(#fff 0 8%, #ffd95e 8% 16%, #7fe0ff 16% 24%); }

.op-gm-acc-hair-daisy { left: 60%; top: 12%; width: 18%; }
.op-gm-acc-leaf-hat { left: 34%; top: -2%; width: 32%; }
.op-gm-acc-red-nose { left: 44%; top: 50%; width: 12%; }
.op-gm-acc-mustache { left: 32%; top: 56%; width: 36%; }
.op-gm-acc-bandage { left: 58%; top: 34%; width: 22%; }
.op-gm-acc-eyepatch { left: 25%; top: 36%; width: 50%; }
.op-gm-acc-beret { left: 28%; top: 4%; width: 40%; }
.op-gm-acc-tiara { left: 33%; top: 2%; width: 34%; }
.op-gm-acc-witch-hat { left: 26%; top: -22%; width: 44%; }
.op-gm-acc-knight-helm { left: 22%; top: -4%; width: 56%; }
.op-gm-acc-kabuto { left: 22%; top: -14%; width: 56%; }
.op-gm-acc-pharaoh { left: 24%; top: -2%; width: 52%; }
.op-gm-acc-demon-crown { left: 31%; top: -6%; width: 38%; }
.op-gm-acc-sun-crown { left: 26%; top: -10%; width: 48%; }

.op-gm-acc-toast { left: 30%; top: -2%; width: 40%; }
.op-gm-acc-fish-snack { left: 40%; top: 58%; width: 44%; }
.op-gm-acc-sushi { left: 32%; top: 2%; width: 36%; }
.op-gm-acc-milk { left: 38%; top: -14%; width: 24%; }
.op-gm-acc-box-hat { left: 27%; top: -8%; width: 46%; }
.op-gm-acc-nurse-cap { left: 30%; top: 6%; width: 40%; }
.op-gm-acc-pizza { left: 58%; top: 56%; width: 34%; }
.op-gm-acc-police-cap { left: 26%; top: -2%; width: 48%; }
.op-gm-acc-fire-helmet { left: 26%; top: -2%; width: 48%; }
.op-gm-acc-hard-hat { left: 26%; top: 2%; width: 48%; }
.op-gm-acc-zx-earrings { left: 8%; top: 44%; width: 84%; }
.op-gm-acc-snorkel { left: 24%; top: 34%; width: 54%; }
.op-gm-acc-clown-wig { left: 12%; top: 2%; width: 76%; }
.op-gm-acc-detective-hat { left: 24%; top: 0; width: 52%; }
.op-gm-acc-pen { left: 66%; top: 44%; width: 34%; }
.op-gm-acc-hit-halo { left: 26%; top: -12%; width: 48%; }
.op-gm-acc-unicorn-horn { left: 42%; top: -10%; width: 16%; }
.op-gm-acc-ice-crown { left: 26%; top: -4%; width: 48%; }
.op-gm-acc-orbit-moon { left: 78%; top: 4%; width: 18%; animation: opu-gm-orbit 5s linear infinite; }
@keyframes opu-gm-orbit { 0%, 100% { translate: 0 0; } 25% { translate: -30px 6px; } 50% { translate: -68px 0; } 75% { translate: -30px -6px; } }
.op-gm-acc-dragon-wings { left: -8%; top: 14%; width: 116%; }
.op-gm-acc-rune-ring { left: 22%; top: -8%; width: 56%; }

.op-gm .op-gw-items .op-gm-locked { opacity: .62; }
.op-gm .op-gw-items .op-gm-locked img { filter: saturate(.6); }

/* the little warning */
.op-gm-warn { width: min(92vw, 440px); padding: 22px 22px 18px; border: 0; background: #14141c; color: #eaeaf2; text-align: center; font: 500 1rem/1.45 var(--gm-body); box-shadow: inset 0 0 0 3px #ff9ec4; }
.op-gm-warn::backdrop { background: rgba(0, 0, 0, .78); }
.op-gm-warn img { display: block; width: 128px; height: 128px; margin: 0 auto 10px; image-rendering: pixelated; animation: opu-gm-shy 2.4s steps(4) infinite; }
@keyframes opu-gm-shy { 0%, 70%, 100% { translate: 0 0; } 78% { translate: -3px 0; } 86% { translate: 3px 0; } 94% { translate: -2px 0; } }
html[data-op-rh][data-op-rh] .op-gm-warn h2 { margin: 0 0 10px; color: #ff9ec4; font: 700 1.15rem/1.2 Silkscreen, 'Pixelify Sans', monospace !important; }
.op-gm-warn p { margin: 0 0 8px; }
.op-gm-warn form { margin: 12px 0 0; }
.op-gm-warn button { min-width: 160px; height: 44px; }
/* combo: no pixel corners here, they cut the letters. Size comes from the font, not from a scaled picture */
.op-gm-hero .op-gm-combo { clip-path: none; transform: translateX(-50%); align-items: center; padding: 6px 10px; overflow: visible; }
.op-gm-combo b { padding: 2px 8px; font-size: calc(1.3rem * var(--big, 1)); line-height: 1.15; clip-path: none; }
.op-gm-combo span { font-size: 1rem; }
.op-gm-cbar { left: 10px; right: 10px; bottom: -2px; }
/* the big words stay pixels, the rule of the site would make them Inter */
html[data-op-rh][data-op-rh] .op-gm-mcard h2, html[data-op-rh][data-op-rh] .op-gm-mcard h2 span { font-family: Silkscreen, 'Pixelify Sans', monospace !important; font-weight: 700 !important; }
.op-gm-mcard h2 { letter-spacing: 2px; }
.op-gm-warn p { font-family: var(--gm-body); }
.op-gm-warn button { font: 700 .9rem/1 var(--gm-caps); cursor: pointer; border: 0; }

/* name glows from boxes: drop-shadow, because names can have a clipped gradient */
.op-gm-n-glow-ember { filter: drop-shadow(0 0 5px #ff6a3c) drop-shadow(0 0 12px rgba(255, 106, 60, .6)); }
.op-gm-n-glow-frost { filter: drop-shadow(0 0 5px #9fe4ff) drop-shadow(0 0 12px rgba(127, 216, 255, .6)); }
.op-gm-n-glow-toxic { filter: drop-shadow(0 0 5px #a8ff3c) drop-shadow(0 0 12px rgba(120, 230, 40, .6)); }
.op-gm-n-glow-royal { filter: drop-shadow(0 0 4px #ffe07a) drop-shadow(0 0 14px rgba(150, 90, 230, .75)); }
.op-gm-n-glow-plasma { animation: opu-gm-nplasma 2.6s linear infinite; }
.op-gm-n-glow-divine { animation: opu-gm-ndivine 2.4s ease-in-out infinite; }
@keyframes opu-gm-nplasma { 0% { filter: drop-shadow(0 0 6px #ff4fa8) drop-shadow(0 0 14px #ff4fa8); } 33% { filter: drop-shadow(0 0 6px #7fe0ff) drop-shadow(0 0 14px #7fe0ff); } 66% { filter: drop-shadow(0 0 6px #b48cf2) drop-shadow(0 0 14px #b48cf2); } 100% { filter: drop-shadow(0 0 6px #ff4fa8) drop-shadow(0 0 14px #ff4fa8); } }
@keyframes opu-gm-ndivine { 0%, 100% { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px #ffd95e); } 50% { filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 22px #ffd95e); } }

.op-gm-acc-ushanka { left: 24%; top: -2%; width: 52%; }
.op-gm-acc-sombrero { left: 8%; top: -6%; width: 84%; }
.op-gm-acc-fez { left: 38%; top: -4%; width: 24%; }
.op-gm-acc-turban { left: 26%; top: -2%; width: 48%; }
.op-gm-acc-antlers { left: 24%; top: -14%; width: 52%; }
.op-gm-acc-football-helmet { left: 22%; top: 2%; width: 58%; }
.op-gm-acc-gas-mask { left: 25%; top: 38%; width: 50%; }
.op-gm-acc-rose { left: 62%; top: 10%; width: 18%; }
.op-gm-acc-lollipop { left: 64%; top: 40%; width: 18%; }
.op-gm-acc-balloon { left: 74%; top: -22%; width: 18%; }

/* holding space: nothing here may repaint the page */
.op-gm-bulk { contain: layout paint; }
.op-gm-rt, .op-gm-rs { animation: none; }
.op-gm-rt { background: rgba(12, 12, 16, .92); box-shadow: inset 0 0 0 3px var(--c); }

/* Auto */
.op-gm-auto { position: absolute; right: 68px; bottom: 18px; z-index: 4; height: 44px; padding: 0 16px; border: 0; background: #1f1f27; color: #fff; font: 700 .95rem/1 var(--gm-caps); cursor: pointer; }
.op-gm-auto.op-gm-on { background: linear-gradient(90deg, #ff4fa8, #ffd95e, #6fe08a, #5ac8ff, #b48cf2); background-size: 200% 100%; color: #0b0b10; animation: opu-gm-auto 1.4s linear infinite; }
@keyframes opu-gm-auto { to { background-position: 200% 0; } }
.op-gm-hero.op-gm-fs .op-gm-auto { top: 16px; bottom: auto; right: 190px; }
@media (max-width: 720px) { .op-gm-auto { top: 62px; bottom: auto; right: 64px; } }

.op-gm-acc-party-glasses { left: 25%; top: 40%; width: 50%; }
.op-gm-acc-banana-peel { left: 34%; top: 2%; width: 32%; }
.op-gm-acc-sakura-branch { left: 56%; top: 8%; width: 30%; }
.op-gm-acc-bandit-mask { left: 25%; top: 40%; width: 50%; }
.op-gm-acc-duck-float { left: 18%; top: 66%; width: 66%; }
.op-gm-acc-umbrella-hat { left: 24%; top: -10%; width: 52%; }
.op-gm-acc-vr-headset { left: 22%; top: 38%; width: 56%; }
.op-gm-acc-mage-staff { left: 80%; top: 22%; width: 18%; }
.op-gm-acc-parrot { left: 66%; top: -4%; width: 26%; }
.op-gm-acc-space-helmet { left: 4%; top: 2%; width: 92%; opacity: .78; }
.op-gm-acc-fire-halo { left: 24%; top: -12%; width: 52%; }
.op-gm-acc-thunder-horns { left: 28%; top: -6%; width: 44%; }
/* the free wheel */
.op-gw-wheel { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: 20px; }
.op-gw-wheelbox { position: relative; width: 240px; height: 240px; }
.op-gw-wheelbox canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.op-gw-pin { position: absolute; left: 50%; top: -4px; width: 0; height: 0; margin-left: -10px; border: 10px solid transparent; border-top: 18px solid #fff; filter: drop-shadow(0 2px 0 #000); }
.op-gw-wheeltx p { margin: 0 0 10px; }
.op-gw-wheelres { color: #ffe07a; font: 700 1.1rem/1.3 var(--gm-caps); min-height: 1.4em; }
@media (max-width: 620px) { .op-gw-wheel { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } }

.op-gm-stillrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.op-gm-stillrow button { height: 44px; padding: 0 16px; }
.op-gm-warn .op-gm-link { border: 0; color: #fff; cursor: pointer; }

/* items sorted by rarity, rarest on top */
.op-gw-rar { margin-bottom: 18px; }
.op-gw-rar[hidden] { display: none; }
.op-gm h3.op-gw-rarh, .op-gm .op-gw-rarh { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; padding: 8px 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 28%, #101a16), #101a16 70%); box-shadow: inset 3px 0 0 var(--c); color: var(--c); font: 700 .9rem/1.2 var(--gm-caps) !important; }
.op-gw-rarh img { width: 22px; height: 22px; image-rendering: pixelated; object-fit: contain; }
.op-gw-rarh small { margin-left: auto; color: #cfd8d2; font: 700 .75rem/1 var(--gm-caps); }
.op-gm-sec[hidden] { display: none; }
.op-gm-acc-bucket-hat { left: 26%; top: 2%; width: 48%; }
.op-gm-acc-headband { left: 24%; top: 26%; width: 52%; }
.op-gm-acc-sailor-hat { left: 28%; top: 2%; width: 44%; }
.op-gm-acc-jester-hat { left: 18%; top: -8%; width: 64%; }
.op-gm-acc-samurai-band { left: 22%; top: 24%; width: 56%; }
.op-gm-acc-feather-hat { left: 24%; top: -8%; width: 56%; }
.op-gm-acc-aviator { left: 24%; top: 36%; width: 52%; }
.op-gm-acc-hero-mask { left: 24%; top: 38%; width: 52%; }
.op-gm-acc-dragon-horns { left: 22%; top: -8%; width: 56%; }
.op-gm-acc-star-crown { left: 26%; top: -6%; width: 48%; }
.op-gm-acc-galaxy-halo { left: 22%; top: -12%; width: 56%; }
.op-gm-me.op-gm-th-beach { background: linear-gradient(135deg, #2a7ab0, #e0c080); }
.op-gm-me.op-gm-th-desert { background: linear-gradient(135deg, #a8602a, #e8c070); }
.op-gm-me.op-gm-th-northern { background: linear-gradient(135deg, #082032, #2a9a8a); }
.op-gm-me.op-gm-th-temple { background: linear-gradient(135deg, #5a1a2a, #e0a040); }

/* the tier above Divine: black, you do not see what it is until you own it */
.op-gw-unknown { display: grid; place-items: center; align-content: center; gap: 6px; min-height: 120px; background: #000; box-shadow: inset 0 0 0 2px #26262e; color: #8f8fa3; }
.op-gw-unknown .op-gm-pc { color: #e8e8f0; font: 700 2.6rem/1 Silkscreen, monospace; }
.op-gw-rar[data-r="eclipse"] .op-gw-rarh { background: #000; box-shadow: inset 3px 0 0 #3a3a48; }
.op-gm-tag[data-r="eclipse"] { color: #e8e8f0; background: #000; box-shadow: inset 0 0 0 1px #3a3a48; }
.op-gm-eclipse { background: #000; }
.op-gm-eclipse::after { box-shadow: inset 0 0 120px 60px #000; animation: none; }
.op-gm-eclipse .op-gm-mcard h2 { animation: none; text-shadow: 3px 0 0 #3a3a48, -3px 0 0 #3a3a48, 0 6px 0 #000; }
.op-gm-eclipse .op-gm-mcard h2 span { color: #e8e8f0; }
.op-gm-eclipse .op-gm-rv-pic::before { background: repeating-conic-gradient(#17171d 0 10%, #3a3a48 10% 20%); }
.op-gm-eclipse .op-gm-mcard::before { background: radial-gradient(closest-side, #000, rgba(0, 0, 0, .8) 60%, transparent); }
.op-gm-n-glow-shadow { filter: drop-shadow(0 0 3px #000) drop-shadow(0 0 10px #000) drop-shadow(0 0 2px #8f8fa3); }
.op-gm-me.op-gm-th-abyss { background: #000; }
.op-gm-acc-shadow-crown { left: 28%; top: -6%; width: 44%; }

/* reward cards: every rarity has its own light. Rays turn behind the item, double frame, the name on a plate */
.op-gm-reveal, .op-gm-mini, .op-gm-fore .op-gm-bt { background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c) 62%, #101018) 0, color-mix(in srgb, var(--c) 22%, #0c0c14) 52%, #08080e 100%); box-shadow: inset 0 0 0 3px var(--c), inset 0 0 0 6px rgba(0, 0, 0, .55), inset 0 0 0 7px color-mix(in srgb, var(--c) 45%, transparent), 0 0 26px color-mix(in srgb, var(--c) 45%, transparent); overflow: hidden; }
.op-gm-reveal { width: 300px; padding: 26px 16px 18px; }
.op-gm-reveal::before, .op-gm-mini::before { content: ""; position: absolute; left: 50%; top: 36%; z-index: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; background: repeating-conic-gradient(color-mix(in srgb, var(--c) 50%, transparent) 0 9deg, transparent 9deg 22deg); -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 74%); mask: radial-gradient(closest-side, #000 20%, transparent 74%); animation: opu-gm-disc 14s linear infinite; pointer-events: none; }
.op-gm-reveal > *, .op-gm-mini > * { position: relative; z-index: 1; }
.op-gm-reveal .op-gm-rv-pic { min-height: 110px; transform: scale(1.7); margin: 16px 0 18px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 10px var(--c)); }
.op-gm-reveal .op-gm-nm { width: 100%; padding: 6px 8px; background: rgba(0, 0, 0, .6); box-shadow: inset 0 -2px 0 var(--c); color: #fff; font-size: 1.05rem; text-shadow: 0 2px 0 #000; }
.op-gm-reveal .op-gm-ty { color: #dcdce6; }
.op-gm-reveal .op-gm-ty em { padding: 2px 8px; background: rgba(0, 0, 0, .55); }
.op-gm-it { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 26%, #14181a), #10141a 78%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 50%, transparent); }
.op-gm-it:hover { box-shadow: inset 0 0 0 2px var(--c), 0 0 14px color-mix(in srgb, var(--c) 45%, transparent); }
/* Divine: heaven. ???: nothing, and it looks back */
html[data-op-rh][data-op-rh] .op-gm-divine .op-gm-mcard h2 span { color: #fff; text-shadow: 3px 0 0 #c98a1e, -3px 0 0 #c98a1e, 0 5px 0 #7a4b0c, 0 0 24px #ffd95e; }
.op-gm-divine { background: #fff4c8; }
.op-gm-divine .op-gm-mcard::before { background: radial-gradient(closest-side, rgba(90, 58, 6, .55), rgba(90, 58, 6, .25) 60%, transparent); }
html[data-op-rh][data-op-rh] .op-gm-eclipse .op-gm-mcard h2 span { color: #fff; text-shadow: 4px 0 0 rgba(255, 0, 60, .55), -4px 0 0 rgba(0, 220, 255, .45), 0 6px 0 #000; }

.op-gm-more { display: none !important; }

.op-gm-sellgem { position: fixed; z-index: 2000; width: 26px; height: 20px; margin: -10px 0 0 -13px; image-rendering: pixelated; pointer-events: none; }

/* the osu and sleepy batch (qw26_195) */
.op-gm-acc-mouse-hat { left: 28%; top: -4%; width: 44%; }
.op-gm-acc-coffee-mug { left: 70%; top: 56%; width: 24%; }
.op-gm-acc-paper-bag { left: 22%; top: 0; width: 56%; }
.op-gm-acc-sleep-mask { left: 24%; top: 38%; width: 52%; }
.op-gm-acc-tiny-backpack { left: 72%; top: 48%; width: 24%; }
.op-gm-acc-ear-muffs { left: 10%; top: 12%; width: 80%; }
.op-gm-acc-night-cap { left: 28%; top: -6%; width: 54%; }
.op-gm-acc-keyboard-cap { left: 26%; top: -2%; width: 48%; }
.op-gm-acc-cursor-trail { left: -6%; top: 56%; width: 46%; animation: opu-gm-glow 1.6s ease-in-out infinite; }
.op-gm-acc-approach-ring { left: 6%; top: 8%; width: 88%; animation: opu-gm-approach 1.5s linear infinite; }
.op-gm-acc-spinner-hat { left: 36%; top: -16%; width: 28%; animation: opu-gm-spinner 1.2s steps(12) infinite; }
.op-gm-acc-combo-crown { left: 24%; top: -8%; width: 52%; }
.op-gm-acc-miss-cloud { left: 58%; top: -14%; width: 38%; animation: opu-gm-glow 3s ease-in-out infinite; }
.op-gm-acc-star-halo { left: 22%; top: -16%; width: 56%; animation: opu-gm-glow 2s ease-in-out infinite; }
@keyframes opu-gm-approach { 0% { transform: scale(1.5); opacity: 0; } 30% { opacity: 1; } 90% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes opu-gm-spinner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .op-gm-acc-approach-ring, .op-gm-acc-spinner-hat { animation: none; } }
.op-gm-n-glow-moss { filter: drop-shadow(0 0 4px #a8d060) drop-shadow(0 0 10px rgba(90, 140, 40, .6)); }
.op-gm-n-glow-bubblegum { filter: drop-shadow(0 0 5px #ffb0d8) drop-shadow(0 0 12px rgba(255, 102, 171, .6)); }
.op-gm-n-glow-rust { filter: drop-shadow(0 0 4px #e08a50) drop-shadow(0 0 10px rgba(168, 90, 42, .65)); }
.op-gm-n-glow-sakura { filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 12px #ff8fb8); }
.op-gm-n-glow-ocean { filter: drop-shadow(0 0 4px #c6efff) drop-shadow(0 0 13px #1e78b8); }
.op-gm-n-glow-copper { filter: drop-shadow(0 0 4px #ffc890) drop-shadow(0 0 12px #a85a2a); }
.op-gm-n-glow-sunset { filter: drop-shadow(-2px 0 5px #ffe07a) drop-shadow(2px 0 7px #ff4f6a); }
.op-gm-n-glow-waste { animation: opu-gm-nwaste 1.6s steps(5) infinite; }
.op-gm-n-glow-hologram { animation: opu-gm-nholo 4s linear infinite; }
.op-gm-n-glow-glitch { animation: opu-gm-nglitch 2.2s steps(1) infinite; }
.op-gm-n-glow-eclipse { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 1px #000) drop-shadow(0 0 12px #fff); }
@keyframes opu-gm-nwaste { 0%, 100% { filter: drop-shadow(0 0 4px #e0ff60) drop-shadow(0 0 12px #5ac010); } 50% { filter: drop-shadow(0 0 7px #e0ff60) drop-shadow(0 0 18px #5ac010); } }
@keyframes opu-gm-nholo { 0% { filter: drop-shadow(0 0 5px #7fe0ff) drop-shadow(0 0 12px #b48cf2); } 50% { filter: drop-shadow(0 0 5px #ff9ed0) drop-shadow(0 0 12px #7fe0c0); } 100% { filter: drop-shadow(0 0 5px #7fe0ff) drop-shadow(0 0 12px #b48cf2); } }
@keyframes opu-gm-nglitch { 0%, 88%, 100% { filter: drop-shadow(1px 0 0 #30f0ff) drop-shadow(-1px 0 0 #ff3040); } 90% { filter: drop-shadow(4px 0 0 #30f0ff) drop-shadow(-4px 0 0 #ff3040); } 95% { filter: drop-shadow(-3px 0 0 #30f0ff) drop-shadow(3px 0 0 #ff3040); } }
.op-gm-me.op-gm-th-rainy { background: linear-gradient(135deg, #1a2030, #3a5a7a); }
.op-gm-me.op-gm-th-campfire { background: linear-gradient(135deg, #0e1426, #a8461a); }
.op-gm-me.op-gm-th-lab { background: linear-gradient(135deg, #0e2a2a, #1f8a6a); }
.op-gm-me.op-gm-th-notebook { background: linear-gradient(135deg, #5a6a9a, #a8b8d8); }
.op-gm-me.op-gm-th-moonbase { background: linear-gradient(135deg, #06060f, #5a5a6a); }
.op-gm-me.op-gm-th-tv { background: linear-gradient(135deg, #2a2018, #2a6a5a); }
.op-gm-me.op-gm-th-train { background: linear-gradient(135deg, #0a0b24, #6a5020); }
.op-gm-me.op-gm-th-bedroom { background: linear-gradient(135deg, #3a2a52, #c04a6a); }
.op-gm-me.op-gm-th-autumn { background: linear-gradient(135deg, #a8461a, #e0a040); }
.op-gm-me.op-gm-th-thunderstorm { background: linear-gradient(135deg, #10141e, #4a4e6a); }

/* a good moment gets a banner at the top of the stage */
.op-gm-banner { position: absolute; left: 50%; top: 58px; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: calc(100% - 24px); padding: 10px 22px; background: hsl(var(--h, 45), 70%, 14%); box-shadow: 0 0 0 2px hsl(var(--h, 45), 90%, 62%), 0 6px 0 rgba(0, 0, 0, .45); color: #fff; text-align: center; pointer-events: none; }
.op-gm-banner b { font: 700 1.2rem/1.1 var(--gm-caps); color: hsl(var(--h, 45), 100%, 74%); }
.op-gm-banner span { font-size: .8rem; color: #e6e6ec; }

.op-gm-lockmark { display: none; position: absolute; right: 8px; bottom: 6px; color: #ffe07a; font-size: .75rem; }
.op-gm-it[data-locked] .op-gm-lockmark { display: block; }
.op-gm-locking .op-gm-it { box-shadow: inset 0 0 0 2px rgba(255, 224, 122, .35); }
.op-gm-locking .op-gm-it[data-locked] { box-shadow: inset 0 0 0 3px #ffe07a; }
.op-gm-binbtn.op-gm-on { background: #ffe07a; color: #17171d; }
.op-gm-acc-sticky-note { left: 56%; top: 8%; width: 26%; }
.op-gm-acc-heart-float { left: 70%; top: -6%; width: 18%; animation: opu-gm-glow 2s ease-in-out infinite; }
.op-gm-acc-name-tag { left: 34%; top: 68%; width: 32%; }
.op-gm-acc-traffic-cone { left: 34%; top: -16%; width: 32%; }
.op-gm-acc-snack-bag { left: 72%; top: 50%; width: 24%; }
.op-gm-acc-cloud-hat { left: 20%; top: -4%; width: 60%; }
.op-gm-acc-mushroom-hat { left: 20%; top: -4%; width: 60%; }
.op-gm-acc-light-bulb { left: 40%; top: -24%; width: 20%; animation: opu-gm-glow 1.8s ease-in-out infinite; }
.op-gm-acc-ufo-hat { left: 24%; top: -14%; width: 52%; }
.op-gm-acc-rainbow-arc { left: 2%; top: -14%; width: 96%; }
.op-gm-acc-saturn-rings { left: -6%; top: 34%; width: 112%; animation: opu-gm-glow 3s ease-in-out infinite; }
.op-gm-n-glow-lime { filter: drop-shadow(0 0 4px #c8ff5a) drop-shadow(0 0 10px rgba(140, 220, 40, .55)); }
.op-gm-n-glow-plum { filter: drop-shadow(0 0 4px #c48cf2) drop-shadow(0 0 11px rgba(120, 50, 170, .7)); }
.op-gm-n-glow-ruby { filter: drop-shadow(0 0 4px #ff5a6a) drop-shadow(0 0 12px rgba(190, 20, 40, .75)); }
.op-gm-n-glow-ice { filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 12px #6fd0ff); }
.op-gm-me.op-gm-th-rooftop { background: linear-gradient(135deg, #1a2a4a, #e08a50); }
.op-gm-me.op-gm-th-aquarium { background: linear-gradient(135deg, #0a3a5a, #2fb4c0); }
.op-gm-me.op-gm-th-cinema { background: linear-gradient(135deg, #2a0a10, #8a1a2a); }
.op-gm-me.op-gm-th-station { background: linear-gradient(135deg, #0a0e1e, #4a6a8a); }
.op-gm-say { position: absolute; z-index: 6; width: min(80%, 290px); padding: 10px 14px; transform: translateX(-50%); background: #f5f5f7; color: #17171d; font: 500 .85rem/1.3 'Pixelify Sans', monospace; text-align: center; box-shadow: 0 0 0 3px #17171d, 0 7px 0 3px rgba(0, 0, 0, .3); pointer-events: none; }
.op-gm-say::before, .op-gm-say::after { content: ''; position: absolute; left: var(--tail, 50%); }
.op-gm-say::before { top: calc(100% + 3px); width: 18px; height: 11px; margin-left: -9px; background: #17171d; }
.op-gm-say::after { top: 100%; width: 12px; height: 8px; margin-left: -6px; background: #f5f5f7; }
.op-gm-over { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1880; pointer-events: none; image-rendering: pixelated; }

/* everything stays hard pixels (owner 02.11.2026): the pictures are 34 px wide, so they show at 34 or 68, never smooth */
.op-gm img, .op-gm .op-gm-acc, .op-gm-worn img, .op-gm-worn .op-gm-acc { image-rendering: pixelated; }
.op-gm-tag.op-gm-badge img, .op-gm-bt .op-gm-badge img, .op-gm-rs .op-gm-badge img { width: 34px; height: 34px; }
.op-gm-it .op-gm-badge img, .op-gm-trit .op-gm-badge img { width: 68px; height: 68px; }
.op-gm-petpic { width: 52px; height: 44px; }
.op-gm-it .op-gm-pc .op-gm-kuro { width: 68px; height: 68px; }
.op-gm-trit .op-gm-kuro { width: 60px; height: 60px; }
.op-gm-it .op-gm-pc { min-height: 74px; }
.op-gm .op-gm-it { grid-template-rows: 74px auto; }

/* third batch */
.op-gm-acc-paper-crown { left: 29%; top: -4%; width: 42%; }
.op-gm-acc-bottle-cap { left: 60%; top: 4%; width: 28%; }
.op-gm-acc-paperclip { left: 68%; top: 10%; width: 16%; }
.op-gm-acc-barista-cap { left: 28%; top: 0; width: 44%; }
.op-gm-acc-bobble-hat { left: 28%; top: -14%; width: 44%; }
.op-gm-acc-shower-cap { left: 24%; top: 2%; width: 52%; }
.op-gm-acc-tiny-teacup { left: 68%; top: 54%; width: 28%; }
.op-gm-acc-ref-whistle { left: 56%; top: 60%; width: 36%; }
.op-gm-acc-vampire-fangs { left: 30%; top: 62%; width: 40%; }
.op-gm-acc-ski-goggles { left: 24%; top: 42%; width: 52%; }
.op-gm-acc-tiny-mic { left: 74%; top: 44%; width: 18%; }
.op-gm-acc-witch-broom { left: 8%; top: 44%; width: 84%; }
.op-gm-acc-jetpack { left: -6%; top: 40%; width: 36%; }
.op-gm-acc-cyber-visor { left: 22%; top: 42%; width: 56%; }
.op-gm-acc-caster-headset { left: 0; top: 0; width: 100%; }
.op-gm-acc-frost-wings { left: -8%; top: 14%; width: 116%; animation: opu-gm-glow 3s ease-in-out infinite; }
.op-gm-acc-golden-cursor { left: 74%; top: 2%; width: 22%; animation: opu-gm-glow 2.4s ease-in-out infinite; }
.op-gm-acc-moon-crown { left: 24%; top: -18%; width: 52%; animation: opu-gm-glow 2.6s ease-in-out infinite; }
.op-gm-acc-nine-lives { left: -4%; top: -6%; width: 108%; animation: opu-gm-glow 2.4s ease-in-out infinite; }
.op-gm-n-glow-sand { filter: drop-shadow(0 0 4px #e8cf98) drop-shadow(0 0 9px rgba(150, 110, 50, .55)); }
.op-gm-n-glow-teal { filter: drop-shadow(0 0 4px #5fe8d8) drop-shadow(0 0 10px rgba(20, 130, 130, .65)); }
.op-gm-n-glow-coral { filter: drop-shadow(0 0 4px #ff9a88) drop-shadow(0 0 11px rgba(200, 70, 50, .7)); }
.op-gm-n-glow-candy { filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 12px #ff66b8); }
.op-gm-n-glow-lava { filter: drop-shadow(0 0 4px #ffb347) drop-shadow(0 0 13px #e0301a); }
.op-gm-n-glow-galaxy { filter: drop-shadow(0 0 4px #c8b0ff) drop-shadow(0 0 14px #4a2ad8); }
.op-gm-me.op-gm-th-bamboo { background: linear-gradient(135deg, #1a4a2a, #57c070); }
.op-gm-me.op-gm-th-ice-rink { background: linear-gradient(135deg, #14304a, #a8c8e8); }
.op-gm-me.op-gm-th-laundromat { background: linear-gradient(135deg, #2a5a58, #7fc8c0); }
.op-gm-me.op-gm-th-ramen-shop { background: linear-gradient(135deg, #2a1410, #c0301a); }
.op-gm-me.op-gm-th-concert { background: linear-gradient(135deg, #0a0614, #ff4fa8); }
.op-gm-me.op-gm-th-storm-coast { background: linear-gradient(135deg, #1a2030, #3a6a8a); }
.op-gm-me.op-gm-th-grand-finals { background: linear-gradient(135deg, #0e0a1e, #6a4a9a); }
.op-gm-me.op-gm-th-cat-cafe { background: linear-gradient(135deg, #5a3a22, #c8a078); }
.op-gm-me.op-gm-th-haunted { background: linear-gradient(135deg, #141030, #4a3a6a); }
.op-gm-me.op-gm-th-snow-cabin { background: linear-gradient(135deg, #1a2a52, #bcd0ea); }
.op-gm-acc-bartek-card { left: 30%; top: -30%; width: 40%; animation: opu-gm-glow 2.4s ease-in-out infinite; }
.op-gm-acc-whitecat-cursor { left: 46%; top: 2%; width: 52%; animation: opu-gm-glow 2.4s ease-in-out infinite; }
.op-gm-n-glow-whitecat { filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 12px #ff66ab); }
/* stickers (owner 02.11.2026): the pictures are 54 px wide, so they show at 54 or 108 */
.op-gm-stk { display: block; width: 54px; height: 54px; }
.op-gm-worn .op-gm-stuck { display: inline-block; width: 108px; height: 108px; vertical-align: middle; }
.op-gm-stick { text-align: center; }
.op-gm-stick p { margin: 0 0 12px; font-size: 1rem; }
.op-gm-stick button { display: block; width: 100%; margin-top: 8px; }
/* the WhiteCat sticker is a real picture, not pixel art */
.op-gm img.op-gm-stk[src*="sticker-whitecat"], .op-gm-worn img.op-gm-stuck[src*="sticker-whitecat"] { image-rendering: auto; }
/* gem profile */
.op-gm-pstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.op-gm-pst { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; background: rgba(255, 255, 255, .05); }
.op-gm-pst small { color: #c6c8d0; font-size: .95rem; }
.op-gm-pst b { overflow-wrap: anywhere; font-size: 1.15rem; }
.op-gm-pst-up b { color: #6fd28a; }
.op-gm-pst-down b { color: #ff7a8a; }
.op-gm-pstick { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; }
.op-gm-pstick span { display: flex; align-items: center; gap: 8px; }
@media (max-width: 700px) { .op-gm-pstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }