/* ============================================================================
   misiones_gremio_board.css
   Tablero estilo "anime notice-board" SIN necesitar imágenes extra.
   - Mantiene tu tabla, pero con look de pergamino + madera + chinchetas.
   ========================================================================== */

.gm-wrap{
	margin-top:10px;
}
.gm-title{
	font-size:26px;
	margin:0 0 8px 0;
	letter-spacing:.3px;
}
.gm-subtitle{
	margin:0 0 14px 0;
	opacity:.88;
}

/* Fondo tipo madera/tablero */
.gm-board{
	border-radius:16px;
	padding:16px;
	box-shadow:0 14px 34px rgba(0,0,0,.30);
	border:1px solid rgba(0,0,0,.28);
	background:
		/* viñeta */
		radial-gradient(circle at 50% 30%, rgba(0,0,0,.00), rgba(0,0,0,.24) 78%),
		/* nudos */
		radial-gradient(circle at 18% 22%, rgba(60,30,12,.22), transparent 55%),
		radial-gradient(circle at 72% 64%, rgba(60,30,12,.18), transparent 58%),
		radial-gradient(circle at 88% 22%, rgba(60,30,12,.16), transparent 55%),
		/* vetas */
		repeating-linear-gradient(
			90deg,
			rgba(78, 40, 18, .38) 0px,
			rgba(78, 40, 18, .38) 14px,
			rgba(118, 64, 30, .38) 14px,
			rgba(118, 64, 30, .38) 30px
		),
		/* luz */
		linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.18)),
		/* base */
		linear-gradient(180deg, rgba(118,64,30,.82), rgba(58,28,10,.88));
}

/* Ciudad / sección */
.gm-city{
	margin:0 0 18px 0;
}
.gm-city:last-child{
	margin-bottom:0;
}

/* Header tipo etiqueta */
.gm-city-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:10px 12px;
	border-radius:14px;
	margin:0 0 12px 0;
	background:
		linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.12));
	border:1px solid rgba(0,0,0,.25);
	box-shadow:0 6px 14px rgba(0,0,0,.22);
	position:relative;
	overflow:hidden;
}
.gm-city-head:before{
	/* tira de papel diagonal */
	content:"";
	position:absolute;
	left:-22px;
	top:-18px;
	width:190px;
	height:46px;
	transform:rotate(-6deg);
	background:linear-gradient(180deg, rgba(255,248,230,.88), rgba(255,235,200,.68));
	border:1px solid rgba(0,0,0,.18);
	box-shadow:0 6px 10px rgba(0,0,0,.18);
}
.gm-city-name{
	position:relative;
	font-size:20px;
	font-weight:800;
	padding-left:10px;
	text-transform:uppercase;
	letter-spacing:.6px;
}
.gm-city-meta{
	position:relative;
	font-size:12px;
	opacity:.95;
	white-space:nowrap;
}

/* Mensaje "vacío" */
.gm-empty{
	padding:12px 14px;
	border-radius:12px;
	border:1px solid rgba(0,0,0,.25);
	background:rgba(255,255,255,.35);
}

/* ============================================================================
   TABLA "pergamino"
   ========================================================================== */
.gm-board .gm-table{
	width:100%;
	border-collapse:separate !important;
	border-spacing:0 !important;
	border-radius:16px;
	overflow:hidden;
	background:
		linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.20)),
		linear-gradient(135deg, rgba(255,245,220,.92), rgba(235,210,170,.78));
	border:1px solid rgba(0,0,0,.28);
	box-shadow:0 12px 18px rgba(0,0,0,.22);
	position:relative;
}

/* chincheta global del pergamino */
.gm-board .gm-table:after{
	content:"";
	position:absolute;
	top:10px;
	right:12px;
	width:16px;
	height:16px;
	border-radius:50%;
	background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(0,0,0,.18));
	border:1px solid rgba(0,0,0,.35);
	box-shadow:0 3px 6px rgba(0,0,0,.25);
}

/* header */
.gm-board .gm-table thead th{
	background:rgba(255,255,255,.40) !important;
	border-bottom:1px solid rgba(0,0,0,.18) !important;
	padding:10px 8px !important;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.4px;
	font-size:12px;
}
.gm-board .gm-table tbody td{
	padding:10px 8px !important;
	border-bottom:1px dashed rgba(0,0,0,.20) !important;
	vertical-align:top;
	background:transparent !important;
}

/* Hover estilo "tarjeta" */
.gm-board .gm-table tbody tr{
	transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.gm-board .gm-table tbody tr:hover{
	transform:translateY(-1px);
	box-shadow:0 10px 16px rgba(0,0,0,.14);
	background:rgba(255,255,255,.28);
}

/* Tipo badge */
.gm-badge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	font-size:11px;
	font-weight:900;
	letter-spacing:.35px;
	padding:4px 10px;
	border-radius:999px;
	border:1px solid rgba(0,0,0,.25);
	box-shadow:0 4px 10px rgba(0,0,0,.12);
	background:rgba(255,255,255,.55);
	white-space:nowrap;
}
.gm-badge.hunt{ background:rgba(255,235,235,.78); }
.gm-badge.gather{ background:rgba(235,255,235,.78); }
.gm-badge.other{ background:rgba(235,245,255,.78); }

