/* The look the MMO Hardcore sites share. game.css (written by site_common.py) holds the game's own rarity and
   item-card colours. */
@import url("game.css");

@font-face {
 font-family: "Wild Breath";
 src: url("../fonts/TheWildBreathOfZelda.otf") format("opentype");
 font-display: swap;
}

:root {
 --item: 56px;
 --ink: #d9d2c4;
 --dim: #8d8578;
 --gold: #e2b23c;
 --gold-soft: #8a6a1c;
 --stone: #0b0a0c;
 --panel: #151317;
 --edge: #3b3440;
 --idea: #6fa8c9;
 --accent: #9a9a9a;
}

* { box-sizing: border-box; }

html { background: var(--stone); }

body {
 margin: 0;
 min-height: 100vh;
 padding: 0 16px 40px;
 color: var(--ink);
 font: 15px/1.45 "Segoe UI", Verdana, Tahoma, sans-serif;
 background:
  radial-gradient(1200px 500px at 50% -120px, #2a1c1c 0%, transparent 70%),
  var(--stone);
}

.top {
 max-width: 1320px;
 margin: 0 auto;
 padding: 10px 0 10px;
 display: flex;
 flex-wrap: wrap;
 align-items: flex-end;
 justify-content: space-between;
 gap: 14px 28px;
}

/* The row that switches between the sites; <body data-site> marks the one being read. */
.sites {
 order: -1;
 flex: 0 0 100%;
 display: flex;
 gap: 4px 18px;
 padding-bottom: 8px;
 border-bottom: 1px solid var(--edge);
}

.sites a {
 color: var(--dim);
 font: 400 17px/1 "Wild Breath", Georgia, serif;
 letter-spacing: 1.5px;
 text-decoration: none;
 text-transform: uppercase;
}

.sites a:hover, .sites a:focus-visible { color: var(--ink); outline: none; }

.sites a[aria-current="page"],
body[data-site="talents"] .sites a[data-site="talents"],
body[data-site="gear"] .sites a[data-site="gear"],
body[data-site="world"] .sites a[data-site="world"] { color: var(--gold); }

.brand h1 {
 margin: 0;
 font: 400 40px/1 "Wild Breath", Georgia, serif;
 letter-spacing: 1px;
 color: #efe6d2;
 text-shadow: 0 2px 0 #000, 0 0 18px rgba(170, 40, 30, .45);
}

.brand p {
 margin: 4px 0 0;
 color: var(--dim);
 font: 400 19px/1 "Wild Breath", Georgia, serif;
 letter-spacing: 2px;
 text-transform: uppercase;
}

.tabs { display: flex; flex-wrap: wrap; gap: 6px; }

.tab {
 padding: 9px 18px 8px;
 border: 1px solid var(--edge);
 border-bottom-width: 3px;
 border-radius: 4px 4px 0 0;
 background: linear-gradient(#211d24, #151317);
 color: var(--dim);
 font: 400 19px/1 "Wild Breath", Georgia, serif;
 letter-spacing: 1px;
 cursor: pointer;
}

.tab:hover { color: var(--ink); }

.tab[aria-selected="true"] {
 color: #fff3d6;
 border-color: var(--tab, var(--gold-soft));
 background: linear-gradient(#2c2630, #1a171d);
}

.notice {
 max-width: 1320px;
 margin: 0 auto 18px;
 padding: 9px 14px;
 border-left: 3px solid var(--idea);
 background: rgba(111, 168, 201, .08);
 color: #b9c7cf;
 font-size: 14px;
}

main { max-width: 1320px; margin: 0 auto; }

.panel {
 --accent: #9a9a9a;
 border: 1px solid var(--edge);
 border-radius: 6px;
 background:
  linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent) 0, transparent 240px),
  repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 5px),
  var(--panel);
 box-shadow: inset 0 0 0 1px #000, inset 0 0 60px rgba(0, 0, 0, .65), 0 8px 24px rgba(0, 0, 0, .5);
 overflow: hidden;
}

