/* ==========================================================================
   2.13.0 – Képregénytár: a képregény cédulája egy képregénykocka (tusvonal, rácspont-raszter, sárga felirat-
   doboz a sarokban, szóbuborék a fajtával). A kockák saját színűek, így a sötét és a világos módban is ugyanígy.
   ========================================================================== */
.nkr-tar { --nkr-tus: #1d1a17; --nkr-papir: #fbf5e3; --nkr-sarga: #f3d36b; --nkr-piros: #b8322a; }
.nkr-tar__bev { max-width: 62ch; margin: 0 auto 1.2rem; font-style: italic; text-align: center; opacity: .85; }

.nkr-szuro { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: center; margin: 0 0 1.4rem; font-size: .95rem; }
.nkr-szuro select { font: inherit; padding: .2rem .4rem; max-width: 16rem; }
.nkr-szuro__db { font-variant: small-caps; letter-spacing: .05em; opacity: .8; }

.nkr-kockak { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 1.6rem 1.2rem; }
.nkr-kocka {
	position: relative; margin: 0 0 .8rem; padding: 2.4rem 1rem 1.6rem; color: var(--nkr-tus);
	background:
		radial-gradient(circle, rgba(29, 26, 23, .09) 1px, transparent 1.4px) 0 0 / 7px 7px,
		var(--nkr-papir);
	border: 3px solid var(--nkr-tus); box-shadow: 5px 5px 0 rgba(0, 0, 0, .55);
	transform: rotate(-.35deg);
}
.nkr-kocka:nth-child(2n) { transform: rotate(.4deg); }
.nkr-kocka:nth-child(3n) { transform: rotate(-.15deg); }
.nkr-kocka[hidden] { display: none; }
.nkr-kocka__felirat {
	position: absolute; top: -3px; left: -3px; margin: 0; padding: .2rem .55rem;
	background: var(--nkr-sarga); border: 3px solid var(--nkr-tus);
	font: 700 .82rem/1.2 "Courier New", Courier, monospace; letter-spacing: .04em; text-transform: uppercase;
}
.nkr-kocka__ev { font-size: 1rem; }
.nkr-kocka__buborek {
	position: absolute; bottom: -.95rem; right: .8rem; padding: .18rem .7rem; border: 2px solid var(--nkr-tus); border-radius: 1rem;
	background: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .03em;
}
.nkr-kocka__buborek::after {
	content: ""; position: absolute; left: .9rem; top: -.45rem; width: .7rem; height: .7rem; background: #fff;
	border-left: 2px solid var(--nkr-tus); border-top: 2px solid var(--nkr-tus); transform: skewX(-25deg) rotate(45deg) scale(.75);
}
.nkr-kocka--disney .nkr-kocka__buborek { background: #e6f0fb; }
.nkr-kocka--disney .nkr-kocka__buborek::after { background: #e6f0fb; }
.nkr-kocka--parodia .nkr-kocka__buborek, .nkr-kocka--parodia .nkr-kocka__buborek::after { background: #fde5e1; }
.nkr-kocka--tovabbiras .nkr-kocka__buborek, .nkr-kocka--tovabbiras .nkr-kocka__buborek::after { background: #e8f3e3; }
.nkr-kocka--rokon .nkr-kocka__buborek, .nkr-kocka--rokon .nkr-kocka__buborek::after { background: #efe9f8; }
.nkr-kocka__cim { margin: .2rem 0 .35rem; font-size: 1.12rem; line-height: 1.25; }
.nkr-tar .nkr-kocka__cim a, .nkr-tar .nkr-kocka__cim a:visited { color: var(--nkr-tus) !important; text-decoration: none; }
.nkr-kocka__cim a:hover, .nkr-kocka__cim a:focus-visible { text-decoration: underline; text-decoration-color: var(--nkr-piros); }
.nkr-kocka__megj { margin: 0 0 .3rem; font-size: .88rem; font-style: italic; }
.nkr-kocka__al { margin: 0 0 .4rem; font-size: .85rem; font-weight: 600; }
.nkr-kocka__meghat { margin: 0 0 .4rem; font-size: .92rem; line-height: 1.4; }
.nkr-kocka__olvas { margin: .5rem 0 0; padding-top: .45rem; border-top: 2px dashed rgba(29, 26, 23, .35); font-size: .85rem; }
.nkr-kocka__olvas-cimke { font-weight: 700; }
.nkr-tar .nkr-kocka__olvas a, .nkr-tar .nkr-kocka__olvas a:visited { color: var(--nkr-piros) !important; }
.nkr-kocka .nsz-film__jelek { margin: .45rem 0 0; }
@media (max-width: 560px) {
	.nkr-kockak { grid-template-columns: 1fr; }
	.nkr-kocka, .nkr-kocka:nth-child(2n), .nkr-kocka:nth-child(3n) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.nkr-kocka, .nkr-kocka:nth-child(2n), .nkr-kocka:nth-child(3n) { transform: none; }
}
@media print {
	.nkr-szuro { display: none; }
	.nkr-kocka { box-shadow: none; transform: none; break-inside: avoid; }
}