/* Objetivo */
.gm-obj{
	display:flex;
	gap:10px;
	align-items:flex-start;
}
.gm-obj-icon{
	width:70px;
	min-width:70px;
	height:70px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:14px;
	border:1px solid rgba(0,0,0,.18);
	background:rgba(255,255,255,.42);
	box-shadow:0 8px 14px rgba(0,0,0,.14);
	overflow:hidden;
}
.gm-obj-icon img{
	width:64px;
	height:64px;
	object-fit:contain;
}
.gm-obj-text{
	min-width:0;
}
.gm-obj-sub{
	font-size:11px;
	opacity:.90;
	margin:0 0 4px 0;
}
.gm-obj-name{
	font-size:13px;
	font-weight:900;
	line-height:1.15;
	word-break:break-word;
}

/* Mensaje */
.gm-td-msg{
	font-size:12px;
	line-height:1.25;
	opacity:.92;
}

/* Recompensas como chips */
.gm-td-rew{
	white-space:normal !important;
}
.gm-rew-wrap{
	display:flex;
	flex-wrap:wrap;
	gap:6px 8px;
}
.gm-item{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:11px;
	padding:5px 8px;
	border-radius:12px;
	border:1px solid rgba(0,0,0,.16);
	background:rgba(255,255,255,.42);
	box-shadow:0 6px 12px rgba(0,0,0,.10);
	max-width:100%;
}
.gm-item img{
	width:18px;
	height:18px;
}
.gm-item-txt{
	white-space:nowrap;
}
.gm-item-empty{
	opacity:.85;
}

/* Filas por tipo (detalle sutil) */
.gm-row-hunt td{
	box-shadow:inset 4px 0 0 rgba(200,60,60,.25);
}
.gm-row-gather td{
	box-shadow:inset 4px 0 0 rgba(50,160,80,.22);
}

/* Responsive: reduce columnas grandes */
@media (max-width: 980px){
	.gm-board{ padding:12px; }
	.gm-city-name{ font-size:18px; }
	.gm-obj-icon{ width:60px; min-width:60px; height:60px; }
	.gm-obj-icon img{ width:54px; height:54px; }
}


/* Números (Rango/Zeny/EXP/Puntos) como mini-tarjetas legibles */
.gm-td-num{
	vertical-align:middle !important;
}
.gm-num{
	display:inline-block;
	min-width: 44px;
	padding:6px 8px;
	border-radius:12px;
	border:1px solid rgba(0,0,0,.16);
	background:rgba(255,255,255,.40);
	box-shadow:0 8px 14px rgba(0,0,0,.10);
	font-weight:800;
}
.gm-num:before{
	content: attr(data-label);
	display:block;
	font-size:10px;
	font-weight:900;
	letter-spacing:.25px;
	text-transform:uppercase;
	opacity:.75;
	margin:0 0 2px 0;
}

/* Recompensas más ancho y con mejor wrap */
.gm-td-rew{
	white-space:normal !important;
}
.gm-item{
	border-radius:14px;
	padding:6px 10px;
}


/* =========================================================
   Resumen (una sola columna para Rango/Zeny/EXP/Puntos)
   ========================================================= */
.gm-td-summary{
	vertical-align:middle !important;
}
.gm-summary{
	display:grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:8px;
	padding:10px;
	border-radius:14px;
	border:1px solid rgba(0,0,0,.16);
	background:rgba(255,255,255,.34);
	box-shadow:0 10px 16px rgba(0,0,0,.10);
}
.gm-sum-item{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:8px;
	padding:6px 8px;
	border-radius:12px;
	border:1px solid rgba(0,0,0,.14);
	background:rgba(255,255,255,.40);
	box-shadow:0 8px 14px rgba(0,0,0,.08);
}
.gm-sum-k{
	font-size:10px;
	font-weight:900;
	letter-spacing:.25px;
	text-transform:uppercase;
	opacity:.78;
	white-space:nowrap;
}
.gm-sum-v{
	font-size:12px;
	font-weight:900;
	white-space:nowrap;
}
@media (max-width: 980px){
	.gm-summary{ grid-template-columns: 1fr; }
}


/* =========================================================
   Resumen v2 (estilo "lista" como tu 2da imagen)
   - Sin burbujas/chips, solo texto ordenado.
   ========================================================= */
.gm-summary2{
	padding:10px 12px;
	border-radius:10px;
	border:1px solid rgba(0,0,0,.22);
	background:rgba(255,255,255,.18);
	box-shadow:none;
}
.gm-summary2-title{
	font-size:12px;
	font-weight:900;
	letter-spacing:.35px;
	text-transform:uppercase;
	margin:0 0 8px 0;
	padding:0 0 6px 0;
	border-bottom:1px dashed rgba(0,0,0,.25);
}
.gm-summary2-sec{
	margin:0 0 8px 0;
}
.gm-summary2-sec:last-child{
	margin-bottom:0;
}
.gm-summary2-sec-title{
	font-size:11px;
	font-weight:900;
	margin:0 0 4px 0;
	opacity:.95;
	font-weight: 900;   /* ya está fuerte, esto lo asegura */
}
.gm-summary2-line{
	font-size:12px;
	line-height:1.25;
	margin:0 0 2px 0;
	white-space:nowrap;
}
.gm-summary2-line .k{
	font-weight:800;
	opacity:.92;
}
.gm-summary2-line .v{
	font-weight:900;
}
@media (max-width: 980px){
	.gm-summary2-line{ white-space:normal; }
}
/* Salto de línea (espacio) antes de la sección Recompensas */
.gm-summary2-sec + .gm-summary2-sec{
	margin-top: 10px;  /* separación entre Requisitos y Recompensas */
	padding-top: 8px;
	border-top: 1px dashed rgba(0,0,0,.25); /* opcional, se ve pro */
}