/* The Fishing Lands — Copyright © 2026. All rights reserved. Proprietary; unauthorized reproduction prohibited. */ /* "Wood & parchment" old-school browser-game skin. Active only when (admin toggle in Settings). */ @import url('https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&family=Alegreya+SC:wght@500;700&display=swap'); html.ui-wood { --wood: url('/art/theme/oak.webp'); --parch: url('/art/theme/parchment.webp'); --brass: url('/art/theme/brass.webp'); --rope: url('/art/theme/rope.webp'); --ink: #2b1d0e; --ink-2: #4a3520; --ink-muted: #5c4830; --ink-gold: #6e4508; --bg-deep: #150e08; --bg: #1c130b; --bg-2: #24180d; --panel: #2a1c10; --panel-2: #33230f; --border: #5a3f22; --border-2: #7a5a30; --gold: #e2b96a; --gold-dim: #a8823c; --frame: 6px; } @media (max-width: 639px) { html.ui-wood { --frame: 4px; } } /* ---------- backdrop ---------- */ html.ui-wood .game-shell::before { background: url('/art/theme/backdrop.webp') center bottom / cover no-repeat; opacity: 1; } html.ui-wood .game-shell::after { background: linear-gradient(180deg, rgba(10,6,3,.6) 0%, rgba(10,6,3,.38) 35%, rgba(10,6,3,.5) 100%); } /* ---------- header (oak bar, rope underline, brass logo plate) ---------- */ html.ui-wood .game-header { background-image: var(--wood) !important; background-size: 512px !important; background-position: center !important; background-repeat: repeat !important; border-bottom: 0; box-shadow: 0 6px 18px rgba(0,0,0,.6); } html.ui-wood .game-header::before { background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.42)); } html.ui-wood .game-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--brass) center / 256px; border-top: 1px solid #2a1a0a; border-bottom: 1px solid #2a1a0a; pointer-events: none; } html.ui-wood .game-header [data-testid="logo-sm"] { background: #1a110a; padding: 3px 14px 3px 4px; border: 1px solid #6b4d22; border-radius: 3px; box-shadow: 0 1px 0 rgba(255,220,160,.1); } html.ui-wood .game-header [data-testid="logo-sm"] img { border-color: #8a6a2a; box-shadow: 0 0 0 1px rgba(0,0,0,.6); } html.ui-wood .game-header .logo-text { font-family: 'IM Fell English SC', serif !important; font-weight: 400; color: #f6e2b3; letter-spacing: .06em !important; margin-right: 0 !important; text-shadow: none; font-size: 17px; line-height: 1.05; -webkit-font-smoothing: antialiased; } html.ui-wood .game-header [data-testid="logo-sm"] .text-\[var\(--gold\)\] { color: #e2b96a; letter-spacing: .3em !important; margin-right: 0 !important; text-shadow: none; } html.ui-wood .game-header .num { color: #f6e2b3; } /* ---------- generic frame: every .panel becomes parchment inside a plank frame ---------- */ html.ui-wood .panel:not([class*="gb-wall-wall_"]) { background: #cdb88c var(--parch) center / 512px repeat !important; background-blend-mode: multiply; color: var(--ink); opacity: 1; backdrop-filter: none; border: var(--frame) solid transparent; border-image: var(--wood) 60 / var(--frame) round; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(90,63,34,.55), inset 0 0 28px rgba(80,50,20,.28), 0 8px 22px rgba(0,0,0,.55); --text: var(--ink); --text-2: var(--ink-2); --muted: var(--ink-muted); --gold: var(--ink-gold); --gold-dim: #a07a3a; --border: #b99a68; --border-2: #8f6f42; --bg-2: rgba(255,248,230,.55); --panel-2: rgba(120,85,40,.12); --ok: #2f6b2f; --energy: #1f5f8a; --danger: #9b2c2c; } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .panel-head { background: rgba(90,60,25,.07); border-bottom: 3px double #6b4d22; font-family: 'IM Fell English SC', serif; font-size: 15px; letter-spacing: .04em; color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.4); box-shadow: none; --muted: var(--ink-muted); --text-2: var(--ink-2); --gold: var(--ink-gold); } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .panel-head .label, html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .panel-head .num { color: var(--ink-2); } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .panel-head .label, html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .label { color: var(--ink-muted); } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .label-gold { color: var(--ink-gold); } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .font-display { color: var(--ink); } html.ui-wood .panel-gold { border-image-source: var(--brass); } /* light-on-dark hex colours used inline across the app become ink on parchment */ html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) :is([class*="text-[#f"], [class*="text-[#e"], [class*="text-[#d"], [class*="text-[#c"], [class*="text-[#b"], [class*="text-[#a"], [class*="text-[#9"]) { color: var(--ink-2) !important; } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .text-\[\#f4ead2\], html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .text-\[\#e6dcc6\], html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .text-\[\#e6edf3\], html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .text-white, html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .text-\[\#fff\] { color: var(--ink) !important; } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .text-\[\#f3dc9a\] { color: var(--ink-gold) !important; } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .text-\[\#8fd0f0\] { color: #1f5f8a !important; } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .text-\[\#9fb0bf\] { color: var(--ink-muted) !important; } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .text-\[\#f0a5a3\] { color: #9b2c2c !important; } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .rar-common { color: #4a4a4a; } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .rar-uncommon { color: #2e7d32; } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .rar-rare { color: #1e5aa8; } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .rar-epic { color: #7a2ea8; } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .rar-legendary { color: #a8720a; } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .rar-mythic { color: #b0233a; text-shadow: none; } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .bg-\[var\(--bg-2\)\], html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .bg-\[var\(--panel-2\)\], html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .bg-\[var\(--bg\)\] { background-color: rgba(120,85,40,.10) !important; } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .bg-\[var\(--bg-deep\)\] { background-color: rgba(120,85,40,.16) !important; } /* fish plates: a cream specimen card instead of the night-blue vignette */ html.ui-wood :is(div, span)[style*="radial-gradient"]:not(.wood-splash-card):not(:has(> img[data-testid^="gear-icon-"])) { background-image: radial-gradient(ellipse at center, rgba(255,251,238,.95) 0%, rgba(232,216,178,.95) 70%, rgba(200,176,130,.95) 100%) !important; background-color: #e9dcbd !important; border: 1px solid #8f6f42 !important; box-shadow: inset 0 0 0 3px rgba(255,250,235,.6), inset 0 0 18px rgba(90,60,25,.25); } /* gear & bait icons sit straight on the parchment, no card */ html.ui-wood span:has(> img[data-testid^="gear-icon-"]) { background: none !important; border: 0 !important; box-shadow: none !important; } html.ui-wood img[data-testid^="fish-plate-"] { filter: drop-shadow(0 3px 3px rgba(60,40,10,.45)) !important; } html.ui-wood .journal-cell { background: rgba(214,196,156,.7); border: 1px solid #b99a68; color: var(--ink); --text: var(--ink); --text-2: var(--ink-2); --muted: var(--ink-muted); --gold: var(--ink-gold); --border: #b99a68; --bg-2: rgba(120,85,40,.12); --panel: rgba(120,85,40,.12); } html.ui-wood .journal-cell.discovered { background: rgba(226,210,172,.9); border-color: #8f6f42; box-shadow: 0 1px 2px rgba(60,40,10,.25); } html.ui-wood .journal-cell.undiscovered { color: var(--ink-muted); border-style: dashed; border-color: #a58a5c; background: rgba(226,210,172,.72); } html.ui-wood .journal-cell.discovered:hover { border-color: #8a5a12; } /* "that's you" rows in rankings / contests */ html.ui-wood .panel tr.bg-\[\#2a2410\] td, html.ui-wood .panel .bg-\[\#2a2410\] { background-color: rgba(226,185,106,.42) !important; color: var(--ink); } html.ui-wood .panel tr.bg-\[\#2a2410\] td:first-child { box-shadow: inset 3px 0 0 #8a5a12; } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) tr.bg-\[\#2a2410\]:hover td { background-color: rgba(226,185,106,.55) !important; } /* inline name colours were tuned for a dark background: deepen them on parchment */ html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) [style*="color:"]:not([style*="background"]):not(img) { filter: brightness(.6) saturate(1.35); } /* expedition strip */ html.ui-wood [data-testid="expedition-panel"] { background: #cdb88c var(--parch) center / 512px !important; background-blend-mode: multiply; border: 2px solid transparent !important; border-image: var(--brass) 60 / 2px round; color: var(--ink); --energy: #1f5f8a; --text: var(--ink); --text-2: var(--ink-2); --muted: var(--ink-muted); --gold: var(--ink-gold); } html.ui-wood [data-testid="expedition-panel"] .text-\[\#dbe7ee\] { color: var(--ink) !important; } html.ui-wood [data-testid="expedition-panel"] .text-\[var\(--energy\)\], html.ui-wood [data-testid="expedition-panel"] .text-\[\#8fd0f0\], html.ui-wood [data-testid="expedition-panel"] .text-\[\#5aa0c8\], html.ui-wood [data-testid="expedition-panel"] b { color: #1f5f8a !important; } html.ui-wood .panel:not([class*="gb-wall-wall_"]) :is(div, span)[style*="radial-gradient"]:not(:has(> img[data-testid^="gear-icon-"])) { background: radial-gradient(ellipse at center, rgba(255,251,238,.95) 0%, rgba(232,216,178,.95) 70%, rgba(200,176,130,.95) 100%) !important; border-color: #8f6f42 !important; } html.ui-wood img[data-testid^="gear-icon-"] { filter: drop-shadow(0 2px 2px rgba(60,40,10,.45)) !important; } /* tables */ html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .table th { color: #f6e2b3; background: var(--wood) center / 512px; border-bottom: 0; text-shadow: 0 1px 0 #000; } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .table td { border-bottom: 1px solid rgba(90,60,25,.25); } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .table tr:hover td { background: rgba(120,85,40,.12); } /* buttons: plank buttons, brass primary */ html.ui-wood .btn { background: var(--wood) center / 256px; color: #f6e2b3; border: 1px solid #2a1a0a; box-shadow: inset 0 1px 0 rgba(255,220,160,.18), inset 0 -2px 0 rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.45); text-shadow: 0 1px 0 #000; font-family: 'Alegreya SC', serif; font-weight: 700; letter-spacing: .03em; } html.ui-wood .btn:hover:not(:disabled) { background: var(--wood) center / 256px !important; background-position: 40px 20px !important; border-color: #e2b96a !important; color: #fff2d0 !important; box-shadow: inset 0 1px 0 rgba(255,220,160,.25), inset 0 -2px 0 rgba(0,0,0,.45), 0 0 0 1px rgba(226,185,106,.35), 0 2px 6px rgba(0,0,0,.5); } html.ui-wood .btn-gold:hover:not(:disabled) { background: var(--brass) center / 256px !important; background-position: 40px 20px !important; color: #1a1408 !important; filter: brightness(1.08); } html.ui-wood .btn:active:not(:disabled) { transform: translateY(1px); } html.ui-wood .btn:disabled { opacity: .55; } html.ui-wood .btn-gold { background: var(--brass) center / 256px; color: #2b1d0e; text-shadow: 0 1px 0 rgba(255,240,200,.5); border-color: #6b4d12; } html.ui-wood .btn-danger { color: #ffd3d0; border-color: #4a1a1a; } html.ui-wood .btn.num, html.ui-wood .btn .num { color: inherit; } html.ui-wood .reel-btn { background: var(--brass) center / 256px; color: #2b1d0e; border: 2px solid #5a3f22; box-shadow: 0 4px 0 #3a2812, 0 8px 18px rgba(0,0,0,.5); font-family: 'IM Fell English SC', serif; } /* inputs */ html.ui-wood .input { background: rgba(236,222,190,.75); color: var(--ink); border: 1px solid #8f6f42; box-shadow: inset 0 1px 3px rgba(60,40,10,.25); } html.ui-wood .input::placeholder { color: #9a8564; } html.ui-wood .input:focus { border-color: #6b4d12; box-shadow: inset 0 1px 3px rgba(60,40,10,.25), 0 0 0 2px rgba(226,185,106,.35); } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .tag { background: rgba(120,85,40,.15); border-color: rgba(90,60,25,.4); color: var(--ink-2); } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .progress-track, html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .bar { background: rgba(60,40,15,.25); border-color: rgba(90,60,25,.4); } html.ui-wood :is(.panel:not([class*="gb-wall-wall_"]), .journal-cell, .luck-pop, .wl-panel, .portal-box, .wl-fish, .wl-stat, .wl-pillar, .wl-feed, [data-testid="expedition-panel"]) .divider { border-color: rgba(90,60,25,.35); } /* ---------- left menu: a dark back-board with one screwed-in plank per tab ---------- */ html.ui-wood aside[data-testid="game-nav"] { background: #17100a var(--wood) center / 512px; background-blend-mode: multiply; --text: #f6e6c2; --text-2: #e6d3a6; --muted: #cdb789; --gold: #e2b96a; --border: rgba(255,220,160,.18); --ok: #9fd39f; --panel-2: rgba(0,0,0,.35); color: #f1dfb8; border-image-source: var(--brass); box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.7), 0 8px 22px rgba(0,0,0,.6); } html.ui-wood aside[data-testid="game-nav"] nav { padding: 5px 4px; gap: 3px; } @media (min-width: 1024px) { html.ui-wood aside[data-testid="game-nav"] { max-height: calc(100vh - 64px - 1.25rem - env(safe-area-inset-top, 0px)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #8a5a12 rgba(0,0,0,.35); } } html.ui-wood aside[data-testid="game-nav"]::-webkit-scrollbar { width: 6px; } html.ui-wood aside[data-testid="game-nav"]::-webkit-scrollbar-thumb { background: #8a5a12; border-radius: 3px; } html.ui-wood .nav-item { position: relative; margin: 0 2px; padding: 4px 12px 4px 22px; color: #efd9a8; font-family: 'Alegreya SC', serif; font-weight: 500; font-size: 13.5px; line-height: 1.35; letter-spacing: .02em; background: var(--wood) center / 512px; background-position: 0 var(--plank-y, 0); border: 1px solid #1a0f06; border-left: 1px solid #1a0f06; border-radius: 2px; text-shadow: 0 1px 0 #000; box-shadow: inset 0 1px 0 rgba(255,220,160,.16), inset 0 -2px 0 rgba(0,0,0,.45), 0 2px 3px rgba(0,0,0,.6); } html.ui-wood .nav-item:nth-child(2n) { background-position: 120px 60px; } html.ui-wood .nav-item:nth-child(3n) { background-position: 260px 140px; } html.ui-wood .nav-item:nth-child(5n) { background-position: 40px 300px; } html.ui-wood .nav-item::before, html.ui-wood .nav-item::after { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3dfb0, #b8903f 45%, #5a3d12 100%); box-shadow: 0 1px 1px rgba(0,0,0,.8), inset 0 0 0 1px rgba(0,0,0,.35); } html.ui-wood .nav-item::before { left: 7px; } html.ui-wood .nav-item::after { right: 7px; } html.ui-wood .nav-item::before { background-image: linear-gradient(45deg, transparent 44%, rgba(40,25,5,.85) 46%, rgba(40,25,5,.85) 54%, transparent 56%), radial-gradient(circle at 35% 35%, #f3dfb0, #b8903f 45%, #5a3d12 100%); } html.ui-wood .nav-item::after { background-image: linear-gradient(-45deg, transparent 44%, rgba(40,25,5,.85) 46%, rgba(40,25,5,.85) 54%, transparent 56%), radial-gradient(circle at 35% 35%, #f3dfb0, #b8903f 45%, #5a3d12 100%); } html.ui-wood .nav-item svg { color: #d9b26a; opacity: .95; } html.ui-wood .nav-item:hover { filter: brightness(1.18); color: #fff4d6; } html.ui-wood .nav-item.active { background: #cdb88c var(--parch) center / 512px; background-blend-mode: multiply; color: var(--ink); border-color: #6b4d12; text-shadow: none; box-shadow: inset 0 0 0 1px rgba(90,60,25,.5), 0 2px 3px rgba(0,0,0,.6); } html.ui-wood .nav-item.active svg { color: #8a5a12; } html.ui-wood .nav-item.nav-primary { background: var(--brass) center / 256px; color: #2b1d0e; text-shadow: 0 1px 0 rgba(255,240,200,.5); border-color: #6b4d12; animation: none; } html.ui-wood .nav-item.nav-primary svg { color: #2b1d0e; } html.ui-wood .nav-item.nav-primary.active { box-shadow: inset 0 0 0 2px #fff2c0, 0 2px 3px rgba(0,0,0,.6); } html.ui-wood .nav-item .num, html.ui-wood .nav-item .tag { color: inherit; } html.ui-wood aside.panel[data-testid="game-nav"] :is([class*="text-[#"], .text-\[var\(--muted\)\], .text-\[var\(--text-2\)\]) { color: #e6d3a6 !important; text-shadow: 0 1px 0 rgba(0,0,0,.8); } html.ui-wood aside.panel[data-testid="game-nav"] .nav-item.active[class*="text-[#"] { color: var(--ink) !important; text-shadow: none; } html.ui-wood aside[data-testid="game-nav"] .label { color: #cdb789; } html.ui-wood aside[data-testid="game-nav"] a:hover { color: #fff2c0; } @media (max-width: 1023px) { html.ui-wood .nav-item { padding: 5px 10px 5px 18px; margin: 0 1px; } html.ui-wood .nav-item::after { display: none; } html.ui-wood .nav-item::before { left: 5px; width: 7px; height: 7px; } } /* ---------- chat column ---------- */ html.ui-wood .chat-column .panel .chat-messages { background: transparent; } html.ui-wood .chat-input-row { background: #24180e !important; border-top: 2px solid #6b4d22 !important; box-shadow: inset 0 1px 0 rgba(255,220,160,.08); --text: #f1dfb8; --muted: #b09a72; color: #f1dfb8; } html.ui-wood .chat-input-row .btn { background: none !important; border: 0; box-shadow: none; color: #e2b96a; text-shadow: none; } html.ui-wood .chat-input-row .btn:hover:not(:disabled) { color: #fff2c0; filter: none; } html.ui-wood .chat-input-row .input { color: #f6e2b3 !important; background: transparent !important; box-shadow: none; } html.ui-wood .chat-input-row .input::placeholder { color: #b09a72; } html.ui-wood .chat-input-row button { color: #f6e2b3; } html.ui-wood .chat-input-row .text-\[var\(--muted\)\] { color: #d9c59a !important; } html.ui-wood .crew-tab, html.ui-wood .portal-tabs button { font-family: 'Alegreya SC', serif; } /* ---------- water hero & fishing stage keep their paintings but get a frame ---------- */ html.ui-wood .water-hero { border: var(--frame) solid transparent; border-image: var(--wood) 60 / var(--frame) round; box-shadow: 0 8px 22px rgba(0,0,0,.55); } html.ui-wood .fishing-stage { border: var(--frame) solid transparent; border-image: var(--wood) 60 / var(--frame) round; } html.ui-wood .luck-pop { background: #cdb88c var(--parch) center / 512px; background-blend-mode: multiply; color: var(--ink); border: 3px solid transparent; border-image: var(--wood) 60 / 3px round; --muted: var(--ink-muted); --text-2: var(--ink-2); --ok: #2f6b2f; --gold: var(--ink-gold); } html.ui-wood .luck-pop .label-gold { color: var(--ink-gold); } html.ui-wood .luck-bar { background: rgba(60,40,15,.25); border-color: rgba(90,60,25,.4); } html.ui-wood .ticker { background: var(--wood) center / 512px; color: #f1dfb8; border-color: #2a1a0a; } /* ---------- homepage ---------- */ html.ui-wood .wl-page { background: #150e08 url('/art/theme/backdrop.webp') center top / cover fixed no-repeat; color: #f4ead2; } html.ui-wood .wl-header { background: var(--wood) center / 512px; border-bottom: 0; box-shadow: 0 6px 18px rgba(0,0,0,.6); } html.ui-wood .wl-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--brass) center / 256px; border-top: 1px solid #2a1a0a; border-bottom: 1px solid #2a1a0a; pointer-events: none; } html.ui-wood .wl-hero-bg { display: none; } html.ui-wood .wl-title, html.ui-wood .wl-h2, html.ui-wood .portal-header h1 { font-family: 'IM Fell English SC', serif; } html.ui-wood .wl-panel, html.ui-wood .portal-box, html.ui-wood .wl-fish, html.ui-wood .wl-stat, html.ui-wood .wl-pillar, html.ui-wood .wl-feed { background: #cdb88c var(--parch) center / 512px; background-blend-mode: multiply; color: var(--ink); border: 4px solid transparent; border-image: var(--wood) 60 / 4px round; border-radius: 0; box-shadow: 0 8px 22px rgba(0,0,0,.55); --text: var(--ink); --text-2: var(--ink-2); --muted: var(--ink-muted); --gold: var(--ink-gold); --border: #b99a68; --border-2: #8f6f42; --bg-2: rgba(255,248,230,.55); } html.ui-wood .wl-panel .text-\[\#f4ead2\], html.ui-wood .portal-box .text-\[\#f4ead2\], html.ui-wood .wl-fish .text-\[\#f4ead2\], html.ui-wood .wl-stat .wl-stat-n { color: var(--ink) !important; } html.ui-wood .wl-stat .wl-stat-l { color: var(--ink-muted); } html.ui-wood .wl-section-alt { background: rgba(14,9,4,.62); border-color: rgba(0,0,0,.45); } html.ui-wood .wl-page .wl-section:not(.wl-section-alt):not(.wl-hero) { background: rgba(14,9,4,.35); } html.ui-wood .wl-footer { border-top: 0; } html.ui-wood .wl-band { background: rgba(14,9,4,.62); border-color: rgba(0,0,0,.45); } html.ui-wood .wl-panel-head { background: rgba(90,60,25,.07); color: var(--ink); border-bottom: 3px double #6b4d22; font-family: 'IM Fell English SC', serif; letter-spacing: .04em; } html.ui-wood .wl-panel-head svg { color: #6b4d22; } html.ui-wood .wl-section { border-color: rgba(0,0,0,.4); } html.ui-wood .wl-page .bg-\[\#0a131c\], html.ui-wood .wl-page .bg-\[var\(--bg-2\)\], html.ui-wood .wl-page .bg-\[var\(--bg\)\], html.ui-wood .wl-page .bg-\[var\(--panel\)\] { background-color: rgba(30,20,10,.75) !important; } html.ui-wood .portal-tabs { background: var(--wood) center / 512px; } html.ui-wood .portal-tabs button { color: #e8d4a8; text-shadow: 0 1px 0 #000; } html.ui-wood .portal-tabs button.active { color: #fff2c0; border-bottom-color: #e2b96a; } html.ui-wood .wl-cta, html.ui-wood .play-cta { background: var(--brass) center / 256px; color: #2b1d0e; border: 2px solid #6b4d12; text-shadow: 0 1px 0 rgba(255,240,200,.5); font-family: 'IM Fell English SC', serif; box-shadow: 0 4px 0 #3a2812, 0 8px 18px rgba(0,0,0,.5); } html.ui-wood .wl-btn-ghost { border-color: #d9b26a; color: #f6e2b3; } html.ui-wood .wl-footer { background: var(--wood) center / 512px; color: #d9c59a; } /* mobile: lighter frames, same materials */ @media (max-width: 639px) { html.ui-wood .panel, html.ui-wood .water-hero, html.ui-wood .fishing-stage { box-shadow: 0 4px 12px rgba(0,0,0,.5); } html.ui-wood .game-header::after, html.ui-wood .wl-header::after { height: 8px; background-size: auto 8px; bottom: -4px; } } /* ---------- full pass: admin boards, market toggle, misc dark-on-parchment ---------- */ html.ui-wood .panel { --panel-hi: rgba(226,185,106,.45); } html.ui-wood [data-testid="admin-overview"] { background: #cdb88c var(--parch) center / 512px; background-blend-mode: multiply; border: 4px solid transparent; border-image: var(--wood) 60 / 4px round; gap: 1px; --border: rgba(90,60,25,.35); } html.ui-wood [data-testid="admin-overview"] > div { background: rgba(120,85,40,.10) !important; color: var(--ink); } html.ui-wood [data-testid="admin-overview"] .text-\[\#f3dc9a\] { color: var(--ink-gold) !important; } html.ui-wood [data-testid="admin-overview"] .label, html.ui-wood [data-testid="admin-overview"] .text-\[var\(--muted\)\] { color: var(--ink-muted) !important; } html.ui-wood [data-testid="admin-tabs"], html.ui-wood [data-testid="shop-categories"], html.ui-wood .crew-tabs, html.ui-wood .portal-tabs { background: var(--wood) center / 512px; border: 1px solid #1a0f06; border-radius: 2px; padding: 2px 4px 0; box-shadow: inset 0 1px 0 rgba(255,220,160,.14), 0 2px 4px rgba(0,0,0,.5); } html.ui-wood [data-testid="admin-tabs"] button, html.ui-wood [data-testid="shop-categories"] button, html.ui-wood .crew-tab { color: #e8d4a8; text-shadow: 0 1px 0 #000; font-family: 'Alegreya SC', serif; } html.ui-wood [data-testid="admin-tabs"] button.text-\[var\(--gold\)\], html.ui-wood [data-testid="shop-categories"] button.text-\[var\(--gold\)\], html.ui-wood [data-testid="shop-categories"] button.border-\[var\(--gold\)\], html.ui-wood .crew-tab.active { color: #fff2c0 !important; border-bottom-color: #e2b96a !important; } html.ui-wood main > div > .flex.gap-1.mb-3 > .btn, html.ui-wood .journal-tabs .btn { min-width: 0; } html.ui-wood .panel .bg-\[\#0a1219\], html.ui-wood .panel .bg-\[\#121c26\], html.ui-wood .panel .bg-\[\#0f1a26\], html.ui-wood .panel .bg-\[\#1a1608\], html.ui-wood .panel .bg-\[\#2a1e0c\], html.ui-wood .panel .bg-\[\#1a1408\] { background-color: rgba(120,85,40,.14) !important; color: var(--ink); } html.ui-wood .panel .bg-\[\#0d2a30\] { background-color: rgba(31,95,138,.14) !important; } html.ui-wood .panel .border-\[var\(--energy\)\] { border-color: #1f5f8a !important; } html.ui-wood .panel .text-\[\#dbe7ee\], html.ui-wood .panel .text-\[\#d9e6f0\] { color: var(--ink) !important; } html.ui-wood .panel .bg-\[var\(--gold\)\] { background-color: #c9962e !important; color: #1a1408 !important; } html.ui-wood .panel select.input option { color: #2b1d0e; background: #f3ead2; } /* ---------- brass nails in the head corners (old-school bevel-and-nail look; photo rope retired as too realistic) ---------- */ html.ui-wood main .panel:not([class*="gb-wall-wall_"]) > .panel-head, html.ui-wood aside .panel > .panel-head, html.ui-wood .wl-panel > .wl-panel-head { position: relative; padding-left: 22px; padding-right: 22px; } html.ui-wood main .panel:not([class*="gb-wall-wall_"]) > .panel-head::before, html.ui-wood aside .panel > .panel-head::before, html.ui-wood .wl-panel > .wl-panel-head::before, html.ui-wood main .panel:not([class*="gb-wall-wall_"]) > .panel-head::after, html.ui-wood aside .panel > .panel-head::after, html.ui-wood .wl-panel > .wl-panel-head::after { content: ''; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; pointer-events: none; z-index: 1; background: linear-gradient(45deg, transparent 44%, rgba(40,25,5,.85) 46%, rgba(40,25,5,.85) 54%, transparent 56%), radial-gradient(circle at 35% 35%, #f3dfb0, #b8903f 45%, #5a3d12 100%); box-shadow: 0 1px 1px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.35); } html.ui-wood main .panel:not([class*="gb-wall-wall_"]) > .panel-head::before, html.ui-wood aside .panel > .panel-head::before, html.ui-wood .wl-panel > .wl-panel-head::before { left: 7px; } html.ui-wood main .panel:not([class*="gb-wall-wall_"]) > .panel-head::after, html.ui-wood aside .panel > .panel-head::after, html.ui-wood .wl-panel > .wl-panel-head::after { right: 7px; background-image: linear-gradient(-45deg, transparent 44%, rgba(40,25,5,.85) 46%, rgba(40,25,5,.85) 54%, transparent 56%), radial-gradient(circle at 35% 35%, #f3dfb0, #b8903f 45%, #5a3d12 100%); } /* text that sits directly on the painted backdrop */ html.ui-wood main > div > p, html.ui-wood main > div > .text-\[var\(--muted\)\], html.ui-wood main > div > .text-\[var\(--text-2\)\], html.ui-wood main .page-intro { color: #f1dfb8 !important; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.6); } html.ui-wood main h1, html.ui-wood main h2:not(.panel-head) { text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.6); } /* loading splash */ html.ui-wood .wood-splash { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: #150e08 url('/art/theme/backdrop.webp') center bottom / cover no-repeat; animation: fadeIn .2s ease-out; } html.ui-wood .wood-splash::before { content: ''; position: absolute; inset: 0; background: rgba(10,6,3,.45); } html.ui-wood .wood-splash-card { position: relative; width: 300px; max-width: calc(100vw - 40px); padding: 26px 22px 22px; text-align: center; color: #2b1d0e; background: #cdb88c var(--parch) center / 512px; background-blend-mode: multiply; border: 6px solid transparent; border-image: var(--wood) 60 / 6px round; box-shadow: 0 16px 40px rgba(0,0,0,.7); animation: splashIn .5s ease-out; } html.ui-wood .wood-splash-card img { width: 64px; height: 64px; border-radius: 50%; border: 2px solid #8a6a2a; margin: 0 auto 10px; display: block; box-shadow: 0 2px 6px rgba(0,0,0,.4); } html.ui-wood .wood-splash-card h1 { font-family: 'IM Fell English SC', serif; font-size: 22px; letter-spacing: .06em; margin: 0 0 4px; } html.ui-wood .wood-splash-card p { font-family: 'Alegreya SC', serif; font-size: 14px; color: #4a3520; margin: 0; } html.ui-wood .wood-splash-card p::after { content: '…'; display: inline-block; width: 1.2em; text-align: left; animation: splashDots 1.2s steps(3, end) infinite; overflow: hidden; vertical-align: bottom; } html.ui-wood .wood-splash-line { height: 3px; margin: 14px auto 0; width: 70%; background: rgba(90,60,25,.25); position: relative; overflow: hidden; } html.ui-wood .wood-splash-line::after { content: ''; position: absolute; left: -40%; top: 0; bottom: 0; width: 40%; background: #8a5a12; animation: splashSweep 1.1s ease-in-out infinite; } @keyframes splashIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes splashDots { from { width: 0; } to { width: 1.2em; } } @keyframes splashSweep { to { left: 100%; } } /* waters page cards: taller picture, focus a touch lower so wheels/figures show */ html.ui-wood .panel > .h-28.bg-cover { height: 8.5rem !important; background-position: center 62% !important; background-size: 108% auto !important; } @media (max-width: 639px) { html.ui-wood .panel > .h-28.bg-cover { height: 7rem !important; } } /* fishing mini-game: brass-and-ink gauge */ html.ui-wood .tension-frame { background: #8f7a52 var(--parch) center / 512px; background-blend-mode: multiply; border: 4px solid transparent; border-image: var(--wood) 60 / 4px round; box-shadow: inset 0 0 0 1px rgba(40,25,10,.6), inset 0 0 24px rgba(40,25,10,.35), 0 6px 16px rgba(0,0,0,.5); --text: var(--ink); --text-2: var(--ink-2); --muted: var(--ink-2); color: var(--ink); } html.ui-wood .tension-track { background: linear-gradient(180deg, #a08a60, #bfa87e 50%, #a08a60) !important; border: 1px solid #3a2812 !important; box-shadow: inset 0 1px 4px rgba(40,25,10,.5); } html.ui-wood .tension-zone { background: rgba(35,90,35,.45) !important; border-left: 1px solid #2f6b2f !important; border-right: 1px solid #2f6b2f !important; } html.ui-wood .tension-danger { background: rgba(140,35,35,.45) !important; border-left: 1px solid #9b2c2c !important; } html.ui-wood .tension-needle { background: #1a1008 !important; box-shadow: 0 0 0 1px rgba(255,240,200,.6); } html.ui-wood .tension-needle::before { border-top-color: #6b4508; } html.ui-wood .tension-needle::after { background: #6b4508; } html.ui-wood .tension-ticks { opacity: .7; } html.ui-wood [data-testid="progress-frame"] { background: rgba(40,25,10,.4) !important; border-color: #3a2812 !important; } html.ui-wood [data-testid="progress-fill"] { background: linear-gradient(180deg, #d4a955, #8a6a2a) !important; } html.ui-wood [data-testid="fight-message"], html.ui-wood [data-testid="boss-phase"] { color: var(--ink); } html.ui-wood .fishing-stage .btn-gold.reel-btn { font-size: 15px; } html.ui-wood .wood-splash-tip { margin-top: 14px; font-size: 12.5px; line-height: 1.4; color: #4a3520; font-style: italic; animation: fadeIn .4s ease-out; min-height: 2.8em; } /* ---------- round 3 feedback: friends block, nav badges, search box, guestbook walls, water locks ---------- */ html.ui-wood aside[data-testid="game-nav"] > div { --text: var(--ink); --text-2: var(--ink-2); --muted: var(--ink-muted); --gold: var(--ink-gold); --ok: #2f6b2f; color: var(--ink-2); } html.ui-wood aside.panel[data-testid="game-nav"] > div :is([class*="text-[#"], .text-\[var\(--muted\)\], .text-\[var\(--text-2\)\]), html.ui-wood aside.panel[data-testid="game-nav"] > div.text-\[var\(--muted\)\] { color: var(--ink-2) !important; text-shadow: none; } html.ui-wood aside[data-testid="game-nav"] > div .label { color: var(--ink-muted); } html.ui-wood aside[data-testid="game-nav"] > div .text-\[var\(--text\)\], html.ui-wood aside[data-testid="game-nav"] > div b { color: var(--ink) !important; } html.ui-wood aside[data-testid="game-nav"] > div a:hover, html.ui-wood aside[data-testid="game-nav"] > div button:hover { color: var(--ink-gold) !important; } html.ui-wood aside[data-testid="game-nav"] > div .bg-\[\#33455a\] { background-color: #9a8564 !important; } html.ui-wood aside[data-testid="game-nav"] > .divider { border-color: rgba(90,60,25,.45); } /* nav badges: sit right after the label instead of on the corner screw */ html.ui-wood .nav-item > .ml-auto { margin-left: 6px !important; margin-right: 8px; } html.ui-wood .nav-item > span.bg-\[var\(--gold\)\] { background-color: #e2b96a !important; color: #1a1408 !important; text-shadow: none; box-shadow: 0 1px 0 rgba(0,0,0,.6); } html.ui-wood .nav-item.active > span.bg-\[var\(--gold\)\] { background-color: #8a5a12 !important; color: #fff2d0 !important; } /* search boxes: light well with dark ink */ html.ui-wood .panel label:has(> .input) { background-color: rgba(250,242,222,.85) !important; border-color: #8f6f42 !important; box-shadow: inset 0 1px 3px rgba(60,40,10,.25); } html.ui-wood .input::placeholder { color: #6e5a3c; opacity: 1; } /* guestbook walls keep their own materials (classic palette vars restored) */ html.ui-wood .panel[class*="gb-wall-wall_"] { --text: #e6edf3; --text-2: #9fb0c1; --muted: #647a90; --gold: #c9a24a; --gold-dim: #8c6f3d; --border: #22364b; --border-2: #2c4560; --bg-2: rgba(16,27,38,.6); --panel-2: #182a3d; --ok: #4fbf7a; --danger: #e0645c; border-radius: 2px; } /* badges painted over water pictures: cream on the dark plaque */ html.ui-wood .panel .bg-\[rgba\(8\,14\,20\,\.8\)\], html.ui-wood .panel .bg-\[rgba\(8\,14\,20\,\.85\)\] { color: #f6e2b3 !important; border-color: #8a6a2a !important; --gold: #e2b96a; --energy: #8fd0f0; text-shadow: 0 1px 0 #000; } /* phones: the plaque + plank buttons must fit 360-390px headers, or the browser zooms the whole page out */ html.ui-wood .game-shell { overflow-x: clip; } @media (max-width: 639px) { html.ui-wood .game-header > div { gap: 6px; } html.ui-wood .game-header [data-testid="logo-sm"] { padding: 2px 8px 2px 3px; min-width: 0; } html.ui-wood .game-header .logo-text { font-size: 14px; letter-spacing: .04em !important; } html.ui-wood .game-header .ml-auto { gap: 4px; flex-shrink: 0; } html.ui-wood .game-header .btn.btn-sm { padding-left: 7px; padding-right: 7px; } } /* vote page: each toplist is a small cream ledger card with a compact brass button */ html.ui-wood .panel div[data-testid^="vote-site-"].bg-\[var\(--bg-2\)\] { background: rgba(255,248,230,.55) !important; border: 1px solid #8f6f42 !important; box-shadow: inset 0 0 0 1px rgba(255,250,235,.55), 0 2px 4px rgba(60,40,10,.25); padding: 10px 12px 12px; gap: 6px; } html.ui-wood div[data-testid^="vote-site-"] > div:first-child { border-bottom: 1px dashed rgba(90,60,25,.4); padding-bottom: 6px; margin-bottom: 2px; } html.ui-wood div[data-testid^="vote-site-"] .font-display { font-family: 'IM Fell English SC', serif; font-size: 17px; letter-spacing: .02em; } html.ui-wood div[data-testid^="vote-site-"] .tag { background: rgba(120,85,40,.12); border: 1px solid #a58a5c; color: var(--ink-2); } html.ui-wood div[data-testid^="vote-site-"] > .btn { align-self: flex-end; width: auto; min-width: 180px; padding: 5px 16px; margin-top: 4px; } html.ui-wood div[data-testid^="vote-site-"] > .btn:not(.btn-gold) { opacity: .85; } @media (max-width: 639px) { html.ui-wood div[data-testid^="vote-site-"] > .btn { align-self: stretch; } } /* support page: captions painted over the booster pictures and hero stay cream */ html.ui-wood main :is([data-testid^="booster-"] .relative .absolute, [data-testid="support-hero"] .absolute) :is(span, h1, div) { color: #f6e2b3 !important; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.7); } html.ui-wood main :is([data-testid^="booster-"] .relative .absolute, [data-testid="support-hero"] .absolute) :is(.text-\[var\(--gold\)\], .label) { color: #e2b96a !important; } html.ui-wood main :is([data-testid^="booster-"] .relative .absolute, [data-testid="support-hero"] .absolute) svg { color: #e8647a !important; } /* legendary / mythic / event alerts: oak planks with a rarity-coloured edge instead of the navy cards */ html.ui-wood [data-testid="alert-banner"] > div { background: #1c130b var(--wood) center / 512px !important; background-blend-mode: multiply; border: 1px solid #1a0f06 !important; border-left: 4px solid var(--alert-edge, #f0c27a) !important; color: #f1dfb8; box-shadow: inset 0 1px 0 rgba(255,220,160,.14), inset 0 -2px 0 rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.55); --muted: #cdb789; --text: #f6e6c2; --gold: #e2b96a; --energy: #8fd0f0; } html.ui-wood [data-testid="alert-banner"] > div:has(.rar-mythic) { --alert-edge: #ff5d7a; } html.ui-wood [data-testid="alert-banner"] > div.bg-\[\#2a1414\] { --alert-edge: #b0233a; } html.ui-wood [data-testid="alert-banner"] > div.bg-\[\#0d2a30\] { --alert-edge: #5aa0c8; } html.ui-wood [data-testid="alert-banner"] > div.bg-\[\#241c0a\] { --alert-edge: #e2b96a; } html.ui-wood [data-testid="alert-banner"] > div .font-display { font-family: 'IM Fell English SC', serif; font-size: 12px; letter-spacing: .08em; text-shadow: 0 1px 0 #000; } html.ui-wood [data-testid="alert-banner"] .text-\[\#f4ead2\] { color: #f6e6c2 !important; } html.ui-wood [data-testid="alert-banner"] .text-\[var\(--r-legendary\)\] { color: #f0c27a; } html.ui-wood [data-testid="alert-banner"] .rar-mythic { color: #ff7a90; text-shadow: 0 0 6px rgba(255,93,122,.5); } html.ui-wood [data-testid="alert-banner"] .tag-variant { background: rgba(0,0,0,.35); border-color: rgba(255,220,160,.3); color: #f6e6c2; } /* sonner toasts: same oak plank */ html.ui-wood [data-sonner-toast] { background: #1c130b var(--wood) center / 512px !important; background-blend-mode: multiply; border: 1px solid #6b4d22 !important; color: #f1dfb8 !important; border-radius: 2px !important; box-shadow: inset 0 1px 0 rgba(255,220,160,.14), 0 8px 22px rgba(0,0,0,.6) !important; } html.ui-wood [data-sonner-toast] [data-title] { color: #f6e6c2; text-shadow: 0 1px 0 #000; } html.ui-wood [data-sonner-toast] [data-description] { color: #cdb789; } html.ui-wood [data-sonner-toast] [data-close-button] { background: #2a1c10; border-color: #6b4d22; color: #e2b96a; } html.ui-wood [data-sonner-toast] [data-close-button]:hover { background: #3a2812; color: #fff2c0; } html.ui-wood [data-sonner-toast][data-type="success"] [data-icon] { color: #9fd39f; } html.ui-wood [data-sonner-toast][data-type="error"] [data-icon] { color: #f0a5a3; } /* fish plates hug the fish: 2:1 card, near-zero padding, art fills the frame */ html.ui-wood div:has(> img[data-testid^="fish-plate-"]) { height: auto !important; aspect-ratio: 2 / 1; padding: 1px 2px !important; align-self: flex-start; flex-shrink: 0; } html.ui-wood div:has(> img[data-testid^="fish-plate-"]) > img { width: 100%; height: 100%; object-fit: contain; } /* tutorial card: parchment note in a plank frame (new anglers start on this skin) */ html.ui-wood .tut-card { background: #cdb88c var(--parch) center / 512px; background-blend-mode: multiply; border: 4px solid transparent; border-image: var(--wood) 60 / 4px round; color: var(--ink); box-shadow: 0 12px 30px rgba(0,0,0,.6); --muted: var(--ink-muted); --text-2: var(--ink-2); --gold: var(--ink-gold); } html.ui-wood .tut-card .label { font-family: 'IM Fell English SC', serif; font-size: 12px; letter-spacing: .06em; } html.ui-wood .tut-text { color: var(--ink); } html.ui-wood .tut-skip { color: var(--ink-muted); } html.ui-wood .tut-skip:hover { color: var(--ink-gold); } html.ui-wood .tut-portrait { border-color: #8a6a2a; box-shadow: 0 2px 6px rgba(0,0,0,.4); } html.ui-wood .tut-spot { border-color: #e2b96a; } /* homepage hero text sits straight on the sunset painting now: give it an ink shadow */ html.ui-wood .wl-hero .wl-sub { color: #fff4dc; text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.75), 0 0 22px rgba(0,0,0,.5); } html.ui-wood .wl-hero .play-fine { color: #f6e2b3; text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.8); } /* floating notices (server reload, install app, push opt-in): parchment notes in a plank frame */ html.ui-wood :is([data-testid="server-status-banner"], [data-testid="install-prompt"], [data-testid="push-optin"]) > div { background: #cdb88c var(--parch) center / 512px !important; background-blend-mode: multiply; border: 4px solid transparent !important; border-image: var(--wood) 60 / 4px round; color: var(--ink); box-shadow: 0 12px 30px rgba(0,0,0,.6); backdrop-filter: none; --text: var(--ink); --text-2: var(--ink-2); --muted: var(--ink-muted); --gold: var(--ink-gold); } html.ui-wood :is([data-testid="server-status-banner"], [data-testid="install-prompt"], [data-testid="push-optin"]) .font-display { font-family: 'IM Fell English SC', serif; letter-spacing: .06em; color: var(--ink) !important; } html.ui-wood :is([data-testid="server-status-banner"], [data-testid="install-prompt"], [data-testid="push-optin"]) .text-\[\#f4ead2\] { color: var(--ink) !important; } html.ui-wood :is([data-testid="install-prompt"], [data-testid="push-optin"]) .border-\[\#3a3121\] { border-color: #8a6a2a !important; } html.ui-wood [data-testid="push-optin"] .border-\[\#3a3121\] { background: rgba(120,85,40,.12); } /* guest strip under the header: oak with cream text */ html.ui-wood [data-testid="guest-setup-banner"] { background: #1c130b var(--wood) center / 512px !important; background-blend-mode: multiply; border-color: #6b4d22 !important; color: #f1dfb8; --text-2: #e6d3a6; --gold: #e2b96a; box-shadow: inset 0 1px 0 rgba(255,220,160,.12), 0 4px 12px rgba(0,0,0,.45); } html.ui-wood [data-testid="guest-setup-banner"] .font-display { font-family: 'IM Fell English SC', serif; text-shadow: 0 1px 0 #000; } /* /play ad landing: same dockside painting as the homepage instead of the old night photo */ html.ui-wood .play-page { background: #150e08; } html.ui-wood .play-bg { background-image: url('/art/theme/backdrop.webp') !important; background-position: center bottom; opacity: 1; filter: none; } html.ui-wood .play-bg::after { background: radial-gradient(ellipse at center, rgba(10,6,3,.25) 0%, rgba(10,6,3,.6) 60%, rgba(10,6,3,.85) 100%); } html.ui-wood .play-sub, html.ui-wood .play-fine { color: #fff4dc; text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.75); } html.ui-wood .play-fine { color: #f6e2b3; } html.ui-wood .play-lang { background: #1c130b var(--wood) center / 512px; background-blend-mode: multiply; border: 1px solid #6b4d22; color: #f1dfb8; } html.ui-wood .play-login { color: #f6e2b3; text-shadow: 0 1px 2px rgba(0,0,0,.9); } html.ui-wood .lang-select select option { background: #f3ead2; color: #2b1d0e; } html.ui-wood .panel .lang-select { background: rgba(236,222,190,.75); border-color: #8f6f42 !important; color: var(--ink); } @media (max-width: 639px) { html.ui-wood .game-header .lang-select svg { display: none; } html.ui-wood .game-header .lang-select { padding-left: 4px !important; padding-right: 4px !important; } html.ui-wood .game-header [data-testid="logo-sm"] { padding-right: 6px; } html.ui-wood .game-header .logo-text { font-size: 13px; } } /* undiscovered fish stay a dark silhouette on the cream plate */ html.ui-wood img[data-testid^="fish-plate-"][data-silhouette] { filter: brightness(0) blur(.6px) !important; opacity: .55 !important; } /* header language pill: full names, capped on phones */ html.ui-wood .game-header .lang-select select { max-width: 120px; text-overflow: ellipsis; } @media (max-width: 639px) { html.ui-wood .game-header .lang-select select { max-width: 72px; } }