/* The site's pixel font once more, for the world pages served from the game server: the same files under an address of
   their own (&cors=1), so a copy a browser kept from this site - fetched without the permission another site needs - is
   never the one these pages are given. */
@font-face {
  font-family: "Pixelify Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/pixelify-sans-latin-ext.woff2?v=089e3b44cf&cors=1) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Pixelify Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/pixelify-sans-latin.woff2?v=63df77cc47&cors=1) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* The world pages - www.dilleionline.com/online: who is online, characters, deaths, kills, ranking. The game server
   writes them and this site serves them (a rewrite in the host's settings), so they wear this site's header, colours and
   font: style.css first, then this. Everything here sits under main.world, so nothing else on the site is touched. */
.world { padding: 44px 0 72px; min-height: calc(100vh - 140px); }
.world h1 { font-size: clamp(30px, 4.4vw, 42px); margin-bottom: .35em; }
.world h2 { font-size: 24px; margin: 34px 0 12px; }
/* the Online page, world by world: the world's name, its PvP rule, how many are on */
.world .wh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin: 34px 0 12px; }
.world .wh h2 { margin: 0; }
.world .pvp { font: 700 13px var(--pixel); letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid; }
.world .pvp.open { color: #ff8a7a; border-color: rgba(255, 138, 122, .45); background: rgba(255, 138, 122, .08); }
.world .pvp.safe { color: #8fe0a0; border-color: rgba(143, 224, 160, .45); background: rgba(143, 224, 160, .08); }
.world .eyebrow { margin-bottom: 14px; }

/* online / characters / deaths / kills / ranking, and the ranking's skills and classes */
.world-tabs, .world .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
.world .tabs { margin: 0 0 12px; }
.world-tabs a, .world .tabs a { padding: 8px 15px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--text);
                                text-decoration: none; font: 600 16px/1.2 var(--pixel); }
.world .tabs a { padding: 6px 12px; font-size: 14px; }
.world-tabs a:hover, .world .tabs a:hover { border-color: var(--gold); color: var(--gold-hi); }
.world-tabs a[aria-current], .world .tabs a[aria-current] { background: linear-gradient(#ffcf55, #e9a21c); color: #2a1a00; border-color: #8a5c08; }

/* tables: a panel that scrolls sideways on a narrow phone instead of the page */
.world .tw { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; margin-top: 8px; }
.world table { width: 100%; border-collapse: collapse; font-size: 16px; }
.world th, .world td { padding: 11px 16px; text-align: left; border-top: 1px solid #222a3b; white-space: nowrap; }
.world tr:first-child th { border-top: 0; }
.world th { color: var(--muted); font: 700 12px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .08em; }
.world tr:nth-child(even) td { background: rgba(255, 255, 255, .015); }
.world td a { text-decoration: none; font-weight: 600; }
.world td a:hover { text-decoration: underline; }
.world .n { text-align: right; font-variant-numeric: tabular-nums; }
.world .n:first-child { width: 1%; }                   /* the rank column hugs its numbers */
.world .when, .world .dim { color: var(--muted); }
.world .star { color: var(--gold); }
.world .red { color: #ff6b6b; font-weight: 700; }
.world .on { color: var(--green); font-weight: 700; }

/* the character finder */
.world .find { display: flex; gap: 10px; max-width: 520px; margin: 0 0 28px; }
.world .find input { flex: 1; min-width: 0; padding: 10px 14px; background: var(--panel); color: var(--text); border: 1px solid var(--line);
                     border-radius: 10px; font: 17px var(--sans); }
.world .find input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.world .find button { cursor: pointer; }

/* a character's card */
.world .card { max-width: 640px; }
.world .card h2 { margin: 0 0 14px; font-size: 30px; }
.world .card .red { font: 600 15px var(--sans); margin-left: 6px; }
.world dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0; }
.world dt { color: var(--muted); }
.world dd { margin: 0; }

.nav a[aria-current] { color: var(--gold-hi); }
.menu nav a[aria-current] { background: #222a3c; }

@media (max-width: 720px) {
  .world { padding: 28px 0 56px; }
  .world th, .world td { padding: 9px 10px; font-size: 15px; }
  .world .card h2 { font-size: 24px; }
  .world dl { grid-template-columns: 1fr; gap: 2px; }
  .world dd { margin-bottom: 8px; }
}

/* 2026-10-19: the pages in boxes with a title bar (a world overview, information beside a chart, tables of players), every
   character's outfit in its colours, monsters' pictures from the wiki, bar charts drawn as SVG - all sized and coloured
   here, the server writes no style. */
.world .lead-s { color: var(--muted); max-width: 760px; }
.world .box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; margin: 0 0 22px; overflow: hidden; }
.world .box-h { margin: 0; padding: 11px 18px; font: 700 19px/1.3 var(--pixel); color: var(--gold-hi); letter-spacing: .02em;
                background: linear-gradient(#242c41, #1b2233); border-bottom: 1px solid #303a55; display: flex; flex-wrap: wrap;
                align-items: baseline; gap: 4px 12px; }
.world .box-h::before { content: ""; width: 8px; height: 8px; background: var(--gold); box-shadow: 0 0 0 2px #5a4210; align-self: center; }
.world .box-h span { font: 500 13px var(--sans); color: var(--muted); letter-spacing: 0; }
.world .box-b > .tw { border: 0; border-radius: 0; margin: 0; background: transparent; }
.world .box-b .pad { padding: 14px 18px; margin: 0; }
.world .box-b .pad + .pad { padding-top: 0; }
.world .statline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; padding: 12px 18px;
                   background: rgba(242, 182, 50, .06); border-bottom: 1px solid #222a3b; }
.world .statline span:first-child { color: var(--muted); font: 700 12px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .08em; }
.world .statline b { font: 700 20px var(--pixel); color: var(--gold-hi); }
.world tr.me td { background: rgba(242, 182, 50, .07); }
.world td.wrap-ok, .world .wrap-ok { white-space: normal; min-width: 220px; }
.world .bonus { color: #9fe6ae; }
.world .gain { color: #9fe6ae; }
.world .loss { color: #ff8a7a; }
.world tr.sum td { border-top: 2px solid var(--line); font-weight: 700; background: rgba(255, 255, 255, .02); }
.world tr.pvp-row td { background: rgba(255, 107, 107, .055); }
.world a.pk { color: #ff9f8f; }
.world tr.top1 td:first-child { color: #ffd56b; font-weight: 700; }
.world tr.top2 td:first-child { color: #d9dee8; font-weight: 700; }
.world tr.top3 td:first-child { color: #e0a070; font-weight: 700; }
.world th span { font-weight: 500; text-transform: none; letter-spacing: 0; }
.world th.pic, .world td.pic { width: 1%; padding: 2px 0 2px 12px; }
.world img.ofit { display: block; width: 36px; height: 36px; max-width: none; image-rendering: pixelated; }
.world img.mon { display: block; width: auto; height: auto; max-width: 48px; max-height: 40px; image-rendering: pixelated; }
/* a Nightmare (t1) or Hell (t2) monster's picture glows as it does in the game: white, or red */
.world img.mon.t1 { filter: drop-shadow(0 0 2px #dfe6ff) drop-shadow(0 0 5px rgba(223, 230, 255, .55)); }
.world img.mon.t2 { filter: drop-shadow(0 0 2px #ff3a24) drop-shadow(0 0 5px rgba(255, 58, 36, .6)); }
/* a table that sorts by a click on a column's title (online.js makes each title a button; aria-sort marks the column the
   rows follow and which way) */
.world th .sort { padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit;
                  text-transform: inherit; text-align: inherit; cursor: pointer; }
.world th .sort:hover, .world th[aria-sort] { color: var(--gold-hi); }
.world th .sort:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.world th .sort::after { content: "\2195"; margin-left: 5px; opacity: .45; }
.world th[aria-sort="descending"] .sort::after { content: "\25BC"; opacity: 1; }
.world th[aria-sort="ascending"] .sort::after { content: "\25B2"; opacity: 1; }
/* a world's information beside its last 24 hours; a character's outfit beside its facts; its days beside their table */
.world .wi, .world .wsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 28px; padding: 16px 18px; align-items: start; }
.world .wsplit .tw { border: 1px solid var(--line); border-radius: 10px; margin: 0; }
.world .facts { display: grid; grid-template-columns: max-content 1fr; gap: 7px 20px; margin: 0; }
.world .facts dt { color: var(--muted); }
.world .facts dd { margin: 0; }
.world .facts a { text-decoration: none; font-weight: 600; }
.world .facts a:hover { text-decoration: underline; }
.world .chart-f { margin: 0; }
.world .chart-f figcaption { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.world svg.chart { display: block; width: 100%; height: auto; }
.world svg.chart rect.b { fill: var(--gold); }
.world svg.chart g:hover rect.b { fill: var(--gold-hi); }
.world svg.chart rect.hit { fill: transparent; }
.world svg.chart line.base { stroke: #2f3852; stroke-width: 1; }
.world svg.chart text { fill: var(--muted); font: 11px var(--sans); text-anchor: middle; }
.world .char { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px 28px; padding: 18px; align-items: start; }
.world .cport { text-align: center; padding: 16px 12px; border: 1px solid #2f3852; border-radius: 12px;
                   background: radial-gradient(circle at 50% 38%, #2a344d, #151b28 70%); }
.world .cport p { margin: 0 0 2px; }
.world .cport .cn { font: 700 22px var(--pixel); color: var(--text); margin-top: 8px; }
.world img.ofit-big { display: block; width: 108px; height: 108px; margin: 0 auto; image-rendering: pixelated; }
.world .xpbar { display: block; max-width: 320px; margin-top: 6px; }
.world .xpbar svg { display: block; width: 100%; height: 6px; }
.world .xpbar .bar-bg { fill: #222a3b; }
.world .xpbar .bar-fg { fill: var(--gold); }
.world .servers a { font-size: 14px; padding: 6px 12px; }
@media (max-width: 860px) {
  .world .wi, .world .wsplit, .world .char { grid-template-columns: 1fr; }
  .world .facts { grid-template-columns: 1fr; gap: 1px; }
  .world .facts dd { margin-bottom: 8px; }
}