/* Authentic game sprites and Jagex textures; provenance lives beside each asset. */
@font-face {
  font-family: "RuneScape Bold";
  src: url("assets/osrs-scenes/runescape-bold.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --heading-font: "RuneScape Bold", "Courier New", monospace;
  --paper: #d6c08d;
  --gold: #ffff00;
  --sidebar-width: 278px;
}
body { background: #15150f url("assets/osrs-scenes/osrs-stone.jpg") center top / 910px 347px repeat; }
.pixel-icon { object-fit: contain; image-rendering: pixelated; }
h1,h2,h3,h4,.primary-button,.secondary-button,.brand-text,.hub-link { font-weight: 400; letter-spacing: 0; }
h1 { font-size: clamp(29px,2.7vw,36px); line-height: 1.25; }
h2,.section-heading { font-size: 25px; }
h3 { font-size: 21px; }
.eyebrow,.section-kicker { font-size: 13px; line-height: 1.6; letter-spacing: .6px; }
.primary-button,.secondary-button { font-size: 17px; line-height: 1.35; padding: 12px 17px; }
.primary-button { color: #ffff00; background: linear-gradient(#675a43,#473b2b); border-color: #9c8962 #261e15 #261e15 #9c8962; box-shadow: 0 0 0 1px #211a12,inset 0 0 0 1px #776044; text-shadow: 1px 1px #000; }
.primary-button:hover { background: #766448; color: #ffff75; }
.secondary-button { background: #c7ad73; border-color: #efdda7 #826c43 #826c43 #efdda7; color: #342416; }
.secondary-button:hover { background: #ddc38b; }

/* Familiar game-brown navigation sits against the original website stone. */
.sidebar { border-right: 5px ridge #70624b; background: linear-gradient(#3a3328f0,#29251eef),url("assets/osrs-scenes/osrs-stone.jpg") center top / 910px 347px repeat; }
.brand { min-height: 112px; padding: 24px 18px; gap: 12px; border-bottom: 3px groove #746044; }
.brand-mark { display: grid; place-items: center; flex: 0 0 56px; width: 56px; height: 56px; border: 3px ridge #7b6a4d; background: #4a4132; box-shadow: inset 0 0 12px #1c170a88,0 0 0 1px #17130e; }
.brand-mark .pixel-icon { width: 36px; height: 32px; }
.brand-text { font-size: 24px; line-height: 1.2; color: #ffff00; text-shadow: 2px 2px #000; }
.brand-text > span { margin-top: 8px; font-family: Arial,Helvetica,sans-serif; font-size: 10px; letter-spacing: .35px; color: #d0bd8f; text-shadow: none; }
#guild-nav { display: grid; grid-template-columns: 1fr; gap: 5px; padding: 17px 15px; }
.hub-link { justify-content: flex-start; gap: 12px; min-height: 47px; padding: 5px 13px; font-size: 17px; text-align: left; color: #ffcf66; background: linear-gradient(#5b5140,#494032); border-color: #827259 #241e16 #241e16 #827259; text-shadow: 1px 1px #000; }
.hub-link .pixel-icon { width: 30px; height: 30px; flex: 0 0 30px; }
.hub-link:hover { background: #695a42; color: #ffff00; }
.hub-link.active,.hub-link[aria-current="page"] { color: #ffff00; background: #393124; border-color: #1f1b13 #91815e #91815e #1f1b13; box-shadow: inset 3px 0 #e5c75d; }
.rail-progress { margin: 0 15px 6px; padding: 15px 11px; background: #211e17a6; border: 2px inset #776747; }
.rail-progress strong { color: #ffff00; }
.rail-progress progress { height: 10px; }
.rail-progress progress::-webkit-progress-value { background: #5e9a35; }
.rail-progress progress::-moz-progress-bar { background: #5e9a35; }
.rail-progress small { color: #c7b996; }
.nav-phase > summary { font-size: 10px; color: #e4c786; }
.chapter-link.current { border-color: #9c8453; background: #453923; color: #ffff00; }
.topbar { background: linear-gradient(#3e382cf2,#28251df7),url("assets/osrs-scenes/osrs-stone.jpg") center top; border-bottom: 4px ridge #796749; }
.breadcrumb { font-size: 16px; color: #ffdc74; }
.tools-button { background: linear-gradient(#685a42,#483c2c); color: #ffdf84; }
#main { background: linear-gradient(#fff1d01c,#fff1d01c),#d5c08c url("assets/osrs-scenes/osrs-parchment.gif") center top / 100% 164px repeat-y; border: 4px ridge #8b754b; box-shadow: 0 0 0 2px #16130b,0 12px 36px #0006; }
.view-heading p,#chapter-intro,.body-copy,.bot-panel + .view-heading p { color: #4b3921; }

/* A genuine game scene gets its own window, so it remains visible beside the copy. */
.guild-hero { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items: stretch; min-height: 375px; padding: 0; margin: -3px -3px 0; border: 4px ridge #8c7954; background: #29271d; overflow: hidden; }
.guild-hero::before { display: none; }
.guild-hero > div { max-width: none; }
.guild-hero .guild-intro { position: relative; z-index: 1; padding: 31px 29px 32px; background: linear-gradient(#383125ee,#2e281fed),url("assets/osrs-scenes/osrs-stone.jpg") center / 910px 347px; }
.guild-hero h1 { font-size: clamp(36px,3.5vw,46px); line-height: 1.12; letter-spacing: 0; color: #ffff00; text-shadow: 2px 2px #000; margin: 0 0 14px; }
.guild-hero .guild-intro .section-kicker { margin: 0 0 17px; font-size: 12px; line-height: 1.4; color: #debe70; letter-spacing: 1px; }
.guild-hero .guild-intro .hero-tagline { font-family: var(--heading-font); font-size: 20px; line-height: 1.5; color: #ffdd8a; margin: 0 0 15px; }
.guild-hero .guild-intro .hero-description { color: #e1d8be; font-size: 14px; line-height: 1.8; margin: 0; text-shadow: 1px 1px #16110b; }
.guild-hero .guild-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; margin-top: 24px; }
.guild-hero .guild-actions a { font-size: 16px; }
.guild-hero .primary-button { background: linear-gradient(#796348,#59472f); color: #ffff00; border-color: #a88b61 #2d2216 #2d2216 #a88b61; text-shadow: 1px 1px #000; }
.guild-hero .primary-button:hover { background: #8a6f4c; }
.guild-hero .secondary-button { padding: 5px 0; border: 0; box-shadow: none; background: transparent; color: #e5cb89; text-decoration: underline; text-underline-offset: 5px; }
.guild-hero .secondary-button:hover { color: #ffff00; }
.world-scene { position: relative; min-width: 0; margin: 0; overflow: hidden; border-left: 3px ridge #826c47; background: #3e6e69; }
.world-scene > img { display: block; width: 100%; height: 100%; min-height: 375px; object-fit: cover; object-position: 53% 52%; }
.world-scene::after { position: absolute; inset: 0; content: ""; box-shadow: inset 0 0 0 2px #0004; pointer-events: none; }
.world-scene figcaption { display: flex; align-items: center; gap: 12px; position: absolute; inset: auto 0 0; padding: 17px 19px; color: #ffff00; background: linear-gradient(transparent,#171d10f0 25%); font-family: var(--heading-font); font-size: 22px; line-height: 1.5; text-shadow: 1px 1px #000; }
.world-scene figcaption > img { width: 26px; height: 26px; image-rendering: pixelated; }
.world-scene figcaption small { display: block; color: #ded5ba; font-family: Arial,Helvetica,sans-serif; font-size: 10px; line-height: 1.7; text-shadow: 1px 1px #000; }
.guild-shelf { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 66px; margin: 0 -3px 27px; padding: 10px 16px; border: 3px ridge #8c7954; border-top: 0; background: linear-gradient(#514735,#3b3226); box-shadow: 0 0 0 1px #3b3220; }
.shelf-label { color: #f5d576; font-family: var(--heading-font); font-size: 14px; line-height: 1.5; text-shadow: 1px 1px #000; }
.shelf-items { display: flex; align-items: center; gap: 6px; }
.shelf-items img { width: 36px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.guide-spotlight { position: relative; padding: 22px 92px 22px 24px; border: 2px groove #aa915d; background: #ead9b0bb; }
.guide-spotlight::after { content: ""; position: absolute; width: 72px; height: 64px; right: 15px; top: 50%; transform: translateY(-50%); background: url("assets/osrs/ironman-helm.png") center / contain no-repeat; image-rendering: pixelated; }
.guide-spotlight h2 { font-size: 27px; }
.guild-board { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 24px 0 32px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.board-entry { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; padding: 19px 19px 25px; border: 3px ridge #ab915b; background: #ddc693; box-shadow: inset 0 0 0 1px #f4dfae77; }
.board-entry:last-child { border-bottom: 3px ridge #ab915b; }
.board-entry:hover { background: #ebd6a4; border-color: #8d7344; }
.board-entry > span:nth-child(2) { width: 100%; }
.board-entry > span:nth-child(2) > strong { margin-bottom: 9px; font-size: 22px; line-height: 1.35; color: #3e2d18; }
.board-entry > span:nth-child(2) > small { font-size: 13px; line-height: 1.7; }
.board-entry > span:last-child { position: absolute; right: 16px; top: 28px; color: #7e5c28; }
.board-icon { display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; border: 3px ridge #8e7750; background: #514636; box-shadow: inset 0 0 15px #1b140e55; }
.board-icon .pixel-icon { width: 36px; height: 32px; }
.view-heading { margin-bottom: 25px; }
.view-heading h1 { color: #3c2b17; }
#progress-title::before,#character-title::before,#guides-title::before { content: ""; display: inline-block; width: 37px; height: 37px; margin-right: 12px; background-position: center; background-size: contain; background-repeat: no-repeat; image-rendering: pixelated; vertical-align: -6px; }
#progress-title::before { background-image: url("assets/osrs/quest-complete.png"); }
#character-title::before { background-image: url("assets/osrs/stats.png"); }
#guides-title::before { background-image: url("assets/osrs/quests-tab.png"); }

/* Item portraits and numbered route markers preserve the journal's structure. */
.feature-title { display: flex; align-items: center; gap: 18px; margin: 19px 0; }
.feature-title h2 { font-size: 33px; margin: 0; }
.item-portrait,.chapter-emblem { display: grid; place-items: center; flex: 0 0 88px; width: 88px; height: 80px; border: 4px ridge #8a7550; background: #514638; box-shadow: inset 0 0 20px #20170b77; }
.item-portrait img,.chapter-emblem img { width: 72px; height: 64px; }
.guide-mode-cards h3 { display: flex; align-items: center; gap: 10px; font-size: 23px; }
.guide-mode-cards .mode-icon { width: 28px; height: 28px; }
.guide-scope-grid h3 { font-size: 22px; }
.route-card { padding: 16px 18px; gap: 17px; background: #e0cb9a; border-color: #f0dea9 #9c814c #9c814c #f0dea9; }
.route-card-number { position: relative; display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; border: 3px ridge #8d7752; background: #4c4232; }
.route-card-number .pixel-icon { width: 36px; height: 32px; margin-top: -7px; }
.route-card-number > small { position: absolute; bottom: -2px; left: 0; right: 0; margin: 0; color: #ffff00; text-align: center; font-family: var(--heading-font); font-size: 12px; line-height: 1.4; text-shadow: 1px 1px #000; }
.route-card strong { font-size: 22px; line-height: 1.4; }
.route-card small { color: #69502a; }
.route-card-number > small { color: #ffff00; }
.route-card > span:last-child { color: #82602c; font-size: 23px; }
.chapter-title-row { display: flex; align-items: center; gap: 18px; margin: 16px 0 20px; }
.chapter-title-row h1 { flex: 1; margin: 0; font-size: clamp(28px,2.6vw,35px); }
.chapter-emblem { flex-basis: 76px; width: 76px; height: 72px; }
.chapter-emblem img { width: 54px; height: 48px; }
.chapter-topline .eyebrow { font-size: 12px; letter-spacing: .2px; }
.chapter-topline > span:not(.eyebrow) { flex: 0 0 auto; }
.chapter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 17px; }
.chapter-actions > span { max-width: 270px; color: #665133; font-size: 12px; line-height: 1.5; }
.chapter-actions button:disabled { cursor: default; opacity: .7; }
.task-main { position: relative; }
.task-main .task-label { padding-right: 58px; }
.task-permalink { position: absolute; top: 3px; right: 3px; display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 2px; color: #725221; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.task-permalink:hover { color: #322413; background: #bca16b3d; }
.task-permalink:focus-visible { outline: 3px solid #70511e; outline-offset: -3px; }
.task-item.linked-step { outline: 2px solid #8d692d; outline-offset: 3px; scroll-margin-top: 95px; }
.action-group-heading { margin: 28px 0 11px; padding: 0 2px 8px; border-bottom: 1px solid #9c824e; }
.action-group-heading h3 { margin: 0; color: #4f3a1e; font-family: var(--heading-font); font-weight: 400; font-size: 24px; line-height: 1.25; }
.action-group-heading p { margin: 7px 0 0; color: #665232; font-size: 13px; line-height: 1.65; }
.action-step { margin-bottom: 7px; }
.action-step .task-label { min-height: 58px; padding-top: 14px; padding-bottom: 14px; }
.action-step .task-copy { font-size: 15px; line-height: 1.65; }
.action-step[data-action="bank"],.action-step[data-action="withdraw"] { border-left: 4px solid #8b7747; }
.action-step[data-action="travel"] { border-left: 4px solid #737a54; }
.quest-step-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 9px; }
.quest-step-badge { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 4px 9px 4px 6px; border: 2px ridge #ae9763; background: #e0cb98; color: #4c3a22; font: 700 12px/1.45 Arial,Helvetica,sans-serif; box-shadow: inset 0 0 0 1px #f2dfb2; }
.quest-step-badge img { flex: 0 0 20px; width: 20px; height: 22px; object-fit: contain; }
.quest-step-badge > span { min-width: 0; overflow-wrap: anywhere; }
.quest-step-badge.quest-start { border-color: #8a8257; background: #d5d3a1; color: #35432b; }
.quest-step-badge.quest-start b { color: #35432b; }
.quest-step-badge.quest-finished { border-color: #668446; background: #c0d9a1; color: #27451d; box-shadow: inset 0 0 0 1px #e0edc8; }
.quest-step-badge.quest-in-progress { border-color: #a98b3c; background: #f1d580; color: #5f470f; box-shadow: inset 0 0 0 1px #fff0b9; }
.task-item .quest-step-badge.quest-finished b,.task-item .quest-step-badge.quest-in-progress b { color: inherit; }
.quest-step-status { display: inline-block; margin-left: 7px; font-size: 11px; white-space: nowrap; }
.quest-step-status > span { font-size: 14px; line-height: 1; }
.task-item.done .quest-step-badge { opacity: .85; }
.task-item.done .quest-step-badge.quest-finished,.task-item.done .quest-step-badge.quest-in-progress { opacity: 1; }
.quest-step-hint { margin: 3px 22px 17px 96px; padding: 12px 14px; border-left: 3px solid #8d784d; background: #e2cc9a; color: #5c4527; font-size: 13px; line-height: 1.7; }
.quest-step-hint a { color: #4a542e; font-weight: 700; text-underline-offset: 3px; }
.step-locations { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: -3px 20px 13px 96px; }
.step-location-badge { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 9px; border: 2px ridge #bea67b; background: #edddba; box-shadow: inset 0 0 0 1px #f6eacb; color: #60432b; font: 12px/1.45 Arial,Helvetica,sans-serif; text-decoration: none; }
a.step-location-badge:hover { background: #f6e9c9; border-color: #9b7950; }
.step-location-badge > span:not(.location-arrow) { min-width: 0; overflow-wrap: anywhere; }
.step-location-badge strong { display: block; font-size: 12px; }
.step-location-badge small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: #7a6040; }
.step-location-badge .location-pin { flex: 0 0 20px; width: 20px; height: 20px; image-rendering: pixelated; }
.step-location-badge .location-arrow { flex-shrink: 0; margin-left: 3px; font-size: 14px; color: #8a5135; }
.npc-location-badge { background: #e7d7b2; }
.npc-location-list { flex-basis: 100%; color: #775332; font-size: 12px; }
.npc-location-list > summary { display: flex; align-items: center; gap: 8px; min-height: 35px; cursor: pointer; }
.npc-location-list > summary .location-pin { flex: 0 0 20px; width: 20px; height: 20px; image-rendering: pixelated; }
.npc-location-list > summary::after { content: "+"; margin-left: 4px; }
.npc-location-list[open] > summary::after { content: "−"; }
.npc-location-list > div { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 5px; }
.npc-name-link { color: #785132; text-decoration: underline dotted; text-underline-offset: 3px; }
.npc-name-link:hover { color: #443d23; text-decoration-style: solid; }
@media(max-width:700px) { .step-locations { margin-left: 16px; margin-right: 12px; } }
.item-help { margin: 0 20px 14px 96px; border: 1px solid #b8a174; border-radius: 3px; background: #e5d3aa; color: #4d3b24; font-size: 13px; line-height: 1.6; }
.item-help > summary { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 9px 12px; cursor: pointer; list-style: none; }
.item-help > summary::-webkit-details-marker { display: none; }
.item-help > summary::after { content: "+"; margin-left: auto; padding-left: 8px; color: #715a30; font-size: 22px; line-height: 1; }
.item-help[open] > summary::after { content: "−"; }
.item-help > summary:hover { background: #eddfbd; }
.item-help > summary:focus-visible { outline: 3px solid #5a6e3b; outline-offset: 3px; }
.item-help > summary img { flex: 0 0 23px; width: 23px; height: 27px; object-fit: contain; }
.item-help > summary > span { min-width: 0; }
.item-help > summary strong { display: block; font-size: 13px; color: #4d3b24; }
.item-help > summary small { display: block; font-size: 11px; color: #725b36; overflow-wrap: anywhere; }
.item-help-content { padding: 0 15px 15px; border-top: 1px solid #c5ad7b; }
.item-help-intro { margin: 12px 0; font-size: 12px; color: #715a36; }
.item-help-entry { padding-top: 13px; margin-top: 13px; border-top: 1px solid #c5ad7b; }
.item-help-entry:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.item-help-entry h3 { margin: 0 0 8px; font: 700 15px/1.5 Arial,Helvetica,sans-serif; color: #4d3b24; }
.item-help-entry dl { display: grid; grid-template-columns: 93px minmax(0,1fr); gap: 8px 10px; margin: 0; }
.item-help-entry dt { font-weight: 700; color: #725b36; }
.item-help-entry dd { margin: 0; overflow-wrap: anywhere; }
.item-help-links { display: grid; gap: 7px; margin-top: 12px; }
.item-help-links a { display: block; padding: 9px 11px; border: 1px solid #a89362; background: #f0e1bd; color: #40562c; text-decoration: none; }
.item-help-links a:hover { background: #f6eccf; border-color: #71804d; }
.item-help-links span { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.item-help-links small { display: block; margin-top: 2px; color: #6d5834; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.item-help-wiki { display: inline-block; margin-top: 10px; padding: 3px 0; color: #53613a; font-size: 12px; text-underline-offset: 3px; }
.item-help-status { padding: 10px 12px; margin: 0 0 12px; border: 1px solid #8a9e66; background: #d5e1b8; color: #345025; }
.item-help-status > span { font-size: 15px; }
.item-help-return { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px 14px; margin: 12px 15px 0; padding: 10px 12px; border: 1px solid #a5905b; background: #ede0b8; color: #695333; font-size: 12px; }
.item-help-return a { color: #3e5628; font-weight: 700; text-underline-offset: 3px; }
@media(max-width:700px) { .item-help { margin-left: 16px; margin-right: 12px; } }
@media(max-width:460px) { .item-help-content { padding-left: 12px; padding-right: 12px; } .item-help-entry dl { display: block; } .item-help-entry dt { margin-top: 9px; } .item-help-entry dd { margin-top: 2px; } .item-help-return { margin-left: 12px; margin-right: 12px; } }
@media(max-width:600px) { .quest-step-hint { margin: 3px 12px 14px 17px; } .quest-step-badge { padding-right: 7px; font-size: 12px; } }
.packing-reference { margin: 0 16px 13px 70px; font-size: 12px; color: #6d5530; }
.packing-reference > summary { cursor: pointer; padding: 7px 0; }
.packing-reference .trip-kit { margin: 5px 0 0; }
@media(max-width:700px) { .packing-reference { margin-left: 12px; margin-right: 12px; } .action-group-heading h3 { font-size: 22px; } }
@media print { .chapter-actions,.task-permalink { display: none; } .task-main .task-label { padding-right: 18px; } .task-item.linked-step { outline: none; } }
.prep-grid h2 { font-size: 21px; }
.finish-panel h2 { font-size: 25px; }
.kit-heading { padding: 5px 12px 8px; background: #5b4b34; color: #f3dfad; border-color: #8d7446; }
.kit-heading strong { font-family: var(--heading-font); font-size: 15px; font-weight: 400; letter-spacing: .3px; color: #ffff00; text-shadow: 1px 1px #000; }
.kit-heading .kit-icon { width: 27px; height: 30px; }
.kit-heading > span:last-child:not(.kit-icon) { padding-left: 35px; font-size: 11px; }
.kit-grid h3 { display: flex; align-items: center; gap: 7px; min-height: 28px; font-size: 12px; }
.kit-grid h3 img { flex: 0 0 25px; width: 25px; height: 25px; }
.task-item.done .kit-heading { background: #4b5934; color: #e1e9ba; border-color: #8e9b65; }
.task-item.done .kit-heading strong { color: #e0ee8f; }
#chapter-position { font-size: 14px; }
.progress-card strong,.stats-grid strong { font-size: 32px; color: #ffff00; text-shadow: 1px 1px #000; }
.next-task strong { font-size: 24px; }
.dialog-heading h2 { font-size: 26px; }

/* Skill tab: original icons, reported levels, and readable XP values. */
.character-connect-card h2,.character-setup-card h2 { font-size: 27px; }
.character-setup-card .section-kicker { font-size: 12px; }
.character-review h2,.character-section-heading h2 { font-size: 27px; }
.character-summary h2 { font-size: 33px; }
.character-import-content h2 { font-size: 25px; }
.character-skills { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; padding: 8px; border: 4px ridge #8e7952; background: #393123; }
.character-skill { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 0 9px; padding: 12px 10px; border: 2px solid; border-color: #827257 #332a1d #332a1d #827257; background: linear-gradient(#665b46,#504634); box-shadow: inset 0 0 0 1px #736044; }
.character-skill > .skill-icon { grid-column: 1; grid-row: 1 / 3; width: 32px; height: 32px; }
.character-skill > span { grid-column: 2; grid-row: 1; color: #eee0bb; font-size: 11px; overflow-wrap: anywhere; }
.character-skill > strong { grid-column: 3; grid-row: 1 / 3; color: #ffff00; font-size: 27px; line-height: 1.4; text-shadow: 1px 1px #000; }
.character-skill > small { grid-column: 2; grid-row: 2; margin: 2px 0 0; color: #cab98e; font-size: 9px; line-height: 1.6; }
.character-skill.unknown strong { color: #bfb08b; }
.character-quests { background: #423a2e; border: 3px ridge #8e7952; border-top: 0; scrollbar-color: #9f8350 #423a2e; }
.character-quest { border-bottom: 1px solid #716045; color: #f0e1bd; }
.character-quest:nth-child(even) { background: #4b4233; }
.character-quest .quest-state { background: #372f24; color: #f7ae9b; border-color: #8c5d45; }
.character-quest .quest-state.finished { color: #8ee36f; border-color: #64894e; background: #35442d; }
.character-quest .quest-state.in_progress { color: #ffff00; border-color: #a58b46; background: #50452c; }
.character-empty { color: #d5c39c; }

/* Custom SousChef fan artwork, edited from the supplied mascot image. */
.souschef-mascot { display: block; flex: none; object-fit: contain; image-rendering: auto; }
.hub-link .souschef-mascot { width: 23px; height: 23px; }
.board-icon .souschef-mascot { width: 45px; height: 43px; }
.bot-mark > .souschef-mascot { width: 100%; height: 100%; image-rendering: auto; }
.bot-panel { position: relative; isolation: isolate; overflow: hidden; min-height: 300px; padding: 35px 30px; gap: 30px; background: #332f27; border: 4px ridge #8e7954; }
.bot-panel::before,.bot-panel::after { content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; width: 50%; background: #474942 url("assets/osrs-scenes/login-normal.jpg") center / cover no-repeat; opacity: .4; }
.bot-panel::before { left: 0; }
.bot-panel::after { right: 0; transform: scaleX(-1); }
.bot-panel > .bot-mark { display: grid; place-items: center; flex: 0 0 200px; width: 200px; height: 200px; padding: 5px; border: 3px ridge #9e8757; background: #211d168c; box-shadow: inset 0 0 25px #0008; }
.bot-panel > div:not(.bot-mark) { position: relative; }
.bot-panel h1 { font-size: 44px; color: #ffff00; text-shadow: 2px 2px #000; }
.bot-panel .section-kicker { color: #e7c46f; font-size: 12px; text-shadow: 1px 1px #000; }
.bot-panel p { color: #f0dfb8; font-size: 15px; text-shadow: 1px 1px #000; }
.status-badge { font-size: 14px; padding: 4px 10px; }
.bot-panel .status-badge { color: #fce095; background: #3a3022; border-color: #9e8050; }
.art-credits { margin-top: 12px; border-top: 1px solid #aa915d; }
.art-credits summary { display: list-item; width: fit-content; min-height: 42px; padding: 11px 2px; cursor: pointer; color: #5f4b2c; font-weight: 700; }
.art-credits > div { max-width: 820px; padding: 0 2px 8px; }
.art-credits p { margin: 0 0 10px; font-size: 11px; color: #695231; }
.art-credits a { color: #4c542b; text-underline-offset: 3px; }

@media(min-width:1500px) {
  :root { --sidebar-width: 292px; }
  .guild-hero .guild-intro { padding: 36px 32px; }
}
@media(max-width:1150px) {
  :root { --sidebar-width: 255px; }
  .brand { padding-left: 13px; padding-right: 12px; gap: 10px; }
  .brand-text { font-size: 22px; }
  .brand-mark { flex-basis: 50px; width: 50px; height: 50px; }
  .guild-hero { grid-template-columns: 1fr; }
  .guild-hero .guild-intro { padding: 28px; }
  .guild-hero h1 { font-size: 43px; }
  .guild-hero .guild-intro .hero-description { max-width: 600px; }
  .guild-hero .guild-actions { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px 20px; }
  .world-scene { height: 240px; border-left: 0; border-top: 3px ridge #826c47; }
  .world-scene > img { min-height: 0; height: 100%; object-position: center 55%; }
  .guild-shelf { flex-wrap: wrap; justify-content: center; gap: 7px 20px; }
  .guild-board { grid-template-columns: 1fr; gap: 10px; }
  .board-entry { flex-direction: row; align-items: center; padding: 18px; gap: 17px; }
  .board-entry > span:nth-child(2) { width: auto; padding-right: 12px; }
  .board-entry > span:last-child { position: static; }
  .board-entry > span:nth-child(2) > strong { margin-bottom: 5px; }
  .character-skill { grid-template-columns: 26px minmax(0,1fr) auto; gap: 0 7px; padding: 10px 7px; }
  .character-skill > .skill-icon { width: 26px; height: 26px; }
  .character-skill > strong { font-size: 24px; }
  .bot-panel { padding: 28px 22px; gap: 23px; }
  .bot-panel > .bot-mark { flex-basis: 160px; width: 160px; height: 170px; }
}
@media(max-width:820px) {
  :root { --sidebar-width: 286px; }
  .brand { padding: 22px 18px; }
  .brand-text { font-size: 24px; }
  .guild-hero { grid-template-columns: minmax(0,1fr) minmax(0,.9fr); }
  .guild-hero .guild-intro { padding: 28px 23px; }
  .guild-hero h1 { font-size: 38px; }
  .guild-hero .guild-actions { flex-direction: column; align-items: flex-start; }
  .world-scene { height: auto; border-top: 0; border-left: 3px ridge #826c47; }
  .world-scene > img { height: 100%; object-position: 53% 52%; }
  .world-scene figcaption { font-size: 20px; padding: 15px; }
}
@media(max-width:600px) {
  .guild-hero { grid-template-columns: 1fr; }
  .guild-hero .guild-intro { padding: 27px 22px; }
  .guild-hero h1 { font-size: 39px; }
  .guild-hero .guild-intro .hero-tagline { font-size: 18px; }
  .guild-hero .guild-intro .hero-description { font-size: 14px; }
  .guild-hero .guild-actions { gap: 12px; margin-top: 20px; }
  .guild-hero .guild-actions a { font-size: 16px; }
  .world-scene { height: 210px; border-left: 0; border-top: 3px ridge #826c47; }
  .world-scene > img { object-position: center 56%; }
  .world-scene figcaption { padding: 14px 17px; }
  .guild-shelf { padding: 11px 9px; }
  .shelf-label { width: 100%; text-align: center; font-size: 13px; }
  .shelf-items { gap: 4px; }
  .shelf-items img { width: 32px; height: 29px; }
  .guide-spotlight { padding: 19px; }
  .guide-spotlight::after { width: 36px; height: 32px; top: 24px; right: 15px; transform: none; }
  .guide-spotlight h2 { font-size: 25px; }
  .board-entry { padding: 16px 12px; gap: 12px; }
  .board-icon { flex-basis: 52px; width: 52px; height: 52px; }
  .board-entry > span:nth-child(2) > strong { font-size: 20px; }
  .board-entry > span:nth-child(2) > small { font-size: 12px; }
  .feature-title { gap: 13px; }
  .feature-title h2 { font-size: 28px; }
  .item-portrait { flex-basis: 68px; width: 68px; height: 68px; }
  .item-portrait img { width: 54px; height: 48px; }
  .guide-mode-cards h3 { font-size: 22px; }
  .route-card { padding: 14px 12px; gap: 12px; }
  .route-card strong { font-size: 19px; }
  .route-card-number { flex-basis: 48px; width: 48px; height: 52px; }
  .chapter-title-row { align-items: flex-start; gap: 12px; }
  .chapter-title-row h1 { font-size: 26px; }
  .chapter-emblem { flex-basis: 55px; width: 55px; height: 55px; border-width: 3px; }
  .chapter-emblem img { width: 36px; height: 32px; }
  .chapter-topline .eyebrow { font-size: 11px; }
  .primary-button,.secondary-button,.chapter-bottom button { font-size: 16px; }
  .chapter-bottom button { padding: 11px; }
  #chapter-position { font-size: 12px; }
  .character-skills { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; padding: 5px; }
  .character-skill { grid-template-columns: 26px minmax(0,1fr) auto; padding: 10px 7px; gap: 0 6px; }
  .character-skill > span { font-size: 10px; }
  .character-skill > small { font-size: 8px; }
  .character-skill > strong { font-size: 22px; }
  .character-section-heading h2 { font-size: 25px; }
  .progress-card strong,.stats-grid strong { font-size: 27px; }
  .bot-panel { flex-direction: column; align-items: center; padding: 27px 19px; gap: 24px; text-align: center; }
  .bot-panel > .bot-mark { flex: none; width: 190px; height: 190px; }
  .bot-panel h1 { font-size: 40px; }
  .bot-panel .section-kicker { font-size: 11px; }
  .dialog-heading h2 { font-size: 25px; }
  .site-footer { font-size: 11px; }
}
@media(max-width:370px) {
  .guild-hero h1 { font-size: 33px; }
  .character-skill { grid-template-columns: 22px minmax(0,1fr); }
  .character-skill > .skill-icon { width: 22px; height: 22px; grid-row: 1; }
  .character-skill > span { grid-column: 2; grid-row: 1; }
  .character-skill > strong { grid-column: 1; grid-row: 2; font-size: 20px; }
  .character-skill > small { grid-column: 2; grid-row: 2; }
}
@media print {
  .guild-shelf,.chapter-emblem,.art-credits,.guide-spotlight::after { display: none !important; }
  body,#main { background: white; }
  .kit-heading { background: #eee; color: #222; }
  .kit-heading strong { color: #222; text-shadow: none; }
  .character-skill { background: #eee; color: #222; }
  .character-skill > span,.character-skill > strong,.character-skill > small { color: #222; text-shadow: none; }
}

/* Established-account plans use the same parchment, item portraits and bronze frames. */
.plan-entry-card { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 18px; margin: 22px 0 28px; padding: 20px; border: 3px ridge #9f8858; background: linear-gradient(100deg,#d8c08b,#eddbad); box-shadow: inset 0 0 0 1px #f4e3b277; }
.plan-entry-icon { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border: 3px ridge #91794e; background: #504432; box-shadow: inset 0 0 13px #21180d66; }
.plan-entry-icon img { max-width: 36px; max-height: 36px; object-fit: contain; image-rendering: pixelated; }
.plan-entry-card h2 { margin: 0 0 6px; color: #3d2a14; font-size: 26px; }
.plan-entry-card p { margin: 0; color: #523d20; font-size: 13px; line-height: 1.65; }
.plan-entry-card .plan-entry-summary { margin-top: 7px; color: #6a512b; font-size: 12px; }
.plan-entry-card > a { white-space: nowrap; }
.plan-rail-scope { display: block; margin: 7px 0 9px; line-height: 1.5; overflow-wrap: anywhere; }
.plan-heading h1::before { content: ""; display: inline-block; width: 37px; height: 37px; margin-right: 12px; background: url("assets/osrs/clue-scroll.png") center / contain no-repeat; image-rendering: pixelated; vertical-align: -6px; }
.plan-summary,.plan-active-banner { padding: 18px 20px; margin: 0 0 22px; border: 2px solid #8c8551; border-left: 5px solid #6c7748; background: #d3d5a4; color: #3e4527; }
.plan-summary h2,.plan-active-banner h2 { margin: 0 0 7px; font-size: 25px; color: #34401e; }
.plan-summary p,.plan-active-banner p { margin: 7px 0; font-size: 13px; line-height: 1.7; }
.plan-summary p:first-child,.plan-active-banner p:first-child { margin-top: 0; }
.plan-summary p:last-child,.plan-active-banner p:last-child { margin-bottom: 0; }
.plan-summary a,.plan-active-banner a { color: #34451e; text-underline-offset: 3px; }
.plan-summary .primary-button,.plan-active-banner .primary-button { color: #ffff00; }
.plan-summary .secondary-button,.plan-active-banner .secondary-button { color: #342416; }
.plan-summary .plan-form-actions { margin-top: 12px; }
.plan-setup-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); align-items: start; gap: 18px; margin-bottom: 34px; }
.plan-start-card,.plan-character-card { min-width: 0; padding: 23px; border: 3px ridge #a48b57; background: #e5d1a0; box-shadow: inset 0 0 0 1px #f3e1ae88; }
.plan-start-card > .section-kicker { margin: 0 0 6px; }
.plan-start-card h2,.plan-character-card h2 { margin: 0 0 12px; font-size: 27px; line-height: 1.3; color: #3c2b16; }
.plan-start-card p,.plan-character-card p { color: #544024; font-size: 13px; line-height: 1.7; }
.plan-character-card > .plan-entry-icon { margin-bottom: 16px; }
.plan-character-card .plan-character-status { margin: 18px 0; padding: 12px 14px; border: 1px solid #b39b66; background: #f3e2b788; color: #554322; font-size: 12px; overflow-wrap: anywhere; }
.plan-character-card .plan-small-note { margin: 19px 0 0; font-size: 12px; color: #665031; }
.plan-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 17px 0 0; }
.plan-field label { font-size: 12px; line-height: 1.5; font-weight: 700; color: #4f391c; }
.plan-field select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 31px 10px 11px; border: 2px inset #b49b66; border-radius: 2px; background: #f1dfb3; color: #392a17; font: 14px/1.45 Arial,Helvetica,sans-serif; }
.plan-field select:focus-visible { outline: 3px solid #745421; outline-offset: 3px; }
.plan-start-form { margin: 0; }
.plan-start-preview { margin: 17px 0; padding: 13px 14px; min-height: 58px; border-left: 3px solid #99804c; background: #cfb77f66; color: #614927; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.plan-start-preview p { margin: 0 0 7px; font-size: 12px; }
.plan-start-preview p:last-child { margin-bottom: 0; }
.plan-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.plan-form-actions button,.plan-form-actions a { font-size: 15px; }
.plan-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 15px; }
.plan-section-heading > div:first-child { flex: 1; min-width: 0; }
.plan-section-heading .section-kicker { margin: 0 0 5px; }
.plan-section-heading h2 { margin: 0 0 9px; font-size: 29px; line-height: 1.25; color: #3c2b16; }
.plan-section-heading p:not(.section-kicker) { max-width: 590px; margin: 0; color: #5c4527; font-size: 13px; line-height: 1.7; }
.plan-section-heading > .plan-field { flex: 0 0 190px; margin-top: 0; }
.plan-goal-count { margin: 0 0 13px; color: #72562e; font-size: 12px; line-height: 1.5; }
.plan-goal-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.plan-goal-card { display: flex; flex-direction: column; min-width: 0; padding: 21px; border: 3px ridge #a78d58; background: #e1cb99; box-shadow: inset 0 0 0 1px #f7e5b788; }
.plan-goal-card.is-active,.plan-goal-card[data-selected="true"] { border-color: #71804d; background: #d6d4a1; box-shadow: inset 0 0 0 1px #eff0c8,inset 4px 0 #738047; }
.plan-goal-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 10px; }
.plan-goal-heading > img { flex: 0 0 36px; width: 36px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.plan-goal-card h3 { margin: 0 0 10px; color: #412b13; font-size: 25px; line-height: 1.3; }
.plan-goal-heading h3 { margin: 0; }
.plan-goal-card h3 a { color: inherit; }
.plan-goal-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.plan-goal-card p,.plan-goal-description { margin: 0 0 14px; color: #5c4425; font-size: 13px; line-height: 1.7; }
.plan-goal-requirements { margin: 0 0 15px; padding-top: 11px; border-top: 1px solid #ad9157; color: #624b2c; font-size: 12px; line-height: 1.65; }
.plan-goal-requirements summary { padding: 5px 0; color: #50391d; cursor: pointer; font-weight: 700; }
.plan-goal-requirements ul { margin: 9px 0 0; padding-left: 18px; }
.plan-goal-requirements li { margin: 0 0 6px; }
.plan-goal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: auto; padding-top: 7px; }
.plan-goal-actions .primary-button,.plan-goal-actions .secondary-button { font-size: 15px; padding: 10px 13px; }
.plan-goal-actions > a:not(.primary-button):not(.secondary-button) { color: #555c2d; font-size: 12px; text-underline-offset: 3px; }
.plan-scope-note { margin: 20px 0 34px; padding: 16px 18px; border: 1px solid #ad945f; background: #e8d4a466; color: #604824; font-size: 12px; line-height: 1.7; }
.plan-scope-note p { margin: 5px 0 0; }
.plan-support-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.plan-support-card { display: block; min-width: 0; padding: 16px; border: 2px ridge #ac9157; background: #ddc592; color: #4c361a; text-decoration: none; }
.plan-support-card:hover { background: #ebd6a7; border-color: #856b3c; }
.plan-support-card h3,.plan-support-card strong { display: block; margin: 0 0 8px; font-family: var(--heading-font); font-weight: 400; font-size: 21px; line-height: 1.35; color: #422c15; }
.plan-support-card p,.plan-support-card small { display: block; margin: 0; color: #6a4e27; font-size: 12px; line-height: 1.65; }
.plan-empty { grid-column: 1/-1; padding: 22px; border: 2px ridge #ac9157; background: #e7d4a6; color: #5b4423; font-size: 14px; line-height: 1.7; }
@media(max-width:1150px) {
  .plan-entry-card { grid-template-columns: 52px minmax(0,1fr); }
  .plan-entry-card > a { grid-column: 2; justify-self: start; white-space: normal; }
  .plan-setup-grid { grid-template-columns: 1fr; }
  .plan-character-card { display: grid; grid-template-columns: 52px minmax(0,1fr); column-gap: 17px; }
  .plan-character-card > .plan-entry-icon { grid-column: 1; grid-row: 1 / 3; margin: 0; }
  .plan-character-card > h2,.plan-character-card > p,.plan-character-card > a { grid-column: 2; }
  .plan-character-card > a { justify-self: start; }
  .plan-character-card h2 { margin-bottom: 2px; }
  .plan-support-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
  .plan-goal-grid { grid-template-columns: 1fr; }
  .plan-section-heading { align-items: stretch; flex-direction: column; gap: 13px; }
  .plan-section-heading > .plan-field { flex: none; width: 100%; }
  .plan-section-heading h2 { font-size: 26px; }
}
@media(max-width:500px) {
  .plan-entry-card { padding: 17px 15px; gap: 13px; grid-template-columns: 42px minmax(0,1fr); }
  .plan-entry-icon { width: 42px; height: 44px; }
  .plan-entry-card h2 { font-size: 23px; }
  .plan-entry-card > a { grid-column: 1 / -1; width: 100%; text-align: center; }
  .plan-start-card,.plan-character-card,.plan-goal-card { padding: 18px 15px; }
  .plan-character-card { display: block; }
  .plan-character-card > .plan-entry-icon { margin-bottom: 13px; }
  .plan-start-card h2,.plan-character-card h2 { font-size: 25px; }
  .plan-form-actions { align-items: stretch; flex-direction: column; }
  .plan-form-actions button,.plan-form-actions a { width: 100%; text-align: center; }
  .plan-goal-actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .plan-goal-actions .primary-button,.plan-goal-actions .secondary-button { width: 100%; text-align: center; }
  .plan-summary,.plan-active-banner { padding: 16px 14px; }
  .plan-support-grid { grid-template-columns: 1fr; }
}

/* The selected character stays within reach throughout the guide. */
.connected-account { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; min-width: 0; max-width: 224px; min-height: 44px; padding: 6px 11px; border: 2px solid; border-color: #8c7955 #211d16 #211d16 #8c7955; background: linear-gradient(#4b4332,#332e23); box-shadow: 0 0 0 1px #211d16; color: #e8d5a1; text-decoration: none; }
.connected-account:hover { color: #ffebb0; background: #514631; border-top-color: #baa16b; border-left-color: #baa16b; }
.connected-account-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
#connected-account-label { color: #c0ad86; font: 10px/1.35 Arial,Helvetica,sans-serif; white-space: nowrap; }
#connected-account-name { display: block; margin-top: 2px; color: #ffe184; font: 700 13px/1.25 Arial,Helvetica,sans-serif; white-space: nowrap; }
.connection-light { flex: 0 0 10px; width: 10px; height: 10px; border: 1px solid #1e2118; border-radius: 50%; background: #8b8979; box-shadow: inset 1px 1px #ffffff47,0 0 0 2px #24231a; }
.connected-account.is-connected .connection-light { background: #7ddd50; border-color: #355c22; box-shadow: inset 1px 1px #d4ffc1,0 0 0 2px #242b1d,0 0 6px #81d94d70; }
.connected-account.is-connected #connected-account-label { color: #b7d49d; }
.topbar .search-wrap { min-width: 130px; }
@media(max-width:1100px) {
  .topbar .breadcrumb { display: none; }
  .topbar .search-wrap { flex: 1; }
}
@media(max-width:680px) {
  .connected-account { gap: 7px; padding-left: 8px; padding-right: 8px; }
  #connected-account-name { font-size: 12px; }
  #connected-account-label { font-size: 9px; }
  .topbar .search-wrap { min-width: 90px; }
}
@media(max-width:360px) {
  html { scroll-padding-top: 130px; }
  .topbar { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .topbar .menu-button { grid-column: 1; grid-row: 1; }
  .topbar .search-wrap { grid-column: 2; grid-row: 1; min-width: 0; }
  .connected-account { grid-column: 1 / 3; grid-row: 2; justify-self: end; max-width: 100%; }
  .task-item.linked-step { scroll-margin-top: 12px; }
}