@charset "utf-8";
/*
 * The wiki, dressed as the rankings page (/rankings/rankings.css): the same page art, header,
 * menu and rope-and-plank frames, all read from /rankings/i/.
 */

/* Global Settings */
html { height: 100%; min-width: 1000px; }
body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin: 0px; padding: 0px; height: 100%; color: #FFF; }
a { color: #F0C860; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Body */
body { width: 1000px; margin: 0px auto; background: #172A0A url(/rankings/i/pgbg.jpg) 50% 0 no-repeat; }
@media (max-width: 1680px) { body { background-image: url(/rankings/i/pgbg1680.jpg) } }
@media (max-width: 1440px) { body { background-image: url(/rankings/i/pgbg1440.jpg) } }
@media (max-width: 1280px) { body { background-image: url(/rankings/i/pgbg1280.jpg) } }
@media (max-width: 1024px) { body { background-image: url(/rankings/i/pgbg1024.jpg) } }

/* Header */
#dbheader { width: 1000px; height: 199px; text-align: left; margin: 0px auto; }
#dblogo { width: 253px; height: 174px; float: left; margin-top: 15px; margin-left: 25px; background: url(/rankings/i/dblogo.png) 50% 0 no-repeat; }

/* Main Menu */
#dbmenu { width: 560px; height: 40px; margin-left: 10px; margin-top: 98px; float: left; }
#dbmenu a { width: 131px; height: 40px; float: left; background-image: url(/rankings/i/nav_buttons.png) }
a#dbmenunews { background-position: 0px 0px; }
a#dbmenunews:hover { background-position: 0px -40px; }
a#dbmenuplay { background-position: -393px 0px; }
a#dbmenuplay:hover { background-position: -393px -40px; }
a#dbmenuranks { background-position: -262px 0px; }
a#dbmenuranks:hover { background-position: -262px -40px; }
/*
 * The sprite has no Wiki cell. /wiki/i/nav_wiki.png is one built from it: the Play cell with its
 * label painted out, the i and k copied pixel for pixel from the sprite's own Rankings label, and
 * a W (the sprite has none) drawn in 16px bold Arial with a 2px #111 outline, the settings that
 * redraw the sprite's labels most closely. Normal and hover rows like the sprite's; the text
 * stays for screen readers.
 */
#dbmenu a#dbmenuwiki { background: url(/wiki/i/nav_wiki.png) 0 0 no-repeat; text-indent: -9999px; overflow: hidden; }
#dbmenu a#dbmenuwiki:hover { background-position: 0 -40px; }

/* Content */
#dbcontent { background: url(/rankings/i/contentbg.png) repeat-y center top; width: 976px; min-height: 100%; padding: 0 12px 10px; margin: 0px auto; clear: left; }

/*
 * Rope-and-plank frames, built exactly as the rankings board: its header art, a 936px body
 * whose sides are the board's own post caps (rlwrap/rrwrap, the posts of the header carried
 * down), and its footer straight after. Everything inside sits between the posts.
 */
.frame { width: 976px; margin: 0 0 6px; }
/*
 * The whole header art, rope ends included: the body starts at the end of its plank (105px,
 * where the board's first row starts) and runs under the art's last 32px, which hold only the
 * posts and the rope hanging off them. The art is drawn on top, as the board's first row lets
 * it show, and clicks pass through its empty middle to the body.
 */
.frame-head { position: relative; z-index: 1; height: 137px; pointer-events: none; background: url(/rankings/i/rheader.png) 50% 0 no-repeat; }
.frame-head a { pointer-events: auto; }
.frame-head h1, .frame-head h2 { position: absolute; left: 60px; right: 60px; top: 52px; margin: 0; font-size: 22px; line-height: 32px; text-shadow: 2px 2px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame-head h2 { font-size: 19px; }
/* Every heading in Title Case, whatever the text it is given. */
.frame-head h1, .frame-head h2, .frame-body h3, .card h4, .navgrid h4 { text-transform: capitalize; }
.frame-head .crumbs { position: absolute; right: 60px; top: 60px; font-size: 11px; color: #C9B07A; }
/* x 20-956 of the frame, like the board's table: 28px posts each side, the content between. */
.frame-body {
    margin: -32px 20px 0; padding: 8px 40px 12px; line-height: 1.5;
    background: url(/rankings/i/rlwrap.png) left top repeat-y, url(/rankings/i/rrwrap.png) right top repeat-y, #1D1D1D;
}
.frame-foot { height: 58px; background: url(/rankings/i/rftr.png) 50% 0 no-repeat; }
.frame-body p { margin: 4px 0 10px; }
.frame-body h3 { margin: 14px 0 6px; font-size: 15px; color: #F0C860; text-shadow: 1px 1px 0 #000; }
.frame-body h3:first-child { margin-top: 2px; }
.frame-body ul { margin: 4px 0 10px; padding-left: 20px; }
.frame-body li { margin: 2px 0; }
.note { color: #B9B9B9; font-size: 12px; }
.loading { padding: 40px; text-align: center; font-weight: bold; }

/* Navigation */
#wikinav .frame-body { padding: 8px 40px 10px; }
.navgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 8px; }
.navgrid h4 { margin: 4px 0 4px; padding: 4px 6px; font-size: 13px; color: #F0C860; background: #2E2416; border-bottom: 2px solid #5A4520; text-shadow: 1px 1px 0 #000; }
.navgrid a { display: block; padding: 2px 6px; color: #FFF; font-weight: bold; font-size: 12px; }
.navgrid a:hover { background: #3A3A3A; text-decoration: none; color: #F0C860; }
.navgrid a.active { color: #F0C860; background: #2B2B2B; }

/* Tables */
table.wt { width: 100%; color: #FFF; border-collapse: collapse; border-spacing: 0; font-size: 12px; }
table.wt th { position: sticky; top: 0; z-index: 1; padding: 6px 6px; background: #2E2416; color: #F0C860; text-align: left; font-size: 12px; border-bottom: 2px solid #5A4520; white-space: nowrap; text-shadow: 1px 1px 0 #000; }
table.wt th.sortable { cursor: pointer; user-select: none; }
table.wt th.sortable:hover { color: #FFF; }
table.wt th .arrow { font-size: 9px; margin-left: 3px; }
table.wt td { padding: 5px 6px; vertical-align: top; border-bottom: 1px solid #111; }
table.wt tr:nth-child(odd) td { background-color: #181818; }
table.wt tr:nth-child(even) td { background-color: #292929; }
table.wt tr:hover td { background-color: #33302A; }
table.wt td.num, table.wt th.num { text-align: right; white-space: nowrap; }
table.wt td.c, table.wt th.c { text-align: center; }
table.wt td.nowrap { white-space: nowrap; }
table.wt td.desc, table.wt th.desc { min-width: 200px; }
table.wt.compact td { padding: 3px 6px; }
.tablewrap { border: 1px solid #111; }
/* Gear drop odds: a rank's three rarity rows read as one group. */
table.gearodds tr.groupstart td { border-top: 2px solid #5A4520; }
table.gearodds th, table.gearodds td { padding-left: 5px; padding-right: 5px; }
.more { padding: 6px; text-align: center; font-size: 12px; color: #C9B07A; }

/* Rarity: Magic white, Rare blue, Legendary yellow (the game's own forge colours). */
.r-M { color: #FFFFFF; }
.r-R { color: #3DA5FF; }
.r-L { color: #F8DD45; }
.r-Y { color: #E07BFF; }
.gname { font-weight: bold; }
.tag { display: inline-block; padding: 0 5px; margin: 1px 3px 1px 0; border-radius: 3px; font-size: 10px; font-weight: bold; line-height: 15px; background: #3A3A3A; color: #DDD; white-space: nowrap; }
.tag.dread { background: #5A1E1E; color: #FFB4B4; }
.tag.normal { background: #20402A; color: #B4FFC6; }
.tag.boss { background: #5A4520; color: #FFE08A; }
.tag.leg { background: #4A4110; color: #F8DD45; }
.tag.el-Fire { background: #5A2810; color: #FFB27A; }
.tag.el-Ice { background: #10385A; color: #9AD6FF; }
.tag.el-Air { background: #3A3A55; color: #D9D9FF; }
.tag.el-Earth { background: #45351A; color: #E6C88A; }
.tag.el-Life { background: #1F4A1F; color: #A8F0A8; }
.tag.el-Death { background: #3A1F45; color: #DDB0F0; }
.muted { color: #8C8C8C; }
.droprow { display: block; min-height: 17px; }
.droprow + .droprow { margin-top: 3px; padding-top: 3px; border-top: 1px dotted #444; }
.rune { cursor: help; border-bottom: 1px dotted #777; }
.gname[data-g] { cursor: default; }

/*
 * Gear card: a gear name's hover card, after the game's item tooltip -- a gold-rimmed dark panel,
 * the piece on a grey tile with its slot written under it, bonuses in the tooltip's cyan and
 * effect runes behind a purple rune stone.
 */
.gearcard {
    position: fixed; z-index: 50; display: flex; gap: 10px; width: 400px; padding: 10px; pointer-events: none;
    background: linear-gradient(#2A2A2A, #161616); border: 2px solid #D9B23A; border-radius: 10px;
    box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0, 0, 0, 0.7); font-size: 12px; line-height: 1.35;
}
.gc-art {
    flex: 0 0 132px; height: 172px; display: flex; flex-direction: column; overflow: hidden;
    background: radial-gradient(circle at 50% 40%, #6A6A6A, #3C3C3C 75%); border: 2px solid #111; border-radius: 8px;
}
.gc-pic { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 6px; }
.gc-pic img { max-width: 100%; max-height: 100%; }
.gc-slot { padding: 0 0 5px; text-align: center; font-size: 13px; font-weight: bold; color: #FFF; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.gc-info { flex: 1; min-width: 0; }
.gc-name { font-size: 15px; font-weight: bold; text-shadow: 1px 1px 0 #000; }
.gc-sub { margin: 1px 0 6px; color: #C9B07A; font-size: 11px; }
.gc-stat { margin-bottom: 4px; color: #DDD; }
.gc-bonus { color: #3FD0F0; font-weight: bold; }
.gc-rune { position: relative; margin-top: 6px; padding-left: 16px; color: #EEE; }
.gc-rune::before { content: ''; position: absolute; left: 0; top: 3px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #000; }
.gc-rune.effect::before { background: radial-gradient(circle at 35% 35%, #E2B8FF, #8A3FD0 60%, #4A1A78); }
.gc-rune.ability::before { background: radial-gradient(circle at 35% 35%, #BFE6FF, #2F8FE0 60%, #154A80); }

/* Filters */
.filters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px 8px; padding: 8px; margin-bottom: 8px; background: #181818; border: 1px solid #5A4520; }
.filters label { display: block; font-size: 10px; font-weight: bold; color: #C9B07A; text-transform: uppercase; margin-bottom: 2px; }
.filters .search { grid-column: 1 / -1; }
.filters .wide { grid-column: span 2; }
input[type=text], input[type=number], input[type=search], select {
    box-sizing: border-box; width: 100%; padding: 4px 6px; font: inherit; font-size: 12px; color: #FFF;
    background: #2B2B2B; border: 1px solid #5A4520; border-radius: 3px;
}
input[type=search] { font-size: 14px; padding: 6px 8px; }
input:focus, select:focus { outline: none; border-color: #F0C860; }
.idrange { display: flex; gap: 4px; }
.resultbar { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 6px; font-size: 12px; color: #C9B07A; }
.resultbar button {
    padding: 3px 10px; font: inherit; font-size: 12px; font-weight: bold; color: #FFF; cursor: pointer;
    background: linear-gradient(#5A5A5A, #3A3A3A); border: 2px solid #D9B23A; border-radius: 6px;
}
.resultbar button:hover { border-color: #46C6CF; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 10px; }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.card { padding: 8px 10px; background: #181818; border: 1px solid #5A4520; border-radius: 4px; }
.card h4 { margin: 0 0 4px; color: #F0C860; font-size: 14px; }
.card .big { font-size: 22px; font-weight: bold; color: #FFF; }
.card p { margin: 2px 0; font-size: 12px; }
a.card:hover { border-color: #F0C860; text-decoration: none; }
a.card { color: #FFF; display: block; }

.tabs { display: flex; gap: 4px; margin: 0 0 8px; flex-wrap: wrap; }
.tabs button { padding: 4px 12px; font: inherit; font-size: 12px; font-weight: bold; color: #DDD; cursor: pointer; background: #2B2B2B; border: 1px solid #5A4520; border-radius: 4px 4px 0 0; }
.tabs button.on { color: #000; background: #F0C860; }
.swatch { display: inline-block; width: 46px; height: 16px; border: 1px solid #000; border-radius: 2px; vertical-align: middle; }
.calc { display: grid; grid-template-columns: repeat(4, 1fr) 1.3fr; gap: 8px; align-items: end; padding: 8px; background: #181818; border: 1px solid #5A4520; }
.calc .out { font-size: 20px; font-weight: bold; color: #F8DD45; text-align: center; }
.calc .out small { display: block; font-size: 10px; color: #C9B07A; font-weight: bold; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }