/* goblinpad — the dark goblin look the user picked (2026-11-15), with two
   things taken from goblintown.wtf's real 2022 stylesheet: its typeface, Blue
   Goblet (loads through the Adobe Fonts kit + goblet.css when FONT_KIT_URL is
   set), and its goblin frames: 56px boxes with the goblin scaled 140% from its
   feet so the head bursts out, wiggling. Loaded after styles.css; applies when
   html[data-theme="goblin"]. */

/* Blue Goblet (Insigne / Cory Godbey). Adobe Fonts serves it as "blue-goblet";
   self-hosted files in public/fonts/ are picked up by these faces. */
@font-face { font-family: "Blue Goblet"; font-weight: 400; font-style: normal; src: local("Blue Goblet"), local("BlueGoblet-Regular"), url("fonts/BlueGoblet-Regular.woff2") format("woff2"), url("fonts/BlueGoblet-Regular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Blue Goblet"; font-weight: 700; font-style: normal; src: local("Blue Goblet Bold"), local("BlueGoblet-Bold"), url("fonts/BlueGoblet-Bold.woff2") format("woff2"), url("fonts/BlueGoblet-Bold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Blue Goblet"; font-weight: 400; font-style: italic; src: local("Blue Goblet Oblique"), local("BlueGoblet-Oblique"), url("fonts/BlueGoblet-Oblique.woff2") format("woff2"), url("fonts/BlueGoblet-Oblique.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Blue Goblet"; font-weight: 700; font-style: italic; src: local("Blue Goblet Bold Oblique"), local("BlueGoblet-BoldOblique"), url("fonts/BlueGoblet-BoldOblique.woff2") format("woff2"), url("fonts/BlueGoblet-BoldOblique.otf") format("opentype"); font-display: swap; }

html[data-theme="goblin"] {
  --bg: #0b0c08; --bg2: #11130c; --card: #151911; --card2: #1c2216; --line: #2b3321; --line2: #40502c;
  --text: #e8e3c4; --muted: #a8a37f; --dim: #6d6b52;
  --accent: #a6cc3c; --accent-ink: #0d1403; --red: #d9533f; --red-soft: rgba(217, 83, 63, 0.16); --green-soft: rgba(166, 204, 60, 0.13);
  --gold: #e2b23a; --blue: #8fb3b6;
  --radius: 14px; --radius-sm: 10px;
  /* stand-ins until Blue Goblet loads; goblet.css swaps both to Blue Goblet */
  --font: "Patrick Hand", "Comic Sans MS", "Segoe Print", cursive;
  --display: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  --hero-grad: radial-gradient(900px 420px at 15% -10%, rgba(166, 204, 60, 0.12), transparent 60%), radial-gradient(700px 400px at 85% 10%, rgba(217, 83, 63, 0.10), transparent 60%);
  /* the hand-drawn box: four uneven corners */
  --wonky: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --wonky2: 18px 225px 18px 255px / 255px 18px 225px 18px;
  color-scheme: dark;
}
html[data-theme="goblin"] body { font-size: 17px; line-height: 1.4; }
/* grain + vignette over everything */
html[data-theme="goblin"] body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0 0.4 0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  opacity: 0.9; mix-blend-mode: multiply;
}
html[data-theme="goblin"] body > * { position: relative; z-index: 1; }
html[data-theme="goblin"] .tape { height: 6px; background: repeating-linear-gradient(90deg, var(--accent) 0 14px, transparent 14px 22px, var(--accent) 22px 30px, transparent 30px 47px); opacity: 0.6; }

/* type: marker for the loud parts, handwriting for everything that has to be read */
html[data-theme="goblin"] h1, html[data-theme="goblin"] h2, html[data-theme="goblin"] h3, html[data-theme="goblin"] .brand, html[data-theme="goblin"] .btn, html[data-theme="goblin"] .tabs button, html[data-theme="goblin"] .scrawl {
  font-family: var(--display); font-weight: 400; letter-spacing: 0.01em; text-transform: lowercase;
}
html[data-theme="goblin"] .nav .links, html[data-theme="goblin"] .tile .k, html[data-theme="goblin"] th, html[data-theme="goblin"] .pill, html[data-theme="goblin"] .tile .s, html[data-theme="goblin"] .muted, html[data-theme="goblin"] .small, html[data-theme="goblin"] .kv, html[data-theme="goblin"] .step, html[data-theme="goblin"] .form label, html[data-theme="goblin"] .banner, html[data-theme="goblin"] .coin-card .row, html[data-theme="goblin"] .coin-head .meta {
  font-family: var(--font); text-transform: none; letter-spacing: 0;
}
html[data-theme="goblin"] .tile .v, html[data-theme="goblin"] td, html[data-theme="goblin"] .countdown, html[data-theme="goblin"] input, html[data-theme="goblin"] textarea, html[data-theme="goblin"] .rankbadge, html[data-theme="goblin"] .addr { font-family: var(--mono); font-size: 14px; }
html[data-theme="goblin"] .tile .v { font-size: 25px; font-weight: 700; }
html[data-theme="goblin"] .tile .k { font-size: 16px; color: var(--accent); font-weight: 400; }
html[data-theme="goblin"] th { font-size: 15px; color: var(--muted); font-weight: 400; }
html[data-theme="goblin"] .nav .links { font-size: 19px; gap: 20px; }
html[data-theme="goblin"] .nav .links a.on { text-decoration: underline wavy var(--accent); text-underline-offset: 5px; }
html[data-theme="goblin"] .kv { font-size: 16px; gap: 6px 12px; }
html[data-theme="goblin"] .kv .k { color: var(--muted); }
html[data-theme="goblin"] .coin-card .name { font-family: var(--display); font-weight: 400; }
html[data-theme="goblin"] .section h2 .muted { font-size: 15px; }
html[data-theme="goblin"] .hero h1 { font-size: clamp(44px, 7.2vw, 96px); line-height: 0.98; letter-spacing: 0; transform: rotate(-1.2deg); transform-origin: left bottom; max-width: 14ch; }
html[data-theme="goblin"] .hero h1 em { color: var(--red); position: relative; display: inline-block; transform: rotate(2deg); }
html[data-theme="goblin"] .hero h1 em::after { content: ""; position: absolute; left: -2%; right: -4%; bottom: 0.02em; height: 0.18em; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'><path d='M2 12 C 30 2, 50 18, 80 10 S 130 2, 160 12 S 190 16, 198 8' fill='none' stroke='%23a6cc3c' stroke-width='6' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%; opacity: 0.9; }
html[data-theme="goblin"] .hero p.lede { font-size: 20px; max-width: 56ch; }
html[data-theme="goblin"] .hero { padding: 36px 0 24px; }
html[data-theme="goblin"] .hero .wrap { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: end; }
html[data-theme="goblin"] .hero .mascot { display: block; width: 360px; max-width: 100%; justify-self: end; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.6)); transform: rotate(2deg); }
@media (max-width: 900px) { html[data-theme="goblin"] .hero .wrap { grid-template-columns: 1fr; } html[data-theme="goblin"] .hero .mascot { width: 240px; justify-self: start; order: -1; } }

/* hand-drawn boxes */
html[data-theme="goblin"] .card, html[data-theme="goblin"] .tile, html[data-theme="goblin"] .banner, html[data-theme="goblin"] .table-wrap, html[data-theme="goblin"] .drop {
  border: 2px solid var(--line2); border-radius: var(--wonky); box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.45), var(--shadow);
}
html[data-theme="goblin"] .tile:nth-child(2n) { border-radius: var(--wonky2); transform: rotate(0.4deg); }
html[data-theme="goblin"] .tile:nth-child(3n) { transform: rotate(-0.5deg); }
html[data-theme="goblin"] .card:nth-child(2n) { border-radius: var(--wonky2); }
html[data-theme="goblin"] .coin-card:hover { transform: rotate(-0.8deg) scale(1.01); border-color: var(--accent); }
html[data-theme="goblin"] .btn { border: 2px solid var(--line2); border-radius: var(--wonky2); padding: 9px 16px; font-size: 17px; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5); }
html[data-theme="goblin"] .btn.lg { font-size: 21px; padding: 12px 22px; }
html[data-theme="goblin"] .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: #6f8f1c; }
html[data-theme="goblin"] .btn:hover { transform: rotate(-1deg) translateY(-1px); text-decoration: none; }
html[data-theme="goblin"] input[type="text"], html[data-theme="goblin"] input[type="number"], html[data-theme="goblin"] input[type="url"], html[data-theme="goblin"] textarea { border: 2px solid var(--line2); border-radius: var(--wonky); background: #0e100a; }
html[data-theme="goblin"] .pill { border-radius: var(--wonky2); font-size: 13px; padding: 2px 10px; }
html[data-theme="goblin"] .rankbadge { border-radius: var(--wonky2); }
html[data-theme="goblin"] .bar { border-radius: 0; height: 8px; transform: rotate(-0.6deg); }
html[data-theme="goblin"] .bar i { background: repeating-linear-gradient(90deg, var(--red) 0 6px, #a63a2b 6px 8px); }
html[data-theme="goblin"] tr.me td { background: var(--green-soft); }
html[data-theme="goblin"] tr.top1 td { background: rgba(226, 178, 58, 0.07); }
html[data-theme="goblin"] .tabs button.on { border-bottom: 3px solid var(--accent); }
html[data-theme="goblin"] .brand { font-size: 26px; gap: 10px; }
/* the wordmark: goblintown-style hand lettering with the green halo, drawn from the user's reference */
html[data-theme="goblin"] .brand .wordmark-nav { height: 50px; width: auto; display: block; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.6)); transform: rotate(-2deg); }
html[data-theme="goblin"] .nav { height: 72px; }
/* the home page shows the big wordmark in the hero, so its nav carries none */
html[data-theme="goblin"] body[data-page="home"] .brand { display: none; }
html[data-theme="goblin"] .hero .wordmark { width: min(460px, 85%); height: auto; display: block; margin: 0 0 4px -10px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55)); transform: rotate(-2.5deg); }
html[data-theme="goblin"] .hero .scrawl { margin: 10px 0 6px; }
html[data-theme="goblin"] .grid .wide { border-radius: var(--wonky); }
html[data-theme="goblin"] .grid .wide img { width: 120px; transform: rotate(-4deg); }
@media (max-width: 900px) {
  html[data-theme="goblin"] .hero .wordmark { width: 100%; max-width: 420px; margin-left: 0; transform: rotate(-1.5deg); }
  html[data-theme="goblin"] .hero h1 { font-size: clamp(38px, 11vw, 64px); }
  html[data-theme="goblin"] .hero p.lede { font-size: 18px; }
  html[data-theme="goblin"] .hero .wrap { gap: 12px; }
}
@media (max-width: 640px) {
  html[data-theme="goblin"] .nav { height: auto; }
  html[data-theme="goblin"] .nav .links { font-size: 17px; }
  html[data-theme="goblin"] .nav .btn { font-size: 14px; padding: 7px 10px; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); }
  html[data-theme="goblin"] .tile .v { font-size: 22px; }
  html[data-theme="goblin"] .section h2 { font-size: 20px; flex-wrap: wrap; }
  html[data-theme="goblin"] .coin-head h1 { font-size: 26px; }
  html[data-theme="goblin"] th:nth-child(2), html[data-theme="goblin"] td:nth-child(2) { min-width: 190px; }
}
html[data-theme="goblin"] .empty { font-family: var(--font); font-size: 18px; display: grid; justify-items: center; gap: 8px; }
html[data-theme="goblin"] .empty img { width: 120px; opacity: 0.9; }
html[data-theme="goblin"] .ticker .item { border-radius: var(--wonky2); border-width: 2px; font-family: var(--font); font-size: 15px; }
html[data-theme="goblin"] .footer { font-family: var(--font); font-size: 15px; }
html[data-theme="goblin"] .skeleton { border-radius: var(--wonky); }
html[data-theme="goblin"] .step .n { border-radius: var(--wonky2); font-family: var(--display); }
html[data-theme="goblin"] .coin-head img { border-radius: var(--wonky); border: 2px solid var(--line2); }
html[data-theme="goblin"] .coin-head h1 { font-size: 34px; }
html[data-theme="goblin"] .spot { width: 190px; margin: 0 auto 10px; display: block; }
html[data-theme="goblin"] .king { width: 26px; height: 26px; vertical-align: middle; margin-left: 4px; }
html[data-theme="goblin"] .loading { display: grid; justify-items: center; gap: 10px; padding: 30px; font-family: var(--font); font-size: 19px; color: var(--muted); }
html[data-theme="goblin"] .loading img { width: 150px; animation: wobble 1.6s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
html[data-theme="goblin"] .scrawl { color: var(--accent); font-size: 15px; transform: rotate(-2deg); display: inline-block; }
/* the tiny tongue (ₐₐₐᵤᵤGGGₕₕ) sits low and small, so give it a little more size and air */
html[data-theme="goblin"] [data-tiny], html[data-theme="goblin"] .tiny, html[data-theme="goblin"] .lang-toggle { font-family: "Segoe UI", "DejaVu Sans", Arial, sans-serif; letter-spacing: 0.04em; line-height: 1.2; text-transform: none; }
html[data-theme="goblin"] [data-tiny], html[data-theme="goblin"] .scrawl[data-tiny] { font-size: 1.15em; }
html[data-theme="goblin"] .scrawl[data-tiny] { font-size: 17px; font-weight: 700; }
html[data-theme="goblin"] .pill { font-size: 14px; letter-spacing: 0.03em; }
html[data-theme="goblin"] .who .name { font-size: 14px; letter-spacing: 0.03em; }
html[data-theme="goblin"] .message .content .name { font-size: 14px; letter-spacing: 0.03em; }
html[data-theme="goblin"] .lang-toggle { font-size: 16px; letter-spacing: 0.03em; }
html[data-theme="goblin"] .lang-toggle { display: inline; font-family: var(--font); background: none; border: 0; color: var(--muted); text-decoration: underline dotted; cursor: pointer; font-size: 15px; }
html[data-theme="goblin"] .lang-toggle:hover { color: var(--text); }
html[data-theme="goblin"] .toast { border-radius: var(--wonky2); font-family: var(--font); }
html[data-theme="goblin"] .theme-pick { display: none; }

/* goblintown's goblin frames: 56px box, 12px corners, the goblin scaled 1.4
   from its feet so the head bursts out, wiggling (their .pfp + .goblin rules) */
@keyframes wiggle-scaled { 50% { transform: scale(1.4) rotate(-3deg); } }
@keyframes wiggle-flip { 50% { transform: scale(1.4) scaleX(-1) rotate(3deg); } }
html[data-theme="goblin"] .pfp { --pfp-size: 56px; width: var(--pfp-size); height: var(--pfp-size); flex: 0 0 var(--pfp-size); border: 2px solid var(--line2); border-radius: 12px; overflow: hidden; background: var(--gob-theme, var(--card2)); display: grid; place-items: end center; box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.45); }
html[data-theme="goblin"] .pfp img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; transform-origin: bottom; transform: scale(1.4); animation: wiggle-scaled 0.5s linear infinite; }
html[data-theme="goblin"] .pfp.sm { --pfp-size: 36px; border-radius: 9px; border-width: 1.5px; }
html[data-theme="goblin"] .pfp.lg { --pfp-size: 96px; border-radius: 16px; }
html[data-theme="goblin"] .brand .mark { width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--line2); background: var(--card2); overflow: hidden; display: block; }
html[data-theme="goblin"] .brand .mark img { width: 44px; height: 44px; object-fit: contain; object-position: bottom; transform-origin: bottom; transform: scale(1.4); animation: wiggle-scaled 0.5s linear infinite; }
html[data-theme="goblin"] .who { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
html[data-theme="goblin"] .who .name { font-family: var(--font); font-size: 13px; color: var(--accent); display: block; line-height: 1.1; margin-bottom: 2px; }
html[data-theme="goblin"] .who .addr { font-size: 13px; }
html[data-theme="goblin"] .who .pill { margin-left: 4px; }
html[data-theme="goblin"] th:nth-child(2), html[data-theme="goblin"] td:nth-child(2) { min-width: 230px; }
html[data-theme="goblin"] .coin-card img, html[data-theme="goblin"] .avatar { border: 2px solid var(--line2); border-radius: 12px; }

/* two goblins explain the coin: alternating bubbles, avatars facing each other */
html[data-theme="goblin"] .convo { display: flex; flex-direction: column; gap: 16px; padding: 4px 0 2px; }
html[data-theme="goblin"] .message { display: flex; align-items: flex-end; gap: 12px; }
html[data-theme="goblin"] .message:nth-of-type(even) { flex-direction: row-reverse; }
html[data-theme="goblin"] .message:nth-of-type(even) .pfp img { transform: scale(1.4) scaleX(-1); animation: wiggle-flip 0.5s linear infinite; }
html[data-theme="goblin"] .message .content { flex: 1; min-width: 0; }
html[data-theme="goblin"] .message .content .name { font-family: var(--display); font-size: 13px; color: var(--accent); margin-bottom: 4px; text-transform: lowercase; }
html[data-theme="goblin"] .message:nth-of-type(even) .content .name { text-align: right; }
html[data-theme="goblin"] .message .content p { margin: 0; background: var(--card2); border: 2px solid var(--line2); border-radius: 18px 14px 16px 6px; padding: 8px 12px; font-family: var(--font); font-size: 17px; line-height: 1.3; color: var(--text); box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.45); }
html[data-theme="goblin"] .message:nth-of-type(even) .content p { border-radius: 14px 18px 6px 16px; box-shadow: -3px 4px 0 rgba(0, 0, 0, 0.45); }
html[data-theme="goblin"] .message .content p b { color: var(--accent); }
html[data-theme="goblin"] aside .card h2 { font-size: 19px; }