.panel[data-class="Warrior"] { --accent: #c2392f; }
.panel[data-class="Rogue"] { --accent: #86a843; }
.panel[data-class="Mage"] { --accent: #7481e0; }

.panel-head {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 10px 16px;
 padding: 12px 16px;
 border-bottom: 1px solid var(--edge);
 background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 32%, #17141a), #17141a 75%);
}

.panel-head h2 {
 margin: 0;
 font: 400 30px/1 "Wild Breath", Georgia, serif;
 letter-spacing: 1px;
 color: #fff3d6;
 text-shadow: 0 2px 0 #000;
}

select {
 width: 100%;
 max-width: 260px;
 padding: 7px 8px;
 border: 1px solid var(--gold);
 border-radius: 3px;
 background: #0e0c10;
 color: #fff3d6;
 font: 600 15px/1.2 "Segoe UI", Verdana, sans-serif;
 cursor: pointer;
}

/* An item tile: the pixel icon on its rarity's flat colour, as in the game's bag. */
.item {
 position: relative;
 display: block;
 width: var(--item);
 height: var(--item);
 padding: 0;
 border: 1px solid #060505;
 border-radius: 0;
 background: var(--rarity-bg-common);
 box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .14), inset -1px -1px 0 rgba(0, 0, 0, .35);
 color: #5d5762;
 font: 400 calc(var(--item) * .5)/1 "Wild Breath", Georgia, serif;
 cursor: pointer;
 overflow: hidden;
}

.item[data-rarity="Uncommon"] { background: var(--rarity-bg-uncommon); }
.item[data-rarity="Rare"] { background: var(--rarity-bg-rare); }
.item[data-rarity="Epic"] { background: var(--rarity-bg-epic); }
.item[data-rarity="Legendary"] { background: var(--rarity-bg-legendary); }

.item img {
 display: block;
 width: 100%;
 height: 100%;
 image-rendering: pixelated;
 pointer-events: none;
}

.item:hover, .item:focus-visible { border-color: #fff0b8; outline: none; }
.item[draggable="true"] { cursor: grab; }
.item.dragging { opacity: .3; }

/* An item card, line for line the game's (name, class, numbers, effect, required level). */
.item-card {
 width: min(320px, 100%);
 padding: 11px 13px 12px;
 border: 1px solid #8c8676;
 border-radius: 6px;
 background: rgba(8, 9, 20, .96);
 color: var(--card-text);
 font-size: 13.5px;
 line-height: 1.4;
}

.tip .item-card { width: auto; padding: 0; border: 0; background: none; }

.item-name { color: var(--rarity-common); font: 600 16px/1.2 "Segoe UI", Verdana, sans-serif; }
.item-card[data-rarity="Uncommon"] .item-name { color: var(--rarity-uncommon); }
.item-card[data-rarity="Rare"] .item-name { color: var(--rarity-rare); }
.item-card[data-rarity="Epic"] .item-name { color: var(--rarity-epic); }
.item-card[data-rarity="Legendary"] .item-name { color: var(--rarity-legendary); }

.item-meta, .item-line { display: flex; justify-content: space-between; gap: 16px; }
.item-meta { margin-top: 3px; color: var(--card-class); font-size: 12.5px; }
.item-meta.weapon { margin-top: 0; color: var(--dim); }
.item-rule { height: 1px; margin: 9px 0 5px; background: #4a4650; }
.item-line { margin-top: 2px; }
.item-line .roll, .item-eq { color: var(--dim); font-size: 12px; }
.item-line .roll { white-space: nowrap; align-self: center; }
.item-use { margin-top: 8px; }
.item-note { margin-top: 6px; color: var(--dim); font-size: 12px; }
.item-effect { margin-top: 9px; color: var(--rarity-uncommon); }
.item-requires { margin-top: 9px; }
.item-effect + .item-requires { margin-top: 2px; }
.item-eq { margin-top: 8px; }

.tip {
 position: fixed;
 z-index: 10;
 width: min(320px, calc(100vw - 20px));
 padding: 11px 13px 12px;
 border: 1px solid #8c8676;
 border-radius: 6px;
 background: rgba(8, 9, 20, .96);
 box-shadow: 0 6px 22px rgba(0, 0, 0, .8);
 font-size: 13.5px;
 line-height: 1.4;
 pointer-events: none;
}

.tip h4 { margin: 0 0 3px; color: #fff; font: 600 16px/1.2 "Segoe UI", Verdana, sans-serif; }
.tip .meta { display: flex; justify-content: space-between; gap: 12px; color: #fff; }
.tip .body { margin-top: 7px; color: #ffd100; }
.tip .hint { margin-top: 4px; color: var(--dim); font-size: 12px; }

.foot { max-width: 1320px; margin: 22px auto 0; color: #5d5762; font-size: 12px; }

@media (max-width: 560px) {
 :root { --item: 44px; }
 body { padding: 0 10px 30px; }
 .brand h1 { font-size: 32px; }
 .sites a { font-size: 15px; }
 .tab { padding: 8px 12px 7px; font-size: 17px; }
}