/* Eternal Online — UI theme: black & gold — deep black panels, gilded rims with leaves, warm gold accents */
:root {
  --bg: #07060a;
  /* panels are slightly see-through (with a blur behind them, see .frame / .leafy / .win) */
  --panel: radial-gradient(ellipse at 50% 0%, rgba(42,33,18,.66) 0%, transparent 60%), linear-gradient(180deg, rgba(23,19,13,.6) 0%, rgba(16,13,9,.62) 60%, rgba(11,9,7,.66) 100%);
  --panel-flat: rgba(18,15,10,.66);
  --well: linear-gradient(180deg, rgba(29,24,16,.6), rgba(21,17,11,.6));
  --well-2: rgba(34,27,16,.75);
  --rim: #c9a24a; --rim-2: #a8822e; --rim-dark: #6a4c14;
  --line: #4a3a1c;
  --gold: #f2c64a; --gold-2: #d9a52c; --gold-3: #a8781c;
  --text: #f1e2b8; --muted: #a8966c; --accent: #f0b43a;
  --ink: #000; /* outline colour for light text over the game world */
  --hp: #4fd64a; --sp: #8fa4ff; --good: #5cc456; --bad: #e0505a;
  /* gilded frame on black: dark outline, bright gold rim, black gap, fine inner gold line, warm glow */
  --frame: 0 0 0 1.5px #000, 0 0 0 3.5px #c9a24a, 0 0 0 5px #5a4214, inset 0 0 0 1.5px #000, inset 0 0 0 2.5px #8a6a26, inset 0 0 22px #f2c64a14, 0 10px 26px #000c;
  --cell: linear-gradient(180deg, rgba(34,28,18,.72), rgba(21,17,11,.72));
  --cell-rim: inset 0 0 0 1.5px #8a6a26, inset 0 0 0 3px #0c0a07, inset 0 0 0 4px #3e3016;
  --leaf: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><defs><linearGradient id='a' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fffdf0'/><stop offset='.5' stop-color='%23f6dc8e'/><stop offset='1' stop-color='%23c9962e'/></linearGradient><linearGradient id='b' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fff6d0'/><stop offset='1' stop-color='%23d9a73c'/></linearGradient></defs><path d='M8 46C6 26 20 10 42 6c-2 22-14 38-34 40z' fill='url(%23a)' stroke='%239a6e1c' stroke-width='2'/><path d='M10 44L38 10' stroke='%23c49030' stroke-width='1.4' fill='none'/><path d='M12 52c10-10 28-12 44-4-12 12-30 12-44 4z' fill='url(%23b)' stroke='%239a6e1c' stroke-width='2'/><path d='M14 51c12-3 26-4 38-3' stroke='%23c49030' stroke-width='1.3' fill='none'/><path d='M4 32C1 20 6 10 16 5c1 12-4 21-12 27z' fill='url(%23b)' stroke='%239a6e1c' stroke-width='1.8'/><path d='M50 4l2.2 6.3L58 12l-5.8 1.9L50 20l-2.2-6.1L42 12l5.8-1.7z' fill='%23fffbe0' stroke='%23d4a940' stroke-width='1'/></svg>");
  --diamond: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1l3 9-3 9-3-9z' fill='%23f0cf6a' stroke='%23a87a22' stroke-width='1'/><path d='M1 10l9-2.4 9 2.4-9 2.4z' fill='%23f7e2a0' stroke='%23a87a22' stroke-width='.8'/></svg>");
  font-family: "Sarabun", "Noto Sans Thai", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; font-size: 14px; }
