/* Kuroloot look (owner 03.11.2026: "font more readable everywhere, nicer pixel icons, nicer and handier"). Loaded by the menu on every
   Kuroloot page. The menu comes before the page's own gem files, so every rule here starts with html to win. Only .op-kl-* plus overrides of .op-gm-* */

/* ---------- readable font: text and numbers in the clear site font (Pixelify and Silkscreen turn a small 5 into an S),
   pixel letters only where they are big: page titles, box headings, buttons ---------- */
html .op-gm, html .op-gm-worn, html .op-gm-fly, html .op-gm-banner, html .op-sl-record, html .op-kl-tabs {
  --gm-read: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif;
  --gm-pixel: 'Pixelify Sans', ui-monospace, monospace;
  --gm-body: var(--gm-read); --gm-caps: var(--gm-read);
}
html .op-gm { font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-family: var(--gm-read); }
html .op-gm b, html .op-gm strong { font-variant-numeric: tabular-nums; }
html .op-gm .op-gm-top h1 { font-family: Silkscreen, 'Pixelify Sans', monospace !important; letter-spacing: .02em; }
html .op-gm .op-gm-card > h2, html .op-gm .op-gw-h, html .op-gm .op-gm-fold > summary, html .op-gm .op-gw-rarh, html .op-gm .op-sl-side h2 { font-family: var(--gm-pixel) !important; font-size: 1.05rem !important; font-weight: 700 !important; letter-spacing: .02em; }
/* buttons and links: pixel letters, but normal case and a bit bigger, small pixel capitals were hard to read (C looked like O) */
html .op-gm .op-gm-open, html .op-gm .op-gm-link, html .op-gm .op-gm-chipb, html .op-gm .op-gw-nav a, html .op-gm .op-gm-tap .op-gm-taptx { font-family: var(--gm-pixel) !important; font-weight: 700 !important; font-size: .95rem !important; text-transform: none; letter-spacing: .02em; }
html .op-kl-tabs span { font-family: var(--gm-read); font-weight: 600; font-size: .7rem; }
html .op-gm small, html .op-gm .op-gm-note, html .op-gm .op-gm-keys { font-size: max(.85em, 13px); }
html .op-gm .op-gm-note { color: #b8b8c6; line-height: 1.55; }
html .op-gm .op-gm-bal, html .op-gm .op-gl-hud, html .op-gm .op-gm-tapprice b { font-family: var(--gm-read); font-weight: 700; }

/* ---------- pixel icons (branding/gems/ui/gen.py) ---------- */
.op-kl-ic { display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; image-rendering: pixelated; }
html .op-gm-link .op-kl-ic { width: 20px; height: 20px; }
html .op-nav .nav-link > .op-kl-ic { width: 20px; height: 20px; margin-right: 6px; vertical-align: -4px; }

/* ---------- bigger, calmer controls ---------- */
html .op-gm .op-gm-open { min-height: 44px; }
html .op-gm input[type="text"], html .op-gm input[type="number"], html .op-gm input[type="search"] { min-height: 42px; font-size: 1rem; }
html .op-gm .op-gm-card { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .04); }

