/* Terra Crisis – Visual Direction 2026 (Anno × Catan). Loaded after style.css and medieval.css.
   The 3D world takes the whole screen; the UI floats over it in dark wood and forest-green glass with
   brass edges and parchment text. Side panels fold away; the chat opens on demand.
   Palette: Waldgrün #243A32 · Gold #C49A52 · Pergament #E7D9BC. */

:root {
	--forest: #243a32;
	--forest-2: #2e4a3f;
	--forest-glass: rgba(26, 40, 34, .80);
	--wood: #2a1c12;
	--wood-2: #4a3220;
	--gold: #c49a52;
	--gold-bright: #e3c27f;
	--parch: #e7d9bc;
	--parch-2: #f3ead6;
	--parch-dim: #b9ab8c;
	--ink: #2a1f14;
	--brass-line: rgba(196, 154, 82, .55);
	--panel-shadow: 0 10px 28px rgba(0, 0, 0, .45);
	--accent: #3f6b4f;
}

body {
	background: radial-gradient(1200px 700px at 50% 30%, rgba(196, 154, 82, .10), transparent 70%), linear-gradient(180deg, #1d2a24, #121a16);
}

/* ---------- brand ---------- */
.logo, .tb-title, .hero-logo { font-family: 'Cinzel', Georgia, serif; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; }
.logo { font-size: 19px; color: var(--parch); text-shadow: 0 2px 6px rgba(0, 0, 0, .6); white-space: nowrap; }
.logo b, .tb-title b, .hero-logo b { color: var(--gold-bright); font-weight: 800; }
.hero-logo { font-size: 64px; letter-spacing: 6px; }
.tb-brand { font-family: 'Cinzel', serif; font-weight: 800; letter-spacing: 3px; color: var(--parch); font-size: 15px; }
.tb-brand b { color: var(--gold-bright); }

/* ---------- glass panels: forest green under brass, parchment text ---------- */
.side .card {
	background: linear-gradient(180deg, rgba(36, 58, 50, .86), rgba(22, 34, 29, .84));
	backdrop-filter: blur(8px) saturate(1.1);
	-webkit-backdrop-filter: blur(8px) saturate(1.1);
	color: var(--parch);
	border: 1px solid var(--brass-line);
	border-radius: 8px;
	box-shadow: inset 0 1px 0 rgba(255, 235, 190, .12), var(--panel-shadow);
	padding: 10px 12px;
}
.side .card h3 { color: var(--gold-bright); border-bottom-color: rgba(196, 154, 82, .28); font-size: 12px; letter-spacing: 2px; }
.side .card h3::before { color: var(--gold); }
.side .card h3 > span { color: var(--parch-dim); font-family: 'Alegreya', serif; letter-spacing: .3px; text-transform: none; font-size: 12px; }
.side .muted, .side .empty { color: var(--parch-dim); }

/* fold-away panels */
.fold > summary { list-style: none; cursor: pointer; user-select: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h3 { margin: 0; padding-bottom: 0; border-bottom-color: transparent; }
.fold[open] > summary h3 { margin-bottom: 9px; padding-bottom: 6px; border-bottom-color: rgba(196, 154, 82, .28); }
.fold > summary h3::after { content: '▾'; margin-left: 4px; color: var(--gold); transition: transform .18s; font-size: 12px; }
.fold:not([open]) > summary h3::after { transform: rotate(-90deg); }
.fold > summary h3 .btn { margin-left: auto; }
.fold.grow:not([open]) { flex: none; }
.fold > summary:hover h3 { color: #f4d9a0; }
.unread { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #a8352a !important; color: #fff !important; font: 800 11px/1 'Alegreya', serif !important; letter-spacing: 0 !important; box-shadow: 0 0 0 2px rgba(0, 0, 0, .25); }

/* players: slim heraldic rows */
.side .player-row { background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 26%, rgba(255, 255, 255, .04)), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(196, 154, 82, .22); color: var(--parch); padding: 6px 8px 6px 14px; }
.side .player-row.turn { box-shadow: inset 0 0 0 2px var(--gold), 0 0 16px rgba(227, 194, 127, .35); background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 36%, rgba(255, 255, 255, .06)), rgba(255, 255, 255, .05)); }
.side .pname { color: var(--parch-2); }
.side .cash { color: var(--gold-bright); }
.side .cash.neg { color: #ff9a8a; }
.side .pts { color: var(--parch-2); }
.side .pts small, .side .pcards { color: var(--parch-dim); }
.side .pbar { background: rgba(0, 0, 0, .3); }
.side .pbar > div { background: linear-gradient(90deg, #8a6a2c, var(--gold-bright)); }
.side .title-badge { background: rgba(196, 154, 82, .2); color: var(--gold-bright); border: 1px solid var(--brass-line); }

/* lists */
.side .log-entry { background: rgba(0, 0, 0, .18); color: var(--parch); border-left-color: var(--brass-line); }
.side .mission { background: rgba(0, 0, 0, .18); border-color: rgba(196, 154, 82, .25); color: var(--parch); }
.side .mission .m-check { border-color: var(--gold); color: var(--gold-bright); }
.side .mission.done { background: rgba(63, 107, 79, .35); }
.side .title-row { border-bottom-color: rgba(196, 154, 82, .2); color: var(--parch); }
.side .effect { background: rgba(0, 0, 0, .18); color: var(--parch); }
.side .trade-item { background: rgba(0, 0, 0, .18); border-color: rgba(196, 154, 82, .3); color: var(--parch); }
.side .chat-msg { color: var(--parch); }
.side .chat-empty { color: var(--parch-dim); }
.side .chat-list { max-height: 220px; min-height: 60px; }
.side input.field { background: rgba(0, 0, 0, .28); border-color: var(--brass-line); color: var(--parch); box-shadow: none; }
.side input.field::placeholder { color: var(--parch-dim); }
.side .btn.ghost { background: linear-gradient(180deg, rgba(231, 217, 188, .14), rgba(231, 217, 188, .06)); color: var(--parch); border-color: var(--brass-line); box-shadow: inset 0 1px 0 rgba(255, 240, 210, .12), 0 3px 0 rgba(0, 0, 0, .35); text-shadow: none; }
.side .setting .s-title { color: var(--parch-2); }
.side .setting .s-desc { color: var(--parch-dim); }
.side select.field { background: rgba(0, 0, 0, .28); color: var(--parch); border-color: var(--brass-line); }
.side .rules-list { color: var(--parch); }

/* ---------- buttons: brass-edged wood, forest green for the main action ---------- */
.btn { background: linear-gradient(180deg, #5a3d24, #3a2716); border-color: var(--gold); color: var(--parch-2); }
.btn.good { background: linear-gradient(180deg, #3f6b4f, #243a32); }
.btn.big { letter-spacing: 1px; }
.icon-btn { background: linear-gradient(180deg, #4a3220, #2a1c12); border-color: var(--gold); color: var(--gold-bright); }

/* ---------- top bar and action bar: dark oak with a brass rim ---------- */
.topbar, .hud {
	background: linear-gradient(180deg, rgba(58, 40, 25, .93), rgba(32, 22, 14, .93));
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid #120b06;
	border-radius: 10px;
	box-shadow: inset 0 0 0 1px var(--brass-line), inset 0 1px 0 rgba(255, 225, 160, .18), var(--panel-shadow);
	color: var(--parch);
}
.topbar { gap: 12px; padding: 6px 14px; min-height: 44px; }
.topbar .tracker { gap: 2px; }
.topbar .infl { padding: 2px 4px; font-size: 10px; min-width: 0; }
.topbar .forecast .tb-label { display: none; }
.side .tag { font-size: 9px; padding: 0 4px; }
.topbar .tb-label { color: var(--gold); font-family: 'Cinzel', serif; letter-spacing: 1.2px; font-size: 10px; }
.topbar b { color: var(--parch-2); }
.topbar .tb-group + .tb-group { padding-left: 14px; border-left: 1px solid rgba(196, 154, 82, .22); }
.topbar .weather.storm b { color: #ffcf8a; }
.infl { background: rgba(0, 0, 0, .3); color: var(--parch-dim); }
.infl.cur { background: var(--gold); color: var(--ink); }
.hud .prompt { color: var(--parch-2); }
.hud .prompt b { color: var(--gold-bright); }
.resbar { background: rgba(0, 0, 0, .3); border-color: var(--brass-line); }
.resbar .money { color: var(--gold-bright); }
.dice .die.prod { background: linear-gradient(180deg, #e9cc7c, var(--gold)); }

/* ---------- desktop: the world fills the screen, the UI floats over it ---------- */
@media (min-width: 1151px) {
	body { overflow: hidden; }
	.app { display: block; position: relative; height: 100vh; padding: 0; }
	.center { position: absolute; inset: 0; }
	.stage { position: absolute; inset: 0; border: 0; border-radius: 0; box-shadow: none; background: #1d2a24; }
	.topbar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 20; max-width: calc(100vw - 584px); flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
	.topbar .tb-group:last-child { display: none; } /* event deck count: in the Ereignisse panel's tooltip space on wide screens */
	.topbar:has(.tb-title) { background: none; border: 0; box-shadow: none; backdrop-filter: none; }
	.tb-brand { display: none; }
	.hud { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 20; width: min(1040px, calc(100vw - 580px)); }
	.side { position: absolute; top: 12px; bottom: 12px; z-index: 15; pointer-events: none; overflow-y: auto; scrollbar-width: none; }
	.side::-webkit-scrollbar { display: none; }
	.side > * { pointer-events: auto; }
	.side.left { left: 12px; width: 240px; }
	.side.right { right: 12px; width: 272px; }
	.side .logo { padding: 4px 2px 4px 4px; font-size: 16px; letter-spacing: 1.6px; }
	.side .logo .mark { width: 28px; height: 28px; }
	.tb-brand + .tb-group { border-left: 0 !important; padding-left: 0 !important; }
	.side-actions .btn { font-size: 12px; }
	/* overlays keep clear of the panels */
	.hand { bottom: calc(var(--hud-h, 70px) + 8px); }
	.tileinfo { left: 266px; bottom: calc(var(--hud-h, 70px) + 26px); }
	.event-card { left: 266px; top: 70px; }
	.cam-hint { display: none; }
	.toasts { top: 66px; }
	.overlay-center:has(.waiting-room) { padding: 20px 306px 20px 266px; }
	.waiting-room { border-radius: 12px; box-shadow: var(--panel-shadow); }
	.auction-panel, .draft { z-index: 12; }
}

/* the parchment side of the UI (modals, tile info, tooltips) gets the warmer 2026 parchment */
.card:not(.side .card), .modal, .tileinfo, .tooltip, .toast {
	background: radial-gradient(120% 80% at 20% 10%, rgba(255, 255, 255, .35), transparent 60%), linear-gradient(180deg, var(--parch-2), var(--parch));
}
.modal-head, .wr-head h2 { color: var(--forest); }
.modal-head .x, .tileinfo .x { background: var(--forest); color: var(--parch-2); }
.card h3 { color: var(--forest); }

/* phones and narrow windows keep the stacked layout, with the same palette */
@media (max-width: 1150px) {
	.stage { border: 3px solid var(--wood); box-shadow: inset 0 0 0 1px var(--gold), var(--panel-shadow); }
	.side .card { backdrop-filter: none; background: linear-gradient(180deg, #284236, #1b2b24); }
}

/* closed panels: header only, no rule underneath */
.side .fold:not([open]) > summary h3 { border-bottom-color: transparent; padding-bottom: 0; margin-bottom: 0; }

/* lobby: parchment waiting room with a forest-green footer; no faded logo over it */
.wr-foot { background: linear-gradient(180deg, rgba(231, 217, 188, 0), var(--parch) 30%); border-top-color: rgba(196, 154, 82, .45); }
.wr-hint { color: var(--forest); }
@media (min-width: 1151px) { .topbar:has(.tb-title) { display: none; } }

/* landing: readable feature list on the dusk sky, picker stays inside its card */
.hero-points li { background: rgba(20, 32, 27, .72); border-color: var(--brass-line); color: var(--parch); }
.hero-points b { color: var(--gold-bright); }
.hero-points span:not(.hp-ico) { color: var(--parch-dim); }
.landing .cr-figs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.landing .cr-fig { min-width: 0; overflow: hidden; font-size: 9px; }
.landing .cr-fig img { max-width: 100%; object-fit: contain; }

/* map controls: back to the overview, highlight own fields */
.map-ctrl { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; gap: 6px; }
.map-ctrl[hidden] { display: none; }
.mc-btn { font: 600 13px 'Alegreya', serif; color: var(--parch); background: var(--forest-glass); border: 1px solid var(--brass-line); border-radius: 99px; padding: 5px 12px; cursor: pointer; box-shadow: var(--panel-shadow); backdrop-filter: blur(6px); white-space: nowrap; }
.mc-btn:hover { border-color: var(--gold-bright); }
.mc-btn.on { background: linear-gradient(180deg, #6a4f22, #3d2c12); color: #ffe9a8; border-color: var(--gold-bright); }
.mc-btn b { display: inline-block; min-width: 18px; margin-left: 2px; padding: 0 5px; border-radius: 99px; background: rgba(0, 0, 0, .35); font-size: 12px; }
@media (min-width: 1151px) { .map-ctrl { top: 74px; } }