/* ==========================================================================
   Enaveld Rollespil — modernized styles
   Keeps the existing table-based page structure (see project notes) but
   replaces old fixed-pixel, browser-prefixed CSS with a small set of design
   tokens, modern buttons/cards, and responsive rules that work without
   requiring every page to be rewritten.
   ========================================================================== */

:root {
	--color-primary: #A20025;
	--color-primary-dark: #7a001c;
	--color-accent: #F0A30A;
	--color-bg: #14090b;
	--color-surface: rgba(20, 9, 11, 0.72);
	--color-surface-solid: #2a1418;
	--color-text: #FFFFFF;
	--color-text-muted: #d9c9cc;
	--radius: 10px;
	--radius-lg: 16px;
	--shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	--font-display: 'Piedra', cursive, sans-serif;
	--font-body: Calibri, 'Segoe UI', Roboto, Arial, sans-serif;
}

* {
	box-sizing: border-box;
}

body {
	font-family: var(--font-body);
	color: var(--color-text);
	background-color: var(--color-bg);
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

/* Buttons -------------------------------------------------------------- */

input[type="submit"],
input[type="button"],
button,
.button,
.menu-btn,
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius);
	border: 0;
	min-width: 148px;
	padding: 10px 16px;
	font-family: var(--font-body);
	font-weight: bold;
	font-size: 15px;
	color: #FFF;
	background: var(--color-primary);
	box-shadow: var(--shadow);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease;
	text-decoration: none;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover,
.menu-btn:hover,
.btn:hover {
	background: var(--color-primary-dark);
}

/* Game-board tiles (e.g. the treasure-hunt dig spots) are plain buttons
   styled entirely via their own inline background-image; the generic
   button treatment above (min-width, padding, solid background, shadow)
   would otherwise stretch and paint over them at any screen size. */
/* Grid lines live on the cell, not the button: a border on every button
   meant two 1px lines (one from each of two neighboring buttons) pressed
   together between adjacent tiles, which read as a thicker, embossed
   groove rather than a flat hairline — especially obvious on real phone
   screens. border-collapse below shares a single line between cells
   instead. */
.xp-grid {
	border-collapse: collapse;
}
/* Only the outer per-tile <td> gets the grid line — each tile also
   wraps a nested inner table (for the button), and an unscoped `td`
   selector would border that inner one too, doubling the line again. */
.xp-grid > tbody > tr > td, .xp-grid > tr > td {
	border: 1px solid rgba(0, 0, 0, 0.55);
}
.xp-grid button,
.xp-grid input[type="submit"] {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	min-width: 0;
	padding: 0;
	border-radius: 0;
	/* !important needed: the PHP template hardcodes border:none inline,
	   which otherwise beats any external stylesheet rule regardless of
	   specificity. */
	border: none !important;
	box-shadow: none !important;
	outline: none;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	/* input[type=submit] renders its value as visible label text by
	   default; the value is just "&nbsp;" (kept non-empty so the click
	   still submits reliably) but hide it in case any browser adds its
	   own default padding/metrics around it. */
	font-size: 0;
	color: transparent;
	line-height: 0;
}

.xp-grid button:hover,
.xp-grid input[type="submit"]:hover {
	background-color: transparent;
}

input[type="submit"]:active,
input[type="button"]:active,
button:active,
.button:active,
.menu-btn:active,
.btn:active {
	transform: scale(0.98);
}

.submit_bottom {
	font-family: var(--font-display);
	font-size: 14px;
	border-radius: var(--radius-lg);
	background: var(--color-primary);
	color: #FFFFFF;
	padding: 10px 20px;
	border: 0;
	min-width: 200px;
	cursor: pointer;
	box-shadow: var(--shadow);
}

.submit_bottom:hover {
	background: var(--color-primary-dark);
}

/* Form fields ------------------------------------------------------------ */

.input,
input[type="text"],
input[type="password"],
input[type="date"],
textarea,
select {
	font-family: var(--font-body);
	font-size: 16px;
	border-radius: var(--radius);
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: #FFFFFF;
	color: #222;
	padding: 10px 14px;
}