/* ---------- phone: the main pages at the thumb ---------- */
.op-kl-tabs { display: none; }
@media (max-width: 640px) {
  .op-kl-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: #0b0b10; box-shadow: 0 -2px 0 #1e1e26; }
  .op-kl-tabs a { display: grid; justify-items: center; gap: 2px; padding: 4px 0; color: #a4a4b2; text-decoration: none; min-width: 0; }
  .op-kl-tabs img { width: 26px; height: 26px; image-rendering: pixelated; }
  .op-kl-tabs span { font-size: .62rem; }
  .op-kl-tabs a[aria-current="page"] { color: #fff; background: #17171f; box-shadow: inset 0 -3px 0 #7fe0c0; }
  body:has(.op-kl-tabs) { padding-bottom: 72px; }
  :fullscreen .op-kl-tabs { display: none; }
  html .op-gm { font-size: 16px; }
}

/* ---------- items (owner 03.11.2026: "make all items better and visible, they must not look odd") ----------
   every picture stands on a light hard-edged plate, so black Kuro and dark badges stand out; badges without their squeezed name
   (the name is under the picture anyway); items you do not own yet are clearly visible, only a little grey */
html .op-gm .op-gm-it { grid-template-rows: 100px auto; gap: 6px; padding: 8px; }
html .op-gm .op-gm-it .op-gm-pc { min-height: 100px; background: #2c2c38; box-shadow: inset 0 4px 0 rgba(255, 255, 255, .07), inset 0 -5px 0 rgba(0, 0, 0, .32), inset 0 0 0 2px rgba(255, 255, 255, .03); }
html .op-gm .op-gm-it .op-gm-pc .op-gm-kuro { width: 88px; height: 88px; }
html .op-gm .op-gm-it .op-gm-badge { gap: 0; font-size: 0; color: transparent; box-shadow: none !important; text-shadow: none; animation: none; background: none; }
html .op-gm .op-gm-it .op-gm-badge img { width: 68px; height: 68px; }
html .op-gm .op-gm-it .op-gm-tag:not(.op-gm-badge) { max-width: calc(100% - 12px); padding: 5px 10px; font-size: .9rem; white-space: normal; text-align: center; line-height: 1.25; background: #191920; box-shadow: inset 0 0 0 2px var(--c, #3a3a46); }
html .op-gm .op-gm-it .op-gm-look { width: 96px; height: 64px; }
html .op-gm .op-gm-it .op-gm-stk { max-height: 88px; }
html .op-gm .op-gm-it .op-gm-nm2 { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; font-weight: 600; }
html .op-gm .op-gm-it.op-gm-locked { opacity: .78; }
html .op-gm .op-gm-it.op-gm-locked .op-gm-pc > * { filter: grayscale(.55) brightness(.9); }
html .op-gm .op-gm-it:not(.op-gm-locked) { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c, #3a3a46) 45%, transparent); }
@media (max-width: 640px) {
  html .op-gm .op-gm-it { grid-template-rows: 70px auto; gap: 4px; padding: 5px; }
  html .op-gm .op-gm-it .op-gm-pc { min-height: 70px; }
  html .op-gm .op-gm-it .op-gm-pc .op-gm-kuro { width: 62px; height: 62px; }
  html .op-gm .op-gm-it .op-gm-badge img { width: 50px; height: 50px; }
  html .op-gm .op-gm-it .op-gm-tag:not(.op-gm-badge) { padding: 3px 5px; font-size: .68rem; }
  html .op-gm .op-gm-it .op-gm-look { width: 66px; height: 44px; }
  html .op-gm .op-gm-it .op-gm-stk { max-height: 62px; }
  html .op-gm .op-gm-it .op-gm-nm2 { font-size: .74rem; }
  html .op-gm .op-gm-it .op-gm-pc img { max-height: 66px; }
}

/* ---------- cursor picker (cursor-v1.js) ---------- */
.op-kl-curs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.op-kl-curs button { display: grid; justify-items: center; gap: 6px; padding: 12px 4px; border: 0; background: var(--gm-tile, #1a1a21); color: #f2f2f5; font: 600 .85rem/1.2 var(--gm-read, sans-serif); min-width: 0; }
.op-kl-curs button img { width: 32px; height: 32px; image-rendering: pixelated; }
.op-kl-curs button i { font-size: 22px; line-height: 32px; }
.op-kl-curs button[aria-pressed="true"] { background: #23232c; box-shadow: inset 0 0 0 2px #7fe0c0; }
.op-kl-curfx { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.op-kl-curfx input { width: 18px; height: 18px; accent-color: #7fe0c0; }
@media (max-width: 520px) { .op-kl-curs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- picked and worn items keep their outline over the rarity rim (owner 03.11.2026: "a red outline when you pick them") ---------- */
html .op-gm .op-gm-it.op-gm-wearing { box-shadow: inset 0 0 0 3px var(--c, #7fe0c0); }
html .op-gm .op-gm-it.op-gm-sel { position: relative; box-shadow: inset 0 0 0 4px #ff3b3b, 0 0 0 2px #ff3b3b; background: #2a1518; }
html .op-gm .op-gm-it.op-gm-sel::after { content: ""; position: absolute; bottom: 6px; right: 6px; width: 14px; height: 14px; background: #ff3b3b; box-shadow: inset 0 0 0 3px #2a1518, 0 0 0 2px #ff3b3b; }
html .op-gm .op-gm-it.op-gm-sel.op-gm-locked { opacity: 1; }

/* ---------- whole inventory worth ---------- */
.op-kl-worth { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 16px; background: #15151b; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .04); }
.op-kl-worth span { color: #dcdce3; font-weight: 600; }
.op-kl-worth b { display: inline-flex; align-items: center; gap: 6px; color: #7fe0c0; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.op-kl-worth b img { width: 18px; height: 18px; image-rendering: pixelated; }
.op-kl-worth small { color: var(--gm-mut, #a4a4b2); }
.op-kl-curtop { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.op-kl-curtop > img { width: 64px; height: 64px; padding: 8px; background: #2c2c38; image-rendering: pixelated; }
.op-kl-curtop b { display: block; font-size: 1.05rem; }
.op-kl-curtop small { color: var(--gm-mut, #a4a4b2); }
html .op-gm .op-kl-curs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* cursor items in the item tiles */
.op-gm-cur { width: 64px; height: 64px; image-rendering: pixelated; }
@media (max-width: 640px) { .op-gm-cur { width: 48px; height: 48px; } }

/* ---------- Nova, the rarity above Eclipse (owner 03.11.2026): cyan and pink starlight ---------- */
html .op-gm, html .op-gm-worn, html .op-gm-myth { --gm-nova: #7df9ff; }
html .op-gm .op-gw-rar[data-r="nova"] .op-gw-rarh { background: linear-gradient(90deg, #1a0a3a, #3a0a4a 60%, #0a2a3a); box-shadow: inset 3px 0 0 #7df9ff; color: #e8fdff; }
html .op-gm .op-gw-rar[data-r="nova"] .op-gw-rarh span { color: #7df9ff; text-shadow: 2px 0 0 #ff6ad5; }
.op-gm-tag[data-r="nova"] { color: #e8fdff; background: #1a0a3a; box-shadow: inset 0 0 0 1px #7df9ff; }
.op-gm-acc-nova-crown { left: 26%; top: -6%; width: 48%; }
.op-gm-n-glow-nova { filter: drop-shadow(0 0 2px #7df9ff) drop-shadow(0 0 6px #ff6ad5); }
.op-gm-nova .op-gm-mcard h2 span { color: #7df9ff !important; text-shadow: 4px 0 0 #ff6ad5, -4px 0 0 #b48cf2, 0 6px 0 #000 !important; }
.op-gm-nova::after { box-shadow: inset 0 0 140px 40px rgba(125, 249, 255, .35); }
html .op-gm .op-gm-it[style*="--gm-nova"]:not(.op-gm-locked) { box-shadow: inset 0 0 0 2px #7df9ff, inset 0 0 0 4px #ff6ad5; }
.op-gm-me.op-gm-th-nova-sky { background: linear-gradient(135deg, #05021a, #3a0a5a 60%, #0a3a4a); }
.op-gm-novafx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2005; pointer-events: none; image-rendering: pixelated; }
/* Nova's big screen is deep space instead of Divine's gold */
html .op-gm-myth.op-gm-nova { background: radial-gradient(circle at 50% 45%, #2a0a5a 0, #10042a 45%, #02010c 100%); }
html .op-gm-myth.op-gm-nova .op-gm-mcard::before { background: radial-gradient(closest-side, rgba(125, 249, 255, .35), rgba(255, 106, 213, .18) 60%, transparent); }

/* ---------- buttons press down like a key (owner 03.11.2026: "animation and a sound when you press buttons"), cursor-v1.js plays the click ---------- */
html .op-gm button, html .op-gm .op-gm-link, html .op-kl-tabs a, html .op-nav .nav-link, html .op-gm .op-gw-nav a { transition: transform .07s steps(2), filter .07s steps(2); }
html .op-gm button:not(:disabled):active, html .op-gm a.op-gm-link:active, html .op-kl-tabs a:active, html .op-nav .nav-link:active, html .op-gm .op-gw-nav a:active { transform: translateY(3px) scale(.97); filter: brightness(1.18); }
html .op-gm .op-gm-open:not(:disabled):active { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35) !important; }