/**
 * PocketSkills Web Portal — the old-school skin (classic MMORPG portals: Tibia's and old RuneScape's
 * sites). Loaded after every other sheet; it only dresses what they lay out:
 *  - ornate frames: every stone box gets a dark leather border with double gold lines and gold
 *    diamonds on the corners (one small SVG used as a border-image)
 *  - aged paper: the boxes of the middle column and the right widgets read like parchment (a warm
 *    radial tone, darker at the edges, with a faint fibre noise); their text turns to dark ink by
 *    redefining the colour tokens inside them, so every component follows without its own rules
 *  - classic icons: the game's pixel icons (icons.js) drawn crisp, with a hard shadow
 */

/* --- Ornate frames ----------------------------------------------------------------------------- */
.stone-box {
  border: 8px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23241608'/%3E%3Crect x='1.5' y='1.5' width='21' height='21' fill='none' stroke='%238b6c23'/%3E%3Crect x='4.5' y='4.5' width='15' height='15' fill='none' stroke='%23c9a24a'/%3E%3Cg fill='%23e8b83a' stroke='%234d390a' stroke-width='.8'%3E%3Cpath d='M4.5 .6 8.4 4.5 4.5 8.4 .6 4.5z'/%3E%3Cpath d='M19.5 .6 23.4 4.5 19.5 8.4 15.6 4.5z'/%3E%3Cpath d='M4.5 15.6 8.4 19.5 4.5 23.4 .6 19.5z'/%3E%3Cpath d='M19.5 15.6 23.4 19.5 19.5 23.4 15.6 19.5z'/%3E%3C/g%3E%3Cg fill='%23fff3b0'%3E%3Ccircle cx='4.5' cy='4.5' r='1'/%3E%3Ccircle cx='19.5' cy='4.5' r='1'/%3E%3Ccircle cx='4.5' cy='19.5' r='1'/%3E%3Ccircle cx='19.5' cy='19.5' r='1'/%3E%3C/g%3E%3C/svg%3E") 8 stretch;
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

/* the old two-dot ornament is replaced by the corner diamonds */
.stone-box.ornate::before,
.stone-box.ornate::after { content: none; }

/* leather title bars with a gold rule under them */
.panel-head {
  background:
    linear-gradient(180deg, rgba(255, 226, 160, 0.1), transparent 40%),
    linear-gradient(180deg, #4a2e16 0%, #2e1c0c 60%, #1e1207 100%);
  border-bottom: 2px solid #8b6c23;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.25), 0 1px 0 #000;
}

.panel-head h2,
.panel-head h3 { color: #ffe9a8; text-shadow: 1px 1px 0 #000, 0 0 8px rgba(232, 184, 58, 0.35); }

/* --- Aged paper -------------------------------------------------------------------------------- */
.portal-content-main .panel-body,
.portal-sidebar-right .panel-body {
  /* dark ink and sepia surfaces inside the paper: every component reads these tokens */
  --text-main: #2b1a0b;
  --text-bright: #1a0f05;
  --text-dim: #4b3520;
  --text-muted: #6e5536;
  --gold-light: #7a4a06;
  --gold-primary: #8a5a10;
  --gold-dark: #6b4a12;
  --bg-surface: rgba(120, 80, 30, 0.1);
  --bg-surface-2: rgba(120, 80, 30, 0.08);
  --bg-surface-3: rgba(120, 80, 30, 0.14);
  --bg-card: rgba(120, 80, 30, 0.08);
  --bg-parchment: rgba(120, 80, 30, 0.08);
  --frame-border: #a8875a;
  --frame-mid: #b89a6a;
  --frame-highlight: #8a6a40;
  --bevel-light: rgba(255, 255, 255, 0.35);
  --bevel-light-strong: rgba(255, 255, 255, 0.5);
  color: var(--text-main);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .08 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 35%, #f3e6c6 0%, #e6d2a6 55%, #cfb17a 100%);
  box-shadow: inset 0 0 24px rgba(90, 55, 15, 0.45);
}

.portal-content-main .panel-body a:not(.stone-btn):not(.menu-link),
.portal-sidebar-right .panel-body a:not(.stone-btn):not(.menu-link) { color: #7a2e0a; }

.portal-content-main .panel-body a:not(.stone-btn):not(.menu-link):hover,
.portal-sidebar-right .panel-body a:not(.stone-btn):not(.menu-link):hover { color: #a8400e; }

/* tables on paper: a darker ruled header, rows in faint sepia stripes */
.portal-content-main .rpg-table th,
.portal-sidebar-right .rpg-table th { background: rgba(70, 40, 10, 0.18); color: #3a2310; }
.portal-content-main .rpg-table tbody tr:nth-child(even),
.portal-sidebar-right .rpg-table tbody tr:nth-child(even) { background: rgba(120, 80, 30, 0.08); }

/* form fields on paper */
.portal-content-main .rpg-input {
  background: #fbf3df;
  color: #2b1a0b;
  border-color: #a8875a;
  box-shadow: inset 0 1px 3px rgba(90, 55, 15, 0.35);
}

/* --- Classic icons ----------------------------------------------------------------------------- */
.ico-pix {
  width: 1.6em;
  height: 1.6em;
  vertical-align: -0.45em;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75));
}

.menu-group-header:hover .ico-pix,
.menu-link.active .ico-pix,
a:hover > .ico-pix,
button:hover > .ico-pix { transform: translateY(-1px) scale(1.08); }

/* --- Readable on paper: the game's bright colours get darker inks or an ink outline ------------- */
.portal-content-main .guild-tag { color: #6a2fb0; }

.portal-content-main .online-pill.on { color: #1e7a2e; border-color: rgba(30, 122, 46, 0.55); }

/* skull names and staff tags keep the game's colours (inline), outlined in ink so white reads */
.portal-content-main .col-skull,
.portal-content-main .news-meta b,
.portal-content-main .feature-item-desc[style] {
  text-shadow: -1px 0 #2b1a0b, 1px 0 #2b1a0b, 0 -1px #2b1a0b, 0 1px #2b1a0b;
}

.portal-content-main .ranking-tab-btn:hover { color: var(--text-bright); }

.portal-content-main .ranking-tab-btn.active {
  background: linear-gradient(180deg, #4a2e16, #2a1a0b);
  border-color: #8b6c23;
  color: #ffe9a8;
}

/* --- Cards inside the paper ---------------------------------------------------------------------
 * Feature, guild, FAQ and event cards are lighter sheets pinned on the parchment (a raised edge, a
 * warm wash, dark ink); the leather bars inside it (a news card's title, a forum post's head, a fan
 * art caption) keep the frame's light ink, so nothing is ever dark on dark or light on light. */
.portal-content-main .panel-body .feature-item,
.portal-content-main .panel-body .faq-item,
.portal-content-main .panel-body .online-row {
  background: linear-gradient(180deg, rgba(255, 250, 235, 0.72), rgba(240, 222, 186, 0.6));
  border: 1px solid #b08d58;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 4px rgba(90, 55, 15, 0.25);
  color: var(--text-main);
}

.portal-content-main .panel-body .feature-item-header { color: #6a3a0c; text-shadow: none; }
.portal-content-main .panel-body .feature-item-desc { color: #3b2812; text-shadow: none; }
.portal-content-main .panel-body .guild-motd { color: #5a4228; }

.portal-content-main .news-card-head,
.portal-content-main .forum-post-head,
.portal-content-main .fanart-card figcaption {
  --text-main: #f5ecd5;
  --text-bright: #ffffff;
  --text-dim: #d9c7a3;
  --text-muted: #b39a72;
  --gold-light: #ffe9a8;
  --gold-primary: #e8b83a;
  color: var(--text-main);
}

.portal-content-main .news-card-head .meta-chip { color: #ffe9a8; border-color: #8b6c23; background: rgba(0, 0, 0, 0.35); }
.portal-content-main .news-card { background: rgba(255, 250, 235, 0.45); border-color: #b08d58; }

/* section sub-titles on paper: dark ink, no glow */
.portal-content-main .panel-body .sub-title { color: #6a3a0c; text-shadow: none; }