/* Imperial Kal website. Palette: red / dark gray / black                   . The look: Frutiger Aero, the glossy sky-and-glass web of the early-to-mid 2000s,
   built around real Kal artwork (see docs/ART.md). No JavaScript; motion is CSS only. */
:root {
  --ink: #491515;
  --ink-soft: #794747;
  --blue: #ce1314;
  --blue-deep: #9f0a09;
  --aqua: #ff2f31;
  --green: #55b91a;
  --line: #f0b9b9;
  --glass: rgba(255,255,255,.78);
  --ui: "Segoe UI", "Frutiger", "Frutiger Linotype", "Lucida Grande", "Trebuchet MS", Tahoma, Verdana, sans-serif;
}
* { box-sizing: border-box; }
html { background: #b90a09; }
body { margin: 0; padding: 18px 10px 40px; min-height: 100vh; font: 13px/1.55 var(--ui); color: var(--ink);
  background:
    radial-gradient(ellipse 70% 38% at 78% 4%, rgba(255,255,255,.75), transparent 62%),
    radial-gradient(ellipse 60% 30% at 12% 20%, rgba(255,190,191,.55), transparent 65%),
    radial-gradient(ellipse 120% 26% at 50% 100%, #9be35a, #4fb51c 46%, transparent 72%),
    linear-gradient(#b20a09 0, #df1515 26%, #fa4748 52%, #ffc4c5 76%, #e9fbd2 90%, #7fd141 100%);
  background-attachment: fixed; }
a { color: #b20909; }
a:hover { color: #f40000; }
img { max-width: 100%; }

/* floating glass bubbles */
.sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sky i { position: absolute; bottom: -180px; border-radius: 50%; opacity: .75;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0, rgba(255,255,255,.35) 14%, rgba(255,255,255,.05) 46%, rgba(255,90,91,.22) 72%, rgba(255,255,255,.55) 100%);
  box-shadow: inset 0 0 14px rgba(255,255,255,.55), 0 0 10px rgba(255,255,255,.25); animation: bubble 26s linear infinite; }
.sky i:nth-child(1) { left: 3%; width: 120px; height: 120px; animation-duration: 31s; }
.sky i:nth-child(2) { left: 14%; width: 46px; height: 46px; animation-delay: -9s; animation-duration: 22s; }
.sky i:nth-child(3) { left: 88%; width: 150px; height: 150px; animation-delay: -4s; animation-duration: 36s; }
.sky i:nth-child(4) { left: 80%; width: 60px; height: 60px; animation-delay: -15s; }
.sky i:nth-child(5) { left: 94%; width: 34px; height: 34px; animation-delay: -21s; animation-duration: 19s; }
.sky i:nth-child(6) { left: 8%; width: 76px; height: 76px; animation-delay: -18s; animation-duration: 28s; }
.sky i:nth-child(7) { left: 47%; width: 40px; height: 40px; animation-delay: -12s; animation-duration: 24s; }
.sky i:nth-child(8) { left: 68%; width: 90px; height: 90px; animation-delay: -25s; animation-duration: 33s; }
@keyframes bubble { 0% { transform: translate(0, 0); } 50% { transform: translate(34px, -62vh); } 100% { transform: translate(-10px, -125vh); } }

#wrap { position: relative; z-index: 1; max-width: 1020px; margin: 0 auto; border-radius: 18px; overflow: hidden;
  background: rgba(255,255,255,.34); border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 0 0 1px rgba(147,10,9,.35), 0 18px 50px rgba(110,1,0,.45), inset 0 1px 0 #ffffff;
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }

/* ---- top bar: logo, status, call to action ---- */
#top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px 12px 16px;
  background: linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.55) 49%, rgba(255,215,215,.42) 50%, rgba(255,255,255,.62)); border-bottom: 1px solid rgba(255,255,255,.9); }
.logo { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.orb { position: relative; flex: none; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 118%, #ff6063 0, #e80f10 38%, #a20a09 74%, #750606 100%);
  border: 1px solid #7b0505; box-shadow: 0 3px 9px rgba(110,1,0,.5), inset 0 -7px 14px rgba(255,90,93,.55), inset 0 2px 3px rgba(255,255,255,.4); }
.orb::after { content: ""; position: absolute; left: 11%; right: 11%; top: 4%; height: 46%; border-radius: 50%;
  background: linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.08)); }
