/* Terra Crisis – medieval skin. Loaded after style.css: dark oak frame, parchment panels with
   gilded edges, wax-seal buttons, heraldic player banners, blackletter logo. */

:root {
	--bg: #170e07;
	--bg-2: #e3cfa2;
	--panel: #f0e0bb;
	--panel-2: #e7d3a6;
	--panel-3: #d6bb83;
	--line: rgba(70, 40, 15, .18);
	--text: #2c1b0c;
	--muted: #6d5334;
	--faint: #94795a;
	--accent: #2f5d34;
	--accent-2: #2f6b38;
	--gold: #a97a1c;
	--gold-bright: #e9c766;
	--parch: #f4e8cb;
	--good: #2f6b38;
	--warn: #a8641a;
	--bad: #8f2318;
	--oak: #3b2413;
	--oak-2: #5a3a1e;
	--ink: #2c1b0c;
	--crimson: #7d1f16;
	--radius: 6px;
	color-scheme: light;
}

body {
	font-family: 'Alegreya', Georgia, serif;
	font-weight: 600;
	color: var(--text);
	background:
		radial-gradient(1200px 700px at 50% 35%, rgba(255, 190, 110, .10), transparent 70%),
		repeating-linear-gradient(92deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 9px),
		repeating-linear-gradient(88deg, rgba(255, 220, 160, .035) 0 1px, transparent 1px 23px),
		linear-gradient(180deg, #2b190c, #170e07);
	background-attachment: fixed;
}

/* parchment texture shared by all panels */
.card, .modal, .tileinfo, .lobby-box, .fx-box, .tooltip, .event-card .ev-fx, .event-card .ev-who, .toast, .waiting-room, .auction-panel {
	background:
		radial-gradient(120% 80% at 20% 10%, rgba(255, 255, 255, .35), transparent 60%),
		radial-gradient(90% 70% at 85% 90%, rgba(140, 90, 30, .18), transparent 60%),
		radial-gradient(4px 4px at 30% 40%, rgba(120, 80, 30, .12), transparent),
		linear-gradient(180deg, #f5e8c8, #e9d5a8);
	color: var(--ink);
	border: 1px solid #8b6a35;
	box-shadow: inset 0 0 0 3px #f6ecd2, inset 0 0 0 4px rgba(169, 122, 28, .55), inset 0 0 40px rgba(120, 75, 25, .22), 0 8px 22px rgba(0, 0, 0, .45);
	border-radius: var(--radius);
}

h1, h2, h3, h4, .card h3, .modal-head, .wr-head h2, .fx-title, .draft-title, .ti-name, .ac-name, .ec-title {
	font-family: 'Cinzel', Georgia, serif;
}
.card h3 { color: var(--crimson); letter-spacing: 1.5px; font-weight: 800; border-bottom: 1px solid rgba(125, 31, 22, .25); padding-bottom: 6px; }
.card h3::before { content: '❦'; margin-right: 6px; color: var(--gold); font-size: 15px; }
.card h3 > span { color: var(--muted); }
.muted { color: var(--muted); }
.empty { color: var(--faint); font-style: italic; }
.neg, .cash.neg { color: #a3261b; }

/* logo in blackletter */
.logo, .tb-title, .hero-logo { font-family: 'UnifrakturMaguntia', 'Cinzel', serif; font-weight: 400; letter-spacing: 0; }
.logo { color: var(--gold-bright); text-shadow: 0 2px 0 #2a170a, 0 0 18px rgba(233, 199, 102, .35); font-size: 30px; }
.logo b, .hero-logo b, .tb-title b { color: #f2d27a; font-weight: 400; }
.hero-logo { font-size: 78px; color: #f4e8cb; }

/* wax-seal and leather buttons */
.btn {
	font-family: 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: .4px;
	background: linear-gradient(180deg, #7b4a22, #55311a); color: #f7e7c2;
	border: 1px solid #c9a24a; border-radius: 6px;
	box-shadow: inset 0 1px 0 rgba(255, 230, 170, .35), 0 3px 0 #2a170a, 0 6px 12px rgba(0, 0, 0, .35);
	text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
.btn.good { background: linear-gradient(180deg, #3f7a44, #24502a); }
.btn.bad { background: linear-gradient(180deg, #a3301f, #6d1a10); }
.btn.warn { background: linear-gradient(180deg, #b77a24, #7c4c12); }
.btn.ghost { background: linear-gradient(180deg, #efe0bb, #d9c08c); color: var(--ink); text-shadow: none; border-color: #8b6a35; box-shadow: inset 0 1px 0 #fff6dd, 0 3px 0 #8b6a35; }
.btn:disabled { filter: grayscale(.4); }
.icon-btn { background: linear-gradient(180deg, #7b4a22, #55311a); color: #f2d27a; border: 1px solid #c9a24a; }
.chip { background: var(--panel-3); color: var(--ink); border: 1px solid #8b6a35; }
.pill { background: rgba(47, 93, 52, .15); color: var(--accent); border: 1px solid rgba(47, 93, 52, .35); }

input.field, select.field { background: #f7edd3; border: 1px solid #8b6a35; border-radius: 4px; color: var(--ink); box-shadow: inset 0 2px 4px rgba(120, 75, 25, .2); }
input.field:focus, select.field:focus { border-color: var(--crimson); }

/* the oak frame around the board */
.stage { border-radius: 10px; border: 8px solid var(--oak); box-shadow: inset 0 0 0 2px #c9a24a, 0 0 0 2px #1a0f07, 0 18px 40px rgba(0, 0, 0, .6); background: #0d1b26; }

/* top bar and HUD: carved oak planks with brass */
.topbar, .hud {
	background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 13px), linear-gradient(180deg, #6a4322, #3e2513);
	color: #f4e8cb; border: 1px solid #1f1209; border-radius: 8px;
	box-shadow: inset 0 0 0 2px rgba(201, 162, 74, .55), inset 0 2px 0 rgba(255, 220, 150, .25), 0 6px 16px rgba(0, 0, 0, .5);
}
.topbar .tb-label, .hud .muted { color: #e2c487; }
.topbar b { color: #fff3d6; }
.hud .prompt { color: #fbefd2; font-size: 15.5px; }
.hud .prompt b { color: #ffe08a; }
.hud .neg { color: #ff9a8a; }
.infl { background: rgba(0, 0, 0, .25); color: #e8d3a4; }
.infl.cur { background: #c9a24a; color: #2c1b0c; }

/* heraldic player banners */
.player-row { background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 22%, #f0e0bb), #ecdab2); border-left: 0; border-radius: 4px; position: relative; padding-left: 16px; box-shadow: inset 0 0 0 1px rgba(139, 106, 53, .45); }
.player-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; background: var(--pc); clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%); }
.player-row.turn { box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px rgba(233, 199, 102, .55); background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 32%, #f6e7c2), #f3e2b9); }
.pbar { background: rgba(80, 50, 20, .2); }
.pbar > div { background: linear-gradient(90deg, #7d1f16, #c9a24a); }
.tag { background: #7d1f16; color: #f7e7c2; }
.cash { color: #6b4a12; font-weight: 800; }
.bounty { background: #7d1f16; font-family: 'Cinzel', serif; }

/* lists, log, missions, titles */
.log-entry { background: rgba(120, 80, 30, .08); color: var(--ink); border-left: 2px solid rgba(169, 122, 28, .45); border-radius: 2px; font-weight: 500; }
.mission { background: rgba(120, 80, 30, .08); border: 1px solid rgba(139, 106, 53, .3); }
.mission .m-check { border-color: #8b6a35; }
.title-row { border-bottom: 1px dotted rgba(139, 106, 53, .4); }
.effect { background: rgba(120, 80, 30, .08); }
.trade-item, .room-row { background: rgba(120, 80, 30, .1); border: 1px solid rgba(139, 106, 53, .35); }
.lv-table th { color: var(--crimson); font-family: 'Cinzel', serif; }
.lv-table tr.cur td { color: var(--accent); font-weight: 800; }
.switch span { background: #b9a07a; }
.switch input:checked + span { background: var(--accent); }

/* modals: an unrolled scroll */
.modal-back { background: rgba(10, 6, 2, .72); }
.modal { border-radius: 4px; }
.modal::before, .modal::after { content: ''; display: block; height: 10px; background: linear-gradient(180deg, #c9a46a, #8d6534 60%, #5e3f1c); border-radius: 6px; margin: 0 -2px; }
.modal-head { background: none; color: var(--crimson); border-bottom: 1px solid rgba(125, 31, 22, .3); font-size: 21px; }
.modal-head .x, .tileinfo .x { background: #7d1f16; color: #f7e7c2; border-radius: 50%; }

/* overlays on the board */
.tooltip { color: var(--ink); }
.tileinfo { color: var(--ink); }
.ti-war { background: rgba(125, 31, 22, .1); border: 1px solid rgba(125, 31, 22, .3); }
.fx-box .fx-result { color: var(--crimson); }
.fx-result.good { color: var(--accent); }
.fx-result.bad { color: #a3261b; }
.duel-side.win { background: rgba(201, 162, 74, .25); box-shadow: 0 0 0 2px var(--gold); }
.event-card .ev-fx, .event-card .ev-who { color: var(--ink); }
.hand-label { background: rgba(59, 36, 19, .88); color: #f4e8cb; border: 1px solid #c9a24a; font-family: 'Cinzel', serif; }
.cam-hint { color: rgba(244, 232, 203, .85); }
.toast { color: var(--ink); font-weight: 700; }
.toast.err { background: linear-gradient(180deg, #a3301f, #6d1a10); color: #f7e7c2; }
.toast.good { background: linear-gradient(180deg, #3f7a44, #24502a); color: #f7e7c2; }

/* cards in hand: aged card stock with a gilded frame */
.acard { border-radius: 8px; font-family: 'Alegreya', serif; }
.acard::before { border-color: rgba(169, 122, 28, .7); border-radius: 5px; }
.acard .ac-name { font-size: 13px; }
.acard.bld.green { background: linear-gradient(180deg, #f1f4df, #cfdcae); }
.acard.bld.red { background: linear-gradient(180deg, #f7e3d6, #e2b39f); }
.acard.bld.unit { background: linear-gradient(180deg, #e9ecf4, #bfc8dc); }
.acard.bld.action { background: linear-gradient(180deg, #fbf0c9, #e9cf7d); }
.bcard-pick, .stack-card { font-family: 'Alegreya', serif; }
.ecard { font-family: 'Alegreya', serif; }

/* Fürstentum bar and dice on the oak HUD */
.resbar { background: rgba(0, 0, 0, .25); border: 1px solid rgba(201, 162, 74, .5); }
.resbar .money { color: #ffe08a; font-family: 'Cinzel', serif; }
.land { color: #fff3d6; }
.dice .die.prod { background: linear-gradient(180deg, #f5d867, #c9a24a); }
.dice .die.event { background: linear-gradient(180deg, #6d3f9a, #3d1f5c); border: 1px solid #c9a24a; }

/* landing and lobby */
.landing .card { background: linear-gradient(180deg, #f5e8c8, #e9d5a8); backdrop-filter: none; }
.tagline { color: #f1dfb4; font-size: 19px; }
.landing .footer-note { color: #d9c08c; }
.waiting-room { color: var(--ink); }
.wr-head h2 { color: var(--crimson); }
.slot { background: rgba(120, 80, 30, .1); border: 1px solid rgba(139, 106, 53, .4); }
.slot.free { background: rgba(120, 80, 30, .05); border: 2px dashed rgba(139, 106, 53, .5); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #8b6a35; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- character creator ---------- */
.creator { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: stretch; width: 100%; }
.cr-stage { position: relative; min-height: 210px; border-radius: 8px; overflow: hidden;
	background: radial-gradient(120px 140px at 50% 60%, rgba(255, 214, 140, .55), transparent 70%), linear-gradient(180deg, #4a2e17, #20130a);
	box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 24px rgba(0, 0, 0, .6); }
.cr-banner { position: absolute; left: 50%; top: 0; width: 70px; height: 150px; transform: translateX(-50%);
	background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 85%, #000), var(--pc));
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); opacity: .85; box-shadow: 0 0 0 2px var(--gold-bright); }
.cr-hero { position: absolute; left: 50%; bottom: 34px; height: 170px; transform: translateX(-50%); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .7)); }
.cr-plate { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 3px 6px; text-align: center; border-radius: 4px;
	background: linear-gradient(180deg, var(--parch), #dcc290); box-shadow: 0 0 0 1px var(--gold); line-height: 1.1; }
.cr-plate b { display: block; font-family: 'Cinzel', serif; font-size: 13px; color: var(--crimson); }
.cr-plate span { font-size: 10.5px; color: var(--muted); }
.cr-pick { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cr-pick .label { text-align: left; margin: 0; }
.cr-figs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.cr-fig { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px 3px; border-radius: 6px; cursor: pointer;
	background: linear-gradient(180deg, #3d2715, #22150b); border: 1px solid rgba(233, 199, 102, .35); color: var(--parch); font: 600 10px 'Alegreya', serif; }
.cr-fig img { height: 54px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.cr-fig:hover { border-color: var(--gold-bright); }
.cr-fig.sel { border-color: var(--gold-bright); box-shadow: 0 0 0 2px var(--gold-bright), 0 0 12px rgba(233, 199, 102, .55); background: linear-gradient(180deg, #5a3a1e, #2b190c); }
.creator .colors { justify-content: flex-start; }
.wr-colors .creator { max-width: 560px; margin: 0 auto; }
.slot-avatar { position: relative; }
.slot-avatar .slot-fig { position: absolute; left: 50%; bottom: 8px; height: 118%; transform: translateX(-50%); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); z-index: 1; }
.slot-avatar .slot-fig + .avatar { position: absolute; right: -10px; bottom: -6px; width: 30px; height: 30px; z-index: 2; }
@media (max-width: 520px) {
	.creator { grid-template-columns: 1fr; }
	.cr-stage { min-height: 180px; }
	.cr-hero { height: 140px; }
}