.ta2 {
	font-family: var(--font-body);
	color: var(--color-text);
	width: 100%;
	max-width: 400px;
	resize: vertical;
	max-height: 400px;
	min-height: 200px;
	overflow: auto;
	background-color: var(--color-surface-solid);
	border: 2px solid #FFFFFF;
	border-radius: var(--radius);
}

/* Panels / colored blocks ------------------------------------------------ */

.table_1,
.t_add,
.t_edi,
.t_sle,
.t_tilbage,
.t_tilmeld,
.t_oversigt {
	padding: 15px;
	vertical-align: top;
	border-radius: var(--radius);
}

.t_add { background-color: #9933ff; }
.t_edi { background-color: #FA6800; }
.t_sle { background-color: #87794E; }
.t_tilmeld { background-color: #006ac1; }
.t_oversigt { background-color: #2ebcb0; }

/* "Tilbage" (back) links: the HTML draws these as a 200×200 tile with
   the label pinned to the bottom-right corner, which reads as an oddly
   oversized, unstyled block rather than a button. Turn it into an actual
   compact button — centered label, sane height, hover feedback — while
   leaving the tile-based structure in the PHP untouched. */
.t_tilbage {
	background-color: var(--color-primary-dark);
	width: 200px;
	height: 56px;
	max-width: 100%;
	box-shadow: var(--shadow);
	transition: background-color 0.15s ease;
}
.t_tilbage:hover {
	background-color: var(--color-primary);
}
.t_tilbage td {
	text-align: center !important;
	vertical-align: middle !important;
	padding: 0 !important;
}
a:has(> .t_tilbage) {
	text-decoration: none;
}

.r_back {
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: var(--radius);
}

.fejl_table {
	width: 100%;
	max-width: 480px;
	background-color: var(--color-primary);
	padding: 15px;
	border-radius: var(--radius);
	vertical-align: top;
}

.fejl_text {
	font-family: var(--font-body);
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
	font-size: 18px;
	color: #FFFFFF;
}

/* Typography helpers ------------------------------------------------------ */

.info,
.info_read,
.info_title,
.pic_title,
.tell_title,
.menu,
.menu_title,
.menu_title2,
.event,
.event_title,
.text,
.text_big,
.tekst {
	font-family: var(--font-body);
	color: var(--color-text);
}

.info_read { font-size: 13px; }
.text { font-size: 18px; }
.text_big { font-size: 24px; }
.menu_title { font-size: 26px; }

.info_top,
.info_title_top {
	font-family: var(--font-display);
	color: var(--color-text);
}

.info_top { font-size: 22px; }
.info_title_top { font-size: 36px; }

.pic_title,
.tell_title {
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

hr {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* Layout primitives --------------------------------------------------------
   New semantic building blocks for pages being rewritten off table-based
   layout (starting with login + the dashboard shell). These reuse the
   existing tokens/colors above so converted pages look the same, not
   different — only the markup producing them changes. */

.page {
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px;
}

.stack {
	display: flex;
	flex-direction: column;
	gap: var(--stack-gap, 12px);
}

.cluster {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.columns {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.columns > .column {
	flex: 1 1 320px;
	min-width: 0;
}

.card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: 20px;
}

.card-title {
	font-family: var(--font-display);
	font-size: 22px;
	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
	margin: 0 0 12px;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
}

.field label {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-text-muted);
}

.btn-primary {
	background: var(--color-primary);
}

.menu-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ability-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ability-row:last-child {
	border-bottom: none;
}

/* Give the name a fixed-width "column" so the level text that follows
   lines up at the same position on every row, instead of drifting left
   or right depending on how long each ability's name is (the previous
   justify-content: space-between spaced items based on each row's own
   content, so it couldn't align across rows). The trailing Lvl op
   form/button is then pushed to the row's right edge explicitly. */
.ability-row > a:first-child {
	flex: 0 0 140px;
}

.ability-row form {
	margin-left: auto;
}

/* Beskrivelses-boks der foldes ud direkte i siden ved klik (se
   toggleInline() i nhpup-vanilla.js), i stedet for en svævende pop-up.
   flex: 1 1 100% tvinger den til at bryde til sin egen linje når den
   sidder som barn i en .cluster eller .ability-row. order: 10 sikrer at
   den altid tegnes sidst i rækken (under navn+level), uanset at den i
   koden ligger mellem dem — ellers splitter den navn og level op på
   hver sin linje når den foldes ud. */
.pup-inline {
	flex: 1 1 100%;
	order: 10;
	background: var(--color-surface-solid);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius);
	padding: 8px 10px;
	margin-top: 6px;
	font-size: 0.95em;
}

/* Layout / responsiveness -------------------------------------------------
   The page structure still uses nested <table> elements for layout. These
   rules keep that structure working while making it fit small screens
   instead of forcing horizontal scrolling. */

table {
	max-width: 100%;
}

@media (max-width: 700px) {
	body {
		font-size: 16px;
	}

	/* Bare tables (no width attribute), full-bleed tables (width="100%"),
	   and the named content/form panels (.table_1, .t_add, .t_edi, .t_sle,
	   .t_tilbage, .t_tilmeld, .t_oversigt, .fejl_table) are layout
	   scaffolding or forms in these templates, so they stack into a single
	   column on small screens. Tables with an explicit pixel width and no
	   recognized class (image frames, icon/game grids, data tables) keep
	   their own layout and scroll horizontally instead, so grid-shaped
	   content doesn't get mangled into one column per cell. */
	table:not([width]),
	table[width="100%"],
	table.table_1, table.t_add, table.t_edi, table.t_sle,
	table.t_tilbage, table.t_tilmeld, table.t_oversigt, table.fejl_table {
		display: block !important;
		width: 100% !important;
	}

	/* Several of these panels also carry a fixed height="200" HTML
	   attribute (meant for a squat desktop tile), which survives the
	   display:block above and clips/overlaps their real (taller) mobile
	   content. .t_tilbage is excluded — its fixed height is intentional
	   (see its own rule above). */
	table.table_1, table.t_add, table.t_edi, table.t_sle,
	table.t_tilmeld, table.t_oversigt, table.fejl_table {
		height: auto !important;
	}

	table:not([width]) > tbody,
	table[width="100%"] > tbody,
	table.table_1 > tbody, table.t_add > tbody, table.t_edi > tbody, table.t_sle > tbody,
	table.t_tilbage > tbody, table.t_tilmeld > tbody, table.t_oversigt > tbody, table.fejl_table > tbody {
		display: block !important;
		width: 100% !important;
	}

	table:not([width]):not(.xp-grid) > tbody > tr, table:not([width]):not(.xp-grid) > tr,
	table[width="100%"] > tbody > tr, table[width="100%"] > tr,
	table.table_1 > tbody > tr, table.table_1 > tr,
	table.t_add > tbody > tr, table.t_add > tr,
	table.t_edi > tbody > tr, table.t_edi > tr,
	table.t_sle > tbody > tr, table.t_sle > tr,
	table.t_tilbage > tbody > tr, table.t_tilbage > tr,
	table.t_tilmeld > tbody > tr, table.t_tilmeld > tr,
	table.t_oversigt > tbody > tr, table.t_oversigt > tr,
	table.fejl_table > tbody > tr, table.fejl_table > tr {
		display: block !important;
		width: 100% !important;
	}

	table:not([width]):not(.xp-grid) > tbody > tr > td, table:not([width]):not(.xp-grid) > tr > td,
	table[width="100%"] > tbody > tr > td, table[width="100%"] > tr > td,
	table.table_1 > tbody > tr > td, table.table_1 > tr > td,
	table.t_add > tbody > tr > td, table.t_add > tr > td,
	table.t_edi > tbody > tr > td, table.t_edi > tr > td,
	table.t_sle > tbody > tr > td, table.t_sle > tr > td,
	table.t_tilbage > tbody > tr > td, table.t_tilbage > tr > td,
	table.t_tilmeld > tbody > tr > td, table.t_tilmeld > tr > td,
	table.t_oversigt > tbody > tr > td, table.t_oversigt > tr > td,
	table.fejl_table > tbody > tr > td, table.fejl_table > tr > td {
		display: block !important;
		width: 100% !important;
	}

	/* Grid/game-board tables (7×7 dig-spot map, etc.) must NOT be forced
	   into the single-column stacking above — that would turn a compact
	   board into a 49-row list. Keep normal table layout, unshrunk. */
	table.xp-grid, table.xp-grid > tbody, table.xp-grid > tbody > tr, table.xp-grid > tr {
		display: table !important;
		width: auto !important;
	}
	table.xp-grid > tbody > tr, table.xp-grid > tr {
		display: table-row !important;
	}
	table.xp-grid td {
		display: table-cell !important;
	}

	/* Ability-description boxes (.pup-inline) often embed a plain 3-column
	   table (name / "vælges fra" / level) built by race_info()/evne_info().
	   Left alone it's caught by the bare-table stacking rule above and
	   splits each row across three separate lines. Restore normal table
	   layout just inside these boxes so each row reads as one compact
	   line, like it does on desktop. */
	.pup-inline table:not([width]) {
		display: table !important;
		width: 100% !important;
	}
	.pup-inline table:not([width]) > tbody {
		display: table-row-group !important;
	}
	.pup-inline table:not([width]) > tbody > tr, .pup-inline table:not([width]) > tr {
		display: table-row !important;
		width: auto !important;
	}
	.pup-inline table:not([width]) > tbody > tr > td, .pup-inline table:not([width]) > tr > td {
		display: table-cell !important;
		width: auto !important;
		padding: 2px 6px 2px 0;
	}
	/* Each dig spot is a 50×50px cell (outer <td>, a nested 50×50 <table>,
	   and a 50×50 button/img inside that) sized to match the desktop map
	   image. Sizing every layer down to a real 30px (rather than a
	   transform:scale() shrink, which only changes how it's painted, not
	   its layout box, and made borders look soft) keeps the grid lines
	   crisp and tight at the smaller size the parchment needs on mobile. */
	table.xp-grid td {
		width: 30px !important;
		height: 30px !important;
	}
	table.xp-grid td table {
		width: 30px !important;
		height: 30px !important;
	}

	table[width]:not([width="100%"]):not(.table_1):not(.t_add):not(.t_edi):not(.t_sle):not(.t_tilbage):not(.t_tilmeld):not(.t_oversigt):not(.fejl_table):not(.xp-map) {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Character-portrait / image frames are drawn as a table with a
	   background-image and a fixed pixel width — let them shrink to fit
	   instead of becoming a horizontally-scrolling 1px sliver of a photo. */
	table[style*="background-image"]:not(.xp-map) {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 3 / 4;
		background-size: cover !important;
	}

	/* The treasure-map background is square (500×500), not a 3:4 portrait.
	   Forced to an exact pixel square (not aspect-ratio, which is only a
	   hint the browser can still grow past) with overflow hidden, because
	   the 7×7 grid inside it keeps its full unscaled layout footprint even
	   though transform below only shrinks how it's *painted* — without
	   this the map box was quietly growing taller than it is wide, which
	   skewed the "cover" background crop and let the grid spill past the
	   parchment's edge. display:block (not table) makes the clipping
	   reliable across browsers. */
	table.xp-map {
		display: block !important;
		width: 350px !important;
		height: 350px !important;
		max-width: 100% !important;
		overflow: hidden !important;
		background-size: cover !important;
		margin: 0 auto;
	}
	table.xp-map > tbody, table.xp-map > tr,
	table.xp-map > tbody > tr {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
	}
	/* Center the (much smaller) grid inside the map so it sits on the
	   flat part of the parchment instead of pinned to a corner. */
	table.xp-map > tbody > tr > td, table.xp-map > tr > td {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		height: 100% !important;
	}

	/* Grid tiles are game-board buttons, not menu actions — the generic
	   "make every button full-width" rule further down would blow up a
	   dig spot to the width of the screen, so give them back their fixed
	   size explicitly (more specific selector wins over the generic
	   button rule regardless of source order). Also strip the native
	   OS button chrome (appearance) so they're flat, not embossed. */
	table.xp-grid button,
	table.xp-grid input[type="submit"] {
		appearance: none;
		-webkit-appearance: none;
		width: 30px !important;
		min-width: 0 !important;
		height: 30px !important;
		padding: 0 !important;
		margin: 0 !important;
		box-shadow: none !important;
		outline: none;
	}

	/* !important is needed here because the PHP templates hardcode
	   width/height on individual buttons and inputs via inline style
	   attributes, which otherwise outrank an external stylesheet. */
	input[type="submit"],
	input[type="button"],
	button,
	.button,
	.menu-btn,
	.submit_bottom {
		width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		padding: 12px 16px !important;
		margin-bottom: 8px !important;
	}

	.input,
	input[type="text"],
	input[type="password"],
	input[type="date"] {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Forms end up as a single <td> per stacked row; give consecutive
	   stacked cells a little breathing room so buttons/fields don't touch. */
	td {
		padding-top: 2px;
		padding-bottom: 2px;
	}

	.columns {
		flex-direction: column;
		gap: 12px;
	}

	.menu-grid {
		flex-direction: column;
	}

	.menu-grid .btn,
	.menu-grid input[type="submit"] {
		width: 100%;
	}
}

/* ==========================================================================
   Feed (rollespil_feed.php) — photo/post feed with likes, carousel and a
   fullscreen lightbox. Built on the existing .card/.stack tokens above so
   it matches the rest of the site instead of introducing a new look.
   ========================================================================== */

.feed-post {
	position: relative;
}

.feed-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.feed-meta {
	color: var(--color-text-muted);
	font-size: 12px;
	white-space: nowrap;
}

.feed-text {
	margin-top: 8px;
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.45;
}

.feed-text-inner {
	display: -webkit-inline-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.feed-post.expanded .feed-text-inner {
	display: inline;
	-webkit-line-clamp: unset;
}

.feed-morebtn {
	display: inline;
	margin-left: 4px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--color-accent);
}

/* Carousel ----------------------------------------------------------- */

.feed-carousel {
	width: 100%;
	margin-top: 12px;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: #000;
	position: relative;
}

.feed-track {
	display: flex;
	transition: transform 0.22s ease;
}

.feed-slide {
	width: 100%;
	min-width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.feed-slide img {
	display: block;
	max-width: 100%;
	height: auto;
	max-height: 70vh;
	cursor: pointer;
}

.feed-navbtn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.45);
	color: var(--color-text);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	padding: 8px 10px;
	cursor: pointer;
	min-width: 40px;
	min-height: 40px;
	display: grid;
	place-items: center;
	font-size: 18px;
}

.feed-navbtn.prev { left: 10px; }
.feed-navbtn.next { right: 10px; }

.feed-counter {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 999px;
	padding: 5px 10px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	pointer-events: none;
}

.feed-loader,
.feed-end {
	text-align: center;
	padding: 14px;
	color: var(--color-text-muted);
}

.feed-hidden {
	display: none;
}

/* Fullscreen lightbox -------------------------------------------------- */

.feed-lightbox {
	position: fixed;
	inset: 0;
	background: #000;
	display: none;
	z-index: 9999;
	touch-action: pan-y;
}

.feed-lightbox.open {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* max-width/max-height (not width/height: 100%) so a low-resolution
   source image is shown at its native size instead of being stretched
   to fill the viewport, which is what made it look blurry. */
.feed-lightbox img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.feed-lb-close,
.feed-lb-nav {
	position: fixed;
	z-index: 2;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
}

.feed-lb-close {
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
	font-size: 20px;
}

.feed-lb-nav {
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	font-size: 26px;
}

.feed-lb-prev { left: 10px; }
.feed-lb-next { right: 10px; }

.feed-lb-counter {
	position: fixed;
	bottom: 14px;
	left: 12px;
	z-index: 2;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	padding: 6px 10px;
	color: #fff;
	font-size: 12px;
}

@media (max-width: 700px) {
	.feed-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.feed-navbtn {
		top: auto;
		bottom: 10px;
		transform: none;
	}

	/* The generic mobile "button { width: 100% !important }" rule above
	   would otherwise stretch the round carousel/lightbox nav buttons
	   into full-width bars. */
	.feed-navbtn,
	.feed-lb-nav,
	.feed-lb-close {
		width: 44px !important;
		height: 44px !important;
		min-width: 0 !important;
		padding: 0 !important;
		margin-bottom: 0 !important;
	}
}