.orb img { width: 40px; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 1px 2px rgba(74,1,0,.75)); }
.name { display: flex; flex-direction: column; line-height: 1; }
.name small { font-size: 12px; font-weight: 600; letter-spacing: 7px; text-transform: uppercase; color: #b22828; margin: 0 0 2px 3px; }
.name b { font-size: 46px; font-weight: 700; font-style: italic; letter-spacing: -1px;
  background: linear-gradient(#ff1c1e 12%, #b80a09 50%, #8a0706 52%, #d81616 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 #ffffff) drop-shadow(0 2px 3px rgba(129,1,0,.3)); padding-right: 6px; }
.topright { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.topright .pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--ink);
  background: linear-gradient(#ffffff, #ffe3e3); border: 1px solid #e98e8e; box-shadow: inset 0 1px 0 #ffffff, 0 1px 3px rgba(110,0,0,.18); text-transform: none; letter-spacing: 0; margin: 0; text-shadow: none; }
.lampdot, .lamp i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1px solid #8f6f6f;
  background: radial-gradient(circle at 35% 28%, #ffffff, #dac5c5 45%, #997677); box-shadow: inset 0 -2px 3px rgba(0,0,0,.2); }
.up .lampdot, .lamp.up i { border-color: #2a7a0a; background: radial-gradient(circle at 35% 28%, #f4ffe0, #7fe32d 42%, #2f9a0c); box-shadow: 0 0 8px #7dff3a, inset 0 -2px 3px rgba(0,60,0,.35); animation: lamp 2.6s ease-in-out infinite; }
.down .lampdot, .lamp.down i { border-color: #8a1408; background: radial-gradient(circle at 35% 28%, #ffe9e2, #ff5a3a 42%, #b81a0a); box-shadow: 0 0 7px #ff6a4a; }
@keyframes lamp { 0%, 100% { box-shadow: 0 0 4px #7dff3a, inset 0 -2px 3px rgba(0,60,0,.35); } 50% { box-shadow: 0 0 13px 2px #9dff5a, inset 0 -2px 3px rgba(0,60,0,.35); } }

/* ---- glossy buttons ---- */
.btn { position: relative; display: inline-block; cursor: pointer; font: 600 13px var(--ui); text-decoration: none; color: #ffffff; text-shadow: 0 -1px 0 rgba(92,1,0,.55);
  padding: 7px 20px 8px; border-radius: 99px; border: 1px solid #9b0a09;
  background: linear-gradient(#ff6061 0, #ea1a1b 48%, #c30e0e 50%, #f42828 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(255,255,255,.25), 0 2px 5px rgba(110,1,0,.35); transition: filter .12s, transform .12s; }
.btn:hover { color: #ffffff; filter: brightness(1.1) saturate(1.1); transform: translateY(-1px); }
.btn:active { transform: translateY(0); filter: brightness(.95); }
.btn.go { border-color: #2c7d07; text-shadow: 0 -1px 0 rgba(20,80,0,.6); background: linear-gradient(#c9f77f 0, #6fce25 48%, #3fa80b 50%, #8be043 100%); }
.btn.small { font-size: 11px; padding: 4px 14px 5px; }
.btn.big { font-size: 17px; padding: 11px 30px 12px; }

/* ---- nav: one glossy bar ---- */
#nav { list-style: none; margin: 0; padding: 0 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px;
  background: linear-gradient(#ff4344 0, #e31616 48%, #be0c0b 50%, #ee1717 100%); border-top: 1px solid #ff9fa0; border-bottom: 1px solid #920a09;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 3px 8px rgba(110,1,0,.3); position: relative; z-index: 2; }
#nav a { display: block; margin: 5px 0; padding: 5px 15px 6px; border-radius: 99px; font-weight: 600; font-size: 13px; color: #ffffff; text-decoration: none;
  text-shadow: 0 -1px 0 rgba(92,1,0,.6); border: 1px solid transparent; transition: background .15s; }
#nav a:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.45); }
#nav a.on { color: #880a09; text-shadow: 0 1px 0 #ffffff; background: linear-gradient(#ffffff, #ffd9d9 50%, #ffc2c2 51%, #ffeeee); border-color: #ffffff; box-shadow: 0 1px 4px rgba(92,1,0,.4); }

/* ---- hero: real class art, cross-fading ---- */
#hero { position: relative; overflow: hidden; background: #f5cfcf; border-bottom: 1px solid rgba(255,255,255,.9); }
#hero.big { height: 340px; } #hero.slim { height: 150px; }
#hero img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% 22%; opacity: 0; animation: fade 24s infinite; }
#hero .h1 { animation-delay: -2s; } #hero .h2 { animation-delay: 6s; } #hero .h3 { animation-delay: 14s; }
#hero.slim img { object-position: 70% 16%; }
@keyframes fade { 0% { opacity: 0; transform: scale(1.0); } 5% { opacity: 1; } 33% { opacity: 1; } 40% { opacity: 0; transform: scale(1.05); } 100% { opacity: 0; } }
#hero .shine { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(138,8,7,.62), rgba(138,8,7,.22) 40%, transparent 58%), linear-gradient(rgba(255,255,255,.28), transparent 26%), linear-gradient(transparent 82%, rgba(255,255,255,.55)); }
.herotext { position: absolute; left: 30px; bottom: 30px; max-width: 440px; padding: 18px 22px 20px; border-radius: 16px; color: #ffffff;
  background: linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.12) 46%, rgba(166,10,9,.20) 47%, rgba(166,10,9,.34)); border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 8px 26px rgba(92,1,0,.45), inset 0 1px 0 rgba(255,255,255,.75); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.herotext h1 { margin: 0 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -.5px; text-shadow: 0 2px 6px rgba(83,1,0,.7); }
.herotext p { margin: 0 0 14px; font-size: 14px; text-shadow: 0 1px 3px rgba(83,1,0,.8); }
.herotext .cta { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
#hero.slim .herotext { bottom: 24px; padding: 10px 22px 12px; }
#hero.slim .herotext h1 { margin: 0; font-size: 26px; }

#notice { padding: 7px 16px; text-align: center; font-size: 12px; color: #6b4a00; background: linear-gradient(#fff6c9, #ffe58a); border-bottom: 1px solid #e3bf4a; }
#notice b { color: #b85a00; margin-right: 6px; text-transform: uppercase; letter-spacing: 1px; font-size: 11px; }

/* ---- columns and glass panels ---- */
#cols { display: grid; grid-template-columns: 196px minmax(0, 1fr) 196px; grid-template-areas: "left main right"; gap: 12px; padding: 14px 12px; align-items: start; }
#main { grid-area: main; min-width: 0; } #left { grid-area: left; } #right { grid-area: right; }

.panel, .scroll { background: var(--glass); border: 1px solid #ffffff; border-radius: 12px; margin-bottom: 12px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(166,19,18,.22), 0 6px 18px rgba(120,0,0,.22); }
.panel h4, .bar { position: relative; margin: 0; color: #ffffff; font-weight: 600; text-shadow: 0 -1px 0 rgba(92,1,0,.6);
  background: linear-gradient(#ff5455 0, #ec1a1a 48%, #c50e0e 50%, #f22121 100%); border-bottom: 1px solid #920a09; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.panel h4 { padding: 7px 12px 8px; font-size: 13px; }
.bar { margin: 0 -18px 14px; padding: 9px 18px 10px; font-size: 16px; letter-spacing: .2px; }
.scroll { padding: 0 18px 16px; background: linear-gradient(rgba(255,255,255,.93), rgba(255,240,240,.86)); }
.pb { padding: 11px 12px 10px; font-size: 12px; }
.pb p { margin: 0 0 8px; } .center { text-align: center; }
.sub { color: var(--ink-soft); font-size: 11px; }
.who { font-weight: 700; }
.hello { text-align: center; font-size: 15px; }

.menu { list-style: none; margin: 0 0 8px; padding: 0; }
.menu li { border-bottom: 1px solid #f7d5d5; } .menu li:last-child { border-bottom: 0; }
.menu a { display: block; padding: 6px 4px; text-decoration: none; font-weight: 600; }
.menu.icons a { padding-left: 34px; background: 2px 50%/26px 26px no-repeat; image-rendering: pixelated; }
.menu.icons a.i-gift { background-image: url(../img/kal/i-gift.png); } .menu.icons a.i-knight { background-image: url(../img/kal/i-knight.png); }
.menu.icons a.i-exp { background-image: url(../img/kal/i-exp.png); } .menu.icons a.i-news { background-image: url(../img/kal/i-news.png); }

.mini label { display: block; font-size: 11px; font-weight: 600; color: var(--ink-soft); margin-bottom: 7px; }
input, textarea, button { font: 13px var(--ui); }
input:not([type=checkbox]), textarea { width: 100%; padding: 6px 9px; color: #3b0c0c; background: #ffffff; border: 1px solid #dd7778; border-radius: 7px; box-shadow: inset 0 2px 4px rgba(110,0,0,.14); }
input:focus, textarea:focus { outline: 0; border-color: #d91617; box-shadow: inset 0 2px 4px rgba(110,0,0,.14), 0 0 0 3px rgba(255,35,35,.35); }

.kv { width: 100%; border-collapse: collapse; table-layout: fixed; }
.kv th { text-align: left; font-weight: 400; color: var(--ink-soft); padding: 2px 4px 2px 0; }
.kv td { text-align: right; font-weight: 700; padding: 2px 0; }
.lamp { text-align: center; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.lamp.up b { color: #2f8f0a; } .lamp.down b { color: #c4220f; }
.addr { margin: 7px 0 0; padding-top: 7px; border-top: 1px solid #f7d5d5; color: var(--ink-soft); text-align: center; }
.addr b { display: block; color: var(--ink); overflow-wrap: anywhere; }
.mono { font-family: Consolas, "Lucida Console", "DejaVu Sans Mono", monospace; font-size: 12px; }
.sample { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #8a4b00; background: linear-gradient(#fff3c2, #ffd76a); border: 1px solid #e0a92e; border-radius: 99px; padding: 0 8px; }

.top { list-style: none; margin: 0 0 6px; padding: 0; }
.top li { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid #f7d5d5; }
.top .n { width: 20px; height: 20px; flex: none; display: inline-block; text-align: center; font: 700 11px/19px var(--ui); color: #ffffff; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #f0dfdf, #a97f7f 55%, #7b5758); border: 1px solid #745353; text-shadow: 0 -1px 0 rgba(0,0,0,.35); }
.top .r1 .n { background: radial-gradient(circle at 35% 28%, #fff6c0, #f4bd1c 55%, #c58a00); border-color: #a87400; }
.top .r2 .n { background: radial-gradient(circle at 35% 28%, #ffffff, #c2a6a7 55%, #987979); border-color: #77858f; }
.top .r3 .n { background: radial-gradient(circle at 35% 28%, #ffe2c2, #dd8b3c 55%, #a85a12); border-color: #8f4a0c; }
.top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.top em { font-style: normal; font-weight: 700; color: var(--blue-deep); }
.finds { list-style: none; margin: 0 0 6px; padding: 0; }
.finds li { padding: 5px 0 5px 30px; border-bottom: 1px solid #f7d5d5; background: url(../img/kal/i-chest.png) 0 7px/24px 24px no-repeat; image-rendering: pixelated; }
.finds .by { display: block; color: var(--ink-soft); font-size: 11px; }
.more { text-align: right; font-size: 11px; margin: 5px 0 0; font-weight: 600; } .more a { text-decoration: none; }

.cls { display: inline-block; white-space: nowrap; }
.cls::before, .cls:empty { content: ""; display: inline-block; width: 22px; height: 22px; vertical-align: -6px; margin-right: 5px; background: #270c0c center/20px 20px no-repeat; border-radius: 5px; border: 1px solid #845656; image-rendering: pixelated; }
.cls:empty { margin-right: 0; flex: none; } .cls:empty::before { display: none; }
.cls-knight::before, .cls-knight:empty { background-image: url(../img/kal/i-knight.png); }
.cls-mage::before, .cls-mage:empty { background-image: url(../img/kal/i-mage.png); }
.cls-archer::before, .cls-archer:empty { background-image: url(../img/kal/i-archer.png); }
.item { font-weight: 700; }
.q-rare { color: #c30e0e; } .q-epic { color: #8a2fc9; } .q-legendary { color: #d96a00; }

.odo { margin: 2px 0 6px; }
.odo span { display: inline-block; width: 19px; padding: 3px 0; margin: 0 1px; font: 700 16px Consolas, "Courier New", monospace; color: #ffeaeb; text-shadow: 0 0 6px #ff5254;
  background: linear-gradient(#533030, #230e0e 49%, #0f0505 50%, #3b1919); border: 1px solid #1d0909; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }

/* ---- content ---- */
.scroll h1 { font-size: 26px; font-weight: 700; letter-spacing: -.3px; color: var(--blue-deep); margin: 2px 0 2px; }
.scroll h3 { font-size: 16px; font-weight: 700; color: var(--blue-deep); margin: 14px 0 4px; }
.scroll p { margin: 0 0 10px; }
.scroll ul { padding-left: 20px; margin: 0 0 10px; } .scroll li { margin-bottom: 3px; }
.scroll small { color: var(--ink-soft); font-size: 11px; }
.scroll code { background: #fbe3e3; border-radius: 4px; padding: 0 4px; font-size: 12px; }
.note { color: var(--ink-soft); font-style: italic; }
.byline { color: var(--ink-soft); font-size: 12px; border-bottom: 1px solid var(--line); padding-bottom: 9px; }
.article .body { font-size: 14px; line-height: 1.7; }

.news { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.news .when { flex: none; width: 84px; text-align: center; }
.news .when b { display: block; font-size: 12px; color: #ffffff; text-shadow: 0 -1px 0 rgba(92,1,0,.6); padding: 4px 0; border-radius: 8px 8px 0 0; border: 1px solid #9b0a09;
  background: linear-gradient(#ff6061 0, #ea1a1b 48%, #c30e0e 50%, #f42828 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.news .when span { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #2c6d08; background: linear-gradient(#f1ffd9, #cdf29b); border: 1px solid #8ccb4d; border-top: 0; border-radius: 0 0 8px 8px; padding: 1px 0 2px; }
.news .what { flex: 1; min-width: 0; }
.news h3 { margin: 0 0 4px; font-size: 18px; } .news h3 a { text-decoration: none; }
.news .what > p { margin-bottom: 4px; }
.more.all { margin-top: 10px; font-size: 12px; }
.pager { display: flex; justify-content: space-between; margin-top: 10px; font-weight: 700; }

/* class cards: the official class renders */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.card { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; text-decoration: none; border: 1px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(166,19,18,.4), 0 6px 14px rgba(120,0,0,.3); background: #e58283 no-repeat; transition: transform .25s, box-shadow .25s; }
.card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,.08) 34%, transparent 35%); pointer-events: none; }
.card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 0 0 2px #ff5253, 0 12px 24px rgba(120,0,0,.45); }
.c-knight { background-image: url(../img/kal/class-knight.jpg); background-size: auto 104%; background-position: 86% 0; }
.c-mage { background-image: url(../img/kal/class-mage.jpg); background-size: auto 104%; background-position: 79% 0; }
.c-archer { background-image: url(../img/kal/class-archer.jpg); background-size: auto 104%; background-position: 82% 0; }
.plate { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 7px 8px 8px; text-align: center; border-radius: 10px; color: #ffffff;
  background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.14) 48%, rgba(156,10,9,.42) 49%, rgba(156,10,9,.62)); border: 1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.plate b { display: block; font-size: 17px; text-shadow: 0 1px 3px rgba(83,1,0,.8); }
.plate i { display: block; font-size: 11px; font-style: normal; text-shadow: 0 1px 2px rgba(83,1,0,.9); }
.portrait { float: right; width: 200px; aspect-ratio: 3 / 4; margin: 0 0 8px 16px; border-radius: 14px; border: 1px solid #ffffff; box-shadow: 0 0 0 1px rgba(166,19,18,.4), 0 6px 14px rgba(120,0,0,.3); background-color: #e58283; background-repeat: no-repeat; }
.class::after { content: ""; display: block; clear: both; }

/* screenshots and loading art */
.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.shots a, .arts img { display: block; border-radius: 10px; overflow: hidden; border: 1px solid #ffffff; box-shadow: 0 0 0 1px rgba(166,19,18,.4), 0 4px 10px rgba(120,0,0,.28); transition: transform .2s; }
.shots a:hover { transform: scale(1.04); }
.shots img { display: block; width: 100%; height: auto; }
.arts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.arts img { width: 100%; height: auto; }

/* tables */
.rank { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 10px; background: #ffffff; border: 1px solid #e28383; border-radius: 10px; overflow: hidden; }
.rank th { text-align: left; font-size: 12px; font-weight: 700; color: #880a09; padding: 7px 10px; background: linear-gradient(#ffffff, #fddfdf 50%, #fbcbcb 51%, #ffe9e9); border-bottom: 1px solid #e28383; }
.rank td { padding: 6px 10px; border-bottom: 1px solid #f8e1e1; vertical-align: middle; }
.rank tr:last-child td { border-bottom: 0; }
.rank tr:nth-child(odd) td { background: #fef3f3; }
.rank .n { width: 40px; text-align: center; font-weight: 700; }
.rank .t-number { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.rank .r1 td { background: linear-gradient(#fffbe0, #fff0b0); } .rank .r2 td { background: linear-gradient(#fffbfb, #f2e6e6); } .rank .r3 td { background: linear-gradient(#fff6ec, #fbdfc4); }
.rank .r1 td.n { color: #b07a00; font-size: 16px; }
.rank form { margin: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.tabs a { padding: 5px 15px 6px; border-radius: 99px; font-weight: 600; text-decoration: none; color: #880a09; background: linear-gradient(#ffffff, #ffdcdc); border: 1px solid #e28383; box-shadow: inset 0 1px 0 #ffffff; }
.tabs a.on, .tabs a:hover { color: #ffffff; text-shadow: 0 -1px 0 rgba(92,1,0,.6); border-color: #9b0a09; background: linear-gradient(#ff6061 0, #ea1a1b 48%, #c30e0e 50%, #f42828 100%); }
.sheet { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.sheet th { width: 150px; text-align: left; vertical-align: top; padding: 7px 8px; font-weight: 700; color: var(--blue-deep); border-bottom: 1px solid var(--line); }
.sheet td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
.kv.wide { width: auto; table-layout: auto; } .kv.wide th { color: var(--blue-deep); font-weight: 700; padding-right: 14px; } .kv.wide td { text-align: left; font-weight: 400; }
.pill, .state { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 1px 9px 2px; border-radius: 99px; color: #ffffff; background: linear-gradient(#f64545, #c30e0e); border: 1px solid #9b0a09; margin-right: 4px; text-shadow: 0 -1px 0 rgba(0,0,0,.3); }
.state.ok { background: linear-gradient(#9fe04f, #3fa80b); border-color: #2c7d07; } .state.wait { background: linear-gradient(#ffd060, #e89500); border-color: #b87400; } .state.bad { background: linear-gradient(#ff8a70, #d42a12); border-color: #9a1a08; }

.form .row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: start; margin-bottom: 11px; }
.form .row > label { padding-top: 7px; font-weight: 700; color: var(--blue-deep); }
.form .row > label i { font-weight: 400; color: var(--ink-soft); }
.form input:not([type=checkbox]) { max-width: 270px; display: block; }
.form #n-title, .form textarea { max-width: none; }
.form small { display: block; margin-top: 3px; }
.hp { position: absolute; left: -5000px; height: 0; overflow: hidden; }
.inline { margin-bottom: 10px; } .inline input { width: 220px; display: inline-block; }
.err, .warn, .flash { margin: 0 0 12px; padding: 9px 14px; border: 1px solid; border-radius: 9px; }
.err { color: #7a1206; background: linear-gradient(#fff1ed, #ffd3c8); border-color: #ee8a75; }
.warn { color: #6b4a00; background: linear-gradient(#fffbe3, #ffeaa0); border-color: #e3bf4a; }
.flash { color: #245c06; background: linear-gradient(#f6ffe6, #d3f5a6); border-color: #8ccb4d; }
.lost { font-size: 17px; text-align: center; padding: 18px 0 8px; }
.steps { padding-left: 22px; } .steps li { margin-bottom: 7px; font-size: 14px; }
.feat dt { font-size: 15px; font-weight: 700; color: var(--blue-deep); } .feat dd { margin: 0 0 10px; }

#foot { text-align: center; padding: 14px 18px 16px; font-size: 11px; color: #662121; background: linear-gradient(rgba(255,255,255,.78), rgba(255,225,225,.6)); border-top: 1px solid #ffffff; }
#foot p { margin: 0 0 3px; } #foot .dim { color: #8d5454; }

@media (max-width: 880px) {
  body { padding: 0 0 20px; }
  #wrap { border-radius: 0; border-left: 0; border-right: 0; }
  #top { padding: 10px 12px; } .orb { width: 50px; height: 50px; } .orb img { width: 30px; } .name b { font-size: 34px; } .name small { font-size: 10px; letter-spacing: 5px; }
  #hero.big { height: 300px; } #hero.slim { height: 120px; }
  #hero img { object-position: 78% 20%; }
  .herotext { left: 12px; right: 12px; bottom: 14px; max-width: none; padding: 12px 14px 14px; } .herotext h1 { font-size: 22px; }
  #cols { grid-template-columns: 1fr 1fr; grid-template-areas: "main main" "left right"; padding: 10px 8px; gap: 10px; }
  .form .row { grid-template-columns: 1fr; gap: 2px; } .form .row > span { display: none; }
  .shots { grid-template-columns: repeat(2, 1fr); }
  .portrait { width: 130px; }
}
@media (max-width: 540px) {
  .topright .pill { display: none; }
  #nav a { padding: 4px 10px 5px; font-size: 12px; }
  #cols { grid-template-columns: 1fr; grid-template-areas: "main" "left" "right"; }
  .paths { grid-template-columns: 1fr; } .card { aspect-ratio: 16 / 10; }
  .arts { grid-template-columns: 1fr; }
  .news { flex-direction: column; gap: 5px; } .news .when { width: auto; display: flex; } .news .when b, .news .when span { padding: 2px 10px; border-radius: 99px; border: 1px solid #9b0a09; } .news .when span { margin-left: 5px; border-color: #8ccb4d; }
  .sheet th { width: 100px; } .scroll { padding: 0 12px 14px; } .bar { margin: 0 -12px 12px; padding: 8px 12px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .sky i { animation: none; display: none; } #hero img { animation: none; } #hero .h1 { opacity: 1; } .up .lampdot, .lamp.up i { animation: none; } .btn, .card, .shots a { transition: none; }
}

/* ================= dark surfaces: red / dark gray / black =================
   Everything above keeps the Aero gloss with blue turned to red. This block turns the light
   surfaces (sky, glass, panels, inputs, tables) to black and dark gray and the text to light. */
:root { --ink: #e9e9ec; --ink-soft: #a3a3ab; --line: #3a3a40; --blue-deep: #ff5a4a; --glass: rgba(34, 34, 38, .80); }
html { background: #050506; }
body { color: var(--ink); background:
    radial-gradient(ellipse 70% 38% at 78% 4%, rgba(255,70,50,.38), transparent 62%),
    radial-gradient(ellipse 60% 30% at 12% 20%, rgba(150,150,160,.22), transparent 65%),
    radial-gradient(ellipse 120% 26% at 50% 100%, #c2180c, #5e0803 46%, transparent 72%),
    linear-gradient(#030304 0, #131316 26%, #26262b 52%, #3a3a40 76%, #2a1513 90%, #7a0d06 100%);
  background-attachment: fixed; }
a { color: #ff6a5a; } a:hover { color: #ffa093; }
.sky i { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0, rgba(255,255,255,.25) 14%, rgba(255,255,255,.03) 46%, rgba(255,60,40,.18) 72%, rgba(255,255,255,.4) 100%); }
#wrap { background: rgba(20,20,23,.55); border-color: rgba(255,255,255,.28); box-shadow: 0 0 0 1px #000, 0 18px 50px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.35); }
#top { background: linear-gradient(rgba(92,92,100,.92), rgba(52,52,58,.9) 49%, rgba(24,24,27,.92) 50%, rgba(44,44,49,.92)); border-bottom-color: #000; }
.name small { color: #d2d2d8; }
.name b { filter: drop-shadow(0 1px 0 rgba(255,255,255,.35)) drop-shadow(0 2px 4px rgba(0,0,0,.8)); }
.topright .pill { color: #f0f0f2; background: linear-gradient(#5a5a62, #2c2c31 49%, #18181b 50%, #303035); border-color: #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 3px rgba(0,0,0,.5); }
/* secondary buttons: graphite gloss; primary ("go"): red gloss */
.btn { border-color: #000; text-shadow: 0 -1px 0 rgba(0,0,0,.7); background: linear-gradient(#8a8a93 0, #4a4a52 48%, #232327 50%, #45454c 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(255,255,255,.15), 0 2px 5px rgba(0,0,0,.6); }
.btn.go { border-color: #4a0502; text-shadow: 0 -1px 0 rgba(80,0,0,.7); background: linear-gradient(#ff9a8c 0, #e8291a 48%, #b01006 50%, #ef4a3a 100%); }
#nav { border-top-color: #ff9d92; border-bottom-color: #3d0402; }
#nav a.on { color: #fff; text-shadow: 0 -1px 0 #000; background: linear-gradient(#6a6a72, #36363c 50%, #111113 51%, #2c2c31); border-color: rgba(255,255,255,.55); box-shadow: 0 1px 4px rgba(0,0,0,.6); }
#hero { background: #111; border-bottom-color: #000; }
#hero .shine { background: linear-gradient(90deg, rgba(6,6,8,.72), rgba(6,6,8,.26) 40%, transparent 58%), linear-gradient(rgba(255,255,255,.22), transparent 26%), linear-gradient(transparent 82%, rgba(0,0,0,.5)); }
.herotext { background: linear-gradient(rgba(255,255,255,.26), rgba(255,255,255,.08) 46%, rgba(0,0,0,.34) 47%, rgba(0,0,0,.52)); border-color: rgba(255,255,255,.5); box-shadow: 0 8px 26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.6); }
.herotext h1, .herotext p { text-shadow: 0 2px 6px rgba(0,0,0,.85); }
#notice { color: #ffd9d4; background: linear-gradient(#4a0c08, #2a0604); border-bottom-color: #000; } #notice b { color: #ff7a6a; }
.panel, .scroll { border-color: rgba(255,255,255,.22); box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0,0,0,.55); }
.scroll { background: linear-gradient(rgba(46,46,51,.93), rgba(28,28,31,.90)); }
.menu li, .top li, .finds li, .addr { border-color: #3a3a40; }
input:not([type=checkbox]), textarea { color: #f2f2f4; background: #151517; border-color: #55555d; box-shadow: inset 0 2px 5px rgba(0,0,0,.6); }
input:focus, textarea:focus { border-color: #ff4a3a; box-shadow: inset 0 2px 5px rgba(0,0,0,.6), 0 0 0 3px rgba(255,60,40,.35); }
.lamp.up b { color: #8cf04a; } .lamp.down b { color: #ff6a5a; }
.cls::before, .cls:empty { background-color: #0a0a0b; border-color: #5a5a62; }
.top em { color: #ff6a5a; }
.q-rare { color: #6fc0ff; } .q-epic { color: #d48cff; } .q-legendary { color: #ffa53a; }
.odo span { color: #fff0ee; text-shadow: 0 0 6px #ff5a4a; background: linear-gradient(#4a4a50, #1a1a1c 49%, #050505 50%, #26262a); border-color: #000; }
.scroll code { background: #18181b; }
.news .when span { color: #e6e6ea; background: linear-gradient(#5a5a62, #2c2c31); border-color: #000; }
.card, .portrait { background-color: #1c1c1f; border-color: rgba(255,255,255,.45); box-shadow: 0 0 0 1px #000, 0 6px 14px rgba(0,0,0,.6); }
.card:hover { box-shadow: 0 0 0 2px #ff5a4a, 0 12px 24px rgba(0,0,0,.7); }
.plate { background: linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.10) 48%, rgba(0,0,0,.50) 49%, rgba(0,0,0,.70)); border-color: rgba(255,255,255,.55); }
.plate b, .plate i { text-shadow: 0 1px 3px #000; }
.shots a, .arts img { border-color: rgba(255,255,255,.4); box-shadow: 0 0 0 1px #000, 0 4px 10px rgba(0,0,0,.6); }
.rank { background: #1b1b1e; border-color: #000; }
.rank th { color: #fff; background: linear-gradient(#5e5e66, #303035 50%, #151517 51%, #2a2a2e); border-bottom-color: #000; text-shadow: 0 -1px 0 #000; }
.rank td { border-bottom-color: #303035; }
.rank tr:nth-child(odd) td { background: #232327; }
.rank .r1 td { background: linear-gradient(#5a4a12, #3d3008); } .rank .r2 td { background: linear-gradient(#4a4a52, #34343a); } .rank .r3 td { background: linear-gradient(#55351a, #3b230f); }
.rank .r1 td.n { color: #ffd24a; }
.tabs a { color: #e6e6ea; background: linear-gradient(#5a5a62, #2c2c31 49%, #18181b 50%, #303035); border-color: #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.tabs a.on, .tabs a:hover { border-color: #4a0502; }
.err { color: #ffd9d4; background: linear-gradient(#5a120c, #360a06); border-color: #a3261a; }
.warn { color: #ffe9b0; background: linear-gradient(#4a3a0c, #2e2406); border-color: #8a6a12; }
.flash { color: #dff5c8; background: linear-gradient(#24400f, #152808); border-color: #4f8a35; }
.sample { color: #2a1a00; }
#foot { color: #b4b4bc; background: linear-gradient(rgba(44,44,49,.9), rgba(16,16,18,.92)); border-top-color: rgba(255,255,255,.2); } #foot .dim { color: #7c7c85; }
@media (max-width: 540px) { .news .when b { border-color: #4a0502; } .news .when span { border-color: #000; } }

/* hero: one picture (the staff-bearer wallpaper), no rotation */
#hero { background: #0a0610; }
#hero img, #hero.slim img { opacity: 1; animation: none; object-position: 78% 12%; }
#hero.slim img { object-position: 78% 9%; }
@media (max-width: 880px) { #hero img, #hero.slim img { object-position: 76% 10%; } }

/* download list */
.dl .sum { word-break: break-all; opacity: .75; font-size: 11px; }
.dl td:last-child { text-align: right; white-space: nowrap; }

/* ================= launcher treatment                    =================
   Same dress as the V3 launcher: Cinzel for the title, headers and buttons, engraved gold lettering,
   bevelled bronze over red lacquer, the original client's gold corner scrollwork. Layout, art and the
   dark/red palette above are unchanged. Cinzel is bundled (SIL OFL, static/fonts/Cinzel-OFL.txt). */
@font-face { font-family: "Cinzel"; src: url(../fonts/Cinzel-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }
:root { --gold: #e5ca8b; --gold-hi: #fff1c4; --bronze: #a8854a; --bronze-dk: #4d3a1a; --lacquer: #8e1512; --lacquer-dk: #4a0705;
  --cut: 0 -1px 0 rgba(255,241,196,.55), 0 2px 0 #140a02, 0 3px 5px rgba(0,0,0,.7);
  --title: "Cinzel", "Trajan Pro", "Times New Roman", serif; }

/* frame: double gold line, as on the launcher window */
#wrap { border: 1px solid var(--bronze); border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 4px #0b0b0c, 0 0 0 5px var(--bronze-dk), 0 18px 50px rgba(0,0,0,.75); overflow: hidden; }
.panel, .scroll { border: 1px solid var(--bronze-dk); border-radius: 3px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(229,202,139,.10), 0 6px 18px rgba(0,0,0,.55); overflow: hidden; }

/* title: gold mark and engraved name */
#top { background: linear-gradient(#1b1b1e, #0a0a0b); border-bottom: 1px solid var(--bronze-dk); }
.orb { width: 62px; height: 62px; border-radius: 0; border: 0; background: none; box-shadow: none; }
.orb::after { display: none; }
.mark { display: block; width: 62px; height: 55px; background: linear-gradient(var(--gold-hi), var(--gold) 45%, var(--bronze));
  -webkit-mask: url(../img/kal/logo.svg) center/contain no-repeat; mask: url(../img/kal/logo.svg) center/contain no-repeat; filter: drop-shadow(0 2px 2px #000); }
.name { flex-direction: row; align-items: baseline; gap: 12px; }
.name small, .name b { font-family: var(--title); font-weight: 700; font-style: normal; font-size: 34px; letter-spacing: 1.5px; text-transform: none; margin: 0; padding: 0;
  color: var(--gold); background: none; -webkit-text-fill-color: currentColor; filter: none; text-shadow: var(--cut); }
.topright .pill { border-radius: 2px; border-color: var(--bronze-dk); background: #101011; box-shadow: inset 0 0 0 1px #000; }

/* buttons: bevelled bronze plate over red lacquer; secondary is the same plate over black */
.btn, .btn.go { font-family: var(--title); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 -1px 0 rgba(255,241,196,.35), 0 1px 0 #140a02, 0 2px 3px #000;
  border-radius: 2px; border: 1px solid #1a1206; padding: 8px 20px 7px;
  background: linear-gradient(#b3221d, var(--lacquer) 45%, #6d0e0b 55%, #7d120f);
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 2px var(--bronze-dk), inset 0 0 0 3px rgba(0,0,0,.45), inset 0 5px 6px -3px rgba(255,255,255,.28), 0 2px 5px rgba(0,0,0,.7); }
.btn:not(.go) { background: linear-gradient(#3a3a3f, #1c1c1f 45%, #0c0c0d 55%, #18181a); }
.btn:hover { color: #fff; filter: brightness(1.25); transform: none; }
.btn.small { font-size: 10px; padding: 6px 13px 5px; letter-spacing: 1px; }
.btn.big { font-size: 17px; padding: 13px 32px 11px; letter-spacing: 3px; }

/* nav and section headers: lacquer bar between bronze lines, engraved Cinzel */
#nav { background: linear-gradient(#a81c18, var(--lacquer) 50%, #5e0b09); border-top: 1px solid var(--bronze); border-bottom: 1px solid var(--bronze); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 #000, 0 3px 8px rgba(0,0,0,.6); }
#nav a { font-family: var(--title); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); border-radius: 2px; text-shadow: 0 1px 0 #140a02, 0 2px 3px #000; padding: 6px 12px 5px; }
#nav a:hover { color: var(--gold-hi); background: rgba(0,0,0,.25); border-color: var(--bronze-dk); }
#nav a.on { color: var(--gold-hi); background: linear-gradient(#141415, #050505); border-color: var(--bronze); box-shadow: inset 0 0 0 1px #000; text-shadow: 0 1px 0 #000; }
.panel h4, .bar { font-family: var(--title); font-weight: 700; letter-spacing: 1.2px; color: var(--gold); text-shadow: 0 -1px 0 rgba(255,241,196,.3), 0 2px 0 #140a02, 0 3px 4px rgba(0,0,0,.6);
  background: linear-gradient(#a81c18, var(--lacquer) 50%, #5e0b09); border-bottom: 1px solid var(--bronze); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 #000; }
.panel h4 { font-size: 12px; padding: 8px 12px 6px; }
.bar { font-size: 16px; padding: 11px 18px 8px; }
.rank th { font-family: var(--title); font-size: 11px; letter-spacing: 1px; color: var(--gold); background: linear-gradient(#232326, #0e0e0f); border-bottom: 1px solid var(--bronze-dk); }
.tabs a { font-family: var(--title); font-size: 11px; letter-spacing: 1px; border-radius: 2px; color: var(--gold); background: #101011; border-color: var(--bronze-dk); box-shadow: none; }
.tabs a.on, .tabs a:hover { color: var(--gold-hi); background: linear-gradient(#a81c18, #5e0b09); border-color: var(--bronze); }

/* hero: gold frame line and the client's corner scrollwork, reflected into the four corners */
#hero { border-bottom: 1px solid var(--bronze-dk); }
#hero .shine { background: linear-gradient(90deg, rgba(4,4,5,.80), rgba(4,4,5,.30) 40%, transparent 58%), linear-gradient(transparent 80%, rgba(0,0,0,.55)); box-shadow: inset 0 0 0 5px rgba(0,0,0,.35), inset 0 0 0 6px var(--bronze-dk), inset 0 0 0 8px rgba(0,0,0,.5), inset 0 0 0 9px rgba(229,202,139,.55); }
.cn { position: absolute; width: 61px; height: 61px; background: url(../img/kal/corner.png) no-repeat; image-rendering: pixelated; pointer-events: none; }
.cn.tl { left: 3px; top: 3px; } .cn.tr { right: 3px; top: 3px; transform: scaleX(-1); }
.cn.bl { left: 3px; bottom: 3px; transform: scaleY(-1); } .cn.br { right: 3px; bottom: 3px; transform: scale(-1); }
#hero.slim .cn.bl, #hero.slim .cn.br { display: none; }
.herotext { left: 44px; bottom: 44px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.herotext h1, #hero.slim .herotext h1 { font-family: var(--title); font-size: 32px; letter-spacing: 2px; color: var(--gold); text-shadow: var(--cut); }
#hero.slim .herotext { left: 44px; bottom: 50px; padding: 0; }
.herotext h1::after { content: ""; display: block; height: 1px; margin-top: 8px; background: linear-gradient(90deg, transparent, var(--bronze) 20%, var(--gold) 50%, var(--bronze) 80%, transparent); }
#notice { border-bottom: 1px solid var(--bronze-dk); } #notice b { font-family: var(--title); color: var(--gold); }

/* plates, cards, counters, inputs: square the gloss, gold edge */
.card, .portrait, .shots a, .arts img { border-radius: 3px; border-color: var(--bronze); }
.card::before { display: none; }
.card:hover { box-shadow: 0 0 0 1px var(--gold), 0 12px 24px rgba(0,0,0,.7); }
.plate { border-radius: 2px; border: 1px solid #1a1206; background: linear-gradient(rgba(20,20,22,.88), rgba(0,0,0,.92)); box-shadow: inset 0 0 0 1px var(--bronze); }
.plate b { font-family: var(--title); letter-spacing: 2px; color: var(--gold); text-shadow: var(--cut); }
.odo span { border-radius: 0; color: var(--gold-hi); text-shadow: none; background: linear-gradient(var(--bronze), #6b4f22); border: 1px solid #1a1206; box-shadow: inset 0 0 0 1px rgba(255,241,196,.35); color: #1a0d02; }
input:not([type=checkbox]), textarea { border-radius: 2px; border-color: var(--bronze-dk); }
input:focus, textarea:focus { border-color: var(--gold); box-shadow: inset 0 2px 5px rgba(0,0,0,.6), 0 0 0 2px rgba(229,202,139,.25); }
.news .when b, .news .when span { border-radius: 2px; }
.kv th, .sheet th, .feat dt { color: var(--gold); }
#foot { border-top: 1px solid var(--bronze-dk); background: #0a0a0b; }
.sky { display: none; } /* the Aero bubbles do not belong on this frame */
@media (max-width: 760px) { .name small, .name b { font-size: 24px; } .herotext { left: 20px; bottom: 26px; } }
.dl td:nth-child(2) { white-space: nowrap; }

/* ================= data pages: rankings, rare finds, server info ================= */
.bar .sample, .panel h4 .sample { float: right; margin-top: 2px; }
.sample { font-family: var(--ui); border-radius: 2px; color: var(--gold); background: #0c0c0d; border: 1px solid var(--bronze-dk); letter-spacing: 1px; text-shadow: none; font-size: 9px; padding: 1px 7px; }
.tw { overflow-x: auto; margin-bottom: 10px; border: 1px solid var(--bronze-dk); box-shadow: 0 0 0 1px #000; }
.tw .rank { margin: 0; border: 0; border-radius: 0; }
.rank { border-radius: 0; border-color: var(--bronze-dk); }
.rank th { white-space: nowrap; padding: 9px 10px 7px; }
.rank td { padding: 7px 10px; border-bottom-color: #2a2a2e; }
.rank tr:nth-child(odd) td { background: #1f1f22; } .rank tr:nth-child(even) td { background: #19191b; }
.rank tr:hover td { background: #2b2420; }
.rank th.t-number, .rank th.t-time, .rank td.t-time { text-align: right; }
.rank td.t-time { color: var(--ink-soft); white-space: nowrap; }
.rank .none, p.none { text-align: center; color: var(--ink-soft); padding: 26px 10px; }
.board .n { width: 54px; }
.board td.n span { display: inline-block; min-width: 26px; padding: 1px 4px; font: 700 13px var(--title); color: var(--ink-soft); }
.board .r1 td, .board .r2 td, .board .r3 td { background: #1f1f22; }
.board .r1 td { background: linear-gradient(90deg, rgba(229,202,139,.20), rgba(229,202,139,.04) 60%); }
.board .r2 td { background: linear-gradient(90deg, rgba(200,200,210,.14), rgba(200,200,210,.03) 60%); }
.board .r3 td { background: linear-gradient(90deg, rgba(190,120,60,.16), rgba(190,120,60,.03) 60%); }
.board .r1 td.n span, .board .r2 td.n span, .board .r3 td.n span { color: #1a0d02; border: 1px solid #1a1206; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); font-size: 13px; }
.board .r1 td.n span { background: linear-gradient(#fff1c4, #c9a24a); } .board .r2 td.n span { background: linear-gradient(#f2f2f5, #9a9aa4); } .board .r3 td.n span { background: linear-gradient(#f0c9a0, #a8683a); }
.rank .r1 td.n { font-size: inherit; }
.board .who { color: #fff; } .board td.t-number { color: var(--gold); }
.top .n { border-radius: 2px; font-family: var(--title); background: #2a2a2e; border-color: #000; color: var(--ink-soft); text-shadow: none; }
.top .r1 .n { background: linear-gradient(#fff1c4, #c9a24a); color: #1a0d02; border-color: #1a1206; } .top .r2 .n { background: linear-gradient(#f2f2f5, #9a9aa4); color: #1a0d02; border-color: #1a1206; } .top .r3 .n { background: linear-gradient(#f0c9a0, #a8683a); color: #1a0d02; border-color: #1a1206; }
.top em { color: var(--gold); }
.cls::before, .cls:empty { border-radius: 2px; border-color: var(--bronze-dk); }
.tabs a.q-rare { color: #6fc0ff; } .tabs a.q-epic { color: #d48cff; } .tabs a.q-legendary { color: #ffa53a; }
.tabs a { padding: 7px 14px 5px; text-transform: uppercase; }
.findlist .item { white-space: normal; }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 10px 0 6px; font-weight: 400; }
.pager span:last-child { text-align: right; } .pager .pg { color: var(--ink-soft); font-size: 12px; }
.upd { margin: 6px 0 0; text-align: right; font-size: 11px; color: var(--ink-soft); }
.note { font-style: normal; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat { padding: 12px 8px 10px; text-align: center; background: linear-gradient(#1a1a1c, #0c0c0d); border: 1px solid var(--bronze-dk); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgba(229,202,139,.08); }
.stat span { display: block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.stat b { display: block; margin-top: 3px; font: 700 22px var(--title); color: var(--gold); text-shadow: var(--cut); }
.stat b.up { color: #8cf04a; } .stat b.down { color: #ff6a5a; }
.sheet th { font-family: var(--title); font-size: 12px; letter-spacing: 1px; width: 170px; } .sheet td { font-size: 14px; } .sheet tr:last-child th, .sheet tr:last-child td { border-bottom: 0; }
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.feat > div { padding: 11px 12px; background: linear-gradient(#1a1a1c, #0c0c0d); border: 1px solid var(--bronze-dk); }
.feat dt { font: 700 13px var(--title); letter-spacing: 1px; margin-bottom: 4px; } .feat dd { margin: 0; color: var(--ink); }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; }
.steps li { counter-increment: s; position: relative; padding: 8px 0 8px 40px; margin: 0; border-bottom: 1px solid #2a2a2e; } .steps li:last-child { border-bottom: 0; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 7px; width: 26px; text-align: center; font: 700 13px/22px var(--title); color: #1a0d02; background: linear-gradient(#fff1c4, #c9a24a); border: 1px solid #1a1206; }
.form label { color: var(--gold); } .warn { border-radius: 2px; } .err, .flash { border-radius: 2px; }
.state { border-radius: 2px; }

/* ================= small screens ================= */
@media (max-width: 880px) {
  #wrap { border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
  #top { padding: 10px 12px; } .orb { width: 46px; height: 46px; } .mark { width: 46px; height: 41px; }
  .name small, .name b { font-size: 26px; } .name { gap: 9px; }
  .herotext, #hero.slim .herotext { left: 26px; right: 26px; bottom: 30px; padding: 0; } #hero.slim .herotext { bottom: 38px; }
  .herotext h1, #hero.slim .herotext h1 { font-size: 24px; }
  .stats { grid-template-columns: repeat(2, 1fr); } .feat { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  #top { gap: 8px; } .logo { gap: 8px; min-width: 0; } .orb { width: 38px; height: 38px; } .mark { width: 38px; height: 34px; }
  .name small, .name b { font-size: 19px; letter-spacing: .5px; } .name { gap: 6px; white-space: nowrap; }
  .topright .btn { font-size: 10px; padding: 7px 10px 6px; letter-spacing: 1px; }
  #nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 3px 4px; }
  #nav a { margin: 2px; padding: 8px 2px 7px; font-size: 10px; letter-spacing: .5px; text-align: center; white-space: nowrap; }
  #hero.big { height: 250px; } #hero.slim { height: 104px; }
  .cn { width: 44px; height: 44px; background-size: 44px 44px; } #hero.slim .cn.tr { display: none; }
  .herotext .cta { gap: 8px; } .btn.big { font-size: 13px; padding: 11px 16px 9px; letter-spacing: 2px; }
  #hero.slim .herotext { bottom: 30px; } .herotext h1, #hero.slim .herotext h1 { font-size: 20px; }
  #notice { font-size: 11px; padding: 6px 10px; }
  #cols { padding: 8px 6px; gap: 8px; } .panel, .scroll { margin-bottom: 8px; }
  .bar { font-size: 14px; padding: 10px 12px 7px; }
  .paths { grid-template-columns: repeat(3, 1fr); gap: 6px; } .card { aspect-ratio: 3 / 4; }
  .plate { left: 4px; right: 4px; bottom: 4px; padding: 5px 2px; } .plate b { font-size: 11px; letter-spacing: 1px; }
  .arts { grid-template-columns: repeat(3, 1fr); gap: 6px; } .shots { gap: 6px; }
  .rank th, .rank td { padding: 7px 7px; } .board .n { width: 40px; }
  .findlist td:nth-child(3), .findlist th:nth-child(3) { display: none; }
  .tabs a { flex: 1; text-align: center; padding: 8px 6px 6px; }
  .portrait { width: 110px; margin-left: 10px; }
  .sheet th { width: 110px; } .stat b { font-size: 18px; }
  .news .when b, .news .when span { border-radius: 2px; }
  input:not([type=checkbox]), textarea { font-size: 16px; padding: 9px 10px; } .btn.small { padding: 8px 14px 7px; }
  #foot { padding: 12px 12px 14px; }
}
.cls-other::before, .cls-other:empty { display: none; }
.news .when b { font-family: var(--ui); color: var(--gold); text-shadow: none; background: #0c0c0d; border: 1px solid var(--bronze-dk); border-radius: 2px 2px 0 0; box-shadow: none; }
.news .when span { color: var(--gold-hi); background: linear-gradient(#a81c18, #5e0b09); border: 1px solid var(--bronze-dk); border-top: 0; border-radius: 0 0 2px 2px; }
.news h3 a { color: #fff; } .news h3 a:hover { color: var(--gold); }
@media (max-width: 540px) {
  .rank td, .rank th { white-space: nowrap; } .findlist td:first-child { white-space: normal; min-width: 130px; }
  .news h3 { font-size: 16px; } .news .when b, .news .when span { border: 1px solid var(--bronze-dk); border-radius: 2px; }
}
.findlist td:nth-child(2), .findlist td:nth-child(3) { white-space: nowrap; }
@media (max-width: 540px) { .findlist .cls { display: none; } .findlist td:first-child { min-width: 110px; } .rank th, .rank td { padding: 7px 6px; } }

/* ================= shop: catalogue, buy form, orders, credits ================= */
.wallet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 12px; padding: 8px 12px; background: linear-gradient(#1a1a1c, #0c0c0d); border: 1px solid var(--bronze-dk); box-shadow: inset 0 0 0 1px #000; }
.wallet span { margin-right: auto; font: 700 12px var(--title); letter-spacing: 1px; color: var(--ink-soft); text-transform: uppercase; }
.wallet span b { margin-left: 6px; font-size: 18px; color: var(--gold); text-shadow: var(--cut); }
.wallet a { font-weight: 600; text-decoration: none; }
.slot { display: inline-block; width: 38px; height: 38px; padding: 2px; flex: none; background: #0a0a0b; border: 1px solid var(--bronze-dk); box-shadow: inset 0 0 0 1px #000, inset 0 0 6px rgba(229,202,139,.12); vertical-align: middle; }
.slot img { display: block; width: 32px; height: 32px; image-rendering: pixelated; }
.slot.inline { margin-right: 6px; }
.shoplist { table-layout: auto; }
.shoplist th:first-child { font-size: 12px; }
.shoplist td.ic { width: 54px; padding-right: 0; }
.shoplist td { white-space: normal; vertical-align: top; }
.shoplist td.t-number { white-space: nowrap; color: var(--gold); padding-top: 14px; }
.shoplist td.act, .rank td.act { text-align: right; white-space: nowrap; }
.shoplist td.act { padding-top: 11px; width: 76px; }
.shoplist .item, .buyitem .item { display: block; color: #fff; font-size: 14px; }
.shoplist small, .buyitem small { display: block; line-height: 1.45; }
.buyitem { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; background: linear-gradient(#1a1a1c, #0c0c0d); border: 1px solid var(--bronze-dk); }
.buyitem .each { display: block; margin-top: 5px; font-weight: 700; color: var(--gold); }
.pick label { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin-bottom: 5px; font-weight: 400; color: var(--ink); background: #151517; border: 1px solid #2a2a2e; cursor: pointer; }
.pick label:hover { border-color: var(--bronze); }
.pick input[type=radio] { flex: none; width: 16px; height: 16px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; accent-color: #c9a24a; }
.pick small { margin: 0 0 0 auto; }
.form .pick small { display: inline; margin-top: 0; }
.form input[type=number] { max-width: 110px; }
.confirm { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rank td.plus { color: #8cf04a; } .rank td.minus { color: #ff8a7a; }
.rank td.t-date { white-space: nowrap; color: var(--ink-soft); }
.ledger small, .orders small { display: block; }
.rank td.what { white-space: normal; min-width: 170px; }
.rank .state { margin: 0; white-space: nowrap; }
.orders td.n a { font-weight: 700; }
.rank td.act form { display: inline-block; margin-left: 4px; }
.rank td.act.stack form { display: block; margin: 3px 0; }
@media (max-width: 540px) {
  #nav { grid-template-columns: repeat(3, 1fr); }
  .shoplist td, .shoplist th { white-space: normal; }
  .shoplist td.ic { width: 46px; } .shoplist td.act { width: 60px; }
  .wallet span { flex-basis: 100%; }
  .pick small { display: none; }
  .ledger small { white-space: normal; min-width: 150px; }
  .orders .c-to, .orders .c-when { display: none; }
  .orders td:nth-child(2) { white-space: normal; }
  .pick input[type=radio] { width: 18px; height: 18px; }
}

/* Account page, character transfer. */
.sheet form.inline { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rank td small { display: block; color: var(--ink-soft); }
.rank td.act a { white-space: normal; }
.rank.chars td, .rank.items td { vertical-align: middle; }
.rank.items td:first-child { white-space: normal; }
details.pay { margin: 0 0 12px; padding: 0 12px; background: #151517; border: 1px solid #2a2a2e; }
details.pay[open] { padding-bottom: 4px; }
details.pay > summary { margin: 0 -12px; padding: 9px 12px; cursor: pointer; font-weight: 700; color: var(--blue-deep); }
details.pay[open] > summary { margin-bottom: 10px; border-bottom: 1px solid #2a2a2e; }
.form .pair { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 8px; }
.pick label:has(input:disabled) { opacity: .55; cursor: default; }
@media (max-width: 540px) {
  .form .pair { grid-template-columns: minmax(0, 1fr) 90px; }
  .rank.chars th:nth-child(2), .rank.chars td:nth-child(2) { display: none; }
}
/* player reports (feedback.html, admin_feedback.html): the text exactly as sent, wrapped, never interpreted */
pre.report { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 14px; line-height: 1.5; margin: 10px 0 4px; padding: 10px 12px; color: var(--ink); background: #151517; border: 1px solid #2a2a2e; }
.form select { max-width: 270px; display: block; }
.filters .row { margin-bottom: 7px; }
td.cut { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
select { width: 100%; padding: 6px 9px; font: 13px var(--ui); color: #f2f2f4; background: #151517; border: 1px solid #55555d; border-radius: 2px; box-shadow: inset 0 2px 5px rgba(0,0,0,.6); }
select:focus { outline: 0; border-color: #ff4a3a; box-shadow: inset 0 2px 5px rgba(0,0,0,.6), 0 0 0 3px rgba(255,60,40,.35); }
/* report pictures: thumbnails only, served by the site's own handler */
.pics { white-space: nowrap; }
.thumb { width: 48px; height: 48px; object-fit: cover; margin-right: 4px; vertical-align: middle; border: 1px solid #2a2a2e; background: #151517; }
.pics.big { white-space: normal; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.pics.big figure { margin: 0; }
.pics.big .thumb { width: auto; height: auto; max-width: 320px; max-height: 320px; }
.pics.big figcaption { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
@media (max-width: 540px) { .pics.big .thumb { max-width: 100%; } }