button { font: inherit; color: inherit; cursor: var(--cur-hover); }
input { font: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.screen { position: fixed; inset: 0; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #f3d67c, #c99422); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
/* light text drawn over the game world gets a dark-gold outline */
.outline {
  text-shadow: -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 1px 1px 0 var(--ink), 0 2px 3px #0008;
}
/* gilded headings (window titles, names) */
.win-head span, .logo, .gold-title {
  background: linear-gradient(180deg, #fff6c8 0%, #f5cf55 45%, #b8820f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #6b4a08) drop-shadow(0 0 1px #6b4a08);
}

/* ---------- shared gilded frame */
.frame, .leafy, .win, .login-box, .death-box, .invite-pop {
  position: relative; background: var(--panel); border-radius: 16px; box-shadow: var(--frame); color: var(--text);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
/* golden leaf clusters on two corners (top-left, bottom-right mirrored) */
.leafy::before, .leafy::after, .win::before, .win::after, .login-box::before, .login-box::after {
  content: ""; position: absolute; width: 48px; height: 48px; background: var(--leaf) no-repeat center / contain; pointer-events: none; z-index: 2;
  filter: drop-shadow(0 2px 2px #6b4a0877);
}
.leafy::before, .win::before, .login-box::before { left: -17px; top: -17px; transform: rotate(-12deg); }
.leafy::after, .win::after, .login-box::after { right: -17px; bottom: -17px; transform: rotate(168deg); }

/* ---------- buttons: gold (primary / default) and ivory (secondary) */
.btn { background: linear-gradient(180deg, #fff1b0 0%, #f7cf55 50%, #e2a92a 100%); border: 0; border-radius: 10px; padding: 6px 14px; color: #4a2e00; font-weight: 800;
  box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 2px 0 #fffbe6, inset 0 -3px 0 #c98a12, 0 3px 0 #7a5514, 0 4px 8px #0003; text-shadow: 0 1px 0 #fff7; transition: filter .1s, transform .05s; }
.btn:hover:not(:disabled) { filter: brightness(1.07) saturate(1.1); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 2px 0 #574d19, inset 0 -1px 0 #c98a12, 0 1px 0 #7a5514; }
.btn.primary { background: linear-gradient(180deg, #fff6c8 0%, #ffd84a 45%, #f0a91f 100%); }
.btn.small { padding: 3px 10px; font-size: 12px; border-radius: 8px; }
.btn.good { background: linear-gradient(180deg, #1b180a, #282215); color: #f1d8af; box-shadow: 0 0 0 1.5px #b98a2a, inset 0 0 0 2px #544018, inset 0 0 0 3px #ecd08a, 0 3px 0 #9a7a3a55; }
.btn.bad { background: linear-gradient(180deg, #24100e, #402320); color: #eeaca7; box-shadow: 0 0 0 1.5px #a0443a, inset 0 2px 0 #33333366, inset 0 -3px 0 #c8665c, 0 3px 0 #6a2a24; text-shadow: none; }
.btn.link { background: none; box-shadow: none; color: var(--muted); text-decoration: underline; font-weight: 600; }
.btn:disabled { opacity: .5; cursor: var(--cur); filter: grayscale(.6); }
.wide { width: 100%; padding: 10px; }
.hint { color: var(--muted); font-size: 12px; }
.error { color: var(--bad); min-height: 1em; font-weight: 700; }

/* ---------- login / character creation: a game title screen over the key art (see titleScene in main.js) */
/* the key art (688x384 pixel art) covers the screen; held upright the castle (--ts-fx) stays in the middle */
.login-bg { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #2db9fb, #86f2ff 45%, #507d03 46%, #153304);
  --tsw: max(100vw, 179.17vh); --tsh: calc(var(--tsw) * .5581); }
.title-screen { --ts-fx: .5; }
@media (orientation: portrait) { .title-screen { --ts-fx: .27; } }
.ts-art { position: absolute; width: var(--tsw); height: var(--tsh); transform-origin: 30% 40%;
  left: clamp(calc(100vw - var(--tsw)), calc(50vw - var(--tsw) * var(--ts-fx)), 0px); top: clamp(calc(100vh - var(--tsh)), calc(50vh - var(--tsh) * .45), 0px);
  background: url(../assets/art/title_bg.png) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; animation: tsPan 48s ease-in-out infinite alternate; will-change: transform; }
@keyframes tsPan { from { transform: scale(1.07) translate(-1.6%, .6%); } to { transform: scale(1.07) translate(1.6%, -.6%); } }
/* pixel clouds (the art's own sky colours) sail from behind the castle to the right edge */
.ts-cloud { position: absolute; left: 0; background: 0 0 / 100% 100% no-repeat; image-rendering: pixelated; opacity: 0; animation: tsCloud 120s linear infinite; will-change: translate, opacity; }
.ts-cloud-a { width: 13.95%; aspect-ratio: 96 / 30; background-image: url(../assets/art/title_cloud_a.png); }
.ts-cloud-b { width: 9.3%; aspect-ratio: 64 / 22; background-image: url(../assets/art/title_cloud_b.png); }
.ts-cloud-c { width: 19.19%; aspect-ratio: 132 / 36; background-image: url(../assets/art/title_cloud_c.png); }
@keyframes tsCloud { 0% { translate: calc(var(--tsw) * .42) 0; opacity: 0; } 7%, 90% { opacity: 1; } 100% { translate: calc(var(--tsw) * 1.01) 0; opacity: 0; } }
/* glints on the castle's spires */
.ts-glint { position: absolute; width: 1.7%; aspect-ratio: 1; margin: -.85% 0 0 -.85%; opacity: 0; animation: tsGlint 4.6s ease-in-out infinite;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 0l1.6 8.4L20 10l-8.4 1.6L10 20l-1.6-8.4L0 10l8.4-1.6z' fill='%23fffbe8'/></svg>") center / contain no-repeat;
  filter: drop-shadow(0 0 3px #fff6c8); }
@keyframes tsGlint { 0%, 72%, 100% { opacity: 0; scale: .2; rotate: 0deg; } 82% { opacity: 1; scale: 1; rotate: 45deg; } 92% { opacity: .3; scale: .5; rotate: 90deg; } }
/* petals falling over the whole screen (pink, a few cream ones) */
.ts-petal { position: absolute; top: 0; width: 8px; height: 5px; border-radius: 1px 5px 1px 5px; background: #fc82d1; box-shadow: inset -1px -1px 0 #b43366;
  animation: tsFall 14s linear infinite, tsFlutter 3.5s ease-in-out infinite alternate; will-change: translate, rotate; }
.ts-petal.alt { background: #fef3cc; box-shadow: inset -1px -1px 0 #e2bf88; width: 6px; height: 4px; }
@keyframes tsFall { from { translate: 0 -4vh; } to { translate: var(--sway, 10vw) 104vh; } }
@keyframes tsFlutter { from { rotate: -35deg; scale: 1 1; } to { rotate: 210deg; scale: .45 1; } }
/* soft vignette + a darker foot so the panel and the footer read over the bright art */
.login-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 85% 75% at 42% 42%, transparent 55%, rgba(18,10,2,.42) 100%), linear-gradient(180deg, transparent 72%, rgba(14,8,2,.5)); }
#create .login-bg::after { background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(18,10,2,.2) 30%, rgba(18,10,2,.6) 100%); }
@media (prefers-reduced-motion: reduce) {
  .ts-art { animation: none; transform: none; }
  .ts-cloud, .ts-glint, .ts-petal { display: none; }
  .ts-go::before, .rs-card::before, .cm.active .cm-stage::before { animation: none !important; }
}

/* layout: top bar (language), the stage (logo + panel; zoomed by fitScreen), footer (version / online) */
.login-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.ts-top { display: flex; justify-content: flex-end; flex: none; }
.ts-stage { flex: 1 0 auto; display: grid; align-content: center; justify-content: center; justify-items: center; gap: 16px; padding: 8px 0 14px; zoom: var(--login-zoom, 1); }
.ts-foot { display: flex; align-items: flex-end; flex: none; min-height: 24px; }
/* wide screens: logo + panel on the right, the castle stays in view on the left */
@media (min-width: 1020px) and (min-height: 601px) { #login .ts-stage { justify-content: end; padding-right: 6vw; } }
/* short landscape screens (phones): logo beside the panel, language + version in the free corners on the logo's side */
@media (orientation: landscape) and (max-height: 600px) {
  #login .ts-stage { grid-auto-flow: column; align-items: center; gap: 30px; padding: 0; }
  #login .ts-top { position: absolute; left: max(12px, env(safe-area-inset-left)); top: 10px; z-index: 1; }
  #login .ts-foot { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); }
}

/* logo: gilded ETERNAL on a red ribbon ONLINE */
.logo { margin: 0; font-family: "Cinzel", serif; font-size: 42px; letter-spacing: 6px; font-weight: 800; }
.logo span { display: block; font-size: 15px; letter-spacing: 12px; }
.ts-brand { position: relative; isolation: isolate; text-align: center; }
/* a soft dark glow behind the logo keeps it readable over clouds / the castle */
.ts-brand::before { content: ""; position: absolute; inset: -16% 0; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(20,11,2,.4), transparent); }
.title-screen .logo { font-size: min(64px, 14vw); letter-spacing: 5px; line-height: 1; padding: 0 6px;
  filter: drop-shadow(0 2px 0 #3d2604) drop-shadow(0 -1px 0 #3d2604) drop-shadow(2px 0 0 #3d2604) drop-shadow(-2px 0 0 #3d2604) drop-shadow(0 8px 12px rgba(20,10,0,.5)); }
.title-screen .logo span { width: max-content; margin: 8px auto 0; padding: 5px 30px 6px 41px; font-size: 17px; letter-spacing: 11px; color: #ffeeb8; -webkit-background-clip: border-box; background-clip: border-box;
  background: linear-gradient(#f2c64a, #f2c64a) 0 2px / 100% 1.5px no-repeat, linear-gradient(#f2c64a, #f2c64a) 0 calc(100% - 2px) / 100% 1.5px no-repeat, linear-gradient(180deg, #d0613f, #8d322b 62%, #6a2420);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%); text-shadow: 0 1px 0 #4a1408; }
.tagline { color: var(--muted); margin: 8px 0 16px; font-weight: 600; }
.title-screen .ts-brand .tagline { margin: 12px 0 0; color: #fff8e6; font-weight: 700; font-size: 15px; text-shadow: 0 1px 0 #2a1a04, 0 0 2px #2a1a04, 0 0 3px #2a1a04, 0 2px 10px rgba(0,0,0,.6); }

/* panel: the black & gold frame of the in-game windows, a little more solid over the bright art */
/* (48px: the gold leaves on two corners stick out ~22px) */
.login-box { width: min(390px, calc(100vw - 48px)); padding: 22px 24px 16px; text-align: center; }
/* (no backdrop blur here: the art behind it moves every frame, the blur would be redone every frame for little) */
.title-screen .login-box { background: radial-gradient(ellipse at 50% 0%, rgba(58,44,20,.7), transparent 62%), linear-gradient(180deg, rgba(26,20,12,.86), rgba(12,10,7,.9));
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.lang-switch { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
/* tabs: ivory pills, the active one gilded */
.lang-switch button, .tabs .tab { background: linear-gradient(180deg, #1a160a, #282215); border: 0; border-radius: 999px; padding: 5px 16px; color: #e3caa0; font-weight: 800;
  box-shadow: 0 0 0 1.5px #c99a34, inset 0 0 0 2px #544018; }
.lang-switch button.active, .tabs .tab.active { background: linear-gradient(180deg, #fff1b0, #f7cf55 55%, #e2a92a); color: #4a2e00; box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 2px 0 #fffbe6, 0 2px 0 #7a5514; }
.tabs { display: flex; gap: 6px; justify-content: center; margin: 14px 0 10px; }
/* the title screen's switches sit in a dark gilded track */
.title-screen .lang-switch, .title-screen .tabs { gap: 3px; padding: 3px; border-radius: 999px; background: rgba(8,6,3,.62); box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #a8822e, inset 0 2px 4px #000a; }
.title-screen .lang-switch { margin: 0; align-items: center; box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #c9a24a, 0 4px 10px rgba(0,0,0,.45); }
.title-screen .lang-switch::before { content: ""; width: 20px; height: 20px; margin: 0 2px 0 6px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2c64a' stroke-width='1.8'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3c2.6 2.6 3.8 5.6 3.8 9s-1.2 6.4-3.8 9c-2.6-2.6-3.8-5.6-3.8-9S9.4 5.6 12 3z'/></svg>") center / contain no-repeat; }
.title-screen .lang-switch button, .title-screen .tabs .tab { background: none; box-shadow: none; padding: 5px 14px; color: #d8c391; transition: color .12s, background-color .12s; }
.title-screen .tabs { margin: 0 0 14px; }
.title-screen .tabs .tab { flex: 1; padding: 8px 10px; font-size: 15px; }
.title-screen .lang-switch button:hover:not(.active), .title-screen .tabs .tab:hover:not(.active) { color: #fff1c4; background: rgba(242,198,74,.12); }
.title-screen .lang-switch button.active, .title-screen .tabs .tab.active { background: linear-gradient(180deg, #fff1b0, #f7cf55 55%, #e2a92a); color: #4a2e00; box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 2px 0 #fffbe6; }
.title-screen button:focus-visible { outline: 2px solid #fff3c0; outline-offset: 2px; }
.tabpane, #form-create { display: flex; flex-direction: column; gap: 8px; }
.title-screen .tabpane, .title-screen #form-create { gap: 10px; }
.login-box input, #chat-input, .win input { background: #19150a; border: 0; border-radius: 12px; padding: 10px 14px; color: var(--text); outline: none;
  box-shadow: inset 0 2px 3px #b98a2a33, 0 0 0 1.5px #c99a34, 0 0 0 3.5px #6e5b20; }
.login-box input::placeholder, #chat-input::placeholder, .win input::placeholder { color: #b89c6a; }
.login-box input:focus, #chat-input:focus, .win input:focus { box-shadow: inset 0 2px 3px #b98a2a33, 0 0 0 1.5px #9a6e1c, 0 0 0 3.5px var(--gold), 0 0 10px #ffd84a88; }
/* fields: an icon inside the left edge */
.ts-field { position: relative; display: block; }
.ts-field .fi { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background-position: center; background-size: contain; background-repeat: no-repeat;
  pointer-events: none; opacity: .8; transition: opacity .12s; }
.ts-field:focus-within .fi { opacity: 1; }
.login-box .ts-field input { display: block; width: 100%; padding: 12px 14px 12px 40px; font-size: 15px; background: rgba(10,8,4,.82); }
.fi-user { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='8' r='4.2' fill='%23d9b25a'/><path d='M3.5 21c.8-4.6 4.2-7 8.5-7s7.7 2.4 8.5 7z' fill='%23d9b25a'/></svg>"); }
.fi-lock { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7.5 10V7.5a4.5 4.5 0 0 1 9 0V10' fill='none' stroke='%23d9b25a' stroke-width='2.4'/><rect x='4.5' y='10' width='15' height='11' rx='2.5' fill='%23d9b25a'/><circle cx='12' cy='15.5' r='1.8' fill='%2319150a'/></svg>"); }
.fi-quill { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.5 3.5C13 4 7.5 9 6 17l1.6.4C9 15 11 13.5 13.5 13c-1-.6-2-.7-3-.6 2.6-1.4 4.6-1.9 6.4-2.4-.7-.4-1.6-.6-2.5-.6 2.4-1.6 4.6-3.3 6.1-5.9z' fill='%23d9b25a'/><path d='M3.5 21.5L7 16' stroke='%23d9b25a' stroke-width='2' stroke-linecap='round'/></svg>"); }
/* the big gold game button: a shine sweeps across it; busy = a spinner while the server answers */
.ts-go { position: relative; overflow: hidden; margin-top: 4px; padding: 12px 10px; font-size: 16px; letter-spacing: .3px; border-radius: 12px; }
.ts-go::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; pointer-events: none; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); translate: -150% 0; animation: tsShine 5s ease-in-out infinite; }
@keyframes tsShine { 0%, 68% { translate: -150% 0; } 100% { translate: 420% 0; } }
.ts-go.busy, .ts-go.busy:disabled { color: transparent; text-shadow: none; opacity: 1; filter: none; }
.ts-go.busy::after, .rs-card.busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  border: 3px solid rgba(74,46,0,.25); border-top-color: #4a2e00; animation: orbSpin .7s linear infinite; }
.title-screen .hint { margin: 12px 0 0; font-size: 11.5px; line-height: 1.45; text-wrap: pretty; }
/* errors: a red plate that shakes in once (showErr in main.js) */
.title-screen .error { margin: 10px 0 0; min-height: 0; font-size: 13px; line-height: 1.35; color: #ffb4b4; }
.title-screen .error:not(:empty) { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; text-align: left; background: rgba(130,24,28,.42); box-shadow: inset 0 0 0 1.5px rgba(224,80,90,.65); }
.title-screen .error:not(:empty)::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #fff; background: #d8404a; box-shadow: 0 0 0 1.5px #5a1014; }
.error.shake { animation: tsShake .42s; }
@keyframes tsShake { 15%, 55% { transform: translateX(-6px); } 35%, 75% { transform: translateX(6px); } 100% { transform: none; } }

/* "continue as": a gold card with a crest, the stored character's name and a play arrow */
#resume { display: flex; flex-direction: column; gap: 6px; }
.rs-card { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 14px; text-align: left; color: #3a2200;
  background: linear-gradient(180deg, #fff6c8 0%, #ffd84a 45%, #f0a91f 100%); box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 2px 0 #fffbe6, inset 0 -3px 0 #c98a12, 0 3px 0 #7a5514, 0 6px 14px rgba(0,0,0,.4); transition: filter .1s, transform .05s; }
.rs-card::before { content: ""; position: absolute; inset: -5px; border-radius: 18px; pointer-events: none; box-shadow: 0 0 14px 3px rgba(255,216,74,.75); opacity: 0; animation: rsGlow 2.4s ease-in-out infinite alternate; }
@keyframes rsGlow { to { opacity: 1; } }
.rs-card:hover:not(:disabled) { filter: brightness(1.07) saturate(1.1); }
.rs-card:active:not(:disabled) { transform: translateY(2px); }
.rs-card.busy > * { visibility: hidden; }
.rs-crest { flex: none; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #3a2a12, #120c05 75%); box-shadow: 0 0 0 1.5px #6b4a08, 0 0 0 3px #f2c64a, inset 0 2px 4px #000a; position: relative; }
.rs-crest::after { content: ""; position: absolute; inset: 7px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M20 3l14 5v10c0 9-6 15.5-14 19C12 33.5 6 27 6 18V8z' fill='%238d322b' stroke='%23f2c64a' stroke-width='2.2'/><path d='M20 10l2.6 6.4 6.9.5-5.3 4.4 1.7 6.7L20 24.3 14.1 28l1.7-6.7-5.3-4.4 6.9-.5z' fill='%23ffe08a'/></svg>") center / contain no-repeat; }
.rs-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; container-type: inline-size; }
.rs-txt small { font-size: 11px; font-weight: 800; color: #7a5514; letter-spacing: .3px; }
/* the whole name always shows: a long one (--n characters, set in main.js) gets a smaller font to stay on one line,
   and only wraps when even that is too wide (very narrow screens) */
.rs-txt b { font-size: 16px; font-size: clamp(12px, calc(100cqi / var(--n, 1)), 16px); font-weight: 800; overflow-wrap: anywhere; text-shadow: 0 1px 0 #fff7; }
.rs-go { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #3a2200; box-shadow: inset 0 0 0 2px #7a5514; position: relative; }
.rs-go::after { content: ""; position: absolute; left: 11px; top: 8px; width: 11px; height: 14px; background: #ffe08a; clip-path: polygon(0 0, 100% 50%, 0 100%); }
#btn-logout { align-self: center; padding: 2px 8px; font-size: 13px; }
.ts-or { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; color: var(--muted); font-size: 12px; font-weight: 700; }
.ts-or::before, .ts-or::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #8a6a26, transparent); }
/* footer: server version and players online */
.title-screen .server-status { margin: 0; padding: 4px 12px; border-radius: 999px; background: rgba(10,7,3,.66); color: #eadbb2; font-size: 12px; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(201,162,74,.55); }
.title-screen .server-status:empty { display: none; }
.title-screen .server-status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #5cdc56; box-shadow: 0 0 6px #5cdc56; }

/* ---------- game layer */
#world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: var(--cur); }
/* the in-game UI is laid out for ~1280x720 and zoomed to fit smaller screens (see fitScreen in ui.js) */
#ui { position: absolute; inset: 0; pointer-events: none; zoom: var(--ui-zoom, 1); }
#ui > * { pointer-events: auto; }

/* ---------- HUD: gilded portrait + label/bar rows */
#hud { position: absolute; left: 14px; top: 14px; width: 440px; padding: 10px 14px 12px 10px; display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: center; }
.hud-portrait { position: relative; display: flex; flex-direction: column; align-items: center; }
.hud-ring { position: relative; width: 104px; height: 104px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #fffdf0, #f5dc92 55%, #d9a73c 100%);
  box-shadow: 0 0 0 2px #9a6e1c, 0 0 0 6px #f3d67c, 0 0 0 7.5px #b98a2a, inset 0 0 12px #fff8, 0 0 16px 4px #ffe08a88; }
.hud-ring img { position: absolute; left: 50%; top: 52%; width: 128px; height: 128px; transform: translate(-50%, -50%); image-rendering: pixelated; }
.hud-portrait::before { content: ""; position: absolute; left: -12px; top: -12px; width: 128px; height: 128px; pointer-events: none;
  background: var(--leaf) no-repeat 0 0 / 42px, var(--leaf) no-repeat 100% 0 / 34px; filter: drop-shadow(0 2px 2px #6b4a0877); z-index: 2; }
#hud-lvbadge { position: relative; z-index: 3; margin-top: -14px; min-width: 88px; padding: 3px 12px; border-radius: 12px; text-align: center; font-weight: 800; font-size: 16px;
  background: linear-gradient(180deg, #fff1b0, #f7cf55 55%, #e2a92a); color: #4a2e00; box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 2px 0 #fffbe6, 0 3px 0 #7a5514; }
.hud-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hud-top { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
#hud-name { font-weight: 800; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; color: #f2d9b3; }
.hud-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 8px; font-size: 12px; font-weight: 800; white-space: nowrap; color: #f1d8af;
  background: var(--well); box-shadow: 0 0 0 1.5px #d4b060, inset 0 0 0 1.5px #544018; }
.hud-chip img.ico { width: 20px; height: 20px; }
.hud-chip.money { color: #dd911d; }
.hud-chip.gem { color: #6092d4; }
i.coin { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbd0, #ffd54a 45%, #b07a10); box-shadow: 0 0 0 1.5px #6b4a08, inset 0 0 0 3px #ffe07a; }
i.gem-ico { display: inline-block; width: 14px; height: 14px; transform: rotate(45deg); border-radius: 3px; background: linear-gradient(135deg, #0c1920, #5fb4ff 50%, #1f5ab8); box-shadow: 0 0 0 1.5px #0a2a5a; }
.hud-row { display: grid; grid-template-columns: 74px 1fr; gap: 6px; align-items: center; }
.hud-lbl { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 800; color: #5a3a08;
  background: linear-gradient(180deg, #fff6d0, #f3d67c); box-shadow: 0 0 0 1.5px #b98a2a, inset 0 1px 0 #fffbe6; }
.hud-lbl i { font-style: normal; font-size: 13px; color: #e0303a; }
.hud-lbl i.sp { color: #3a7ad0; }
.hud-lbl.exp-lbl { justify-content: center; padding: 0; background: none; box-shadow: none; }
.hud-lbl i.exp { font-size: 9px; color: #4a2e00; background: radial-gradient(circle at 40% 35%, #fff6c8, #e2a92a); border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 0 0 1.5px #fffbe6; }

.bar { position: relative; height: 22px; background: linear-gradient(180deg, #5a4420, #7a5e2e); border-radius: 11px; overflow: hidden; margin: 0;
  box-shadow: inset 0 2px 3px #0008, 0 0 0 1.5px #9a6e1c, 0 0 0 3px #f3d67c; }
.bar > div { position: relative; height: 100%; width: 0; transition: width .2s; border-radius: 11px; }
.bar > div::after { content: ""; position: absolute; left: 6px; right: 6px; top: 3px; height: 35%; background: linear-gradient(180deg, #0f0f0f99, #0f0f0f00); border-radius: 8px; }
.bar > span { position: absolute; inset: 0; font-size: 12px; line-height: 22px; text-align: center; font-weight: 800; color: #fff;
  text-shadow: -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 1px 1px 0 var(--ink); }
.bar.hp > div { background: linear-gradient(180deg, #391a16, #f0505a 55%, #b8222e); }
.bar.sp > div { background: linear-gradient(180deg, #0e1a26, #6ab0ff 55%, #2a6ad0); }
.bar.jexp > div { background: linear-gradient(180deg, #1d0e26, #b87af0 55%, #7a3ac8); }
.bar.bexp > div { background: linear-gradient(180deg, #fff6c0, #ffd84a 55%, #e0a020); }
.bar.tf > div { background: linear-gradient(180deg, #391a16, #f0505a 55%, #b8222e); }

.status-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.status-row .st { font-size: 13px; background: var(--well); border-radius: 8px; padding: 1px 6px; box-shadow: inset 0 0 0 1.5px var(--line); }
.status-row .st small { color: #e3caa0; font-size: 10px; margin-left: 2px; font-weight: 700; }

#map-title { position: absolute; right: 14px; top: 262px; min-width: 170px; max-width: 280px; text-align: center; pointer-events: none; padding: 4px 12px; border-radius: 14px;
  background: linear-gradient(180deg, #1e190bf0, #342d19f0); box-shadow: 0 0 0 1.5px #9a6e1c, 0 0 0 3.5px #f3d67c, 0 4px 10px #0005; }
#map-name { font-family: "Cinzel", "Sarabun", serif; font-weight: 800; font-size: 16px; color: #f0d9ab; letter-spacing: 1px; }
#map-sub { font-size: 11px; color: var(--muted); font-weight: 700; }

/* target frame */
#target-frame { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); width: 320px; padding: 9px 14px 9px 9px; display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; }
.tf-face { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #fff6d8, #e8c46a 80%); box-shadow: 0 0 0 1.5px #9a6e1c, 0 0 0 4.5px #f3d67c, 0 0 0 6px #b98a2a; overflow: hidden; display: grid; place-items: center; }
.tf-face img { width: 52px; height: 52px; image-rendering: pixelated; object-fit: contain; transform: scale(1.3) translateY(8%); }
#tf-name { font-weight: 800; font-size: 13px; text-align: left; margin-bottom: 4px; color: #f2d9b3; }
#target-frame .bar { height: 18px; } #target-frame .bar > span { line-height: 18px; font-size: 11px; }

#minimap { position: absolute; right: 14px; top: 86px; border-radius: 16px; background: #272112e6; box-shadow: var(--frame); }
#online-count { position: absolute; right: 24px; top: 236px; font-size: 11px; color: #f0d9ab; font-weight: 800; pointer-events: none; }
#party-frame { position: absolute; left: 14px; top: 176px; width: 210px; display: flex; flex-direction: column; gap: 6px; }
#party-frame .pm { background: var(--panel); border-radius: 12px; padding: 5px 10px; font-size: 12px; font-weight: 700; cursor: var(--cur-hover); box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 0 0 2px #f3d67c; }
#party-frame .pm.sel { box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 0 0 2.5px var(--gold), 0 0 10px #ffd84a88; }
#party-frame .pm .bar { height: 8px; margin-top: 3px; }

/* ---------- chat: ivory log, gilded tabs */
#chat { position: absolute; left: 14px; bottom: 16px; width: clamp(400px, 42vw, 560px); padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
#chat-tabs { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#chat-tabs::-webkit-scrollbar { display: none; }
#chat-tabs button { flex: none; height: 30px; padding: 0 9px; border: 0; border-radius: 10px 10px 4px 4px; font-size: 13px; font-weight: 800; color: #e3caa0;
  background: linear-gradient(180deg, #1a160a, #312a19); box-shadow: 0 0 0 1.5px #c99a34, inset 0 0 0 2px #544018; }
#chat-tabs button.active { color: #4a2e00; background: linear-gradient(180deg, #fff1b0, #f7cf55 55%, #e2a92a); box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 2px 0 #fffbe6; }
.chat-tools { display: flex; gap: 4px; margin-left: auto; }
.chat-tools button { min-width: 34px; padding: 0 8px !important; border-radius: 10px !important; }
#chat-log { height: 132px; overflow-y: auto; padding: 6px 10px; font-size: 12px; line-height: 1.6; border-radius: 12px; color: var(--text);
  background: radial-gradient(ellipse at 90% 90%, #2b2410 0%, transparent 45%), linear-gradient(180deg, #1a160a, #251f11);
  box-shadow: inset 0 1px 4px #b98a2a44, 0 0 0 1.5px #c99a34, 0 0 0 3px #5a491a; }
#chat-log > div { white-space: pre-wrap; word-break: break-word; }
#chat-log .tag { font-weight: 800; }
#chat-log b { font-weight: 800; }
#chat-log .bub { font-size: .9em; }
#chat-log .c-area { color: #edd9ba; } #chat-log .c-area b { color: #f19e11; }
#chat-log .c-global, #chat-log .c-global b, #chat-log .c-global .tag { color: #ffa721; }
#chat-log .c-trade .tag, #chat-log .c-trade b { color: #49a4e1; } #chat-log .c-trade { color: #a8cbe2; }
#chat-log .c-lfg .tag, #chat-log .c-lfg b { color: #dc80b1; } #chat-log .c-lfg { color: #dfa1c3; }
#chat-log .c-party .tag, #chat-log .c-party b { color: #9be098; } #chat-log .c-party { color: #b9e1b4; }
#chat-log .c-guild .tag, #chat-log .c-guild b { color: #6395e5; } #chat-log .c-guild { color: #306bc4; }
#chat-log .c-system, #chat-log .c-system .tag { color: #5a58b0; }
#chat-bar { display: flex; gap: 6px; align-items: center; }
#chat-lang { flex: none; height: 38px; padding: 0 10px; border: 0; border-radius: 12px; font-weight: 800; font-size: 13px; color: #f1d8af;
  background: linear-gradient(180deg, #1a160a, #312a19); box-shadow: 0 0 0 1.5px #c99a34, inset 0 0 0 2px #544018; }
#chat-input { flex: 1; min-width: 0; height: 38px; padding: 0 14px; font-size: 13px; margin: 0; }
#chat-bar .round { flex: none; width: 46px; height: 38px; border: 0; border-radius: 12px; font-size: 18px; color: #f0d9ab;
  background: linear-gradient(180deg, #1a160a, #312a19); box-shadow: 0 0 0 1.5px #c99a34, inset 0 0 0 2px #544018, 0 3px 0 #b98a2a88; }
#chat-bar .round:first-of-type { background: linear-gradient(180deg, #fff1b0, #f7cf55 55%, #e2a92a); box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 2px 0 #fffbe6, 0 3px 0 #7a5514; }
#chat-bar .round:active { transform: translateY(2px); }
#emoji-pop { position: absolute; right: 10px; bottom: 58px; display: grid; grid-template-columns: repeat(8, 32px); gap: 4px; padding: 8px; border-radius: 14px; background: var(--panel); box-shadow: var(--frame); z-index: 5; }
#emoji-pop button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--cell); box-shadow: inset 0 0 0 1px #d4b060; font-size: 18px; }
#emoji-pop button:hover { background: linear-gradient(180deg, #fff1b0, #f7cf55); }
/* emotes (sent at once, shown over your head) across the top of the emoji box */
#emoji-pop .emo-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid #d4b06088; }
#emoji-pop .emo-btn { width: auto; height: 40px; display: flex; align-items: center; justify-content: center; }
#emoji-pop .emo-btn img { max-width: 36px; max-height: 36px; image-rendering: pixelated; }
#chat-log img.emo { height: 24px; vertical-align: middle; image-rendering: pixelated; }
#chat.folded #chat-log, #chat.folded #chat-bar { display: none; }
#chat.folded #chat-fold { transform: rotate(180deg); }

/* ---------- bottom: gilded hotbar */
/* skill bar level with the chat box: centred, but never overlapping the chat on the left */
#bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 0; pointer-events: none; }
#bottom-row { position: absolute; bottom: 16px; pointer-events: auto;
  left: max(calc(50% - 292px), calc(14px + clamp(400px, 42vw, 560px) + 18px)); }
/* buffs / debuffs: column on the right edge under the minimap */
#buff-tray { position: absolute; right: 14px; top: 322px; display: flex; flex-direction: column; flex-wrap: wrap-reverse; align-content: flex-start; gap: 6px; max-height: calc(var(--app-h, 100vh) / var(--ui-zoom, 1) - 350px); pointer-events: auto; }
.buff { --c: #f2bf3a; position: relative; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c) 30%, #1e190b), #3d351e 85%);
  box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 0 0 2px var(--c), inset 0 0 0 3.5px #58491a; }
.buff.debuff { box-shadow: 0 0 0 1.5px #7a2a24, inset 0 0 0 2px #e0505a, inset 0 0 0 3.5px #572319; }
.buff img.ico { width: 34px; height: 34px; margin-top: -6px; }
.buff .emo { font-size: 20px; margin-top: -6px; }
.buff::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from 0deg, #3a280880 calc(var(--e, 0) * 360deg), transparent 0); pointer-events: none; }
.buff .t { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font-size: 10px; font-weight: 800; color: #fff; z-index: 1;
  text-shadow: -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 1px 1px 0 var(--ink); }
.buff.ending { animation: blink .5s infinite alternate; }
@keyframes blink { to { opacity: .45; } }
#bottom > * { pointer-events: auto; }
#hotbar-plate { padding: 10px 16px; border-radius: 18px; }
#hotbar-plate::before { left: -20px; top: 50%; transform: translateY(-50%) rotate(-40deg); width: 52px; height: 52px; }
#hotbar-plate::after { right: -20px; top: 50%; bottom: auto; transform: translateY(-50%) rotate(140deg) scaleX(-1); width: 52px; height: 52px; }
#hotbar { display: flex; gap: 7px; }
/* slots: golden cells with a faint diamond in the middle */
.slot { position: relative; width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; cursor: var(--cur-hover); overflow: hidden; user-select: none;
  background: var(--diamond) no-repeat center / 16px, var(--cell); box-shadow: var(--cell-rim), 0 2px 0 #b98a2a66; transition: transform .08s, box-shadow .1s; }
.slot:has(img), .slot:has(.emo) { background: var(--cell); }
.slot:hover { transform: translateY(-3px); box-shadow: var(--cell-rim), 0 0 12px #ffd84acc; }
.slot:active { transform: translateY(0) scale(.95); }
/* gold diamond marker with the key number */
.slot .key { position: absolute; left: 4px; top: 4px; width: 15px; height: 15px; z-index: 3; display: grid; place-items: center; font-size: 8px; font-weight: 800; color: #f4dcbe; }
.slot .key::before { content: ""; position: absolute; inset: 1px; transform: rotate(45deg); border-radius: 2px; background: linear-gradient(135deg, #fff3a8, #ffc62a 55%, #b07a10); box-shadow: 0 0 0 1px #5a3a00; z-index: -1; }
.slot .qty { position: absolute; right: 5px; bottom: 3px; font-size: 11px; font-weight: 800; color: #fff; text-shadow: -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 1px 1px 0 var(--ink); z-index: 3; }
.slot .cdv { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: conic-gradient(from 0deg, #3a2808b0 calc(var(--cd, 0) * 360deg), transparent 0); }
.slot .cdt { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; font-size: 16px; font-weight: 800; color: #fff; pointer-events: none;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.slot.ready-flash { animation: ready .45s; }
@keyframes ready { 0% { box-shadow: inset 0 0 0 3px #333333, 0 0 20px #ffe08a; } 100% { box-shadow: var(--cell-rim); } }
.slot .lbl { font-size: 9px; position: absolute; bottom: 1px; left: 2px; right: 2px; text-align: center; white-space: nowrap; overflow: hidden; color: #f0d9ab; }
.slot.pick { box-shadow: inset 0 0 0 3px var(--gold), 0 0 14px var(--gold); animation: pulse 1s infinite; }
@keyframes pulse { 50% { box-shadow: inset 0 0 0 3px #333333, 0 0 20px var(--gold); } }

/* ---------- top-right icon menu (icons with labels underneath) + "More" grid */
#menu { position: absolute; right: 10px; top: 6px; display: flex; gap: 2px; align-items: flex-start; }
#menu button, #more-panel button { position: relative; width: 66px; padding: 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 0; cursor: var(--cur-hover); }
#menu .ic, #more-panel .ic { width: 52px; height: 52px; display: grid; place-items: center; transition: transform .12s; filter: drop-shadow(0 3px 2px #0008); }
#menu .ic img, #more-panel .ic img { width: 52px; height: 52px; image-rendering: pixelated; }
#menu .ic .emo, #more-panel .ic .emo { font-size: 32px; }
#menu .nm { margin-top: -6px; font-size: 13px; font-weight: 800; color: #fff; white-space: nowrap;
  text-shadow: -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--ink), 0 2px 3px #000a; }
#more-panel .nm { margin-top: -4px; font-size: 13px; font-weight: 800; color: #f2d9b3; white-space: nowrap; }
#menu .k, #more-panel .k { position: absolute; right: 6px; top: 2px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 4px; font-size: 9px; line-height: 14px; font-weight: 800; color: #4a2a00;
  background: linear-gradient(180deg, #fff3a8, #ffc62a); box-shadow: 0 0 0 1px #5a3a00; opacity: 0; transition: opacity .12s; }
#menu button:hover .ic, #more-panel button:hover .ic { transform: translateY(-3px) scale(1.1); }
#menu button:hover .k, #more-panel button:hover .k { opacity: 1; }
#menu button.on .ic, #more-panel button.on .ic { filter: drop-shadow(0 0 6px #ffd54a) drop-shadow(0 3px 2px #000a); }
#menu button.on .nm { color: #ffe680; }
#more-panel button.on .nm { color: #ffa721; }
#more-panel { position: absolute; right: 12px; top: 84px; z-index: 20; display: grid; grid-template-columns: repeat(4, 76px); gap: 10px 4px; padding: 14px 12px 12px; }
#more-panel button { width: 76px; }
/* touch controls: see #touch below */

/* ---------- windows */
.win { position: absolute; min-width: 280px; max-width: calc(var(--app-w, 100vw) / var(--ui-zoom, 1) - 12px); max-height: calc(var(--app-h, 100vh) / var(--ui-zoom, 1) - 12px); display: flex; flex-direction: column; animation: winIn .14s ease-out; }
@keyframes winIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
/* title bar: gilded title between diamond rules on an ivory banner */
.win-head { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 50px 10px; cursor: move; user-select: none;
  background: radial-gradient(ellipse at 50% 0%, #1b180a, transparent 70%), linear-gradient(180deg, #201b0c, #332c19); border-radius: 14px 14px 6px 6px; margin: 6px 6px 0;
  box-shadow: inset 0 -1.5px 0 #e0c070, inset 0 1px 0 #333333; }
.win-head::before, .win-head::after { content: ""; flex: 0 1 60px; height: 10px; background: var(--diamond) no-repeat center / 10px, linear-gradient(90deg, transparent, #d4a940 30%, #d4a940 70%, transparent) no-repeat center / 100% 1.5px; }
.win-head span { font-family: "Sarabun", sans-serif; font-weight: 800; font-size: 19px; }
.win-head button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 9px; border: 0; font-size: 15px; font-weight: 800; color: #f0d9ab;
  background: linear-gradient(180deg, #1a160a, #312a19); box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 0 0 2px #544018, inset 0 0 0 3px #ecd08a, 0 2px 0 #7a551488; }
.win-head button:hover { filter: brightness(1.05); color: #e36771; }
.win-body { padding: 12px 16px 16px; overflow-y: auto; overflow-x: hidden; container-type: inline-size; min-height: 0; }
.row { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 5px 0; }
.row + .row { border-top: 1px solid #e6cd8a88; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; font-size: 13px; }
.grid2 .k { color: var(--muted); }
.section { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; font-size: 13px; font-weight: 800; color: #dd911d; }
.section::before { content: ""; width: 10px; height: 10px; background: var(--diamond) no-repeat center / contain; }
.section::after { content: ""; flex: 1; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, #d4a940, transparent); }
.section:first-child { margin-top: 0; }
.pill { display: inline-block; font-size: 10px; padding: 0 7px; border-radius: 999px; background: #241e0e; box-shadow: inset 0 0 0 1px #d4b060; margin-left: 4px; font-weight: 800; color: #e3caa0; }
.ctx { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tabs-inline { display: flex; gap: 4px; margin-bottom: 8px; }
.tabs-inline button { white-space: nowrap; border: 0; border-radius: 10px 10px 4px 4px; padding: 5px 14px; font-weight: 800; color: #e3caa0;
  background: linear-gradient(180deg, #1a160a, #312a19); box-shadow: 0 0 0 1.5px #c99a34, inset 0 0 0 2px #544018; }
.tabs-inline button.active { color: #4a2e00; background: linear-gradient(180deg, #fff1b0, #f7cf55 55%, #e2a92a); box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 2px 0 #fffbe6; }
.progress { height: 10px; background: #322c1c; border-radius: 5px; overflow: hidden; margin: 4px 0; box-shadow: inset 0 1px 2px #9a6e1c55, 0 0 0 1.5px #c99a34; }
.progress > div { height: 100%; background: linear-gradient(180deg, #fff6c0, #ffd84a 55%, #e0a020); }

/* ---------- world map window */
.wm-links { font-size: 11px; color: var(--muted); font-weight: 700; }

/* ---------- character window */
.char-head { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: var(--well); box-shadow: 0 0 0 1.5px #d4b060, inset 0 0 0 2px #544018; }
.char-face { position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #fffdf0, #f5dc92 60%, #d9a73c); box-shadow: 0 0 0 1.5px #9a6e1c, 0 0 0 4.5px #f3d67c, 0 0 0 6px #b98a2a; }
.char-face img { width: 104px; height: 104px; image-rendering: pixelated; }
.char-name { font-size: 20px; font-weight: 800; color: #f2d9b3; }
.char-cls { color: #ffa721; font-weight: 800; font-size: 13px; }
.char-lv { font-size: 12px; color: var(--muted); margin: 2px 0 4px; font-weight: 700; }
.stat-row { display: grid; grid-template-columns: 44px 38px 1fr auto; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 10px; }
.stat-row:nth-child(odd) { background: #27210f66; }
.stat-row b { display: grid; place-items: center; height: 22px; border-radius: 11px; font-size: 11px; color: #4a2e00; background: linear-gradient(180deg, #fff1b0, #f3c94a); box-shadow: 0 0 0 1.5px #b98a2a; }
.stat-row .val { font-weight: 800; text-align: right; }
.stat-row .sbar { position: relative; height: 10px; border-radius: 5px; background: #322c1c; overflow: hidden; box-shadow: inset 0 1px 2px #9a6e1c55, 0 0 0 1.5px #c99a34; }
.stat-row .sbar > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #fff6c0, #ffd84a 55%, #e0a020); border-radius: 5px; }
.stat-row .sbar > u { position: absolute; top: 0; bottom: 0; background: #6ab0ff; opacity: .85; }
.stat-row .bonus { color: #9be098; font-size: 11px; margin-left: 3px; font-weight: 800; }
.derived { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.derived div { background: var(--well); border-radius: 10px; padding: 5px 9px; box-shadow: 0 0 0 1.5px #d4b060, inset 0 0 0 1.5px #544018; }
.derived small { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .5px; }
.derived b { font-size: 15px; color: #f2d9b3; }

/* ---------- inventory / paper doll: a glowing golden alcove */
.doll { display: grid; grid-template-columns: 60px 1fr 60px; gap: 8px; align-items: center; padding: 10px; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 55%, rgba(74,56,24,.8) 0%, rgba(37,28,15,.7) 40%, rgba(17,13,8,.65) 80%, rgba(10,8,6,.65) 100%); box-shadow: 0 0 0 1.5px #c9a24a, inset 0 0 0 2px #000, inset 0 0 0 3px #5a4214, inset 0 0 30px #f2c64a22; }
.doll-col { display: flex; flex-direction: column; gap: 7px; }
.doll-center { position: relative; height: 270px; display: grid; place-items: center; }
.doll-center img { position: relative; z-index: 1; width: 180px; height: 180px; image-rendering: pixelated; filter: drop-shadow(0 6px 8px #000c); }
/* glowing rune circle under the character + soft light rays */
.doll-center::before { content: ""; position: absolute; inset: 10px 20px; background: conic-gradient(from 0deg, #0f0f0f00, #f2c64a33 5%, #0f0f0f00 10%, #0f0f0f00 20%, #f2c64a26 25%, #0f0f0f00 30%, #0f0f0f00 45%, #f2c64a33 50%, #0f0f0f00 55%, #0f0f0f00 70%, #f2c64a26 75%, #0f0f0f00 80%);
  border-radius: 50%; filter: blur(4px); opacity: .7; animation: rays 18s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
.doll-center::after { content: ""; position: absolute; bottom: 36px; width: 150px; height: 36px; border-radius: 50%;
  background: radial-gradient(ellipse, #23200d 0%, #453a1acc 35%, transparent 70%); box-shadow: 0 0 0 1.5px #f3d67c88, inset 0 0 0 6px #63561d55; }
.doll-name { position: absolute; top: 4px; left: 0; right: 0; text-align: center; font-weight: 800; font-size: 13px; color: #f0d9ab; z-index: 2; }
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 6px; padding: 8px; border-radius: 14px; background: var(--well); box-shadow: 0 0 0 1.5px #d4b060, inset 0 0 0 2px #544018; max-height: 240px; overflow-y: auto; }
.item-cell { --r: #d4a940; position: relative; height: 50px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; cursor: var(--cur-hover); color: var(--text);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--r) 22%, #231e0d), #3c331b 90%);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--r) 70%, #b98a2a), inset 0 0 0 3px #58491a, inset 0 0 0 4px #efd07e; transition: transform .08s, box-shadow .1s; }
.item-cell:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px #9a6e1c, inset 0 0 0 3px #58491a, inset 0 0 0 4px var(--gold), 0 0 10px color-mix(in srgb, var(--r) 70%, transparent); }
.item-cell.sel { box-shadow: inset 0 0 0 2px #9a6e1c, inset 0 0 0 3.5px #58491a, inset 0 0 0 5px var(--gold), 0 0 14px #ffd84acc; }
.item-cell.empty { cursor: var(--cur); font-size: 18px; background: var(--diamond) no-repeat center / 14px, linear-gradient(180deg, #2a2413, #3a321c); }
.item-cell.empty > * { opacity: .45; filter: grayscale(1); }
.item-cell.empty:hover { transform: none; }
.item-cell .qty { position: absolute; right: 5px; bottom: 2px; font-size: 11px; font-weight: 800; color: #fff; text-shadow: -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 1px 1px 0 var(--ink); }
.item-cell .ref { position: absolute; left: 3px; top: 2px; font-size: 10px; font-weight: 800; color: #fff; padding: 0 4px; border-radius: 6px; background: linear-gradient(180deg, #8a6420, #5a3e10); box-shadow: 0 0 0 1px #f3d67c; }
.item-cell.locked::after { content: "🔒"; position: absolute; right: 2px; top: 0; font-size: 9px; }
.item-cell .slot-name { position: absolute; top: 3px; left: 0; right: 0; text-align: center; font-size: 8px; font-weight: 800; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; }
.inv-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; font-weight: 700; }
.inv-foot .wt { flex: 1; max-width: 150px; }
.hud-gold { color: #dd911d; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
.sel-panel { margin-top: 8px; padding: 9px 11px; border-radius: 12px; background: var(--well); box-shadow: 0 0 0 1.5px #c99a34, inset 0 0 0 2px #544018, inset 0 0 0 3px #f3d67c; }
.sel-panel:empty { display: none; }
.equip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.equip-grid .item-cell { height: 52px; font-size: 18px; }

/* ---------- skills window */
.skill-points { display: inline-flex; align-items: center; gap: 4px; padding: 2px 11px; border-radius: 999px; font-weight: 800; font-size: 12px;
  background: linear-gradient(180deg, #fff3a8, #f0a91f); color: #4a2a00; box-shadow: 0 0 0 1.5px #5a3a00; }
.skill-card { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 9px; margin-top: 7px; border-radius: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--k) 16%, #1e190b), #272112); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--k) 45%, #c99a34), inset 0 0 0 2px #544018; }
.skill-card.locked { filter: grayscale(.7); opacity: .7; }
.skill-card.learned { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--k) 70%, #9a6e1c), inset 0 0 0 2px #544018, 0 0 10px color-mix(in srgb, var(--k) 30%, transparent); }
.sk-icon { position: relative; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 26px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--k) 30%, #231e0d), #43391f 90%); box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 0 0 2px #58491a, 0 0 0 3.5px #f3d67c; }
.sk-icon img.ico { width: 46px; height: 46px; }
.sk-pips { display: flex; gap: 2px; margin-top: 5px; justify-content: center; }
.sk-pips i { width: 4px; height: 6px; border-radius: 1px; background: #d9c490; }
.sk-pips i.on { background: #e2a92a; box-shadow: 0 0 4px var(--gold); }
.sk-name { font-weight: 800; font-size: 14px; color: #f2d9b3; }
.sk-type { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; font-size: 10px; font-weight: 800; vertical-align: 2px; color: #f4e2c2; background: var(--k); }
.sk-desc { font-size: 12px; color: #e4d1b3; margin-top: 2px; }
.sk-meta { font-size: 11px; color: var(--muted); margin-top: 2px; font-weight: 700; }
.sk-meta.req { color: var(--bad); }
.sk-btns { display: flex; flex-direction: column; gap: 5px; }
.sk-btns .btn.learn { width: 36px; height: 32px; padding: 0; font-size: 20px; font-weight: 800; }
.skill-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 6px 0; border-top: 1px solid #e6cd8a88; }
.skill-row .nm { font-weight: 800; }
.skill-row .ds { font-size: 12px; color: var(--muted); }
.skill-row .meta { font-size: 11px; color: #e3caa0; }

/* pixel-art icons (client/assets/icons) */
img.ico { width: 1.6em; height: 1.6em; image-rendering: pixelated; vertical-align: middle; pointer-events: none; }
.item-cell img.ico, #hotbar .slot img.ico { width: 40px; height: 40px; }
.equip-grid .item-cell img.ico { width: 30px; height: 30px; margin-top: 8px; }
.doll .item-cell img.ico { width: 34px; height: 34px; margin-top: 6px; }
.tt-name img.ico { width: 36px; height: 36px; }

/* class change: portrait cards */
.cls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.cls-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 6px; border-radius: 16px;
  background: radial-gradient(circle at 50% 35%, #0f0f0f, color-mix(in srgb, var(--c) 22%, #2c2611) 45%, #43391f 90%); box-shadow: 0 0 0 1.5px #b98a2a, inset 0 0 0 2px #544018, inset 0 0 0 3px #efd07e; transition: transform .1s; }
.cls-card:hover { transform: translateY(-3px); }
.cls-card.cur { box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 0 0 2px #544018, inset 0 0 0 4px var(--gold), 0 0 14px #ffd54a88; }
.cls-art { height: 90px; display: grid; place-items: center; }
.cls-art img { width: 90px; height: 90px; image-rendering: pixelated; filter: drop-shadow(0 4px 5px #9a6e1c88); }
.cls-name { font-weight: 800; font-size: 15px; color: #f2d9b3; }
.cls-job { font-size: 11px; color: var(--muted); text-align: center; min-height: 14px; font-weight: 700; }
.cls-badge { position: absolute; top: 6px; right: 6px; font-size: 10px; padding: 1px 8px; border-radius: 999px; background: linear-gradient(180deg, #fff3a8, #f0a91f); color: #4a2a00; font-weight: 800; box-shadow: 0 0 0 1.5px #5a3a00; }
.cls-card .btn { margin-top: 4px; }

/* ---------- tooltip / toasts / overlays
   tooltip and toasts stay dark (with a gold rim) so rarity / status colours remain readable */
#tooltip { position: fixed; z-index: 2147483000; /* windows raise their z-index on every click */ pointer-events: none; padding: 10px 13px; font-size: 12px; max-width: 290px; line-height: 1.5; border-radius: 14px; color: #fff6dc;
  background: linear-gradient(180deg, #3a2a12f5, #24190af5); box-shadow: 0 0 0 1.5px #9a6e1c, 0 0 0 3.5px #f3d67c, 0 8px 20px #0008; }
#tooltip .tt-name { font-weight: 800; font-size: 14px; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1.5px solid #f3d67c77; display: flex; align-items: center; gap: 6px; }
#toasts { position: absolute; left: 50%; top: 124px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none; }
.toast { padding: 5px 18px; border-radius: 12px; font-size: 13px; font-weight: 800; color: #fff6dc; background: linear-gradient(180deg, #3a2a12ee, #24190aee); box-shadow: 0 0 0 1.5px #9a6e1c, 0 0 0 3px #f3d67c; animation: fade 2.6s forwards; }
#announce { position: absolute; left: 50%; top: 94px; transform: translateX(-50%); pointer-events: none; font-weight: 800; color: #fffbd0; font-size: 18px; text-align: center;
  text-shadow: -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 1px 1px 0 var(--ink), 0 0 14px #ffd84a; }
@keyframes fade { 0% { opacity: 0; transform: translateY(6px); } 10% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
#death, #net-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle, #3a1a0a44, #1a0a05bb); }
#net-overlay { background: #000a; z-index: 60; }
.death-box { padding: 24px 34px; text-align: center; }
.death-box h2 { color: #e36771; margin-top: 0; }
.invite-pop { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); padding: 14px 18px; text-align: center; }

/* phones in landscape: same layout as desktop, scaled to fit the short screen */
@media (pointer: coarse) and (max-height: 520px) and (orientation: landscape) {
  #chat-log { height: 96px; }
}
/* held upright (body.portrait, set by fitScreen; the #ui design width is then ~820): the same HUD rearranged.
   Top: status frame (left) + minimap (right), the menu buttons in rows under the frame, party under them.
   Bottom: combat panel (right) with the hotbar above it, the chat beside it (left), the joystick above the chat. */
body.portrait #menu { left: 14px; right: 232px; top: 176px; flex-wrap: wrap; justify-content: flex-start; row-gap: 4px; }
body.portrait #mm-box { top: 14px; }
body.portrait #map-title { top: 214px; }
body.portrait #btn-login30 { top: 22px; }
body.portrait #buff-tray { top: 262px; }
body.portrait #party-frame { top: 344px; }
body.portrait #chat { width: calc(100% - 356px * var(--cb-scale, 1) - 42px); min-width: 300px; }
body.portrait #bottom-row { left: auto; right: 14px; bottom: calc(368px * var(--cb-scale, 1) + 30px); }
body.portrait #announce { top: 380px; }

/* small screens: #ui is zoomed as a whole (fitScreen), so the desktop layout needs no separate phone rules */

/* ---------- wardrobe (skins / pets), item shop, inspect */
.ward-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.chk { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 10px; font-size: 13px; font-weight: 800; color: #f2d9b3; cursor: var(--cur-hover);
  background: var(--well); box-shadow: 0 0 0 1.5px #c99a34, inset 0 0 0 2px #544018; }
.chk input { width: 16px; height: 16px; accent-color: #c99422; }
.ward-tabs { margin: 0; }
.ward-grid { display: grid; grid-template-columns: 1fr 230px 1fr; gap: 10px; align-items: stretch; }
.ward-left, .ward-right { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 14px; background: var(--well); box-shadow: 0 0 0 1.5px #d4b060, inset 0 0 0 2px #544018; min-height: 280px; }
.ward-slot, .insp-slot { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 6px; border-radius: 12px; cursor: var(--cur-hover);
  background: linear-gradient(180deg, #1a160a, #282215); box-shadow: 0 0 0 1.5px #d4b060, inset 0 0 0 2px #544018; }
.ward-slot.sel { box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 0 0 2.5px var(--gold), 0 0 10px #ffd84a88; }
.ward-slot .k, .insp-slot .k { font-size: 11px; color: var(--muted); font-weight: 800; }
.ward-slot b, .insp-slot b { font-size: 15px; color: #edd9ba; }
.ward-ic { width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: var(--cell); box-shadow: var(--cell-rim); }
.ward-ic.big { width: 84px; height: 84px; }
.ward-ic.sm { width: 36px; height: 36px; position: relative; }
.ward-ic.sm i { position: absolute; right: 2px; bottom: 0; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 0 2px #3a2808, 0 0 2px #3a2808; }
.ward-ic .emo { font-size: 30px; }
.ward-ic img.ico { width: 30px; height: 30px; }
img.cos-img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.ward-center { position: relative; display: grid; place-items: center; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 55%, rgba(74,56,24,.8) 0%, rgba(37,28,15,.7) 40%, rgba(17,13,8,.65) 80%, rgba(10,8,6,.65) 100%); box-shadow: 0 0 0 1.5px #c9a24a, inset 0 0 0 2px #000, inset 0 0 0 3px #5a4214, inset 0 0 30px #f2c64a22; }
.ward-center::before { content: ""; position: absolute; inset: 14px 24px; background: conic-gradient(from 0deg, #0f0f0f00, #0f0f0f99 5%, #0f0f0f00 10%, #0f0f0f00 25%, #0f0f0f88 30%, #0f0f0f00 35%, #0f0f0f00 50%, #0f0f0f99 55%, #0f0f0f00 60%, #0f0f0f00 75%, #0f0f0f88 80%, #0f0f0f00 85%);
  border-radius: 50%; filter: blur(4px); opacity: .7; animation: rays 18s linear infinite; pointer-events: none; }
.ward-center::after { content: ""; position: absolute; bottom: 18%; left: 50%; width: 150px; height: 34px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, #23200d 0%, #453a1acc 35%, transparent 70%); box-shadow: 0 0 0 1.5px #f3d67c88, inset 0 0 0 6px #63561d55; pointer-events: none; }
.ward-center canvas.look { position: relative; z-index: 1; image-rendering: pixelated; }
.ward-center .doll-name { z-index: 2; }
.ward-h { text-align: center; font-weight: 800; color: #f0d9ab; font-size: 15px; }
.ward-h.small { font-size: 12px; text-align: left; margin-top: 4px; }
.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.cos-cell { height: 64px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; cursor: var(--cur-hover); background: var(--cell); box-shadow: var(--cell-rim); transition: transform .08s; }
.cos-cell:hover { transform: translateY(-2px); }
.cos-cell.sel { box-shadow: inset 0 0 0 2px #9a6e1c, inset 0 0 0 4px var(--gold), 0 0 12px #ffd84acc; }
.cos-cell.worn { position: relative; }
.cos-cell.worn::after { content: "✔"; position: absolute; right: 4px; top: 2px; font-size: 11px; font-weight: 800; color: #9be098; }
.ward-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-weight: 800; font-size: 16px; color: #f0d9ab; }
.ward-foot { display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; align-items: center; margin-top: 10px; padding: 10px; border-radius: 14px;
  background: var(--well); box-shadow: 0 0 0 1.5px #c99a34, inset 0 0 0 2px #544018, inset 0 0 0 3px #f3d67c; }
.ward-desc b { font-size: 18px; color: #edd9ba; }
.ward-desc .muted { font-size: 13px; margin-top: 2px; }
.ward-btns { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.ward-btns .btn { padding: 9px 14px; }
.pet-card { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: center; }
.pet-info { display: flex; flex-direction: column; gap: 5px; }
.pet-lv { font-size: 18px; font-weight: 800; color: #f2d9b3; }
.pet-feed { display: flex; align-items: center; gap: 6px; }
.pet-bar { display: grid; grid-template-columns: 62px 1fr; gap: 6px; align-items: center; font-size: 11px; font-weight: 800; color: #f2d9b3; }
.pet-bar .progress { height: 10px; margin: 0; }
.progress.close > div { background: linear-gradient(180deg, #0e1a26, #6ab0ff 55%, #2a6ad0); }
.pet-loot { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 800; color: #f2d9b3; cursor: pointer; }
.pet-loot-d { font-size: 11px; }
.pet-loot.off { opacity: .5; cursor: default; }
.pet-bonus { margin-top: 3px; font-size: 12px; font-weight: 800; color: #9be098; }
.shop-ete { font-weight: 800; font-size: 16px; color: #6092d4; }
.shop-grid2 { display: grid; grid-template-columns: 210px 1fr; gap: 10px; }
.shop-grid2 .ward-center { min-height: 280px; align-content: center; }
.try-name { position: relative; z-index: 2; text-align: center; font-size: 12px; font-weight: 800; padding: 0 6px; }
.shop-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; align-content: start; max-height: 380px; overflow-y: auto; padding: 2px; }
.shop-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 6px; border-radius: 14px; cursor: var(--cur-hover); text-align: center;
  background: linear-gradient(180deg, #1a160a, #282215); box-shadow: 0 0 0 1.5px #d4b060, inset 0 0 0 2px #544018; transition: transform .08s; }
.shop-card:hover { transform: translateY(-2px); }
.shop-card.sel { box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 0 0 2.5px var(--gold), 0 0 12px #ffd84a88; }
.shop-card b { font-size: 13px; color: #edd9ba; min-height: 34px; display: grid; place-items: center; }
.shop-card .price { font-weight: 800; color: #6092d4; }
.insp-grid { display: grid; grid-template-columns: 1fr 210px 1fr; gap: 10px; }
.insp-col { display: flex; flex-direction: column; gap: 6px; }
.insp-slot { grid-template-columns: 50px 1fr; cursor: var(--cur); padding: 4px 6px; }
.insp-slot b { font-size: 12px; }
.insp-slot .item-cell { height: 46px; }
.insp-slot .item-cell img.ico { width: 32px; height: 32px; }
.insp-grid .ward-center { min-height: 280px; }
/* a worn piece: hover / tap = its tooltip, click = its details window (ui.js inspect) */
.insp-slot.has { cursor: var(--cur-hover); }
.insp-slot.has:hover { box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 0 0 2.5px var(--gold), 0 0 10px #ffd84a66; }
.insp-hint { text-align: center; font-size: 11px; margin-top: 6px; }
.insp-grid .doll-name { position: absolute; top: 6px; left: 0; right: 0; }
.insp-extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.insp-extras .ward-ic { width: 50px; height: 50px; }
#tf-actions { display: flex; gap: 6px; margin-top: 6px; }
@media (max-width: 720px) {
  .ward-grid, .insp-grid, .shop-grid2 { grid-template-columns: 1fr; }
  .ward-foot { grid-template-columns: 64px 1fr; } .ward-btns { grid-column: 1 / -1; flex-direction: row; }
}
/* class-specific costumes */
.cos-group { font-size: 12px; font-weight: 800; color: var(--muted); margin: 4px 0 2px; }
.cos-group.mine { color: #ffa721; }
.cos-cell.locked { filter: grayscale(.85); opacity: .55; }
.cls-pill { color: #5a3a08; background: linear-gradient(180deg, #fff6d0, #f3d67c); }
.shop-card.mine { box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 0 0 2px #544018, 0 0 8px #ffd84a66; }
.req-note { margin-top: 4px; font-size: 12px; font-weight: 800; color: var(--bad); }
/* gender: login picker + ♂/♀ marks */
.gender-pick { display: flex; gap: 6px; justify-content: center; align-items: center; margin: 0 0 12px; }
.gender-pick .gp-lbl { font-weight: 800; color: var(--muted); font-size: 13px; margin-right: 4px; }
.gender-pick .gp { border: 0; border-radius: 999px; padding: 5px 16px; font-weight: 800; color: #e3caa0; background: linear-gradient(180deg, #1a160a, #282215); box-shadow: 0 0 0 1.5px #c99a34, inset 0 0 0 2px #544018; }
.gender-pick .gp b { font-size: 16px; }
.gender-pick .gp[data-g="m"] b { color: #84b2e6; } .gender-pick .gp[data-g="f"] b { color: #e0508a; }
.gender-pick .gp.active { color: #4a2e00; background: linear-gradient(180deg, #fff1b0, #f7cf55 55%, #e2a92a); box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 2px 0 #fffbe6, 0 2px 0 #7a5514; }
.g-mark { font-weight: 800; margin-right: 3px; }
.g-mark.m { color: #84b2e6; } .g-mark.f { color: #e0508a; }
.shop-card .ward-ic.big img.ico { width: 48px; height: 48px; }
/* mounts (client/js/mounts.js): the icon is the south-east standing frame of the sheet; the bag's Mount view */
.mount-ic { display: block; width: 94%; max-height: 94%; background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated; }
.ward-ic.big .mount-ic { width: 96%; }
.doll-skins .item-cell .mount-ic { width: 54px; margin-top: 10px; }
.doll-skins .item-cell.riding { box-shadow: var(--cell-rim), inset 0 0 0 2px #9be098, 0 0 8px #9be09888; }
.mount-stat { padding: 8px; border-radius: 12px; font-size: 13px; font-weight: 800; color: #b9a98a; text-align: center; background: linear-gradient(180deg, #1a160a, #282215); box-shadow: 0 0 0 1.5px #8a7448, inset 0 0 0 2px #3a2e14; }
.mount-stat small { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.mount-stat.on { color: #9be098; box-shadow: 0 0 0 1.5px #9be098, inset 0 0 0 2px #2e4a20, 0 0 10px #9be09855; }
.mount-turn { position: relative; z-index: 2; display: flex; gap: 6px; justify-content: center; margin-top: -6px; padding-bottom: 8px; }
.mount-turn .btn.active { color: #4a2e00; }
.mount-pill { color: #1d3a12; background: linear-gradient(180deg, #e6ffd8, #9be098); box-shadow: inset 0 0 0 1px #4f8a3a; }
.mount-key { font-size: 11px; text-align: center; margin-top: auto; }
/* hotbar pages (4 × 9): ▲ page ▼ at the right end of the bar */
#hotbar-plate { display: flex; align-items: center; gap: 8px; }
#hotbar-page { display: flex; flex-direction: column; align-items: center; gap: 1px; }
#hotbar-page button { width: 26px; height: 18px; padding: 0; border: 0; border-radius: 6px; font-size: 10px; line-height: 18px; color: #5a3a08;
  background: linear-gradient(180deg, #fff6d0, #f3d67c); box-shadow: 0 0 0 1.5px #b98a2a, inset 0 1px 0 #fffbe6; cursor: var(--cur-hover); }
#hotbar-page button:hover { filter: brightness(1.06); }
#hotbar-page b { display: grid; place-items: center; width: 22px; height: 18px; border-radius: 50%; font-size: 12px; color: #4a2e00;
  background: radial-gradient(circle at 40% 35%, #fff6c8, #e2a92a); box-shadow: 0 0 0 1.5px #9a6e1c; }
@media (max-width: 720px) { #hotbar-page button { width: 20px; height: 14px; line-height: 14px; } #hotbar-page b { width: 16px; height: 14px; font-size: 10px; } }
/* item shop: costume class filter */
.shop-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cls-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cls-chips button { border: 0; border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 800; color: #e3caa0; cursor: var(--cur-hover);
  background: linear-gradient(180deg, #1a160a, #312a19); box-shadow: 0 0 0 1.5px #c99a34, inset 0 0 0 2px #544018; }
.cls-chips button.active { color: #4a2e00; background: linear-gradient(180deg, #fff1b0, #f7cf55 55%, #e2a92a); box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 2px 0 #fffbe6; }
.shop-right .shop-cards { max-height: 340px; }
/* item details: tooltip card lines + the selected-item panel */
.tt-card { color: #8fe3a0; font-size: 11px; }
.tt-slots { margin-top: 3px; color: #d8c8a0; }
.sel-detail { font-size: 12px; line-height: 1.5; }
.sel-detail .tt-name { font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 6px; border-bottom: 1.5px solid #e6cd8a; padding-bottom: 3px; margin-bottom: 3px; }
.sel-detail .tt-card { color: #9be098; }
.sel-detail .tt-slots { color: #e3caa0; }
.sel-detail .tt-name { text-shadow: -1px -1px 0 #3a2808, 1px -1px 0 #3a2808, -1px 1px 0 #3a2808, 1px 1px 0 #3a2808; }
.tt-cls { margin: 2px 0; font-size: 12px; }
.tt-cls .ok { color: #7ee07a; font-weight: 800; } .tt-cls .no { color: #ff7a7a; font-weight: 800; }
.tt-cls b.me { color: #ffd84a; }
.sel-detail .tt-cls .ok { color: #9be098; } .sel-detail .tt-cls .no { color: #e08e93; } .sel-detail .tt-cls b.me { color: #ffa721; }
/* item guide */
.book-top { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.book-top input { width: 100%; }
.book-list { display: flex; flex-direction: column; gap: 6px; max-height: 58vh; overflow-y: auto; padding: 2px; }
.book-row { display: grid; grid-template-columns: 50px 1fr; gap: 8px; align-items: start; padding: 6px; border-radius: 12px;
  background: linear-gradient(180deg, #1a160a, #282215); box-shadow: 0 0 0 1.5px #d4b060, inset 0 0 0 2px #544018; }
.book-row .item-cell { height: 46px; cursor: var(--cur); }
.book-info b { color: #edd9ba; }
.book-src { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.book-src .src { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #241e0e; box-shadow: inset 0 0 0 1px #e0c880; color: #f1d8af; }
.book-src .src small { color: var(--muted); font-weight: 600; }
.book-src .src i { font-style: normal; color: #ffa721; font-weight: 800; }
.book-src .src.shop { background: #1a2114; } .book-src .src.cash { background: #0c1521; } .book-src .src.quest { background: #170c20; }
.q-item { white-space: nowrap; } .q-item img.ico { width: 22px; height: 22px; }
.book-tiers { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.book-tier { display: grid; grid-template-columns: 26px auto 1fr; column-gap: 6px; align-items: center; font-size: 12px; padding: 3px 6px; border-radius: 8px; background: #1c160b; box-shadow: inset 0 0 0 1px #ecd9a8; }
.book-tier .bt-ic img.ico { width: 24px; height: 24px; }
.book-tier b { text-shadow: -1px -1px 0 #3a2808, 1px -1px 0 #3a2808, -1px 1px 0 #3a2808, 1px 1px 0 #3a2808; }
.book-tier small { color: var(--muted); font-weight: 700; }
.book-tier .bt-st { grid-column: 2 / -1; color: #afdeab; font-weight: 700; }
.book-tier .bt-maps { grid-column: 2 / -1; color: #e3caa0; font-size: 11px; }
/* party frame: member cards */
#party-frame { width: 236px; }
#party-frame .pm { display: grid; grid-template-columns: 46px 1fr; gap: 7px; align-items: center; padding: 5px 8px 6px 5px; }
#party-frame .pm.dead { filter: grayscale(.9); opacity: .7; }
.pm-face { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #fffdf0, #f5dc92 60%, #d9a73c); box-shadow: 0 0 0 1.5px #9a6e1c, 0 0 0 3px #f3d67c; }
.pm-face img { width: 60px; height: 60px; image-rendering: pixelated; margin-top: 6px; }
.pm-info { min-width: 0; }
.pm-name { display: flex; align-items: center; gap: 2px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #edd9ba; }
.pm-lead { font-size: 12px; margin-right: 2px; }
.pm-cls { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: #e3caa0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-cls img.ico { width: 16px; height: 16px; }
.pm-map { color: #6092d4; }
#party-frame .pm .pm-bar { height: 8px; margin-top: 3px; }
#party-frame .pm .pm-bar.sp { height: 5px; margin-top: 2px; }
@media (max-width: 720px) { #party-frame { width: 180px; } .pm-face { width: 34px; height: 34px; } #party-frame .pm { grid-template-columns: 34px 1fr; } }
.pw-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.pw-card { display: grid; grid-template-columns: 58px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 12px;
  background: linear-gradient(180deg, #1a160a, #282215); box-shadow: 0 0 0 1.5px #d4b060, inset 0 0 0 2px #544018; }
.pw-card.me { box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 0 0 2.5px var(--gold); }
.pw-card.dead { filter: grayscale(.9); opacity: .7; }
.pm-face.big { width: 56px; height: 56px; } .pm-face.big img { width: 72px; height: 72px; }
.pw-card .pm-bar { height: 8px; margin-top: 3px; } .pw-card .pm-bar.sp { height: 5px; }
/* guild window */
.g-head { display: flex; align-items: center; gap: 10px; }
.g-crest { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 30px; background: var(--cell); box-shadow: var(--cell-rim); }
.g-name { font-size: 20px; font-weight: 800; color: #f2d9b3; }
.g-notice { padding: 6px 10px; border-radius: 10px; background: var(--well); box-shadow: inset 0 0 0 1.5px var(--line); white-space: pre-wrap; }
.g-list { display: flex; flex-direction: column; gap: 4px; max-height: 42vh; overflow-y: auto; }
.g-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 10px; background: linear-gradient(180deg, #1a160a, #282215); box-shadow: 0 0 0 1px #e0c880; }
.g-row.off { opacity: .6; }
.g-dot { width: 9px; height: 9px; border-radius: 50%; background: #b8a888; }
.g-dot.on { background: #3fcf5e; box-shadow: 0 0 5px #3fcf5e; }
.g-who { min-width: 0; font-size: 13px; }
.g-who .muted { font-size: 11px; }
.g-rank { font-size: 10px; font-weight: 800; padding: 0 7px; border-radius: 999px; background: #322c1c; color: #f0d9ab; }
.g-rank.leader { background: linear-gradient(180deg, #fff1b0, #f7cf55); } .g-rank.officer { background: #0e1824; color: #447ed5; }
.g-acts { display: flex; gap: 3px; }

/* party frame kick + target frame close */
#party-frame .pm { position: relative; }
.pm-kick { position: absolute; right: 3px; top: 3px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 6px; font-size: 10px; font-weight: 800; line-height: 18px;
  color: #fff; background: linear-gradient(180deg, #492623, #c8363f); box-shadow: 0 0 0 1px #7a2a24; cursor: var(--cur-hover); opacity: .8; }
.pm-kick:hover { opacity: 1; }
#target-frame { position: absolute; }
#tf-close { position: absolute; right: 6px; top: 6px; z-index: 2; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 7px; font-size: 11px; font-weight: 800; color: #f0d9ab;
  background: linear-gradient(180deg, #1a160a, #312a19); box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 0 0 2px #544018; cursor: var(--cur-hover); }
#tf-close:hover { color: #e36771; }
/* party frame header */
.pf-head { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 12px;
  background: linear-gradient(180deg, #fff6d0, #f3d67c); box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 1px 0 #fffbe6; }
.pf-title { font-weight: 800; font-size: 13px; color: #f4dfbe; white-space: nowrap; }
.pf-title small { font-weight: 700; color: #e3caa0; }
.pf-loot { flex: 1; min-width: 0; font-size: 11px; font-weight: 700; color: #f0d9ab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-gear { flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; font-size: 15px; line-height: 26px; cursor: var(--cur-hover); color: #f2d9b3;
  background: linear-gradient(180deg, #1a160a, #312a19); box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 0 0 2px #544018; transition: transform .2s; }
.pf-gear:hover { transform: rotate(60deg); }

/* target frame: 6 social buttons in a grid */
#tf-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 6px; }
#tf-actions .btn { padding: 3px 4px; font-size: 11px; white-space: nowrap; }
#tf-actions .hidden { display: none !important; }
/* whispers */
#chat-log .c-whisper, #chat-log .c-whisper b, #chat-log .c-whisper .tag { color: #df81b1; }
#chat-log .reply { cursor: var(--cur-hover); } #chat-log .reply:hover { background: #210c18; }
/* trade window */
.tr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-side { padding: 8px; border-radius: 12px; background: var(--well); box-shadow: 0 0 0 1.5px #d4b060, inset 0 0 0 2px #544018; }
.tr-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 800; color: #edd9ba; margin-bottom: 6px; }
.tr-st { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: #322c1c; color: #f0d9ab; }
.tr-st.lock { background: #0e1824; color: #447ed5; } .tr-st.ok { background: #1a2416; color: #9be098; }
.tr-offer { min-height: 112px; max-height: 170px; }
.tr-bag { max-height: 150px; }
@container (max-width: 560px) { .tr-grid { grid-template-columns: 1fr; } }

/* ranking */
.rk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.rk-top .tabs-inline { margin: 0; }
.rk-top select { padding: 5px 10px; border-radius: 10px; border: 0; font-weight: 800; color: #f2d9b3; background: linear-gradient(180deg, #1a160a, #312a19); box-shadow: 0 0 0 1.5px #c99a34; }
.rk-head, .rk-row { display: grid; grid-template-columns: 46px 40px 1fr 110px 100px; gap: 6px; align-items: center; }
.rk-head { font-size: 11px; font-weight: 800; color: var(--muted); padding: 0 8px 4px; }
.rk-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
.rk-row { padding: 4px 8px; border-radius: 10px; font-size: 13px; background: linear-gradient(180deg, #1a160a, #282215); box-shadow: 0 0 0 1px #e0c880; }
.rk-row.top1 { background: linear-gradient(90deg, #453b1a, #292410); box-shadow: 0 0 0 1.5px #c99422, 0 0 8px #ffd84a88; }
.rk-row.top2 { background: linear-gradient(90deg, #171a1f, #101215); box-shadow: 0 0 0 1.5px #9aa4b4; }
.rk-row.top3 { background: linear-gradient(90deg, #3c2c1c, #241910); box-shadow: 0 0 0 1.5px #b0703a; }
.rk-row.me { outline: 2px solid #3a8ad0; }
.rk-no { text-align: center; font-weight: 800; font-size: 15px; color: #f2d9b3; }
.rk-face { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #fffdf0, #f5dc92 60%, #d9a73c); box-shadow: 0 0 0 1.5px #9a6e1c; }
.rk-face img { width: 48px; height: 48px; image-rendering: pixelated; margin-top: 5px; }
.rk-name { font-weight: 800; color: #edd9ba; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-cls { display: flex; align-items: center; gap: 3px; font-size: 12px; color: #f0d9ab; white-space: nowrap; }
.rk-cls img.ico { width: 18px; height: 18px; }
.rk-val { text-align: right; font-weight: 800; color: #f4dfbe; white-space: nowrap; }
img.ico.crown { width: 20px; height: 20px; vertical-align: -4px; }
img.ico.crown.big { width: 34px; height: 34px; }
.crown-emo.big { font-size: 24px; }
@container (max-width: 420px) { .rk-head, .rk-row { grid-template-columns: 34px 30px 1fr 70px; } .rk-head span:nth-child(4), .rk-cls { display: none; } }

/* premium */
img.ico.prem-badge { width: 26px; height: 17px; vertical-align: -3px; }
.prem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prem-card { position: relative; padding: 12px; border-radius: 16px; text-align: center; color: #eef4ff;
  background: radial-gradient(ellipse at 50% 0%, #4a6aa0, #1a2a4a 70%); box-shadow: 0 0 0 1.5px #0a1430, inset 0 0 0 2px #9ab8e8, 0 6px 14px #0005; }
.prem-card.gold { color: #fff6d8; background: radial-gradient(ellipse at 50% 0%, #b07a1a, #3a2408 70%); box-shadow: 0 0 0 1.5px #2a1a04, inset 0 0 0 2px #ffd84a, 0 6px 14px #0005; }
.prem-card.on { outline: 3px solid #7ee07a; }
img.ico.prem-big { width: 96px; height: 64px; filter: drop-shadow(0 0 8px #fff8); }
.prem-name { font-size: 18px; font-weight: 800; margin: 2px 0 6px; text-shadow: 0 2px 4px #0008; }
.prem-card ul { list-style: none; margin: 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 3px; }
.prem-card li { display: flex; gap: 6px; align-items: center; padding: 3px 8px; border-radius: 8px; font-weight: 700; font-size: 13px; background: #0006; box-shadow: inset 0 0 0 1px #33333330; }
.prem-price { margin-top: 8px; font-size: 22px; font-weight: 800; text-shadow: 0 2px 4px #0008; }
.prem-price small { font-size: 12px; opacity: .8; }
.prem-active { margin-top: 4px; font-weight: 800; color: #9fef9a; }
.prem-note { margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center; }
@container (max-width: 420px) { .prem-grid { grid-template-columns: 1fr; } }

/* gem currency icon inside prices / buttons */
.shop-card .price i.gem-ico, .shop-ete i.gem-ico, .src i.gem-ico, .btn i.gem-ico { width: 11px; height: 11px; margin: 0 4px 0 2px; vertical-align: 0; }

/* item shop packs */
.shop-card .packs { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.shop-card .pack { position: relative; width: 100%; }
.shop-card .pack s { opacity: .6; font-size: 10px; }
.shop-card .pack .off { position: absolute; top: -6px; left: -4px; padding: 0 5px; border-radius: 6px; font-size: 10px; color: #fff; background: #e03a3a; box-shadow: 0 1px 2px #0006; }

/* GEM packages */
.ward-tabs .gem-tab { color: #6395e5; }
.gp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gp-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 8px; border-radius: 14px; text-align: center;
  background: radial-gradient(ellipse at 50% 30%, #3a3020, #120c04 75%); box-shadow: 0 0 0 1.5px #3a2808, inset 0 0 0 2px #e0b040, 0 4px 10px #0005; }
img.ico.gp-img { width: 80px; height: 80px; filter: drop-shadow(0 0 10px #6ac8ff88); }
.gp-amt { font-size: 22px; font-weight: 800; color: #fff; text-shadow: 0 2px 4px #000; }
.gp-amt i.gem-ico { width: 14px; height: 14px; margin-right: 4px; }
.gp-sub { font-size: 12px; color: #e8dcc0; min-height: 17px; }
.gp-sub b { color: #ffd84a; }
.gp-buy { width: 100%; margin-top: 4px; font-size: 16px; font-weight: 800; color: #ffe9a0; background: linear-gradient(180deg, #3a2a10, #1a1206); box-shadow: 0 0 0 1.5px #e0b040; }
.gp-note { margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center; }
@container (max-width: 480px) { .gp-grid { grid-template-columns: repeat(2, 1fr); } }

/* item shop: Others tab (3 per row) */
.shop-cards.other-grid { grid-template-columns: repeat(3, 1fr); max-height: none; overflow: visible; margin-top: 8px; }
@container (max-width: 480px) { .shop-cards.other-grid { grid-template-columns: repeat(2, 1fr); } }

/* mailbox */
#menu [data-win].has-badge, #more-panel [data-win].has-badge { position: relative; }
[data-win].has-badge::after { content: attr(data-badge); position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  font: 800 10px/16px sans-serif; color: #fff; background: #e03a3a; box-shadow: 0 0 0 1.5px #333333; pointer-events: none; }
.mail-dot { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; font-size: 10px; color: #fff; background: #e03a3a; }
.mail-list { display: flex; flex-direction: column; gap: 3px; max-height: 210px; overflow-y: auto; margin-top: 6px; }
.mail-row { display: grid; grid-template-columns: 26px 120px 1fr auto; gap: 6px; align-items: center; padding: 5px 8px; border-radius: 10px; cursor: var(--cur-hover); font-size: 13px;
  background: linear-gradient(180deg, #1a160a, #282215); box-shadow: 0 0 0 1px #e0c880; }
.mail-row.unread { font-weight: 800; box-shadow: 0 0 0 1.5px #c99422, inset 3px 0 0 #e03a3a; }
.mail-row.sel { box-shadow: 0 0 0 2px var(--gold), 0 0 8px #ffd84a88; }
.mail-row:hover { filter: brightness(1.04); }
.mail-from { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #edd9ba; }
.mail-from .sys { color: #da767e; }
.mail-prev { color: #d5c1a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.mail-date { font-size: 11px; color: var(--muted); font-weight: 400; }
.mail-detail { margin-top: 8px; padding: 10px; border-radius: 12px; background: var(--well); box-shadow: 0 0 0 1.5px #d4b060, inset 0 0 0 2px #544018; }
.mail-dh { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: #edd9ba; }
.mail-text { white-space: pre-wrap; word-break: break-word; font-size: 13px; color: #eedec3; min-height: 30px; }
.mail-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mail-att { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 10px; background: #201b0c; box-shadow: 0 0 0 1px #e0c880; font-size: 12px; }
.mail-att img.ico { width: 22px; height: 22px; }
.mail-atts.draft .mail-att { cursor: var(--cur-hover); } .mail-atts.draft .mail-att:hover { box-shadow: 0 0 0 1.5px #d03a2a; }
.mail-btns { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.mail-note { margin-top: 8px; font-size: 11px; color: var(--muted); text-align: center; }
.mail-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.mail-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 800; color: #f0d9ab; }
.mail-form input, .mail-form textarea { padding: 6px 10px; border-radius: 10px; border: 0; font: inherit; font-weight: 400; background: #1a160a; box-shadow: inset 0 0 0 1.5px #d4b060; resize: vertical; }
.mail-bag { max-height: 120px; overflow-y: auto; }
.mail-form .mail-gold { flex-direction: row; align-items: center; gap: 6px; }
.mail-gold input { width: 140px; }
.mail-send { display: flex; justify-content: space-between; align-items: center; }

/* item shop offer cards: amount pill, description, discount tag */
.shop-card.offer { position: relative; }
.shop-card .offer-amt { background: #0c141f; color: #447ed5; }
.shop-card .offer-desc { font-size: 11px; line-height: 1.35; color: #d5c1a3; min-height: 30px; padding: 0 2px; }
.shop-card .price s { font-size: 11px; opacity: .55; margin-left: 3px; }
.shop-card .off-tag { position: absolute; top: 6px; left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 800; color: #fff; background: #e03a3a; box-shadow: 0 1px 2px #0006; }

/* premium bought with Gems */
.prem-have { text-align: right; font-weight: 800; color: #6092d4; margin: -4px 0 6px; }
.prem-price i.gem-ico { width: 14px; height: 14px; margin-right: 4px; }
.prem-buy { width: 100%; margin-top: 8px; font-weight: 800; }

/* loading screen (before entering the game) */
#loading { position: fixed; inset: 0; z-index: 2147483100; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 40%, #241e0e, #3f361e 55%, #c99a34); }
#loading.hidden { display: none; }
.load-box { width: min(440px, calc(100vw - 32px)); text-align: center; }
.load-logo { font: 900 44px/1 Georgia, serif; letter-spacing: 4px; color: #eeb442; text-shadow: 0 2px 0 #fff8, 0 4px 10px #7a4a0055; }
.load-logo small { display: block; font-size: 16px; letter-spacing: 10px; margin-top: 4px; color: #dd981d; }
.load-title { margin: 22px 0 8px; font-weight: 800; color: #f2d9b3; }
.load-track { height: 16px; border-radius: 10px; overflow: hidden; background: #1c160b; box-shadow: 0 0 0 1.5px #9a6e1c, inset 0 2px 4px #0002; }
#load-bar { width: 0; height: 100%; border-radius: 10px; background: linear-gradient(180deg, #ffe58a, #e0a82a); box-shadow: inset 0 -2px 0 #0002; transition: width .15s; }
#load-pct { margin-top: 6px; font-size: 12px; font-weight: 800; color: #f0d9ab; }
#load-tip { margin-top: 18px; font-size: 13px; color: #f0d9ab; min-height: 18px; }

/* NPC shop: category tabs + short scrolling list */
.shop-tabs { margin: 6px 0; flex-wrap: wrap; }
.shop-list { max-height: min(340px, 42vh); overflow-y: auto; padding-right: 2px; }

/* pixel-art mouse cursor (blue arrow; gold over anything clickable) */
:root { --cur: url(../assets/cursor.png) 1 1, default; --cur-hover: url(../assets/cursor-hover.png) 1 1, pointer; }
html, body { cursor: var(--cur); }
button, a, select, label, summary, [data-win] { cursor: var(--cur-hover); }
button:disabled { cursor: var(--cur); }
input:not([type=checkbox]):not([type=radio]), textarea { cursor: text; }
#world.hover { cursor: var(--cur-hover); }

/* character creation (same title screen): the two novice models on lit pedestals; beside the name form on short screens */
.create-box { width: min(560px, calc(100vw - 48px)); padding: 22px 26px 14px; }
.create-title { font-size: 26px; margin: 0 0 4px; font-family: "Cinzel", "Sarabun", serif; letter-spacing: 1px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.create-title::before, .create-title::after { content: ""; flex: none; width: 40px; height: 12px;
  background: var(--diamond) right center / 12px 12px no-repeat, linear-gradient(90deg, transparent, #f2c64a) left center / calc(100% - 13px) 2px no-repeat; }
.create-title::after { transform: scaleX(-1); }
.title-screen .create-box > .tagline { margin: 0; color: #cdb88a; font-size: 13px; }
.create-models { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 16px; }
.cm { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 12px; border: 0; border-radius: 16px; color: var(--text);
  background: radial-gradient(ellipse at 50% 78%, rgba(242,198,74,.16), transparent 58%), linear-gradient(180deg, rgba(44,34,18,.9), rgba(14,11,7,.92));
  box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #5a4214, inset 0 0 0 1px rgba(242,198,74,.15); opacity: .62; filter: saturate(.6); transition: opacity .15s, box-shadow .15s, transform .15s, filter .15s; }
.cm:hover:not(.active) { opacity: .85; filter: none; }
.cm.active { opacity: 1; filter: none; box-shadow: 0 0 0 1.5px #000, 0 0 0 3.5px var(--gold), 0 0 22px #f2c64a77, inset 0 0 0 1px rgba(255,240,180,.35); transform: translateY(-3px); }
.cm-stage { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
/* the pedestal: a gold ring under the feet; the picked model also stands in a soft beam of light */
.cm-stage::before { content: ""; position: absolute; left: 50%; bottom: 7px; width: 112px; height: 30px; margin-left: -56px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,226,140,.22), transparent 70%); box-shadow: inset 0 0 0 2px rgba(201,162,74,.5), inset 0 0 0 5px rgba(0,0,0,.35), inset 0 0 0 6px rgba(201,162,74,.28); }
.cm.active .cm-stage { background: radial-gradient(ellipse 34% 62% at 50% 86%, rgba(255,234,160,.32), transparent 100%); }
.cm.active .cm-stage::before { box-shadow: inset 0 0 0 2px #f2c64a, inset 0 0 0 5px rgba(0,0,0,.3), inset 0 0 0 6px rgba(255,224,138,.6), 0 0 14px rgba(255,216,74,.55); animation: cmRing 1.8s ease-in-out infinite alternate; }
@keyframes cmRing { to { opacity: .55; } }
.cm-stage::after { content: ""; position: absolute; bottom: 14px; width: 90px; height: 18px; border-radius: 50%; background: radial-gradient(ellipse, #000a, transparent 70%); }
.cm-stage img { position: relative; z-index: 1; width: 150px; height: 150px; image-rendering: pixelated; }
.cm-lbl { font-weight: 800; font-size: 16px; padding: 2px 14px; border-radius: 999px; background: rgba(0,0,0,.4); }
.cm.active .cm-lbl { color: #ffe9a8; box-shadow: inset 0 0 0 1px rgba(242,198,74,.6); }
.cm-lbl .g-m { color: #6ab0ff; } .cm-lbl .g-f { color: #ff7ab8; }
.create-side { display: flex; flex-direction: column; }
#create-logout { margin-top: 4px; align-self: center; font-size: 13px; }
/* short screens (phones held sideways): tighter panel; the models beside the name form */
@media (max-height: 600px) {
  .title-screen .logo { font-size: 46px; } .title-screen .logo span { font-size: 14px; margin-top: 6px; }
  .title-screen .ts-brand .tagline { font-size: 13px; margin-top: 8px; }
  .title-screen .login-box { padding: 16px 20px 12px; }
  .title-screen .tabs { margin-bottom: 10px; } .title-screen .tabpane, .title-screen #form-create { gap: 8px; }
  .login-box .ts-field input { padding: 9px 12px 9px 38px; } .ts-go { padding: 9px 10px; }
  .title-screen .hint { margin-top: 8px; }
  .cm-stage, .cm-stage img { width: 112px; height: 112px; } .create-models { margin: 10px 0 8px; }
  .cm-stage::before { width: 86px; margin-left: -43px; height: 24px; } .cm-stage::after { width: 70px; bottom: 10px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .create-box { width: min(660px, calc(100vw - 48px)); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; align-items: center; }
  .create-box > .create-title, .create-box > .tagline { grid-column: 1 / -1; }
}

/* fashion costumes (any class) */
.shop-card .fash-pill { color: #3a1020; background: linear-gradient(180deg, #ffd6e6, #ff9cc4); }

/* ---------- touch controls (phones / tablets) — outside #ui so they keep finger size */
#touch { display: none; position: absolute; inset: 0; pointer-events: none; z-index: 5; }
@media (pointer: coarse) { #touch { display: block; } }
/* joystick: see-through so the world shows behind it; size / position set in main.js (layout) */
#stick { position: absolute; border-radius: 50%; pointer-events: auto; touch-action: none;
  background: radial-gradient(circle, rgba(242,198,74,.06) 0%, rgba(0,0,0,.16) 70%); box-shadow: 0 0 0 1.5px rgba(201,162,74,.38), inset 0 0 14px rgba(0,0,0,.25); }
#stick.on { box-shadow: 0 0 0 2px rgba(242,198,74,.75), 0 0 14px rgba(242,198,74,.35), inset 0 0 14px rgba(0,0,0,.3); }
#stick-knob { position: absolute; left: 50%; top: 50%; border-radius: 50%; opacity: .7;
  background: radial-gradient(circle at 40% 35%, #fff6c8, #f2bf3a 60%, #9a6a14); box-shadow: 0 0 0 1.5px rgba(0,0,0,.6), 0 3px 8px #0006; transition: transform .06s; }
#stick.on #stick-knob { transition: none; opacity: .9; }

/* phones / tablets: no backdrop blur behind panels (expensive on mobile GPUs); panels a touch more opaque instead */
@media (pointer: coarse) {
  .frame, .leafy, .win, .login-box, .death-box, .invite-pop { -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root { --panel: radial-gradient(ellipse at 50% 0%, rgba(42,33,18,.74) 0%, transparent 60%), linear-gradient(180deg, rgba(23,19,13,.7) 0%, rgba(16,13,9,.72) 60%, rgba(11,9,7,.76) 100%); }
}

/* graphics quality buttons */
.gfx-row { flex-wrap: wrap; }

/* loot log lines (chat 📦 tab) */
#chat-log .c-loot, #chat-log .c-loot .tag { color: #9fdc8a; }

/* chat tools (A- A+ fold) stay pinned right while the tab row scrolls */
#chat-tabs .chat-tools { position: sticky; right: 0; margin-left: auto; display: flex; gap: 4px; padding-left: 6px; background: linear-gradient(90deg, transparent, rgba(16,13,9,.95) 22%); }


/* ===================================================================== gilded skin (HUD, chat, hotbar, minimap, buffs, menu)
   dark panels with a double gold rim, gold diamonds on the side edges and 4-point sparkles in the corners.
   Sizes are the same as the earlier layout. */
:root {
  --orn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1l7 11-7 11-7-11z' fill='%23f6c94c' stroke='%23402800' stroke-width='1.5'/><path d='M12 6l3.6 6-3.6 6-3.6-6z' fill='%23fff4b8'/><path d='M12 9.2l1.7 2.8-1.7 2.8-1.7-2.8z' fill='%23c98a12'/></svg>");
  --spark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0l2.4 9.6L24 12l-9.6 2.4L12 24l-2.4-9.6L0 12l9.6-2.4z' fill='%23f6c94c' stroke='%23402800' stroke-width='.8'/><path d='M12 5l1.2 5.8L19 12l-5.8 1.2L12 19l-1.2-5.8L5 12l5.8-1.2z' fill='%23fff6c8'/></svg>");
  --orn-sides: var(--orn) 0 50% / 14px 14px no-repeat, var(--orn) 100% 50% / 14px 14px no-repeat;
  --orn-edges: var(--orn) 50% 0 / 14px 14px no-repeat, var(--orn-sides), var(--orn) 50% 100% / 14px 14px no-repeat;
  --sparks: var(--spark) 2px 2px / 15px 15px no-repeat, var(--spark) calc(100% - 2px) 2px / 15px 15px no-repeat, var(--spark) 2px calc(100% - 2px) / 15px 15px no-repeat, var(--spark) calc(100% - 2px) calc(100% - 2px) / 15px 15px no-repeat;
  --gild-rim: 0 0 0 1.5px #140b00, 0 0 0 3px #e0ac3a, 0 0 0 4.5px #7a5410, 0 0 0 5.5px #120b02, inset 0 0 0 1.5px #0a0603, inset 0 0 0 2.5px #c0902e, inset 0 0 0 3.5px #2a1c06, inset 0 0 20px rgba(242,198,74,.10), 0 8px 20px rgba(0,0,0,.6);
  --pill: linear-gradient(180deg, rgba(30,23,12,.78), rgba(12,9,4,.78));
  --pill-rim: 0 0 0 1px #000, 0 0 0 2.5px #d2a238, 0 0 0 3.5px #4a3008, inset 0 1px 0 rgba(255,236,170,.12);
  --well-dark: radial-gradient(circle at 50% 35%, rgba(44,33,18,.72), rgba(12,9,5,.72) 75%);
}
#hud, #chat, #hotbar-plate, #hotbar2-plate, #mm-box, #map-title { border-radius: 16px; box-shadow: var(--gild-rim); }
#hud::before, #hud::after, #chat::before, #chat::after, #hotbar-plate::before, #hotbar-plate::after { display: none; }

/* ---- HUD (440 wide, 104px portrait as before) */
#hud { background: var(--orn-sides), var(--sparks), var(--panel); }
.hud-portrait::before { left: -9px; top: -9px; width: 122px; height: 122px; z-index: 2;
  background: var(--orn) 50% 0 / 16px no-repeat, var(--orn) 0 50% / 16px no-repeat, var(--orn) 100% 50% / 16px no-repeat; filter: drop-shadow(0 2px 2px #000a); }
.hud-ring { background: var(--well-dark);
  box-shadow: 0 0 0 1.5px #120b02, 0 0 0 4px #e8b440, 0 0 0 5.5px #7a5410, 0 0 0 7px #120b02, inset 0 0 0 1.5px #000, inset 0 0 16px #000c; }
/* level banner with pointed ends and a diamond on each side */
#hud-lvbadge { margin-top: -14px; min-width: 92px; padding: 2px 20px; border-radius: 0; font-family: "Cinzel", "Sarabun", serif; font-size: 16px; font-weight: 800; color: #f6e6bb;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
  background: linear-gradient(180deg, #f2c64a, #8a5e14);
  box-shadow: none; text-shadow: 0 2px 2px #000; position: relative; }
#hud-lvbadge::before { content: ""; position: absolute; inset: 2px; z-index: -1; clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
  background: var(--orn) 6px 50% / 11px no-repeat, var(--orn) calc(100% - 6px) 50% / 11px no-repeat, var(--pill); }
.hud-top { gap: 5px; }
.hud-emblem { flex: none; width: 34px; height: 24px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 2px #000a); } /* premium wing (blank without premium) */
.hud-dia { flex: none; width: 9px; height: 9px; background: var(--orn) center / contain no-repeat; }
.hud-top #hud-name { display: none; }
.hud-chip { padding: 0 9px 0 6px; border-radius: 12px; color: #f4e3b8; background: var(--pill); box-shadow: var(--pill-rim); }
.hud-chip img.ico { width: 18px; height: 18px; image-rendering: pixelated; }
.hud-chip.money { color: #ffd84a; } .hud-chip.gem { color: #8fd0ff; }
.hud-lbl { color: #f4e3b8; background: var(--pill); box-shadow: var(--pill-rim); }
.hud-lbl img { width: 15px; height: 15px; image-rendering: pixelated; }
.hud-lbl.exp-lbl { background: none; box-shadow: none; }
.hud-lbl i.exp { color: #f4e3b8; background: var(--well-dark); box-shadow: var(--pill-rim); }
.bar { background: linear-gradient(180deg, #120d06, #050302); box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #c99a34, 0 0 0 3.5px #3a2808, inset 0 2px 5px #000c; }
.bar > span { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.bar.hp > div { background: linear-gradient(180deg, #ff8a8a, #e52a34 45%, #8a0c14); }
.bar.sp > div { background: linear-gradient(180deg, #9ad4ff, #2f7fe8 45%, #0f3a8a); }
.bar.jexp > div { background: linear-gradient(180deg, #e2b8ff, #9a4ee8 45%, #4a1a8a); } /* JOB: purple */
.bar.bexp > div { background: linear-gradient(180deg, #b8ffb0, #3fc85a 45%, #146a26); } /* EXP: green */

/* ---- chat */
#chat { background: var(--orn-sides), var(--sparks), var(--panel); }
#chat-tabs button { border-radius: 9px; color: #f4e3b8; background: var(--pill); box-shadow: var(--pill-rim); margin: 3px 0; }
#chat-tabs button.active { color: #3a2400; background: linear-gradient(180deg, #fff1b0, #f7cf55 55%, #d8991c); box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #f2c64a, 0 0 8px #f2c64a66; }
#chat-tabs .chat-tools { background: linear-gradient(90deg, transparent, rgba(16,13,9,.95) 18%); padding: 0 3px 0 8px; }
#chat-log { background: rgba(8,6,3,.5); box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #c99a34, 0 0 0 3.5px #3a2808, inset 0 0 12px #000c; margin: 3px 2px; }
#chat-log .c-system, #chat-log .c-system .tag { color: #a99cff; }
#chat-log .c-guild .tag, #chat-log .c-guild b { color: #8fb8ff; } #chat-log .c-guild { color: #c3d8ff; }
#chat-lang, #chat-input, #chat-bar .round, #chat-bar .round:first-of-type { color: #f4e3b8; background: var(--pill); box-shadow: var(--pill-rim); }
#chat-bar { margin-top: 3px; }
#chat-input:focus { box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #f2c64a, 0 0 10px #f2c64a66; }

/* ---- hotbar (main 1-9, upper 10-13) + quick potions; slots 54px as before */
#bottom-row { display: flex; align-items: flex-end; gap: 10px; }
#hotbar-col { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
#hotbar-plate { background: var(--orn-sides), var(--sparks), var(--panel); }
#hotbar2-plate { padding: 9px 16px; margin-right: 0; background: var(--orn-sides), var(--sparks), var(--panel); }
#hotbar, #hotbar2 { display: flex; gap: 7px; }
.slot { overflow: visible; background: var(--well-dark); box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #c99a34, 0 0 0 3.5px #3a2808, inset 0 0 10px #000c; }
.slot:has(img), .slot:has(.emo) { background: var(--well-dark); }
.slot:not(:has(img)):not(:has(.emo))::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; opacity: .55;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 0l2 8 8 2-8 2-2 8-2-8-8-2 8-2z' fill='%23c99a34'/></svg>") center / contain no-repeat; }
.slot .key { left: -5px; top: -6px; width: 20px; height: 20px; font-size: 10px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
.slot .key::before { inset: 2px; border-radius: 3px; background: linear-gradient(135deg, #ffe680, #f2b52a 55%, #a86c0c); box-shadow: 0 0 0 1px #3a2400; }
.slot .qty { right: 4px; bottom: 1px; font-size: 13px; font-weight: 900; }
.slot .cdv { border-radius: 12px; }
#hotbar-page button { background: linear-gradient(180deg, #fff1b0, #e7b23c); box-shadow: 0 0 0 1px #3a2400; }
#quick-pots { display: flex; gap: 8px; }
.qpot { position: relative; width: 66px; height: 78px; border: 0; padding: 4px 0 0; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--orn-sides), var(--sparks), var(--panel); box-shadow: var(--gild-rim); cursor: var(--cur-hover); }
.qpot img { width: 36px; height: 36px; image-rendering: pixelated; filter: drop-shadow(0 3px 3px #000a); }
.qpot b { font-family: "Cinzel", "Sarabun", serif; font-size: 12px; color: #fff; text-shadow: 0 2px 2px #000, 0 0 2px #000; }
.qpot .qn { position: absolute; right: 9px; top: 6px; font-size: 10px; font-weight: 900; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.qpot.empty img { filter: grayscale(1) brightness(.55); }
.qpot:hover { transform: translateY(-2px); } .qpot:active { transform: scale(.95); }

/* ---- minimap + map name + buffs */
#mm-box { position: absolute; right: 14px; top: 86px; padding: 9px; background: var(--orn-edges), var(--sparks), var(--panel); pointer-events: none; }
#mm-box #minimap { position: relative; right: auto; top: auto; display: block; border-radius: 6px; background: #0b0905; box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #c99a34; pointer-events: auto; }
#mm-box #online-count { position: absolute; right: 16px; bottom: 14px; top: auto !important; font-size: 11px; color: #f4e3b8; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
#map-title { top: 282px; right: 14px; padding: 6px 24px 7px; background: var(--orn-edges), var(--sparks), var(--panel); }
#map-name { color: #f6e6bb; }
#map-sub { color: #d8c79e; }
#buff-tray { top: 342px; gap: 9px; }
.buff { width: 44px; height: 48px; overflow: visible; background: var(--orn) 0 50% / 10px no-repeat, var(--orn) 100% 50% / 10px no-repeat, var(--well-dark);
  box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #c99a34, 0 0 0 3.5px #3a2808, 0 4px 8px #0008; }
.buff img.ico { width: 28px; height: 28px; margin-top: -10px; }
.buff .t { bottom: 2px; font-size: 11px; font-weight: 900; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.buff::before { border-radius: 10px; }

/* ---- top-right menu: framed tiles (same width as the old menu) with diamonds, icon, label underneath */
#menu { gap: 6px; }
#menu button { width: 66px; height: 74px; padding-top: 3px; border-radius: 10px; justify-content: center;
  background: var(--orn) 50% 0 / 12px no-repeat, var(--orn) 0 50% / 11px no-repeat, var(--orn) 100% 50% / 11px no-repeat, var(--well-dark);
  box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #d2a238, 0 0 0 3.5px #4a3008, inset 0 0 10px #000a, 0 4px 10px #0009; }
#menu .ic { width: 44px; height: 44px; } #menu .ic img { width: 44px; height: 44px; }
#menu .nm { margin-top: -2px; font-size: 11px; max-width: 62px; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.2px; }
#menu button.on { box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #f2c64a, 0 0 10px #f2c64a88, inset 0 0 10px #000a; }

/* ===================================================================== layout: bottom-left stack (chat above the hotbar), buffs under the HUD */
/* hotbar stack in the bottom centre (right of the chat when the screen is narrow); chat at the bottom left */
#chat { width: 520px; }
#bottom-row { bottom: 16px; left: max(calc(50% - 310px), 552px); display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
#hotbar-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
#buff-tray { left: 14px; right: auto; top: 166px; flex-direction: row; flex-wrap: wrap; align-content: flex-start; max-width: 440px; max-height: none; }

/* ===================================================================== combat panel (bottom right): gold rings, diamonds, pointed plates */
#combat { position: absolute; right: 14px; bottom: 14px; width: 356px; height: 368px; pointer-events: none; transform: scale(var(--cb-scale, 1)); transform-origin: 100% 100%; }
#combat button { position: relative; border: 0; padding: 0; background: none; pointer-events: auto; touch-action: none; cursor: var(--cur-hover); -webkit-tap-highlight-color: transparent; }
.cbtn, .cslot { display: flex; flex-direction: column; align-items: center; }
.cring { position: relative; display: grid; place-items: center; border-radius: 50%; transition: transform .08s;
  background: radial-gradient(circle at 50% 38%, rgba(52,39,18,.8), rgba(10,7,3,.86) 70%);
  box-shadow: 0 0 0 1.5px #000, 0 0 0 4px #e8b440, 0 0 0 5.5px #7a5410, 0 0 0 7px #120b02, inset 0 0 0 2px #000, inset 0 0 0 3.5px #b8862a, inset 0 0 16px #000c; }
.cring::before { content: ""; position: absolute; inset: -10px; pointer-events: none;
  background: var(--orn) 50% 0 / 15px no-repeat, var(--orn) 0 50% / 15px no-repeat, var(--orn) 100% 50% / 15px no-repeat; }
.small .cring { width: 54px; height: 54px; }
.mid .cring { width: 74px; height: 74px; }
.big .cring { width: 124px; height: 124px; }
.big .cring::before { inset: -12px; background: var(--orn) 50% 0 / 19px no-repeat, var(--orn) 0 50% / 19px no-repeat, var(--orn) 100% 50% / 19px no-repeat, var(--orn) 50% 100% / 19px no-repeat; }
.cic { display: grid; place-items: center; width: 64%; height: 64%; }
.cic svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 4px rgba(255,200,80,.35)) drop-shadow(0 2px 2px #000); }
.cbtn.press .cring, .cslot.press .cring { transform: scale(.92); }
/* pointed label plate with a diamond at each end */
.cplate { position: relative; z-index: 1; margin-top: -11px; padding: 2px 16px 3px; font-family: "Cinzel", Georgia, serif; font-weight: 800; font-size: 11px; letter-spacing: .5px; color: #fff3d0; text-shadow: 0 1px 2px #000;
  background: linear-gradient(180deg, #f2c64a, #8a5e14); clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
.cplate::before { content: ""; position: absolute; inset: 2px; z-index: -1; clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
  background: var(--orn) 4px 50% / 8px no-repeat, var(--orn) calc(100% - 4px) 50% / 8px no-repeat, linear-gradient(180deg, #1e170c, #0c0904); }
.mid .cplate { font-size: 12px; }
.big .cplate { margin-top: -15px; padding: 3px 26px 4px; font-size: 16px; }
.cb-top { position: absolute; right: 8px; top: 8px; display: flex; gap: 20px; }
.cb-combo-head { position: absolute; left: 6px; top: 84px; width: 66%; display: flex; align-items: center; }
.cb-combo-head .cplate { margin: 0; padding: 3px 22px 4px; font-size: 13px; }
.cline { position: relative; flex: 1; height: 2px; background: linear-gradient(90deg, #e8b440, #7a5410); }
.cline::after { content: ""; position: absolute; right: -6px; top: -5px; width: 12px; height: 12px; background: var(--orn) center / contain no-repeat; }
.cb-combo { position: absolute; left: 8px; right: 8px; top: 120px; display: flex; align-items: flex-start; justify-content: space-between; }
.cslot .cring { width: 62px; height: 62px; }
.cslot .cring::before { inset: -9px; background-size: 13px 13px; }
.cslot .cic { width: 72%; height: 72%; }
.cslot .cic img.ico { width: 100%; height: 100%; border-radius: 50%; image-rendering: pixelated; }
.cplus { font-size: 26px; font-weight: 900; color: rgba(201,154,52,.65); }
.cnum { position: relative; z-index: 1; margin-top: -12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: "Cinzel", Georgia, serif; font-weight: 800; font-size: 13px; color: #fff;
  background: radial-gradient(circle at 50% 35%, #2a1f10, #0c0905); box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #e8b440; }
.carrow { flex: none; width: 18px; height: 14px; margin-top: 24px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'><path d='M0 5h10V1l8 6-8 6V9H0z' fill='%23f2c64a' stroke='%23402800' stroke-width='.8'/></svg>") center / contain no-repeat; }
.ccd { position: absolute; right: -7px; bottom: 2px; min-width: 22px; height: 22px; padding: 0 3px; border-radius: 11px; display: none; place-items: center; font-weight: 900; font-size: 12px; color: #fff;
  background: radial-gradient(circle at 50% 35%, #4a4a4a, #111); box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #a8a8a8; }
.cooling .ccd { display: grid; }
.cooling .cic { filter: grayscale(.75) brightness(.6); }
.cbtn.on .cring, .cslot.next .cring { box-shadow: 0 0 0 1.5px #000, 0 0 0 4px #ffe27a, 0 0 0 5.5px #7a5410, 0 0 0 7px #120b02, inset 0 0 0 2px #000, inset 0 0 0 3.5px #e8b440, inset 0 0 18px rgba(255,200,80,.35), 0 0 22px 6px rgba(255,200,80,.6); }
.cslot.next .cring { animation: cbPulse .7s ease-in-out infinite alternate; }
@keyframes cbPulse { to { transform: scale(1.06); } }
.cslot.empty .cring { opacity: .9; }
.cb-bottom { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: flex-end; gap: 20px; }
.cb-bottom .mid { margin-bottom: 6px; }
/* dragging a skill from the skill window */
.sk-icon.draggable { cursor: grab; touch-action: none; }
.drag-ghost { position: fixed; z-index: 2147483600; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none; opacity: .9; filter: drop-shadow(0 0 8px #f2c64a); }
.drag-ghost img { width: 100%; height: 100%; }
.cslot.drop-over .cring, .slot.drop-over { box-shadow: 0 0 0 3px #fff3a8, 0 0 18px #f2c64a; }

/* very short screens (phones in landscape): drop the map name plate so the combat panel fits under the minimap */
@media (max-height: 499px) { #map-title { display: none; } }

/* COMBO plate is the rotation toggle */
#cb-combo { cursor: var(--cur-hover); pointer-events: auto; border: 0; }
#cb-combo.on { color: #3a2400; text-shadow: none; filter: drop-shadow(0 0 8px #f2c64a); }
#cb-combo.on::before { background: var(--orn) 4px 50% / 8px no-repeat, var(--orn) calc(100% - 4px) 50% / 8px no-repeat, linear-gradient(180deg, #fff1b0, #f7cf55 55%, #d8991c); }
#combat #cb-combo { background: linear-gradient(180deg, #f2c64a, #8a5e14); padding: 3px 22px 4px; font-size: 13px; color: #fff3d0; }
#combat #cb-combo.on { color: #3a2400; }

/* ===================================================================== performance
   HUD / target bars fill with transform: scaleX (set in ui.js): it animates on the compositor, no layout or repaint */
#hud .bar > div, #target-frame .bar > div { width: 100%; transform: scaleX(0); transform-origin: 0 50%; transition: transform .2s; will-change: transform; }
/* the world canvas takes every touch itself (tap to move, two-finger zoom): no browser pan / double-tap zoom handling */
#world { touch-action: none; }

/* ---- quick potions: Q / E key badges, auto potion button between them, auto threshold tag */
#quick-pots { gap: 5px; align-items: center; }
.qpot .qkey, .ap-name .qkey { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; font-style: normal; font-size: 11px; font-weight: 900; color: #3a2400;
  background: linear-gradient(135deg, #ffe680, #f2b52a 55%, #a86c0c); box-shadow: 0 0 0 1px #3a2400, 0 1px 3px #000a; }
.qpot .qkey { position: absolute; top: -6px; z-index: 2; }
#q-hp .qkey { left: -6px; } #q-sp .qkey { right: -6px; }
.qpot .qn { right: 6px; top: 19px; font-size: 11px; }
.qpot .qa { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); padding: 0 4px; border-radius: 6px; font-size: 9px; font-weight: 900; line-height: 13px; white-space: nowrap;
  color: #d8ffcc; background: rgba(20,70,16,.85); box-shadow: 0 0 0 1px #5fd04a; }
.qpot .qa:empty { display: none; }
/* auto potion: a slim card between HP and MANA — a red / blue bottle with the auto arrows round it, a status light */
#q-auto { position: relative; width: 50px; height: 78px; border: 0; padding: 6px 0 4px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--orn-sides), var(--sparks), var(--panel); box-shadow: var(--gild-rim); cursor: var(--cur-hover); }
#q-auto svg { width: 38px; height: 38px; overflow: visible; filter: drop-shadow(0 2px 2px #000a); }
#q-auto b { font-family: "Cinzel", Georgia, serif; font-size: 10px; font-weight: 800; letter-spacing: .5px; color: #cdbb93; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
#q-auto .ap-spin { opacity: .45; } /* the arrows light up when it is on (no animation: the HUD stays still) */
#q-auto .ap-led { position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #4a3a28; box-shadow: 0 0 0 1px #000, inset 0 1px 1px #0008; }
#q-auto.on { box-shadow: var(--gild-rim), 0 0 10px 2px rgba(110,240,90,.4); }
#q-auto.on b { color: #b8ff9c; }
#q-auto.on .ap-spin { opacity: 1; }
#q-auto.on .ap-led { background: radial-gradient(circle at 40% 35%, #eaffd8, #5fe04a 60%, #2a8a1c); box-shadow: 0 0 0 1px #000, 0 0 6px #6eff52; }
#q-auto:hover { transform: translateY(-2px); }
#q-auto:active { transform: scale(.95); }
/* auto potion window */
.ap-row { padding: 8px 10px 10px; margin-bottom: 8px; border-radius: 10px; background: var(--cell); box-shadow: var(--cell-rim); }
.ap-row.on { box-shadow: var(--cell-rim), 0 0 0 1.5px #5fd04a; }
.ap-head { display: flex; align-items: center; justify-content: space-between; }
.ap-name { display: flex; align-items: center; gap: 8px; font-family: "Cinzel", Georgia, serif; font-weight: 800; font-size: 15px; }
.ap-row.hp .ap-name { color: #ff8a8a; } .ap-row.sp .ap-name { color: #8fc4ff; }
.ap-toggle { min-width: 64px; min-height: 30px; font-weight: 900; letter-spacing: .5px; }
.ap-toggle.btn { background: linear-gradient(180deg, #3a3a3a, #1c1c1c); color: #b8b8b8; box-shadow: 0 0 0 1.5px #6a6a6a, inset 0 1px 0 #ffffff22; text-shadow: none; }
.ap-row.on .ap-toggle.btn { background: linear-gradient(180deg, #7ef06a, #2f9a24); color: #0c2a06; box-shadow: 0 0 0 1.5px #1c5a12, inset 0 1px 0 #ffffff88, 0 0 10px rgba(110,240,90,.5); }
.ap-pct { margin: 8px 0 2px; font-size: 13px; } .ap-pct b { color: var(--gold); font-size: 15px; }
.ap-range { width: 100%; accent-color: #f2b52a; }
.ap-pots { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ap-pot { position: relative; width: 58px; height: 58px; border: 0; padding: 0; border-radius: 9px; display: grid; place-items: center; background: var(--well-dark, rgba(10,8,4,.7)); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14; cursor: var(--cur-hover); }
.ap-pot img { width: 40px; height: 40px; image-rendering: pixelated; }
.ap-pot span { position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-weight: 900; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.ap-pot.none img { filter: grayscale(1) brightness(.55); }
.ap-pot.sel { box-shadow: 0 0 0 1px #000, 0 0 0 3px #f2c64a, 0 0 10px #f2c64a; }
.ap-note { font-size: 11px; }
/* window titles stay on one line (the diamond rules beside them shrink instead) */
.win-head span { white-space: nowrap; flex-shrink: 0; }

/* ===================================================================== Auto Play (bot) window + AUTO ⚙ badge */
.cbtn .cgear { position: absolute; right: -8px; top: -8px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #3a2400;
  background: radial-gradient(circle at 40% 35%, #fff3b0, #e2a92a 70%); box-shadow: 0 0 0 1.5px #3a2400, 0 2px 4px #000a; pointer-events: auto; cursor: var(--cur-hover); }
.bot-head { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--cell); box-shadow: var(--cell-rim); }
.bot-wing { width: 92px; height: 80px; display: grid; place-items: center; }
.bot-wing img { width: 92px; height: 80px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(242,198,74,.55)); }
.bot-wing.free img { filter: grayscale(1) brightness(.75); }
.bot-state { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.bot-state small { color: var(--muted); font-size: 12px; }
.bot-state .bot-tier b { color: var(--gold); }
.bot-up { color: #8fd0ff; text-decoration: underline; cursor: var(--cur-hover); }
.bot-pill { min-width: 120px; padding: 5px 16px; border-radius: 9px; text-align: center; font-weight: 800; color: #f1e2b8; background: rgba(10,8,4,.75); box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #c99a34; }
.bot-pill.on { color: #c8ffb8; box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #5fd04a, 0 0 12px rgba(110,240,90,.45); }
.bot-go { min-width: 150px; padding: 12px 16px; border: 0; border-radius: 12px; font-size: 16px; font-weight: 900; color: #fff3d0; text-shadow: 0 1px 2px #000; cursor: var(--cur-hover);
  background: linear-gradient(180deg, #5a4214, #2a1d08); box-shadow: 0 0 0 1.5px #000, 0 0 0 3.5px #e0ac3a, 0 0 0 5px #5a3e0e, inset 0 1px 0 #fff3, 0 0 14px rgba(242,198,74,.35); }
.bot-go:hover { filter: brightness(1.12); }
.bot-go.on { background: linear-gradient(180deg, #7a1f1a, #3a0c08); box-shadow: 0 0 0 1.5px #000, 0 0 0 3.5px #e05a4a, 0 0 0 5px #4a1208, inset 0 1px 0 #fff3; }
.bot-hint { margin: 8px 2px 4px; font-size: 12px; color: var(--muted); }
.bot-sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 6px; padding: 6px 10px; border-radius: 8px; font-weight: 800; font-size: 15px;
  background: linear-gradient(90deg, rgba(90,66,20,.55), rgba(20,15,8,.2)); box-shadow: inset 0 -1.5px 0 #c99a34; }
.bot-sets { display: flex; align-items: center; gap: 5px; } .bot-sets small { color: var(--muted); font-weight: 600; margin-right: 2px; }
.bot-set { width: 28px; height: 28px; border: 0; border-radius: 7px; font-weight: 900; color: #f1e2b8; background: rgba(10,8,4,.8); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14; cursor: var(--cur-hover); }
.bot-set.sel { color: #3a2400; background: linear-gradient(180deg, #ffe680, #e2a92a); box-shadow: 0 0 0 1px #000, 0 0 0 2px #f2c64a, 0 0 8px #f2c64a; }
.bot-set.locked { font-size: 11px; opacity: .7; }
.bot-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bot-pick { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: var(--cell); box-shadow: var(--cell-rim); cursor: var(--cur-hover); }
.bot-pick input, .bot-opt input[type=checkbox] { width: 20px; height: 20px; accent-color: #e2a92a; flex: none; }
.bp-ico { width: 34px; height: 34px; display: grid; place-items: center; flex: none; }
.bp-ico img { width: 32px; height: 32px; image-rendering: pixelated; }
.bp-txt { display: flex; flex-direction: column; line-height: 1.25; } .bp-txt b { font-size: 13px; } .bp-txt small { font-size: 11px; color: var(--muted); }
.bot-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; margin-top: 5px; padding: 4px 10px; border-radius: 9px; background: var(--cell); box-shadow: var(--cell-rim); }
.bot-opt label { display: flex; align-items: center; gap: 10px; flex: 1; cursor: var(--cur-hover); font-weight: 600; }
.bot-opt.locked { opacity: .6; } .bot-opt.locked label { cursor: var(--cur); }
.bot-lock { font-size: 11px; color: #ffd98a; white-space: nowrap; }
.bot-have { display: flex; align-items: center; gap: 2px; font-size: 12px; color: var(--muted); } .bot-have img { width: 22px; height: 22px; image-rendering: pixelated; }
.bot-rng { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.bot-range { width: 76px; padding: 4px 8px; border: 0; border-radius: 7px; text-align: center; font-weight: 800; color: var(--text); background: rgba(10,8,4,.85); box-shadow: 0 0 0 1px #000, 0 0 0 2px #c99a34; }
.bot-range:disabled { opacity: .5; }
.bot-note { margin: 4px 2px 0; font-size: 11px; color: var(--muted); }
.bot-skills { display: flex; align-items: center; gap: 8px; }
.bot-sk { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(10,8,4,.8); box-shadow: 0 0 0 1px #000, 0 0 0 2.5px #c99a34; }
.bot-sk img { width: 34px; height: 34px; border-radius: 50%; image-rendering: pixelated; }
.bot-sk i { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 900;
  color: #fff; background: #120d06; box-shadow: 0 0 0 1.5px #e8b440; }
.bot-skills .btn { margin-left: auto; }

/* buff tooltip (hover a buff in the tray) */
#tooltip .tt-kind { margin-left: auto; padding: 0 6px; white-space: nowrap; flex: none; border-radius: 6px; font-size: 10px; font-weight: 800; color: #c8ffb8; background: rgba(20,70,16,.8); }
#tooltip .tt-kind.debuff { color: #ffc8c8; background: rgba(90,16,16,.8); }
#tooltip .tt-fx { font-size: 13px; line-height: 1.5; color: #f1e2b8; }
#tooltip .tt-left { margin: 4px 0 2px; font-weight: 700; color: var(--gold); }
#tooltip .tt-name .emo { font-size: 22px; }
.buff[data-st] { cursor: var(--cur-hover); }

/* ===================================================================== inventory (equipment view): side by side */
.inv-h { display: grid; grid-template-columns: 400px 1fr; gap: 12px; align-items: stretch; margin-top: 8px; }
.inv-l .doll { height: 100%; grid-template-columns: 74px 1fr 74px; grid-template-rows: auto 1fr; gap: 6px 10px; padding: 10px 12px 12px; }
.inv-l .doll-name { position: static; grid-column: 1 / -1; font-size: 15px; padding-bottom: 2px; }
.inv-l .doll-col { gap: 10px; justify-content: center; }
.inv-l .doll-col .item-cell { height: 72px; }
.inv-l .doll .item-cell img.ico { width: 40px; height: 40px; margin-top: 10px; }
.inv-l .doll .item-cell .slot-name { font-size: 10px; top: 4px; color: #f1e2b8; }
.inv-l .doll-center { height: auto; min-height: 300px; grid-template-rows: 1fr auto; align-content: center; }
.inv-l .doll-center img { width: 200px; height: 200px; align-self: end; }
.inv-l .doll-center::after { bottom: 92px; }
.doll-skins { position: relative; z-index: 1; display: flex; gap: 12px; justify-content: center; padding-top: 10px; }
.doll-skins .item-cell { width: 74px; height: 62px; }
.doll-skins .item-cell img { width: 40px; height: 40px; margin-top: 8px; object-fit: contain; image-rendering: pixelated; }
.doll-skins .item-cell .emo { font-size: 22px; margin-top: 8px; }
.inv-r { display: flex; flex-direction: column; min-width: 0; padding: 10px; border-radius: 16px; background: var(--well); box-shadow: 0 0 0 1.5px #d4b060, inset 0 0 0 2px #544018; }
.inv-r .inv-tabs { margin: 0 0 8px; }
.inv-r .items-grid { grid-template-columns: repeat(6, 1fr); gap: 8px; max-height: 360px; min-height: 300px; align-content: start; }
.inv-r .item-cell { height: 64px; }
.inv-r .item-cell img.ico { width: 46px; height: 46px; }
.inv-r .item-cell .qty { font-size: 13px; }
.inv-r .sel-panel { margin-top: 8px; }
.win .inv-foot { margin-top: 10px; padding: 8px 14px; gap: 14px; border-radius: 12px; font-size: 15px; background: var(--well); box-shadow: 0 0 0 1.5px #d4b060, inset 0 0 0 2px #544018; }
.inv-foot .inv-wt, .inv-foot .inv-gold { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.inv-foot .inv-wt img, .inv-foot .inv-gold img { width: 26px; height: 26px; image-rendering: pixelated; }
.inv-foot .inv-gold { color: #ffd84a; font-size: 17px; font-weight: 900; }
.win .inv-foot .wt { max-width: none; height: 14px; }

/* premium pass tile in the buff tray (wing icon) */
.buff.prem img.ico { width: 38px; height: 30px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 4px var(--c)); }

.prem-card .prem-lock { margin: 6px 0 2px; font-size: 12px; font-weight: 700; color: #ffb0a8; text-align: center; }

/* ===================================================================== Elemental Orbs */
.orb-ball { --oc: #ff4a2a; position: relative; display: inline-block; flex: none; width: 34px; height: 34px; border-radius: 50%; vertical-align: middle;
  background: radial-gradient(circle at 34% 28%, #fff 0 5%, color-mix(in srgb, var(--oc) 35%, #fff) 13%, var(--oc) 42%, color-mix(in srgb, var(--oc) 55%, #000) 78%, #050302 100%);
  box-shadow: 0 0 0 1.5px #2a1800, 0 0 0 3px #e8b440, 0 0 0 4px #6a4c14, 0 0 12px color-mix(in srgb, var(--oc) 75%, transparent); }
.orb-ball::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; mix-blend-mode: screen; opacity: .55;
  background: conic-gradient(from 30deg, transparent, color-mix(in srgb, var(--oc) 60%, #fff) 12%, transparent 30%, transparent 55%, color-mix(in srgb, var(--oc) 60%, #fff) 66%, transparent 85%); }
.orb-ball.big { width: 190px; height: 190px; box-shadow: 0 0 0 3px #2a1800, 0 0 0 7px #e8b440, 0 0 0 9px #6a4c14, 0 0 50px 10px color-mix(in srgb, var(--oc) 65%, transparent); animation: orbGlow 2.4s ease-in-out infinite alternate; }
.orb-ball.big::after { animation: orbSpin 9s linear infinite; }
@keyframes orbGlow { to { filter: brightness(1.18) saturate(1.15); } }
@keyframes orbSpin { to { transform: rotate(360deg); } }
.orb-wrap { display: grid; grid-template-columns: 270px 1fr 330px; gap: 12px; }
.orb-col { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: var(--well); box-shadow: 0 0 0 1.5px #d4b060, inset 0 0 0 2px #544018; min-width: 0; }
.orb-h { text-align: center; font-weight: 900; font-size: 18px; color: var(--gold); padding-bottom: 6px; border-bottom: 1.5px solid #c99a3466; }
.orb-h.big { font-size: 21px; color: #fff3d0; text-shadow: 0 0 10px var(--oc); }
.orb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.orb-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border: 0; border-radius: 10px; cursor: var(--cur-hover);
  background: rgba(10,8,4,.7); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14; color: var(--text); }
.orb-pick .orb-ball { width: 42px; height: 42px; margin-bottom: 3px; }
.orb-pick b { font-size: 13px; } .orb-pick small { font-size: 11px; color: var(--muted); }
.orb-pick.sel { box-shadow: 0 0 0 1px #000, 0 0 0 3px #f2c64a, 0 0 12px #f2c64a; }
.orb-tag { position: absolute; right: 5px; top: 4px; font-style: normal; font-size: 12px; font-weight: 900; color: #a6ff8f; }
.orb-tag.worn { color: #ffd84a; }
.orb-mid { align-items: center; }
.orb-stage { position: relative; height: 230px; width: 100%; display: grid; place-items: center; }
.orb-stage .orb-ball { z-index: 1; }
.orb-rune { position: absolute; bottom: 6px; width: 260px; height: 54px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--oc) 70%, #ffd84a);
  box-shadow: 0 0 22px color-mix(in srgb, var(--oc) 60%, transparent), inset 0 0 18px color-mix(in srgb, var(--oc) 50%, transparent); opacity: .8; }
.orb-sub { width: 100%; text-align: center; font-weight: 800; font-size: 14px; color: #f1e2b8; margin-top: 4px; }
.orb-slots { display: flex; gap: 12px; justify-content: center; }
.orb-slot { width: 74px; height: 74px; border-radius: 12px; display: grid; place-items: center; background: rgba(10,8,4,.75); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14; }
.orb-slot.cur { box-shadow: 0 0 0 1px #000, 0 0 0 3px #f2c64a, 0 0 12px #f2c64a88; }
.orb-slot.cur .orb-ball { width: 50px; height: 50px; }
.orb-slot.face img { width: 64px; height: 64px; image-rendering: pixelated; filter: grayscale(.4) brightness(.8); }
.orb-slot.star { font-size: 30px; color: #6a4c14; }
.orb-recipe { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.orb-recipe img { width: 40px; height: 40px; image-rendering: pixelated; }
.orb-recipe .orb-ball { width: 44px; height: 44px; }
.orb-arrow { color: var(--gold); font-size: 26px; }
.orb-need { font-size: 13px; color: #ffb0a8; } .orb-need.ok { color: #a6ff8f; }
.orb-btn { margin-top: 4px; min-width: 220px; padding: 12px 20px; border: 0; border-radius: 12px; font-size: 18px; font-weight: 900; color: #fff3d0; text-shadow: 0 1px 2px #000; cursor: var(--cur-hover);
  background: linear-gradient(180deg, #5a4214, #2a1d08); box-shadow: 0 0 0 1.5px #000, 0 0 0 3.5px #e0ac3a, 0 0 0 5px #5a3e0e, 0 0 14px rgba(242,198,74,.35); }
.orb-btn.off { background: linear-gradient(180deg, #3a3a3a, #1c1c1c); }
.orb-btn:disabled { opacity: .5; cursor: var(--cur); }
.orb-far { font-size: 12px; color: var(--muted); }
.orb-box { padding: 6px 10px; border-radius: 10px; background: rgba(10,8,4,.6); box-shadow: 0 0 0 1px #6a4c14; }
.orb-pas { padding: 5px 0; font-size: 14px; border-bottom: 1px solid #c99a3433; } .orb-pas:last-child { border: 0; }
.orb-lv { float: right; font-size: 11px; color: var(--muted); }
.orb-row { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px; border-radius: 10px; background: rgba(10,8,4,.6); box-shadow: 0 0 0 1px #6a4c14; font-size: 13px; }
.orb-row > span:first-child { flex: 1; } .orb-row b { color: #ffd84a; min-width: 56px; }
.orb-row.locked { opacity: .55; }
.orb-re { border: 0; padding: 5px 8px; border-radius: 8px; font-weight: 800; font-size: 12px; color: #fff; cursor: var(--cur-hover); white-space: nowrap;
  background: linear-gradient(180deg, #23406a, #10203a); box-shadow: 0 0 0 1px #000, 0 0 0 2px #e0ac3a; }
.orb-re:disabled { opacity: .5; }
.orb-note { margin-top: 4px; text-align: center; font-size: 12px; color: var(--muted); line-height: 1.6; }
.doll-skins .orb-ball { width: 38px; height: 38px; margin-top: 10px; }
.tf-el { font-size: 11px; font-weight: 800; margin-left: 4px; }

/* Elemental Orb art (PixelLab, 128px in a gold frame) */
.orb-img { display: inline-block; flex: none; width: 40px; height: 40px; vertical-align: middle; image-rendering: pixelated; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--oc) 70%, transparent)); }
.orb-img.big { position: relative; z-index: 1; width: 192px; height: 192px; animation: orbFloat 3s ease-in-out infinite alternate; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--oc) 80%, transparent)); }
@keyframes orbFloat { from { transform: translateY(4px); } to { transform: translateY(-6px); } }
.orb-pick .orb-img { width: 58px; height: 58px; }
.orb-slot.cur .orb-img { width: 62px; height: 62px; }
.orb-recipe .orb-img { width: 52px; height: 52px; }
.doll-skins .orb-img { width: 46px; height: 46px; margin-top: 8px; }
#tooltip .tt-name .orb-img { width: 34px; height: 34px; }

/* no long-press callout / image drag menu on phones and tablets */
body { -webkit-touch-callout: none; }
img { -webkit-user-drag: none; }

/* quantity picker (split a stack): drop / deposit / withdraw / sell / mail / trade */
#qty-pop { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; background: rgba(0,0,0,.45); }
#qty-pop .qty-box { width: 340px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.qty-head { display: flex; align-items: center; gap: 10px; }
.qty-head img { width: 42px; height: 42px; image-rendering: pixelated; }
.qty-head b { display: block; font-size: 16px; color: var(--gold); } .qty-head small { color: var(--muted); }
.qty-row { display: flex; align-items: center; gap: 6px; }
.qty-step { width: 42px; height: 34px; border: 0; border-radius: 8px; font-weight: 900; color: #f1e2b8; background: rgba(10,8,4,.8); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14; cursor: var(--cur-hover); }
.qty-in { flex: 1; min-width: 0; height: 34px; border: 0; border-radius: 8px; text-align: center; font-size: 18px; font-weight: 900; color: var(--gold); background: rgba(10,8,4,.9); box-shadow: 0 0 0 1px #000, 0 0 0 2px #c99a34; }
.qty-range { width: 100%; accent-color: #e2a92a; }
.qty-quick { display: flex; gap: 6px; } .qty-quick button { flex: 1; height: 30px; border: 0; border-radius: 8px; font-weight: 800; color: #f1e2b8; background: rgba(10,8,4,.8); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14; cursor: var(--cur-hover); }
.qty-btns { display: flex; justify-content: flex-end; gap: 8px; } .qty-btns .btn { min-width: 90px; }

/* target frame: boss fights left today */
.tf-boss { font-size: 11px; font-weight: 800; color: #ffd84a; margin-left: 4px; }
.tf-boss.out { color: #ff7a7a; }

/* event host: tabs, lollipop card, the six weekly boxes and their rewards (gold on black, like the event art) */
.ev-head { display: flex; align-items: center; gap: 12px; margin: -4px 0 10px; }
.ev-face { width: 64px; height: 64px; image-rendering: pixelated; border-radius: 50%; background: radial-gradient(circle, rgba(255,200,80,.45), rgba(255,170,40,0) 70%); }
.ev-tabs { display: flex; gap: 8px; flex: 1; }
.ev-tab { flex: 1; height: 38px; border: 0; border-radius: 10px; font-weight: 900; font-size: 15px; color: #f1e2b8; background: rgba(10,8,4,.85); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14; cursor: var(--cur-hover); }
.ev-tab.on { color: #1a1205; background: linear-gradient(#ffe08a, #d9a332); box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd76a, 0 0 14px rgba(255,200,80,.5); }
.ev-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.ev-left, .ev-right { display: flex; flex-direction: column; gap: 6px; }
.ev-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(10,8,4,.85); box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6420; }
.ev-item img, .ev-item .ico { width: 40px; height: 40px; image-rendering: pixelated; }
.ev-item b { display: block; color: var(--gold); font-size: 16px; } .ev-item small { color: #e9dcc0; font-size: 12px; }
.ev-have { margin-left: auto; font-weight: 800; color: #ffd76a; white-space: nowrap; }
.ev-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(10,8,4,.75); box-shadow: 0 0 0 1px #000, 0 0 0 2px #4d3812; }
.ev-row.hl, .ev-card.hl { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd76a, 0 0 12px rgba(255,200,80,.35); }
.ev-gift { font-size: 22px; } .ev-row b { color: #f1e2b8; min-width: 70px; }
.ev-count { color: #e9dcc0; font-weight: 800; } .ev-count.done { color: #7be07b; }
.ev-btn { margin-left: auto; min-width: 140px; padding: 4px 10px; border: 0; border-radius: 9px; font-weight: 900; color: #ffe9a8; background: linear-gradient(#3a2a10, #1c1408); box-shadow: 0 0 0 1px #000, 0 0 0 2px #c99a34; cursor: var(--cur-hover); display: flex; flex-direction: column; align-items: center; }
.ev-btn small { display: flex; align-items: center; gap: 4px; color: #f1e2b8; font-weight: 700; } .ev-btn small img { width: 18px; height: 18px; }
.ev-btn:disabled { opacity: .5; cursor: default; }
.ev-rtitle { text-align: center; font-weight: 900; color: var(--gold); padding: 6px; border-radius: 10px; background: rgba(10,8,4,.85); box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6420; }
.ev-card { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(10,8,4,.75); box-shadow: 0 0 0 1px #000, 0 0 0 2px #4d3812; }
.ev-card img, .ev-card .ico { width: 36px; height: 36px; image-rendering: pixelated; }
.ev-card b { display: block; color: var(--gold); } .ev-card small { display: block; color: #cbbd9c; font-size: 11px; } .ev-card span { color: #f1e2b8; font-weight: 700; }
.ev-foot { margin-top: 10px; text-align: center; color: #e9dcc0; font-size: 13px; } .ev-foot span { color: #6a4c14; margin: 0 8px; }
.ev-info { display: flex; flex-direction: column; gap: 8px; } .ev-info h3 { margin: 6px 0 0; color: var(--gold); } .ev-info p { margin: 0; color: #e9dcc0; }
@container (max-width: 460px) { .ev-body { grid-template-columns: 1fr; } .ev-right { display: none; } }

/* PK toggle: gold "PEACE" by default, burning red when PK is on */
.cb-top { gap: 14px; }
#cb-pk.pk-on .cring { box-shadow: 0 0 0 1.5px #000, 0 0 0 4px #ff5a3a, 0 0 0 5.5px #7a1a10, 0 0 0 7px #120202, inset 0 0 0 2px #000, inset 0 0 0 3.5px #ff7a3a, inset 0 0 18px rgba(255,80,40,.45), 0 0 22px 6px rgba(255,70,40,.6); }
#cb-pk.pk-on .cic svg text { fill: #ff4a2a; }
#cb-pk.pk-on .cplate { color: #ffd0c0; }
/* event box tooltip (hover a box) */
.ev-tip { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.ev-tip img, .ev-tip .ico { width: 36px; height: 36px; image-rendering: pixelated; }
.ev-tip b { display: block; color: var(--gold); } .ev-tip small { display: block; color: #cbbd9c; font-size: 11px; } .ev-tip span { color: #f1e2b8; font-weight: 700; }
.ev-row:hover { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd76a, 0 0 12px rgba(255,200,80,.35); }

/* 30-day login calendar (event host, Events tab): 10 x 3 cells, gold on black */
.lg-title { margin: 2px auto 0; width: fit-content; padding: 6px 34px; font-size: 22px; font-weight: 900; color: #ffd84a; text-shadow: 0 2px 0 #5a2d00, 0 0 12px rgba(255,190,60,.6);
  border-radius: 12px; background: rgba(10,8,4,.85); box-shadow: 0 0 0 1px #000, 0 0 0 2px #c99a34; }
.lg-sub { text-align: center; color: #f1e2b8; font-weight: 700; margin: 6px 0 10px; }
.lg-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; }
.lg-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 6px; border-radius: 9px; text-align: center;
  background: rgba(10,8,4,.82); box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6420; }
.lg-cell b { color: #fff3d0; font-size: 13px; } .lg-cell small { color: #e9dcc0; font-size: 11px; line-height: 1.15; min-height: 26px; }
.lg-cell img, .lg-cell .ico { width: 38px; height: 38px; image-rendering: pixelated; }
.lg-cell.big { box-shadow: 0 0 0 1px #000, 0 0 0 2px #d8462a, 0 0 10px rgba(255,90,40,.35); }
.lg-cell.last { background: radial-gradient(circle at 50% 45%, rgba(255,190,60,.45), rgba(10,8,4,.85) 70%); box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd76a, 0 0 18px rgba(255,200,80,.7); }
.lg-cell.last small { color: #ffd84a; font-weight: 800; }
.lg-cell.ready { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd76a, 0 0 16px rgba(255,200,80,.75); animation: lgPulse 1.4s ease-in-out infinite; }
@keyframes lgPulse { 50% { box-shadow: 0 0 0 1px #000, 0 0 0 2px #fff0a8, 0 0 24px rgba(255,210,90,.95); } }
.lg-cell.got { background: rgba(14,40,14,.85); box-shadow: 0 0 0 1px #000, 0 0 0 2px #4fbf4f; }
.lg-cell.got img, .lg-cell.got .ico { opacity: .55; }
.lg-done { position: absolute; top: 24px; font-size: 26px; color: #6dff6d; text-shadow: 0 0 2px #000, 0 2px 0 #0a3a0a; }
.lg-cell em { font-style: normal; font-size: 11px; font-weight: 800; color: #0d200d; background: #6dd06d; padding: 0 6px; border-radius: 6px; }
.lg-lock { position: absolute; right: 3px; bottom: 3px; font-size: 12px; opacity: .85; }
.lg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.lg-count { padding: 8px 18px; border-radius: 10px; font-weight: 900; color: #fff3d0; background: rgba(10,8,4,.85); box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6420; }
.lg-claim { min-width: 200px; height: 44px; border: 0; border-radius: 12px; font-size: 20px; font-weight: 900; color: #3a1d00; cursor: var(--cur-hover);
  background: linear-gradient(#ffe68a, #f0b33a 55%, #c7811c); box-shadow: 0 0 0 1px #000, 0 0 0 3px #ffd76a, 0 0 18px rgba(255,200,80,.6); }
.lg-claim:disabled { filter: grayscale(.8) brightness(.7); cursor: default; }
@container (max-width: 640px) { .lg-grid { grid-template-columns: repeat(5, 1fr); } }

/* login event icon (top-right, left of the minimap) */
#btn-login30 { position: absolute; right: 222px; top: 92px; width: 58px; height: 64px; border: 0; border-radius: 14px; cursor: var(--cur-hover); pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: radial-gradient(circle at 50% 35%, #5a3a10, #1c1408 75%); box-shadow: 0 0 0 1.5px #000, 0 0 0 3.5px #e8b440, 0 0 14px rgba(255,200,80,.45); }
#btn-login30 .l30-ic { font-size: 28px; line-height: 1; filter: drop-shadow(0 2px 2px #000); animation: l30Bob 2.2s ease-in-out infinite; }
#btn-login30 .l30-lb { font-size: 11px; font-weight: 900; color: #ffe08a; text-shadow: 0 1px 2px #000; }
#btn-login30 .l30-dot { position: absolute; right: -3px; top: -3px; width: 14px; height: 14px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 2px #000, 0 0 8px #ff3b3b; }
@keyframes l30Bob { 50% { transform: translateY(-3px) rotate(-6deg); } }
.lg-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 8px; }
.lg-head .lg-title { margin: 0; }

/* ---------------------------------------------------------------- Market (Market Broker): gold on black */
.mk-banner { position: relative; display: flex; align-items: center; justify-content: space-between; height: 76px; margin: -8px -8px 8px; padding: 0 14px; border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, rgba(10,6,2,.75), rgba(10,6,2,.15) 30%, rgba(10,6,2,.15) 60%, rgba(10,6,2,.7)), url(../assets/market_banner.png) center / cover, linear-gradient(#5a2a10, #1c0e06);
  image-rendering: pixelated; box-shadow: inset 0 -2px 0 #c99a34; }
.mk-logo { font-size: 30px; filter: drop-shadow(0 2px 2px #000); } .mk-logo b { font-family: "Cinzel", Georgia, serif; color: #ffe7a8; text-shadow: 0 2px 0 #5a2d00, 0 0 10px rgba(255,190,60,.6); }
.mk-wallet { display: flex; gap: 8px; }
.mk-chip { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 10px; font-weight: 900; color: #fff3d0; background: rgba(10,8,4,.88); box-shadow: 0 0 0 1px #000, 0 0 0 2px #c99a34; }
.mk-chip small { color: #cbbd9c; font-weight: 700; } .mk-chip.gem { color: #8fe3ff; } .mk-chip.btn-h { cursor: var(--cur-hover); }
.mk-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.mk-tab { flex: 0 1 260px; height: 42px; border: 0; border-radius: 10px; font-size: 16px; font-weight: 900; color: #f1e2b8; cursor: var(--cur-hover);
  background: rgba(10,8,4,.85); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14; }
.mk-tab.on { color: #fff1c0; background: linear-gradient(#5a3a10, #2a1a06); box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd76a, 0 0 14px rgba(255,200,80,.45); }
.mk-badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 8px; font-style: normal; font-size: 12px; color: #2a1a00; background: #ffd23b; }
.mk-buy3 { display: grid; grid-template-columns: 160px 1fr 300px; gap: 10px; }
.mk-sell2 { display: grid; grid-template-columns: 1fr 320px; gap: 10px; }
.mk-cats, .mk-mid, .mk-side { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: rgba(10,8,4,.6); box-shadow: 0 0 0 1px #000, 0 0 0 2px #4d3812; min-width: 0; }
.mk-rt { display: flex; align-items: center; justify-content: space-between; font-weight: 900; color: var(--gold); padding: 2px 4px 6px; border-bottom: 1px solid #4d3812; }
.mk-cat { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; font-weight: 800; text-align: left; color: #f1e2b8; background: transparent; cursor: var(--cur-hover); }
.mk-cat i { font-style: normal; width: 20px; text-align: center; } .mk-cat:hover { background: rgba(255,210,100,.08); }
.mk-cat.on { color: #fff1c0; background: linear-gradient(90deg, rgba(201,154,52,.45), rgba(201,154,52,.1)); box-shadow: inset 0 0 0 1.5px #c99a34; }
.mk-search { display: flex; gap: 6px; } .mk-search input, .mk-filters input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 0; border-radius: 9px; color: #fff3d0; background: rgba(0,0,0,.6); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14; }
.mk-sbtn { padding: 0 16px; border: 0; border-radius: 9px; font-weight: 900; color: #2a1a00; background: linear-gradient(#ffe08a, #d9a332); cursor: var(--cur-hover); }
.mk-filters { display: flex; gap: 6px; } .mk-filters select, .mk-kv select { height: 32px; padding: 0 8px; border: 0; border-radius: 9px; color: #fff3d0; background: rgba(0,0,0,.6); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chipb, .mk-radio { padding: 5px 12px; border: 0; border-radius: 9px; font-weight: 800; color: #f1e2b8; background: rgba(0,0,0,.55); box-shadow: 0 0 0 1px #000, 0 0 0 2px #4d3812; cursor: var(--cur-hover); display: inline-flex; align-items: center; gap: 4px; }
.mk-chipb.on, .mk-radio.on { color: #fff1c0; box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd76a, 0 0 10px rgba(255,200,80,.4); background: rgba(90,58,16,.7); }
.mk-curs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .mk-curs > span { font-weight: 800; color: #e9dcc0; }
.mk-th { display: grid; grid-template-columns: 1.6fr 1.1fr 0.9fr 90px; gap: 8px; padding: 6px 10px; font-weight: 900; color: #e9dcc0; border-radius: 9px; background: rgba(90,58,16,.35); }
.mk-th.mine { grid-template-columns: 1.6fr 0.8fr 0.5fr 0.9fr 90px; }
.mk-rows { display: flex; flex-direction: column; gap: 5px; min-height: 340px; }
.mk-row { display: grid; grid-template-columns: 44px 1.45fr 1.1fr 0.9fr 90px; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; cursor: var(--cur-hover);
  background: rgba(10,8,4,.82); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #4d3812; }
.mk-sell2 .mk-row { grid-template-columns: 44px 1.5fr 0.8fr 0.5fr 0.9fr 90px; }
.mk-row.sel { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd76a, 0 0 12px rgba(255,200,80,.35); }
.mk-ic img, .mk-ic .ico { width: 38px; height: 38px; image-rendering: pixelated; }
.mk-nm { display: flex; flex-direction: column; min-width: 0; } .mk-nm b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mk-nm small { color: #e8c96a; font-size: 11px; }
.mk-seller { font-size: 11px; color: #cbbd9c; display: flex; align-items: center; gap: 6px; } .mk-seller b.on, .mk-srow b.on { color: #7be07b; }
.mk-mini { padding: 2px 8px; border: 0; border-radius: 7px; font-size: 11px; font-weight: 800; color: #ffe9a8; background: rgba(0,0,0,.6); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #8a6420; cursor: var(--cur-hover); }
.mk-st { font-size: 12px; color: #f1e2b8; } .mk-st em { color: #ffd23b; font-style: normal; font-weight: 900; }
.mk-price { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; color: #ffe08a; white-space: nowrap; } .mk-price small { color: #cbbd9c; font-weight: 700; } .mk-price.gem { color: #8fe3ff; }
.mk-buy { height: 34px; border: 0; border-radius: 9px; font-weight: 900; color: #2a1a00; background: linear-gradient(#ffe08a, #d9a332); box-shadow: 0 0 0 1px #000, 0 0 0 2px #7a5410; cursor: var(--cur-hover); }
.mk-buy:disabled, .mk-big:disabled { filter: grayscale(.8) brightness(.7); cursor: default; }
.mk-pager { display: flex; align-items: center; justify-content: space-between; color: #cbbd9c; font-size: 12px; } .mk-pager > div { display: flex; gap: 4px; align-items: center; }
.mk-pg { min-width: 30px; height: 28px; border: 0; border-radius: 7px; font-weight: 800; color: #f1e2b8; background: rgba(0,0,0,.6); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #4d3812; cursor: var(--cur-hover); }
.mk-pg.on { color: #2a1a00; background: linear-gradient(#ffe08a, #d9a332); }
.mk-card { padding: 8px 10px; border-radius: 10px; background: rgba(10,8,4,.85); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #6a4c14; }
.mk-card small { display: block; color: #cbbd9c; font-size: 11px; } .mk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mk-kv { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; color: #e9dcc0; font-weight: 700; }
.mk-kv input { width: 140px; height: 30px; padding: 0 8px; border: 0; border-radius: 8px; color: #fff3d0; background: rgba(0,0,0,.6); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #6a4c14; }
.mk-kv select { max-width: 170px; } .mk-curpick { display: flex; gap: 4px; }
.mk-srow { display: flex; align-items: center; gap: 8px; } .mk-srow small { color: #9fcf9f; }
.mk-big { height: 48px; border: 0; border-radius: 12px; font-size: 19px; font-weight: 900; color: #3a1d00; cursor: var(--cur-hover);
  background: linear-gradient(#ffe68a, #f0b33a 55%, #c7811c); box-shadow: 0 0 0 1px #000, 0 0 0 3px #ffd76a, 0 0 16px rgba(255,200,80,.5); }
.mk-empty { padding: 30px 10px; text-align: center; color: #9a8a6a; }
.mk-note { font-size: 12px; margin: 2px 0; color: #cbbd9c; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; max-height: 470px; overflow-y: auto; padding: 2px; }
.mk-bag { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 0; border-radius: 9px; cursor: var(--cur-hover);
  background: rgba(10,8,4,.85); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #4d3812; color: #f1e2b8; }
.mk-bag img, .mk-bag .ico { width: 38px; height: 38px; image-rendering: pixelated; }
.mk-bag i { position: absolute; right: 4px; top: 3px; font-style: normal; font-size: 11px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px #000; }
.mk-bag small { font-size: 10px; line-height: 1.1; max-height: 22px; overflow: hidden; }
.mk-bag.sel { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd76a, 0 0 12px rgba(255,200,80,.4); }
.mk-type { font-weight: 800; font-size: 12px; } .mk-type.sell { color: #ff8a6a; } .mk-type.buy { color: #7ad0ff; }
.mk-q { color: #fff3d0; } .mk-exp { color: #ff8a8a; font-weight: 800; }
.mk-ord-h { display: flex; align-items: center; gap: 10px; } .mk-ord-h img, .mk-ord-h .ico { width: 42px; height: 42px; image-rendering: pixelated; } .mk-ord-h b { display: block; font-size: 17px; color: var(--gold); }
.mk-esc b { font-size: 18px; }
.mk-hist { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); z-index: 5; border-radius: 12px; }
.mk-hist-box { width: 620px; max-height: 70%; overflow-y: auto; padding: 10px; border-radius: 12px; background: #120c04; box-shadow: 0 0 0 1px #000, 0 0 0 2px #c99a34; }
.mk-hrow { display: grid; grid-template-columns: 130px 50px 1fr 140px 110px; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid #2c2010; font-size: 13px; color: #e9dcc0; }
.win-body:has(.mk-banner) { position: relative; }
@container (max-width: 900px) { .mk-buy3 { grid-template-columns: 1fr; } .mk-cats { flex-direction: row; flex-wrap: wrap; } .mk-sell2 { grid-template-columns: 1fr; } }
/* Market · City Tax page (ภาษีเมือง, client/js/citytax.js): the treasury's two cards, gold and Gems */
.ct-page { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(10,8,4,.6); box-shadow: 0 0 0 1px #000, 0 0 0 2px #4d3812; }
.ct-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid #4d3812; }
.ct-head small { color: #cbbd9c; font-size: 12px; }
.ct-title { font-family: "Cinzel", Georgia, serif; font-size: 22px; font-weight: 900; color: #ffe7a8; text-shadow: 0 2px 0 #5a2d00, 0 0 10px rgba(255,190,60,.45); }
.ct-castle { padding: 6px 12px; border-radius: 10px; font-weight: 800; color: #e9dcc0; background: rgba(10,8,4,.88); box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6420; } .ct-castle b { color: #ffd76a; }
.ct-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(rgba(60,38,10,.55), rgba(10,8,4,.9)); box-shadow: 0 0 0 1px #000, 0 0 0 2px #c99a34, 0 0 14px rgba(255,200,80,.18); }
.ct-card.gem { background: linear-gradient(rgba(14,48,70,.55), rgba(6,10,14,.9)); box-shadow: 0 0 0 1px #000, 0 0 0 2px #4aa8d8, 0 0 14px rgba(110,200,255,.18); }
.ct-card-h { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 900; color: #ffe08a; } .ct-card.gem .ct-card-h { color: #8fe3ff; }
.ct-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .ct-kv small { color: #cbbd9c; font-size: 12px; font-weight: 700; }
.ct-rate { font-size: 40px; line-height: 1; font-weight: 900; color: #ffe08a; text-shadow: 0 2px 0 #000; } .ct-rate i { margin-left: 2px; font-style: normal; font-size: 22px; } .ct-card.gem .ct-rate { color: #8fe3ff; }
.ct-fund .mk-price { font-size: 18px; }
.ct-edit { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255,215,106,.18); font-weight: 800; color: #e9dcc0; }
.ct-edit input { width: 110px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; font-weight: 900; color: #fff3d0; background: rgba(0,0,0,.6); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #6a4c14; }
.ct-notes p { margin: 3px 0; font-size: 13px; color: #e9dcc0; }
.ct-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .ct-foot small { color: #cbbd9c; } .ct-save { padding: 0 26px; }
.ct-lock { margin: 0; text-align: center; color: #9a8a6a; font-weight: 700; }
@container (max-width: 900px) { .ct-cards { grid-template-columns: 1fr; } }

/* phones: the windows' tall lists scroll inside the window, buttons never squeeze past their box */
.win-head { flex: 0 0 auto; } .win-body { flex: 1 1 auto; }
.win button { min-width: 0; }
.lg-cell small, .mk-nm b, .ev-row b { overflow-wrap: anywhere; }

/* Settings: gold sections with icon rows */
.st-sec { margin-bottom: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(10,8,4,.6); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14; }
.st-h { margin: -2px -2px 8px; padding: 4px 8px; border-radius: 8px; font-weight: 900; color: var(--gold); background: linear-gradient(90deg, rgba(201,154,52,.35), rgba(201,154,52,0)); }
.st-acc { display: flex; align-items: center; gap: 10px; } .st-acc > div { flex: 1; min-width: 0; } .st-acc b { display: block; color: #fff3d0; } .st-acc small { color: #cbbd9c; }
.st-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-weight: 900; font-size: 18px; color: #2a1a00; background: linear-gradient(#ffe08a, #d9a332); box-shadow: 0 0 0 2px #000; }
.st-row { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 2px 0; border-bottom: 1px solid rgba(201,154,52,.15); }
.st-row.col { border-bottom: 0; min-height: 26px; }
.st-ic { width: 22px; text-align: center; } .st-lb { flex: 1; min-width: 0; color: #f1e2b8; font-weight: 700; font-size: 13px; }
.st-ctl { display: flex; align-items: center; gap: 6px; }
.st-ctl select { min-width: 132px; height: 28px; padding: 0 6px; border: 0; border-radius: 8px; color: #fff3d0; background: rgba(0,0,0,.6); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #8a6420; }
.st-ctl input[type=range] { width: 110px; accent-color: #e2a92a; } .st-ctl b { min-width: 42px; color: #ffe08a; text-align: right; }
.st-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 6px; padding: 0 4px 6px 30px; } .st-grid .chk { font-size: 12px; margin: 0; }
.st-note { font-size: 11px; margin: 4px 0 2px; }
#fps-meter { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); padding: 2px 8px; border-radius: 8px; font: 800 12px/1.4 monospace; color: #9dff9d; background: rgba(0,0,0,.55); pointer-events: none; z-index: 5; }

/* Refine (item upgrade): the chosen item's upgrade on the left, the refinable gear on the right */
.rf { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; }
/* the gear list is as tall as the upgrade panel and scrolls inside it */
.rf-pick { contain: size; }
@container (max-width: 760px) { .rf { grid-template-columns: 1fr; } .rf-pick { contain: none; } .rf-pick .rf-rows { flex: none; max-height: 360px; } }
.rf-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border-radius: 14px; background: rgba(10,8,4,.62); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14, inset 0 0 22px rgba(0,0,0,.55); }
.rf-empty { display: grid; place-items: center; min-height: 300px; padding: 20px; text-align: center; font-weight: 700; color: var(--muted); }
.rf-head { padding: 2px 6px 8px; border-radius: 10px; text-align: center; border-bottom: 1px solid rgba(201,154,52,.25); }
.rf-name { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 900; }
.rf-step { margin-top: 2px; font-family: "Cinzel", Georgia, serif; font-size: 32px; font-weight: 900; line-height: 1.15; color: #ffe08a; text-shadow: 0 2px 0 #5a2d00, 0 0 14px rgba(255,190,60,.55); }
.rf-step i { margin: 0 12px; font-style: normal; font-size: 24px; vertical-align: 4px; color: #ffd76a; }
.rf-step span { font-family: "Sarabun", sans-serif; font-size: 22px; }
.rf-head.rf-ok { animation: rfOk 1.2s ease-out; } .rf-head.rf-bad { animation: rfBad .7s ease-out; }
@keyframes rfOk { 0% { background: rgba(143,255,154,.35); box-shadow: 0 0 24px rgba(143,255,154,.6); } 100% { background: transparent; box-shadow: none; } }
@keyframes rfBad { 0% { background: rgba(255,90,90,.35); } 10%, 30% { transform: translateX(-5px); } 20%, 40% { transform: translateX(5px); } 50% { transform: none; } 100% { background: transparent; } }
.rf-cols { display: grid; grid-template-columns: 170px 1fr; gap: 8px; }
@container (max-width: 520px) { .rf-cols { grid-template-columns: 1fr; } }
.rf-box { min-width: 0; padding: 6px 8px 8px; border-radius: 10px; background: rgba(0,0,0,.42); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #4d3812; }
.rf-box h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; font-weight: 900; color: var(--gold); }
.rf-box h4 i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; font-style: normal; font-size: 11px; color: #2a1a00; background: linear-gradient(#ffe08a, #d9a332); box-shadow: 0 0 0 1px #000; }
.rf-th, .rf-tr { display: grid; grid-template-columns: 34px 1fr 1fr; align-items: center; text-align: center; font-size: 12px; }
.rf-th { padding: 2px 0 4px; font-weight: 900; color: #e9dcc0; border-bottom: 1px solid rgba(201,154,52,.3); }
.rf-tr { height: 23px; font-weight: 800; color: #f1e2b8; border-bottom: 1px solid rgba(201,154,52,.1); }
.rf-tr span:last-child { font-size: 11px; color: #e8c96a; }
.rf-tr.done { opacity: .4; }
.rf-tr.on { border-radius: 6px; color: #fff3d0; background: linear-gradient(90deg, rgba(201,154,52,.6), rgba(201,154,52,.25)); box-shadow: 0 0 0 1.5px #ffd76a, 0 0 10px rgba(255,200,80,.35); }
.rf-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rf-ic { display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; font-size: 24px; background: radial-gradient(circle, rgba(120,170,255,.22), rgba(0,0,0,.5) 75%); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #5d7fa8; }
.rf-ic.sm { flex-basis: 32px; width: 32px; height: 32px; font-size: 18px; border-radius: 8px; }
.rf-ic img { width: 82%; height: 82%; object-fit: contain; image-rendering: pixelated; }
.rf-mat { display: flex; align-items: center; gap: 8px; }
.rf-mat > div { display: flex; flex-direction: column; min-width: 0; } .rf-mat b { font-size: 13px; color: #f1e2b8; } .rf-mat small { font-size: 11px; color: var(--muted); }
.rf-need { align-self: flex-start; margin: 2px 0; padding: 0 14px; border-radius: 7px; font-weight: 900; color: #fff3d0; background: rgba(0,0,0,.6); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #8a6420; }
.rf-need.short, .rf-gold.short b { color: #ff8a80; }
.rf-gold { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding-top: 6px; font-size: 12px; font-weight: 700; color: #e9dcc0; border-top: 1px solid rgba(201,154,52,.18); }
.rf-gold b { font-size: 14px; color: #ffe08a; } .rf-gold small { margin-left: auto; color: var(--muted); }
.rf-gems { display: flex; gap: 6px; }
.rf-gem { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 6px; border-radius: 9px; font-size: 12px; cursor: var(--cur-hover); background: rgba(0,0,0,.5); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #4d3812; }
.rf-gem input { display: none; }
.rf-gem b { color: #f1e2b8; }
.rf-gem.on::after { content: "✓"; margin-left: auto; font-weight: 900; color: #8fff9a; }
.rf-gem.purple.on { box-shadow: 0 0 0 1px #000, 0 0 0 2px #c06aff, 0 0 10px rgba(200,110,255,.55); }
.rf-gem.blue.on { box-shadow: 0 0 0 1px #000, 0 0 0 2px #6ad0ff, 0 0 10px rgba(110,200,255,.55); }
.rf-gem.none { opacity: .5; cursor: var(--cur); }
.rf-gem.purple .rf-ic, .rf-chip.gemstone_purple .rf-ic, .rf-fails .rf-ic { background: radial-gradient(circle, rgba(200,110,255,.3), rgba(0,0,0,.5) 75%); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #a05ad0; }
.rf-hint { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.rf-rate h4 { justify-content: center; }
.rf-big { display: flex; align-items: center; justify-content: center; gap: 10px; }
.rf-big > b { font-family: "Cinzel", Georgia, serif; font-size: 44px; font-weight: 900; line-height: 1; color: #ffe08a; text-shadow: 0 2px 0 #5a2d00, 0 0 16px rgba(255,190,60,.6); }
.rf-big ul { margin: 0; padding: 4px 8px; list-style: none; border-radius: 8px; font-size: 11px; background: rgba(0,0,0,.45); box-shadow: 0 0 0 1px #4d3812; }
.rf-big li { display: flex; justify-content: space-between; gap: 10px; white-space: nowrap; color: #e9dcc0; } .rf-big li b { color: #fff3d0; }
.rf-big li.blue b { color: #8fd8ff; } .rf-big li.pity b { color: #e09aff; }
.rf-note { margin-top: 6px; padding: 3px 6px; border-radius: 8px; text-align: center; font-size: 11px; font-weight: 800; color: #ffd76a; background: rgba(0,0,0,.4); box-shadow: 0 0 0 1px #4d3812; }
.rf-note small { display: block; font-weight: 600; color: var(--muted); }
.rf-fail { margin-top: 6px; text-align: center; font-size: 12px; font-weight: 800; }
.rf-fail .ok { color: #8fff9a; } .rf-fail .warn { color: #ffd76a; } .rf-fail .bad { color: #ff8a80; }
.rf-foot { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.rf-pity, .rf-fails { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 800; color: #e9dcc0; background: rgba(0,0,0,.42); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #4d3812; }
.rf-pity b { margin-left: auto; color: #e09aff; }
.rf-seg { display: flex; gap: 3px; width: 100%; }
.rf-seg i { flex: 1; height: 8px; border-radius: 3px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px #3a2a10; }
.rf-seg i.on { background: linear-gradient(#ffe08a, #d9a332); box-shadow: 0 0 6px rgba(255,200,80,.5); }
.rf-fails { white-space: nowrap; }
.rf-btns { display: grid; grid-template-columns: 1fr 130px; gap: 10px; }
.rf-go, .rf-cancel { height: 48px; border: 0; border-radius: 12px; font-weight: 900; cursor: var(--cur-hover); }
.rf-go { font-size: 20px; color: #4a2e00; background: linear-gradient(180deg, #fff6c8 0%, #ffd84a 45%, #f0a91f 100%); box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #c99a34, 0 4px 0 #7a5514, 0 0 18px rgba(255,200,80,.35); }
.rf-go:hover:not(:disabled), .rf-cancel:hover { filter: brightness(1.08); } .rf-go:active:not(:disabled) { transform: translateY(2px); }
.rf-go:disabled { opacity: .5; filter: grayscale(.6); cursor: var(--cur); }
.rf-cancel { font-size: 15px; color: #f1e2b8; background: linear-gradient(#2a1f0e, #140e06); box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #8a6420; }
.rf-ph { text-align: center; } .rf-ph b { display: block; font-size: 18px; color: var(--gold); } .rf-ph small { color: var(--muted); }
.rf-sub { font-size: 12px; font-weight: 800; color: #e9dcc0; }
.rf-mats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rf-chip { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 6px; border-radius: 9px; background: rgba(0,0,0,.5); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #5d7fa8; }
.rf-chip.gemstone_purple { box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #a05ad0; }
.rf-chip > div { display: flex; flex-direction: column; min-width: 0; }
.rf-chip small { overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; color: #cbbd9c; } .rf-chip b { font-size: 12px; color: #fff3d0; }
.rf-rows { flex: 1 1 0; display: flex; flex-direction: column; gap: 3px; min-height: 0; padding: 2px 4px 2px 2px; overflow-y: auto; }
.rf-row { display: grid; grid-template-columns: 32px 1fr 46px 78px; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 9px; cursor: var(--cur-hover); border-bottom: 1px solid rgba(201,154,52,.12); }
.rf-row:hover { background: rgba(255,210,100,.06); }
.rf-row.max { cursor: var(--cur); }
.rf-row.sel { background: linear-gradient(90deg, rgba(201,154,52,.45), rgba(201,154,52,.15)); box-shadow: 0 0 0 1.5px #ffd76a, 0 0 10px rgba(255,200,80,.3); }
.rf-nm { min-width: 0; overflow: hidden; font-size: 13px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.rf-nm em { margin-left: 6px; padding: 0 5px; border-radius: 6px; font-style: normal; font-size: 10px; vertical-align: 1px; color: #10202a; background: #8fd8ff; }
.rf-pc { text-align: center; font-size: 12px; font-weight: 800; color: #e9dcc0; } .rf-row.max .rf-pc { color: var(--muted); }
.rf-sel { height: 26px; border: 0; border-radius: 8px; font-size: 12px; font-weight: 900; color: #ffe9a8; cursor: inherit; background: linear-gradient(#3a2a10, #1c1408); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #c99a34; }
.rf-row.sel .rf-sel { color: #2a1a00; background: linear-gradient(#ffe08a, #d9a332); }
.rf-sel:disabled { opacity: .45; filter: grayscale(.7); }
.rf-none { padding: 20px; text-align: center; }

/* Tier 5 / 6 special stats (green lines) in gear tooltips and Market rows */
.tt-green { margin: 6px 0 2px; color: #7be07b; font-weight: 700; }
.tt-gh { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: 11px; font-weight: 900; color: #9fef9a; }
.tt-gh::before, .tt-gh::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #4f9a4f, transparent); }
.mk-green { margin-right: 6px; font-style: normal; font-size: 11px; color: #7be07b; }
.derived small small, .derived b small { display: inline; font-size: 10px; color: #9fef9a; }

/* Night King God set upgrade */
.gs-open { display: block; width: 100%; margin: 6px 0; padding: 7px 10px; border: 0; border-radius: 10px; font-weight: 900; color: #dff6ff; cursor: var(--cur-hover);
  background: linear-gradient(90deg, #0d2a44, #1d5a86 50%, #0d2a44); box-shadow: 0 0 0 1px #000, 0 0 0 2px #5fc8ff, 0 0 12px rgba(95,200,255,.35); }
.gs-open:hover { filter: brightness(1.12); }
.gs { display: flex; flex-direction: column; gap: 10px; }
.gs-none { padding: 30px; text-align: center; color: var(--muted); font-weight: 700; }
.gs-sub { display: flex; align-items: center; justify-content: center; gap: 12px; color: #e9dcc0; font-weight: 800; }
.gs-stage { padding: 2px 14px; border-radius: 10px; font-style: normal; font-weight: 900; color: #2a1a00; background: linear-gradient(#ffe08a, #d9a332); box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6420; }
.gs-cols { display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px; }
@container (max-width: 640px) { .gs-cols, .gs-cmp, .gs-kinds { grid-template-columns: 1fr !important; } .gs-arrow { display: none; } }
.gs-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: rgba(10,8,4,.62); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14, inset 0 0 22px rgba(0,0,0,.55); }
.gs-panel h3 { margin: 0; text-align: center; font-size: 16px; color: var(--gold); }
.gs-tabs.gs-wtabs { margin-top: -4px; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.gs-wtabs button small { opacity: .75; font-weight: 700; margin-left: 4px; }
.gs-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gs-tabs button { height: 36px; border: 0; border-radius: 10px; font-weight: 900; color: #f1e2b8; cursor: var(--cur-hover); background: rgba(0,0,0,.55); box-shadow: 0 0 0 1px #000, 0 0 0 2px #4d3812; }
.gs-tabs button.on { color: #2a1a00; background: linear-gradient(#ffe08a, #d9a332); box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd76a, 0 0 12px rgba(255,200,80,.4); }
.gs-art { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 12px;
  background: radial-gradient(circle at 50% 40%, rgba(95,200,255,.28), rgba(0,0,0,.6) 70%); box-shadow: 0 0 0 1px #000, 0 0 0 2px #c99a34, inset 0 0 18px rgba(95,200,255,.2); }
.gs-art b { font-size: 18px; color: #6fdcff; text-shadow: 0 0 10px rgba(95,200,255,.6); text-align: center; }
.gs-ic { display: inline-grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 9px; font-size: 22px; background: radial-gradient(circle, rgba(120,170,255,.22), rgba(0,0,0,.5) 75%); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #8a6420; }
.gs-ic img { width: 84%; height: 84%; object-fit: contain; image-rendering: pixelated; }
.gs-ic.big { flex-basis: 96px; width: 96px; height: 96px; font-size: 48px; border-radius: 14px; }
.gs-ic.god, .gs-art .gs-ic { box-shadow: 0 0 0 1px #000, 0 0 0 2px #5fc8ff, 0 0 16px rgba(95,200,255,.5); }
.gs-note { text-align: center; font-size: 11px; color: var(--muted); }
.gs-mat { display: grid; grid-template-columns: 40px 1fr auto 22px; align-items: center; gap: 10px; padding: 5px 10px; border-radius: 10px; background: rgba(0,0,0,.45); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #4d3812; }
.gs-mat b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #f1e2b8; }
.gs-mat .gs-n { font-weight: 900; } .gs-mat.ok .gs-n, .gs-mat.ok i { color: #7be07b; } .gs-mat.no .gs-n, .gs-mat.no i { color: #ff8a80; }
.gs-mat i { font-style: normal; font-weight: 900; text-align: center; }
.gs-ready { padding: 8px; border-radius: 10px; text-align: center; font-weight: 900; }
.gs-ready.ok { color: #9fef9a; background: rgba(30,90,30,.35); box-shadow: 0 0 0 1.5px #3f8a3f; }
.gs-ready.no { color: #ff9a90; background: rgba(90,30,30,.35); box-shadow: 0 0 0 1.5px #8a3f3f; }
.gs-foot { display: grid; grid-template-columns: 1fr 130px 220px; align-items: center; gap: 10px; }
.gs-cost { font-size: 15px; font-weight: 800; color: #e9dcc0; } .gs-cost b { font-size: 22px; color: #ffe08a; } .gs-cost.short b { color: #ff8a80; }
.gs-line { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px; border-radius: 12px; font-weight: 800; color: #e9dcc0; background: rgba(0,0,0,.45); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #6a4c14; }
.gs-line b { color: #fff3d0; font-size: 16px; }
.gs-kind { padding: 1px 12px; border-radius: 9px; font-style: normal; font-weight: 900; color: #2a1a00; background: linear-gradient(#ffe08a, #d9a332); }
.gs-cmp { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: stretch; gap: 6px; }
.gs-arrow { display: grid; place-items: center; font-size: 34px; font-weight: 900; color: #ffd76a; text-shadow: 0 0 10px rgba(255,200,80,.6); }
.gs-after { box-shadow: 0 0 0 1px #000, 0 0 0 2px #d9a332, 0 0 16px rgba(255,200,80,.25), inset 0 0 22px rgba(0,0,0,.55); }
.gs-item { display: flex; align-items: center; gap: 10px; } .gs-item > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gs-item b { font-size: 16px; } .gs-god { color: #6fdcff; text-shadow: 0 0 8px rgba(95,200,255,.6); }
.gs-chip { align-self: flex-start; padding: 1px 10px; border-radius: 9px; font-style: normal; font-size: 12px; font-weight: 900; color: #ffe9a8; background: rgba(0,0,0,.55); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #c99a34; }
.gs-pick { display: flex; align-items: center; justify-content: center; gap: 8px; } .gs-pick small { color: #e9dcc0; font-weight: 700; }
.gs-pick button { width: 28px; height: 24px; border: 0; border-radius: 7px; font-weight: 900; color: #ffe9a8; cursor: var(--cur-hover); background: rgba(0,0,0,.6); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #c99a34; }
.gs-greens { display: flex; flex-direction: column; gap: 4px; }
.gs-g { padding: 4px 10px; border-radius: 8px; font-weight: 800; color: #7be07b; background: rgba(20,60,20,.4); box-shadow: 0 0 0 1px #1c3a1c; } .gs-g.none { color: var(--muted); background: rgba(0,0,0,.3); }
.gs-fixed { padding: 4px; border-radius: 8px; text-align: center; font-weight: 900; color: #c8ffc0; background: linear-gradient(90deg, rgba(40,110,40,.2), rgba(60,150,60,.55), rgba(40,110,40,.2)); box-shadow: 0 0 0 1.5px #4f9a4f; }
.gs-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gs-kinds > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; border-radius: 10px; font-size: 12px; color: #e9dcc0; text-align: center; background: rgba(0,0,0,.45); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #4d3812; opacity: .6; }
.gs-kinds > div.on { opacity: 1; box-shadow: 0 0 0 1px #000, 0 0 0 2px #d9a332, 0 0 10px rgba(255,200,80,.3); } .gs-kinds b { color: var(--gold); font-size: 14px; }
.gs-warn { display: flex; flex-direction: column; font-weight: 800; color: #ffd76a; } .gs-warn small { font-weight: 600; color: #e9dcc0; }
.tt-god { margin: 2px 0; font-weight: 900; color: #6fdcff; }

/* in-game yes / no box (askConfirm) */
#qty-pop .cf-box { width: 380px; }
.cf-text { padding: 4px 2px; font-size: 15px; font-weight: 700; line-height: 1.5; color: #f1e2b8; text-align: center; white-space: pre-line; }

/* buff tile stack count (Centurion Lock-on) */
.buff .stk { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; font-size: 11px; line-height: 16px; text-align: center; color: #fff; background: #d83a2a; box-shadow: 0 0 0 1.5px #000; }

/* CODEX (material collection book): 8 pages a screen on the left, the picked page + set bonus on the right */
.cx-top { display: flex; justify-content: flex-end; margin: -4px 0 8px; }
.cx-share { padding: 4px 14px; border-radius: 12px; font-size: 12px; font-weight: 800; color: #f1e2b8; background: rgba(0,0,0,.55); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #8a6420; }
.cx-cols { display: grid; grid-template-columns: 1fr 340px; gap: 12px; }
@container (max-width: 760px) { .cx-cols { grid-template-columns: 1fr; } }
.cx-left, .cx-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border-radius: 14px; background: rgba(10,8,4,.62); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14, inset 0 0 22px rgba(0,0,0,.55); }
.cx-tabs { display: flex; align-items: center; gap: 6px; }
.cx-tabs button { height: 34px; padding: 0 16px; border: 0; border-radius: 10px; font-weight: 900; color: #f1e2b8; cursor: var(--cur-hover); background: rgba(0,0,0,.55); box-shadow: 0 0 0 1px #000, 0 0 0 2px #4d3812; }
.cx-tabs button.on { color: #2a1a00; background: linear-gradient(#ffe08a, #d9a332); box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd76a, 0 0 12px rgba(255,200,80,.4); }
.cx-done { margin-left: auto; font-weight: 900; color: #ffe08a; }
.cx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@container (max-width: 520px) { .cx-grid { grid-template-columns: 1fr; } }
.cx-card { display: grid; grid-template-columns: 56px 1fr 40px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; cursor: var(--cur-hover); background: rgba(0,0,0,.45); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #4d3812; }
.cx-card:hover { box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #c99a34; }
.cx-card.sel { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd76a, 0 0 14px rgba(255,200,80,.4); }
.cx-card.done { background: linear-gradient(90deg, rgba(60,110,40,.35), rgba(0,0,0,.45)); }
.cx-ic { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; font-size: 28px; background: radial-gradient(circle, rgba(255,220,140,.12), rgba(0,0,0,.55) 75%); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #8a6420; }
.cx-ic img { width: 80%; height: 80%; object-fit: contain; image-rendering: pixelated; }
.cx-ic em { position: absolute; top: -10px; right: -6px; font-style: normal; font-size: 18px; filter: drop-shadow(0 1px 1px #000); }
.cx-ic.big { width: 76px; height: 76px; flex: 0 0 76px; font-size: 38px; }
.cx-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cx-info b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; color: #f1e2b8; } .cx-info small { font-size: 12px; color: #e9dcc0; text-align: center; }
.cx-bar { height: 8px; border-radius: 5px; overflow: hidden; background: rgba(0,0,0,.6); box-shadow: inset 0 0 0 1px #3a2a10; }
.cx-bar i { display: block; height: 100%; background: linear-gradient(90deg, #d9a332, #ffe08a); }
.cx-card.done .cx-bar i { background: linear-gradient(90deg, #3f9a3f, #9fef9a); }
.cx-gift { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; font-size: 20px; background: rgba(0,0,0,.5); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #6a4c14; filter: grayscale(.6); }
.cx-card.done .cx-gift { filter: none; box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #ffd76a, 0 0 10px rgba(255,200,80,.4); }
.cx-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: auto; }
.cx-pager b { color: #f1e2b8; } .cx-pager button { width: 36px; height: 30px; border: 0; border-radius: 8px; font-weight: 900; color: #ffe08a; cursor: var(--cur-hover); background: rgba(0,0,0,.5); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #c99a34; }
.cx-pager button:disabled { opacity: .35; cursor: var(--cur); }
.cx-right h3 { margin: 0; text-align: center; font-size: 15px; color: var(--gold); }
.cx-sel { display: flex; gap: 10px; } .cx-sel > div { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.cx-sel b { font-size: 18px; color: #fff3d0; } .cx-sel small { color: var(--muted); font-size: 11px; }
.cx-kind { align-self: flex-start; padding: 1px 10px; border-radius: 9px; font-style: normal; font-size: 12px; font-weight: 800; color: #f1e2b8; background: rgba(0,0,0,.55); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #6a4c14; }
.cx-prog { display: flex; align-items: center; gap: 8px; } .cx-prog .cx-bar { flex: 1; } .cx-prog b { font-size: 13px; }
.cx-box { padding: 6px 10px 8px; border-radius: 10px; background: rgba(0,0,0,.42); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #4d3812; }
.cx-box h4 { margin: 0 0 4px; font-size: 13px; color: var(--gold); text-align: center; }
.cx-rw { display: flex; justify-content: space-between; font-size: 15px; font-weight: 800; color: #f1e2b8; } .cx-rw b { color: #9fef9a; }
.cx-send { height: 42px; font-size: 16px; } .cx-send small { font-size: 12px; font-weight: 700; }
.cx-fullgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; font-size: 12px; }
.cx-fullgrid div { display: flex; justify-content: space-between; color: #e9dcc0; } .cx-fullgrid b { color: #ffe08a; }
.cx-full.on { box-shadow: 0 0 0 1px #000, 0 0 0 2px #9fef9a, 0 0 12px rgba(120,230,120,.35); } .cx-full.on .cx-fullgrid b { color: #9fef9a; }
.cx-note { padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; color: #ffd76a; text-align: center; background: rgba(0,0,0,.5); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #8a6420; }

/* world map: region dioramas on a sea, gold roads, PK zones glow and blink red */
.wm { display: flex; flex-direction: column; gap: 8px; }
.wm-sea { position: relative; height: 560px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 50%, #2b6a8a 0%, #1d4a6a 45%, #0e2236 100%); box-shadow: 0 0 0 1px #000, 0 0 0 3px #b8892a, inset 0 0 60px rgba(0,0,0,.6); }
.wm-sea::before { content: ""; position: absolute; inset: 0; opacity: .25; background: repeating-radial-gradient(circle at 30% 40%, transparent 0 18px, rgba(255,255,255,.08) 19px 20px); pointer-events: none; }
.wm-roads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wm-roads line { stroke: #f2c64a; stroke-width: .45; stroke-dasharray: 1.2 1; opacity: .75; vector-effect: non-scaling-stroke; }
.wm-roads line { stroke-width: 3px; stroke-dasharray: 8 6; }
.wm-compass { position: absolute; top: 10px; right: 14px; font-size: 40px; filter: drop-shadow(0 2px 2px #000); }
.wm-reg { position: absolute; width: 132px; transform: translate(-50%, -50%); text-align: center; cursor: var(--cur-hover); }
.wm-reg img { display: block; width: 120px; height: 120px; margin: 0 auto -18px; image-rendering: pixelated; filter: drop-shadow(0 6px 6px rgba(0,0,0,.55)); transition: transform .15s; }
.wm-reg:hover img { transform: translateY(-4px) scale(1.04); }
.wm-plate { position: relative; display: inline-flex; flex-direction: column; padding: 2px 10px; border-radius: 9px; background: rgba(10,8,4,.88); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #c99a34; }
.wm-plate b { font-size: 12px; color: #fff3d0; white-space: nowrap; } .wm-plate small { font-size: 10px; font-weight: 800; color: #ffd76a; }
.wm-reg.safe .wm-plate { box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #6ad06a; }
.wm-reg.sel .wm-plate { box-shadow: 0 0 0 1px #000, 0 0 0 2px #fff3d0, 0 0 12px rgba(255,240,200,.5); }
.wm-reg.pk::before { content: ""; position: absolute; left: 50%; top: 42%; width: 170px; height: 150px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255,40,40,.55), rgba(255,40,40,0) 70%); animation: wmPk 1s ease-in-out infinite alternate; }
.wm-reg.pk .wm-plate { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ff3a3a, 0 0 12px rgba(255,60,60,.7); }
@keyframes wmPk { from { opacity: .35; } to { opacity: 1; } }
.wm-pk { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); padding: 1px 9px; border-radius: 8px; font-size: 13px; font-weight: 900; color: #fff; background: #d81e1e; box-shadow: 0 0 0 1.5px #000, 0 0 10px #ff3a3a; animation: wmPk 1s ease-in-out infinite alternate; }
.wm-here { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 11px; font-weight: 900; color: #2a1a00; padding: 1px 8px; border-radius: 8px; background: linear-gradient(#ffe08a, #d9a332); box-shadow: 0 0 0 1px #000; }
.wm-info { position: absolute; right: 12px; bottom: 12px; max-width: 300px; padding: 8px 12px; border-radius: 12px; background: rgba(10,8,4,.9); box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6420; }
.wm-ih { display: flex; align-items: center; gap: 8px; } .wm-ih b { font-size: 15px; color: #fff3d0; } .wm-info > small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; }
.wm-tag { padding: 0 8px; border-radius: 8px; font-size: 11px; color: #f1e2b8; background: rgba(255,255,255,.08); }
.wm-tag.red { color: #fff; background: #b81e1e; } .wm-tag.green { color: #10200a; background: #7be07b; } .wm-tag.blink { animation: wmPk 1s ease-in-out infinite alternate; }
.wm-banner { display: flex; flex-direction: column; align-items: center; padding: 8px 12px; border-radius: 12px; text-align: center; background: linear-gradient(90deg, rgba(120,10,10,.2), rgba(150,20,20,.75), rgba(120,10,10,.2)); box-shadow: 0 0 0 1px #000, 0 0 0 2px #c99a34; }
.wm-banner b { color: #ffe08a; font-size: 16px; } .wm-banner small { color: #f1e2b8; font-weight: 700; } #wm-left { color: #fff; font-weight: 900; }
@container (max-width: 700px) { .wm-sea { height: 460px; } .wm-reg { width: 96px; } .wm-reg img { width: 84px; height: 84px; } }
#map-name.pkzone { color: #ff5a5a !important; animation: wmPk 1s ease-in-out infinite alternate; }

/* guild emblem (16x16, shown big and crisp) */
.g-crest img, .g-emb-pre img { width: 100%; height: 100%; image-rendering: pixelated; }
.g-crest:has(img) { padding: 6px; }
.g-emb { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--well); box-shadow: 0 0 0 1.5px #d4b060; }
.g-emb-pre { display: grid; place-items: center; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; font-size: 32px; background: rgba(0,0,0,.45); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #8a6420; }
.g-emb-pre img { width: 48px; height: 48px; }
.g-emb-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .g-emb-info .row { gap: 8px; } .g-emb-info b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* skill icons are 64px PixelLab art shown smaller: scale them smoothly */
img.ico[src*="icons/skills/"] { image-rendering: auto; }

/* ---------- admin panel (live tuning) and the public rate badge */
#map-rates { margin-top: 2px; font-size: 11px; font-weight: 800; color: #ffcf5a; text-shadow: 0 1px 2px #000; }
.adm-tabs { margin-bottom: 8px; flex-wrap: wrap; }
.adm-note { margin: 0 0 8px; }
.adm-row .st-lb small { display: block; font-size: 10px; color: var(--muted); font-weight: 700; }
.adm-row.changed .st-lb { color: #ffd76a; }
.adm-row.pending { background: rgba(255, 215, 106, 0.08); border-radius: 8px; }
.adm-row .st-ctl input[type=number] { width: 86px; padding: 5px 8px; border-radius: 8px; text-align: center; font-weight: 800; }
.adm-row .adm-tog { min-width: 64px; }
.adm-ann { display: flex; align-items: center; gap: 8px; margin: 8px 2px; font-size: 12px; color: var(--muted); }
.win textarea.adm-text { width: 100%; box-sizing: border-box; min-height: 62px; resize: vertical; margin: 6px 0; padding: 8px 10px; border: 0; border-radius: 10px;
  background: #19150a; color: #f4e3b8; font: inherit; font-size: 13px; box-shadow: inset 0 0 0 1.5px var(--line, #5a4320); }
.adm-log { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.adm-log-row { padding: 6px 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); font-size: 12px; line-height: 1.45; }
.adm-log-row small { color: var(--muted); font-weight: 700; }

/* ---------------------------------------------------------------- item actions (bag bar + item details window) */
.ia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.ia { min-height: 32px; padding: 4px 10px; border: 0; border-radius: 9px; font-weight: 800; font-size: 13px; color: #f1e2b8; cursor: var(--cur-hover); -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, #3a3020, #1c160c); box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6420, inset 0 1px 0 #ffffff14; }
.ia:hover:not(:disabled) { filter: brightness(1.15); } .ia:active:not(:disabled) { transform: translateY(1px); }
.ia:disabled { opacity: .45; cursor: var(--cur); }
.ia.go { grid-column: span 2; color: #4a2e00; background: linear-gradient(180deg, #fff6c8 0%, #ffd84a 45%, #f0a91f 100%); box-shadow: 0 0 0 1px #000, 0 0 0 2px #c99a34, 0 3px 0 #7a5514; }
.ia.bad { color: #ffd0d0; background: linear-gradient(180deg, #5a2020, #2a0e0e); box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a3030; }
.ia.small { min-height: 26px; padding: 2px 9px; font-size: 12px; }
.ia-in { grid-column: 1 / -1; display: flex; gap: 6px; }
.ia-in input { flex: 1; min-width: 0; padding: 6px 10px; }

/* ---------------------------------------------------------------- item details window */
.ii { display: flex; flex-direction: column; gap: 9px; }
.ii-top { display: flex; align-items: center; gap: 12px; }
.ii-ic { --r: #d4a940; position: relative; flex: 0 0 auto; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 14px;
  background: radial-gradient(circle at 50% 40%, #3a2c14, #0e0b06 75%); box-shadow: 0 0 0 1.5px #000, 0 0 0 3px var(--r), 0 0 16px #f2c64a33; }
.ii-ic img.ico { width: 56px; height: 56px; image-rendering: pixelated; }
.ii-ic .ref { position: absolute; top: 3px; left: 5px; font-size: 12px; font-weight: 900; color: #ffe08a; text-shadow: 0 1px 2px #000; }
.ii-hd { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.ii-name { font-size: 19px; font-weight: 900; color: #ffd76a; line-height: 1.15; overflow-wrap: anywhere; }
.ii-chip { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; color: #f0d9ab; background: rgba(10,8,4,.85); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14; }
.ii-desc { padding: 8px 11px; border-radius: 10px; font-size: 13px; line-height: 1.5; color: #f1e2b8; background: rgba(30,40,90,.35); box-shadow: 0 0 0 1px #000, 0 0 0 2px #3a4a8a; }
.ii-src { font-size: 12px; color: var(--muted); }
.ii-props { padding: 8px 11px; border-radius: 10px; background: rgba(10,8,4,.7); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14; }
.ii-ph { font-weight: 900; color: #ffe08a; margin-bottom: 4px; }
.ii-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 13px; border-top: 1px solid rgba(201,154,52,.15); }
.ii-row:first-of-type { border-top: 0; } .ii-row span { color: var(--muted); } .ii-row b { color: #f1e2b8; }
.ii-keep { margin-top: 4px; font-size: 12px; font-weight: 700; color: #9fe39a; }
.ii-quote { font-size: 13px; font-weight: 700; color: #f0d9ab; }

/* ---------------------------------------------------------------- the bag: 4 tabs, the selected item's bar */
.bag-tabs { flex-wrap: wrap; }
.bag-tabs button { flex: 1; padding: 5px 8px; }
.bag-tabs button small { opacity: .7; font-weight: 700; margin-left: 2px; }
.inv-acts { margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: var(--well); box-shadow: 0 0 0 1.5px #c99a34, inset 0 0 0 2px #544018; display: flex; flex-direction: column; gap: 7px; }
.inv-acts.empty { color: var(--muted); font-size: 12px; text-align: center; }
.inv-sel { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.inv-sel b { color: #ffe08a; } .inv-sel .ia { margin-left: auto; }
.doll-center canvas.look { position: relative; z-index: 1; width: 190px; height: 230px; }

/* ---------------------------------------------------------------- NPC shop */
.sh { display: flex; flex-direction: column; gap: 10px; }
.sh-head { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 14px;
  background: radial-gradient(ellipse at 20% 50%, rgba(80,60,20,.55), rgba(10,8,4,.7) 70%); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14; }
.sh-npc { height: 112px; display: grid; place-items: end center; }
.sh-npc img { height: 120px; image-rendering: pixelated; filter: drop-shadow(0 4px 6px #000c); }
.sh-title { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.sh-title b { font-family: "Cinzel", Georgia, serif; font-size: 26px; color: #ffe08a; text-shadow: 0 2px 0 #000, 0 0 10px #f2c64a44; }
.sh-title small { color: #d9c7a0; font-size: 13px; }
.sh-gold { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 12px; background: rgba(10,8,4,.85); box-shadow: 0 0 0 1px #000, 0 0 0 2px #c99a34; }
.sh-gold b { font-size: 16px; color: #ffe08a; }
.sh-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sh-modes button { height: 42px; border: 0; border-radius: 12px 12px 6px 6px; font-size: 17px; font-weight: 900; color: #f1e2b8; cursor: var(--cur-hover);
  background: linear-gradient(180deg, #2e2414, #15100a); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14; }
.sh-modes button.on { color: #4a2e00; background: linear-gradient(180deg, #fff1b0, #f7cf55 55%, #e2a92a); box-shadow: 0 0 0 1px #000, 0 0 0 2px #c99a34, 0 0 14px #f2c64a55; }
.sh-cols { display: grid; grid-template-columns: 1fr 300px; gap: 10px; min-height: 0; }
.sh-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sh-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sh-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-cats button { padding: 5px 12px; border: 0; border-radius: 9px; font-weight: 800; font-size: 13px; color: #e3caa0; cursor: var(--cur-hover);
  background: linear-gradient(180deg, #2e2414, #15100a); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #6a4c14; }
.sh-cats button.on { color: #4a2e00; background: linear-gradient(180deg, #fff1b0, #f7cf55 55%, #e2a92a); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #c99a34; }
.sh-filter input { flex: 1; min-width: 140px; padding: 6px 10px; }
.sh-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; padding: 2px 4px 2px 2px; }
.sh-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; border: 0; border-radius: 10px; text-align: left; color: #f1e2b8; cursor: var(--cur-hover);
  background: rgba(10,8,4,.7); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #4a3a1c; font: inherit; }
.sh-row:hover { box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #8a6420; }
.sh-row.on { background: linear-gradient(90deg, rgba(120,90,30,.55), rgba(40,30,10,.7)); box-shadow: 0 0 0 1px #000, 0 0 0 2px #e8c45a, 0 0 12px #f2c64a33; }
.sh-ic { --r: #6a4c14; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9px; background: #0e0b06; box-shadow: 0 0 0 1px #000, 0 0 0 1.5px var(--r); }
.sh-ic img.ico { width: 32px; height: 32px; image-rendering: pixelated; }
.sh-nm { font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sh-nm small { color: var(--muted); font-weight: 700; }
.sh-price { display: flex; align-items: center; gap: 5px; font-weight: 900; color: #ffe08a; white-space: nowrap; }
.sh-empty { padding: 18px; text-align: center; color: var(--muted); }
.sh-side { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px; border-radius: 14px; background: rgba(10,8,4,.75); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14, inset 0 0 26px rgba(0,0,0,.6); }
.sh-art { width: 100%; display: grid; place-items: center; padding: 8px 0 2px; }
.sh-big { --r: #c99a34; width: 104px; height: 104px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #3a2c14, #0e0b06 70%); box-shadow: 0 0 0 1.5px #000, 0 0 0 3px var(--r), 0 0 22px #f2c64a33; }
.sh-big img.ico { width: 72px; height: 72px; image-rendering: pixelated; }
.sh-dn { font-size: 20px; font-weight: 900; color: #fff1c8; text-align: center; }
.sh-desc { align-self: stretch; padding: 7px 10px; border-radius: 9px; font-size: 13px; line-height: 1.45; background: rgba(0,0,0,.35); }
.sh-kv, .sh-total { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; background: rgba(0,0,0,.35); box-shadow: 0 0 0 1px #3a2c14; }
.sh-kv b, .sh-total b { display: flex; align-items: center; gap: 5px; color: #ffe08a; } .sh-kv small { color: var(--muted); font-weight: 700; }
.sh-total { font-size: 16px; }
.sh-qh { align-self: stretch; font-size: 12px; color: var(--muted); }
.sh-qty { align-self: stretch; display: grid; grid-template-columns: 44px 1fr 44px; gap: 6px; }
.sh-qty button, .sh-pre button { height: 38px; border: 0; border-radius: 9px; font-size: 18px; font-weight: 900; color: #f1e2b8; cursor: var(--cur-hover);
  background: linear-gradient(180deg, #2e2414, #15100a); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #6a4c14; }
.sh-qty .sh-qv { font-size: 20px; color: #fff1c8; }
.sh-pre { align-self: stretch; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.sh-pre button { height: 30px; font-size: 14px; }
.sh-pre button.on { color: #4a2e00; background: linear-gradient(180deg, #fff1b0, #f7cf55 55%, #e2a92a); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #c99a34; }
.sh-go { align-self: stretch; height: 46px; border: 0; border-radius: 12px; font-size: 17px; font-weight: 900; color: #4a2e00; cursor: var(--cur-hover);
  background: linear-gradient(180deg, #fff6c8 0%, #ffd84a 45%, #f0a91f 100%); box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #c99a34, 0 4px 0 #7a5514, 0 0 18px rgba(255,200,80,.35); }
.sh-go.sell { color: #e8ffe4; background: linear-gradient(180deg, #8fe07a, #3e9a2e 55%, #22661a); box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #4a8a3a, 0 4px 0 #1a4a12; }
.sh-go:disabled { opacity: .5; filter: grayscale(.6); cursor: var(--cur); }
.sh-note { min-height: 16px; font-size: 12px; font-weight: 700; color: #9fe39a; }
.sh-info { align-self: center; }
.sh-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 8px; border-radius: 12px; background: rgba(10,8,4,.6); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #4a3a1c; }
.sh-foot small { color: var(--muted); }
@container (max-width: 640px) {
  .sh-head { grid-template-columns: 90px 1fr; } .sh-npc { height: 80px; } .sh-npc img { height: 86px; } .sh-gold { grid-column: 1 / -1; justify-self: center; }
  .sh-cols { grid-template-columns: 1fr; } .sh-list { max-height: 260px; }
}

/* ---------------------------------------------------------------- item links in chat */
#chat-log .ilink { --r: #d4b060; display: inline-flex; align-items: center; gap: 2px; padding: 0 5px 0 2px; margin: 0 1px; border-radius: 6px; vertical-align: middle;
  border: 1px solid var(--r); color: var(--r); background: #0008; cursor: var(--cur-hover); font-weight: 800; }
#chat-log .ilink img.ico { width: 18px; height: 18px; image-rendering: pixelated; }
#chat-log .ilink:hover { filter: brightness(1.2); }

/* phones / tablets: no double-tap or pinch zoom of the page (the game zooms its own world); text fields stay usable */
html, body, #game, #ui, #touch, #windows, .win, button { touch-action: manipulation; }
#world, #stick, #combat button { touch-action: none; }

/* ---------------------------------------------------------------- card illustrations (item details, full screen) */
.cardart { position: relative; align-self: center; width: 186px; padding: 8px 8px 10px; border: 0; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: var(--cur-hover);
  background: linear-gradient(180deg, #4a3812, #1a1206); box-shadow: 0 0 0 1.5px #000, 0 0 0 3.5px #e8c45a, 0 0 0 5px #5a4214, 0 6px 18px #000c, 0 0 22px #f2c64a33; color: #fff1c8; font: inherit; }
.cardart img { width: 170px; height: 227px; image-rendering: pixelated; border-radius: 6px; box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #a8822e; }
.cardart .ca-name { font-weight: 900; font-size: 15px; color: #ffe08a; text-shadow: 0 1px 0 #000; }
.cardart .ca-fx { font-size: 12px; font-weight: 700; color: #bfe6ff; text-align: center; }
.cardart:active { transform: scale(.98); }
.cardart-full { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; background: rgba(0,0,0,.72); animation: winIn .14s ease-out; }
.cardart.big { width: min(78vw, 360px); padding: 12px 12px 16px; }
.cardart.big img { width: 100%; height: auto; aspect-ratio: 3 / 4; }
.cardart.big .ca-name { font-size: 22px; } .cardart.big .ca-fx { font-size: 15px; }

/* ---------------------------------------------------------------- storage (banker) */
.sto { display: flex; flex-direction: column; gap: 10px; }
.sto-top { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sto-top img { height: 54px; image-rendering: pixelated; }
.sto-top b { font-family: "Cinzel", Georgia, serif; font-size: 20px; color: #ffe08a; text-shadow: 0 2px 0 #000; }
.sto-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sto-p { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 10px; border-radius: 14px; background: rgba(10,8,4,.62); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14, inset 0 0 22px rgba(0,0,0,.55); }
.sto-h { display: flex; align-items: center; gap: 10px; } .sto-h b { font-size: 15px; color: #ffe08a; white-space: nowrap; } .sto-h > small { color: var(--muted); }
.sto-cap { flex: 1; display: flex; flex-direction: column; gap: 3px; } .sto-cap small { color: #d9c7a0; font-size: 11px; text-align: right; }
.sto-f { display: flex; gap: 6px; } .sto-f input { flex: 1; min-width: 0; padding: 5px 9px; } .sto-f select { padding: 4px 6px; }
.sto-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.sto-tabs button { flex: 1; padding: 4px 6px; border: 0; border-radius: 8px; font-weight: 800; font-size: 12px; color: #e3caa0; cursor: var(--cur-hover); white-space: nowrap;
  background: linear-gradient(180deg, #2e2414, #15100a); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #6a4c14; }
.sto-tabs button.on { color: #4a2e00; background: linear-gradient(180deg, #fff1b0, #f7cf55 55%, #e2a92a); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #c99a34; }
.sto-grid { max-height: none; min-height: 0; gap: 6px; }
.sto-grid.st { grid-template-columns: repeat(5, 1fr); } .sto-grid.bag { grid-template-columns: repeat(6, 1fr); max-height: 330px; }
.sto-grid .item-cell { height: 56px; } .sto-grid .item-cell img.ico { width: 40px; height: 40px; }
.sto-pages { display: flex; align-items: center; gap: 4px; justify-content: center; flex-wrap: wrap; }
.sto-pages small { margin-right: auto; color: var(--muted); }
.sto-pages button { min-width: 26px; height: 24px; border: 0; border-radius: 6px; font-weight: 800; color: #e3caa0; cursor: var(--cur-hover); background: #1c160c; box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #6a4c14; }
.sto-pages button.on { color: #4a2e00; background: linear-gradient(180deg, #fff1b0, #e2a92a); }
.sto-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(10,8,4,.75); box-shadow: 0 0 0 1px #000, 0 0 0 2px #c99a34; }
.sto-bar.empty { justify-content: center; color: var(--muted); font-size: 13px; }
.sto-nm { display: flex; flex-direction: column; min-width: 120px; } .sto-nm b { color: #fff1c8; } .sto-nm small { color: var(--muted); }
.sto-qty { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .sto-qty > span { color: var(--muted); font-size: 12px; }
.sto-qty button { min-width: 34px; height: 32px; border: 0; border-radius: 8px; font-weight: 900; color: #f1e2b8; cursor: var(--cur-hover); background: linear-gradient(180deg, #2e2414, #15100a); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #6a4c14; }
.sto-qty .sh-qv { min-width: 64px; font-size: 16px; color: #fff1c8; }
.sto-qty button.on { color: #4a2e00; background: linear-gradient(180deg, #fff1b0, #f7cf55 55%, #e2a92a); }
.sto-go { margin-left: auto; height: 42px; padding: 0 18px; border: 0; border-radius: 11px; font-size: 16px; font-weight: 900; cursor: var(--cur-hover); color: #4a2e00;
  background: linear-gradient(180deg, #fff6c8 0%, #ffd84a 45%, #f0a91f 100%); box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #c99a34, 0 3px 0 #7a5514; }
.sto-go.wd { color: #e8f4ff; background: linear-gradient(180deg, #8ac4ff, #3a7ad8 55%, #1e4a9a); box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #4a7ab8, 0 3px 0 #1a3a6a; }
.sto-foot { text-align: center; color: var(--muted); }
@container (max-width: 640px) { .sto-cols { grid-template-columns: 1fr; } .sto-grid.bag { max-height: 220px; } }
.ii-zoom { position: absolute; right: -8px; bottom: -8px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; font-size: 15px; line-height: 30px; cursor: var(--cur-hover);
  background: radial-gradient(circle at 40% 35%, #fff3c0, #e2a92a 70%); box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #8a6420, 0 2px 6px #000a; }
.ii-zoom:hover { filter: brightness(1.12); } .ii-zoom:active { transform: scale(.94); }

/* ---------------------------------------------------------------- character window: side by side, what a point gives */
.cs { display: grid; grid-template-columns: 1fr 292px; gap: 10px; align-items: start; }
.cs-l, .cs-r { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs .section { margin: 2px 0 2px; }
.cs-row { border-radius: 9px; background: #27210f40; padding-bottom: 3px; }
.cs-row .stat-row { background: none; padding: 3px 6px; grid-template-columns: 38px 26px 1fr auto; gap: 6px; }
.cs-row .stat-row .btn.small { padding: 2px 8px; font-size: 11px; }
.cs-gain { display: flex; flex-wrap: wrap; gap: 0 8px; padding: 0 8px 0 52px; font-size: 10.5px; line-height: 1.3; color: #9fe39a; }
.cs-gain .cs-what { color: var(--muted); }
.cs-gain i { font-style: normal; font-weight: 900; color: #ffe08a; margin-right: 2px; }
.cs-reset { align-self: flex-start; margin-top: 4px; }
.cs-r .char-head { grid-template-columns: 64px 1fr; gap: 8px; padding: 7px 8px; }
.cs-r .char-face { width: 64px; height: 64px; }
.cs-r .char-face img { width: 64px; height: 64px; }
.cs-r .char-name { font-size: 15px; }
.cs-r .derived { grid-template-columns: repeat(3, 1fr); gap: 4px; }
.cs-r .derived > div { padding: 4px 7px; }
.cs-r .derived b { font-size: 13px; }
@container (max-width: 600px) { .cs { grid-template-columns: 1fr; } }

/* Paladin: the Ledger of Atonement bar (HUD, under SP) and silenced skill slots */
.bar.ledger > div { background: linear-gradient(180deg, #fff3c0, #ffd76a 45%, #a8781c); }
.hud-lbl i.atn { font-style: normal; font-size: 13px; color: #ffd76a; }
#hud-ledger.full .bar { box-shadow: 0 0 0 1px #ffd76a, 0 0 10px #ffd76a; animation: ledgerGlow 1.2s ease-in-out infinite alternate; }
@keyframes ledgerGlow { from { filter: brightness(1); } to { filter: brightness(1.25); } }
#hotbar .slot.silenced, #hotbar2 .slot.silenced { filter: grayscale(1) brightness(0.55); }

/* CODEX JOB: the book switch at the top of the CODEX window and the class cards */
.cx-top { justify-content: space-between; align-items: center; gap: 8px; }
.cx-modes { display: flex; gap: 6px; }
.cx-modes button { position: relative; height: 32px; padding: 0 14px; border: 0; border-radius: 10px; font-weight: 900; color: #f1e2b8; cursor: var(--cur-hover); background: rgba(0,0,0,.55); box-shadow: 0 0 0 1px #000, 0 0 0 2px #4d3812; }
.cx-modes button.on { color: #2a1a00; background: linear-gradient(#ffe08a, #d9a332); box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd76a, 0 0 12px rgba(255,200,80,.4); }
.cx-dot { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; font-style: normal; font-size: 11px; line-height: 18px; color: #fff; background: #e5484d; box-shadow: 0 0 0 1.5px #000; }
.cxj-face img { width: 92%; height: 92%; object-fit: contain; object-position: center bottom; image-rendering: pixelated; }
.cxj-rw { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-style: normal; font-size: 11px; font-weight: 700; color: #9fef9a; }
.cxj-card.locked .cxj-face img { filter: grayscale(.85) brightness(.7); }
.cxj-card.ready { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd76a, 0 0 14px rgba(255,200,80,.45); animation: cxjPulse 1.4s ease-in-out infinite alternate; }
.cxj-card.ready .cxj-st { filter: none; box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #ffd76a, 0 0 10px rgba(255,200,80,.5); }
.cxj-card.done { background: linear-gradient(90deg, rgba(60,110,40,.35), rgba(0,0,0,.45)); }
.cxj-card.done .cxj-st { filter: none; color: #9fef9a; }
.cxj-card.done .cx-bar i { background: linear-gradient(90deg, #3f9a3f, #9fef9a); }
@keyframes cxjPulse { from { background-color: rgba(0,0,0,.45); } to { background-color: rgba(120,90,20,.45); } }

/* dropdowns: every <select> in a window is drawn as this box + its own list (ui.js fancySelects) */
.eo-native { display: none !important; }
.eo-sel { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; height: 30px; padding: 0 10px 0 12px;
  border: 0; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 800; color: #f4e3b8; white-space: nowrap; cursor: var(--cur-hover);
  background: linear-gradient(180deg, #3a2c16, #1b140a); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #8a6420, inset 0 1px 0 rgba(255,230,160,.16); }
.eo-sel span { overflow: hidden; text-overflow: ellipsis; }
.eo-sel i { flex: 0 0 auto; font-style: normal; font-size: 11px; color: #ffd76a; transition: transform .15s; }
.eo-sel:hover { box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #c99a34, inset 0 1px 0 rgba(255,230,160,.22); }
.eo-sel.open { color: #fff3d0; box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd76a, 0 0 10px rgba(255,200,80,.35); }
.eo-sel.open i { transform: rotate(180deg); }
.eo-sel:focus-visible { outline: 2px solid #ffd76a; outline-offset: 2px; }
.eo-sel:disabled { opacity: .5; cursor: var(--cur); }
.eo-dd { position: absolute; z-index: 60; display: flex; flex-direction: column; gap: 5px; max-width: 340px; padding: 6px; border-radius: 12px; pointer-events: auto;
  background: linear-gradient(180deg, #2a2012, #120d07); box-shadow: 0 0 0 1px #000, 0 0 0 2px #c99a34, 0 12px 26px rgba(0,0,0,.65); animation: ddIn .12s ease-out; }
.eo-dd.up { animation-name: ddUp; }
.eo-dd-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain; }
.eo-dd-list button { position: relative; display: flex; align-items: center; flex: 0 0 auto; min-height: 30px; padding: 4px 12px 4px 26px; border: 0; border-radius: 8px;
  text-align: left; font: inherit; font-size: 13px; font-weight: 700; color: #e9dcc0; white-space: nowrap; background: transparent; cursor: var(--cur-hover); }
.eo-dd-list button.hi { color: #fff3d0; background: rgba(255,215,106,.15); }
.eo-dd-list button.on { color: #ffe08a; }
.eo-dd-list button.on::before { content: '✓'; position: absolute; left: 9px; color: #ffd76a; font-weight: 900; }
.eo-dd-list button:disabled { opacity: .4; cursor: var(--cur); }
.eo-dd-list button[hidden] { display: none; } /* rows the filter box hides */
.win .eo-dd-q { height: 30px; padding: 0 10px; border-radius: 8px; font-size: 13px; }
@media (pointer: coarse) { .eo-dd-list button { min-height: 36px; } }
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } }
@keyframes ddUp { from { opacity: 0; transform: translateY(4px); } }
/* where the boxes sit */
.sto-f .eo-sel { flex: 0 0 auto; max-width: 48%; }
.st-ctl .eo-sel { min-width: 132px; height: 28px; }
.mk-filters .eo-sel, .mk-kv .eo-sel { height: 32px; } .mk-kv .eo-sel { max-width: 170px; }

/* ---------------------------------------------------------------- ตะลุมบอน / Brawl: the Battlefield Officer's window */
.br-info, .br-quest, .br-shop { display: flex; flex-direction: column; gap: 8px; }
.br-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; font-weight: 900;
  color: #f1e2b8; background: rgba(10,8,4,.85); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14; }
.br-status span { color: #ffd76a; font-variant-numeric: tabular-nums; }
.br-status.open { color: #fff; background: linear-gradient(90deg, rgba(150,30,30,.85), rgba(60,10,10,.85)); box-shadow: 0 0 0 1px #000, 0 0 0 2px #ff6a5a, 0 0 14px rgba(255,90,70,.4); animation: brPulse 1.6s ease-in-out infinite alternate; }
@keyframes brPulse { from { filter: brightness(1); } to { filter: brightness(1.18); } }
.br-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.br-rows div { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 10px; background: rgba(10,8,4,.7); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #4d3812; }
.br-rows span { font-size: 12px; color: #cbbd9c; } .br-rows b { color: #fff3d0; } .br-rows b.bad { color: #ff8a7a; }
.br-how { padding: 8px 12px; border-radius: 10px; background: rgba(10,8,4,.6); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #4d3812; }
.br-how h3 { margin: 0 0 4px; color: var(--gold); font-size: 15px; } .br-how p { margin: 4px 0; color: #e9dcc0; font-size: 13px; line-height: 1.45; }
.br-enter { height: 48px; font-size: 17px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.br-enter small { font-size: 12px; font-weight: 700; color: #ffd0c0; }
.br-qcard { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: rgba(10,8,4,.8); box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6420; }
.br-qcard h3 { margin: 0; color: var(--gold); } .br-qcard p { margin: 0; color: #e9dcc0; }
.br-qprog { display: flex; align-items: center; gap: 10px; } .br-qprog .progress { flex: 1; } .br-qprog b { color: #ffd76a; min-width: 44px; text-align: right; }
.br-qrew { display: flex; align-items: center; gap: 8px; color: #e9dcc0; } .br-qrew img { width: 28px; height: 28px; image-rendering: pixelated; } .br-qrew b { color: #ffe08a; }
.br-note { font-size: 12px; color: #cbbd9c; text-align: center; }
.br-boxrow { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(10,8,4,.8); box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6420; }
.br-boxart { position: relative; flex: 0 0 150px; } .br-boxart img { width: 150px; height: auto; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.br-boxinfo { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .br-boxinfo b { color: var(--gold); font-size: 16px; } .br-boxinfo small { color: #e9dcc0; font-size: 12px; }
.br-boxinfo .ev-btn { align-self: flex-end; margin-top: 4px; }
.br-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@container (max-width: 560px) { .br-cards { grid-template-columns: 1fr; } .br-rows { grid-template-columns: 1fr; } }
.br-card { display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 12px; background: linear-gradient(180deg, rgba(40,28,10,.9), rgba(14,10,4,.9)); box-shadow: 0 0 0 1px #000, 0 0 0 2px #c99a34; }
.br-ch { display: flex; gap: 8px; align-items: center; padding-bottom: 4px; border-bottom: 1px solid #5a4418; }
.br-ch img { width: 40px; height: 40px; image-rendering: pixelated; padding: 3px; border-radius: 8px; background: radial-gradient(circle, rgba(255,200,120,.25), rgba(0,0,0,.4)); box-shadow: 0 0 0 1.5px #a8822e; }
.br-ch b { display: block; font-size: 13px; line-height: 1.25; } .br-ch small { color: #cbbd9c; font-size: 11px; }
.br-cgh { text-align: center; color: #9fef9a; font-weight: 900; font-size: 12px; margin-top: 2px; }
.br-cl { display: flex; align-items: center; gap: 6px; color: #9fef9a; font-weight: 800; font-size: 13px; }
.br-cl i, .tt-honor i { display: inline-grid; place-items: center; width: 18px; height: 18px; font-style: normal; font-size: 11px; color: #ffe08a; border: 1.5px solid #c99a34; border-radius: 4px; }
.tt-honor i { margin-right: 6px; }
.br-pool { margin-top: 4px; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px #4d3812; display: flex; flex-direction: column; gap: 1px; }
.br-pool div { color: #ffd76a; font-weight: 800; font-size: 11px; } .br-pool span { color: #e9dcc0; font-size: 11px; }
/* ย่อยอุปกรณ์ / Salvage (client/js/salvage.js): quick ticks, the ticked list, what it gives back, salvage ticked / all */
.sv { display: flex; flex-direction: column; gap: 6px; }
.sv-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.sv-allbox { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px; font-size: 13px; font-weight: 900; color: #f2d9b3; cursor: var(--cur-hover);
  background: var(--well); box-shadow: 0 0 0 1.5px #c99a34, inset 0 0 0 2px #544018; }
.sv-allbox input, .sv-row input { width: 17px; height: 17px; margin: 0; accent-color: #e2a92a; flex: none; }
.sv-allbox.off { opacity: .5; cursor: var(--cur); }
.sv-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 0; border-radius: 14px; font-size: 12px; font-weight: 800; color: #e9dcc0; cursor: var(--cur-hover);
  background: rgba(0,0,0,.5); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #4d3812; }
.sv-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--r); box-shadow: 0 0 0 1px #000; }
.sv-chip small { padding: 0 5px; border-radius: 7px; font-size: 10px; color: #cbbd9c; background: rgba(255,255,255,.08); }
.sv-chip.part { box-shadow: 0 0 0 1px #000, 0 0 0 1.5px var(--r); }
.sv-chip.on { color: #fff; background: color-mix(in srgb, var(--r) 30%, rgba(0,0,0,.6)); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--r), 0 0 8px color-mix(in srgb, var(--r) 45%, transparent); }
.sv-chip:hover, .sv-clear:hover:not(:disabled) { filter: brightness(1.15); }
.sv-clear { margin-left: auto; height: 28px; padding: 0 10px; border: 0; border-radius: 9px; font-size: 12px; font-weight: 800; color: #f1e2b8; cursor: var(--cur-hover);
  background: linear-gradient(#2a1f0e, #140e06); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #8a6420; }
.sv-clear:disabled { opacity: .45; cursor: var(--cur); }
.sv-list { display: flex; flex-direction: column; gap: 3px; max-height: min(46vh, 400px); padding: 3px; overflow-y: auto; border-radius: 12px; background: rgba(10,8,4,.62); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4c14, inset 0 0 18px rgba(0,0,0,.5); }
.sv.honor .sv-list { max-height: 260px; }
.sv-row { display: grid; grid-template-columns: 20px 36px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 3px 8px; border-radius: 9px; cursor: var(--cur-hover); border-bottom: 1px solid rgba(201,154,52,.12); }
.sv-row:hover:not(.off) { background: rgba(255,210,100,.07); }
.sv-row.on { background: linear-gradient(90deg, rgba(201,154,52,.4), rgba(201,154,52,.1)); box-shadow: inset 0 0 0 1.5px #c99a34; }
.sv-row.off { opacity: .55; cursor: var(--cur); }
.sv-ic { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; font-size: 20px; background: radial-gradient(circle, color-mix(in srgb, var(--r) 28%, transparent), rgba(0,0,0,.5) 75%); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px var(--r); }
.sv-ic img { width: 30px; height: 30px; image-rendering: pixelated; }
.sv-ic .ref { position: absolute; left: -3px; top: -4px; font-size: 9px; font-weight: 900; color: #fff; padding: 0 3px; border-radius: 5px; background: linear-gradient(180deg, #8a6420, #5a3e10); box-shadow: 0 0 0 1px #f3d67c; }
.sv-nm { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sv-nm b { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; } .sv-nm small { font-size: 11px; color: #cbbd9c; }
.sv-cards { display: inline-flex; gap: 2px; } .sv-cards i { display: grid; place-items: center; width: 20px; height: 20px; font-style: normal; font-size: 12px; border-radius: 4px; background: rgba(0,0,0,.5); box-shadow: inset 0 0 0 1px #ffd23b; }
.sv-cards i img { width: 17px; height: 17px; image-rendering: pixelated; }
.sv-get { display: inline-flex; justify-content: flex-end; min-width: 86px; }
.sv-g { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 12px; white-space: nowrap; } .sv-g b { color: #ffe08a; } .sv-g img { width: 18px; height: 18px; image-rendering: pixelated; }
.sv-why { font-size: 11px; font-weight: 800; color: #ffd76a; white-space: nowrap; }
.sv-none { padding: 18px; text-align: center; font-size: 13px; }
.sv-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 6px 10px; border-radius: 10px; font-size: 13px; font-weight: 800; color: #e9dcc0;
  background: rgba(0,0,0,.45); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #4d3812; }
.sv-sumget { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; } .sv-sumget .sv-g { font-size: 14px; }
.sv-warn { padding: 5px 10px; border-radius: 9px; font-size: 12px; font-weight: 800; color: #ffcf8a; background: rgba(160,90,20,.25); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #a0702a; }
.sv-last { padding: 5px 8px; border-radius: 9px; text-align: center; font-size: 12px; font-weight: 900; color: #8fff9a; background: rgba(40,140,60,.22); }
.sv-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sv-btns .rf-go { height: 44px; font-size: 16px; }
.sv-goall { height: 44px; border: 0; border-radius: 12px; font-size: 15px; font-weight: 900; color: #ffe3dc; cursor: var(--cur-hover);
  background: linear-gradient(180deg, #a8442e, #6a1e12); box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #c96a3a, 0 4px 0 #3e120a; }
.sv-goall:hover:not(:disabled) { filter: brightness(1.1); } .sv-goall:active:not(:disabled) { transform: translateY(2px); }
.sv-goall:disabled { opacity: .5; filter: grayscale(.6); cursor: var(--cur); }
.sv-note { font-size: 11px; color: var(--muted); text-align: center; }
.sv-open { display: block; width: 100%; margin: 6px 0; padding: 7px 10px; border: 0; border-radius: 10px; font-weight: 900; color: #e6ffe0; cursor: var(--cur-hover);
  background: linear-gradient(90deg, #12301a, #2a6a36 50%, #12301a); box-shadow: 0 0 0 1px #000, 0 0 0 2px #7fd88a, 0 0 12px rgba(127,216,138,.3); }
.sv-open:hover { filter: brightness(1.12); }
@container (max-width: 560px) { .sv-row { grid-template-columns: 20px 36px minmax(0, 1fr) auto; } .sv-cards { display: none; } .sv-btns { grid-template-columns: 1fr; } }
.br-none { text-align: center; padding: 6px; font-size: 13px; }
/* the Honor drill stone in the Honor Shop tab (client/js/drill.js): the stone row, then pick a piece | stone + piece -> result */
.dr-stone .dr-own { display: block; color: #ffd76a; font-weight: 800; }
.dr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 8px; }
@container (max-width: 560px) { .dr { grid-template-columns: 1fr; } }
.dr-list, .dr-main { display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 12px; background: rgba(10,8,4,.8); box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6420; min-width: 0; }
.dr-lh { text-align: center; } .dr-lh b { display: block; color: var(--gold); font-size: 14px; } .dr-lh small { color: var(--muted); font-size: 11px; }
.dr-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; padding: 4px 6px; border-radius: 9px; background: rgba(0,0,0,.45); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #4d3812; cursor: var(--cur-hover); }
.dr-row:hover:not(.off) { box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #c99a34; }
.dr-row.sel { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ff7ccb, 0 0 10px rgba(255,124,203,.35); background: rgba(70,20,50,.45); }
.dr-row.off { opacity: .6; cursor: var(--cur); }
.dr-row .dr-ic img { width: 30px; height: 30px; image-rendering: pixelated; display: block; }
.dr-nm { flex: 1 1 110px; min-width: 0; font-size: 12px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.dr-nm em { margin-left: 5px; padding: 0 5px; border-radius: 6px; font-style: normal; font-size: 10px; color: #0c2a06; background: #9fef9a; }
.dr-tag { font-size: 10px; font-weight: 800; color: #ffd76a; white-space: nowrap; }
.dr-sl { display: inline-flex; gap: 2px; }
.dr-sl i { display: inline-grid; place-items: center; width: 18px; height: 18px; font-style: normal; font-size: 12px; color: #a8966c; border-radius: 4px; background: rgba(0,0,0,.5); box-shadow: inset 0 0 0 1px #5a4418; }
.dr-sl i.c { box-shadow: inset 0 0 0 1px #ffd23b; } .dr-sl i img { width: 16px; height: 16px; image-rendering: pixelated; }
.dr-sl i.new { color: #9fef9a; box-shadow: inset 0 0 0 1.5px #9fef9a, 0 0 6px rgba(159,239,154,.5); }
.dr-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 4px; }
.dr-op { align-self: center; font-size: 18px; font-weight: 900; color: #ffd76a; }
.dr-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px; min-width: 0; border-radius: 10px; text-align: center; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1.5px #5a4418; }
.dr-box .dr-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9px; font-size: 18px; font-weight: 900; color: #a8966c; background: radial-gradient(circle, rgba(255,160,220,.2), rgba(0,0,0,.4)); box-shadow: 0 0 0 1.5px #a8822e; }
.dr-box .dr-ic img { width: 36px; height: 36px; image-rendering: pixelated; }
.dr-box b { font-size: 11px; line-height: 1.2; color: #fff3d0; overflow-wrap: anywhere; } .dr-box small { font-size: 10px; color: #cbbd9c; } .dr-box small.short { color: #ff8a80; font-weight: 800; }
.dr-res { box-shadow: inset 0 0 0 1.5px #ff7ccb, 0 0 10px rgba(255,124,203,.2); } .dr-res .dr-plus { color: #9fef9a; font-weight: 900; font-size: 11px; }
.dr-rate { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-weight: 900; color: #e9dcc0; } .dr-rate b { font-size: 22px; color: #ffe08a; }
.dr-rules { padding: 6px 10px; border-radius: 9px; font-size: 12px; color: #e9dcc0; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px #4d3812; }
.dr-rules b { color: #ffd76a; } .dr-rules ol { margin: 2px 0 0; padding-left: 18px; line-height: 1.45; }
.dr-warn { padding: 6px 10px; border-radius: 9px; font-size: 12px; font-weight: 800; color: #ffb3b3; background: rgba(160,30,30,.28); box-shadow: 0 0 0 1px #000, 0 0 0 1.5px #a0443a; }
.dr-last { padding: 5px 8px; border-radius: 9px; text-align: center; font-size: 12px; font-weight: 900; }
.dr-last.ok { color: #8fff9a; background: rgba(40,140,60,.22); } .dr-last.bad { color: #ff9a9a; background: rgba(160,30,30,.25); }
.dr-btns { display: grid; grid-template-columns: 100px 1fr; gap: 8px; }
.dr-btns .rf-go, .dr-btns .rf-cancel { height: 44px; } .dr-btns .rf-go { font-size: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dr-btns .rf-go small { font-size: 11px; font-weight: 700; color: #7a3a10; }
.tt-honor .tt-hdrill { color: #ffd76a; font-size: 11px; margin-top: 4px; }
/* an Honor accessory's PvP block in its tooltip / details */
.tt-honor { margin: 6px 0 2px; padding: 6px 8px; border-radius: 8px; color: #9fef9a; font-weight: 800; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px #5a4418; }
.tt-honor > div { display: flex; align-items: center; margin: 2px 0; }
.tt-honor .tt-gh { justify-content: center; color: #ffd76a; }
.tt-honor .tt-hbind { color: #ffb0d8; font-size: 11px; font-weight: 700; margin-top: 4px; }
/* the item's own illustration (the Honor box) in the full-screen viewer: landscape, not a card */
.cardart.big.art img { aspect-ratio: auto; image-rendering: auto; box-shadow: none; background: radial-gradient(circle, rgba(80,120,255,.25), rgba(0,0,0,0) 70%); }
/* the live board inside the temple */
#brawl-hud { position: absolute; left: 14px; top: 222px; min-width: 230px; padding: 8px 12px 10px; border-radius: 14px; pointer-events: auto; cursor: move; touch-action: none; user-select: none;
  color: #f1e2b8; background: linear-gradient(180deg, rgba(40,10,10,.88), rgba(14,6,4,.88)); box-shadow: 0 0 0 1px #000, 0 0 0 2px #c94a3a, 0 6px 18px rgba(0,0,0,.5); }
#brawl-hud .bh-t { display: flex; justify-content: space-between; gap: 12px; font-weight: 900; color: #ffd76a; }
#brawl-hud .bh-t span { color: #fff; font-variant-numeric: tabular-nums; }
#brawl-hud .bh-me { margin: 4px 0; font-size: 13px; } #brawl-hud .bh-me b { color: #ffe08a; } #brawl-hud .bh-me small { color: #cbbd9c; }
#brawl-hud ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
#brawl-hud li { display: flex; gap: 6px; align-items: center; } #brawl-hud li em { flex: 1; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#brawl-hud li b { color: #ffd76a; } #brawl-hud li.me em { color: #9fef9a; font-weight: 900; } #brawl-hud li.none { color: #cbbd9c; }
#brawl-hud.drag { opacity: .85; box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd76a, 0 8px 22px rgba(0,0,0,.6); }
#brawl-hud .bh-grip { font-style: normal; color: #c9a36a; margin-right: 2px; }
/* the results: the top 3 over the screen */
#brawl-result { position: fixed; inset: 0; z-index: 2147482000; display: grid; place-items: center; background: rgba(0,0,0,.55); animation: winIn .2s ease-out; }
.br-res { min-width: min(86vw, 420px); padding: 16px 20px 14px; border-radius: 18px; text-align: center; color: #f1e2b8;
  background: linear-gradient(180deg, #3a2a10, #140e06); box-shadow: 0 0 0 2px #000, 0 0 0 4px #ffd76a, 0 0 40px rgba(255,200,80,.45); }
.br-res h2 { margin: 0 0 12px; font-family: "Cinzel", Georgia, serif; color: #ffe08a; text-shadow: 0 2px 0 #000; }
.br-res p { margin: 8px 0; }
.br-podium { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 8px; }
.br-p { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; background: rgba(0,0,0,.4); box-shadow: inset 0 0 0 1.5px #6a4c14; }
.br-p span { font-size: 34px; line-height: 1; } .br-p b { color: #fff3d0; font-size: 15px; word-break: break-all; } .br-p small { color: #ffd76a; font-weight: 800; }
.br-p.p1 { order: 2; padding-top: 22px; box-shadow: inset 0 0 0 2px #ffd76a, 0 0 18px rgba(255,210,90,.4); }
.br-p.p2 { order: 1; } .br-p.p3 { order: 3; }
.br-res-n { display: block; margin-top: 10px; color: #cbbd9c; }

/* phones play in landscape only (ui.js PHONE): held upright, this covers the game */
#rotate-hint { display: none; position: fixed; inset: 0; z-index: 2147483600; place-items: center; text-align: center; color: #f1e2b8; pointer-events: auto;
  background: radial-gradient(circle at 50% 45%, rgba(40,28,10,.72), rgba(10,7,3,.94) 75%), url(../assets/art/title_bg.png) 27% 50% / cover no-repeat #0c0804; image-rendering: pixelated; }
body.turn-phone #rotate-hint { display: grid; }
#rotate-hint .rh-box { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; max-width: 320px; }
#rotate-hint .rh-phone { font-size: 72px; line-height: 1; animation: rhTurn 2.2s ease-in-out infinite; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
#rotate-hint b { font-size: 20px; color: #ffe08a; text-shadow: 0 2px 0 #000; }
#rotate-hint small { font-size: 14px; color: #cbbd9c; line-height: 1.5; }
@keyframes rhTurn { 0%, 25% { transform: rotate(0deg); } 50%, 75% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }

/* the bag's weight bar when nearly full (its width is patched in place: ui.js live numbers) */
.progress.wt.full > div { background: linear-gradient(90deg, #b0444e, #ff6b6b); }

/* event exchange below Lv.45 (ui.js WINDOWS.event) */
.ev-lvnote { margin: 6px 0; padding: 6px 10px; border-radius: 8px; background: rgba(229, 72, 77, 0.14); color: #ffb3b3; font-size: 12px; font-weight: 700; text-align: center; }

/* the PvP (Honor) accessory slots under the bag's character doll (ui.js pvpRow) and in the inspect window */
.doll-pvp { margin: 8px 0 2px; padding: 6px 8px 8px; border-radius: 12px; background: var(--well); box-shadow: 0 0 0 1.5px #d4b060, inset 0 0 0 2px #544018; }
.doll-pvp-h { text-align: center; font-size: 11px; font-weight: 800; color: #ff9ad0; margin-bottom: 6px; }
.doll-pvp-row { display: flex; justify-content: center; gap: 14px; }
.doll-pvp-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.doll-pvp-slot .item-cell { width: 54px; height: 54px; }
.doll-pvp-slot small { font-size: 10px; color: var(--muted); font-weight: 700; }
.insp-pvp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }

/* the bag's left side: the doll gives up height to the PvP row under it (it used to spill over the footer) */
.inv-l { display: flex; flex-direction: column; gap: 6px; }
.inv-l > .doll { flex: 1 1 auto; min-height: 0; }
.inv-l > .doll-pvp { flex: none; margin: 0; }
/* what the other side offers in a trade can be tapped for its details */
.tr-offer:not([data-mine]) .item-cell { cursor: var(--cur-hover); }

/* wide windows for landscape play: the skills in two columns, the settings in two columns (they stack on a narrow screen) */
.sk-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.sk-top .tabs-inline { margin: 0; }
.sk-top .skill-points { margin-left: auto; }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 0 10px; }
.st-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 10px; align-items: start; }
.st-cols .st-sec { margin-bottom: 10px; }

/* the target frame can be dragged (ui.js dragTf): a grip by the close button, no text selection / page pan while dragging */
#target-frame { z-index: 3; touch-action: none; user-select: none; -webkit-user-select: none; } /* over the HUD where it is put, under windows (10+) */
#tf-grip { position: absolute; right: 32px; top: 7px; z-index: 2; font-style: normal; font-size: 13px; line-height: 18px; color: #c9a85e; opacity: .55; cursor: move; pointer-events: none; }
#target-frame:hover #tf-grip { opacity: 1; }
#target-frame.drag { cursor: move; filter: brightness(1.08); box-shadow: var(--frame), 0 0 0 2px #f3d67c88; }

/* the card socket window: a full piece lists its slots, each with a Replace button */
.sock-note { font-size: 12px; margin: 0 0 8px; }
.sock-full { margin-bottom: 2px; }
.sock-slot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 4px 26px; padding: 3px 8px; border-radius: 8px; background: #0000001f; font-size: 13px; }

/* admin panel → Tools: the mass letter */
.adm-mail-to { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 6px; font-size: 13px; }
.adm-mail-att { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0; font-size: 13px; }
.adm-mail-att .adm-num { width: 130px; margin-left: 4px; }