/* "Unique to this server" section (templates/_unique.html). Everything is scoped under .uq. */
.uq {
  --uq-panel: #0e0b22;
  --uq-panel2: #141033;
  --uq-line: rgba(255, 255, 255, .22);
  --uq-frame: #ffffff;  /* the site's cards: black with a white frame that turns gold on hover */
  --uq-line2: rgba(255, 255, 255, .18);
  --uq-gold: #fee055;
  --uq-amber: #f5a524;
  --uq-body: #cfd4e4;
  --uq-dim: #98a0bb;
  --uq-muted: #5e6684;
  --uq-night: #c9c0ff;
  --uq-ui-edge: #6b5430;
  --uq-ui-text: #e9dcb8;
  --uq-display: 'Cinzel', 'Times New Roman', serif;
  --uq-pixel: 'Press Start 2P', ui-monospace, monospace;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* The site styles every button (panel.css: pixel font, capitals, black box, yellow lift on hover).
   :where() keeps this reset at element weight, so the section's own button classes still win. */
:where(.uq) button { font-family: inherit; font-size: inherit; font-weight: inherit; text-transform: none; letter-spacing: normal; }
.uq button:hover { transform: none; box-shadow: none; }
.uq button:focus-visible { outline: 2px solid var(--uq-gold); outline-offset: 2px; }
.uq .retro-hud-header { margin-bottom: 0; }

/* Cinzel has no Turkish lowercase i (it draws a dotless small capital), so its headings are set in
   capitals; the page's lang attribute makes the browser turn i into İ and ı into I. */
.uq-title,
.uq h3 { text-transform: uppercase; letter-spacing: .03em; }
.uq-title { font-family: var(--uq-display); font-weight: 900; font-size: clamp(28px, 4.4vw, 50px); line-height: 1.06; text-align: center; margin: 4px auto 6px; max-width: 820px; text-wrap: balance;
  background: linear-gradient(180deg, #fff 30%, #d9cfa8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uq h3 { font-family: var(--uq-display); font-weight: 800; line-height: 1.2; margin: 0; text-wrap: balance; color: #fff; }
.uq p { margin: 0; color: var(--uq-body); }
.uq-pix { font-family: var(--uq-pixel); font-size: 7.5px; letter-spacing: .12em; }

/* creed: grind, reward, no pay-to-win */
.uq-creed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--uq-frame); border-radius: 16px; overflow: hidden; background: #000; }
.uq-creed-col { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.uq-creed-col + .uq-creed-col { border-left: 1px solid var(--uq-line); }
.uq-creed-col .uq-pix { color: var(--uq-dim); }
.uq-creed-col h3 { font-size: clamp(19px, 2vw, 23px); }
.uq-creed-col p { font-size: 14px; line-height: 1.6; }
.uq-strong { background: linear-gradient(160deg, rgba(254,224,85,.13), rgba(254,224,85,.02) 70%); }
.uq-strong .uq-pix, .uq-strong h3 { color: var(--uq-gold); }
.uq-strong h3 { font-size: clamp(24px, 2.6vw, 30px); }

/* cards */
.uq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; }
.uq-c7 { grid-column: span 7; }
.uq-c5 { grid-column: span 5; }
.uq-card { position: relative; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #000; border: 1.5px solid var(--uq-frame); transition: border-color .3s, box-shadow .3s; min-width: 0; }
.uq-card:hover { border-color: var(--uq-gold); box-shadow: 0 8px 24px rgba(0,0,0,.85); }
.uq-media { position: relative; flex: 1; min-height: 300px; padding: 26px; display: flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate; }
/* The backdrop is blurred and darkened ahead of time (img/unique/card_bg.webp): a live blur filter
   on four large cards was expensive to repaint while scrolling. */
.uq-media::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url('../img/unique/card_bg.webp') var(--bp, 30% 60%) / 180% no-repeat; }
.uq-media::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 70% at 50% 45%, transparent, rgba(7,5,26,.75)); }
.uq-body { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--uq-line); }
.uq-body h3 { font-size: clamp(21px, 2.2vw, 26px); }
.uq-body p { font-size: 14.5px; line-height: 1.65; max-width: 60ch; }
.uq-label { display: flex; align-items: center; gap: 10px; color: var(--uq-gold); }
.uq-key { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border: 1.5px solid var(--uq-gold); border-bottom-width: 3px; border-radius: 6px; font-size: 8px; }
.uq-nums { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 6px; }
.uq-nums div { display: flex; flex-direction: column; }
.uq-nums b { font-family: var(--uq-display); font-weight: 800; font-size: 22px; line-height: 1.1; color: var(--uq-gold); }
.uq-nums span { font-size: 12px; color: var(--uq-dim); }
.uq-prog { display: block; height: 8px; border-radius: 4px; background: #0a0705; border: 1px solid #3c2f1c; overflow: hidden; }
.uq-prog i { display: block; height: 100%; background: linear-gradient(90deg, #b8860b, #fee055); }
.uq-prog.done i { background: linear-gradient(90deg, #2f8a3c, #6fdc7a); }

/* Metin2-style window */
.uq .uq-mbtn:hover { background: linear-gradient(180deg, #5a4426, #33240f); border-color: #8a7550; color: #f3e6c4; }
.uq-mw { width: 100%; background: linear-gradient(180deg, rgba(24,17,10,.96), rgba(14,10,6,.96)); border: 1px solid var(--uq-ui-edge); border-radius: 6px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255,220,150,.06), 0 20px 50px rgba(0,0,0,.6); color: var(--uq-ui-text); font-size: 12px; }
.uq-mw-t { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; background: linear-gradient(180deg, #4a2a16, #2c180c); border-bottom: 1px solid var(--uq-ui-edge); border-radius: 5px 5px 0 0; font-weight: 700; color: #f3e6c4; }
.uq-xb { width: 16px; height: 16px; border: 1px solid #8a7550; border-radius: 3px; display: grid; place-items: center; font-size: 10px; color: #d8c8a0; line-height: 1; }
.uq-slot { width: 34px; height: 34px; flex: none; background: #0a0705; border: 1px solid #3c2f1c; border-radius: 3px; display: grid; place-items: center; }
.uq-slot img { width: 30px; height: 30px; image-rendering: pixelated; }
a.uq-mbtn { text-decoration: none; display: inline-block; }
.uq-mbtn { border: 1px solid #8a7550; background: linear-gradient(180deg, #5a4426, #33240f); color: #f3e6c4; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.uq-mbtn:hover { filter: brightness(1.2); }
.uq-mbtn.off { opacity: .5; cursor: default; filter: none; }

/* day & night */
.uq-dn-media { flex-direction: column; gap: 14px; transition: background .8s; background: radial-gradient(70% 60% at 50% 38%, rgba(254,224,85,.22), transparent 70%); }
.uq-dn-media::before { display: none; }
.uq.is-night .uq-dn-media { background: radial-gradient(70% 60% at 50% 38%, rgba(120,110,255,.22), transparent 70%), linear-gradient(180deg, #0b0a2a, transparent); }
.uq-sky-dots { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; background-image: radial-gradient(1.5px 1.5px at 12% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 70%, #fff, transparent), radial-gradient(1px 1px at 78% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 88% 60%, #fff, transparent), radial-gradient(1px 1px at 60% 85%, #fff, transparent), radial-gradient(1px 1px at 45% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 8% 82%, #fff, transparent); }
.uq.is-night .uq-sky-dots { opacity: .8; }
.uq-sky { position: relative; width: 132px; height: 132px; }
/* the glow is a static gradient behind the icon; a drop-shadow filter on the spinning rays was redrawn every frame */
.uq-sky::before { content: ''; position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(254,205,40,.45), transparent 62%); transition: background .8s; }
.uq.is-night .uq-sky::before { background: radial-gradient(circle, rgba(170,180,255,.35), transparent 62%); }
.uq-sky svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .8s, transform .8s; }
.uq-rays { transform-origin: 60px 60px; animation: uq-spin 40s linear infinite; will-change: transform; }
@keyframes uq-spin { to { transform: rotate(360deg); } }
.uq-moon { opacity: 0; transform: rotate(-20deg) scale(.85); }
.uq.is-night .uq-sun { opacity: 0; transform: rotate(40deg) scale(.85); }
.uq.is-night .uq-moon { opacity: 1; transform: none; }
.uq-now { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-variant-numeric: tabular-nums; }
.uq-now small { font-size: 6.5px; color: var(--uq-dim); }
.uq-now b { font-family: var(--uq-display); font-weight: 800; font-size: 24px; text-transform: uppercase; letter-spacing: .04em; color: var(--uq-gold); }
.uq.is-night .uq-now b { color: var(--uq-night); }
.uq-now span { font-size: 13px; color: var(--uq-body); }
.uq-dn-bar { position: relative; width: 100%; max-width: 280px; height: 8px; display: grid; grid-template-columns: 80fr 40fr; gap: 3px; }
.uq-dn-bar .d { background: linear-gradient(90deg, #fee055, #f5a524); border-radius: 4px 0 0 4px; }
.uq-dn-bar .n { background: linear-gradient(90deg, #4b3aa8, #241a5c); border-radius: 0 4px 4px 0; }
.uq-marker { position: absolute; top: -4px; bottom: -4px; left: 0; width: 3px; margin-left: -1.5px; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.5); transition: left .6s; }
.uq-night-only { display: none; }
.uq.is-night .uq-night-only { display: inline; }
.uq.is-night .uq-day-only { display: none; }

/* alpha monsters */
.uq-a-media { --bp: 60% 70%; }
.uq-hunters { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.uq-hunter { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* The thumbnails are 4:5 crops of the screenshots; contain keeps the whole monster in view. */
.uq-hunter img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; background: #000; border-radius: 12px; border: 1px solid var(--uq-line2); display: block; }
.uq-hunter figcaption { font-weight: 700; font-size: 15px; color: #fff; }
.uq-more { font-size: 13px !important; color: var(--uq-dim) !important; }
.uq-more b { color: var(--uq-body); }

/* zoomable images + lightbox */
.uq-zoom { position: relative; padding: 0; border: 0; background: none; cursor: zoom-in; display: block; border-radius: 12px; }
.uq-zoom::after { content: ''; position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 8px; opacity: 0; transition: opacity .2s;
  background: rgba(0,0,0,.65) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4a6 6 0 1 0 3.5 10.9l4.3 4.3 1.4-1.4-4.3-4.3A6 6 0 0 0 10 4zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm-1 1.5v1.5H7.5v2H9v1.5h2V11h1.5V9H11V7.5z' fill='white'/%3E%3C/svg%3E") center / 18px no-repeat; }
.uq .uq-zoom:hover { background: none; border: 0; }
.uq-zoom:hover::after, .uq-zoom:focus-visible::after { opacity: 1; }
.uq-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(4,2,14,.9); display: grid; place-items: center; padding: 20px 16px; cursor: zoom-out; }
.uq-lightbox[hidden] { display: none; }
.uq-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.7); }
.uq-lb-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--uq-line2); background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; cursor: pointer; }
.uq .uq-lb-close:hover { background: rgba(0,0,0,.8); color: #fff; border-color: var(--uq-line2); }
.uq-lb-close svg { width: 18px; height: 18px; }

/* K inventory */
.uq-k-media { --bp: 20% 50%; gap: 26px; }
.uq-k-zoom { transform: rotate(-2deg); border-radius: 6px; }
.uq-k-shot { height: 280px; width: auto; border-radius: 6px; box-shadow: 0 20px 50px rgba(0,0,0,.7); display: block; }
.uq-k-secs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 300px; }
.uq-k-sec { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(10,8,26,.7); border: 1px solid var(--uq-line2); font-size: 12.5px; font-weight: 600; line-height: 1.25; color: #fff; }
.uq-k-sec img { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }

/* badges */
.uq-b-media { --bp: 70% 40%; flex-direction: column; gap: 18px; }
.uq-b-hero { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 360px; }
.uq-b-hero > img { width: 92px; height: 92px; flex: none; filter: drop-shadow(0 8px 20px rgba(254,205,40,.35)); animation: uq-float 4s ease-in-out infinite; will-change: transform; }
@keyframes uq-float { 50% { transform: translateY(-5px); } }
.uq-b-hero div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.uq-b-hero b { font-family: var(--uq-display); font-weight: 800; font-size: 19px; text-transform: uppercase; color: #fff; }
.uq-b-hero small { color: var(--uq-dim); font-size: 12px; }
.uq-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 360px; }
.uq-tier { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 8px 4px 9px; border-radius: 12px; background: rgba(10,8,26,.6); border: 1px solid var(--uq-line); }
.uq-tier img { width: 44px; height: 44px; }
.uq-tier b { font-size: 11.5px; }
.uq-tier span { font-size: 10.5px; color: var(--uq-dim); font-variant-numeric: tabular-nums; }
.uq-t1 b { color: #e0a06a; } .uq-t2 b { color: #d5dae2; } .uq-t3 b { color: #ffcd28; } .uq-t4 b { color: #c58cff; }
.uq-tier-now { border-color: rgba(255,205,40,.6); background: rgba(255,205,40,.07); }
.uq-chat { display: flex; align-items: center; gap: 6px; font-size: 12.5px; background: rgba(0,0,0,.55); border-radius: 6px; padding: 5px 10px; max-width: 360px; width: 100%; color: #fff; }
.uq-chat img { width: 18px; height: 18px; }
.uq-chat b { color: #9fd8ff; font-weight: 600; }
.uq-flag { width: 30px; height: 20px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 2px 4px rgba(0,0,0,.4); display: block; flex: none; }
.uq-chat .uq-flag { width: 18px; height: 12px; border-radius: 2px; }
.uq-all { display: flex; flex-wrap: wrap; gap: 4px; }
.uq-all img { width: 30px; height: 30px; }

/* daily board */
.uq-d-media { --bp: 40% 30%; }
.uq-d-win { max-width: 560px; }
.uq-d-sec { padding: 10px 12px; border-bottom: 1px solid #2a2014; display: flex; flex-direction: column; gap: 8px; }
.uq-d-sec:last-child { border-bottom: 0; }
.uq-d-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 11px; font-weight: 700; color: #c9a95e; letter-spacing: .04em; text-transform: uppercase; }
.uq-d-h span { text-transform: none; letter-spacing: 0; color: #a8987a; font-weight: 500; text-align: right; }
.uq-streak { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.uq-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 4px; border: 1px solid #3c2f1c; background: #0a0705; font-size: 10px; color: #a8987a; min-width: 0; text-align: center; }
.uq-day img { width: 26px; height: 26px; image-rendering: pixelated; }
.uq-day.got { opacity: .55; }
.uq-day.today { border-color: #fee055; color: #fee055; box-shadow: inset 0 0 10px rgba(254,224,85,.25); }
.uq-day.big { border-color: #8a5cc0; background: linear-gradient(180deg, #24123a, #0a0705); color: #d9b8ff; }
.uq-bounty { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 12px; align-items: center; font-size: 12px; }
.uq-bounty .tt { color: #f3e6c4; font-weight: 600; }
.uq-bounty .c { font-size: 10.5px; color: #a8987a; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: 3px; }
.uq-online { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.uq-online div { text-align: center; font-size: 10.5px; color: #a8987a; padding: 6px 2px; border-radius: 4px; border: 1px solid #3c2f1c; background: #0a0705; }
.uq-online b { display: block; color: #f3e6c4; font-size: 12px; }
.uq-online .ok { border-color: #2f8a3c; color: #6fdc7a; }
.uq-online .ok b { color: #6fdc7a; }

/* mail */
.uq-m-media { --bp: 55% 70%; }
.uq-m-stack { width: 100%; max-width: 380px; }
.uq-letter { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-bottom: 1px solid #2a2014; }
.uq-letter .dot { width: 7px; height: 7px; border-radius: 50%; background: #ffcd28; box-shadow: 0 0 6px #ffcd28; }
.uq-letter.read .dot { background: transparent; box-shadow: none; }
.uq-letter .from { font-size: 10.5px; color: #c9a95e; font-weight: 700; }
.uq-letter .sub { font-size: 12.5px; color: #f3e6c4; font-weight: 600; }
.uq-letter.read .sub { color: #a8987a; }
.uq-letter .msg { font-size: 11.5px; color: #a8987a; line-height: 1.4; }
.uq-letter .att { display: flex; gap: 4px; margin-top: 6px; }
.uq-mw-f { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; gap: 10px; font-size: 11px; color: #a8987a; }
.uq-env-tip { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--uq-body); background: rgba(10,8,26,.7); border: 1px solid var(--uq-line2); border-radius: 10px; padding: 7px 10px; }
.uq-env-tip img { width: 22px; height: 22px; }

/* lantern spirit: a wide card, media on the left */
.uq-c12 { grid-column: span 12; }
.uq-spirit { flex-direction: row; }
.uq-spirit .uq-media { flex: 0 0 46%; min-height: 0; flex-direction: column; align-items: stretch; gap: 16px; background: radial-gradient(60% 70% at 30% 40%, rgba(255,170,60,.18), transparent 70%); }
.uq-spirit .uq-media::before { display: none; }
.uq-spirit .uq-body { flex: 1; justify-content: center; border-top: 0; border-left: 1px solid var(--uq-line); }
.uq-s-charm { display: flex; align-items: center; gap: 14px; }
.uq-s-charm .uq-slot { width: 76px; height: 76px; border-color: #8a6a2a; box-shadow: 0 0 24px rgba(255,170,60,.35); }
.uq-s-charm .uq-slot img { width: 64px; height: 64px; }
.uq-s-charm b { font-family: var(--uq-display); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: .03em; color: #ffd08a; }
.uq-s-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.uq-s-list li { padding: 10px 12px; border-radius: 12px; background: rgba(10,8,26,.6); border: 1px solid var(--uq-line2); font-size: 13px; line-height: 1.45; color: #fff; }

/* beta rewards */
.uq-beta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: radial-gradient(120% 120% at 100% 0%, rgba(120,50,200,.22), transparent 55%), #000; }
.uq-beta-info { padding: 32px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.uq-beta-info .uq-label { color: #c58cff; }
.uq-beta-info h3 { font-size: clamp(24px, 2.6vw, 30px); }
.uq-beta-info > p { font-size: 14.5px; }
.uq-reward { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(10,8,26,.55); border: 1px solid var(--uq-line2); }
.uq-reward div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uq-reward b { font-size: 15px; color: #fff; }
.uq-reward span { font-size: 13px; color: var(--uq-body); line-height: 1.5; }
.uq-rw-badge { width: 60px; height: 60px; flex: none; filter: drop-shadow(0 6px 16px rgba(176,96,255,.45)); }
.uq-rw-slot { width: 60px; height: 60px; }
.uq-rw-slot img { width: 48px; height: 48px; }
.uq-ronin { position: relative; min-height: 460px; border-left: 1px solid var(--uq-line); display: flex; flex-direction: column; background: radial-gradient(60% 55% at 50% 58%, rgba(255,64,255,.16), transparent 70%), radial-gradient(40% 12% at 50% 88%, rgba(0,240,255,.18), transparent 70%); }
.uq-ronin iframe { flex: 1; width: 100%; min-height: 380px; border: 0; background: transparent; display: block; }
.uq-ronin-ctrl { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 16px 18px; }
.uq-pills { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(8,6,24,.7); border: 1px solid var(--uq-line2); }
.uq-pills button { border: 0; background: none; color: var(--uq-body); font-weight: 600; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.uq .uq-pills button:hover { background: rgba(255,255,255,.06); color: #fff; }
.uq .uq-pills button.on, .uq .uq-pills button.on:hover { background: var(--uq-gold); color: #000; }

/* more coming */
.uq-soon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 28px 32px; border-style: dashed; }
.uq-soon:hover { border-style: dashed; }
.uq-soon-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.uq-soon-info h3 { font-size: clamp(22px, 2.4vw, 28px); }
.uq-soon-info p { font-size: 14.5px; max-width: 56ch; }
.uq-soon-slots { display: flex; gap: 10px; }
.uq-lock { width: 92px; height: 92px; border-radius: 10px; border: 1px solid #3c2f1c; background: linear-gradient(180deg, #17110a, #0a0705); color: #6b5430; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 700; }
.uq-lock svg { width: 26px; height: 26px; }
.uq-lock span { color: #a8987a; }

/* languages */
.uq-langs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.uq-l-left { padding: 30px; display: flex; flex-direction: column; gap: 14px; justify-content: center; border-right: 1px solid var(--uq-line); }
.uq-big15 { font-family: var(--uq-display); font-weight: 900; font-size: 84px; line-height: .9; background: linear-gradient(180deg, #fff3b8, #f5a524); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uq-l-left h3 { font-size: 26px; }
.uq-l-left p { font-size: 14.5px; }
.uq-say { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.uq-npc-line { font-size: 16px; font-weight: 600; color: #fff3d6; min-height: 1.6em; }
.uq-npc-line::after { content: '|'; color: var(--uq-gold); margin-left: 2px; animation: uq-cur 1s steps(1) infinite; }
@keyframes uq-cur { 50% { opacity: 0; } }
.uq-npc-code { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.uq-npc-code .uq-flag { width: 21px; height: 14px; border-radius: 2px; }
.uq-l-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 24px; align-content: center; }
.uq-lang { border: 1px solid var(--uq-line); border-radius: 12px; background: rgba(255,255,255,.02); padding: 11px 6px 9px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; color: var(--uq-body); font-size: 12px; min-width: 0; }
.uq-lang span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.uq .uq-lang:hover { background: rgba(255,255,255,.04); color: #fff; border-color: rgba(254,224,85,.4); }
.uq .uq-lang.on, .uq .uq-lang.on:hover { border-color: var(--uq-gold); background: rgba(254,224,85,.08); color: #fff; }

@media (max-width: 960px) {
  .uq-spirit { flex-direction: column; }
  .uq-spirit .uq-media { flex-basis: auto; }
  .uq-spirit .uq-body { border-left: 0; border-top: 1px solid var(--uq-line); }
  .uq-c7, .uq-c5 { grid-column: span 12; }
  .uq-creed { grid-template-columns: minmax(0, 1fr); }
  .uq-creed-col + .uq-creed-col { border-left: 0; border-top: 1px solid var(--uq-line); }
  .uq-beta, .uq-langs, .uq-soon { grid-template-columns: minmax(0, 1fr); }
  .uq-ronin { border-left: 0; border-top: 1px solid var(--uq-line); min-height: 420px; }
  .uq-l-left { border-right: 0; border-bottom: 1px solid var(--uq-line); }
}
@media (max-width: 720px) {
  .uq-k-media { flex-direction: column; }
  .uq-k-shot { height: 220px; }
  .uq-bounty { grid-template-columns: minmax(0, 1fr) 90px; }
  .uq-bounty .uq-mbtn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 480px) {
  .uq-s-list { grid-template-columns: minmax(0, 1fr); }
  .uq-hunters { gap: 8px; }
  .uq-hunter figcaption { font-size: 12px; line-height: 1.3; }
  .uq-l-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px; }
  .uq-media { padding: 18px 14px; }
  .uq-streak { gap: 3px; }
  .uq-day { font-size: 9px; }
  .uq-day img { width: 22px; height: 22px; }
  .uq-online { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uq-big15 { font-size: 64px; }
  .uq-beta-info, .uq-soon { padding: 22px 18px; }
  .uq-lock { width: auto; flex: 1; height: 80px; }
}
/* Entrance (classes set by js/unique.js): the pieces of a card arrive after the card itself, the
   second card of a row a moment after the first. Nothing is hidden before .is-revealed: the card
   is still invisible then because of the site's own .m2-scroll-reveal. */
.uq-grid > .uq-card:nth-child(even) { --d: .14s; transition-delay: .14s; }
.uq .is-revealed .uq-a-up { animation: uq-in .6s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--d, 0s) + .18s + var(--i, 0) * var(--step, 80ms)); }
.uq .is-revealed .uq-a-pop { animation: uq-pop .45s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--d, 0s) + .3s + var(--i, 0) * var(--step, 60ms)); }
/* only a start frame: each piece ends on its own style (a tilted screenshot, a dimmed day, hidden stars) */
@keyframes uq-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes uq-pop { from { opacity: 0; transform: scale(.8); } }

/* js/unique.js sets .uq-idle while the section is off screen */
.uq.uq-idle *, .uq.uq-idle *::before, .uq.uq-idle *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .uq *, .uq *::before, .uq *::after { animation: none !important; transition-duration: 0s !important; }
}