/* Кантина — styles lifted from the original chatname.ru frames
   (left.html / right.html / down.html). Colours, fonts and control metrics are
   reproduced verbatim. */

html, body { margin: 0; padding: 0; }

/* original scrollbar palette (IE/Win attributes -> webkit equivalents) */
* {
  scrollbar-face-color: #000000;
  scrollbar-shadow-color: #000000;
  scrollbar-highlight-color: #000000;
  scrollbar-3dlight-color: #808080;
  scrollbar-darkshadow-color: #808080;
  scrollbar-track-color: #292421;
  scrollbar-arrow-color: #FAEBD7;
}
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: #292421; }
::-webkit-scrollbar-thumb { background: #000000; border: 1px solid #808080; }
::-webkit-scrollbar-button {
  background: #000000; border: 1px solid #808080;
  display: block; height: 16px; width: 16px;
}
::-webkit-scrollbar-corner { background: #000000; }

/* ====== overall 3-region layout (mirrors frameset rows="*,50" / cols="*,230") */
#wrap { display: flex; flex-direction: column; height: 100vh; background: #000000; }
#top  { display: flex; flex: 1 1 auto; min-height: 0; }

/* ---- leftFrame : the conversation -------------------------------------- */
#chat {
  flex: 1 1 auto; min-width: 0; overflow-y: scroll; overflow-x: hidden;
  background: #000000; color: #DAA520;
  font-family: "Times New Roman", serif; font-size: 16px;
  padding: 0 4px;
}
#chat .title { text-align: center; margin: 16px 0; }
#chat a.leftnik { text-decoration: none; }
#chat a.leftnik:hover { text-decoration: none; }
#chat a.ssylka { text-decoration: none; color: #DAA520; }
#chat a.ssylka:hover { text-decoration: underline; color: #DAA520; }
#chat img { vertical-align: middle; border: 0; }

/* Messages addressed to me (a mention or an incoming private) stand out with a
   warm gold highlight. box-decoration-break keeps the tint on every wrapped line. */
.cz-hit {
  background: rgba(255, 200, 60, 0.16);
  box-shadow: -3px 0 0 0 #FFC83C, 3px 0 0 0 rgba(255, 200, 60, 0.16);
  border-radius: 2px;
  padding: 1px 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* reply pointer "» Ник" — a subtle gold jump-link dropped by double-clicking a nick */
.cz-ref { color: #DAA520; text-decoration: none; font-family: Verdana, Arial, sans-serif; font-size: 11px; white-space: nowrap; cursor: pointer; }
.cz-ref:hover { color: #FFD700; text-decoration: underline; }

/* the referenced line flashes warm gold when you jump to it, then fades back */
@keyframes czJump { 0% { background: rgba(255, 200, 60, 0.42); } 100% { background: transparent; } }
.cz-jump { animation: czJump 2.2s ease-out; border-radius: 2px; }

/* month-streak medal (koenig crown) worn before the nick in messages, a week after a full month of daily visits */
.cz-medal { width: 16px; height: 16px; vertical-align: middle; }

/* faction ring on the online-list avatar: a 2px light that sweeps around the icon, coloured per
   faction. Drawn on ::before/::after so the 25×25 icon NEVER changes size (all avatars stay equal). */
@property --czang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cz-av { position: relative; display: inline-block; line-height: 0; vertical-align: middle; }
.cz-av::before { /* steady faint faction ring (also the fallback where @property is unsupported) */
  content: ""; position: absolute; inset: 0; border-radius: 2px; box-sizing: border-box;
  border: 2px solid var(--fac, transparent); opacity: .5; pointer-events: none;
}
.cz-av::after { /* the 2px light sweeping around the perimeter */
  content: ""; position: absolute; inset: 0; border-radius: 2px; padding: 2px;
  background: conic-gradient(from var(--czang), transparent 0 58%, var(--fac) 80%, #fff 88%, var(--fac) 95%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  filter: drop-shadow(0 0 2px var(--fac)); pointer-events: none;
  animation: czSweep 2.6s linear infinite;
}
@keyframes czSweep { to { --czang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .cz-av::after { animation: none; } }
.cz-fac-jedi     { --fac: #3f8cff; } /* lightsaber blue */
.cz-fac-sith     { --fac: #ff2b2b; } /* Sith red */
.cz-fac-mando    { --fac: #8ad8ff; } /* Mandalorian steel-blue */
.cz-fac-hunter   { --fac: #ffcf3a; } /* bounty gold */
.cz-fac-smuggler { --fac: #c07bff; } /* smuggler violet */
.cz-fac-imperial { --fac: #d3dae2; } /* Imperial steel-white */
.cz-fac-rebel    { --fac: #ff8a34; } /* Rebel orange */

/* ---- rightFrame : logo, user list, admin ------------------------------- */
#side {
  width: 230px; flex: 0 0 230px; overflow-y: auto; overflow-x: hidden;
  background: #000000; color: #DAA520; padding: 2px;
  box-sizing: border-box;
}
#side .newsbox { text-align: center; }
#side .newsbox img { display: inline-block; }
#side hr { color: #DAA520; background: #DAA520; height: 1px; border: 0; width: 95%; }
#side .admin { text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #DAA520; }
#side .admin b { font-weight: bold; }

/* the grey-bordered section header bar ("Сейчас в чате N чел:" / "Смайлики") */
.barhead { width: 100%; border-collapse: separate; border-spacing: 1px; background: #808080; }
.barhead td.t { height: 19px; background: #000000; text-align: center; }
.barhead td.t .lbl { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; color: #DEB887; }
.barhead td.x { width: 1%; background: #000000; }
.barhead a.close { color: #DEB887; text-decoration: none; font-weight: bold; padding: 0 3px; }
.barhead a.close:hover { color: #DEB887; text-decoration: none; }

/* user rows — spaced apart vertically like the original sidebar */
.userrow { width: 100%; border-collapse: collapse; margin-bottom: 9px; }
.userrow td { padding: 0; vertical-align: middle; }
.userrow td.av { width: 1%; }
.userrow td.av img { display: block; border: 0; }
/* по умолчанию видна только иконка роли; при наведении иконка меняется на
   аватар прямо на своём месте (тот же размер) — никакого всплытия поверх соседей.
   NB: селекторы с .userrow td.av нужны, чтобы перебить «.userrow td.av img
   { display: block }» выше (иначе превью показывалось бы всегда). */
/* line-height/vertical-align тут обязательны: без них инлайн-блок садится на базовую
   линию и утаскивает под себя ~4px «подстрочья», из-за чего строка без фракционного
   кольца (у .cz-av свои line-height:0 + vertical-align:middle) выше на эти 4px —
   и интервалы между никами в списке выглядят неровными */
.av-hover-wrap { position: relative; display: inline-block; width: 25px; height: 25px; line-height: 0; vertical-align: middle; }
.userrow td.av img.av-hover-preview,
.av-hover-preview {
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 25px; height: 25px;
  object-fit: cover;
  border-radius: 2px;
}
.userrow td.av .av-hover-wrap:hover img.av-role-icon,
.av-hover-wrap:hover .av-role-icon { display: none; }
.userrow td.av .av-hover-wrap:hover img.av-hover-preview,
.av-hover-wrap:hover .av-hover-preview { display: block; }
.userrow td.nk { width: 96%; padding-left: 6px; }
.userrow td.ig { width: 1%; padding-right: 2px; }
a.kontactnik { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; color: #DAA520; }
a.kontactnik:hover { color: #FAFAD2; text-decoration: underline; }
a.gr { color: #FAEBD7; text-decoration: none; font-family: Verdana, sans-serif; font-size: 12px; }
a.gr:hover { color: #FAEBD7; text-decoration: none; }

/* shame stars + mute badge + mod action links */
.userrow .stars { color: #FF8C00; font-size: 11px; letter-spacing: -1px; }
.userrow .muted { color: #888; font-size: 10px; font-family: Verdana, sans-serif; }
.userrow .dr { font-size: 11px; }
.userrow td.modacts { white-space: nowrap; text-align: right; }
.userrow td.modacts a.ma { color: #FFD700; text-decoration: none; font-family: Arial, sans-serif; font-size: 11px; padding: 0 2px; }
.userrow td.modacts a.ma:hover { color: #FAFAD2; text-decoration: underline; }

/* smiley picker grid (injected into the sidebar) */
#smbox { text-align: center; }
#smbox a { cursor: pointer; }
#smbox img { vertical-align: middle; border: 0; margin: 1px; }
#smAll { text-align: center; margin-top: 3px; }
#smAll a { color: #8a7430; font-size: 11px; text-decoration: none; }
#smAll a:hover { color: #DAA520; text-decoration: underline; }
#smAll .sep { color: #4a3f20; font-size: 11px; }
#smAll a.smModeOpt.on { color: #DAA520; text-decoration: underline; cursor: default; }

/* ---- downFrame : input row + toolbar ----------------------------------- */
#bottom {
  flex: 0 0 auto; min-height: 50px; background: #000000; color: #FFD700;
  padding-top: 8px; padding-bottom: 2px;
}
#bottom form { margin: 0; }
.downmenu { font-family: Arial, Helvetica, sans-serif; font-size: 13px; text-decoration: none; color: #FFD700; }
a.downmenu { font-family: Arial, Helvetica, sans-serif; font-size: 13px; text-decoration: none; color: #FFD700; }
a.downmenu:hover { color: #FAFAD2; text-decoration: underline; }
.toolbar { text-align: center; font-family: Arial, sans-serif; font-size: 13px; color: #DAA520; padding-top: 2px; }

select.name, input.name {
  font-family: "MS Sans Serif", Tahoma, Geneva, sans-serif; font-weight: bold; font-size: 12px;
  background: #000000; color: #DEB887;
  border: 1px solid #DAA520;
}
select.name { width: 160px; height: 20px; }
input.name { height: 18px; }
#outxx { width: 500px; } /* desktop conversation input (mobile overrides to fill width) */
select.name:focus, input.name:focus { color: #DEB887; border-color: #FFD700; background: #000000; outline: none; }
input.ok {
  font-family: "MS Sans Serif", Tahoma, Geneva, sans-serif; font-weight: bold; font-size: 12px;
  background: #000000; color: #DEB887; border: 1px solid #DAA520;
  width: 36px; height: 22px; padding: 0; line-height: 22px; text-align: center; cursor: pointer;
}
input.ok:active { color: #515151; border-color: #FFD700; }
div.cl { margin: 0; line-height: inherit; }
a.delx { color: #aa3333; text-decoration: none; font-size: 11px; opacity: 0; transition: opacity .12s; cursor: pointer; }
div.cl:hover a.delx { opacity: .85; }
a.delx:hover { opacity: 1; color: #ff5555; }
.inrow td { vertical-align: middle; }

/* =======================================================================
   MOBILE / PWA — desktop & tablet (>=768px) stay pixel-identical to the
   original; phones (<=767px) and the installed app get an adapted layout.
   Everything below is inert on desktop. */

/* chrome that only exists on the small layout — hidden by default */
#mtop, #sideBackdrop, #modal { display: none; }

/* ---- full-screen modal (replaces window.open popups on mobile/standalone) */
#modal {
  position: fixed; inset: 0; z-index: 1000; flex-direction: column;
  background: #000000;
}
body.modal-open { overflow: hidden; }
body.modal-open #modal { display: flex; }
#modalBar {
  flex: 0 0 auto; height: 46px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; background: #000000; border-bottom: 1px solid #DAA520;
  font-family: Arial, Helvetica, sans-serif;
}
#modalTitle { color: #DEB887; font-weight: bold; font-size: 15px; }
#modalClose {
  background: #000000; color: #FFD700; border: 1px solid #DAA520; border-radius: 4px;
  font-size: 18px; line-height: 1; width: 38px; height: 32px; cursor: pointer;
}
#modalFrame { flex: 1 1 auto; width: 100%; border: 0; background: #000000; }

/* ---- desktop: sabacc docked slide-down panel (replaces the window.open popup) --
   Docked to the top edge, full width; drops down over the conversation but stops
   short of the bottom edge so the input row (and a few lines of chat above it)
   stay visible and usable while a game is open. It slides in/out with a
   game-like transform. Hidden by visibility (delayed on the way out so the
   slide-out is seen) so the off-screen panel never steals clicks. */
#sbcPanel {
  position: fixed; top: 0; left: 0; right: 0; bottom: 180px; z-index: 900;
  display: flex; flex-direction: column;
  background: #000000; border-bottom: 1px solid #DAA520;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .65);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .34s;
}
body.sbc-open #sbcPanel {
  transform: translateY(0);
  visibility: visible;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1), visibility 0s;
}
#sbcBar {
  flex: 0 0 auto; height: 40px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 13px; background: #000000; border-bottom: 1px solid #DAA520;
  font-family: Arial, Helvetica, sans-serif;
}
#sbcTitle { color: #DEB887; font-weight: bold; font-size: 14px; }
.sbcBtns { display: flex; gap: 6px; }
#sbcMin, #sbcClose {
  background: #000000; color: #FFD700; border: 1px solid #DAA520; border-radius: 4px;
  font-size: 16px; line-height: 1; width: 32px; height: 28px; cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
}
#sbcMin:hover, #sbcClose:hover { background: #1a1206; }
#sbcFrame { flex: 1 1 auto; width: 100%; border: 0; background: #000000; }

/* «Своя игра» — тот же докнутый сверху слайд-даун, что и у сабакка выше (та же позиция/
   анимация/отступ снизу), но iframe ведёт на сайтовый /svoya-igra, а не на локальную
   страницу Кантины. */
#svPanel {
  position: fixed; top: 0; left: 0; right: 0; bottom: 180px; z-index: 900;
  display: flex; flex-direction: column;
  background: #000000; border-bottom: 1px solid #DAA520;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .65);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .34s;
}
body.sv-open #svPanel {
  transform: translateY(0);
  visibility: visible;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1), visibility 0s;
}
#svBar {
  flex: 0 0 auto; height: 40px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 13px; background: #000000; border-bottom: 1px solid #DAA520;
  font-family: Arial, Helvetica, sans-serif;
}
#svTitle { color: #DEB887; font-weight: bold; font-size: 14px; }
.svBtns { display: flex; gap: 6px; }
#svMin, #svClose {
  background: #000000; color: #FFD700; border: 1px solid #DAA520; border-radius: 4px;
  font-size: 16px; line-height: 1; width: 32px; height: 28px; cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
}
#svMin:hover, #svClose:hover { background: #1a1206; }
#svFrame { flex: 1 1 auto; width: 100%; border: 0; background: #000000; }

/* generic docked panel — same top-docked slide-down as сабакк/своя игра above, for every
   other popup page (бар/магазин/настройки/sms/админка/визитка/рейтинг/визиты/архив/
   новости/помощь/правила). Just a ✕ — these hold no live state worth minimising. */
#dockPanel {
  position: fixed; top: 0; left: 0; right: 0; bottom: 180px; z-index: 900;
  display: flex; flex-direction: column;
  background: #000000; border-bottom: 1px solid #DAA520;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .65);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .34s;
}
body.dock-open #dockPanel {
  transform: translateY(0);
  visibility: visible;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1), visibility 0s;
}
#dockBar {
  flex: 0 0 auto; height: 40px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 13px; background: #000000; border-bottom: 1px solid #DAA520;
  font-family: Arial, Helvetica, sans-serif;
}
#dockTitle { color: #DEB887; font-weight: bold; font-size: 14px; }
#dockClose {
  background: #000000; color: #FFD700; border: 1px solid #DAA520; border-radius: 4px;
  font-size: 16px; line-height: 1; width: 32px; height: 28px; cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
}
#dockClose:hover { background: #1a1206; }
#dockFrame { flex: 1 1 auto; width: 100%; border: 0; background: #000000; }
@media (prefers-reduced-motion: reduce) { #dockPanel { transition: visibility 0s; } }
@media (max-width: 767px) { #dockPanel { display: none !important; } }

/* «все смайлы» still docks to the right edge and slides in horizontally (narrower,
   and with just a ✕ — no minimise/restore-tab, since the picker holds no live
   state). overflow-x:hidden clips the off-screen panel so it never adds a
   horizontal scrollbar. */
body.chatpage { overflow-x: hidden; }
#asmPanel {
  position: fixed; top: 0; right: 0; z-index: 900;
  height: 100vh; height: 100dvh;
  width: min(620px, calc(100vw - 220px));
  display: flex; flex-direction: column;
  background: #000000; border-left: 1px solid #DAA520;
  box-shadow: -10px 0 34px rgba(0, 0, 0, .65);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .34s;
}
body.asm-open #asmPanel {
  transform: translateX(0);
  visibility: visible;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1), visibility 0s;
}
#asmBar {
  flex: 0 0 auto; height: 40px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 13px; background: #000000; border-bottom: 1px solid #DAA520;
  font-family: Arial, Helvetica, sans-serif;
}
#asmTitle { color: #DEB887; font-weight: bold; font-size: 14px; }
#asmClose {
  background: #000000; color: #FFD700; border: 1px solid #DAA520; border-radius: 4px;
  font-size: 16px; line-height: 1; width: 32px; height: 28px; cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
}
#asmClose:hover { background: #1a1206; }
#asmFrame { flex: 1 1 auto; width: 100%; border: 0; background: #000000; }
@media (prefers-reduced-motion: reduce) { #asmPanel { transition: visibility 0s; } }
/* on mobile/PWA «все смайлы» uses the full-screen #modal, never this desktop panel */
@media (max-width: 767px) { #asmPanel { display: none !important; } }

/* the "идёт сабакк" restore-tab in the online list — shown by chat.js only while a
   game is minimised. Kept to about one user-row tall so it never disturbs the list. */
#sbcTab {
  display: none; align-items: center; gap: 7px;
  margin: 3px 4px 11px; padding: 6px 9px;
  border: 1px solid #DAA520; border-radius: 5px;
  background: linear-gradient(#1c1408, #0d0a04);
  color: #FFD700; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 0 10px rgba(218, 165, 32, .14);
}
#sbcTab:hover { background: linear-gradient(#26190a, #14100a); box-shadow: 0 0 15px rgba(218, 165, 32, .3); }
#sbcTab.on { display: flex; }
/* «эфир» — вариант вкладки для тех, кто не за столом: «прямоэфирная» красная точка + тёплое свечение */
#sbcTab.air { border-color: #d9a441; box-shadow: 0 0 13px rgba(255, 120, 40, .22); }
#sbcTab.air:hover { box-shadow: 0 0 18px rgba(255, 120, 40, .34); }
#sbcTab.air .sbcTab-dot { background: #ff4133; box-shadow: 0 0 7px #ff4133; }
.sbcTab-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #35c93a; box-shadow: 0 0 6px #35c93a;
  animation: sbcPulse 1.4s ease-in-out infinite;
}
@keyframes sbcPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  #sbcPanel { transition: visibility 0s; }
  .sbcTab-dot { animation: none; }
}
/* on mobile/PWA sabacc uses the full-screen #modal, never this desktop panel.
   Скрываем панель и «свою» restore-вкладку (.mine — докнутая панель только на десктопе),
   но «эфир»-вкладку (.air) оставляем — на телефоне она живёт в выдвижном списке юзеров. */
@media (max-width: 767px) { #sbcPanel, #sbcTab.mine { display: none !important; } }

/* та же restore-вкладка, что и у сабакка выше, но для «Своей игры» — только «своя»
   разновидность (никакого «эфира», у встроенной игры нет кросс-стольного вещания). */
#svTab {
  display: none; align-items: center; gap: 7px;
  margin: 3px 4px 11px; padding: 6px 9px;
  border: 1px solid #DAA520; border-radius: 5px;
  background: linear-gradient(#1c1408, #0d0a04);
  color: #FFD700; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 0 10px rgba(218, 165, 32, .14);
}
#svTab:hover { background: linear-gradient(#26190a, #14100a); box-shadow: 0 0 15px rgba(218, 165, 32, .3); }
#svTab.on { display: flex; }
@media (prefers-reduced-motion: reduce) { #svPanel { transition: visibility 0s; } }
@media (max-width: 767px) { #svPanel, #svTab { display: none !important; } }

/* ---- "прямой эфир": small floating window that streams the sabacc announcer -----
   Golden broadcast aesthetic, matched to the in-game commentary track. Fixed
   bottom-right; hidden until opened from the toolbar «эфир». */
#commPanel {
  position: fixed; right: 14px; bottom: 58px; z-index: 850;
  width: 300px; max-width: calc(100vw - 24px); max-height: 320px;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #16110a, #0b0804);
  border: 1px solid #6a5316; border-radius: 9px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6), inset 0 0 22px rgba(218, 165, 32, .05);
  font-family: Arial, Helvetica, sans-serif;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
body.commP-open #commPanel { opacity: 1; transform: none; pointer-events: auto; }
#commPanelBar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 7px 8px 7px 11px; border-bottom: 1px solid #4a3a16;
  background: linear-gradient(180deg, #241905, #150e04); border-radius: 9px 9px 0 0;
}
.commP-badge { display: flex; align-items: center; gap: 7px; color: #FFD700; font-size: 11px; font-weight: bold;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.commP-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4133; box-shadow: 0 0 7px #ff4133;
  animation: commPdot 1.4s ease-in-out infinite; }
@keyframes commPdot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
#commPanelClose {
  background: #000000; color: #FFD700; border: 1px solid #6a5316; border-radius: 4px;
  font-size: 13px; line-height: 1; width: 26px; height: 24px; cursor: pointer; flex: none;
  font-family: Arial, Helvetica, sans-serif;
}
#commPanelClose:hover { background: #1a1206; border-color: #DAA520; }
#commPanelFeed { flex: 1 1 auto; overflow-y: auto; padding: 8px 11px; display: flex; flex-direction: column; gap: 6px; }
.commP-line { font-size: 12px; line-height: 1.4; color: #cdb066; font-style: italic; }
.commP-line:last-child { color: #FFE7A0; font-style: normal; text-shadow: 0 0 8px rgba(255, 215, 0, .2); }
.commP-line.in { animation: commPin .4s ease-out; }
@keyframes commPin { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.commP-empty { font-size: 12px; color: #6a5a28; font-style: italic; text-align: center; padding: 14px 4px; }
#commPanelFoot { flex: 0 0 auto; border-top: 1px solid #2a2410; padding: 5px 11px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
#commPanelFoot:empty { display: none; }
.commP-tbl { font-size: 10px; color: #8a7430; }
@media (prefers-reduced-motion: reduce) { .commP-dot { animation: none; } .commP-line.in { animation: none; } }
@media (max-width: 767px) {
  #commPanel { right: 8px; left: 8px; bottom: 62px; width: auto; max-height: 46vh; }
}

/* the in-drawer action menu + its left drawer (mobile only) — hidden on desktop */
#sideMenu { display: none; }
#sideLeft { display: none; }

/* gold credit coin mark used next to the wallet balance */
.coin { width: 1.05em; height: 1.05em; vertical-align: -0.16em; }

@media (max-width: 767px) {
  html, body { -webkit-text-size-adjust: 100%; overflow-x: hidden; } /* no stray sideways scroll */
  body { -webkit-tap-highlight-color: rgba(218,165,32,.25); }
  #wrap { height: 100vh; height: 100dvh; }

  /* generic helpers so the popup pages reflow inside the modal */
  .cols { flex-direction: column !important; gap: 0 !important; }
  .palette { grid-template-columns: repeat(9, 1fr) !important; }
  .scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ===== CHAT PAGE =================================================== */
  /* fixed top bar with the drawer toggle + online count */
  body.chatpage #mtop {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0; height: 46px; z-index: 40;
    background: #000000; border-bottom: 1px solid #DAA520; padding: 0 8px;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: env(safe-area-inset-top); height: calc(46px + env(safe-area-inset-top));
  }
  #mtop button {
    background: #000000; color: #FFD700; border: 1px solid #DAA520; border-radius: 4px;
    height: 34px; min-width: 44px; font-size: 17px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    font-family: Arial, sans-serif;
  }
  #mtop #mTitle { color: #DAA520; font-weight: bold; font-size: 15px; }
  #mtop #mUsers { font-size: 14px; padding: 0 10px; }

  body.chatpage #top { box-sizing: border-box; padding-top: calc(46px + env(safe-area-inset-top)); }
  body.chatpage #chat { font-size: 16px; }
  body.chatpage #chat .title { margin: 8px 0; }

  /* right sidebar becomes an off-canvas drawer (the burger menu) */
  body.chatpage #side {
    position: fixed; top: 0; right: 0; height: 100%;
    width: min(86vw, 320px); flex: none; overflow-y: auto;
    transform: translateX(100%); transition: transform .25s ease;
    z-index: 60; border-left: 1px solid #DAA520; box-shadow: -6px 0 20px rgba(0,0,0,.7);
    padding: 10px 10px calc(16px + env(safe-area-inset-bottom));
    padding-top: calc(10px + env(safe-area-inset-top));
  }
  body.chatpage.side-open #side { transform: none; }
  body.chatpage #sideBackdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.55); }
  body.chatpage.side-open #sideBackdrop,
  body.chatpage.left-open #sideBackdrop { display: block; }

  /* right drawer holds the logo + user list + smileys — the actions and the
     admin block live in the left drawer / are dropped here on phones. */
  body.chatpage #side > hr,
  body.chatpage #side > br,
  body.chatpage #side #adminBox { display: none; }

  /* left off-canvas drawer: the action menu (бар, магазин, настройки …) */
  body.chatpage #sideLeft {
    display: block;
    position: fixed; top: 0; left: 0; height: 100%;
    width: min(78vw, 290px); overflow-y: auto;
    transform: translateX(-100%); transition: transform .25s ease;
    z-index: 60; border-right: 1px solid #DAA520; box-shadow: 6px 0 20px rgba(0,0,0,.7);
    background: #000000; color: #DAA520;
    padding: 10px 10px calc(16px + env(safe-area-inset-bottom));
    padding-top: calc(46px + env(safe-area-inset-top));
  }
  body.chatpage.left-open #sideLeft { transform: none; }
  body.chatpage #sideLeft #sideMenu { display: block; margin-top: 0; border-top: 0; }

  /* bigger tap targets in the user list / smiley grid */
  a.kontactnik { font-size: 15px; }
  .userrow { margin-bottom: 13px; }
  .userrow td.modacts a.ma { font-size: 15px; padding: 0 6px; }
  #smbox img { transform: scale(1.15); margin: 4px; }

  /* the toolbar moves into the drawer; the bottom keeps only the input row */
  body.chatpage .toolbarrow { display: none !important; } /* beats the id-heavy #bottom #form1 td rule */
  body.chatpage #sideMenu { display: block; }

  /* input row: nick label drops, input fills the width */
  body.chatpage #bottom { padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  #bottom #form1 > table { width: 100%; }
  #bottom #form1 > table > tbody > tr > td { display: block; width: 100%; }
  #inputControls { width: 100%; }
  #inputControls > tbody { display: block; width: 100%; }
  #inputControls > tbody > tr { display: flex; align-items: center; gap: 6px; width: 100%; }
  #inputControls > tbody > tr > td { padding: 0; }
  #myNick { display: none; }
  #tip { flex: 0 0 auto; width: 96px; height: 38px; }
  #outxx {
    flex: 1 1 auto; width: auto !important; min-width: 0; height: 38px;
    font-size: 16px; box-sizing: border-box; /* >=16px keeps iOS from zooming on focus */
  }
  #okCell { flex: 0 0 auto; width: auto !important; }
  #okCell > table { width: auto; }
  #okCell > table > tbody > tr:first-child { display: none; } /* drop the 1px spacer row */
  #okCell .ok { width: 50px; height: 38px; font-size: 14px; }

  /* ===== ENTRANCE (login) =========================================== */
  /* stack the sidebar (logo + news + menu) above the greeting so it's all visible */
  body.entrance #top { flex-direction: column; overflow-y: auto; }
  body.entrance #chat { flex: none; overflow: visible; }
  body.entrance #side { order: -1; width: auto; flex: none; padding: 8px 8px 4px; }
  body.entrance #side .newswin, body.entrance #side .menu,
  body.entrance #side .barhead { max-width: 460px; margin-left: auto; margin-right: auto; }
  body.entrance #login input.name { width: 150px; }
}

/* notifications opt-in pill (shown until permission granted) */
a.notifBtn.downmenu { color: #7CFC00; }
a.notifBtn.downmenu:hover { color: #b6ff8a; }

/* ignored user marker + unread-mail highlight on the «sms» link */
.userrow td.ig a.gr.ign { color: #FF6347; }
a.downmenu.smsnew { color: #7CFC00; font-weight: bold; }

/* language switcher (RU | UK) */
.langsw { font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
.langsw a { color: #DAA520; text-decoration: none; font-weight: bold; padding: 0 4px; cursor: pointer; }
.langsw a.on { color: #FFD700; text-decoration: underline; }
.langsw a:hover { color: #FAFAD2; }
.langsw .sep { color: #5a4a20; }
/* sidebar variant: small, centred, Cantina style.
   On the entrance page the sidebar is a flex column so margin-top:auto
   pushes the switcher down into the empty space below the admin block. */
.langsw.side { font-size: 11px; text-align: center; padding: 12px 0; }
body.entrance #side { display: flex; flex-direction: column; }
body.entrance .langsw.side { margin-top: auto; }

/* in-drawer action menu (mobile burger): a vertical list of the toolbar actions */
#sideMenu { margin-top: 4px; border-top: 1px solid #5a4a20; padding-top: 4px; }
#sideMenu a { display: block; color: #FFD700; text-decoration: none; font-family: Arial, Helvetica, sans-serif;
  font-size: 15px; padding: 10px 6px; border-bottom: 1px solid #161616; }
#sideMenu a:active { color: #FAFAD2; background: #161208; }
#sideMenu a.smsnew { color: #7CFC00; font-weight: bold; }
#sideMenu a.notifBtn { color: #7CFC00; }
#sideMenu a.danger { color: #FF8C00; }

/* ---- shop: faction badge + premium nick effects --------------------------- */
/* the little faction icon shown next to a nick in the list and in messages */
.facic { font-size: 13px; line-height: 1; }
.facic img { vertical-align: middle; border: 0; }

/* purchasable nick effects. The nick text sits in a child <font> with an inline
   colour; text-shadow inherits so glow/neon/frost just work, while the gradient
   effects (rainbow/holo) must force the fill transparent on the <font> too. */
.fx { display: inline-block; }
/* --- glow family (text-shadow; some force a themed colour) --- */
.fx-glow, .fx-glow font { text-shadow: 0 0 5px currentColor, 0 0 9px currentColor; }
.fx-neon, .fx-neon font { text-shadow: 0 0 3px #fff, 0 0 7px currentColor, 0 0 12px currentColor; }
.fx-neon { animation: fx-flicker 2.6s infinite; }
@keyframes fx-flicker { 0%,16%,20%,52%,56%,100% { opacity: 1; } 18%,54% { opacity: .55; } }
.fx-frost, .fx-frost font { color: #bfe6ff !important; text-shadow: 0 0 5px #7fd3ff, 0 0 10px #4aa8e0; }
.fx-toxic, .fx-toxic font { color: #aaff33 !important; text-shadow: 0 0 4px #aaff33, 0 0 9px #5fbf00; }
.fx-toxic { animation: fx-pulse 1.8s ease-in-out infinite; }
.fx-saber, .fx-saber font { color: #d6faff !important; text-shadow: 0 0 3px #fff, 0 0 7px #19d3ff, 0 0 13px #008cff; }
.fx-crimson, .fx-crimson font { color: #ff4d4d !important; text-shadow: 0 0 5px #ff1a1a, 0 0 12px #7a0000; }
.fx-crimson { animation: fx-pulse 2.4s ease-in-out infinite; }
@keyframes fx-pulse { 0%,100% { opacity: 1; } 50% { opacity: .68; } }
/* --- outline + 3D (visible on the black chat bg: light outline / bronze extrusion) --- */
.fx-toon, .fx-toon font { font-weight: bold;
  text-shadow: -1px -1px 0 #fff1c4, 1px -1px 0 #fff1c4, -1px 1px 0 #fff1c4, 1px 1px 0 #fff1c4; }
.fx-pop, .fx-pop font { font-weight: bold;
  text-shadow: 1px 1px 0 #a07d1c, 2px 2px 0 #6f561a, 3px 3px 0 #463713, 3px 4px 4px rgba(0,0,0,.5); }
/* --- gradient-text family (animated colour slide) --- */
.fx-rainbow, .fx-holo, .fx-gold, .fx-fire, .fx-chrome, .fx-cosmic, .fx-aurora {
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; animation: fx-slide 4s linear infinite;
}
.fx-rainbow font, .fx-holo font, .fx-gold font, .fx-fire font, .fx-chrome font, .fx-cosmic font, .fx-aurora font {
  -webkit-text-fill-color: transparent; color: transparent;
}
.fx-rainbow { background-image: linear-gradient(90deg,#ff4d4d,#ffb24d,#ffe14d,#4dff88,#4dd2ff,#b24dff,#ff4d4d); }
.fx-holo { background-image: linear-gradient(90deg,#7fffd4,#88c0ff,#d0a0ff,#7fffd4); animation-duration: 3s; }
.fx-gold { background-image: linear-gradient(90deg,#fff3b0,#ffd700,#a87900,#ffd700,#fff3b0); animation-duration: 3.5s; }
.fx-fire { background-image: linear-gradient(90deg,#ffe066,#ff8c00,#ff2d00,#ff8c00,#ffe066); animation-duration: 2.4s; }
.fx-chrome { background-image: linear-gradient(90deg,#f0f0f0,#9aa0a6,#ffffff,#9aa0a6,#f0f0f0); animation-duration: 3s; }
.fx-cosmic { background-image: linear-gradient(90deg,#7b2ff7,#4a90ff,#f072e0,#7b2ff7); animation-duration: 4.5s; }
.fx-aurora { background-image: linear-gradient(90deg,#5dffb0,#4ad2ff,#b388ff,#5dffb0); animation-duration: 5s; }
@keyframes fx-slide { to { background-position: 200% center; } }

/* ---- links in messages, picture view-link, lightbox, drop overlay ---------- */
/* bare URLs become gold links that open in a new window */
#xmlMessages a[target="_blank"] { color: #FFD700; text-decoration: none; word-break: break-all; }
#xmlMessages a[target="_blank"]:hover { text-decoration: underline; color: #FAFAD2; }
/* "Изображение" — a highlighted tag, never an inline image (keeps the retro look) */
#xmlMessages a.cz-img {
  color: #FFD700; text-decoration: none; white-space: nowrap; font-weight: bold;
  border: 1px solid #5a4a20; background: #1a1408; border-radius: 3px;
  padding: 0 6px; margin: 0 1px;
}
#xmlMessages a.cz-img::before { content: "\25B6"; font-size: .8em; margin-right: 4px; color: #DAA520; }
#xmlMessages a.cz-img:hover { color: #FAFAD2; border-color: #FFD700; background: #2a2010; }

/* temporary full-window viewer for a picture */
#czLightbox {
  position: fixed; inset: 0; z-index: 1000; cursor: zoom-out;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; box-sizing: border-box; background: rgba(0,0,0,.88);
}
#czLightbox .czl-img { max-width: 94vw; max-height: 84vh; border: 1px solid #5a4a20; box-shadow: 0 0 24px rgba(0,0,0,.7); }
#czLightbox .czl-open { color: #FFD700; font-family: Verdana, Arial, sans-serif; font-size: 13px; text-decoration: none; }
#czLightbox .czl-open:hover { text-decoration: underline; color: #FAFAD2; }
#czLightbox .czl-msg { color: #FF6347; font-family: Verdana, Arial, sans-serif; font-size: 14px; }

/* overlay shown while dragging an image file over the page */
#czDrop { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.78);
  align-items: center; justify-content: center; pointer-events: none; }
#czDrop.on { display: flex; }
#czDrop .czDrop-in {
  border: 2px dashed #DAA520; color: #FFD700; background: #0a0a0a;
  font-family: Verdana, Arial, sans-serif; font-size: 18px; font-weight: bold;
  padding: 40px 56px; border-radius: 4px; text-align: center;
}

/* ---- "угостить" — an incoming drink offer with accept / decline buttons ----- */
#xmlMessages .cz-treat {
  border: 1px solid #5a4a20; background: #160f04; border-radius: 4px;
  padding: 5px 9px; margin: 4px 0; color: #FFD700;
  font-family: Verdana, Arial, sans-serif; font-size: 13px;
}
#xmlMessages .cz-treat a { text-decoration: none; font-weight: bold; padding: 1px 8px; margin-left: 6px;
  border: 1px solid #5a4a20; border-radius: 3px; }
#xmlMessages .cz-treat a.cz-yes { color: #7CFC00; }
#xmlMessages .cz-treat a.cz-yes:hover { color: #b6ffb6; border-color: #7CFC00; background: #0e1a06; }
#xmlMessages .cz-treat a.cz-no { color: #FF6347; }
#xmlMessages .cz-treat a.cz-no:hover { color: #ff9b88; border-color: #FF6347; background: #1a0a06; }

/* ---- one-time "fresh news" nudge line (unobtrusive) ------------------------ */
#xmlMessages .cz-news {
  border-left: 2px solid #DAA520; background: #120d03; padding: 4px 10px; margin: 4px 0;
  color: #DEB887; font-family: Verdana, Arial, sans-serif; font-size: 12px;
}
#xmlMessages .cz-news b { color: #DAA520; font-weight: normal; }
#xmlMessages .cz-news a.cz-news-open { color: #FFD700; text-decoration: none; font-weight: bold; margin-left: 6px; white-space: nowrap; }
#xmlMessages .cz-news a.cz-news-open:hover { text-decoration: underline; color: #FAFAD2; }

/* ---- «сожжён» Мандалорцем: лёгкий огонь на сообщениях (15 мин) ------------- */
@keyframes czBurnFlicker {
  0%, 100% { text-shadow: 0 0 3px #ff7a18, 0 -1px 5px #ffae42; }
  45%      { text-shadow: 0 0 5px #ff4500, 0 -2px 8px #ff8c00; }
  70%      { text-shadow: 0 0 4px #ff6a00, 0 -1px 6px #ffb347; }
}
#xmlMessages .cz-burn { text-shadow: 0 0 4px #ff7a18, 0 -1px 6px #ff9b3a; animation: czBurnFlicker 1.1s infinite ease-in-out; }

/* ---- Ситх «разрушил ник»: глитч на нике (20 мин) + «под внушением» Джедая --- */
@keyframes czGlitch {
  0%   { text-shadow: 1px 0 #ff0033, -1px 0 #00e5ff; transform: translateX(0); }
  20%  { text-shadow: -2px 0 #ff0033, 2px 0 #00e5ff; transform: translateX(-0.5px); }
  40%  { text-shadow: 2px 0 #ff0033, -2px 0 #00e5ff; transform: translateX(0.5px); }
  60%  { text-shadow: -1px 0 #ff0033, 1px 0 #00e5ff; transform: skewX(-4deg); }
  80%  { text-shadow: 1px 0 #ff0033, -1px 0 #00e5ff; transform: translateX(0.5px); }
  100% { text-shadow: 1px 0 #ff0033, -1px 0 #00e5ff; transform: translateX(0); }
}
#xmlMessages .cz-corrupt .leftnik { display: inline-block; animation: czGlitch 0.55s infinite steps(2); }
#xmlMessages .cz-forced { color: #6fe36f; font-style: italic; font-size: 11px; opacity: .85; }

/* ---- carbonite freeze: icy message lines + pinned ransom banner ------------- */
#xmlMessages .cz-frozen .leftnik font { color: #cfeaff !important; text-shadow: 0 0 5px #7fd3ff, 0 0 9px #4aa8e0; }
#xmlMessages .cz-frozen::before { content: "❄ "; color: #9fd8ff; }
#xmlMessages .cz-frozen-bar { border: 1px solid #4aa8e0; background: #08151d; color: #bfe6ff; border-radius: 4px;
  padding: 4px 10px; margin: 4px 0; font-family: Verdana, Arial, sans-serif; font-size: 12px; }
#xmlMessages .cz-frozen-bar .cz-ransom { color: #FFD700; font-weight: bold; text-decoration: none; margin-left: 6px; white-space: nowrap; }
#xmlMessages .cz-frozen-bar .cz-ransom:hover { text-decoration: underline; color: #FAFAD2; }

/* ---- rally cries: a ~4s nick effect for EVERYONE (bg + input untouched) ----- */
@keyframes cryShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-1px)} 75%{transform:translateX(1px)} }
@keyframes crySpark { 0%,100%{text-shadow:0 0 4px #ff9d3a,0 0 9px #ff5500} 50%{text-shadow:0 -1px 5px #ffd060,1px 0 8px #ff3000} }
/* A rally cry styles EVERY nick — except the caster's own (.cz-cs), who isn't
   affected by their own cry. The .cz-cs marker is toggled on the caster's nick
   elements client-side (chat.js markCrySelf), so :not(.cz-cs) skips them. */
/* Jedi — Волна Силы: calm blue glow */
body.cry-jedi #xmlMessages .leftnik:not(.cz-cs), body.cry-jedi #xmlMessages .leftnik:not(.cz-cs) font, body.cry-jedi #xmlKontakt .kontactnik:not(.cz-cs) { text-shadow: 0 0 6px #6cc0ff, 0 0 12px #2d7fff; }
/* Sith — Гнев: crimson + tremble */
body.cry-force #xmlMessages .leftnik:not(.cz-cs) font, body.cry-force #xmlKontakt .kontactnik:not(.cz-cs) { color: #ff4242 !important; text-shadow: 0 0 7px #b30000; }
body.cry-force #xmlMessages .leftnik:not(.cz-cs), body.cry-force #xmlKontakt .kontactnik:not(.cz-cs) { display: inline-block; animation: cryShake .18s infinite; }
/* Mando — Залп из вамбрейсов: sparks/flame outline */
body.cry-mando #xmlMessages .leftnik:not(.cz-cs), body.cry-mando #xmlMessages .leftnik:not(.cz-cs) font, body.cry-mando #xmlKontakt .kontactnik:not(.cz-cs) { animation: crySpark .5s infinite; }
/* Hunter — Метка добычи: crosshair next to each nick */
body.cry-hunt #xmlMessages .leftnik:not(.cz-cs)::after, body.cry-hunt #xmlKontakt .kontactnik:not(.cz-cs)::after { content: " \2295"; color: #ff5555; font-weight: bold; }
/* Smuggler — Угощаю!: gold */
body.cry-deal #xmlMessages .leftnik:not(.cz-cs) font, body.cry-deal #xmlKontakt .kontactnik:not(.cz-cs) { color: #FFD700 !important; text-shadow: 0 0 7px #DAA520; }
/* Imperial — Имперский марш: steel-grey unify + suppress other effects */
body.cry-order #xmlMessages .leftnik:not(.cz-cs) font, body.cry-order #xmlKontakt .kontactnik:not(.cz-cs) { color: #b8bcc2 !important; text-shadow: none !important; }
body.cry-order #xmlMessages .leftnik:not(.cz-cs) .fx, body.cry-order #xmlMessages .leftnik:not(.cz-cs) .fx font { animation: none !important; background: none !important; -webkit-text-fill-color: #b8bcc2 !important; color: #b8bcc2 !important; text-shadow: none !important; }
/* Rebel — Сбор!: orange flash */
body.cry-rally #xmlMessages .leftnik:not(.cz-cs) font, body.cry-rally #xmlKontakt .kontactnik:not(.cz-cs) { color: #ff9d3a !important; text-shadow: 0 0 7px #ff7a00; }

/* ---- /fmw /fmm /fmy — Last.fm top-10 artists block (chat + archive) -------- */
.fm-top { display: inline-block; border: 1px solid #5a4a20; border-left: 3px solid #DAA520;
  background: #0d0a03; border-radius: 4px; padding: 5px 12px 7px; margin: 3px 0; max-width: 460px; }
.fm-top .fm-list { margin-top: 4px; }
.fm-top .fm-row { font-family: Verdana, Arial, sans-serif; font-size: 13px; color: #DEB887; line-height: 1.7; white-space: nowrap; }
.fm-top .fm-rank { color: #DAA520; font-weight: bold; display: inline-block; min-width: 20px; text-align: right; }
.fm-top .fm-row a.trk { color: #FFD700; text-decoration: none; }
.fm-top .fm-row a.trk:hover { text-decoration: underline; color: #FAFAD2; }
.fm-top .fm-pc { color: #8a7430; }

/* ---- BG3-style faction attacks: d20 skill checks --------------------------- */
/* Inline chat line */
.cz-atk { font-family: Verdana, Arial, sans-serif; font-size: 13px; color: #DEB887; }
.cz-atk .cz-atk-math { color: #c8b48a; }
.cz-atk .cz-dc { color: #b8bcc2; }
.cz-atk .cz-vet { color: #FFD700; font-size: 11px; font-weight: bold; }
.cz-atk-hit { color: #9ACD32; font-weight: bold; }
.cz-atk-miss { color: #c77; font-weight: bold; }
.cz-atk-crit { color: #FFD700; font-weight: bold; text-shadow: 0 0 6px #DAA520; }
.cz-atk-fumble { color: #ff4242; font-weight: bold; text-shadow: 0 0 6px #b30000; }
/* the little d20 in the line spins once, then settles */
.cz-die { display: inline-block; min-width: 20px; padding: 0 4px; border: 1px solid #5a4a20; border-radius: 3px;
  background: #0d0a03; color: #FFD700; font-weight: bold; text-align: center;
  animation: czDieRoll .7s cubic-bezier(.2,.9,.2,1) 1; }
.cz-die-ok { border-color: #5d7a25; }
.cz-die-fail { border-color: #6a3030; color: #e0a0a0; }
.cz-die-crit { border-color: #DAA520; box-shadow: 0 0 7px #DAA520; }
.cz-die-fumble { border-color: #b30000; color: #ff7a7a; box-shadow: 0 0 7px #6a0000; }
@keyframes czDieRoll {
  0%   { transform: rotate(0deg)   scale(.6); opacity: .2; }
  60%  { transform: rotate(380deg) scale(1.25); opacity: 1; }
  80%  { transform: rotate(350deg) scale(.92); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Caster-only cinematic overlay */
.cz-check { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,.82)); cursor: pointer;
  animation: czCheckIn .18s ease-out 1; }
@keyframes czCheckIn { from { opacity: 0; } to { opacity: 1; } }
.cz-check-box { text-align: center; font-family: Verdana, Arial, sans-serif; user-select: none; padding: 0 16px; }
.cz-check-act { color: #DEB887; font-size: 15px; margin-bottom: 14px; letter-spacing: .3px; }
.cz-check-act .cz-vet { color: #FFD700; font-weight: bold; }
/* the big d20 — a rotated rounded square reading like a die face */
.cz-d20 { width: 104px; height: 104px; margin: 0 auto; border: 3px solid #DAA520; border-radius: 14px;
  background: linear-gradient(145deg, #1a1305, #0a0702); box-shadow: 0 0 22px rgba(218,165,32,.45), inset 0 0 14px rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  transform: rotate(45deg); animation: czD20Spin .82s linear infinite; }
.cz-d20-n { display: block; transform: rotate(-45deg); color: #FFD700; font-size: 44px; font-weight: bold; text-shadow: 0 0 10px #DAA520; }
@keyframes czD20Spin { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }
/* once it lands, stop spinning and snap upright with a flavour pop */
.cz-d20.cz-d20-land { animation: czD20Land .4s cubic-bezier(.2,1.4,.3,1) forwards; }
@keyframes czD20Land { 0% { transform: rotate(45deg) scale(1.15); } 100% { transform: rotate(0deg) scale(1); } }
.cz-d20.cz-d20-land .cz-d20-n { transform: rotate(0deg); }
.cz-d20-crit  { border-color: #FFD700; box-shadow: 0 0 32px rgba(255,215,0,.7), inset 0 0 14px rgba(0,0,0,.7); }
.cz-d20-fumble{ border-color: #ff4242; box-shadow: 0 0 30px rgba(179,0,0,.7), inset 0 0 14px rgba(0,0,0,.7); }
.cz-d20-fumble .cz-d20-n { color: #ff7a7a; text-shadow: 0 0 10px #b30000; }
.cz-check-dc { color: #b8bcc2; font-size: 13px; margin-top: 14px; }
.cz-check-dc b { color: #FAFAD2; }
.cz-check-result { font-size: 28px; font-weight: bold; margin-top: 12px; min-height: 34px; opacity: 0; transform: translateY(10px); }
.cz-check-result.cz-show { animation: czResultIn .35s ease-out forwards; }
@keyframes czResultIn { to { opacity: 1; transform: translateY(0); } }
.cz-check-ok     { color: #9ACD32; text-shadow: 0 0 12px #4d6a10; }
.cz-check-fail   { color: #ff6b6b; text-shadow: 0 0 12px #6a0000; }
.cz-check-crit   { color: #FFD700; text-shadow: 0 0 16px #DAA520; }
.cz-check-fumble { color: #ff4242; text-shadow: 0 0 16px #b30000; }

/* ---- first-visit onboarding overlay ---------------------------------------- */
.cz-onb { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.82); padding: 16px; box-sizing: border-box; }
.cz-onb.spot { background: transparent; } /* the spotlight ring provides the dim instead */
/* the glowing cut-out around the real control being pointed at (its huge spread
   box-shadow dims the whole screen except the hole) */
.cz-onb-spot { position: fixed; display: none; border: 2px solid #FFD700; border-radius: 6px; pointer-events: none; z-index: 0;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.82), 0 0 16px rgba(255,215,0,.7); animation: czSpot 1.8s ease-in-out infinite; }
@keyframes czSpot {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(0,0,0,.82), 0 0 10px rgba(255,215,0,.45); }
  50%      { box-shadow: 0 0 0 9999px rgba(0,0,0,.82), 0 0 22px rgba(255,215,0,.9); }
}
.cz-onb-card { position: relative; z-index: 1; width: 100%; max-width: 460px; box-sizing: border-box; text-align: center;
  background: #0b0b0b; border: 1px solid #b8860b; border-radius: 8px; padding: 28px 26px 18px;
  color: #DAA520; font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 0 0 1px #3a2e10, 0 16px 55px rgba(0,0,0,.7);
  background-image: radial-gradient(120% 90% at 50% -10%, rgba(218,165,32,.10), transparent 60%);
  animation: czOnbIn .28s ease; }
@keyframes czOnbIn { from { opacity: 0; transform: translateY(14px); } }
.cz-onb-brand { position: absolute; top: 12px; left: 16px; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #8a7a4a; }
.cz-onb-x { position: absolute; top: 7px; right: 10px; background: none; border: 0; color: #8a7a4a; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px; }
.cz-onb-x:hover { color: #FFD700; }
.cz-onb-ico { width: 54px; height: 54px; margin: 14px auto 12px; color: #FFD700; }
.cz-onb-ico svg { width: 100%; height: 100%; filter: drop-shadow(0 0 8px rgba(255,215,0,.35)); }
.cz-onb-title { font-size: 19px; color: #FFD700; margin: 0 0 10px; font-weight: bold; }
.cz-onb-body { font-size: 14px; line-height: 1.6; color: #DEB887; min-height: 100px; }
.cz-onb-dots { display: flex; justify-content: center; gap: 7px; margin: 16px 0 14px; }
.cz-onb-dots i { width: 8px; height: 8px; border-radius: 50%; background: #4a3e1a; cursor: pointer; display: inline-block; }
.cz-onb-dots i.on { background: #FFD700; box-shadow: 0 0 6px #FFD700; }
.cz-onb-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cz-onb-skip { color: #8a7a4a; font-size: 13px; cursor: pointer; text-decoration: none; }
.cz-onb-skip:hover { color: #DAA520; text-decoration: underline; }
.cz-onb-btns { display: flex; gap: 8px; }
.cz-onb-nav button { font-family: inherit; font-size: 13px; font-weight: bold; cursor: pointer; border-radius: 4px; padding: 7px 16px; }
.cz-onb-back { background: transparent; color: #DAA520; border: 1px solid #5a4a20; }
.cz-onb-back:hover { border-color: #DAA520; }
.cz-onb-next, .cz-onb-set { color: #3a2600; border: 1px solid #b8860b;
  background: linear-gradient(100deg,#ffe9a8,#ffd24d,#c8912a,#ffd24d,#ffe9a8); background-size: 200% 100%; transition: background-position .3s; }
.cz-onb-next:hover, .cz-onb-set:hover { background-position: 100% 0; }
.cz-onb-set { background: transparent; color: #DAA520; border-color: #b8860b; }
.cz-onb-set:hover { background: rgba(218,165,32,.12); }
@media (max-width: 500px) { .cz-onb-card { padding: 24px 18px 16px; } .cz-onb-body { min-height: 124px; } .cz-onb-nav button { padding: 7px 12px; } }
@media (prefers-reduced-motion: reduce) { .cz-onb-card, .cz-onb-spot { animation: none; } }